/* components.css - component look. No color hex, no font-family strings, no raw spacing
   px that has a token (structural geometry px for controls/canvas chrome are allowed -
   they have no token). Every color/font via var(--token). */

/* ---------- eyebrow ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
}

/* ===================== OUTCOME STRIP (the hero) ===================== */
.outcome-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.outcome-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.outcome-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.outcome-hookline {
  margin-top: var(--sp-2);
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 52ch;
  line-height: 1.4;
}
.outcome-hero {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
}
.outcome-num-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.outcome-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(52px, 6vw, 76px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease-out);
}
.outcome-of {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.outcome-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 22ch;
}
.outcome-verdict {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 38ch;
  margin-top: var(--sp-2);
  min-height: 1.4em;
}
.outcome-hero.tone-bad  .outcome-num { color: var(--red); }
.outcome-hero.tone-mid  .outcome-num { color: var(--amber); }
.outcome-hero.tone-good .outcome-num { color: var(--green); }

.status-badge {
  display: inline-block;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-3);
}

/* ===================== section headings ===================== */
.section-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
.section-heading-sm { font-size: 18px; margin-bottom: 0; }
.section-sub { font-size: 13px; color: var(--ink-mute); margin-bottom: var(--sp-4); }

/* ===================== SIM STAGE ===================== */
.sim-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  box-shadow: var(--shadow-hover);
  background: var(--paper-2);
}
.sim-transport { display: flex; gap: var(--sp-2); }
.sim-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.sim-btn-ghost { background: transparent; color: var(--accent); }
.sim-btn:hover { opacity: 0.88; }
.sim-btn:active { transform: translateY(1px); }

/* ===================== COMPACT COST/BENEFIT STRIP ===================== */
.cb-chip {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-soft);
  border-top: 3px solid var(--gray);
}
.cb-benefit { border-top-color: var(--calc); }
.cb-val {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cb-benefit .cb-val { color: var(--calc); }
.cb-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: var(--sp-1);
}

/* band explainer */
.band-explainer {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--calc-bg);
  border-radius: var(--radius-sm);
}

/* cascade warning */
.cascade-warning {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 13px;
  font-weight: 500;
  animation: cascade-in var(--dur) var(--ease-out);
}
@keyframes cascade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cascade-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--red);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* single-lever callout + interaction gap */
.single-lever-callout {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--amber-bg);
  border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  color: var(--amber);
  font-size: 13px;
  font-weight: 600;
}
.interaction-gap {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  background: var(--paper-2);
  border-radius: var(--radius);
  border: 1px solid var(--rule-soft);
}
.gap-cols { display: flex; align-items: center; gap: var(--sp-5); justify-content: center; }
.gap-col { text-align: center; }
.gap-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.03em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.gap-col-strong .gap-num { color: var(--green); }
.gap-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: var(--sp-1);
}
.gap-arrow { font-size: 26px; color: var(--accent); }
.gap-note {
  margin-top: var(--sp-3);
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.5;
}

/* ===================== CONTROLS = KNOWLEDGE GRAPH (v3 ADD B) ===================== */
.shell-controls {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.control-group-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
  margin-bottom: var(--sp-3);
}
.graph-legend {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: var(--sp-1) 0 var(--sp-3);
}
.graph-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-top: var(--sp-2);
  line-height: 1.4;
}

/* the graph STAGE: an aspect-locked box; nodes are absolutely placed, edges in SVG */
.graph-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 56vh;
  margin: 0 auto;
  background:
    radial-gradient(circle at 50% 50%, var(--paper-2) 0%, var(--paper) 72%);
  border-radius: var(--radius);
  border: 1px solid var(--rule-soft);
  overflow: visible;
}
.graph-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* edges - dim by default, glow when both endpoints are on */
.graph-edge {
  stroke: var(--rule);
  stroke-width: 0.7;
  opacity: 0.55;
  transition: stroke var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), stroke-width var(--dur) var(--ease-out);
  vector-effect: non-scaling-stroke;
}
.graph-edge.edge-linchpin { stroke: var(--calc); stroke-dasharray: 2 2; }
.graph-edge.edge-outcome { stroke: var(--rule-soft); }
.graph-edge.is-active {
  stroke: var(--accent);
  stroke-width: 1.6;
  opacity: 1;
}
.graph-edge.edge-linchpin.is-active { stroke: var(--calc); }
.graph-edge.edge-outcome.is-active { stroke: var(--green); stroke-width: 1.4; opacity: 0.9; }
/* the kill-switch: linchpin edges go dark when measurement is untrustworthy */
.graph-edge.is-dark { stroke: var(--ink-faint); opacity: 0.18; stroke-dasharray: 1 3; }

.graph-edge-gain {
  font-family: var(--font-mono);
  font-size: 3.4px;
  font-weight: 700;
  fill: var(--accent);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 1.1px;
}
.graph-edge-gain.no-gain { fill: var(--ink-faint); }

/* NODES - absolutely placed, centred on their point */
.gnode {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  min-width: 64px;
  max-width: 96px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease, opacity var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.gnode:hover { box-shadow: var(--shadow-hover); transform: translate(-50%, -50%) scale(1.04); }
.gnode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gnode-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.gnode-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rule);
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.gnode-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.15;
  color: var(--ink);
}
.gnode-state {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--ink-faint);
}

/* reform node OFF (dimmed) vs ON (lit) */
.gnode-reform.is-off { opacity: 0.62; }
.gnode-reform.is-on {
  border-color: var(--accent);
  background: var(--accent-bg);
  opacity: 1;
}
.gnode-reform.is-on .gnode-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.gnode-reform.is-on .gnode-state { color: var(--accent); }
/* concrete (material) sits apart - tint differently so it reads as "not the cluster" */
.gnode-material.is-on { border-color: var(--calc); background: var(--calc-bg); }
.gnode-material.is-on .gnode-dot { background: var(--calc); box-shadow: 0 0 0 4px var(--calc-bg); }
.gnode-material.is-on .gnode-state { color: var(--calc); }

/* LINCHPIN node - the integrity knob as a node */
.gnode-linchpin {
  border-color: var(--calc);
  background: var(--calc-bg);
  min-width: 84px;
}
.gnode-linchpin .gnode-dot { background: var(--calc); box-shadow: 0 0 0 5px var(--calc-bg); }
.gnode-linchpin .gnode-label { color: var(--calc); }
.gnode-linchpin.is-dark {
  border-color: var(--ink-faint);
  background: var(--paper-2);
  opacity: 0.55;
}
.gnode-linchpin.is-dark .gnode-dot { background: var(--ink-faint); box-shadow: none; }
.gnode-linchpin.is-dark .gnode-label { color: var(--ink-mute); }

/* OUTCOME node - "Your road" */
.gnode-outcome {
  border-color: var(--green);
  background: var(--green-bg);
  min-width: 80px;
}
.gnode-outcome .gnode-label { color: var(--green); }
.gnode-outcome-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.gnode-outcome-unit {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.gnode-outcome.is-dark { border-color: var(--ink-faint); background: var(--paper-2); opacity: 0.6; }
.gnode-outcome.is-dark .gnode-label,
.gnode-outcome.is-dark .gnode-outcome-num { color: var(--ink-mute); }

/* the expansion PANEL (two levels max) */
.graph-panel {
  margin-top: var(--sp-3);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur) var(--ease-out);
}
.graph-panel.is-open {
  max-height: 360px;
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule-soft);
}
.gpanel-name { font-weight: 700; font-size: 13.5px; color: var(--ink); margin-bottom: var(--sp-2); }
.gpanel-l1 { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.gpanel-l2 {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--rule);
}
.gpanel-more {
  margin-top: var(--sp-2);
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--calc);
  cursor: pointer;
}
.gpanel-more:hover { color: var(--accent); }
.gpanel-dark {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--red-bg);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

/* trust levels (the linchpin's panel doubles as the integrity control) */
.integrity-slider-hidden { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.trust-levels { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.trust-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-mute);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.trust-chip:hover { border-color: var(--calc); }
.trust-chip.active { border-color: var(--calc); background: var(--calc-bg); color: var(--calc); }

/* ===================== COST LADDER (below fold) ===================== */
.cost-rung {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
}
.cost-rupees { font-size: 20px; letter-spacing: -0.05em; }
.rupee { color: var(--ink-faint); }
.rupee-on { color: var(--accent); }
.cost-rung-label { font-weight: 600; color: var(--ink); font-size: 15px; }
.cost-rung-hint { font-size: 12.5px; color: var(--ink-mute); margin-top: var(--sp-1); }
.cost-rung-costs { display: flex; gap: var(--sp-3); }
.cost-chip {
  text-align: center;
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  min-width: 64px;
}
.cost-chip-val {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cost-chip-lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cost-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin-top: var(--sp-4); }
.cost-note-mute { color: var(--ink-mute); }

/* ===================== DRILL-DOWN (below fold) ===================== */
.block-drill .section-heading { margin-bottom: var(--sp-4); }
.drill-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--dur-fast) ease;
  margin-bottom: var(--sp-3);
}
.drill-card.active { border-color: var(--accent); }
.drill-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-4);
}
.drill-name { font-weight: 600; color: var(--ink); font-size: 15px; }
.drill-state {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  color: var(--ink-mute);
  background: var(--paper-2);
}
.drill-card.active .drill-state { color: var(--accent); background: var(--accent-bg); }
.drill-level { border-top: 1px dashed var(--rule); }
.drill-trigger {
  width: 100%;
  background: transparent;
  border: none;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--calc);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drill-l2 .drill-trigger { color: var(--analysed, var(--accent)); }
