/* ===========================================================================
   page.css—monochrome attribution reference.
   One dark plane. A hairline separates the sidebar from the body. Box spacing
   is on an 8px grid (4s and 8s). Radii come from one tight scale.
   =========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 40px; --s8: 48px; --s9: 56px; --s10: 64px;

  --measure: 44rem;
  --gutter: clamp(16px, 4vw, 56px);
  --sidebar-w: 232px;
  --topbar-h: 56px;
  --bar-fill: var(--color-10);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* pretty by default (kills last-line orphans on paragraphs, list items,
     captions, table cells); headings override with balance below. Inherited,
     so it reaches child spans without per-element rules. */
  text-wrap: pretty;
}

/* ── Page-load fade-in ───────────────────────────────────────
   A gentle, staggered opacity fade so the page settles in on load
   instead of snapping/juddering as fonts and JS modules mount.
   Opacity only—no transforms—so there's no layout shift and no new
   stacking context on the tall main column.

   Only runs on the FIRST view of a page in a session: an inline head
   script adds `.aw-intro` to <html> once, so reloads and back/forward
   (assets already cached) render instantly. Off under reduced-motion.
   `both` holds each region invisible until its delay (no flash). */
@media (prefers-reduced-motion: no-preference) {
  .aw-intro .topbar,
  .aw-intro .sidebar,
  .aw-intro .main {
    animation: aw-fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .aw-intro .topbar  { animation-delay: 0ms; }
  .aw-intro .sidebar { animation-delay: 40ms; }
  .aw-intro .main    { animation-delay: 80ms; }
}

@keyframes aw-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.skip-link {
  position: fixed; left: var(--s3); top: -48px; z-index: 200;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--s2) var(--s4); transition: top var(--transition);
}
.skip-link:focus { top: var(--s3); }

/* ── Header ─────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  display: flex; align-items: center;
  padding: 0 var(--gutter) 0 var(--s4);
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
}
.logo {
  display: inline-flex; width: 28px; height: 28px; padding: 0; border: none;
  border-radius: var(--radius-pill); cursor: pointer;
  background:
    radial-gradient(circle at 32% 28%, oklch(0.32 0 0), transparent 55%),
    radial-gradient(circle at 70% 74%, oklch(0.08 0 0), transparent 60%),
    oklch(0.17 0 0);
  transition: filter var(--transition);
}
.logo:hover { filter: brightness(1.25); }
.logo:focus-visible { outline: 1.5px solid var(--text-tertiary); outline-offset: 2px; }

/* Light-mode orb: same top-left lit sphere, inverted to a pale neutral so it
   sits on the near-white plane instead of punching a black hole in it. The
   inset hairline keeps its edge legible against the 0.988 background. */
:root[data-theme="light"] .logo {
  background:
    radial-gradient(circle at 32% 28%, oklch(1 0 0), transparent 55%),
    radial-gradient(circle at 70% 74%, oklch(0.70 0 0), transparent 60%),
    oklch(0.86 0 0);
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.08);
}
:root[data-theme="light"] .logo:hover { filter: brightness(0.97); }

/* Theme toggle: transparent, sits at the sidebar foot. */
.theme-toggle {
  display: inline-flex; gap: var(--s1); padding: var(--s1);
  border-radius: var(--radius-pill); background: transparent;
}
.theme-toggle button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; border: none; background: none;
  color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-md);
  transition: color var(--transition), background var(--transition);
}
.theme-toggle button:hover { color: var(--text); background: var(--bg-hover); }
.theme-toggle button.is-active { color: var(--text); background: var(--bg-active); }
.theme-toggle button:focus-visible { outline: 1.5px solid var(--text-tertiary); outline-offset: 2px; }

