/* ============================================================================
   onboarding-plans — module components (layer 3 of 3).

   design-tokens.css → app-shell.css (consumed as-is) → THIS file.

   The Tasks view is a port of the Sutton Hub's Objectives tracker, so the rules
   below are EXTRACTED FROM sutton-hub/app.css — exactly the rules for the
   classes the ported JS uses (dom.js, datatable.js, users.js, option-colors.js,
   views/tasks.js), copied verbatim so the table, toolbar, pills, menus, side
   panel and row-height presets look identical to the Hub. To pick up a Hub
   styling change, re-extract rather than hand-editing a copy here.

   Module-only additions are at the very end.
   ============================================================================ */

/* ============================================================================
   Sutton Hub — module-specific components ONLY.

   Layer 3 of 3. design-tokens.css holds every colour, space and radius;
   app-shell.css holds the shared chrome (.content, .title-row, .tab-row,
   .toolbar, .table, .btn, .input, .badge) and is consumed AS-IS — nothing here
   restyles a shell class.

   Every value below references a token. No hard-coded hex, no magic spacing.
   ============================================================================ */
/* ---- App canvas + sticky header ------------------------------------------ *
   The module runs as its own Clerk-gated subdomain (not inside Sutton's
   iframe), so it owns the whole page: everything sits on the --color-app-bg
   canvas and white cards float on top. The canonical header (title row + tab
   row, shell classes as-is) lives in a sticky .app-header so the view body
   scrolls under it. */
.app-canvas { min-height: 100vh; background: var(--color-app-bg); }
body { overflow-x: hidden; background: var(--color-app-bg); }
/* Hub decision (2026-08-28, per Dan): the canvas is WHITE, not the #f9f9f9
   gray — same override the onboarding v3 shell uses. Cards keep their
   hairline borders so surfaces still read on white. */
:root { --color-app-bg: var(--color-bg); }
/* Quiet custom scrollbars everywhere: slim rounded thumb, no track. The rgba
   thumb is chrome shading, not palette — same carve-out as shadows. */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .14); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, .28); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }
.app-header {
  position: sticky; top: 0; z-index: 30; /* under modals (50) and toasts (60) */
  background: var(--color-app-bg);
  /* Cancel .content's padding so the sticky background runs edge-to-edge,
     then re-inset the content. */
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-8)) 0;
  padding: var(--space-4) var(--space-8) 0;
}
/* Re-apply the shell's full-bleed tab underline one level deeper (the shipped
   .content > .tab-row selector no longer matches inside .app-header). */
.app-header .tab-row {
  margin: var(--space-2) calc(-1 * var(--space-8)) 0;
  padding: 0 var(--space-8);
}
/* v3 stage tabs: 40px tall, labels BLACK, 2px underline, active = semibold.
   Scoped to .app-header so sub-view tab rows keep the shell defaults. */
.app-header .tab {
  height: 40px;
  color: var(--color-text);
  border-bottom-width: 2px;
}
.app-header .tab .icon { width: 15px; height: 15px; }
.app-header .tab--active { font-weight: var(--fw-semibold); }
/* A page's sub-tabs — now the only tab row in the hub (no top-level page
   switcher; Sutton's side-nav opens each page). Full-bleed underline band under
   the page title, matching the shell tab row. Active = darker + accent underline. */
.app-header .subtab-row {
  display: flex; align-items: center; gap: var(--space-5);
  margin: 0 calc(-1 * var(--space-8)) 0;
  padding: 0 var(--space-8);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}
.subtab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium);
  color: var(--tab-inactive-color);
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 32px; padding: 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.subtab .icon { width: 15px; height: 15px; }
.subtab:hover { color: var(--color-text); }
.subtab--active {
  color: var(--color-text); font-weight: var(--fw-semibold);
  border-bottom-color: var(--color-text);
}
/* Pages with no sub-tabs (Cash Flow, Data Sources, Org chart): the title row is
   the whole header, so it carries the full-bleed divider itself. */
.app-header--flat {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
/* The gap the tab row's bottom margin used to provide, kept outside the
   sticky header so scrolled content shows through it correctly. */
.view-body { padding-top: var(--space-4); }
/* Objectives + Scorecard lead with a full-bleed table whose top hairline should
   sit right under the sub-tab underline — drop the body's top padding there. */
.view-body--objectives, .view-body--scorecard { padding-top: 0; }
/* ---- Tables: top borders (hub design decision, 2026-08-27) ---------------- *
   On top of the shell's full cell grid + full bleed, every table and its
   header row carry a TOP hairline: the grid reads as closed at the top edge
   instead of the header floating free. Full-bleed comes free inside #tab-body
   (app-shell.css); .card replicates the negative-margin bleed below. */
.table thead th { border-top: 1px solid var(--color-border-faint); }
.table { border-top: 1px solid var(--color-border-faint); }
/* ---- Shared dropdown (shadcn-style — DESIGN.md golden rule 5) ------------- */
.menu {
  position: fixed; z-index: 90; min-width: 180px; max-height: 320px;
  overflow-y: auto; padding: 4px;
  background: var(--color-bg); border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-input); box-shadow: var(--shadow-md);
  font-size: var(--fs-base);
}
.menu-item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  appearance: none; border: none; background: none; font: inherit;
  font-size: var(--fs-base); color: var(--color-text);
  padding: 6px 8px; border-radius: 6px; cursor: pointer; text-align: left;
}
.menu-item:hover, .menu-item--focus { background: var(--color-hover); }
.menu-item--danger { color: var(--color-danger-text); }
.menu-check { width: 16px; flex: none; display: inline-flex; }
.menu-check .icon { width: 14px; height: 14px; }
.menu-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-hint { margin-left: auto; color: var(--color-muted); font-size: var(--fs-xs); }
.menu-sep { height: 1px; background: var(--color-border-faint); margin: 4px 6px; }
.menu-group {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-muted); padding: 5px 8px 2px;
}
/* The select-shaped trigger: input-like, chevron right-aligned. A hidden
   native <select> rides underneath for accessibility. */
