/* ============================================================================
   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: var(--space-3) 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: 40px; 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-accent);
}
/* 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); }

/* ---- 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); }

/* ---- Cards ----------------------------------------------------------------
   White cards floating on the canvas. A .card > .table bleeds to the card's
   edges (the shell only auto-bleeds inside #tab-body). */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.card-title-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.card-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.card > .table-scroll,
.card > .table {
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-4));
}
.card > .table-scroll:last-child,
.card > .table:last-child { margin-bottom: calc(-1 * var(--space-4)); }
.card .table th:first-child, .card .table td:first-child { padding-left: var(--space-4); }
.card .table th:last-child, .card .table td:last-child { padding-right: var(--space-4); }

/* ---- 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-trigger--sm { height: 28px; font-size: var(--fs-sm); min-width: 90px; }
.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--wide { width: 720px; }
.peek--xwide { width: 880px; }
.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-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); }

/* ---- Switch (shadcn-style toggle) ------------------------------------------ */
.switch-row {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-2) 0; cursor: pointer;
}
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch {
  flex: none; width: 32px; height: 18px; margin-top: 1px;
  border-radius: var(--radius-pill); background: var(--color-border);
  position: relative; transition: background .15s ease;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--color-bg); box-shadow: var(--shadow-sm);
  transition: left .15s ease;
}
.switch-row input:checked + .switch { background: var(--color-accent-bright); }
.switch-row input:checked + .switch::after { left: 16px; }
.switch-label { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.switch-sub { font-size: var(--fs-xs); color: var(--color-label); margin-top: 1px; }

/* ---- 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; }
.input--sm { height: 28px; font-size: var(--fs-sm); padding: 0 var(--space-2); }

.link-btn {
  appearance: none; background: none; border: none; padding: 0;
  color: var(--color-accent); font: inherit; cursor: pointer; text-decoration: underline;
}
.link-btn--sm { font-size: var(--fs-xs); }

/* 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--wide { max-width: 920px; }
.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); }
.modal-text--muted { color: var(--color-label); font-size: var(--fs-sm); }

/* ============================================================================
   Cash Flow view
   ============================================================================ */

/* The KPI stats row INSIDE the chart card (consolidated vertical space):
   four stat blocks separated by vertical hairlines, chart optional below. */
.stats-row {
  display: flex; flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.stat {
  flex: 1; min-width: 150px;
  padding: 0 var(--space-4);
  border-left: 1px solid var(--color-border-faint);
  display: flex; flex-direction: column; gap: 1px;
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat-label { font-size: var(--fs-sm); color: var(--color-label); white-space: nowrap; }
.stat-value {
  font-size: 18px; font-weight: var(--fw-semibold);
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
.stat-value--danger { color: var(--color-danger-text); }
.stat-sub { font-size: var(--fs-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.stats-row + .chart-wrap { margin-top: var(--space-2); }

/* Actual vs budget strip (current month), inside the stats/chart card. */
.avb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  border-top: 1px solid var(--color-border-faint);
  margin-top: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
}
.avb--empty { justify-content: space-between; }
.avb-title {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-label); font-weight: var(--fw-semibold);
}
.avb-item { display: flex; align-items: baseline; gap: var(--space-2); }
.avb-label { color: var(--color-label); }
.avb-val { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.avb-budget { color: var(--color-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.avb .icon-ghost { margin-left: auto; }

/* Department summary cards on the Headcount view. */
.metrics {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.metric {
  flex: 1; min-width: 160px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: 2px;
}
.metric-label { font-size: var(--fs-sm); color: var(--color-label); }
.metric-value {
  font-size: var(--fs-xl, 20px); font-weight: var(--fw-semibold);
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
.metric-value--danger { color: var(--color-danger-text); }
.metric-sub { font-size: var(--fs-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* ---- Drivers slide-over -----------------------------------------------------
   Readability grammar (2026-08-28, per Dan): the panel body has NO side
   padding, so group bands and row hairlines run full-bleed left to right;
   rows re-inset their own content. Controls are label-above-value fields with
   a segmented preset control instead of floating pill words. */
.peek--drivers .peek-body { padding: 0 0 var(--space-6); }
.drv-group-label {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-label); font-weight: var(--fw-semibold);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border-faint);
  padding: 6px var(--space-4);
}
.driver-row {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-faint);
}
.drv-line1 {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
}
.drv-line2 {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--space-2) var(--space-4); margin-top: var(--space-3);
}
.driver-name { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.driver-unit { font-size: var(--fs-xs); color: var(--color-muted); }

.drv-field { display: flex; flex-direction: column; gap: 4px; }
.drv-field-label { font-size: var(--fs-2xs); color: var(--color-label); white-space: nowrap; }
.drv-field .input {
  width: 84px; height: 28px; font-size: var(--fs-sm);
  text-align: right; font-variant-numeric: tabular-nums;
}
.drv-ramp { display: flex; align-items: center; gap: var(--space-1); }
.drv-ramp .icon { width: 13px; height: 13px; color: var(--color-muted); flex: none; }
.drv-flags { padding: var(--space-3) var(--space-4) 0; }

/* Segmented control (the preset picker). */
.seg-group {
  display: inline-flex; height: 28px;
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--radius-input); overflow: hidden;
  background: var(--color-bg);
}
.seg-btn {
  appearance: none; border: none; background: none; font: inherit; cursor: pointer;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-label);
  padding: 0 10px; border-left: 1px solid var(--color-border-faint);
}
.seg-btn:first-child { border-left: none; }
.seg-btn:hover { background: var(--color-hover); color: var(--color-text); }
.seg-btn--active {
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
}
.driver-presets { display: flex; gap: 4px; }
.preset-pill {
  appearance: none; border: 1px solid var(--btn-secondary-border);
  background: var(--color-bg); color: var(--color-label);
  font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium);
  padding: 2px 8px; border-radius: var(--radius-pill); cursor: pointer;
}
.preset-pill:hover { background: var(--color-hover); }
.preset-pill--active {
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.driver-spark { justify-self: end; color: var(--color-accent); }

/* 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%;
}
.grid-table th, .grid-table td {
  white-space: nowrap; font-variant-numeric: tabular-nums;
  /* Integer line-height: fractional row offsets round into visible white
     seams around the section bands on 1x displays. */
  line-height: 19px;
}
.grid-table th:first-child, .grid-table td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--color-bg);
  min-width: 220px;
}
.grid-table .row--section td {
  font-weight: var(--fw-semibold);
  background: var(--color-surface-alt);
  /* The band owns its edges, so the hairlines hug the gray with no seam. */
  border-top: 1px solid var(--color-border-faint);
  border-bottom: 1px solid var(--color-border-faint);
}
.grid-table .row--rollup td { font-weight: var(--fw-semibold); }
/* Collapsible section bands: click the header row to fold/unfold its rows. */
.grid-table .row--section-toggle { cursor: pointer; }
.grid-table .row--section-toggle:hover td { background: var(--color-hover); }
.grid-table .row--section-toggle td > .sec-chev {
  width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--color-muted);
}
.grid-table .num { text-align: right; }
.grid-table .neg { color: var(--color-danger-text); }
.grid-table .col--actual { background: var(--color-surface-alt); }
/* The current calendar month, tinted so "today" is findable in 48 columns.
   Blue tint (the banner family), not gray — gray already means section band. */
.grid-table .col--now { background: var(--banner-bg); }
.grid-table th.col--now { color: var(--color-accent); }

/* Active state for toggle-ish ghost icons (the drivers panel trigger). */
.icon-ghost--active { background: var(--color-hover); color: var(--color-text); }

/* The compact cash strip sits directly above the monthly grid. */
#tab-body > .chart-card { margin-bottom: var(--space-4); }

/* Data source cards. */
.ds-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}
.ds-card { display: flex; flex-direction: column; gap: var(--space-3); }
.ds-head { display: flex; align-items: center; gap: var(--space-2); }
.ds-logo {
  width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  color: var(--color-label); background: var(--color-surface-alt);
}
.ds-name { font-weight: var(--fw-semibold); flex: 1; }
.ds-detail { font-size: var(--fs-sm); color: var(--color-label); flex: 1; }
.ds-card .btn { align-self: flex-start; }

.headcount-note {
  font-size: var(--fs-sm); color: var(--color-label);
  margin: var(--space-3) 0 0; max-width: 720px;
}

/* The headcount slide-over reuses the metric strip + table; its lone action
   (Add hire) sits right-aligned above them. The panel is wide so the whole
   roster is editable inline; the table scrolls horizontally if it overflows. */
/* Wide enough that every column fits its text on one line without a
   horizontal scrollbar (the .table-scroll wrapper is only a safety net on
   narrow screens). */
.peek--headcount { width: 1880px; max-width: 96vw; }
/* Full-bleed table: the body drops its side padding so roster rows run edge
   to edge; the KPI strip and the note re-inset themselves. A little top
   padding keeps the KPI cards off the header's bottom hairline. */
.peek--headcount .peek-body { padding: var(--space-3) 0 var(--space-6); }
.peek--headcount .metrics,
.peek--headcount .headcount-note,
.peek--headcount .hc-whatif { margin-left: var(--space-4); margin-right: var(--space-4); }
/* Across-the-board salary-cut what-if: a lever + a live cash-flow impact line. */
.hc-whatif {
  margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-surface-alt);
}
.hc-whatif-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.hc-whatif-label { font-weight: var(--fw-semibold); }
.hc-cut-input { width: 60px; }
.hc-whatif-presets { display: inline-flex; gap: var(--space-1); margin-left: var(--space-2); }
.hc-whatif-impact { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--color-text); }
.hc-whatif-impact--muted { color: var(--color-muted); }