.drill-chev { transition: transform var(--dur) var(--ease-out); }
.drill-level.open .drill-chev { transform: rotate(180deg); }
.drill-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur) var(--ease-out);
  background: var(--paper-2);
}
.drill-level.open .drill-body { max-height: 400px; }
.drill-body p { padding: var(--sp-4); font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

/* ===================== FOOTER ===================== */
.block-footer { border-top: 1px solid var(--rule); padding-top: var(--sp-5); }
.footer-left, .footer-right {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.footer-right { max-width: 540px; text-align: right; }

/* ===================== fatal banner ===================== */
.fatal-banner {
  background: var(--red-bg);
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  font-weight: 600;
  margin: var(--sp-5) 0;
}

/* narrow screens: outcome strip stacks */
@media (max-width: 760px) {
  .outcome-strip { grid-template-columns: 1fr; align-items: start; gap: var(--sp-4); }
  .outcome-hero { text-align: left; align-items: flex-start; }
}

/* ===================== ORIENTATION-FIRST overlay (v3 ADD A) ===================== */
.orient-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: var(--paper);
  background-image: var(--page-wash);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.orient-overlay.is-visible { opacity: 1; }
.orient-overlay.is-hiding { opacity: 0; }
.orient-overlay[hidden] { display: none; }

.orient-card {
  width: 100%;
  max-width: 760px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-expanded);
  padding: var(--sp-7);
  transform: translateY(10px);
  transition: transform var(--dur) var(--ease-out);
}
.orient-overlay.is-visible .orient-card { transform: none; }
.orient-eyebrow { margin-bottom: var(--sp-4); }
.orient-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.orient-title em { font-style: italic; font-weight: 300; color: var(--accent); }
.orient-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin: var(--sp-3) 0 var(--sp-6);
}

.orient-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.orient-point { display: flex; flex-direction: column; gap: var(--sp-3); }
.orient-ico {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-bg);
  color: var(--accent);
}
.orient-point:nth-child(3) .orient-ico { background: var(--amber-bg); color: var(--amber); }
.orient-ico-svg { width: 26px; height: 26px; }
.orient-point-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
}
.orient-point-body { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }

.orient-footer { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.orient-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.orient-cta:hover { opacity: 0.9; }
.orient-cta:active { transform: translateY(1px); }
.orient-skip { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.04em; }

/* the persistent "?" re-open affordance */
.orient-reopen {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 40;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  box-shadow: var(--shadow-hover);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.orient-reopen:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 760px) {
  .orient-points { grid-template-columns: 1fr; gap: var(--sp-4); }
  .orient-card { padding: var(--sp-5); }
}

/* graph degrades on narrow: cap height so it stays usable in the stacked layout */
@media (max-width: 1080px) {
  .graph-stage { max-height: 70vw; }
}

/* =====================================================================
   v4 LAYERED EXPLORER components. Tokens only.
   ===================================================================== */
.crumb-back {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; color: var(--accent);
  background: transparent; border: 1px solid var(--rule); border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-4); cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.crumb-back:hover { border-color: var(--accent); background: var(--accent-bg); }
.crumb-trail {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
}
.crumb-item { background: none; border: none; color: var(--ink-mute); cursor: pointer; padding: 0; font: inherit; text-transform: uppercase; }
.crumb-item:hover { color: var(--accent); }
.crumb-item.is-current { color: var(--ink); font-weight: 600; }
.crumb-sep { color: var(--ink-faint); }

.layer-heading {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 3vw, 36px);
  line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); margin-bottom: var(--sp-3);
}
.layer-sub { font-size: 15px; color: var(--ink-soft); max-width: 60ch; line-height: 1.55; }
.layer-sub-lg { font-size: 17px; max-width: 64ch; }
.layer-cta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-pill); padding: var(--sp-3) var(--sp-5); cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.layer-cta:hover { border-color: var(--accent); color: var(--accent); }
.layer-cta-strong { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.layer-cta-strong:hover { color: var(--paper); opacity: 0.9; }

.macro-title {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.0; letter-spacing: -0.035em; color: var(--ink); margin-bottom: var(--sp-3);
}
.macro-title em { font-style: italic; font-weight: 300; color: var(--accent); }
.macro-lede { font-size: 17px; color: var(--ink-soft); max-width: 56ch; line-height: 1.55; }
.macro-hero {
  margin-top: var(--sp-6); padding: var(--sp-7) var(--sp-6); background: var(--paper-2);
  border: 1px solid var(--rule-soft); border-left: 5px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow-hover); font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 34px); line-height: 1.4; color: var(--ink); letter-spacing: -0.015em;
}
.macro-hero-text { color: var(--ink-soft); }
.macro-hero-range { display: inline-flex; align-items: baseline; gap: var(--sp-1); }
.macro-hero-dash { color: var(--ink-mute); }
.macro-hero-cap {
  display: block; margin-top: var(--sp-4); font-family: var(--font-body);
  font-size: 13px; font-style: italic; color: var(--ink-mute); letter-spacing: 0;
}
.macro-idea {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); padding: var(--sp-5);
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); transition: box-shadow var(--dur-fast) ease;
}
.macro-idea:hover { box-shadow: var(--shadow-hover); }
.macro-idea-n { font-family: var(--font-serif); font-size: 30px; font-weight: 300; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.macro-idea-head { font-family: var(--font-serif); font-weight: 500; font-size: 21px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: var(--sp-2); }
.macro-idea-text { font-size: 15px; color: var(--ink-soft); line-height: 1.55; max-width: 64ch; }
.macro-deeper {
  margin-top: var(--sp-3); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 600; color: var(--accent); background: none; border: none;
  padding: 0; cursor: pointer; transition: opacity var(--dur-fast) ease;
}
.macro-deeper:hover { opacity: 0.7; }

.part-card {
  text-align: left; display: block; padding: var(--sp-5); background: var(--paper);
  border: 1px solid var(--rule-soft); border-radius: var(--radius); box-shadow: var(--shadow-soft);
  cursor: pointer; transition: box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.part-card:hover { box-shadow: var(--shadow-hover); border-color: var(--accent); }
.part-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2); }
.part-card-title { font-family: var(--font-serif); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: var(--sp-2); }
.part-card-lede { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.part-card-go { display: inline-block; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.part-eyebrow { margin-bottom: var(--sp-2); }
.part-point { padding: var(--sp-4) var(--sp-5); background: var(--paper); border: 1px solid var(--rule-soft); border-left: 3px solid var(--rule); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); }
.part-point-head { font-family: var(--font-serif); font-weight: 500; font-size: 18px; color: var(--ink); margin-bottom: var(--sp-1); }
.part-point-body { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; max-width: 70ch; }

.numchip {
  position: relative; padding: var(--sp-4); background: var(--paper); border: 1px solid var(--rule-soft);
  border-top: 3px solid var(--calc); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft);
}
.numchip-valrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.numchip-val { font-family: var(--font-serif); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.numchip-info {
  flex: none; width: 20px; height: 20px; border-radius: var(--radius-pill); border: 1px solid var(--rule);
  background: var(--paper-2); color: var(--ink-mute); font-family: var(--font-mono); font-size: 11px;
  font-weight: 700; line-height: 1; cursor: pointer; transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.numchip-info:hover { border-color: var(--accent); color: var(--accent); }
.numchip-lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-top: var(--sp-2); line-height: 1.3; }
.numchip-gloss { display: none; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--rule); font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.numchip.is-open .numchip-gloss { display: block; animation: layer-in var(--dur-fast) var(--ease-out); }
.numchip-hero { display: inline-flex; flex-direction: column; padding: 0 var(--sp-2); margin: 0 var(--sp-1); background: none; border: none; box-shadow: none; vertical-align: baseline; }
.numchip-hero .numchip-val { font-size: 1.5em; font-weight: 600; color: var(--accent); }
.numchip-hero .numchip-lbl { display: none; }
.numchip-hero .numchip-info { width: 16px; height: 16px; font-size: 9px; margin-left: var(--sp-1); }
.numchip-hero.is-open .numchip-gloss {
  position: absolute; z-index: 5; max-width: 320px; margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover); font-family: var(--font-body); font-weight: 400; letter-spacing: 0;
}