.select-wrap { position: relative; display: inline-flex; }
.select-native {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
}
.select-trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--control-height); padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--btn-secondary-border); border-radius: var(--radius-input);
  background: var(--color-bg); color: var(--color-text);
  font: inherit; font-size: var(--fs-base); cursor: pointer;
  min-width: 120px; justify-content: space-between;
}
.select-trigger:hover { background: var(--color-hover); }
.select-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select-chev { width: 14px; height: 14px; color: var(--color-muted); flex: none; }
/* ---- Peek (right slide-over, shared) --------------------------------------- */
.peek-scrim { position: fixed; inset: 0; z-index: 45; }
.peek {
  position: fixed; top: 0; right: 0; height: 100vh; width: 500px; max-width: 92vw;
  z-index: 46;
  background: var(--color-bg); border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform .22s ease;
}
.peek--open { transform: none; }
.peek-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4); border-bottom: 1px solid var(--color-border);
}
.peek-head .icon { color: var(--color-label); }
.peek-title { font-weight: var(--fw-semibold); flex: 1; }
.peek-head-actions { display: inline-flex; align-items: center; }
.peek-body { flex: 1; overflow-y: auto; padding: var(--space-4); }
.peek-foot { border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); }
/* ---- Checkbox (shadcn-style) ----------------------------------------------- */
.cbx { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; }
.cbx-input { position: absolute; opacity: 0; pointer-events: none; }
.cbx-box {
  flex: none; width: 16px; height: 16px; border-radius: 5px;
  border: 1px solid var(--color-border); background: var(--color-bg);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease;
}
.cbx-check { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .12s ease; }
.cbx-input:checked + .cbx-box { background: var(--color-accent-bright); border-color: var(--color-accent-bright); }
.cbx-input:checked + .cbx-box .cbx-check { opacity: 1; }
.cbx-input:focus-visible + .cbx-box { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.cbx-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text); }
/* ---- Pills ----------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  white-space: nowrap;
}
.pill--blue   { background: var(--pill-blue-bg);   color: var(--pill-blue-text); }
.pill--gray   { background: var(--pill-gray-bg);   color: var(--pill-gray-text); }
.pill--green  { background: var(--pill-green-bg);  color: var(--pill-green-text); }
.pill--red    { background: var(--pill-red-bg);    color: var(--pill-red-text); }
.pill--amber  { background: var(--pill-amber-bg);  color: var(--pill-amber-text); }
.pill--yellow { background: var(--pill-yellow-bg); color: var(--pill-yellow-text); }
.pill--violet { background: var(--pill-violet-bg); color: var(--pill-violet-text); }
/* ---- Banners ------------------------------------------------------------- */
.banner {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  border: 1px solid var(--banner-border);
  border-radius: var(--radius-card);
  background: var(--banner-bg);
  color: var(--banner-text);
  font-size: var(--fs-base); line-height: var(--lh-base);
}
.banner .icon { flex: none; margin-top: 2px; }
.banner--warn   { background: var(--pill-yellow-bg); border-color: var(--pill-yellow-text); }
.banner--danger { background: var(--pill-red-bg);    border-color: var(--pill-red-text); }
.banner--success{ background: var(--pill-green-bg);  border-color: var(--pill-green-text); }
/* ---- Buttons: only the additions the shell does not define ---------------- */
.btn--danger {
  background: var(--color-danger-text); color: var(--btn-primary-text);
  box-shadow: var(--shadow-sm);
}
.btn--danger:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.icon-ghost:disabled { opacity: .4; cursor: not-allowed; }
/* Label-above-input grid for modal forms. */
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}
.form-grid .input, .form-grid .select-trigger { width: 100%; }
.icon--spin { animation: dh-spin 1s linear infinite; }
@keyframes dh-spin { to { transform: rotate(360deg); } }
/* ---- Progress meter -------------------------------------------------------- */
.meter {
  height: 6px; width: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  transition: width .4s ease;
}
/* ---- Fields ---------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 2px; }
.field-label { font-size: var(--fs-sm); color: var(--color-label); }
.field-value { font-size: var(--fs-base); color: var(--color-text); font-weight: var(--fw-medium); }
/* ---- Empty / loading states ------------------------------------------------ */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-4); text-align: center;
}
.empty-icon { color: var(--color-muted); }
.empty-icon .icon { width: 28px; height: 28px; }
.empty-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.empty-detail { font-size: var(--fs-base); color: var(--color-label); max-width: 460px; }
.loading {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-6) 0; color: var(--color-label); font-size: var(--fs-base);
}
/* ---- Toasts ---------------------------------------------------------------- */
.toasts {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 60;
  display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-card);
  border: 1px solid var(--color-border); background: var(--color-bg);
  box-shadow: var(--shadow-md); font-size: var(--fs-base);
}
.toast .icon { flex: none; margin-top: 2px; }
.toast-body { flex: 1; }
.toast--error   { border-color: var(--pill-red-text); background: var(--pill-red-bg); }
.toast--success { border-color: var(--pill-green-text); background: var(--pill-green-bg); }
/* ---- Modal ------------------------------------------------------------------ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--space-8) var(--space-4);
  background: rgba(12, 10, 9, .32); overflow-y: auto;
}
.modal {
  width: 100%; max-width: 560px;
  border-radius: var(--radius-card); background: var(--color-bg);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.modal-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.modal-body { padding: var(--space-4); overflow-y: auto; max-height: 70vh; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.modal-text { font-size: var(--fs-base); line-height: var(--lh-base); margin: 0 0 var(--space-3); }
/* The monthly grid: first column sticky, months scroll horizontally. */
.table-scroll { overflow-x: auto; }
/* Full-bleed for a horizontally-scrolling table inside #tab-body: the bleed
   moves to the scroll wrapper (the shell's negative-margin rule on .table
   would fight the overflow container), first/last cells keep the 32px inset
   via the shell's padding rules. */
.content #tab-body > .table-scroll {
  margin-left: calc(-1 * var(--space-8));
  margin-right: calc(-1 * var(--space-8));
}
.content #tab-body > .table-scroll .table {
  margin-left: 0; margin-right: 0;
  width: max-content; min-width: 100%;
}
/* ============================================================================
   OKRs
   ============================================================================ */