/* Cash Flow password gate — the lock screen shown until unlocked. */
.cf-lock { display: flex; justify-content: center; padding: var(--space-6) var(--space-4); }
.cf-lock-card {
  width: 360px; max-width: 100%;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  text-align: center;
}
.cf-lock-icon { width: 28px; height: 28px; color: var(--color-label); align-self: center; }
.cf-lock-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.cf-lock-sub { font-size: var(--fs-sm); color: var(--color-muted); margin: 0; }
.cf-lock-status { font-size: var(--fs-sm); color: var(--color-danger-text); min-height: 18px; }
.cf-lock .btn { justify-content: center; }

/* Inline-editable Total revenue row in the monthly grid: pointer + hover tint,
   and overridden months read as bold accent text (distinct from the blue
   col--now tint that marks "today"). */
.grid-table .rev-cell { cursor: pointer; }
.grid-table .rev-cell:hover { background: var(--color-hover); }
.grid-table .rev-cell--override { color: var(--color-accent); font-weight: var(--fw-semibold); }

/* Revenue forecast slide-over: flat quick-set + a per-month override table. */
.peek--revenue .rev-flat { margin-bottom: var(--space-3); }
.rev-flat-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rev-note, .rev-impact { font-size: var(--fs-sm); margin: var(--space-2) 0 0; }
.rev-note { color: var(--color-muted); }
.rev-impact { color: var(--color-text); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.rev-table td { vertical-align: middle; }
.rev-table .rev-model { color: var(--color-muted); }
.rev-table .input { width: 130px; }
.rev-row--override td { background: var(--color-surface-alt); }
/* Fixed layout (widths come from the <colgroup>) so a column never changes
   width when a cell swaps its display text for an editor. */
.hc-table { width: 100%; table-layout: fixed; }
.hc-table th, .hc-table td {
  white-space: nowrap; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis;
}

/* Editable cells read as plain text (no input chrome) and fill the cell; a
   pointer cursor + hover tint on the whole cell signal they are clickable.
   The editor that swaps in on click is borderless too, so editing looks
   seamless. Dropdown cells put the tint on the cell (not the small trigger)
   so it reaches full-bleed. */
.hc-cell { cursor: pointer; }
.hc-cell:hover { background: var(--color-hover); }
/* A disabled range cell (no per-person cut set): shown, not editable. */
.hc-cell--off { cursor: default; }
.hc-cell--off:hover { background: transparent; }
.hc-empty { color: var(--color-muted); }
.hc-editor {
  width: 100%; box-sizing: border-box;
  border: none; background: transparent; padding: 0; margin: 0;
  font: inherit; color: inherit; outline: none;
}
.hc-editor.num { text-align: right; }
.hc-editor[type="number"]::-webkit-inner-spin-button,
.hc-editor[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hc-table .select-wrap { width: 100%; }
.hc-table .select-trigger {
  width: 100%; border-color: transparent; background: transparent;
  padding-left: 0;
}
/* Department / segment header rows get a gray band to split the roster. */
.hc-table .row--section td {
  font-weight: var(--fw-semibold);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border-faint);
  border-bottom: 1px solid var(--color-border-faint);
}
/* Remove control lives in the name cell and only shows on row hover. */
.hc-remove { margin-left: 6px; opacity: 0; vertical-align: middle; }
.hc-remove:hover { color: var(--color-danger-text); }
.hc-table tbody tr:hover .hc-remove { opacity: 1; }

/* ============================================================================
   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); }

.kr-row {
  border: 1px solid var(--color-border-faint); border-radius: var(--radius-input);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2);
}
.kr-head { display: flex; align-items: center; gap: var(--space-2); }
.kr-title { flex: 1; }
.kr-io { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.kr-io .input { width: 84px; height: 28px; font-size: var(--fs-sm); text-align: right; }
.kr-meter { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.kr-meter .meter { flex: 1; }

/* Strategy map: Kaplan/Norton lanes, Financial on top, arrows overlay. */
.smap { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.smap-lane {
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-bg); box-shadow: var(--shadow-sm);
}
.smap-lane-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-faint);
  background: var(--color-surface-alt);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.smap-lane-label {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-label); font-weight: var(--fw-semibold);
}
.smap-cards {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-3); min-height: 64px;
}
.smap-empty { font-size: var(--fs-sm); color: var(--color-muted); align-self: center; padding: 0 var(--space-2); }
.smap-card {
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  width: 240px; padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-bg);
  display: flex; flex-direction: column; gap: var(--space-2);
  position: relative; z-index: 2;
}
.smap-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.smap-card[draggable="true"] { cursor: grab; }
.smap-card--dragging { opacity: .4; cursor: grabbing; }
.smap-lane--drop {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.smap-lane--drop .smap-cards { background: var(--banner-bg); }
.smap-card-title { font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: var(--lh-base); }
.smap-card-meta {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--color-label);
}
.smap-arrows { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Memos & documents (inside the plan, under the strategy map). */
.memo-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-faint);
}
.memo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}
.memo-card {
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-bg); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.memo-card:hover { border-color: var(--color-accent); }
.memo-card-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.memo-snippet { font-size: var(--fs-sm); color: var(--color-label); line-height: var(--lh-base); }
.memo-date { font-size: var(--fs-xs); color: var(--color-muted); }
.memo-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-top: auto;
}
.memo-stage-tag {
  flex: none; font-size: var(--fs-2xs); color: var(--color-label);
  background: var(--color-surface-alt); border-radius: 999px;
  padding: 2px var(--space-2); white-space: nowrap;
}
.memo-title-in { width: 100%; font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
/* Segment (value chain stage) selector in the memo editor. */
.memo-stage-field { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.memo-stage-label {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-label); font-weight: var(--fw-semibold);
}
.memo-foot { display: flex; align-items: center; justify-content: space-between; gap: 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 memo editor fills the tall slide-over. */
.rt--memo .rt-editor { min-height: 58vh; }

/* ============================================================================
   Scorecard (EOS weekly grid)
   ============================================================================ */

.sc-rowleft { display: flex; align-items: center; gap: var(--space-2); }
.sc-glyph {
  flex: none; width: 18px; height: 18px; border-radius: 4px;
  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);
}
.sc-owner { font-size: var(--fs-xs); color: var(--color-label); }
.sc-rowleft .icon-ghost { margin-left: auto; }
.sc-goal { color: var(--color-label); white-space: nowrap; }
.sc-week { line-height: 1.3; }
.sc-week-sub { font-size: var(--fs-2xs); color: var(--color-muted); font-weight: var(--fw-regular); }
.sc-week--current { background: var(--color-surface-alt); }
.sc-cell { cursor: text; min-width: 76px; }
.sc-good { background: var(--pill-green-bg); color: var(--pill-green-text); }
.sc-bad  { background: var(--pill-red-bg);   color: var(--pill-red-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);
}

/* ============================================================================
   Management (core value chain)
   ============================================================================ */

/* min-height fills the viewport below the sticky header (app-header 92px +
   view-body padding 16px) so the divider runs top to bottom of the page even
   when content is short (per Dan 2026-08-31). */
.mgmt { display: flex; gap: var(--space-6); align-items: stretch; min-height: calc(100vh - 108px); }
/* The value chain rail is the right-hand column, divided from the main pane
   by a vertical rule (per Dan 2026-08-31). */
.mgmt-rail {
  flex: 0 0 25%; min-width: 260px; max-width: 360px;
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-6);
}
.mgmt-main { flex: 1; min-width: 0; }