.firm-card { padding: var(--sp-4); border-radius: var(--radius-sm); border: 1px solid var(--rule-soft); }
.firm-firm { background: var(--green-bg); border-left: 3px solid var(--green); }
.firm-directional { background: var(--amber-bg); border-left: 3px solid var(--amber); }
.firm-open { background: var(--accent-bg); border-left: 3px solid var(--accent); }
.firm-head { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ink); margin-bottom: var(--sp-2); }
.firm-body { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

.scrubber-wrap { padding: var(--sp-4); background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: var(--radius-sm); }
.scrubber-lbl { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); margin-bottom: var(--sp-3); }
.scrubber-readout { color: var(--accent); }
.scrubber { width: 100%; accent-color: var(--accent); cursor: pointer; }
.scrubber-note { margin-top: var(--sp-2); font-size: 12px; font-style: italic; color: var(--ink-mute); }
.interactive-controls { min-width: 0; }

/* =====================================================================
   v4 ROUND-2 CRAFT PASS — tokens only. Maps to the improvement ledger.
   ===================================================================== */

/* ---------- (#5) SYSTEM SKELETON: a 3-node structural map atop the home ---------- */
.macro-skeleton {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.macro-skeleton-lbl {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-mute); margin-bottom: var(--sp-3);
}
.macro-skeleton-flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.macro-skeleton-node {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.25; color: var(--ink-soft);
  padding: var(--sp-1) var(--sp-3); background: var(--paper-2); border-radius: var(--radius-sm);
  border: 1px solid var(--rule-soft);
}
.macro-skeleton-node.is-gate {
  color: var(--linchpin-ink); background: var(--linchpin-bg);
  border-color: var(--linchpin-edge); font-weight: 600;
}
.macro-skeleton-arrow { color: var(--accent); font-size: 15px; }

/* ---------- (#3) MACRO IDEA: bold verdict pre-stated + raised body contrast ---------- */
.macro-idea-verdict {
  font-family: var(--font-serif); font-weight: 600; font-size: 18px; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink); margin-bottom: var(--sp-2);
}
/* (#3) raise body contrast to near-black for the macro ideas + part points */
.macro-idea-text { color: var(--ink-strong); }
.part-point-body { color: var(--ink-strong); }
.macro-lede { color: var(--ink-strong); }

/* ---------- (#4) LINCHPIN CALLOUT: the load-bearing finding, distinct ---------- */
.macro-idea-linchpin {
  position: relative;
  background: var(--linchpin-bg);
  border: 1px solid var(--linchpin-edge);
  border-left: 4px solid var(--linchpin-edge);
  box-shadow: 0 6px 24px var(--linchpin-glow);
}
.macro-idea-linchpin .macro-idea-n { color: var(--linchpin-ink); }
.macro-idea-linchpin .macro-idea-verdict { color: var(--linchpin-ink); }
.macro-linchpin-tag {
  grid-column: 1 / -1;
  align-self: start;
  display: inline-block; justify-self: start;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: var(--paper);
  background: var(--linchpin-ink); padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill); margin-bottom: var(--sp-2);
}
.part-point-linchpin {
  background: var(--linchpin-bg);
  border: 1px solid var(--linchpin-edge);
  border-left: 4px solid var(--linchpin-edge);
  box-shadow: 0 4px 18px var(--linchpin-glow);
}
.part-point-linchpin .part-point-head { color: var(--linchpin-ink); }
.part-point-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: var(--paper);
  background: var(--linchpin-ink); padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill); margin-bottom: var(--sp-2);
}

/* ---------- (#6) HONESTY BAND — elevated, first-class, forward-framed ---------- */
.honesty-band {
  margin-top: var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.honesty-tag {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: var(--sp-3);
}
.honesty-lead {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(18px, 2vw, 22px);
  line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); margin-bottom: var(--sp-2);
}
.honesty-body { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; max-width: 70ch; }
.honesty-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-4);
}
.honesty-cell {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  border: 1px solid var(--rule-soft);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.honesty-firm { background: var(--green-bg); border-left: 3px solid var(--green); }
.honesty-directional { background: var(--amber-bg); border-left: 3px solid var(--amber); }
.honesty-open { background: var(--accent-bg); border-left: 3px solid var(--accent); }
.honesty-cell-tag {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; color: var(--ink);
}
.honesty-cell-line { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }

/* ---------- (#9) WHAT'S A MODEL ---------- */
.what-is-model {
  margin-top: var(--sp-3); margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-2); border-radius: var(--radius-sm);
  border-left: 3px solid var(--calc);
  font-size: 13px; color: var(--ink-soft); line-height: 1.55; max-width: 72ch;
}

/* ---------- (#6/#9) COST-RATIO HERO — leads the numbers layer ---------- */
.cost-hero {
  margin: var(--sp-5) 0 var(--sp-6);
  padding: var(--sp-6);
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.cost-hero-line {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.3; letter-spacing: -0.02em; color: var(--ink);
}
.cost-hero-frac {
  font-weight: 700; color: var(--accent); font-style: italic;
}
.cost-hero-detail {
  margin-top: var(--sp-3); font-family: var(--font-mono); font-size: 13px;
  color: var(--ink-soft); letter-spacing: 0.01em;
}
.cost-hero-cap { margin-top: var(--sp-2); font-size: 13px; font-style: italic; color: var(--ink-mute); }

/* ---------- (#1) COST/BENEFIT CHIPS — unit + delta vs today ---------- */
.cb-vstoday {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--sp-2);
}
.cb-valrow { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.cb-unit {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-mute);
}
.cb-delta {
  display: inline-block; margin-top: var(--sp-2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px var(--sp-2); border-radius: var(--radius-pill);
}
.cb-delta-good { color: var(--delta-good); background: var(--delta-good-bg); }
.cb-delta-bad { color: var(--delta-bad); background: var(--delta-bad-bg); }
.cb-delta-same { color: var(--delta-neutral); background: var(--delta-neutral-bg); }

/* ---------- (#1) LIVE OUTCOME stat above the sim ---------- */
.sim-outcome {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper); border: 1px solid var(--rule-soft);
  border-left: 5px solid var(--green); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.sim-outcome.tone-bad { border-left-color: var(--red); }
.sim-outcome.tone-mid { border-left-color: var(--amber); }
.sim-outcome.tone-good { border-left-color: var(--green); }
.sim-outcome-numrow { display: flex; align-items: baseline; gap: var(--sp-2); }
.sim-outcome-num {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(40px, 5vw, 60px);
  line-height: 0.9; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.sim-outcome.tone-bad .sim-outcome-num { color: var(--red); }
.sim-outcome.tone-mid .sim-outcome-num { color: var(--amber); }
.sim-outcome.tone-good .sim-outcome-num { color: var(--green); }
.sim-outcome-of { font-family: var(--font-mono); font-size: 13px; color: var(--ink-mute); letter-spacing: 0.04em; }
.sim-outcome-lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.sim-outcome-delta { margin-top: var(--sp-1); }

/* ---------- (#3) STEP CUE ---------- */
.sim-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
  list-style: none; margin: 0 0 var(--sp-5); padding: 0;
}
.sim-step {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--paper);
  border: 1px solid var(--rule-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft);
}
.sim-step-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--paper);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
}
.sim-step-txt { display: flex; flex-direction: column; gap: 1px; }
.sim-step-lab { font-weight: 600; font-size: 14px; color: var(--ink); }
.sim-step-hint { font-size: 11.5px; color: var(--ink-mute); line-height: 1.35; }

/* ---------- (#2) PLAY BUTTON + STYLED YEAR SLIDER ---------- */
.sim-btn-play {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  box-shadow: 0 0 0 0 var(--play-ring);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur) ease;
}
.sim-btn-play.is-playing { box-shadow: 0 0 0 6px var(--play-ring); }
.sim-btn-ico {
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--paper);
}
.sim-btn-play.is-playing .sim-btn-ico {
  width: 8px; height: 9px; border: none;
  background:
    linear-gradient(var(--paper), var(--paper)) left / 3px 100% no-repeat,
    linear-gradient(var(--paper), var(--paper)) right / 3px 100% no-repeat;
}