.okr-progress { display: flex; align-items: center; gap: var(--space-2); min-width: 140px; }
.okr-progress .meter { width: 90px; }
.kr-pct { font-size: var(--fs-xs); color: var(--color-label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.okr-section-label {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-label); font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--color-border-faint);
  padding-bottom: var(--space-1);
  margin: var(--space-5) 0 var(--space-3);
}
.okr-hint { font-size: var(--fs-sm); color: var(--color-label); margin: 0 0 var(--space-3); }
/* ---- Rich text editor -------------------------------------------------------- */
.rt {
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  overflow: hidden; background: var(--color-bg);
}
.rt:focus-within { border-color: var(--color-accent); }
.rt-toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 4px; background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border-faint);
  position: sticky; top: 0; z-index: 1;
}
.rt-btn {
  appearance: none; border: none; background: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px; color: var(--color-label);
  display: inline-flex; align-items: center; justify-content: center;
}
.rt-btn:hover { background: var(--color-hover); color: var(--color-text); }
.rt-btn--on { background: var(--color-hover); color: var(--color-accent); }
.rt-btn .icon { width: 15px; height: 15px; }
.rt-sep { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--color-border-faint); }
.rt-editor {
  padding: var(--space-3); font-size: var(--fs-base); line-height: 1.65;
  color: var(--color-text); outline: none; overflow-y: auto;
}
.rt-editor:empty::before { content: attr(data-placeholder); color: var(--color-muted); }
.rt-editor p { margin: 0 0 var(--space-2); }
.rt-editor ul { list-style: disc; padding-left: var(--space-5); margin: 0 0 var(--space-2); }
.rt-editor ol { list-style: decimal; padding-left: var(--space-5); margin: 0 0 var(--space-2); }
.rt-editor li { margin-bottom: 2px; }
.rt-editor h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: var(--space-3) 0 var(--space-1); }
.rt-editor blockquote {
  margin: 0 0 var(--space-2); padding-left: var(--space-3);
  border-left: 2px solid var(--color-border); color: var(--color-label);
}
/* The objective description is a compact rich-text box. */
.rt--okr .rt-editor { min-height: 120px; max-height: 320px; }
/* Objectives table: expand toggle + subtask child rows. */
.okr-obj-cell { white-space: nowrap; position: relative; }
/* Sticky header: the Objectives table body scrolls under its header row. The
   wrapper (.okr-obj-scroll) is bounded to the viewport (max-height set in JS) so
   it becomes the vertical scroll container; the header cells stick to its top.
   z-index sits under the app-header (30) but over the body cells. */
.okr-obj-scroll { overflow-y: auto; }
.okr-obj-table thead th { position: sticky; top: 0; z-index: 3; background: var(--color-bg); }
.okr-obj-table thead th.okr-period--current { background: var(--banner-bg); }
/* Tighten the Objective column's left gutter (the shell's default is 32px) so
   the titles sit closer to the left edge / the hover grip. Header + cells
   share the value so they stay aligned. */
.content #tab-body .table.okr-obj-table th:first-child,
.content #tab-body .table.okr-obj-table td:first-child { padding-left: var(--space-6); }
/* Header spacer so the "Objective" label lines up with the row titles (which
   follow the expand chevron); the grip sits in the left padding gutter. */
.okr-obj-head-pad { display: inline-block; width: 19px; }
.okr-expand {
  appearance: none; background: none; border: none; cursor: pointer; padding: 0;
  margin-right: 4px; color: var(--color-muted); display: inline-flex; vertical-align: middle;
}
.okr-expand:hover { color: var(--color-text); }
.okr-expand .icon { width: 15px; height: 15px; }
.okr-expand-spacer { display: inline-block; width: 19px; }
.okr-obj-title { vertical-align: middle; }
.okr-sub-badge {
  margin-left: var(--space-2); font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  color: var(--color-label); background: var(--color-surface-alt);
  padding: 1px 6px; border-radius: var(--radius-pill); vertical-align: middle;
}
/* Task tree: nested subtask rows carry the full column set, indented by depth. */
.okr-indent { display: inline; }
.okr-prog-cell .sc-input { width: 58px; text-align: right; }
.okr-rollup { display: flex; align-items: center; gap: var(--space-2); }
/* Row drag handle (6-dot grip), shown on hover; drop indicator. */
.row-grip {
  display: inline-flex; align-items: center; cursor: grab; vertical-align: middle;
  color: var(--color-muted); opacity: 0; margin-right: 2px; flex: none;
}
/* On Objectives the drag handle floats in the cell's left padding gutter
   (hover-only) so it doesn't push the title right — the title then lines up
   with the "Objective" header. (Scorecard keeps the inline grip above.) */
.okr-obj-cell .row-grip {
  /* The grip lives in the 24px left gutter (before the expand caret, which
     starts at the content edge), centered there: (24 - 15px grip) / 2 ≈ 5px. */
  position: absolute; left: 5px; top: 0; bottom: 0; margin-right: 0;
}
.row-grip:active { cursor: grabbing; }
.row-grip .icon { width: 15px; height: 15px; }
tr:hover .row-grip { opacity: 1; }
tr.row-drop td { box-shadow: inset 0 2px 0 var(--color-accent); }
/* Drag-and-drop zones: a line above/below for a sibling drop, a full-row tint
   for nesting the dragged row as a subtask of this one. */
tr.row-drop-before td { box-shadow: inset 0 2px 0 var(--color-accent); }
tr.row-drop-after td { box-shadow: inset 0 -2px 0 var(--color-accent); }
tr.row-drop-child td { background: var(--banner-bg); box-shadow: inset 0 0 0 1.5px var(--color-accent); }
/* Bulk-select gutter (Objectives + trackers): widen the Name cell's left gutter
   so the far-left select checkbox and the drag grip both fit without shifting
   the title. Header + body padding stay equal so "Name" keeps aligning. */