/* Sub-view tabs on the left, under the Management tab (per Dan 2026-08-31). */
.mgmt-subtabs {
  display: flex; gap: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.mgmt-subtab {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); color: var(--color-muted);
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 34px; padding: 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.mgmt-subtab:hover { color: var(--color-text); }
.mgmt-subtab--active {
  color: var(--color-text); font-weight: var(--fw-semibold);
  border-bottom-color: var(--color-accent);
}
.mgmt-subtab .icon { width: 15px; height: 15px; }
/* Neutralize the shell's #tab-body full-bleed table rules inside the pane —
   here the table lives in a column, not at the page root. */
.mgmt-main .table { margin-left: 0; margin-right: 0; width: 100%; }
.mgmt-main .table th:first-child, .mgmt-main .table td:first-child { padding-left: var(--space-3); }
.mgmt-main .table th:last-child, .mgmt-main .table td:last-child { padding-right: var(--space-3); }
.mgmt-main .table-scroll { margin-left: 0; margin-right: 0; }
.mgmt-main .grid-table td:first-child, .mgmt-main .grid-table th:first-child { min-width: 170px; }

.vc-rail-title {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-label); font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-2);
}
.vc-rail-title--cross { margin-top: var(--space-4); }
.vc-steps { display: flex; flex-direction: column; }
.vc-step {
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top-width: 0;
  padding: var(--space-2) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.vc-steps .vc-step:first-child {
  border-top-width: 1px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.vc-steps .vc-step:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.vc-steps .vc-step:only-child { border-radius: var(--radius-card); }
.vc-step:hover { background: var(--color-hover); }
.vc-step--selected {
  background: var(--banner-bg);
  box-shadow: inset 2px 0 0 var(--color-accent);
}
.vc-step-head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.vc-num {
  flex: none; width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
}
.vc-num--cross { background: var(--color-surface-alt); color: var(--color-label); }
.vc-num--cross .icon { width: 12px; height: 12px; }
.vc-name { font-size: var(--fs-base); font-weight: var(--fw-medium); flex: 1; min-width: 0; }
.vc-step .pill { font-size: var(--fs-2xs); }
.vc-counts { display: flex; gap: var(--space-2); font-size: var(--fs-2xs); color: var(--color-muted); padding-left: 28px; }
.vc-counts:empty { display: none; }
.vc-detail { padding: var(--space-1) 0 var(--space-1) 28px; }
.vc-objective { font-size: var(--fs-sm); color: var(--color-text); line-height: var(--lh-base); }
.vc-metrics {
  margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-4);
  font-size: var(--fs-xs); color: var(--color-label); line-height: 1.6;
}
.vc-metric--primary { font-weight: var(--fw-semibold); color: var(--color-text); }
.vc-loop {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--color-muted);
  padding: var(--space-2) var(--space-1);
}
.vc-loop .icon { width: 13px; height: 13px; flex: none; }