/* ── Layout ─────────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
}

/* ── Sidebar (app nav) with the dividing line (no ball) ─────── */
.sidebar {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  background: var(--bg);
  padding: var(--s4) var(--s3);
  overflow-y: auto;
  border-right: 1px solid var(--border-light);
  display: flex; flex-direction: column;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500; color: var(--text-tertiary);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.nav-item:hover { color: var(--text); background: var(--bg-hover); }
.nav-item.is-active { color: var(--text); background: var(--bg-active); }
.nav-item:focus-visible { outline: 1.5px solid var(--text-tertiary); outline-offset: -2px; }
.nav-item--soon { color: var(--text-disabled); cursor: default; }
.nav-item--soon:hover { color: var(--text-disabled); background: none; }
.soon-chip {
  margin-left: auto; flex-shrink: 0;
  font-size: 10px; font-weight: 600; letter-spacing: 0;
  color: var(--accent-blue-text); background: var(--btn-blue);
  border: 1px solid var(--btn-blue-border);
  padding: 2px var(--s2); border-radius: var(--radius-sm); white-space: nowrap;
}
/* "New" — the skill is live. Green (measured) reads as available, vs the blue
   "coming soon" it replaces. */
.new-chip {
  margin-left: auto; flex-shrink: 0;
  font-size: 10px; font-weight: 600; letter-spacing: 0;
  color: var(--grade-measured-text); background: var(--grade-measured-bg);
  border: 1px solid var(--grade-border);
  padding: 2px var(--s2); border-radius: var(--radius-sm); white-space: nowrap;
}
.nav-ico {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-sep { height: 1px; background: var(--border-light); margin: var(--s2) var(--s3); }
.sidebar-foot { margin-top: auto; padding-top: var(--s4); }

/* ── Main ───────────────────────────────────────────────────── */
.main { min-width: 0; padding: 0 var(--gutter); }
.column { max-width: var(--measure); margin: 0 auto; padding: var(--s4) 0 var(--s10); }
/* Sections flow on whitespace + clear headings, oklch.fyi-style—no rule between
   every one. A hairline is opt-in (.section--rule), reserved for the shifts
   between movements (self-report, brand, conclusion, the dataset appendix), so a
   rule always signals a real change of subject rather than mere spacing.
   Below the rule gets +8px over above it: the line-height under the previous
   paragraph inflates the top gap, so unequal padding reads optically even. */
.section { padding: var(--s5) 0; }
/* One rule on the whole page: under the hero, closing the title block off from
   the article. Everything below is structured by headings alone—h2 for the major
   beats, h3 for the sub-levers—so the body reads on hierarchy, not on rules. */
.intro {
  border-top: 1px solid var(--border-light);
  padding: var(--s6) 0 var(--s5);
}
/* Opt-in divider, reused only for the dataset appendix at the very bottom—it
   sits below the conclusion + sign-off, so a rule marks it as reference matter. */
.section--rule {
  border-top: 1px solid var(--border-light);
  padding-top: var(--s6);
}
/* modules sit flush to the section padding at a section's edges (no doubled gap) */
.section > .module:first-child { margin-top: 0; }
.section > .module:last-child { margin-bottom: 0; }

/* ── Prose ──────────────────────────────────────────────────── */
p { color: var(--text-secondary); line-height: 1.5; }
.section { scroll-margin-top: calc(var(--topbar-h) + var(--s4)); }
.section > p { margin-bottom: var(--s3); font-size: 15px; }
.section > p:last-child { margin-bottom: 0; }
strong { color: var(--text); font-weight: 600; }
a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--text-tertiary); }
a:hover { text-decoration-color: var(--text); }

h2 { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 700; color: var(--text); margin-bottom: var(--s3); text-wrap: balance; }
/* h3: a subordinate lever inside an h2 movement. Same weight, smaller, quieter
   colour, with clear air above it so the step down from h2 reads. */
h3 { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--text-secondary); margin: var(--s6) 0 var(--s2); text-wrap: balance; }

/* intro (first-person) — carries a top divider like the sections */
.intro p { font-size: 16px; line-height: 1.55; color: var(--text-secondary); margin-bottom: var(--s4); }
.intro p:last-child { margin-bottom: 0; }
.intro strong { color: var(--text); font-variant-numeric: tabular-nums; }

.deflist { margin: 0 0 var(--s3); }
.deflist dt { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: var(--s1); }
.deflist dd { font-size: 15px; line-height: 1.5; color: var(--text-secondary); margin-bottom: var(--s5); }
.deflist dd:last-child { margin-bottom: 0; }

.rulelist { list-style: none; margin: 0 0 var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.rulelist li { font-size: 15px; line-height: 1.45; color: var(--text-secondary); padding-left: var(--s4); position: relative; }
.rulelist li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary); }