.content #tab-body .table.okr-selectable th:first-child,
.content #tab-body .table.okr-selectable td:first-child { padding-left: 44px; }
.okr-selectable .okr-obj-cell .row-grip { left: 24px; }
/* was 5px — room for the checkbox */
.okr-sel {
  position: absolute; left: 3px; top: 0; bottom: 0; margin: auto 0;
  width: 16px; height: 16px; border: 1.5px solid var(--color-border);
  border-radius: 4px; background: var(--color-bg); cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s ease;
}
tr:hover .okr-sel, .okr-sel--on { opacity: 1; }
.okr-sel:hover { border-color: var(--color-muted); }
.okr-sel--on { background: var(--color-accent); border-color: var(--color-accent); }
.okr-sel-check { width: 12px; height: 12px; color: #fff; opacity: 0; }
.okr-sel--on .okr-sel-check { opacity: 1; }
/* Floating bulk-edit bar (bottom center) when rows are selected. */
.okr-bulkbar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 40; display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  padding: var(--space-2) var(--space-3);
}
.okr-bulk-count { font-weight: var(--fw-semibold); font-size: var(--fs-sm); white-space: nowrap; }
.okr-bulk-div { width: 1px; align-self: stretch; background: var(--color-border); margin: 2px var(--space-1); }
/* Searchable combobox (Owner). */
.combo { position: relative; }
.combo-input { width: 100%; }
.combo-menu {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40;
  max-height: 220px; overflow-y: auto;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-input); box-shadow: var(--shadow-md); padding: 4px;
}
.combo-item {
  display: block; width: 100%; text-align: left; appearance: none; border: none; background: none;
  font: inherit; color: var(--color-text); cursor: pointer;
  padding: 6px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-item:hover { background: var(--color-hover); }
/* Shared user avatars + owner chips (js/users.js). */
.user-avatar {
  flex: none; width: 22px; height: 22px; border-radius: 999px; object-fit: cover;
}
.user-avatar--sm { width: 18px; height: 18px; }
.user-avatar--txt {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-alt); color: var(--color-label);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
}
.user-avatar--empty {
  display: inline-block; background: var(--color-surface-alt);
  border: 1px dashed var(--color-border); box-sizing: border-box;
}
.user-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.user-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-field { display: flex; align-items: center; gap: var(--space-2); }
.owner-field .combo { flex: 1; min-width: 0; }
.owner-field-av { flex: none; display: inline-flex; }
/* Task picker (move under / add existing subtask). */
.task-picker-list { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; margin-top: var(--space-2); }
.task-picker-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  appearance: none; border: none; background: none; font: inherit; cursor: pointer;
  text-align: left; color: var(--color-text); padding: 8px; border-radius: var(--radius-input);
}
.task-picker-item:hover { background: var(--color-hover); }
.task-picker-meta { color: var(--color-muted); font-size: var(--fs-sm); }
.okr-subtask-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* Reorderable objective column headers (drag to rearrange). */
.okr-col-th { cursor: grab; }
.okr-col-th:active { cursor: grabbing; }
.okr-col-th.okr-col-drop { box-shadow: inset 2px 0 0 var(--color-accent); }
/* A grouped-but-hidden column: still rendered (so the grouper keeps its data)
   but visually removed, so you can hide a column and stay grouped by it. */
.okr-col-hidden { display: none; }
/* Inline value-chain dropdown cell in the objectives table. */
.okr-vc-cell { cursor: pointer; }
.okr-vc-cell:hover { background: var(--color-hover); }
.okr-vc-chev { width: 13px; height: 13px; color: var(--color-muted); margin-left: 4px; vertical-align: middle; opacity: 0; }
.okr-vc-cell:hover .okr-vc-chev { opacity: 1; }
.okr-vc-label { vertical-align: middle; }
/* Inline Status cell: the pill sits inline with the reveal-on-hover chevron. */
.okr-status-cell .pill { vertical-align: middle; }
/* Inline Owner cell: click-to-edit, same hover affordance as the other cells.
   The owner chip is an inline-flex, so pin it to the cell's vertical middle
   (like .okr-vc-label / .okr-status-cell .pill) — otherwise it aligns to its
   text baseline and rides high in the row. */
.okr-owner-cell { cursor: pointer; }
.okr-owner-cell:hover { background: var(--color-hover); }
.okr-owner-cell .user-chip { vertical-align: middle; }
/* Name cell: the title text invites inline rename (click text to edit); the
   rest of the cell's whitespace opens the side panel. */
.okr-obj-title { cursor: text; border-radius: 4px; }
.okr-obj-title:hover { background: var(--color-hover); }
/* Free-text inline editors (title, timeframe, text custom columns) are
   left-aligned, overriding .sc-input's numeric right-align (defined later in the
   file, so match specificity via .sc-input.*). Don't force width:100% here — in
   the fixed-layout table that collapses/clips the input (showing an ellipsis)
   because the title editor sits inside inline spans; min-width handles sizing. */
.sc-input.okr-title-edit { min-width: 220px; max-width: 100%; text-align: left; }
/* Panel Subtasks tab: each child task is a click-to-open row. */
.okr-subtask-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
.okr-subtask-item { display: flex; align-items: center; gap: var(--space-2); }
.okr-subtask-open {
  flex: 1; text-align: left; appearance: none; background: none; cursor: pointer; font: inherit;
  color: var(--color-text); padding: 6px 8px;
  border: 1px solid var(--color-border-faint); border-radius: var(--radius-input);
}
.okr-subtask-open:hover { background: var(--color-hover); }
.okr-subtask-meta { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Side-panel form: stacked rows, label on the left, control on the right. */
.field-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.field-rows .field { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); }
.field-rows .field-label { width: 150px; flex: none; margin: 0; text-align: left; }
.field-rows .field > :last-child { flex: 1; min-width: 0; }
.field-rows .field .select-wrap { display: block; }
.field-rows .field .select-trigger,
.field-rows .field .combo-input,
.field-rows .field .team-field,
.field-rows .field .combo,
.field-rows .field .input { width: 100%; }
.okr-title-input, .sc-m-title { width: 100%; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
/* Internal chat / comment thread. */
.chat { margin-top: var(--space-2); }
.chat-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.chat-msg { border: 1px solid var(--color-border-faint); border-radius: var(--radius-input); padding: var(--space-2) var(--space-3); }
.chat-msg-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 2px; }
.chat-author { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.chat-when { color: var(--color-muted); font-size: var(--fs-2xs); }
.chat-del { margin-left: auto; opacity: 0; }
.chat-msg:hover .chat-del { opacity: 1; }
.chat-body { white-space: pre-wrap; font-size: var(--fs-sm); line-height: 1.5; }
.chat-composer { display: flex; gap: var(--space-2); align-items: flex-start; }
.chat-input { flex: 1; resize: vertical; }
/* Objective panel tabs (Progress updates / Key results / Supports). */
.okr-tabs {
  display: flex; align-items: center; gap: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin: var(--space-5) 0 var(--space-3);
}
.okr-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium);
  color: var(--tab-inactive-color); display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0; margin-bottom: -1px; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.okr-tab:hover { color: var(--color-text); }