/* Value chain OVERVIEW (Management tab): stages as a responsive card grid,
   each always showing charter + metrics + link counts. */
.vc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-3);
}
.vc-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.vc-card--cross { background: var(--color-surface-alt); }
.vc-card .vc-metrics { margin-top: var(--space-1); }
.vc-card .vc-counts {
  padding-left: 0; margin-top: auto; padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-faint);
}

.mgmt-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-faint);
}
.mgmt-stage-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.mgmt-stage-obj { font-size: var(--fs-sm); color: var(--color-label); margin-top: 2px; max-width: 560px; }
.mgmt-toolbar {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.mgmt-hint { font-size: var(--fs-xs); color: var(--color-muted); }

/* ---- Org chart -----------------------------------------------------------
   Classic connector tree: each child draws a drop line from the sibling rail
   (its li top) down to its card; the rail is each li's top border segment;
   the parent's children-list draws the stub from the parent card to the rail. */
.org-scroll { overflow-x: auto; padding-bottom: var(--space-4); }
.org-tree, .org-tree ul { list-style: none; margin: 0; padding: 0; display: flex; }
/* start-justified inside the scroller (a centered flex row clips its left
   edge once it overflows); centered when it fits. */
.org-tree { width: max-content; margin: 0 auto; }
.org-pool-label {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-label); font-weight: var(--fw-semibold);
  margin: var(--space-4) 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-faint);
}
.org-pool {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-2);
}
.org-tree li {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 8px 0;
}
.org-tree > li { padding-top: 0; }
/* drop line: rail down to the card */
.org-tree li::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 1px; height: 24px; background: var(--color-border);
}
/* sibling rail segment across this li */
.org-tree li::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--color-border);
}
.org-tree li:first-child::after { left: 50%; }
.org-tree li:last-child::after { right: 50%; }
.org-tree li:only-child::after { display: none; }
.org-tree > li::before, .org-tree > li::after { display: none; }
/* stub from the parent card down to the children rail */
.org-tree li > ul { position: relative; padding-top: 24px; }
.org-tree li > ul::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 1px; height: 24px; background: var(--color-border);
}