.grade-key { list-style: none; margin: 0 0 var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.grade-key li { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }

/* inline worked figures in prose (filled by app.js) */
[data-report] { color: var(--text); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; }

/* rules table: a subtle grey card, no outer top/bottom rules—just faint row
   hairlines inside for legibility */
.rules-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  margin: var(--s5) 0;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rules-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-tertiary); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border-light); }
.rules-table td { font-size: 14px; line-height: 1.45; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border-light); vertical-align: top; }
.rules-table tr:last-child td { border-bottom: none; }
.rules-table td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.rules-table td:last-child { color: var(--text-secondary); }

/* ── Hero (centred, roomy) ──────────────────────────────────── */
.hero { text-align: center; padding: var(--s10) 0 var(--s8); }
.badge {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  padding: var(--s1) var(--s3); border: 1px solid var(--border);
  border-radius: var(--radius-pill); margin-bottom: var(--s5);
}
.hero h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05; letter-spacing: -0.02em; font-weight: 600;
  color: var(--text); margin-bottom: var(--s5); text-wrap: balance;
}
.lede { font-size: 18px; line-height: 1.4; color: var(--text-secondary); max-width: 34rem; margin: 0 auto; text-wrap: balance; }
.byline-avatar {
  display: block; width: 36px; height: 36px; border-radius: 50%; margin: 0 auto 40px;
  background: #fff url("../img/aidan.png?v=1") no-repeat center 42%;
  background-size: 132%;
  border: 1px solid var(--border);
}

/* ── Module shell ───────────────────────────────────────────── */
.module {
  margin: var(--s7) 0;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  padding: var(--s5);
}
#explorer { scroll-margin-top: calc(var(--topbar-h) + var(--s4)); }
.module-fallback { font-size: 14px; color: var(--text-tertiary); }
.module-head { margin-bottom: var(--s4); }
.module-title { font-size: 15px; font-weight: 700; color: var(--text); }
.module-sub { font-size: 13px; color: var(--text-tertiary); margin-top: var(--s1); line-height: 1.45; }

/* ── Controls (compact) ─────────────────────────────────────── */
.controls { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.ctrl-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.ctrl-label { font-size: 12px; font-weight: 500; color: var(--text-tertiary); width: 56px; flex-shrink: 0; }

.segmented {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.seg-btn {
  position: relative;
  border: none; background: none; cursor: pointer;
  font: 500 12.5px var(--font); color: var(--text-tertiary);
  padding: 7px 12px; border-radius: var(--radius-sm);
  white-space: nowrap; line-height: 1.4;
  transition: color var(--transition), background var(--transition);
}
.seg-btn:hover { color: var(--text); }
.seg-btn.is-active { color: var(--text); background: var(--pill-active-bg); }
.seg-btn:focus-visible { outline: 1.5px solid var(--text-tertiary); outline-offset: 2px; }

/* A whisper of colour per control: the label carries its hue, and the active
   pill picks up a faint tint + coloured ink (same treatment as the grade
   chips). Track and inactive options stay monochrome. */
.ctrl-row--rule   .ctrl-label { color: var(--ctrl-rule); }
.ctrl-row--cost   .ctrl-label { color: var(--ctrl-cost); }
.ctrl-row--timing .ctrl-label { color: var(--ctrl-timing); }
.ctrl-row--rule   .seg-btn.is-active { color: var(--ctrl-rule);   background: var(--ctrl-rule-bg); }
.ctrl-row--cost   .seg-btn.is-active { color: var(--ctrl-cost);   background: var(--ctrl-cost-bg); }
.ctrl-row--timing .seg-btn.is-active { color: var(--ctrl-timing); background: var(--ctrl-timing-bg); }

/* ── Tooltips (minimal) ─────────────────────────────────────── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--color-3); color: oklch(0.95 0 0);
  font: 400 11.5px/1.4 var(--font); text-align: left;
  padding: 6px 8px; border-radius: var(--radius-md);
  width: max-content; max-width: 200px; white-space: normal;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; z-index: 40;
  transition: opacity 120ms ease, transform 120ms ease;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Channel table (Channel / bar / customers / revenue) ────── */
.chan-list { display: flex; flex-direction: column; gap: 1px; margin-top: var(--s4); }
.chan-head, .chan-row {
  display: grid; grid-template-columns: 116px 1fr 64px 64px;
  gap: var(--s3); align-items: center;
}
.chan-head {
  font-size: 11px; font-weight: 500; letter-spacing: 0;
  color: var(--text-tertiary); padding: 0 var(--s2) var(--s2);
  border-bottom: 1px solid var(--border-light); margin-bottom: var(--s1);
}
.chan-head .r { text-align: right; }
.chan-row { padding: 6px var(--s2); border-radius: var(--radius-md); }
.chan-row.is-focus { background: var(--accent-surface); }
.chan-name { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; min-width: 0; }
.chan-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan-name .focus-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text); flex-shrink: 0; }
.chan-track { height: 6px; border-radius: var(--radius-pill); background: var(--bg-active); overflow: hidden; }
.chan-fill { height: 100%; border-radius: var(--radius-pill); background: var(--bar-fill); transition: width 460ms cubic-bezier(0.22,1,0.36,1); }
.chan-row.is-focus .chan-fill { background: var(--text); }
.chan-cust, .chan-rev { text-align: right; font-variant-numeric: tabular-nums; }
.chan-cust { font-size: 13.5px; font-weight: 600; color: var(--text); }
.chan-rev { font-size: 13px; color: var(--text-tertiary); }

/* ── CAC panel (compact) ────────────────────────────────────── */
.cac-panel { margin-top: var(--s5); margin-bottom: var(--s5); padding: var(--s4); border-radius: var(--radius-lg); background: var(--bg); }
.cac-label { font-size: 12px; color: var(--text-tertiary); letter-spacing: 0; margin-bottom: var(--s1); }
.cac-num { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.cac-num .cur { font-size: 0.5em; color: var(--text-tertiary); vertical-align: 0.3em; margin-right: 1px; }
.cac-formula { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; font-variant-numeric: tabular-nums; }
.cac-formula strong { color: var(--text-secondary); }

/* two half-width stat cards under the CAC figure */
.cac-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.cac-stat { background: var(--bg-elevated); border-radius: var(--radius-md); padding: var(--s3); }
.cs-label { font-size: 11px; color: var(--text-tertiary); }
.cs-val { font-size: 18px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* slider-style range indicator — draggable, snaps to each achievable figure */
.range { margin-top: var(--s4); }
.range-track { position: relative; height: 4px; border-radius: var(--radius-pill); background: var(--bg-active); cursor: pointer; touch-action: none; }
/* taller invisible hit area so the 4px track is easy to grab */
.range-track::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
.range-track:focus-visible { outline: none; }
.range-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: var(--radius-pill); background: var(--color-8); transition: width 460ms cubic-bezier(0.22,1,0.36,1); }
.range-marker { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--text); transform: translate(-50%, -50%); transition: left 460ms cubic-bezier(0.22,1,0.36,1); box-shadow: 0 1px 3px oklch(0 0 0 / 0.4), 0 0 0 4px var(--bg); cursor: grab; }
.range-track:hover .range-marker { transform: translate(-50%, -50%) scale(1.12); }
.range-track:focus-visible .range-marker { box-shadow: 0 1px 3px oklch(0 0 0 / 0.4), 0 0 0 4px var(--bg), 0 0 0 6px var(--focus-ring); }
.range-track.is-dragging { cursor: grabbing; }
.range-track.is-dragging .range-marker { cursor: grabbing; transition: left 130ms ease; }
.range-track.is-dragging .range-fill { transition: width 130ms ease; }
.range-ticks { display: flex; justify-content: space-between; margin-top: var(--s2); font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.range-note { margin-top: var(--s3); font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.range-note strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Light-theme explorer tuning ─────────────────────────────
   Several explorer fills/surfaces used the fixed dark neutral ramp
   (--color-*), which doesn't flip between themes — so in light they came
   through pale (channel bars) or near-invisible (the recessed CAC inset sat
   at 0.988 inside a 1.0 module). Re-tune only the handful that need it;
   dark is untouched. */
:root[data-theme="light"] {
  --bar-fill: oklch(0.60 0 0);              /* channel bars: clear mid-grey on white */
}
:root[data-theme="light"] .module { border: 1px solid var(--border-light); }
:root[data-theme="light"] .cac-panel { background: oklch(0.963 0 0); }
:root[data-theme="light"] .range-fill { background: oklch(0.55 0 0); }

/* ── Diagram ────────────────────────────────────────────────── */
.diagram { margin: var(--s7) 0; }
.diagram-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.diagram-col { border-radius: var(--radius-lg); background: var(--bg-elevated); padding: var(--s4); }
.diagram-col.miss { background: var(--bg); }
.diagram-col h4 { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.diagram-col .dc-sub { font-size: 12px; color: var(--text-tertiary); margin-bottom: var(--s3); }
.diagram-items { display: flex; flex-direction: column; gap: var(--s1); }
.diagram-item { display: flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--text-secondary); }
.diagram-col.miss .diagram-item { color: var(--text-tertiary); }
.di-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text); flex-shrink: 0; }
.diagram-col.miss .di-dot { background: var(--text-disabled); }
.diagram-cap { font-size: 12px; line-height: 1.5; color: var(--text-tertiary); margin-top: var(--s3); }

/* ── Self-report (no right-side chips) ──────────────────────── */
/* proportion bar: the 70 deals split four ways, one hue per bucket (agree =
   green, conflict = red, untracked = amber, blank = blue). Each segment shows
   its colour muted; hovering a filter previews it; the active bucket goes full. */
.recon-bar { display: flex; gap: 2px; height: 8px; margin-bottom: var(--s3); }
.recon-bar-seg {
  min-width: 3px; border-radius: 2px;
  --seg: var(--text);
  background: color-mix(in oklch, var(--seg) 42%, transparent);
  transition: background var(--transition);
}
.recon-bar-seg[data-k="agree"]    { --seg: var(--bucket-agree); }
.recon-bar-seg[data-k="conflict"] { --seg: var(--bucket-conflict); }
.recon-bar-seg[data-k="dark"]     { --seg: var(--bucket-untracked); }
.recon-bar-seg[data-k="blank"]    { --seg: var(--bucket-blank); }
.recon-bar-seg.is-hover { background: color-mix(in oklch, var(--seg) 68%, transparent); }
.recon-bar-seg.is-active { background: var(--seg); }

/* segmented filter = the legend: a count + short label per bucket */
.recon-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-bottom: var(--s4); }
.recon-seg-btn {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: var(--s2) var(--s3); text-align: left; cursor: pointer;
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
  background: var(--bg);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.recon-seg-btn:hover { border-color: var(--border); }
.recon-seg-btn.is-active { background: var(--pill-active-bg); border-color: transparent; }
.recon-seg-btn:active { transform: scale(0.96); }
.recon-seg-btn:focus-visible { outline: 1.5px solid var(--text-tertiary); outline-offset: 2px; }
.rsg-n { font-size: 18px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.rsg-l { font-size: 12px; color: var(--text-tertiary); }
.recon-seg-btn.is-active .rsg-l { color: var(--text-secondary); }

.recon-explain { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin-bottom: var(--s3); text-wrap: pretty; }

/* example rows: outlined quotes, tight; capped list, no inner scroll */
.recon-list { display: flex; flex-direction: column; gap: var(--s2); }
.recon-row { padding: var(--s3); border-radius: var(--radius-md); background: transparent; border: 1px solid var(--border-light); }
.rr-said { font-size: 14px; font-style: italic; color: var(--text); }
.rr-said .blank { color: var(--text-tertiary); }
.rr-tracked { font-size: 11.5px; color: var(--text-tertiary); margin-top: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.rr-lead { color: var(--text-tertiary); margin-right: 2px; }
.rr-chip { padding: 1px 7px; border-radius: var(--radius-sm); background: var(--tag-bg); color: var(--tag-text); font-size: 11px; font-weight: 500; }
.rr-chip.match { background: var(--accent-surface); color: var(--text); }
.rr-note { font-size: 11.5px; line-height: 1.4; color: var(--text-tertiary); margin-top: var(--s2); }
.recon-more { font-size: 12px; color: var(--text-tertiary); padding-top: var(--s1); }

/* ── Evidence ledger + statement ────────────────────────────── */
.ledger-block { margin-top: var(--s5); }
.ledger-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.lh-title { font-size: 12px; font-weight: 600; color: var(--text-tertiary); }
.lh-tally { font-size: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

.ledger { display: flex; flex-direction: column; }
.ledger-row { display: grid; grid-template-columns: 1fr 84px; gap: var(--s3); align-items: start; padding: var(--s3) var(--s1); border-bottom: 1px solid var(--border-light); }
.ledger-row:last-child { border-bottom: none; }
.lr-input { font-size: 13px; font-weight: 500; color: var(--text); }
.lr-why { font-size: 12px; line-height: 1.45; color: var(--text-tertiary); margin-top: 2px; }
.lr-note { font-size: 11.5px; line-height: 1.4; color: var(--text-disabled); margin-top: var(--s2); font-style: italic; }

/* upgrade toggle: "flag the evidence you have" */
.lr-have {
  margin-top: var(--s2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 11.5px var(--font); color: var(--text-tertiary);
  padding: 3px var(--s2); border-radius: var(--radius-sm);
  border: 1px dashed var(--border); background: none;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.lr-have .lh-plus { font-size: 13px; line-height: 1; }
.lr-have:hover { color: var(--text); border-color: var(--text-tertiary); }
.lr-have.is-on {
  color: var(--grade-measured-text); background: var(--grade-measured-bg);
  border-style: solid; border-color: var(--grade-border);
}
.lr-have:focus-visible { outline: 1.5px solid var(--text-tertiary); outline-offset: 2px; }
.lr-then { font-size: 11.5px; line-height: 1.45; color: var(--grade-measured-text); margin-top: var(--s2); max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--transition), opacity var(--transition), margin var(--transition); }
.ledger-row.is-upgraded .lr-then { max-height: 60px; opacity: 1; }
.grade-chip, .lr-grade {
  justify-self: end; display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600; letter-spacing: 0;
  padding: var(--s1) var(--s2); border-radius: var(--radius-sm); white-space: nowrap;
}
.grade-chip { margin-right: var(--s2); }
.measured { background: var(--grade-measured-bg); color: var(--grade-measured-text); border: 1px solid var(--grade-border); }
.modelled { background: var(--grade-modelled-bg); color: var(--grade-modelled-text); border: 1px solid var(--grade-border); }
.assumed { background: var(--grade-assumed-bg); color: var(--grade-assumed-text); border: 1px solid var(--grade-border); }

.stmt-controls { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.stmt-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.stmt-label { font-size: 12px; color: var(--text-tertiary); width: 52px; flex-shrink: 0; }

.statement { padding: var(--s4); border-radius: var(--radius-lg); background: var(--bg); }
.statement p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.statement .fig { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Commit-and-bound band (payoff module) ──────────────────── */
/* The reported number sits at the top of a band; each unflagged input keeps the
   floor low. Flagging one lifts the floor toward the point—the interval closes. */
.band { margin-top: var(--s4); }
.band-track { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--bg-active); }
.band-span { position: absolute; top: 0; height: 100%; min-width: 2px; border-radius: var(--radius-pill); background: var(--color-8); transition: left 460ms cubic-bezier(0.22,1,0.36,1), width 460ms cubic-bezier(0.22,1,0.36,1); }
.band-point { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--text); transform: translate(-50%, -50%); box-shadow: 0 1px 3px oklch(0 0 0 / 0.4), 0 0 0 4px var(--bg); transition: left 460ms cubic-bezier(0.22,1,0.36,1); }
.band-ticks { display: flex; justify-content: space-between; margin-top: var(--s2); font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.band-ticks span:nth-child(2) { color: var(--text-secondary); }

.lr-have:active { transform: scale(0.96); }

/* measured share of the reported cost — rises as agency/staff turn measured,
   while the band above stays put (the honest point: spread isn't measurement) */
.cost-grade { margin: var(--s3) 0 var(--s4); }
.cost-grade-bar { height: 5px; border-radius: var(--radius-pill); background: var(--bg-active); overflow: hidden; }
.cost-grade-bar span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--grade-measured-text); transition: width 460ms cubic-bezier(0.22,1,0.36,1); }
.cost-grade-note { font-size: 11.5px; line-height: 1.45; color: var(--text-tertiary); margin-top: var(--s2); }
.statement-foot { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border-light); font-size: 12px; line-height: 1.5; color: var(--text-tertiary); }
.statement-foot strong { color: var(--text-secondary); }

.colophon { font-size: 13px; color: var(--text-tertiary); margin-top: var(--s5); }
.signoff { margin-top: var(--s5); font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.signoff a { font-weight: 600; }

/* Range bar — a CAC span with the defensible figure marked. Dot + pick position
   are set inline (left: X%) per instance. */
.rangebar { margin: var(--s7) 0 var(--s5); }
.rangebar .track { position: relative; height: 6px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-6), var(--color-11)); }
.rangebar .dot { position: absolute; top: 50%; left: 50%; width: 13px; height: 13px;
  border-radius: 50%; background: var(--text); border: 3px solid var(--bg);
  transform: translate(-50%, -50%); }
.rangebar .pick { position: absolute; bottom: calc(100% + 10px); transform: translateX(-50%);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px;
  color: var(--text); white-space: nowrap; }
.rangebar .pick::after { content: ""; position: absolute; top: calc(100% + 2px); left: 50%;
  transform: translateX(-50%); width: 1px; height: 7px; background: var(--text-tertiary); }
.rangebar .ends { display: flex; justify-content: space-between; margin-top: var(--s2);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-tertiary); }
.rangebar .ends b { display: block; color: var(--text-secondary); font-weight: 500; }

/* ── Dataset download ───────────────────────────────────────── */
.dataset-actions { margin-bottom: var(--s3); }
.dl-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 13px; font-weight: 500; color: var(--text);
  text-decoration: none;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elevated);
  transition: background var(--transition), border-color var(--transition);
}
.dl-btn::before {
  content: ""; width: 15px; height: 15px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E");
}
.dl-btn:hover { background: var(--bg-active); border-color: var(--text-tertiary); }
.dl-btn:focus-visible { outline: 1.5px solid var(--text-tertiary); outline-offset: 2px; }

/* ── Dataset viewer (multi-sheet spreadsheet) ───────────────── */
.sheet-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--s3); width: fit-content; }
.sheet-tab { border: none; background: none; cursor: pointer; font: 500 12.5px var(--font); color: var(--text-tertiary); padding: 7px 12px; border-radius: var(--radius-sm); white-space: nowrap; transition: color var(--transition), background var(--transition); }
.sheet-tab:hover { color: var(--text); }
.sheet-tab.is-active { color: var(--text); background: var(--pill-active-bg); }
.sheet-tab:focus-visible { outline: 1.5px solid var(--text-tertiary); outline-offset: 2px; }
.sheet-meta { font-size: 12px; color: var(--text-tertiary); margin-bottom: var(--s2); }
.sheet-scroll { overflow-x: auto; overflow-y: auto; max-height: 340px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sheet-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.sheet-table th, .sheet-table td { text-align: left; padding: 6px 10px; font-size: 12px; white-space: nowrap; border-bottom: 1px solid var(--border-light); }
.sheet-table th { position: sticky; top: 0; background: var(--bg-elevated); color: var(--text-tertiary); font-weight: 600; z-index: 1; }
.sheet-table td { color: var(--text-secondary); }
.sheet-table td.num { text-align: right; }
.sheet-table tr:last-child td { border-bottom: none; }
.sheet-table tbody tr:hover td { background: var(--bg-hover); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: sticky; top: var(--topbar-h); height: auto;
    padding: var(--s2) var(--gutter);
    border-right: none; border-bottom: 1px solid var(--border-light);
    z-index: 40; flex-direction: row; align-items: center;
  }
  .nav { flex-direction: row; gap: var(--s1); overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-sep { display: none; }
  .nav-item .nav-ico { display: none; }
  /* on mobile the top nav keeps only Home + Skill; the in-page section links
     (everything after the first separator) drop off */
  .nav-sep ~ .nav-item { display: none; }
  .sidebar-foot { margin-top: 0; margin-left: auto; padding-top: 0; padding-left: var(--s3); flex-shrink: 0; }
}

@media (max-width: 560px) {
  .recon-seg { grid-template-columns: repeat(2, 1fr); }
  .diagram-grid { grid-template-columns: 1fr; }
  .chan-head, .chan-row { grid-template-columns: 88px 1fr 52px; }
  .chan-head .r.rev, .chan-rev { display: none; }
  .ledger-row { grid-template-columns: 1fr; }
  .lr-grade { justify-self: start; margin-top: var(--s2); }
  /* keep the widest stat figure (e.g. revenue) inside its card on narrow screens */
  .cac-stat { padding: var(--s2); }
  .cs-val { font-size: 16px; }
}