.okr-tab-count {
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
  background: var(--color-surface-alt); color: var(--color-label);
  display: inline-flex; align-items: center; justify-content: center;
}
.okr-tab-body { display: block; }
.team-manage { display: flex; flex-direction: column; gap: var(--space-1); }
.team-manage-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border-faint);
}
.team-manage-name { font-weight: var(--fw-medium); }
/* Objective progress updates (panel composer + log). */
.okr-updates-anchor { scroll-margin-top: var(--space-3); }
.okr-upd-compose {
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap;
}
.okr-upd-compose .okr-upd-date { width: 200px; flex: none; }
.okr-upd-compose .okr-upd-text { flex: 1; min-width: 160px; }
.okr-updates { display: flex; flex-direction: column; gap: var(--space-2); }
.okr-update { display: flex; align-items: center; gap: var(--space-2); }
.okr-update-when {
  flex: none; width: 150px; font-size: var(--fs-sm); color: var(--color-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.okr-update-text { flex: 1; }
/* Objectives period picker in the title row. */
.okr-period-picker { display: inline-flex; align-items: center; gap: var(--space-2); }
.okr-period-picker-label { font-size: var(--fs-sm); color: var(--color-label); }
/* Objectives table with trailing period columns (day/week/month/quarter/year).
   Scoped so plain objective tables (no periods) are untouched. */
.okr-obj-table th:first-child, .okr-obj-table td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--color-bg);
}
.okr-obj-table tr.row--clickable:hover td:first-child { background: var(--color-hover); }
.okr-obj-table .dt-group-cell, .okr-obj-table .dt-empty-row td { position: static; }
.okr-period { line-height: 1.3; white-space: nowrap; text-align: center; }
.okr-period-sub { font-size: var(--fs-2xs); color: var(--color-muted); font-weight: var(--fw-regular); }
.okr-period--current { background: var(--banner-bg); color: var(--color-accent); }
.okr-period-cell {
  cursor: pointer; min-width: 120px; max-width: 200px; color: var(--color-label);
}
.okr-period-cell:hover { background: var(--color-hover); }
.okr-period-cell--current { background: var(--banner-bg); }
.okr-period-cell--current:hover { background: var(--color-hover); }
.okr-period-text {
  display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-text);
}
.sc-input {
  width: 64px; border: 1px solid var(--color-accent); border-radius: 4px;
  font: inherit; font-size: var(--fs-base); text-align: right;
  padding: 2px 4px; outline: none; background: var(--color-bg);
}
/* ============================================================================
   CEO session
   ============================================================================ */
/* The AI grammar: the animated gradient means "the AI lives here" — spent on
   the review button only, never decoration. */
.btn--ai {
  background: var(--grad-ai-wrap); background-size: 300% 100%;
  animation: gradmove 7s linear infinite;
  color: #fff; box-shadow: var(--shadow-sm); border: none;
}
.btn--ai:hover { filter: brightness(1.06); }
/* Markdown (AI review) */
.md { font-size: var(--fs-base); line-height: 1.65; color: var(--color-text); }
.md h3 {
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  margin: var(--space-5) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-faint);
}
.md h3:first-child { margin-top: 0; }
.md h4 { font-size: var(--fs-base); font-weight: var(--fw-semibold); margin: var(--space-4) 0 var(--space-1); }
.md p { margin: 0 0 var(--space-3); }
.md ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.md li { margin-bottom: var(--space-1); }
/* ---- Data-table toolbar: search / group / filter / sort (2026-09-18) -------
   A shared enhancer (js/datatable.js) inserts a .dt-toolbar above any table it
   is called on and makes opted-in headers click-to-sort. The toolbar sits in
   #tab-body, so it inherits the shell's 32px content inset and lines up with
   the table's first-column cell text; the table itself keeps its full bleed. */
.dt-toolbar {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-3) 0; flex-wrap: wrap;
}
.dt-search { position: relative; display: inline-flex; align-items: center; }
.dt-search-icon {
  position: absolute; left: var(--space-2); width: 15px; height: 15px;
  color: var(--color-muted); pointer-events: none;
}
/* Shadcn-style toolbar controls: white bg, light-gray outline, subtle shadow. */
.dt-search-input {
  height: 28px; padding: 0 var(--space-2) 0 calc(var(--space-2) + 20px);
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-sm);
  font: inherit; font-size: var(--fs-sm); min-width: 220px;
}
.dt-search-input:focus { outline: none; border-color: var(--color-accent); }
.dt-search-input::-webkit-search-cancel-button { cursor: pointer; }
.dt-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 28px; padding: 0 var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-sm);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.dt-btn:hover { background: var(--color-hover); }
.dt-btn .icon { width: 15px; height: 15px; color: var(--color-muted); }
.dt-btn--icon { padding: 0; width: 28px; justify-content: center; }
.dt-filter-badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
  background: var(--color-accent); color: #fff;
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  display: inline-flex; align-items: center; justify-content: center;
}
/* Sortable headers: a muted caret that gains accent when the column is sorted. */
.dt-th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dt-th-sortable:hover { color: var(--color-accent); }
.dt-sort-caret {
  display: inline-flex; vertical-align: middle; margin-left: 4px;
  color: var(--color-muted);
}
.dt-sort-caret .icon { width: 13px; height: 13px; }
.dt-th-sortable.dt-sorted { color: var(--color-text); }
.dt-th-sortable.dt-sorted .dt-sort-caret { color: var(--color-accent); }
/* A .num header keeps the caret next to its right-aligned label. */
.table thead th.num.dt-th-sortable { white-space: nowrap; }
/* Group header rows injected into the tbody. */
.dt-group > .dt-group-cell {
  cursor: pointer; background: var(--dt-group-bg, var(--color-surface-alt));
  font-weight: var(--fw-semibold); color: var(--color-text);
  padding: var(--space-2) var(--space-8);
}
.dt-group:hover > .dt-group-cell { filter: brightness(0.97); }
.dt-group-chev { width: 14px; height: 14px; vertical-align: middle; margin-right: 6px; color: var(--color-muted); }
.dt-group-label { vertical-align: middle; }
.dt-group-count {
  margin-left: var(--space-2); color: var(--color-muted);
  font-weight: var(--fw-regular); font-size: var(--fs-sm);
}
/* Objectives: larger group headers (Asana-style section titles). */
.okr-obj-table .dt-group > .dt-group-cell {
  font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  padding-top: var(--space-3); padding-bottom: var(--space-2);
}
/* Task name cells sit one weight lighter than the shell's .cell-strong. */
.okr-obj-table td.okr-obj-cell { font-weight: var(--fw-medium); }
.okr-obj-table .dt-group-chev { width: 18px; height: 18px; margin-right: 8px; }
.okr-obj-table .dt-group-count { font-size: var(--fs-sm); margin-left: var(--space-3); }
.okr-obj-table.okr-hide-group-count .dt-group-count { display: none; }
/* Nested subgroup headers read one step smaller than the top-level group. */
.okr-obj-table .dt-group:not(.dt-group--l0) > .dt-group-cell { font-size: var(--fs-md); }
.okr-obj-table .dt-group:not(.dt-group--l0) .dt-group-chev { width: 16px; height: 16px; }
.dt-empty-row > td {
  padding: var(--space-6) var(--space-8);
  color: var(--color-muted); text-align: center;
}
/* Indent a group's member rows a little under their group header, so grouped
   content reads as nested. The extra inset stacks on the shell's first-cell
   padding; subtask depth padding (an inner span) still nests within. */
.content #tab-body .table .dt-group-member > td:first-child { padding-left: calc(var(--space-8) + var(--dt-member-indent, 18px)); }
/* Inline "Add task" row (tickets-repo grammar): a muted affordance that becomes
   a borderless title input on click. A leading gutter spacer (.okr-obj-head-pad,
   matching the expand caret) lines the "+"/input up with the task titles. */
.okr-add-row .okr-add-cell { color: var(--color-muted); font-size: var(--fs-sm); cursor: pointer; }
.okr-add-row:hover .okr-add-cell { color: var(--color-text); background: var(--color-hover); }
.okr-add-inner { display: inline-flex; align-items: center; }
.okr-add-inner .okr-obj-head-pad { flex: none; }
.okr-add-inner > .icon { width: 15px; height: 15px; margin-right: 6px; flex: none; }
.okr-add-cell--editing { background: var(--color-hover); cursor: default; }
.okr-add-cell--editing .okr-add-inner { display: flex; width: 100%; }
.okr-add-input {
  flex: 1; min-width: 0; max-width: 520px; border: none; background: transparent;
  font: inherit; font-weight: var(--fw-semibold); color: var(--color-text); padding: 2px 0;
}
.okr-add-input:focus { outline: none; }
.okr-add-input::placeholder { color: var(--color-muted); font-weight: var(--fw-regular); }
/* Column resizing: a drag handle on each header cell's right edge. Widths are
   persisted per table; the table runs table-layout:fixed so cells truncate. */
/* Body cells truncate with an ellipsis; header cells keep overflow VISIBLE so the
   resize handle (which overhangs the edge) isn't clipped — otherwise the grab
   zone shrinks to a sliver and the sticky first column is nearly ungrabbable. */
.dt-fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-fixed th { overflow: visible; white-space: nowrap; }
.dt-resize-th { position: relative; }
.dt-resize-handle {
  position: absolute; top: 0; right: -4px; width: 12px; height: 100%;
  cursor: col-resize; user-select: none; z-index: 5;
}
.dt-resize-handle::after {
  content: ''; position: absolute; top: 15%; right: 4px; width: 2px; height: 70%;
  background: transparent; border-radius: 1px; transition: background .12s ease;
}
/* The divider only shows while hovering that column header, then accent on grab. */
.dt-resize-th:hover .dt-resize-handle::after { background: var(--color-border); }
.dt-resize-handle:hover::after { background: var(--color-accent); width: 3px; }
body.dt-resizing { cursor: col-resize; user-select: none; }
body.dt-resizing * { cursor: col-resize !important; }
/* ---- Objectives custom-view pills (in the table toolbar) -------------------- */
/* enhanceTable pushes search/group/filter into this right-aligned group when a
   leading slot (the pills) is present. */
.dt-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.obj-pillbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.obj-trailing { display: inline-flex; align-items: center; gap: var(--space-2); }
/* View selectors look like the shadcn Group/Filter buttons: white, gray
   outline, subtle shadow; the active one gains an accent border. */
.obj-pill {
  height: 28px; padding: 0 var(--space-3); cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-bg); box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm); color: var(--color-text); white-space: nowrap;
  display: inline-flex; align-items: center;
}
.obj-pill:hover { background: var(--color-hover); }
.obj-pill-add { color: var(--color-label); }
.obj-pill-add:hover { color: var(--color-accent); }
/* Group highlight color picker (modal) */
.obj-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.obj-swatch {
  width: 40px; height: 28px; border-radius: var(--radius-input);
  border: 1px solid var(--color-border); cursor: pointer;
}
.obj-swatch--none { width: auto; padding: 0 10px; font-size: var(--fs-sm); color: var(--color-label); background: var(--color-bg); }
.obj-color-input { width: 48px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-input); background: none; cursor: pointer; }
/* ---- Objectives custom columns --------------------------------------------- */
.okr-cc-cell { cursor: pointer; }
.okr-cc-cell:hover { background: var(--color-hover); }
.okr-cc-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.okr-opts { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.okr-opt-row { display: flex; align-items: center; gap: var(--space-2); }
.okr-opt-in { flex: 1; }
/* Colored option pills (single / multi-select custom columns) — Asana-style:
   a soft tinted background with darker text, used in cells and dropdowns. */
.okr-opt-pill {
  display: inline-flex; align-items: center; vertical-align: middle;
  border-radius: 5px; padding: 1px 4px; font-size: var(--fs-sm);
  line-height: 18px; font-weight: var(--fw-medium); white-space: nowrap;
}
/* The round color-swatch button beside each option in the field editor. */
.okr-opt-dot {
  flex: none; width: 20px; height: 20px; border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12); cursor: pointer; padding: 0;
}
.okr-opt-dot:hover { box-shadow: 0 0 0 2px var(--color-hover); }
/* The anchored palette popover (reuses .menu chrome for float + stacking). */
.okr-colorpop { padding: var(--space-2); min-width: 0; }
.okr-colorpop-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 4px 2px 2px; }
.okr-colorpop-sw {
  width: 22px; height: 22px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.12);
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.okr-colorpop-sw:hover { box-shadow: 0 0 0 2px var(--color-hover); }
.okr-colorpop-sw.is-on { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); }
.okr-colorpop-sw .icon { width: 14px; height: 14px; color: #fff; }
/* Body-anchored searchable owner picker (reuses .menu chrome; search box over
   a scrollable people list, so it floats above the table without clipping). */
.okr-ownerpop { padding: 0; min-width: 220px; max-height: 340px; display: flex; flex-direction: column; overflow: hidden; }
.okr-ownerpop-head { padding: 6px; border-bottom: 1px solid var(--color-border-faint); }
.okr-ownerpop-search { width: 100%; }
.okr-ownerpop-list { overflow-y: auto; padding: 4px; }
.okr-ownerpop-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: none; background: none; font: inherit; color: var(--color-text);
  cursor: pointer; padding: 6px 8px; border-radius: 6px;
}
.okr-ownerpop-item:hover, .okr-ownerpop-item.is-on { background: var(--color-hover); }
.okr-ownerpop-av { flex: none; display: inline-flex; }
.okr-ownerpop-av .icon { width: 16px; height: 16px; color: var(--color-accent); }
.okr-ownerpop-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okr-ownerpop-check { width: 14px; height: 14px; color: var(--color-accent); flex: none; }
.okr-ownerpop-empty { padding: 10px 8px; color: var(--color-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   Module-only additions
   ========================================================================== */

/* The Tasks table leads the page, its top hairline right under the sub-tab
   underline (the Hub does the same for .view-body--objectives). */
.view-body--tasks { padding-top: 0; }

/* Resizable columns: the Hub's `width: max-content` lets the browser size the
   table from content, which pins the Name column (long nowrap titles) and makes
   it un-resizable. Once datatable.js switches a table to fixed layout, give it a
   non-auto width so it becomes max(100%, sum of <col> widths) and every column,
   Name included, honors its dragged width. */
.content #tab-body > .table-scroll .table.dt-fixed { width: 1px; }

/* Sticky header + first column. `th:first-child` (z 2) outranks the header's
   z 3, so the Name header tied with the sticky Name body cells and they painted
   over it on scroll. The corner cell sits above both axes. */
.okr-obj-table thead th:first-child { z-index: 4; }
/* With border-collapse the header's borders belong to the table and do not
   travel with the sticky cells, leaving a hairline seam the rows scroll through.
   Draw the header rules as inset shadows instead (they move with the cell). */
.okr-obj-table thead th {
  border-top: 0; border-bottom: 0;
  box-shadow: inset 0 1px 0 var(--color-border-faint), inset 0 -1px 0 var(--color-border);
}
/* Full-width rows (section headers, "Add task") keep their label in view when
   the table scrolls sideways: the label is sticky at the cell's own inset. The
   cells must not clip (overflow:hidden would make them the sticky container). */
.okr-obj-table .dt-group-cell, .okr-obj-table td.okr-add-cell { overflow: visible; position: static; }
.dt-group-inner { position: sticky; display: inline-flex; align-items: center; }
.okr-obj-table td.okr-add-cell .okr-add-inner { position: sticky; left: 44px; }

/* A white (outlined) button, the toolbar's .dt-btn look at full button height. */
.btn--white {
  background: var(--color-bg); color: var(--color-text);
  border-color: var(--color-border); box-shadow: var(--shadow-sm);
}
.btn--white:hover { background: var(--color-hover); }

/* ---- Dates (List cells + side panel) ------------------------------------- */
.okr-date-cell { white-space: nowrap; color: var(--color-text); cursor: pointer; }
.okr-date-cell:hover { background: var(--color-hover); }
.okr-date-cell--late { color: var(--color-danger-text); }
.okr-date-input { min-width: 130px; }
.okr-date-pair { display: flex; align-items: center; gap: var(--space-2); }
.okr-date-pair .input { flex: 1; min-width: 0; }
.okr-date-sep { color: var(--color-muted); }
.okr-date-input--late { color: var(--color-danger-text); }

/* ---- Board / Gantt shared toolbar ---------------------------------------- */
.lay-toolbar { margin: var(--space-3) 0; }
.lay-seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-input); overflow: hidden; box-shadow: var(--shadow-sm); }
.lay-seg-btn {
  height: 26px; padding: 0 var(--space-3); border: 0; background: var(--color-bg);
  font: inherit; font-size: var(--fs-sm); color: var(--color-label); cursor: pointer;
}
.lay-seg-btn + .lay-seg-btn { border-left: 1px solid var(--color-border); }
.lay-seg-btn:hover { background: var(--color-hover); }
.lay-seg-btn--on { background: var(--color-surface-alt); color: var(--color-text); font-weight: var(--fw-medium); }
.lay-empty { padding: var(--space-4) var(--space-6); }

/* ---- Board (kanban) ------------------------------------------------------ */
.kb-board {
  display: flex; align-items: flex-start; gap: var(--space-3);
  overflow: auto; padding: 0 var(--space-6) var(--space-4);
  margin: 0 calc(-1 * var(--space-8)); padding-left: var(--space-8); padding-right: var(--space-8);
}
.kb-col {
  flex: none; width: 288px; max-height: 100%; display: flex; flex-direction: column;
  background: var(--color-surface-alt); border-radius: var(--radius-card); padding: var(--space-2);
}
.kb-col--over { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.kb-col-head { display: flex; align-items: center; gap: var(--space-2); padding: 4px 4px 8px; min-height: 32px; }
.kb-col-head .icon-ghost { width: 24px; height: 24px; }
.kb-col-count { color: var(--color-muted); font-size: var(--fs-sm); }
.kb-col-spacer { flex: 1; }
.kb-col-body { display: flex; flex-direction: column; gap: var(--space-2); min-height: 8px; }
.kb-card {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-input);
  padding: 10px 12px; box-shadow: var(--shadow-sm); cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
}
.kb-card:hover { border-color: #d6d3d1; }
.kb-card--open { border-color: var(--color-accent); }
.kb-card--dragging { opacity: .35; }
.kb-card--closed .kb-card-title { color: var(--color-label); }
.kb-card-title { font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: 1.35; overflow-wrap: anywhere; }
.kb-card-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.kb-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-sm); color: var(--color-label); }
.kb-card-meta:empty { display: none; }
.kb-card-date, .kb-card-subs { display: inline-flex; align-items: center; gap: 4px; }
.kb-card-date .icon, .kb-card-subs .icon { width: 13px; height: 13px; }
.kb-card-date--late { color: var(--color-danger-text); }
.kb-card-pct { margin-left: auto; }
.kb-drop-ph { height: 44px; border: 1.5px dashed var(--color-accent); border-radius: var(--radius-input); background: var(--banner-bg); }
.kb-add {
  display: flex; align-items: center; gap: 6px; margin-top: var(--space-2); padding: 6px 8px;
  border: 0; background: none; border-radius: 6px; font: inherit; font-size: var(--fs-sm);
  color: var(--color-muted); cursor: pointer; text-align: left;
}
.kb-add .icon { width: 15px; height: 15px; }
.kb-add:hover { background: rgba(0, 0, 0, 0.04); color: var(--color-text); }

/* ---- Gantt --------------------------------------------------------------- */
.gantt-scroll {
  overflow: auto; position: relative;
  margin: 0 calc(-1 * var(--space-8)); border-top: 1px solid var(--color-border);
}
.gantt { position: relative; width: max-content; }
.gantt-head { position: sticky; top: 0; z-index: 6; display: flex; background: var(--color-bg); box-shadow: inset 0 -1px 0 var(--color-border); }
.gantt-corner {
  position: sticky; left: 0; z-index: 7; flex: none; background: var(--color-bg);
  display: flex; align-items: flex-end; padding: 0 0 8px var(--space-8);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-label);
  box-shadow: inset -1px 0 0 var(--color-border), inset 0 -1px 0 var(--color-border);
}
.gantt-tiers { position: relative; flex: none; height: 52px; }
.gantt-tier { position: relative; height: 26px; }
.gantt-tier--top { box-shadow: inset 0 -1px 0 var(--color-border-faint); }
.gantt-tier-cell {
  position: absolute; top: 0; height: 26px; line-height: 26px; padding-left: 6px;
  font-size: var(--fs-xs, 12px); color: var(--color-label); white-space: nowrap;
  border-left: 1px solid var(--color-border-faint);
}
.gantt-tier--top .gantt-tier-cell { font-weight: var(--fw-medium); color: var(--color-text); }
.gantt-tier-cell--day { padding-left: 0; text-align: center; }
.gantt-tier-cell--we { color: var(--color-muted); }
.gantt-today-flag { position: absolute; bottom: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--color-danger-text); }
.gantt-body { position: relative; }
.gantt-grid { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.gantt-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-border-faint); }
.gantt-tick--strong { background: var(--color-border); }
.gantt-weekend { position: absolute; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.025); }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--color-danger-text); opacity: .55; z-index: 1; }
.gantt-row { display: flex; height: 36px; box-shadow: inset 0 -1px 0 var(--color-border-faint); }
.gantt-row:hover .gantt-name, .gantt-row:hover .gantt-track { background-color: rgba(0, 0, 0, 0.015); }
.gantt-name {
  position: sticky; left: 0; z-index: 4; flex: none; display: flex; align-items: center; gap: 4px;
  padding: 0 var(--space-3) 0 var(--space-6); background: var(--color-bg); cursor: pointer;
  box-shadow: inset -1px 0 0 var(--color-border), inset 0 -1px 0 var(--color-border-faint);
  font-size: var(--fs-base); font-weight: var(--fw-medium); min-width: 0;
}
.gantt-name:hover { background: var(--color-hover); }
.gantt-name--open { background: var(--banner-bg); }
.gantt-indent { flex: none; }
.gantt-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-row--group { height: 44px; }
.gantt-name--group { cursor: default; font-size: var(--fs-lg); font-weight: var(--fw-semibold); padding-left: var(--space-8); gap: var(--space-3); }
.gantt-name--group:hover { background: var(--color-bg); }
.gantt-name--group .dt-group-count { font-size: var(--fs-sm); }
.gantt-track { position: relative; flex: none; }
.gantt-track--empty { cursor: crosshair; }
.gantt-bar-wrap { display: contents; }
.gantt-bar {
  position: absolute; top: 8px; height: 20px; border-radius: 5px; z-index: 2;
  cursor: grab; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.gantt-bar--late { box-shadow: 0 0 0 1.5px var(--color-danger-text); }
.gantt-bar--ghost { background: var(--color-accent); opacity: .35; cursor: crosshair; }
.gantt-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.14); pointer-events: none; }
.gantt-handle { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 1; }
.gantt-handle--l { left: 0; }
.gantt-handle--r { right: 0; }
.gantt-bar-label {
  position: absolute; top: 8px; line-height: 20px; z-index: 2; pointer-events: none;
  font-size: var(--fs-sm); color: var(--color-label); white-space: nowrap;
}
.gantt-summary {
  position: absolute; top: 14px; height: 8px; z-index: 2; cursor: pointer;
  background: #57534e; border-radius: 2px;
}
.gantt-summary::before, .gantt-summary::after {
  content: ''; position: absolute; bottom: -5px; border: 5px solid transparent; border-top-color: #57534e;
}
.gantt-summary::before { left: 0; border-left-color: #57534e; }
.gantt-summary::after { right: 0; border-right-color: #57534e; }
body.gantt-dragging, body.gantt-dragging * { cursor: grabbing !important; user-select: none; }
body.gantt-resizing, body.gantt-resizing * { cursor: ew-resize !important; user-select: none; }

/* ---- Dependencies -------------------------------------------------------- */
.gantt-links { position: absolute; top: 0; z-index: 3; pointer-events: none; overflow: visible; }
.gantt-link { cursor: pointer; }
.gantt-link-hit { fill: none; stroke: transparent; stroke-width: 10; pointer-events: stroke; }
.gantt-link-line { fill: none; stroke: #78716c; stroke-width: 1.5; pointer-events: none; }
.gantt-link-head { fill: #78716c; }
.gantt-link:hover .gantt-link-line { stroke: var(--color-accent); stroke-width: 2; }
.gantt-link--bad .gantt-link-line { stroke: var(--color-danger-text); }
.gantt-link-head--bad { fill: var(--color-danger-text); }
.gantt-link-temp { fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.gantt-link-dot {
  position: absolute; top: 13px; width: 10px; height: 10px; z-index: 4;
  border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-accent);
  cursor: crosshair; opacity: 0; transition: opacity .1s ease;
}
.gantt-row:hover .gantt-link-dot, body.gantt-linking .gantt-link-dot { opacity: 1; }
body.gantt-linking, body.gantt-linking * { cursor: crosshair !important; user-select: none; }
.gantt-row--link-target .gantt-track, .gantt-row--link-target .gantt-name { background: var(--banner-bg) !important; }
.gantt-row--link-bad .gantt-track { background: #fef2f2 !important; }

.okr-dep-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.okr-dep-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: 1px solid var(--color-border); border-radius: 6px; padding: 2px 4px 2px 8px;
  background: var(--color-bg); font-size: var(--fs-sm);
}
.okr-dep-chip--conflict { border-color: var(--color-danger-text); }
.okr-dep-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.okr-dep-name {
  border: 0; background: none; padding: 0; font: inherit; color: var(--color-text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.okr-dep-name:hover { text-decoration: underline; }
.okr-dep-x { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--color-muted); display: inline-flex; border-radius: 4px; }
.okr-dep-x:hover { color: var(--color-text); background: var(--color-hover); }
.okr-dep-x .icon { width: 12px; height: 12px; }
.okr-dep-add {
  display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--color-border); border-radius: 6px;
  background: none; padding: 2px 8px; font: inherit; font-size: var(--fs-sm); color: var(--color-label); cursor: pointer;
}
.okr-dep-add:hover { color: var(--color-text); border-color: var(--color-label); }
.okr-dep-add .icon { width: 12px; height: 12px; }
.kb-card-blocked { display: inline-flex; align-items: center; gap: 4px; color: var(--color-danger-text); }
.kb-card-blocked .icon { width: 13px; height: 13px; }