.org-card {
  display: flex; align-items: center; gap: var(--space-2);
  min-width: 170px; max-width: 230px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-bg); box-shadow: var(--shadow-sm);
}
.org-avatar {
  flex: none; width: 28px; height: 28px; border-radius: 999px; object-fit: cover;
}
.org-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);
}
.org-card-txt { min-width: 0; flex: 1; }
.org-name {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-title {
  font-size: var(--fs-2xs); color: var(--color-label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================================
   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); }
@keyframes gradmove { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

.ceo-progress {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-xs); color: var(--color-label);
  margin-bottom: var(--space-3);
}
.ceo-progress .meter { flex: 1; }
.ceo-stage { margin-bottom: var(--space-4); }
.ceo-field { margin-bottom: var(--space-4); }
.ceo-field-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-1);
}
.ceo-ta {
  width: 100%; min-height: 130px; resize: vertical;
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-bg); color: var(--color-text);
  font: inherit; font-size: var(--fs-base); line-height: 1.6;
  padding: var(--space-3); outline: none;
}
.ceo-ta:focus { border-color: var(--color-accent); }
.mic--live { background: var(--pill-red-bg); color: var(--pill-red-text); animation: mic-pulse 1.2s ease infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 4px var(--pill-red-bg); } }
.ceo-nav {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-faint);
}
.ceo-nav-spacer { flex: 1; }
.ceo-past {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-bg);
}
.ceo-past:hover { border-color: var(--color-accent); }
.ceo-past-sub { flex: 1; font-size: var(--fs-xs); color: var(--color-label); }
.ceo-past .icon { color: var(--color-muted); }