.scrubber-row { display: flex; align-items: center; gap: var(--sp-3); }
.scrubber-end {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute); white-space: nowrap;
}
/* filled-track range: paint the played portion clay, the rest neutral. --fill set in JS. */
.scrubber {
  -webkit-appearance: none; appearance: none;
  height: 8px; border-radius: var(--radius-pill);
  background: linear-gradient(to right,
    var(--accent) 0%, var(--accent) var(--fill, 0%),
    var(--rule) var(--fill, 0%), var(--rule) 100%);
  outline: none;
}
.scrubber::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--accent);
  box-shadow: var(--shadow-hover); cursor: grab; margin-top: 0;
  transition: transform var(--dur-fast) ease;
}
.scrubber::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.scrubber::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--accent);
  box-shadow: var(--shadow-hover); cursor: grab;
}
.scrubber::-moz-range-track { height: 8px; border-radius: var(--radius-pill); background: var(--rule); }
.scrubber::-moz-range-progress { height: 8px; border-radius: var(--radius-pill); background: var(--accent); }
.scrubber:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- (#8) SO-WHAT / SYNTHESIS + NEXT-ACTION ---------- */
.sim-synthesis {
  margin-top: var(--sp-5); padding: var(--sp-5) var(--sp-6);
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.sim-synthesis-line {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(17px, 2vw, 21px);
  line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); margin-bottom: var(--sp-4);
}
.sim-next {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding-top: var(--sp-4); border-top: 1px solid var(--rule);
}
.sim-next-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; color: var(--accent);
}
.sim-next-body { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; flex: 1 1 320px; min-width: 0; }

/* ---------- (#10) FORWARD NAV + OVERVIEW ESCAPE ---------- */
.forward-nav {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  display: flex; justify-content: flex-end;
}
.forward-nav-btn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700; color: var(--paper);
  background: var(--accent); border: 1px solid var(--accent);
  border-radius: var(--radius-pill); padding: var(--sp-3) var(--sp-6); cursor: pointer;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.forward-nav-btn:hover { opacity: 0.9; transform: translateX(2px); }
.crumb-overview {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--rule); border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-4); cursor: pointer; margin-left: var(--sp-2);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.crumb-overview:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 640px) {
  .sim-steps { grid-template-columns: 1fr; }
  .macro-skeleton-flow { flex-direction: column; align-items: flex-start; }
  .macro-skeleton-arrow { transform: rotate(90deg); }
}

/* =====================================================================
   v6.20 ROUND-3 — structural blockers + items 4–8. Tokens only.
   ===================================================================== */

/* ---------- (blocker 2) PERSISTENT SKELETON RAIL — sticky 4-node map ---------- */
.macro-rail {
  position: sticky; top: 0; z-index: 20;
  margin: 0 calc(-1 * var(--sp-6)) var(--sp-5);
  padding: var(--sp-3) var(--sp-6);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-soft);
}
.macro-rail-lbl {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-mute); margin-bottom: var(--sp-2);
}
.macro-rail-flow { display: flex; align-items: stretch; gap: var(--sp-2); flex-wrap: nowrap; overflow-x: auto; }
.macro-rail-node {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
  opacity: 0.55;
  transition: opacity var(--dur-fast) ease, border-color var(--dur-fast) ease,
              background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.macro-rail-node.is-current {
  opacity: 1; border-color: var(--accent); background: var(--accent-bg);
  transform: translateY(-1px); box-shadow: var(--shadow-soft);
}
.macro-rail-node.is-gate { border-style: dashed; border-color: var(--linchpin-edge); }
.macro-rail-node.is-gate.is-current { background: var(--linchpin-bg); border-style: solid; }
.macro-rail-node-label {
  font-family: var(--font-serif); font-weight: 600; font-size: 14px;
  letter-spacing: -0.01em; color: var(--ink); line-height: 1.1;
}
.macro-rail-node.is-gate .macro-rail-node-label { color: var(--linchpin-ink); }
.macro-rail-node-sub {
  font-family: var(--font-body); font-size: 11px; color: var(--ink-mute); line-height: 1.2;
}
.macro-rail-arrow { align-self: center; color: var(--ink-faint); font-size: 13px; flex: none; }

/* the small NODE tag mapping each idea onto the rail */
.macro-idea-node {
  grid-column: 2 / -1;
  justify-self: start;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-mute);
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  padding: 1px var(--sp-2); border-radius: var(--radius-pill); margin-bottom: var(--sp-2);
}

@media (max-width: 760px) {
  .macro-rail { margin-left: calc(-1 * var(--sp-4)); margin-right: calc(-1 * var(--sp-4)); padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .macro-rail-node-sub { display: none; }
}

/* ---------- (item 6) PERSISTENT RANGE CHIP — travels with the numbers ---------- */
.range-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600; color: var(--amber);
  background: var(--amber-bg); border: 1px solid var(--amber);
  border-radius: var(--radius-pill); padding: 3px var(--sp-3);
}
.range-chip::before { content: "≈"; font-weight: 700; font-size: 12px; }
.macro-hero .range-chip { margin-top: var(--sp-4); }
.layer-numbers > .range-chip { margin: var(--sp-2) 0 var(--sp-4); }

/* ---------- (item 4) NUMBERS GROUPED INTO 3 LABELLED BUCKETS ---------- */
.numbers-bucket { margin: var(--sp-5) 0 var(--sp-6); }
.numbers-bucket-head { margin-bottom: var(--sp-3); }
.numbers-bucket-title {
  font-family: var(--font-serif); font-weight: 600; font-size: 22px;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.1;
}
.numbers-bucket-unit {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: var(--sp-1);
}
.numbers-bucket-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-3); align-items: stretch;
}
.numchip-unit {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: var(--sp-1);
}
/* the 2x HERO tile in each bucket */
.numchip-bucket-hero {
  grid-column: span 2; border-top-width: 5px; border-top-color: var(--accent);
  background: var(--accent-bg);
}
.numchip-bucket-hero .numchip-val { font-size: 52px; color: var(--accent); }
.numchip-bucket-hero .numchip-lbl { font-size: 10.5px; color: var(--ink-soft); }
.numchip-bucket-hero .numchip-unit { color: var(--ink-mute); }
@media (max-width: 520px) {
  .numchip-bucket-hero { grid-column: span 1; }
  .numchip-bucket-hero .numchip-val { font-size: 40px; }
}

/* ---------- (item 7) WHAT CAN YOU DO ---------- */
.what-you-can-do {
  margin-top: var(--sp-7); padding: var(--sp-6);
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 4px solid var(--action-edge); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.wycd-head {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: var(--sp-2);
}
.wycd-sub { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; max-width: 70ch; margin-bottom: var(--sp-5); }
.wycd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.wycd-lever {
  padding: var(--sp-4); background: var(--paper-2);
  border: 1px solid var(--rule-soft); border-top: 3px solid var(--action-edge); border-radius: var(--radius-sm);
}
.wycd-who {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; color: var(--action); margin-bottom: var(--sp-2);
}
.wycd-move { font-size: 13.5px; color: var(--ink-strong); line-height: 1.55; }
.wycd-caveat {
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--rule);
  font-size: 12.5px; font-style: italic; color: var(--ink-mute); line-height: 1.5;
}

/* ---------- (blocker 3) INTERACTIVE: top banner, baseline-first, baseline card, graph label ---------- */
.sim-banner {
  margin-bottom: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  background: var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.sim-banner-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; color: var(--accent-soft);
}
.sim-banner-line {
  margin-top: var(--sp-2); font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(16px, 2vw, 20px); line-height: 1.4; letter-spacing: -0.01em; color: var(--paper);
}

.sim-baseline-first {
  margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--amber-bg); border: 1px solid var(--amber); border-left: 4px solid var(--amber);
  border-radius: var(--radius-sm);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  transition: opacity var(--dur) var(--ease-out), max-height var(--dur) var(--ease-out);
}
.sim-baseline-first.is-dismissed { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; overflow: hidden; border-width: 0; }
.sim-baseline-first-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: var(--amber);
}
.sim-baseline-first-line { font-size: 14px; color: var(--ink-strong); font-weight: 500; flex: 1 1 320px; }
.sim-baseline-first-cue { font-size: 13px; font-style: italic; color: var(--amber); font-weight: 600; }

.sim-outcome-row { display: flex; align-items: stretch; gap: var(--sp-3); flex-wrap: wrap; }
.sim-outcome-row .sim-outcome { flex: 2 1 240px; }
.sim-baseline-card {
  flex: 1 1 140px;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4); background: var(--paper-2);
  border: 1px dashed var(--rule); border-radius: var(--radius);
}
.sim-baseline-card-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-mute);
}
.sim-baseline-card-numrow { display: flex; align-items: baseline; gap: var(--sp-2); }
.sim-baseline-card-num {
  font-family: var(--font-serif); font-weight: 500; font-size: 34px; line-height: 0.9;
  letter-spacing: -0.03em; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.sim-baseline-card-of { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.sim-baseline-card-lbl {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute); line-height: 1.3;
}

.interactive-controls-col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.interactive-graph-label { display: flex; flex-direction: column; gap: 2px; }
.interactive-graph-label-main {
  font-family: var(--font-serif); font-weight: 600; font-size: 16px;
  letter-spacing: -0.01em; color: var(--ink);
}
.interactive-graph-label-hint { font-family: var(--font-body); font-size: 12px; font-style: italic; color: var(--ink-mute); }

/* =====================================================================
   v4 ROUND-4 — the 5 high-leverage levers. Tokens only.
   ===================================================================== */

/* ---------- (lever 1) WALKABLE MODEL: rail active node FILLED, not just tinted ---------- */
.macro-rail-node.is-current {
  opacity: 1; border-color: var(--accent); background: var(--accent);
  transform: translateY(-1px); box-shadow: var(--shadow-hover);
}
.macro-rail-node.is-current .macro-rail-node-label,
.macro-rail-node.is-current .macro-rail-node-sub { color: var(--paper); }
.macro-rail-node.is-gate.is-current {
  background: var(--linchpin-ink); border-color: var(--linchpin-ink); border-style: solid;
}
.macro-rail-node.is-gate.is-current .macro-rail-node-label { color: var(--paper); }

/* ---------- (lever 1) NODE SECTIONS: claim header + clustered idea cards ---------- */
.macro-node-section {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--rule);
}
.macro-node-section.is-gate { border-top-color: var(--linchpin-edge); }
.macro-node-head { margin-bottom: var(--sp-4); }
.macro-node-label {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700; color: var(--paper);
  background: var(--ink); padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill); margin-bottom: var(--sp-3);
}
.macro-node-label.is-gate { background: var(--linchpin-ink); }
.macro-node-claim {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); max-width: 64ch;
}
.macro-node-section.is-gate .macro-node-claim { color: var(--linchpin-ink); }
.macro-node-ideas { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---------- (lever 2) FOUR VERDICTS + THE BUNDLE on the macro home ---------- */
.macro-verdicts {
  margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.macro-verdicts-head {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-mute); margin-bottom: var(--sp-4);
}
.macro-verdicts-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3);
}
.macro-verdict {
  padding: var(--sp-4); background: var(--paper-2);
  border: 1px solid var(--rule-soft); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.macro-verdict-linchpin { border-left-color: var(--linchpin-edge); background: var(--linchpin-bg); }
.macro-verdict-tag {
  display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: var(--sp-2);
}
.macro-verdict-linchpin .macro-verdict-tag { color: var(--linchpin-ink); }
.macro-verdict-text { font-size: 15px; line-height: 1.5; color: var(--ink-strong); font-weight: 500; }

.macro-bundle {
  margin-top: var(--sp-4); padding: var(--sp-5) var(--sp-6);
  background: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.macro-bundle-tag {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: var(--accent-soft);
}
.macro-bundle-line {
  margin-top: var(--sp-2); font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(18px, 2.4vw, 24px); line-height: 1.35; letter-spacing: -0.015em; color: var(--paper);
}
.macro-bundle-cap { margin-top: var(--sp-2); font-size: 13px; font-style: italic; color: var(--ink-faint); }

/* ---------- (lever 3) LIVE PROOF: one reform vs the full bundle — now CO-LOCATED with the
   toggles (under the graph). The +X / +Y is the loudest thing in the controls column. ---------- */
.lever-proof {
  margin-top: var(--sp-4); padding: var(--sp-5);
  border-radius: var(--radius); box-shadow: var(--shadow-hover);
  animation: cascade-in var(--dur) var(--ease-out);
}
.lever-proof.is-one { background: var(--amber-bg); border: 1px solid var(--amber); border-left: 5px solid var(--amber); }
.lever-proof.is-bundle { background: var(--marg-pos-bg); border: 1px solid var(--marg-pos); border-left: 5px solid var(--marg-pos); }
.lever-proof-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700;
}
.lever-proof.is-one .lever-proof-tag { color: var(--amber); }
.lever-proof.is-bundle .lever-proof-tag { color: var(--marg-pos); }
.lever-proof-line {
  margin-top: var(--sp-2); font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; letter-spacing: -0.025em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lever-proof.is-bundle .lever-proof-line { color: var(--marg-pos); }
.lever-proof-note { margin-top: var(--sp-2); font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- (lever 4) CONDITION LEGEND beside the year-blocks ---------- */
.sim-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4); margin-top: calc(-1 * var(--sp-2));
  background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: var(--radius-sm);
}
.sim-legend-lbl {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-soft);
}
.sim-legend-item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.sim-legend-swatch {
  width: 22px; height: 22px; border-radius: 5px; flex: none;
  border: 1px solid var(--rule);
}
.sim-legend-good { background: var(--viz-cell-good); }
.sim-legend-fair { background: var(--viz-cell-fair); }
.sim-legend-poor { background: var(--viz-cell-poor); }
.sim-legend-potholed { background: var(--viz-cell-potholed); }
.sim-legend-text { font-size: 14.5px; font-weight: 600; color: var(--ink-strong); }

/* ---------- (lever 4) READABILITY: body text size + contrast up one step ---------- */
.macro-idea-text { font-size: 15.5px; color: var(--ink-strong); line-height: 1.6; }
.part-point-body { font-size: 15.5px; color: var(--ink-strong); line-height: 1.6; }
.layer-sub { color: var(--ink-strong); }
.part-point-head { font-size: 19px; }
.macro-idea-head { font-size: 22px; }

/* ---------- (lever 5) ELEVATED "WHAT CAN YOU DO" + persistent affordance ---------- */
.what-you-can-do {
  border-left-width: 6px;
  border: 1px solid var(--rule); border-left: 6px solid var(--action-edge);
  background:
    linear-gradient(180deg, var(--action-bg) 0%, var(--paper) 42%);
  scroll-margin-top: var(--sp-6);
}
.wycd-eyebrow { margin-bottom: var(--sp-2); }
.wycd-lever-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.wycd-level {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; color: var(--action-chip-ink);
  background: var(--action); padding: 2px var(--sp-3); border-radius: var(--radius-pill);
}
.wycd-cost {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-mute);
}
.wycd-who { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: var(--sp-2); text-transform: none; font-family: var(--font-body); letter-spacing: 0; }
.wycd-move { font-size: 14px; color: var(--ink-strong); line-height: 1.55; }

.wcid-fab {
  position: fixed;
  left: var(--sp-5); bottom: var(--sp-5);
  z-index: 40;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 700;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--action-edge); background: var(--action); color: var(--action-chip-ink);
  box-shadow: var(--shadow-hover); cursor: pointer;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.wcid-fab:hover { opacity: 0.92; transform: translateY(-1px); }
.wcid-fab:active { transform: translateY(0); }

@media (max-width: 640px) {
  .wcid-fab { left: var(--sp-3); bottom: var(--sp-3); padding: var(--sp-2) var(--sp-4); }
}

/* =====================================================================
   2026-06-23 founder-direction additions: front-loaded findings ribbon (ordering),
   per-node marginal + outcome-node delta + co-located audit answer (locality).
   ===================================================================== */

/* ---------- (ordering) ORIENTATION findings ribbon: the 4 takeaways up front ---------- */
.orient-findings {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.orient-findings-lbl {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-mute); margin-bottom: var(--sp-3);
}
.orient-findings-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-5);
}
.orient-finding { display: flex; align-items: baseline; gap: var(--sp-2); }
.orient-finding-tag {
  flex: none; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700; color: var(--accent);
  min-width: 78px;
}
.orient-finding.is-linchpin .orient-finding-tag { color: var(--linchpin-ink); }
.orient-finding-text { font-size: 13px; color: var(--ink-strong); line-height: 1.4; }
@media (max-width: 640px) {
  .orient-findings-list { grid-template-columns: 1fr; }
}

/* ---------- (locality) PER-NODE MARGINAL chip: the extra years a reform adds, on the node ---------- */
.gnode-marginal {
  display: inline-block; margin-top: 3px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
  padding: 2px var(--sp-2); border-radius: var(--radius-pill); line-height: 1.4;
  font-variant-numeric: tabular-nums; box-shadow: var(--shadow-soft);
}
.gnode-marginal.is-pos { color: var(--marg-pos); background: var(--marg-pos-bg); }
.gnode-marginal.is-neg { color: var(--marg-neg); background: var(--marg-neg-bg); }
.gnode-marginal.is-zero { color: var(--marg-zero); background: var(--marg-zero-bg); }

/* ---------- (locality) OUTCOME-NODE delta-vs-today, in the centre of the toggles ---------- */
.gnode-outcome-delta {
  display: inline-block; margin-top: var(--sp-1);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.gnode-outcome-delta.cb-delta-good { color: var(--delta-good); }
.gnode-outcome-delta.cb-delta-bad { color: var(--delta-bad); }
.gnode-outcome-delta.cb-delta-same { color: var(--delta-neutral); }

/* ---------- (locality) "who checks the inspection?" audit answer, co-located ---------- */
.cascade-audit {
  margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  background: var(--linchpin-bg); border-left: 3px solid var(--linchpin-edge);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-strong); line-height: 1.5;
}
.gpanel-audit {
  margin-top: var(--sp-2); font-size: 13px; color: var(--linchpin-ink);
  font-weight: 600; line-height: 1.5;
}

/* =====================================================================
   v7 DASHBOARD OVERHAUL (3A#2 + 3A#5) -- persistent nav map, relocated
   scrubber, onboarding nudge. Tokens only; namespaced nav-* / scrub-* / onb-*.
   ===================================================================== */

/* ---------- (3A#5) PERSISTENT NAV MAP -- always-visible layer wayfinding ---------- */
.nav-map {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--sp-6)) var(--sp-4);
  padding: var(--sp-2) var(--sp-6);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-soft);
}
.nav-map-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
  flex: none;
}
.nav-map-track {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
  min-width: 0;
}
.nav-map-sep { color: var(--ink-faint); font-size: 11px; flex: none; }
.nav-map-item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease;
}
.nav-map-item-lab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.1;
}
.nav-map-item-go {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  line-height: 1.1;
}
.nav-map-item:hover { border-color: var(--rule); background: var(--paper-2); }
.nav-map-item:hover .nav-map-item-lab { color: var(--accent); }
.nav-map-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-map-item.is-current {
  background: var(--accent);
  border-color: var(--accent);
}
.nav-map-item.is-current .nav-map-item-lab,
.nav-map-item.is-current .nav-map-item-go { color: var(--paper); }

@media (max-width: 760px) {
  .nav-map {
    margin-left: calc(-1 * var(--sp-4));
    margin-right: calc(-1 * var(--sp-4));
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
  .nav-map-item-go { display: none; }
}

/* ---------- (3A#2) RELOCATED YEAR CONTROL -- inside the stage card, under the strips ---------- */
.scrub-box {
  position: relative;
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.scrub-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.scrub-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}
.scrub-readout {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.scrub-row { display: flex; align-items: center; gap: var(--sp-3); }
.scrub-end {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.scrub-range { height: 10px; }
.scrub-range::-webkit-slider-thumb {
  width: 30px; height: 30px;
  border-width: 4px;
  box-shadow: var(--shadow-hover), 0 0 0 6px var(--play-ring);
}
.scrub-range::-moz-range-thumb {
  width: 30px; height: 30px;
  border-width: 4px;
  box-shadow: var(--shadow-hover), 0 0 0 6px var(--play-ring);
}

/* ---------- (3A#2) ONE-TIME "DRAG ME" ONBOARDING NUDGE -- deterministic CSS only ---------- */
.onb-nudge {
  position: absolute;
  left: var(--sp-5);
  bottom: calc(-1 * var(--sp-2));
  transform: translateY(100%);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-hover);
  pointer-events: none;
  z-index: 5;
  animation: onb-drag 1.6s var(--ease-out) infinite;
}
.onb-nudge::before {
  content: "";
  position: absolute;
  top: -5px; left: var(--sp-4);
  width: 10px; height: 10px;
  background: var(--ink);
  transform: rotate(45deg);
}
.onb-nudge-ptr { font-size: 14px; line-height: 1; }
.onb-nudge-txt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.onb-nudge.is-dismissed {
  opacity: 0;
  animation: none;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out);
}
@keyframes onb-drag {
  0%   { transform: translateY(100%) translateX(0); }
  50%  { transform: translateY(100%) translateX(14px); }
  100% { transform: translateY(100%) translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .onb-nudge { animation: none; }
}

/* =====================================================================
   v7 REFORM PANEL (3A#3) -- switch-list replacing the SVG node-graph.
   Namespaced rf-*; tokens only (no new tokens required).
   ===================================================================== */
.rf-legend {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: var(--sp-2) 0 var(--sp-4);
}
.rf-hint {
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-mute);
  margin-top: var(--sp-3);
}

/* --- the linchpin / inspection card (the gate) --- */
.rf-linchpin {
  border: 1px solid var(--linchpin-edge);
  border-left: 5px solid var(--linchpin-edge);
  background: var(--linchpin-bg);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-soft);
  transition: opacity var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.rf-linchpin.is-dark {
  border-color: var(--ink-faint);
  border-left-color: var(--ink-faint);
  background: var(--paper-2);
  opacity: 0.85;
}
.rf-linchpin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.rf-linchpin-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--linchpin-ink);
}
.rf-linchpin.is-dark .rf-linchpin-title { color: var(--ink-mute); }
.rf-linchpin-state {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  color: var(--action-chip-ink);
  background: var(--linchpin-ink);
}
.rf-linchpin.is-dark .rf-linchpin-state { background: var(--ink-mute); }
.rf-linchpin-gloss {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}
.rf-trust-levels {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.rf-trust-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.rf-trust-chip:hover { border-color: var(--linchpin-edge); }
.rf-trust-chip.is-active {
  border-color: var(--linchpin-edge);
  background: var(--linchpin-ink);
  color: var(--action-chip-ink);
  font-weight: 700;
}
.rf-linchpin-audit {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-mute);
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule-soft);
}
.rf-linchpin-dark {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--red);
  background: var(--red-bg);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
}
.rf-slider-hidden { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* --- the reform switch-list --- */
.rf-list-heading,
.rf-reinforce-heading {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
}
.rf-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.rf-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              opacity var(--dur) var(--ease-out);
}
.rf-card:hover { box-shadow: var(--shadow-hover); }
.rf-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rf-card-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.rf-card.is-off {
  opacity: 0.78;
  background: var(--paper-2);
  border-color: var(--rule);
}
.rf-card.is-on {
  opacity: 1;
  background: var(--accent-bg);
  border-color: var(--accent);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-soft);
}
.rf-card-material.is-on {
  background: var(--calc-bg);
  border-color: var(--calc);
  border-left-color: var(--calc);
}

.rf-toggle {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  width: 48px;
}
.rf-toggle-knob {
  display: block;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--ink-faint);
  position: relative;
  transition: background var(--dur) var(--ease-out);
}
.rf-toggle-knob::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease-out);
}
.rf-card.is-on .rf-toggle-knob { background: var(--accent); }
.rf-card-material.is-on .rf-toggle-knob { background: var(--calc); }
.rf-card.is-on .rf-toggle-knob::after { transform: translateX(20px); }
.rf-toggle-state {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.rf-card.is-on .rf-toggle-state { color: var(--accent); }
.rf-card-material.is-on .rf-toggle-state { color: var(--calc); }

.rf-card-body { flex: 1 1 auto; min-width: 0; }
.rf-card-titlerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.rf-card-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.rf-card-full {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-mute);
}
.rf-card-changes {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}
.rf-card-marginal {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-sm);
  margin-top: var(--sp-2);
  margin-right: var(--sp-2);
}
.rf-card-marginal.is-pos { color: var(--marg-pos); background: var(--marg-pos-bg); }
.rf-card-marginal.is-neg { color: var(--marg-neg); background: var(--marg-neg-bg); }
.rf-card-marginal.is-zero { color: var(--marg-zero); background: var(--marg-zero-bg); }
.rf-card-more {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--calc);
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--sp-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rf-card-more:hover { color: var(--accent); }

/* --- the reinforcement block (replaces the SVG edges) --- */
.rf-reinforce {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.rf-reinforce-sub {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 var(--sp-3);
}
.rf-reinforce-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.rf-pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  opacity: 0.7;
  transition: opacity var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.rf-pair.is-active {
  opacity: 1;
  border-color: var(--marg-pos);
  background: var(--marg-pos-bg);
}
.rf-pair.is-dark {
  opacity: 0.5;
  border-color: var(--ink-faint);
  background: var(--paper-2);
}
.rf-pair-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.rf-pair.is-active .rf-pair-label { color: var(--ink); }
.rf-pair-gain {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.rf-pair-gain.has-gain { color: var(--marg-pos); }
.rf-pair-gain.no-gain { color: var(--ink-mute); }
.rf-pair-gain.is-standby {
  color: var(--ink-faint);
  font-weight: 400;
  font-style: italic;
  font-family: var(--font-body);
}

/* --- the outcome card ("the road") --- */
.rf-outcome {
  margin-top: var(--sp-5);
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: var(--green-bg);
  text-align: center;
  transition: opacity var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.rf-outcome.is-dark {
  border-color: var(--ink-faint);
  background: var(--paper-2);
  opacity: 0.7;
}
.rf-outcome-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--green);
}
.rf-outcome.is-dark .rf-outcome-label { color: var(--ink-mute); }
.rf-outcome-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--green);
  margin: var(--sp-1) 0;
}
.rf-outcome.is-dark .rf-outcome-num { color: var(--ink-mute); }
.rf-outcome-unit {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--ink-soft);
}
.rf-outcome-delta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  margin-top: var(--sp-2);
}

/* =====================================================================
   v7.1 (founder) -- graph restored as the prominent levers + a COLLAPSED
   switch-list beneath it. Concrete flagged not-recommended; each lever's
   separate on/off effect visible. New classes only; tokens only.
   ===================================================================== */

/* the prominent "these are the levers, pre-set to the recommendation" affordance */
.rf-affordance {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-strong);
  font-weight: 600;
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-3);
}

/* off-state SEPARATE-EFFECT chip on a graph node (muted vs the on-state marginal) */
.gnode-marginal.is-would {
  color: var(--ink-mute);
  background: var(--paper-2);
  border: 1px dashed var(--rule);
  font-weight: 600;
}

/* concrete "not recommended -- ~4x cost" flag, on its node */
.gnode-flag-note {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  color: var(--red);
  margin-top: 2px;
  line-height: 1.2;
  max-width: 120px;
}

/* the COLLAPSED explicit switch-list under the graph (closed by default; graph leads) */
.rf-collapse {
  margin-top: var(--sp-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.rf-collapse > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}
.rf-collapse > summary::-webkit-details-marker { display: none; }
.rf-collapse > summary::before { content: '+ '; color: var(--accent); font-weight: 700; }
.rf-collapse[open] > summary::before { content: '\2212 '; }
.rf-collapse[open] > summary { border-bottom: 1px solid var(--rule); }
.rf-collapse .rf-list { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
.rf-card-compact { padding: var(--sp-3); gap: var(--sp-3); }

/* the per-row separate-effect line (on: contributes X now; off: would add X) */
.rf-card-effect {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--marg-pos);
  margin-top: var(--sp-1);
}
.rf-card.is-off .rf-card-effect { color: var(--ink-mute); }

/* recommended / not-recommended tags in the switch-list rows */
.rf-recommended,
.rf-not-recommended {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 1px var(--sp-2);
}
.rf-recommended { color: var(--marg-pos); background: var(--marg-pos-bg); }
.rf-not-recommended { color: var(--red); background: var(--red-bg); }

/* =====================================================================
   v8 (founder 2026-06-23): visible inspection slider, deep-tree links,
   money-led effect chips, and the FULL-DEPTH TREE aesthetics.
   ===================================================================== */

/* ---- visible inspection-efficacy slider (was the linchpin box) ---- */
.rf-inspection {
  background: var(--linchpin-bg);
  border: 1px solid var(--linchpin-edge);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.rf-inspection.is-dark { background: var(--red-bg); border-color: var(--red); }
.rf-inspection-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.rf-inspection-title { font-family: var(--font-serif); font-weight: 600; font-size: 14px; color: var(--linchpin-ink); }
.rf-inspection-val { font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--linchpin-ink); font-variant-numeric: tabular-nums; }
.rf-inspection.is-dark .rf-inspection-title,
.rf-inspection.is-dark .rf-inspection-val { color: var(--red); }
.rf-inspection-slider { width: 100%; margin: var(--sp-3) 0 var(--sp-1); accent-color: var(--linchpin-ink); cursor: pointer; }
.rf-inspection.is-dark .rf-inspection-slider { accent-color: var(--red); }
.rf-inspection-ends {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-mute);
}
.rf-inspection-audit { font-family: var(--font-body); font-size: 11.5px; color: var(--ink-mute); line-height: 1.5; margin-top: var(--sp-2); }
.rf-inspection-dark { font-family: var(--font-body); font-size: 12px; color: var(--red); font-weight: 600; line-height: 1.5; margin-top: var(--sp-2); }

/* ---- money-led effect chip on a graph node ---- */
.gnode-marginal.is-cheaper { color: var(--marg-pos); background: var(--marg-pos-bg); }
.gnode-marginal.is-costlier { color: var(--marg-neg); background: var(--marg-neg-bg); }
.gnode-marginal.is-zero { color: var(--marg-zero); background: var(--marg-zero-bg); }

/* ---- "what is this?" deep-tree links ---- */
.gnode-explain {
  display: block; margin-top: 2px;
  font-family: var(--font-body); font-size: 9.5px; color: var(--calc);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.gnode-explain:hover { color: var(--accent); }
.rf-card-explain {
  display: inline-block; margin-top: var(--sp-2);
  font-family: var(--font-body); font-size: 11px; color: var(--calc);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.rf-card-explain:hover { color: var(--accent); }

/* =====================================================================
   FULL-DEPTH TREE (layer "depth") -- clear, scannable, good aesthetic.
   ===================================================================== */
.depth-integrity {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.55;
  color: var(--ink-mute); font-style: italic;
  border-left: 3px solid var(--rule); padding-left: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-4);
}
.depth-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.depth-total {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-mute);
  margin-right: auto;
}
.depth-tool-btn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink-soft); border-radius: var(--radius-pill);
  cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast);
}
.depth-tool-btn:hover { border-color: var(--accent); color: var(--accent); }

.depth-tree { display: flex; flex-direction: column; gap: var(--sp-1); }
.depth-node { border-radius: var(--radius-sm); }
.depth-head {
  width: 100%; display: flex; align-items: flex-start; gap: var(--sp-2);
  text-align: left; background: none; border: none; cursor: pointer;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  transition: background var(--dur-fast) ease;
}
.depth-head:hover { background: var(--paper-2); }
.depth-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.depth-caret {
  flex: none; width: 0; height: 0; margin-top: 7px;
  border-left: 6px solid var(--ink-mute);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out);
}
.depth-node.is-open > .depth-head .depth-caret { transform: rotate(90deg); }
.depth-node.is-leaf > .depth-head .depth-caret { border-left-color: var(--ink-faint); opacity: 0.5; }
.depth-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.depth-label { font-family: var(--font-serif); font-weight: 600; font-size: 14.5px; color: var(--ink); line-height: 1.25; }
.depth-d0 > .depth-head .depth-label { font-size: 16px; }
.depth-summary { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.depth-count {
  flex: none; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--ink-mute); background: var(--paper-3); border-radius: var(--radius-pill);
  padding: 1px var(--sp-2); margin-top: 3px;
}
.depth-body { padding: 0 0 var(--sp-2) var(--sp-5); }
.depth-detail {
  font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: var(--ink-soft);
  max-width: 64ch; margin: var(--sp-1) 0 var(--sp-2);
}
.depth-evidence {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: var(--ink-mute);
  background: var(--paper-2); border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-2); display: inline-block;
}
.depth-evidence-tag { color: var(--calc); font-weight: 600; }
.depth-children {
  display: flex; flex-direction: column; gap: var(--sp-1);
  margin-left: var(--sp-2); padding-left: var(--sp-3);
  border-left: 2px solid var(--rule-soft);
}
.depth-node.is-focused { background: var(--accent-bg); box-shadow: 0 0 0 2px var(--accent); }
.depth-node.is-focused > .depth-head .depth-label { color: var(--accent); }
.depth-empty { font-family: var(--font-body); font-size: 13px; color: var(--ink-mute); font-style: italic; }

/* =====================================================================
   v8.1 (founder 2026-06-23): make the levers UNMISTAKABLY switchable --
   a toggle-switch symbol on every node + a prominent "switch on/off" callout.
   ===================================================================== */

/* a real toggle-switch on each graph node (replaces the plain dot) */
.gnode-switch {
  flex: none;
  position: relative;
  width: 28px; height: 15px;
  border-radius: var(--radius-pill);
  background: var(--ink-faint);
  transition: background var(--dur) var(--ease-out);
}
.gnode-switch-knob {
  position: absolute; top: 2px; left: 2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease-out);
}
.gnode-reform.is-on .gnode-switch { background: var(--accent); }
.gnode-reform.is-on .gnode-switch-knob { transform: translateX(13px); }
.gnode-material.is-on .gnode-switch { background: var(--calc); }
.gnode-material.is-on .gnode-switch-knob { transform: translateX(13px); }
/* a slightly stronger hover so the whole box clearly reads as pressable */
.gnode:hover { border-color: var(--accent); }

/* the prominent "these are switches" callout, top of the controls column */
.rf-affordance {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-2) 0 var(--sp-4);
}
.rf-affordance-icon {
  flex: none; position: relative;
  width: 36px; height: 20px; border-radius: var(--radius-pill);
  background: var(--accent);
}
.rf-affordance-icon-knob {
  position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper);
  animation: aff-toggle 2.4s var(--ease-out) infinite;
}
@keyframes aff-toggle {
  0%, 35% { transform: translateX(0); }
  50%, 85% { transform: translateX(16px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rf-affordance-icon-knob { animation: none; transform: translateX(16px); }
}
.rf-affordance-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rf-affordance-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; color: var(--accent);
}
.rf-affordance-text {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.5;
  color: var(--ink-strong); font-weight: 500;
}

/* =====================================================================
   v8.2 (founder 2026-06-23): THOROUGH responsive. On phones the absolute
   knowledge-graph cannot hold 7 nodes without overlap, so it becomes a clean
   STACKED TAPPABLE LIST of switches (edges hidden; the redundant collapse list
   hidden). Tablets keep the full-width graph (grid already stacks at <=920px).
   ===================================================================== */
@media (max-width: 640px) {
  .graph-stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: var(--sp-2); }
  .graph-edges { display: none; }
  .gnode {
    position: static; transform: none !important;
    width: 100%; min-width: 0; max-width: none;
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: var(--sp-2) var(--sp-3); padding: var(--sp-3); text-align: left;
  }
  .gnode:hover { transform: none !important; box-shadow: var(--shadow-hover); }
  .gnode-label { flex: 1 1 auto; font-size: 13.5px; }
  .gnode-marginal { margin-left: auto; }
  .gnode-flag-note, .gnode-explain { flex-basis: 100%; max-width: none; }
  /* the explicit collapse list is redundant once the graph itself is a list */
  .rf-collapse { display: none; }
  /* deep tree: tighten indent + let detail use full width so deep nodes stay readable */
  .depth-body { padding-left: var(--sp-3); }
  .depth-children { margin-left: var(--sp-1); padding-left: var(--sp-2); }
  .depth-detail { max-width: none; }
  /* numbers buckets + interaction-gap: single column on a phone */
  .numbers-bucket-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   GUIDED TOUR (policymaker walkthrough) — additive, non-modal.
   The launch FAB sits bottom-centre; the caption panel pins above it.
   While the tour runs, the two corner FABs are hidden to avoid overlap.
   ===================================================================== */
.tour-fab {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: var(--sp-5);
  z-index: 41;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 700;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--action-edge); background: var(--paper); color: var(--accent);
  box-shadow: var(--shadow-hover); cursor: pointer;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.tour-fab:hover { background: var(--accent-bg); transform: translateX(-50%) translateY(-1px); }
.tour-fab:active { transform: translateX(-50%); }

body.tour-active .tour-fab,
body.tour-active .wcid-fab,
body.tour-active .orient-reopen { display: none; }
/* the tour ONLY makes sense on the interactive layer — never let the orientation overlay sit on
   top of a running tour (it would read as "the tour is running on the orientation page"). */
body.tour-active .orient-overlay { display: none !important; }

.tour-panel {
  position: fixed;
  left: 50%; transform: translateX(-50%) translateY(12px);
  bottom: var(--sp-5);
  z-index: 60;
  width: min(560px, calc(100vw - 2 * var(--sp-5)));
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-expanded), 0 12px 40px rgba(28, 25, 22, 0.16);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.tour-panel.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.tour-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.tour-kicker {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; color: var(--accent);
}
.tour-close {
  border: none; background: transparent; color: var(--ink-mute);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 var(--sp-1);
  transition: color var(--dur-fast) ease;
}
.tour-close:hover { color: var(--ink); }

.tour-counter {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--ink-faint); margin-top: var(--sp-1);
}
.tour-tag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-soft);
  margin-top: var(--sp-2);
}
.tour-title {
  font-family: var(--font-serif); font-weight: 500; font-size: 19px; line-height: 1.25;
  color: var(--ink-strong); margin: var(--sp-1) 0 var(--sp-2);
}
.tour-body {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.55;
  color: var(--ink-soft); margin: 0;
}

.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); }
.tour-btn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; font-weight: 600;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.tour-back { border: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft); }
.tour-back:hover { border-color: var(--accent); color: var(--accent); }
.tour-back:disabled { opacity: 0.4; cursor: default; }
.tour-back:disabled:hover { border-color: var(--rule); color: var(--ink-soft); }
.tour-next { border: 1px solid var(--action-edge); background: var(--accent); color: var(--action-chip-ink); }
.tour-next:hover { opacity: 0.92; }

/* the spotlight pulse on the anchor a step scrolls to */
.tour-spot {
  animation: tour-spot-pulse 2.2s var(--ease-out);
  border-radius: var(--radius-sm);
}
@keyframes tour-spot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(194, 65, 12, 0.0); }
  18%  { box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.28); }
  100% { box-shadow: 0 0 0 0 rgba(194, 65, 12, 0.0); }
}

@media (max-width: 640px) {
  .tour-fab { bottom: var(--sp-3); }
  .tour-panel { bottom: var(--sp-3); width: calc(100vw - 2 * var(--sp-3)); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .tour-title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-panel { transition: opacity var(--dur-fast) ease; }
  .tour-spot { animation: none; }
}

/* =====================================================================
   SPOTLIGHT TOUR (v13) — demonstration-first product tour.
   A dim layer with a transparent "hole" over the current target (the box's
   giant box-shadow dims everything else), a gently pulsing glow ring, and a
   small caption tooltip. The spotlight is pointer-events:none, so the real
   element underneath stays clickable during the tour.
   ===================================================================== */
.tour-spotlight {
  position: fixed;
  z-index: 9998;
  pointer-events: none;            /* the real element under the hole stays live */
  border-radius: var(--radius-sm, 6px);
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.55),                 /* dim everything outside */
    0 0 0 2px rgba(194, 65, 12, 0.9),                 /* crisp ring on the target */
    0 0 0 6px rgba(194, 65, 12, 0.28);                /* soft glow */
  animation: tour-ring-pulse 1.8s ease-in-out infinite;
  transition: left 0.28s var(--ease-out, ease), top 0.28s var(--ease-out, ease),
              width 0.28s var(--ease-out, ease), height 0.28s var(--ease-out, ease);
}
.tour-spotlight[hidden] { display: none; }

@keyframes tour-ring-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.55),
      0 0 0 2px rgba(194, 65, 12, 0.9),
      0 0 0 6px rgba(194, 65, 12, 0.22);
  }
  50% {
    box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.55),
      0 0 0 3px rgba(194, 65, 12, 1),
      0 0 0 11px rgba(194, 65, 12, 0.34);
  }
}

.tour-caption {
  position: fixed;
  z-index: 9999;
  max-width: min(280px, calc(100vw - 24px));
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(28, 25, 22, 0.22);
  padding: var(--sp-3) var(--sp-4) var(--sp-3);
}
.tour-caption[hidden] { display: none; }

.tour-caption-text {
  font-family: var(--font-body);
  font-size: 13.5px; line-height: 1.45;
  color: var(--ink-strong); margin: 0 0 var(--sp-3);
}

.tour-caption-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
}
.tour-caption-meta { display: flex; align-items: center; gap: var(--sp-2); }
.tour-caption-dots { display: flex; align-items: center; gap: 5px; }
.tour-caption-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rule);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.tour-caption-dot.is-current { background: var(--accent); transform: scale(1.25); }
.tour-caption-counter {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.tour-caption-btns { display: flex; align-items: center; gap: var(--sp-2); }
.tour-caption-btn {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; font-weight: 600;
  padding: 5px var(--sp-3); border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease,
              background var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.tour-caption-back { border: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft); }
.tour-caption-back:hover { border-color: var(--accent); color: var(--accent); }
.tour-caption-back:disabled { opacity: 0.4; cursor: default; }
.tour-caption-back:disabled:hover { border-color: var(--rule); color: var(--ink-soft); }
.tour-caption-next { border: 1px solid var(--action-edge); background: var(--accent); color: var(--action-chip-ink); }
.tour-caption-next:hover { opacity: 0.92; }

@media (max-width: 640px) {
  .tour-caption { max-width: calc(100vw - 16px); padding: var(--sp-3); }
  .tour-caption-text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-spotlight { animation: none; transition: none; }
}

/* =====================================================================
   v8.3 (founder 2026-06-27): BOX SIZE = IMPACT. Each reform node is sized to its
   LIVE marginal pothole-free-year impact (set inline as --impact-w / --impact-fs by
   view/controls.js; bigger impact -> bigger box). Desktop graph ONLY -- on phones
   (<=640px) the stacked switch-list governs width (width:100%; min/max overridden in
   the 640px block above), so the cue is dropped there and the list stays fully usable.
   The width transition reuses the node's existing transition timing.
   ===================================================================== */
@media (min-width: 641px) {
  .gnode-reform[style*="--impact-w"] {
    min-width: var(--impact-w);
    max-width: var(--impact-w);
  }
  .gnode-reform[style*="--impact-fs"] .gnode-label {
    font-size: var(--impact-fs);
  }
}