/* 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); }

/* Chart card */
.chart-card svg { display: block; width: 100%; height: auto; }
.chart-wrap { position: relative; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-input); box-shadow: var(--shadow-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm); color: var(--color-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chart-tip-title { font-weight: var(--fw-semibold); margin-bottom: 2px; }
.chart-legend {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--color-label);
  margin-top: var(--space-2);
}
.chart-legend .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  margin-right: 6px; vertical-align: middle;
}

/* ============================================================================
   SWOT board (Management → SWOT) — a 2x2 grid of editable lists.
   ============================================================================ */
.swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.swot-quad {
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-bg); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
/* Only two brand-safe accent tokens exist (accent + danger), so the stripe
   encodes POLARITY: positive quadrants (S, O) accent, negative (W, T) danger.
   The titles disambiguate internal vs external. */
.swot--s { border-top: 3px solid var(--color-accent); }
.swot--w { border-top: 3px solid var(--color-danger-text); }
.swot--o { border-top: 3px solid var(--color-accent); }
.swot--t { border-top: 3px solid var(--color-danger-text); }
.swot-quad-head {
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-faint);
  display: flex; align-items: baseline; gap: var(--space-2);
}
.swot-quad-title { font-weight: var(--fw-semibold); }
.swot-quad-sub { font-size: var(--fs-xs); color: var(--color-muted); }
.swot-list { padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.swot-row { display: flex; align-items: center; gap: var(--space-2); }
.swot-input { flex: 1; }
.swot-del { opacity: 0; }
.swot-row:hover .swot-del { opacity: 1; }
.swot-del:hover { color: var(--color-danger-text); }
.swot-empty { color: var(--color-muted); font-size: var(--fs-sm); padding: 4px 0; }
.swot-add { padding: 0 var(--space-3) var(--space-3); }

/* ============================================================================
   Ohtani matrix (Management → Ohtani) — a 9x9 Mandal-chart (3x3 of 3x3 blocks).
   ============================================================================ */
.oh-scroll { overflow-x: auto; }
.oh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-width: 820px; }
.oh-block {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--color-border-faint); border-radius: 8px; padding: 2px;
}
.oh-block--center { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.oh-cell {
  border: none; resize: none; width: 100%; box-sizing: border-box; padding: 6px;
  font: inherit; font-size: var(--fs-xs); line-height: 1.25;
  background: var(--color-bg); border-radius: 4px; color: var(--color-text);
}
.oh-cell::placeholder { color: var(--color-muted); }
.oh-cell:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; }
.oh-goal { background: var(--banner-bg); font-weight: var(--fw-semibold); color: var(--color-accent); }
.oh-theme { background: var(--color-surface-alt); font-weight: var(--fw-semibold); }

/* ============================================================================
   Swag store (own tab) — catalog cards, cart slide-over, orders/manage lists.
   ============================================================================ */
.swag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.swag-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-bg); box-shadow: var(--shadow-sm);
  overflow: hidden; display: flex; flex-direction: column;
}
.swag-img { width: 100%; height: 160px; object-fit: cover; background: var(--color-surface-alt); }
.swag-img--ph { display: flex; align-items: center; justify-content: center; color: var(--color-muted); }
.swag-img--ph .icon { width: 40px; height: 40px; }
.swag-body { padding: var(--space-3); display: flex; flex-direction: column; gap: 4px; }
.swag-name { font-weight: var(--fw-semibold); }
.swag-desc { font-size: var(--fs-sm); color: var(--color-muted); }
.swag-price { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.swag-buy { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.swag-manage-head { margin-bottom: var(--space-3); }
.cart-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.cart-line { display: flex; align-items: center; gap: var(--space-2); }
.cart-line-name { flex: 1; }
.cart-form { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }