/* ============================================================================
   Foliolytic Projection — Editorial Redesign (v4, 2026-05-12)
   /kook-enhance overnight CTO mode

   COMPLETE REWRITE from v3 (2026-05-10) per owner feedback:
     - Cyan filled chips → outlined editorial chips with indigo accent
     - Flat gray menu backgrounds → transparent with hairline rules
     - Crowded "→ arrows · bullets" headlines → kicker + clean headline + subtitle
     - "Microsoft word notes" insight footnote → editorial .fl-prose paragraph
     - 5-up cards floating on transparent → 3 canonical .fl-stat-strip layouts
     - Wrong accent color (#0891b2 cyan) → canonical --fl-accent (#635BFF indigo)

   This file uses the canonical --fl-* tokens from css/foliolytic-tokens.css
   (loaded earlier in the cascade). It keeps the existing .proj-* class names
   for HTML/JS compatibility but completely restyles them per the Monthly
   Returns aesthetic.
============================================================================ */

/* ----------------------------------------------------------------------------
   SECTION CONTAINER — editorial, NOT a heavy carded box
---------------------------------------------------------------------------- */
.proj-section {
  /* Backwards-compat: map legacy --proj-* aliases to the canonical --fl-* layer
     so any remaining inline styles (e.g. `style="color:var(--proj-accent)"`) in
     projectionChart.js render functions still resolve cleanly to indigo. */
  --proj-accent:        var(--fl-accent);
  --proj-accent-soft:   var(--fl-accent-soft);
  --proj-accent-soft-2: var(--fl-accent-soft-2);
  --proj-mean-up:       var(--fl-pos);
  --proj-mean-down:     var(--fl-warn);
  --proj-cockroach:     var(--fl-accent);
  --proj-cockroach-soft: var(--fl-accent-soft);
  --proj-text:          var(--fl-text);
  --proj-text-2:        var(--fl-text-2);
  --proj-text-muted:    var(--fl-text-muted);
  --proj-text-faint:    var(--fl-text-faint);
  --proj-bg:            transparent;
  --proj-bg-soft:       transparent;
  --proj-bg-soft-2:     transparent;
  --proj-border:        transparent;
  --proj-border-soft:   var(--fl-rule);
  --proj-rule:          var(--fl-rule);
  --proj-chip-bg:       transparent;
  --proj-chip-text:     var(--fl-text-2);
  --proj-chip-border:   var(--fl-rule);
  --proj-divider:       var(--fl-rule);
  --proj-shadow:        none;
  --proj-shadow-hover:  none;
  --proj-shadow-card:   var(--fl-shadow-lg);

  position: relative;
  margin: var(--fl-section-margin) 0;
  /* Projection-specific breathing room. The owner's red-note: content was
     "crimped, pressed against the edge, no padding at the bottom" — but the
     earlier version had "too much." This is the judged middle: a touch more
     on the sides, noticeably more at the BOTTOM (the specific complaint), so
     the dense matrix/solver/stats never kiss the section edge. NOT the global
     token (other sections keep theirs) (owner red-note 2026-05-19). */
  padding: clamp(24px, 3vw, 38px) clamp(28px, 4.4vw, 60px) clamp(34px, 4vw, 52px);
  /* Site-wide cohesion: sections are NEVER painted — content floats on the
     flat page base. Separation = whitespace + the border-top hairline below.
     (Was `var(--fl-grad-proj)`, a washed slate+indigo cast.)
     See CANONICAL-DARK-SURFACE-SPEC.md. */
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fl-rule);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--fl-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--fl-text);
  overflow: visible;
}

.proj-section,
.proj-section * {
  font-family: var(--fl-font);
}

.proj-section .fl-num,
.proj-section [class*="-value"],
.proj-section [class*="-num"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Remove the old top horizon-line gradient stripe — not needed in editorial */
.proj-section::before {
  display: none;
}

/* ============================================================================
   HEADER — kicker + headline + subtitle, with right-aligned vs-mean stat
============================================================================ */
/* Single column now — the CAGR read-out moved out of a 360px right grid
   column that was squeezing the subtitle and orphaning "choose." onto its
   own line (/watch-video 2026-05-19). */
.proj-header {
  display: block;
  margin-bottom: var(--fl-space-12);
}

.proj-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--fl-space-6);
  min-width: 0;
}

.proj-header-icon {
  display: none; /* kill the old icon — kicker label carries section identity */
}

.proj-header-titles {
  display: flex;
  flex-direction: column;
  gap: var(--fl-space-4);
}

.proj-header-title {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--fl-text);
  margin: 0;
}

.proj-header-subtitle {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.55;
  color: var(--fl-text-2);
  margin: 0;
  max-width: 760px;       /* generous — full sentence flows, no orphan wrap */
}

/* Past-vs-mean read-out — its own full-width row, two flowing English lines
   (nominal then real). Was a cramped right-aligned 360px micro-grid that read
   awkwardly and wrapped mid-phrase (/watch-video 2026-05-19). */
.proj-cagr-readout {
  margin: var(--fl-space-12) 0 var(--fl-space-16);
  padding-top: var(--fl-space-12);
  border-top: 1px solid var(--fl-rule);
}

.proj-badge {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--fl-text-2);
  white-space: normal;
  text-align: left;
  max-width: none;
  line-height: 1.6;
}

.proj-badge-line {
  display: block;
}
.proj-badge-line--real {
  font-size: 11.5px;
  color: var(--fl-text-faint);
  margin-top: 1px;
}
.proj-badge-mute {
  color: var(--fl-text-faint);
}

.proj-badge-dot {
  display: none;          /* drop the cyan pill dot — typography carries it */
}

.proj-badge.proj-badge-reversion-down,
.proj-badge.proj-badge-reversion-up {
  background: transparent;
  border: 0;
  color: var(--fl-text-2);
}

/* The user's own CAGR figures get weight + primary color */
.proj-badge strong {
  font-weight: 600;
  color: var(--fl-text);
}
.proj-badge-line--real strong {
  color: var(--fl-text-2);
}

/* The "+X% above/below" delta — colour only, no pill */
.proj-badge .proj-badge-pos {
  color: var(--fl-pos);
  font-weight: 600;
}

.proj-badge .proj-badge-neg {
  color: var(--fl-warn);
  font-weight: 600;
}

/* ============================================================================
   PHILOSOPHY LEAD-IN — editorial prose
============================================================================ */
.proj-philosophy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: var(--fl-text-2);
  max-width: 820px;
  margin: 0 0 var(--fl-space-16);
}

.proj-philosophy strong {
  color: var(--fl-text);
  font-weight: 600;
}

/* Don't grow — so the (i) hugs the end of the sentence (top-right of the
   long-run-mean line) instead of being shoved into the whitespace gap on a
   full-width flex child (owner red-note 2026-05-19). */
.proj-philosophy-lead { flex: 0 1 auto; min-width: 0; }

/* "Why this model" — a quiet inline (i). Replaced a centred "Why this model →"
   disclosure whose arrow + open/close reflowed the layout; the receipts now
   live in a hover/focus popover (data-popover-key="why-model"), keeping the
   centre clean (/watch-video 2026-05-19). */
.proj-why-info {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fl-text-faint);
  cursor: help;
  transition: color 0.15s ease, background 0.15s ease;
}
.proj-why-info:hover,
.proj-why-info:focus-visible {
  color: var(--fl-accent);
  background: var(--fl-accent-soft);
}
.proj-why-info:focus-visible {
  outline: 2px solid var(--fl-accent);
  outline-offset: 2px;
}
.proj-why-info svg { display: block; }

/* ============================================================================
   CONTROLS — v2 EDITORIAL CHART-CONTROL BAR (2026-05-12 evening)

   Owner feedback v1: stacked chips vertically per group = "TERRIBLE UI/UX to
   have all these buttons vertically stacked like this when they are the
   controls for the chart below."

   v2 layout: each control group is a HORIZONTAL row with kicker-label on the
   left and chip row flowing to the right. Multiple groups stack vertically so
   the bar is compact (~4 rows) and reads as a clear chart-control panel.
============================================================================ */
.proj-controls {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 var(--fl-space-10);
  padding: 6px var(--fl-space-16);
  /* Bare control row — matches the Performance section's `.perf-controls`
     sibling (transparent + hairline only). Was an indigo-tinted slate wash
     card; that tint/wash is exactly the per-section mish-mash being killed.
     The hairline border + radius stay so it still reads as a grouped panel.
     See CANONICAL-DARK-SURFACE-SPEC.md. */
  background: transparent;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-lg);
  overflow: visible;
}

.proj-control-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  min-width: 0;
  position: relative;
}

/* Subtle hairline between control rows */
.proj-control-group + .proj-control-group {
  border-top: 1px solid var(--fl-rule);
}

/* Lens + Overlays share one row, separated by a vertical hairline. */
.proj-control-group--layers {
  background: transparent;
  row-gap: 6px;
}

.proj-ctl-divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  min-height: 22px;
  margin: 0 6px;
  background: var(--fl-rule);
}

/* Compact inline tag — replaces the old 110px right-aligned label column
   that wasted ~110px × 5 rows of horizontal space (2026-05-19 redesign). */
.proj-ctl-tag {
  display: inline-flex;
  align-items: baseline;
  gap: var(--fl-space-4);
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  margin: 0;
  white-space: nowrap;
  padding-right: var(--fl-space-6);
}

.proj-ctl-tag--withsub { gap: 6px; }

.proj-control-label-sub {
  display: inline;
  margin-top: 0;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--fl-text-faint);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ----------------------------------------------------------------------------
   CHIPS — outlined editorial style, NO filled bright-color states
---------------------------------------------------------------------------- */
.proj-controls .proj-chip,
.proj-controls .proj-chip-stack,
.proj-controls .proj-chip-input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fl-space-4);
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--fl-text-2);
  background: transparent;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-sm);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  position: relative;
}

.proj-controls .proj-chip:hover,
.proj-controls .proj-chip-stack:hover,
.proj-controls .proj-chip-input:hover {
  color: var(--fl-text);
  border-color: var(--fl-border-2);
  background: transparent;
}

.proj-controls .proj-chip.active,
.proj-controls .proj-chip-stack.active,
.proj-controls .proj-chip-input.active,
.proj-controls .proj-chip[aria-pressed="true"],
.proj-controls .proj-chip-stack[aria-pressed="true"] {
  color: var(--fl-accent);
  border-color: var(--fl-accent);
  background: var(--fl-accent-soft);
  box-shadow: none;
  font-weight: 600;
}

body.dark-mode .proj-controls .proj-chip.active,
body.dark-mode .proj-controls .proj-chip-stack.active,
body.dark-mode .proj-controls .proj-chip-input.active {
  color: var(--fl-accent);
}

.proj-controls .proj-chip:focus-visible,
.proj-controls .proj-chip-stack:focus-visible,
.proj-controls .proj-chip-input:focus-visible {
  outline: 2px solid var(--fl-accent);
  outline-offset: 2px;
}

/* One-line chip — label + a typographically-lighter measurement BESIDE it
   (not stacked under it). Owner red-note 2026-05-19: the two-line chips ate
   vertical space and pushed the chart off-screen while the row had empty
   space to the right. "Continue Trend  R²=0%" on one line — the label in the
   normal chip weight, the measurement one notch smaller + lighter + faint so
   the eye reads it as "name, then its number," not one dense blob. Every chip
   becomes a thin single row → the whole control bar shrinks → chart + stats
   fit a single screen. (Stripe/Madison-Ave: weight & colour do the work,
   the gap is sized, nothing is cramped.) */
.proj-controls .proj-chip-stack {
  flex-direction: row;
  align-items: baseline;
  padding: 7px 12px;
  min-height: 0;
  gap: 7px;
  line-height: 1;
}

.proj-chip-stack .proj-chip-label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: inherit;
}

.proj-chip-stack.active .proj-chip-label { font-weight: 600; }

.proj-chip-stack .proj-chip-sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fl-text-faint);
  opacity: 1;
  font-family: var(--fl-font);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.proj-chip-stack.active .proj-chip-sub { color: var(--fl-accent); opacity: 0.8; }

/* Chip-with-input — same outlined treatment */
.proj-controls .proj-chip-input {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 10px 5px 8px;
  cursor: text;
  min-height: 32px;
}

.proj-controls .proj-chip-input:hover,
.proj-controls .proj-chip-input:focus-within {
  border-color: var(--fl-accent);
  background: transparent;
}

.proj-controls .proj-chip-input.active {
  border-color: var(--fl-accent);
  background: var(--fl-accent-soft);
  box-shadow: none;
}

.proj-chip-input input {
  width: 60px;
  padding: 2px 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fl-text);
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--fl-font);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-chip-input input::-webkit-inner-spin-button,
.proj-chip-input input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.proj-chip-input span {
  font-size: 11px;
  font-weight: 500;
  color: var(--fl-text-faint);
  letter-spacing: 0.005em;
}

/* ============================================================================
   RICH CHIP POPOVER — restyle to editorial (white card, no cyan accents)
   Reparented to <body> at runtime so vars don't resolve from .proj-section.
   Hardcoded colors with dark-mode fallbacks.
============================================================================ */
.proj-chip-popover {
  position: absolute;
  z-index: 999999;
  min-width: 280px;
  max-width: 360px;
  padding: 14px 16px 12px;
  background: #ffffff;
  border: 1px solid rgba(26, 26, 24, 0.08);
  border-radius: 10px;
  box-shadow:
    0 12px 36px -8px rgba(15, 23, 42, 0.14),
    0 4px 8px -2px rgba(15, 23, 42, 0.06),
    0 24px 60px -20px rgba(0, 0, 0, 0.12);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 12px;
  color: #1a1a18;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.proj-chip-popover.visible {
  opacity: 1;
  transform: translateY(0);
}

body.dark-mode .proj-chip-popover {
  /* Canonical elevated surface (#1e293b) — was #131c2c, an off-spec navy
     that made this floating panel a different shade from every other card.
     See CANONICAL-DARK-SURFACE-SPEC.md. */
  background: #131d33;
  border-color: rgba(176, 200, 244, 0.06);
  color: #eef0f4;
  box-shadow:
    0 12px 36px -8px rgba(0, 0, 0, 0.55),
    0 4px 8px -2px rgba(0, 0, 0, 0.35),
    0 24px 60px -20px rgba(0, 0, 0, 0.65);
}

.proj-pop-eyebrow {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a3a29c;
  margin-bottom: 4px;
}
body.dark-mode .proj-pop-eyebrow { color: #4a5570; }

.proj-pop-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a18;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
body.dark-mode .proj-pop-title { color: #eef0f4; }

.proj-pop-hook {
  font-size: 12px;
  font-weight: 400;
  color: #3d3b36;
  line-height: 1.5;
  margin-bottom: 10px;
  font-style: italic;
  letter-spacing: 0.005em;
}
body.dark-mode .proj-pop-hook { color: #c8cdd8; }

.proj-pop-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 12px;
  padding: 8px 0;
  margin: 0 0 10px;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(26, 26, 24, 0.06);
  border-bottom: 1px solid rgba(26, 26, 24, 0.06);
  border-radius: 0;
}
body.dark-mode .proj-pop-stats {
  border-top-color: rgba(176, 200, 244, 0.06);
  border-bottom-color: rgba(176, 200, 244, 0.06);
}

.proj-pop-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.proj-pop-stat-num {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #1a1a18;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
body.dark-mode .proj-pop-stat-num { color: #eef0f4; }

.proj-pop-stat-cap {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a3a29c;
  margin-top: 3px;
  line-height: 1.2;
}
body.dark-mode .proj-pop-stat-cap { color: #4a5570; }

.proj-pop-stat--pos .proj-pop-stat-num { color: #059669; }
.proj-pop-stat--neg .proj-pop-stat-num { color: #d97706; }
.proj-pop-stat--mean .proj-pop-stat-num { color: #635BFF; }
.proj-pop-stat--neutral .proj-pop-stat-num { color: #1a1a18; }
body.dark-mode .proj-pop-stat--pos .proj-pop-stat-num { color: #34d399; }
body.dark-mode .proj-pop-stat--neg .proj-pop-stat-num { color: #fbbf24; }
body.dark-mode .proj-pop-stat--mean .proj-pop-stat-num { color: #6e7fff; }
body.dark-mode .proj-pop-stat--neutral .proj-pop-stat-num { color: #eef0f4; }

.proj-pop-detail {
  font-size: 11.5px;
  font-weight: 400;
  color: #3d3b36;
  line-height: 1.6;
  letter-spacing: 0.005em;
}
body.dark-mode .proj-pop-detail { color: #c8cdd8; }

.proj-pop-detail strong {
  color: #1a1a18;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body.dark-mode .proj-pop-detail strong { color: #eef0f4; }

.proj-pop-detail em {
  color: #635BFF;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body.dark-mode .proj-pop-detail em { color: #6e7fff; }

.proj-pop-math {
  margin: 10px 0 0;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-left: 2px solid #635BFF;
  border-radius: 0;
  font-family: var(--fl-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #3d3b36;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-x: auto;
}
body.dark-mode .proj-pop-math {
  border-left-color: #6e7fff;
  color: #c8cdd8;
}

.proj-pop-receipts {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(26, 26, 24, 0.06);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a3a29c;
}
body.dark-mode .proj-pop-receipts {
  border-top-color: rgba(176, 200, 244, 0.06);
  color: #4a5570;
}

.proj-pop-receipts-icon {
  font-size: 11px;
  opacity: 0.8;
  filter: saturate(0.6);
}

/* Legacy popover classes — kept for backwards compat */
.proj-chip-popover-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fl-text);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.proj-chip-popover-section {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--fl-rule);
  font-size: 11px;
  font-weight: 400;
  color: var(--fl-text-2);
  line-height: 1.6;
}
.proj-chip-popover-section:first-of-type {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}
.proj-chip-popover-section strong {
  color: var(--fl-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.proj-chip-popover-section em {
  color: var(--fl-accent);
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.proj-chip-popover-eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  margin-bottom: 4px;
}

/* ============================================================================
   CHART WRAP + TOOLBAR
   Editorial container (no card box), inline mini-segments for axis/zoom
============================================================================ */
.proj-chart-wrap {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  position: relative;
  overflow: visible;
  margin-bottom: var(--fl-space-16);
}

.proj-chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fl-space-12);
  margin-bottom: var(--fl-space-12);
  padding: 0;
}

.proj-chart-toolbar-group {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-sm);
  overflow: hidden;
  height: 26px;
}

.proj-chart-toolbar-group .proj-chart-toolbar-label {
  display: inline-flex;
  align-items: center;
  padding: 0 10px 0 12px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--fl-text-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
  border-right: 1px solid var(--fl-rule);
  background: transparent;
}

.proj-chip-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fl-text-2);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1;
  height: 100%;
}

.proj-chip-mini + .proj-chip-mini {
  border-left: 1px solid var(--fl-rule);
}

.proj-chip-mini:hover {
  background: var(--fl-accent-soft);
  color: var(--fl-accent);
}

.proj-chip-mini.active,
.proj-chip-mini[aria-pressed="true"] {
  background: var(--fl-accent);
  color: var(--fl-accent-text);
  font-weight: 600;
}

body.dark-mode .proj-chip-mini.active {
  color: var(--fl-accent-text);
}

.proj-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fl-space-8);
  margin-bottom: var(--fl-space-8);
  padding: 0;
}

.proj-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fl-space-6) var(--fl-space-16);
  font-size: 11px;
  font-weight: 500;
  color: var(--fl-text-2);
  letter-spacing: 0.005em;
}

/* Swatch sits right next to its label (owner: the marker was floating far
   from the word). Tight 4px gap, shorter swatch. */
.proj-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.proj-legend-line {
  display: inline-block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
}

/* Dashed = two clear dashes; dotted = three clear dots — so "Projected real"
   reads as a few dots, not one faint speck (owner red-note 2026-05-19). */
.proj-legend-line--dashed {
  background-image: linear-gradient(90deg, currentColor 0 5px, transparent 5px 8px);
  background-color: transparent;
}

.proj-legend-line--dotted {
  height: 2.5px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, currentColor 0 2.5px, transparent 2.5px 5px);
  background-color: transparent;
}

.proj-legend-line--dashdot {
  background-image: linear-gradient(90deg, currentColor 0 6px, transparent 6px 8px,
    currentColor 8px 10px, transparent 10px 13px);
  background-color: transparent;
}

.proj-r2-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--fl-text-2);
  font-family: inherit;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.proj-r2-tag strong,
.proj-r2-tag b,
.proj-r2-tag [style*="font-weight"] {
  color: var(--fl-text) !important;
}

/* ============================================================================
   CHART STRIP (.proj-prechart) — Projection Horizon + legend + Y-Axis + R²
   on ONE row directly above the canvas. Defined here (after .proj-controls
   line ~216 and .proj-chart-toolbar line ~693) so equal-specificity wins on
   source order — it neutralises the card bg/border/column-flow it inherits
   from the .proj-controls / .proj-chart-toolbar JS-hook classes.
============================================================================ */
.proj-prechart {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 var(--fl-space-6);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

/* One aligned row directly above the canvas (owner red-note 2026-05-19):
   Y-Axis + R² LEFT  ·  legend CENTERED & tight  ·  Projection Horizon RIGHT.
   Reordered via `order` only — DOM stays put so the per-element JS hook
   bindings (.proj-controls/.proj-chart-toolbar querySelectorAll) are untouched. */
.proj-horizon-seg { flex: 0 0 auto; order: 3; }

.proj-prechart .proj-legend {
  flex: 1 1 auto;
  order: 2;
  justify-content: center;
  align-items: center;
  /* Match the 26px connected Y-Axis/Horizon pill height so all three zones
     occupy one shared vertical band — the row reads as a single clean strip
     instead of borderless text floating against bordered pills (independent
     Gemini+GPT-4o craft review both flagged the prechart vertical balance,
     2026-05-19). */
  min-height: 26px;
  gap: 2px 9px;
  font-size: 10px;
  min-width: 0;
}
/* Squeeze the legend so all four default series sit on ONE centred line
   between Y-Axis and Horizon (owner: "tight and concise … you can change
   the font a little smaller … squeeze them in"). Tighter swatch + swatch→
   label gap; items never break internally so any unavoidable wrap happens
   cleanly between items, not mid-item. */
.proj-prechart .proj-legend-item { gap: 3px; white-space: nowrap; }
.proj-prechart .proj-legend-line { width: 13px; }

.proj-prechart-right {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  order: 1;
}

/* Custom-horizon input sitting inside the connected segment. Inherits
   .proj-chip-mini (incl. the filled .active state) — only the input/suffix
   need shaping. */
.proj-chip-mini--input {
  padding: 0 8px;
  gap: 2px;
  cursor: text;
}
.proj-chip-mini--input input {
  width: 30px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fl-text);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.proj-chip-mini--input input::-webkit-inner-spin-button,
.proj-chip-mini--input input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.proj-chip-mini--input > span {
  font-size: 10px;
  color: var(--fl-text-faint);
}
.proj-chip-mini--input.active input { color: var(--fl-accent-text); }
.proj-chip-mini--input.active > span { color: var(--fl-accent-text); opacity: 0.85; }

/* Live one-line scenario sentence — the chart's plain-English caption (the
   10x: replaces the removed AT YEAR + per-scenario terminal chips). */
.proj-scenario-sentence {
  margin: 0 0 var(--fl-space-8);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--fl-text-2);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Below-chart variant — sits under the canvas as the chart's caption
   (/watch-video 2026-05-19: "would be better right at the bottom"). Top
   margin + hairline instead of the above-chart bottom margin. */
.proj-scenario-sentence--below {
  margin: var(--fl-space-8) 0 0;
  padding-top: var(--fl-space-8);
  border-top: 1px solid var(--fl-rule);
  text-align: center;
}
.proj-scenario-sentence:empty { display: none; }
.proj-scenario-sentence:empty { border-top: 0; padding-top: 0; }
.proj-scenario-sentence strong { color: var(--fl-accent); font-weight: 700; }
.proj-scenario-sentence .proj-ss-real { color: var(--fl-warn); font-weight: 600; }
.proj-scenario-sentence .proj-ss-mute { color: var(--fl-text-faint); }

/* SAFETY: .proj-terminal-chips sets display:flex which would override the
   [hidden] attribute. The chips are folded (one canonical telling) — keep
   the node for the JS contract but never show it. */
.proj-terminal-chips[hidden] { display: none !important; }

#projectionChart {
  width: 100% !important;
  height: 420px !important;
}

/* The problem is VERTICAL — key the canvas height off viewport height so the
   controls + chart + footer fit on one laptop screen without scrolling. */
@media (max-height: 900px) { #projectionChart { height: 384px !important; } }
@media (max-height: 760px) { #projectionChart { height: 340px !important; } }
@media (max-width: 768px)  { #projectionChart { height: 340px !important; } }
@media (max-width: 480px)  { #projectionChart { height: 300px !important; } }

/* ============================================================================
   .proj-stats — editorial stats panel (replaces "$1.53M today → $17.5M..." chaos)
   v2: tighter typography + denser stat strips + subtle elevated gradient bg.
   Owner feedback v1: "massive empty wasted space, theres no need for only 5/4
   cards per line, and this stuff doesn't need to be this massive font size,
   all of this could be presented in a much more compact and visually
   appealing way that wasnt just boring cards all horizontal in a line."
============================================================================ */
.proj-stats {
  position: relative;
  margin: var(--fl-space-16) 0 var(--fl-space-4);
  padding: var(--fl-space-16) var(--fl-space-16) var(--fl-space-4);
  /* Canonical elevated card — identical to every inset across the site
     (achievements / heatmap / metric cards). Light = #ffffff. Was a
     translucent slate-wash gradient (rgba(30,41,59,0.20)) that composited
     to washed mid-gray. See CANONICAL-DARK-SURFACE-SPEC.md. */
  background: #ffffff;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-lg);
  font-family: var(--fl-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--fl-text);
  display: flex;
  flex-direction: column;
}

body.dark-mode .proj-stats {
  background: #131d33;
}

.proj-stats,
.proj-stats * {
  font-family: var(--fl-font);
}

/* Header row: kicker + headline + subtitle on left, 3 stat blocks on right */
.proj-stats-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--fl-space-32);
  row-gap: var(--fl-space-16);
  align-items: end;
  margin-bottom: var(--fl-space-20);
}

.proj-stats-title-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proj-stats-kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  margin: 0;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-stats-title {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
  color: var(--fl-text);
  margin: 0;
}

.proj-stats-title strong {
  font-weight: 600;
  letter-spacing: -0.035em;
}

.proj-stats-subtitle {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: var(--fl-text-2);
  margin: 0;
  max-width: 640px;
}

.proj-stats-subtitle strong {
  color: var(--fl-text);
  font-weight: 600;
}

/* Single-column editorial header (kicker → headline → assumption line).
   Replaces the old 2-col grid + redundant 3-stat-card cluster. */
.proj-stats-header--solo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: var(--fl-space-16);
}

/* Assumption line — scenario knobs only (no numbers; those live in the
   diptych below). A quiet dek under the headline. */
.proj-stats-assume {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--fl-text-2);
  margin: 1px 0 0;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-stats-assume-sep {
  color: var(--fl-text-faint);
  font-weight: 400;
  margin: 0 6px;
}

/* Right-aligned headline stat cluster: PAST CAGR · FORWARD CAGR · INFLATION DRAG */
.proj-stats-headline {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--fl-space-32);
  margin: 0;
}

.proj-stats-h-card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: right;
  min-width: 0;
}

.proj-stats-h-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-stats-h-value {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fl-text);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 0;
}

.proj-stats-h-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--fl-text-faint);
  letter-spacing: 0.01em;
  margin: 2px 0 0;
  line-height: 1.2;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-stats-pos { color: var(--fl-pos); }
.proj-stats-neg { color: var(--fl-neg); }
.proj-stats-flat { color: var(--fl-text-faint); }
.proj-stats-cock { color: var(--fl-accent); }
.proj-stats-warn { color: var(--fl-warn); }

/* Strip: 4-5 cards horizontally, vertical 1px dividers between
   v2: tighter padding, smaller value font, denser packing */
.proj-stats-strip {
  display: grid;
  gap: 0;
  margin: 0;
  padding: var(--fl-space-12) 0;
  border-top: 1px solid var(--fl-rule);
  background: transparent;
}

.proj-stats-strip:last-child {
  border-bottom: 1px solid var(--fl-rule);
}

.proj-stats-strip-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.proj-stats-strip-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proj-stats-strip-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.proj-stats-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--fl-space-12);
  min-width: 0;
}

.proj-stats-card + .proj-stats-card {
  border-left: 1px solid var(--fl-rule);
}

.proj-stats-card:first-child {
  padding-left: 0;
}

.proj-stats-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proj-stats-value {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fl-text);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex-wrap: wrap;
}

.proj-stats-value-sub {
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--fl-text-faint);
  margin-left: 2px;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-stats-hint {
  font-size: 9px;
  font-weight: 400;
  color: var(--fl-text-faint);
  letter-spacing: 0.015em;
  line-height: 1.3;
  margin-top: 0;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
   COMPARISON BAND HIERARCHY — one band, two rows. The 4 reference numbers
   (100y averages, raw Cockroach $) are demoted; the 3 "so what" deltas
   (your-vs-mean, forward-vs-mean, vs-your-model) are promoted to full
   contrast + semantic colour. This is the single biggest perceived-quality
   lift: stop everything reading as one flat faint row.
============================================================================ */
.proj-stats-card--ref .proj-stats-value {
  color: var(--fl-text-2);
  font-weight: 500;
  font-size: 14px;
}

.proj-stats-card--key .proj-stats-value {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.proj-stats-card--key .proj-stats-label {
  color: var(--fl-text-2);
}

/* Semantic colour must beat the size/weight rule above (specificity 0,3,0). */
.proj-stats-card--key .proj-stats-value.proj-stats-pos { color: var(--fl-pos); }
.proj-stats-card--key .proj-stats-value.proj-stats-neg { color: var(--fl-neg); }
.proj-stats-card--key .proj-stats-value.proj-stats-flat { color: var(--fl-text); }

/* Cockroach row keeps a faint identity via the 🪳 in its first label. */
.proj-stats-strip--cockroach .proj-stats-card:first-child .proj-stats-label {
  color: var(--fl-text-2);
}

/* ============================================================================
   v3 DIPTYCH — asymmetric Today → Projected layout (2026-05-12 night)
   Owner v2 feedback: "stop with the 5-cards-in-a-row spreadsheet feel."
   Solution: visual weight follows information importance. Today gets 0.85fr,
   future gets 1.15fr. Big hero number on the right anchored to the arrow.
============================================================================ */
.proj-stats-diptych {
  display: grid;
  grid-template-columns: 0.85fr 80px 1.15fr;
  align-items: stretch;
  gap: var(--fl-space-16);
  margin: var(--fl-space-12) 0 var(--fl-space-16);
  padding: var(--fl-space-16) 0 var(--fl-space-16);
  border-top: 1px solid var(--fl-rule);
  border-bottom: 1px solid var(--fl-rule);
}

.proj-stats-side {
  display: flex;
  flex-direction: column;
  gap: var(--fl-space-12);
  min-width: 0;
  position: relative;
}

.proj-stats-side--today {
  padding-right: var(--fl-space-8);
}

.proj-stats-side--future {
  padding-left: var(--fl-space-8);
}

/* The small kicker above each panel — "TODAY · 7.0Y INVESTED" / "YEAR 2056 · PROJECTED" */
.proj-stats-side-kicker {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  margin: 0;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-stats-side-kicker--accent {
  color: var(--fl-accent);
  opacity: 0.85;
}

/* Hero number — today's value (medium) vs projected value (big) */
.proj-stats-side-hero {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--fl-text);
  margin: 4px 0 0;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-stats-side-hero--big {
  font-size: clamp(32px, 3.6vw, 46px);
  letter-spacing: -0.04em;
  font-weight: 300;
}

.proj-stats-side-hero--accent {
  color: var(--fl-accent);
}

/* The secondary line beneath the hero number (e.g. "+$57k · +71% on cost" or "$11.7M real · 183× today") */
.proj-stats-side-hero-sub {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--fl-space-6);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fl-text-2);
  margin: 6px 0 var(--fl-space-8);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-stats-side-sep {
  color: var(--fl-text-faint);
  font-weight: 400;
}

/* Stacked list of secondary stats below the hero number.
   Each row: small uppercase label (left) + value (right) — terminal-style. */
.proj-stats-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.proj-stats-side-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--fl-space-12);
  padding: 6px 0;
  border-top: 1px solid var(--fl-rule);
}

.proj-stats-side-list li:last-child {
  border-bottom: 0;
}

.proj-stats-side-row-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-stats-side-row-value {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fl-text);
  line-height: 1.05;
  text-align: right;
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-stats-side-row-hint {
  grid-column: 1 / -1;
  font-size: 9.5px;
  font-weight: 400;
  color: var(--fl-text-faint);
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin-top: -2px;
  text-align: right;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Center column: arrow + horizon label. Vertically centered between sides. */
.proj-stats-diptych-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--fl-text-faint);
  align-self: stretch;
  min-width: 0;
  position: relative;
}

/* Center spine — a structural hairline rule between the two halves of the
   diptych (a column rule, NOT a decorative card-edge accent). It breaks at
   the centre so the arrow + horizon label read as a deliberate callout in
   the rule, not a strikethrough. */
.proj-stats-diptych-arrow::before,
.proj-stats-diptych-arrow::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  background: var(--fl-rule);
  transform: translateX(-50%);
}

.proj-stats-diptych-arrow::before { top: 0; height: calc(50% - 44px); }
.proj-stats-diptych-arrow::after { bottom: 0; height: calc(50% - 44px); }

.proj-stats-diptych-arrow svg {
  width: 56px;
  height: 56px;
  display: block;
  opacity: 0.85;
}

.proj-stats-diptych-arrow-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Context strip wrapper — kicker label sits above a 4-up canonical strip */
.proj-stats-context {
  margin: 0 0 var(--fl-space-12);
}

.proj-stats-context-kicker {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  margin: 0 0 var(--fl-space-4);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Responsive: tablet — diptych stacks (today on top, then arrow rotated 90deg, then future) */
@media (max-width: 900px) {
  .proj-stats-diptych {
    grid-template-columns: 1fr;
    gap: var(--fl-space-16);
    padding: var(--fl-space-16) 0;
  }

  .proj-stats-side--today {
    padding-right: 0;
  }

  .proj-stats-side--future {
    padding-left: 0;
  }

  .proj-stats-diptych-arrow {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--fl-space-8);
  }

  /* Stacked layout — no vertical spine (sides are top/bottom, not left/right) */
  .proj-stats-diptych-arrow::before,
  .proj-stats-diptych-arrow::after {
    display: none;
  }

  .proj-stats-diptych-arrow svg {
    width: 32px;
    height: 32px;
    transform: rotate(90deg);
  }

  .proj-stats-side-hero {
    font-size: clamp(26px, 8vw, 36px);
  }

  .proj-stats-side-hero--big {
    font-size: clamp(34px, 11vw, 52px);
  }
}

@media (max-width: 600px) {
  .proj-stats-side-hero {
    font-size: 26px;
  }
  .proj-stats-side-hero--big {
    font-size: 36px;
  }
}

/* Hide the loading state once content is present */
.proj-stats-loading {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--fl-text-faint);
  letter-spacing: 0.005em;
  padding: var(--fl-space-12) 0;
}

/* ============================================================================
   COMPARISON MATRIX — editorial table with subtle elevation
   v2: added subtle gradient bg + inset padding so active-row highlight doesn't
   bleed flush to the left edge (owner feedback "highlight cuts off right at
   edge with no nice visual padding")
============================================================================ */
.proj-matrix {
  margin: var(--fl-space-12) 0 0;
  padding: var(--fl-space-12) var(--fl-space-16) var(--fl-space-10);
  /* Canonical elevated card — same #1e293b inset as .proj-stats and every
     card site-wide. Light = #ffffff. Was an indigo-tinted slate wash
     (rgba(99,91,255,…) over rgba(15,23,42,0.18)) — a per-section color
     cast. See CANONICAL-DARK-SURFACE-SPEC.md. */
  background: #ffffff;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-lg);
}

body.dark-mode .proj-matrix {
  background: #131d33;
}

.proj-matrix-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fl-space-12);
  margin-bottom: var(--fl-space-8);
}

.proj-matrix-title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  margin: 0;
}

.proj-matrix-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--fl-text-faint);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.proj-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--fl-text);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-matrix-table th {
  text-align: left;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  padding: 0 var(--fl-space-12) var(--fl-space-8) 0;
  border-bottom: 1px solid var(--fl-rule);
  white-space: nowrap;
  background: transparent;
}

.proj-matrix-table th:not(:first-child) {
  text-align: right;
}

/* Reality-check is the last column. Give it a clear gutter from VS YOU and
   left-align BOTH the header and the caveat prose so the text sits directly
   under its "Reality Check" label instead of cramped against the dollar
   delta and misaligned with a right-set header (owner red-note 2026-05-19). */
.proj-matrix-table th:last-child,
.proj-matrix-table td:last-child {
  text-align: left;
  padding-left: var(--fl-space-24);
  padding-right: 0;
}

.proj-matrix-table td {
  padding: var(--fl-space-10) var(--fl-space-12) var(--fl-space-10) 0;
  border-bottom: 1px solid var(--fl-rule);
  /* middle (was top): the 12px model name, 12px tabular numbers and the
     10.5px italic caveat now share one optical centre-line per row instead
     of sitting on three different planes — independent Gemini+GPT-4o craft
     review both flagged the missing common baseline (2026-05-19). */
  vertical-align: middle;
}

.proj-matrix-table td:not(:first-child) {
  text-align: right;
}

.proj-matrix-table tr:last-child td {
  border-bottom: 0;
}

/* Active row gets indigo tint, with proper inset padding so it reads as a
   contained highlight (not an edge-bleeding stripe). Rounded corners on
   first/last cell give the row visual containment. */
.proj-matrix-row-active td {
  background: var(--fl-accent-soft);
  border-top: 1px solid var(--fl-accent-soft-2);
  border-bottom: 1px solid var(--fl-accent-soft-2);
}

.proj-matrix-row-active td:first-child {
  font-weight: 600;
  position: relative;
  padding-left: var(--fl-space-12);
  border-left: 1px solid var(--fl-accent-soft-2);
  border-top-left-radius: var(--fl-radius-sm);
  border-bottom-left-radius: var(--fl-radius-sm);
}

.proj-matrix-row-active td:last-child {
  border-right: 1px solid var(--fl-accent-soft-2);
  border-top-right-radius: var(--fl-radius-sm);
  border-bottom-right-radius: var(--fl-radius-sm);
  padding-right: var(--fl-space-12);
}

/* No jutting left-border tick (we use full inset border instead) */
.proj-matrix-row-active td:first-child::before {
  display: none;
}

.proj-matrix-row-active .proj-matrix-model {
  color: var(--fl-accent);
}

.proj-matrix-model {
  font-weight: 600;
  color: var(--fl-text);
  font-size: 12px;
  letter-spacing: -0.005em;
}

/* Forward-rate annotation sits BESIDE the model name on the same line — not
   on a 2nd line that made the "Revert to Mean" row taller than the others
   ("strange fat one"). Lighter colour signals it's a measurement, not a
   second label, so every model row is one equal-height line (owner 2026-05-19). */
.proj-matrix-model-sub {
  display: inline;
  font-size: 10px;
  font-weight: 400;
  color: var(--fl-text-faint);
  margin-left: 7px;
  white-space: nowrap;
}

.proj-matrix-num {
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  color: var(--fl-text);
}

.proj-matrix-num-strong {
  font-weight: 600;
  color: var(--fl-text);
}

.proj-matrix-caveat {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--fl-text-2);
  text-align: left !important;
  max-width: 240px;
  white-space: normal;
  line-height: 1.45;
  font-style: italic;
}

/* ============================================================================
   TARGET-WEALTH SOLVER — editorial inline composition
============================================================================ */
.proj-target {
  margin: var(--fl-space-12) 0 0;
  padding: var(--fl-space-10) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fl-rule);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* whole "When do I cross $X ? · result" reads
                                  as one tidy right-aligned cluster, not prompt
                                  orphaned far-left + result far-right
                                  (owner red-note 2026-05-19) */
  flex-wrap: wrap;
  gap: var(--fl-space-8);
  font-size: 12px;
  color: var(--fl-text-2);
}

.proj-target-prompt {
  font-weight: 500;
  font-size: 11px;
  color: var(--fl-text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.proj-target-prompt + .proj-target-prompt {
  font-size: 12px;
  color: var(--fl-text-2);
  letter-spacing: 0;
  text-transform: none;
}

.proj-target-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-sm);
  transition: border-color 0.15s ease;
  min-height: 32px;
}

.proj-target-input-wrap:hover,
.proj-target-input-wrap:focus-within {
  border-color: var(--fl-accent);
}

.proj-target-input-wrap span {
  color: var(--fl-text-faint);
  font-weight: 500;
  font-size: 11px;
}

.proj-target-input-wrap input {
  width: 100px;
  padding: 1px 4px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fl-text);
  font-family: var(--fl-font);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-target-input-wrap input::-webkit-inner-spin-button,
.proj-target-input-wrap input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.proj-target-result {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fl-accent);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  padding: 5px 12px;
  background: var(--fl-accent-soft);
  border-radius: 999px;
  letter-spacing: 0;
}

.proj-target-result.proj-target-unreachable {
  color: var(--fl-warn);
  background: var(--fl-warn-soft);
}

/* ============================================================================
   INSIGHT — editorial prose block (kills "microsoft word notes" feel)
============================================================================ */
.proj-insight {
  margin-top: var(--fl-space-24);
  padding: var(--fl-space-20) 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fl-rule);
  border-left: 0;
  border-radius: 0;
  font-family: var(--fl-font);
  font-size: 13px;
  line-height: 1.7;
  color: var(--fl-text-2);
  font-weight: 400;
  max-width: 720px;
}

.proj-insight-lead {
  color: var(--fl-text);
  font-weight: 400;
  font-size: 13px;
  margin-bottom: var(--fl-space-12);
  line-height: 1.65;
}

.proj-insight-lead strong,
.proj-insight-detail strong,
.proj-insight-cb strong {
  color: var(--fl-text);
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.proj-insight-lead em,
.proj-insight-detail em,
.proj-insight-cb em {
  color: var(--fl-text);
  font-style: italic;
  font-weight: 400;
}

.proj-insight-detail {
  margin-bottom: var(--fl-space-12);
  font-size: 12.5px;
  color: var(--fl-text-2);
}

.proj-insight-cb {
  margin-top: var(--fl-space-12);
  font-size: 12.5px;
  color: var(--fl-text-2);
  line-height: 1.7;
}

.proj-insight-philo {
  display: block;
  margin-top: var(--fl-space-16);
  padding-top: var(--fl-space-12);
  border-top: 1px solid var(--fl-rule);
  font-size: 11px;
  font-style: italic;
  color: var(--fl-text-faint);
  letter-spacing: 0.005em;
  line-height: 1.6;
  max-width: 680px;
}

/* ============================================================================
   TOOLTIP EXTENSIONS (kept from v3 — used by chart tooltip)
============================================================================ */
.fl-tt-row-sub {
  grid-column: 2 / 4;
  grid-row: 2;
  margin-top: -3px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--fl-text-faint);
  letter-spacing: 0.01em;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.fl-tt.fl-tt-dark .fl-tt-row-sub { color: var(--fl-text-faint); }
.fl-tt-row.fl-tt-row-with-sub { grid-template-rows: auto auto; }

.fl-tt-milestone {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 4px 0 6px;
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  background: var(--fl-warn-soft);
  color: var(--fl-warn);
}

.fl-tt.fl-tt-dark .fl-tt-milestone {
  background: rgba(146, 64, 14, 0.30);
  color: #fbbf24;
}

.fl-tt-prob {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fl-accent);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   LOADING / EMPTY STATE
============================================================================ */
.proj-section[data-state="loading"] .proj-chart-wrap,
.proj-section[data-state="loading"] .proj-stats,
.proj-section[data-state="loading"] .proj-matrix,
.proj-section[data-state="loading"] .proj-insight {
  opacity: 0.6;
}

.proj-empty {
  text-align: center;
  padding: var(--fl-space-40) var(--fl-space-20);
  font-size: 12px;
  color: var(--fl-text-faint);
}

/* ============================================================================
   RESPONSIVE
============================================================================ */
@media (max-width: 1100px) {
  .proj-controls { gap: 0; }
  .proj-stats-strip-5,
  .proj-stats-strip-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--fl-space-16);
  }
  .proj-stats-card:nth-child(3n+1) {
    border-left: 0;
    padding-left: 0;
  }
  .proj-stats-card:nth-child(n+4) {
    border-top: 1px solid var(--fl-rule);
    padding-top: var(--fl-space-12);
    margin-top: var(--fl-space-4);
  }
}

@media (max-width: 800px) {
  .proj-header {
    grid-template-columns: 1fr;
    row-gap: var(--fl-space-12);
  }
  .proj-vs-mean-badge-wrap {
    justify-content: flex-start;
  }
  .proj-badge {
    text-align: left;
    max-width: none;
  }
  .proj-stats-header {
    grid-template-columns: 1fr;
    row-gap: var(--fl-space-16);
  }
  .proj-stats-headline {
    justify-content: flex-start;
    gap: var(--fl-space-24);
  }
  .proj-stats-h-card {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .proj-section {
    /* Compact side padding for phones, but a real bottom gutter so the last
       content isn't crimped against the section edge here either (owner
       red-note 2026-05-19 — "no padding at the bottom"). */
    padding: var(--fl-space-20) var(--fl-space-16) clamp(30px, 8vw, 38px);
  }
  .proj-header-title {
    font-size: 20px;
  }
  .proj-philosophy {
    font-size: 12.5px;
    margin-bottom: var(--fl-space-16);
  }
  .proj-controls {
    gap: 0;
    padding: var(--fl-space-8) var(--fl-space-12);
  }
  .proj-controls .proj-chip,
  .proj-controls .proj-chip-stack {
    padding: 6px 10px;
    font-size: 11px;
  }
  .proj-controls .proj-chip-stack {
    padding: 4px 9px 5px;
    min-height: 34px;
  }
  .proj-chip-stack .proj-chip-label { font-size: 11px; }
  .proj-chip-stack .proj-chip-sub { font-size: 9px; }
  .proj-chip-input input { width: 50px; font-size: 11px; }
  .proj-chart-toolbar { gap: var(--fl-space-8); }
  .proj-chart-toolbar-group .proj-chart-toolbar-label {
    font-size: 9px;
    padding: 0 8px 0 10px;
  }
  .proj-chip-mini {
    padding: 0 8px;
    font-size: 10.5px;
  }
  .proj-stats {
    padding: var(--fl-space-16) 0 var(--fl-space-4);
  }
  .proj-stats-strip {
    padding: var(--fl-space-12) 0;
  }
  .proj-stats-strip-5,
  .proj-stats-strip-4,
  .proj-stats-strip-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .proj-stats-card { padding: 0 var(--fl-space-12); }
  .proj-stats-card:nth-child(2n+1) {
    border-left: 0;
    padding-left: 0;
  }
  .proj-stats-card:nth-child(n+3) {
    border-top: 1px solid var(--fl-rule);
    padding-top: var(--fl-space-12);
    margin-top: var(--fl-space-2);
  }
  .proj-stats-value { font-size: 17px; }
  .proj-stats-h-value { font-size: 20px; }
  .proj-stats-headline { gap: var(--fl-space-16); }
  /* The 6-column comparison table is ~519px — wider than a phone. Contain it
     in a horizontal scroll box (the correct responsive-wide-table pattern)
     instead of letting it blow out the section. Pre-existing bug, fixed here
     while in the area (2026-05-19). */
  .proj-matrix {
    padding: var(--fl-space-12) 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .proj-matrix-table { font-size: 11px; min-width: 460px; }
  .proj-matrix-table th,
  .proj-matrix-table td {
    padding: var(--fl-space-8) var(--fl-space-6) var(--fl-space-8) 0;
  }
  .proj-matrix-caveat {
    display: none;
  }
  .proj-target { padding: var(--fl-space-12) 0; font-size: 11.5px; }
  .proj-insight {
    padding: var(--fl-space-16) 0 0;
    font-size: 12.5px;
  }
  .proj-insight-lead { font-size: 12.5px; }
}

@media (max-width: 380px) {
  .proj-matrix-table .proj-matrix-col-real { display: none; }
}

/* ============================================================================
   END — Foliolytic Projection v4 Editorial Redesign
============================================================================ */

/* ============================================================================
   2026-05-13  Vol-Aware MC Overhaul — appended for v=20260513-volaware
   ============================================================================
   Adds:
     .proj-vol-ladder       — typographic LOW VOL ←→ WILD ladder
     .proj-path-grade-byline — italic realism caption beneath ladder
     .proj-terminal-chips   — terminal-value chip cluster above chart toolbar
     .proj-show-popover     — collapsed "Show... (N)" overlay popover button
     .proj-tt-percentile    — tooltip percentile-context strip
     .proj-mc-fan-toggle    — Fan/Median/P10/P90 chart-toolbar mini-segments
     .proj-reset-chip       — chart-toolbar reset-to-defaults chip
     mobile collapse rules at <480px
   ============================================================================ */

/* ── Volatility comparison ladder (typographic, NOT bars) ───────────────── */
/* Volatility SCALE (rebuilt 2026-05-19 per owner red-note feedback).
   Line = 0%→max-σ axis; markers sit at their true position with the label
   hung beneath on a connector; the line tapers thin+faint (LOW VOL) →
   thick+bright (WILD). Symmetric vertical padding so the hover highlight
   wraps the content evenly (the old 10/2 padding made it bottom-heavy). */
.proj-vol-ladder {
  display: flex;
  align-items: flex-start;          /* caps + scale + end align to the line */
  gap: 16px;
  padding: 13px 10px 7px;           /* tightened bottom — pulls the realism
                                       byline up toward Cockroach/S&P/Yours
                                       (owner red-note 2026-05-19) */
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--fl-text-2);
  border-top: 1px solid var(--fl-rule);
  cursor: help;                     /* hover explains it (data-popover-key) */
  border-radius: 6px;
  transition: background 0.15s ease;
}
.proj-vol-ladder:hover,
.proj-path-grade-byline:hover { background: var(--fl-accent-soft); }
.proj-vol-ladder:focus-visible,
.proj-path-grade-byline:focus-visible {
  outline: 2px solid var(--fl-accent);
  outline-offset: 2px;
}

/* LOW VOL / WILD end-caps — brightness matches their end of the line.
   Fixed 20px box (= the line's vertical zone) with centred content so, under
   the ladder's align-items:flex-start, the text centre lands exactly on the
   wedge centre (top 6px + height 8px ⇒ y≈10px). Replaces the old margin-top
   hack that was double-applied to WILD and pushed it below the line
   (/watch-video 2026-05-19). */
.proj-vol-cap {
  flex: 0 0 auto;
  height: 20px;
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.proj-vol-cap--low  { color: var(--fl-text-faint); }
.proj-vol-cap--wild { color: var(--fl-text); }

/* The scale track */
.proj-vol-scale {
  position: relative;
  flex: 1 1 auto;
  min-width: 220px;
  height: 62px;                     /* line near top; two label rows below */
}
/* Common case: the collision system did NOT push any marker to row 2, so the
   lower ~16px is dead air — exactly the "too much empty padding between
   Cockroach/S&P/Yours and Realism" the owner circled (red-note 2026-05-19).
   Reclaim it. When a marker DID collide (.proj-vol-mark--r1 present) the full
   62px is kept so the second-row label never clips. Desktop only — mobile
   keeps the safe height since markers wrap differently there. */
@media (min-width: 761px) {
  .proj-vol-scale:not(:has(.proj-vol-mark--r1)) { height: 46px; }
}
.proj-vol-wedge {
  position: absolute;
  left: 0; right: 0; top: 6px;
  height: 8px;
  /* thin sliver on the left, full height on the right */
  clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%);
  background: linear-gradient(90deg,
    var(--fl-text-faint) 0%,
    var(--fl-text-2) 55%,
    var(--fl-text) 100%);
  opacity: 0.9;
}

/* A value marker: dot on the line → stem → label beneath */
.proj-vol-mark {
  position: absolute;
  top: 5px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.proj-vol-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--fl-text-2);
  box-shadow: 0 0 0 2.5px var(--fl-bg, #0f1015);  /* lift off the gradient */
}
body:not(.dark-mode) .proj-vol-dot { box-shadow: 0 0 0 2.5px #ffffff; }
.proj-vol-stem {
  width: 1px;
  height: 11px;
  background: var(--fl-rule);
}
/* Crowded marker dropped to a second row — longer connector clears the
   first-row labels so nothing overlaps. */
.proj-vol-mark--r1 .proj-vol-stem { height: 29px; }
.proj-vol-tag {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--fl-text-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.proj-vol-tag b { font-weight: 600; color: var(--fl-text-2); }
/* Yours = the only coloured marker (amber, matching its chart dot) */
.proj-vol-mark--user .proj-vol-dot {
  width: 11px; height: 11px;
  background: var(--fl-warn);
  box-shadow: 0 0 0 2.5px var(--fl-bg, #0f1015), 0 0 0 4.5px color-mix(in srgb, var(--fl-warn) 22%, transparent);
}
body:not(.dark-mode) .proj-vol-mark--user .proj-vol-dot {
  box-shadow: 0 0 0 2.5px #ffffff, 0 0 0 4.5px color-mix(in srgb, var(--fl-warn) 22%, transparent);
}
.proj-vol-mark--user .proj-vol-tag b { color: var(--fl-warn); }
.proj-vol-mark--user .proj-vol-stem { background: color-mix(in srgb, var(--fl-warn) 45%, transparent); }

/* WILD + summary share a baseline so they read as one aligned line */
/* WILD + summary, vertically centred on the line (same 20px line-zone box as
   the caps). align-items:center (not baseline) so the differently-sized WILD
   and summary share a visual midline that sits on the white line. */
.proj-vol-end {
  flex: 0 1 auto;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.proj-vol-summary {
  font-size: 10.5px;
  font-style: italic;
  color: var(--fl-text-faint);
  line-height: 1.3;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .proj-vol-ladder { flex-wrap: wrap; gap: 10px; }
  .proj-vol-scale { flex-basis: 100%; order: 2; }
  .proj-vol-cap--low { order: 1; }
  .proj-vol-end { order: 3; flex-basis: 100%; margin-top: 2px; height: auto; align-items: baseline; flex-wrap: wrap; }
  .proj-vol-summary { white-space: normal; }
}

/* Tablet (761–820px) keeps the horizontal vol-ladder, but the italic
   "Nx more volatile…" summary must still wrap or it pokes ~27px past the
   section's right edge (pre-existing overflow, pinpointed & fixed by the
   /watch-video QC 2026-05-19). Summary lives in flex:0 1 auto .proj-vol-end,
   so wrapping just adds a line — no horizontal blow-out. */
@media (max-width: 820px) {
  .proj-vol-summary { white-space: normal; }
}

/* ── Path realism byline ───────────────────────────────────────────────── */
/* inline-block (was block) so (a) the hover highlight hugs ONLY the text,
   left-aligned, instead of bleeding the full row width, and (b) its
   bounding-rect is narrow + left-set, so positionPopover() anchors the
   explainer just above the badge instead of dead-centre of the screen
   (the rect midpoint of a full-width block IS screen-centre). One change
   fixes the "highlight extends the entire width" AND the "hover is centred
   in the screen" red-notes (owner 2026-05-19). */
.proj-path-grade-byline {
  display: inline-block;
  max-width: 100%;
  padding: 1px 7px 2px;
  margin: -2px 0 0;
  font-size: 11px;
  font-style: italic;
  color: var(--fl-text-faint);
  border-bottom: 0;
  cursor: help;            /* hover explains the grade (data-popover-key) */
  border-radius: 4px;
  transition: background 0.15s ease;
}
.proj-path-grade-byline strong {
  color: var(--fl-text-2);
  font-weight: 600;
  font-style: normal;
}
.proj-path-grade-letter {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 2px;
  background: var(--fl-accent-soft);
  color: var(--fl-accent);
  border-radius: 3px;
  font-weight: 700;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* ── Terminal-value chips cluster (above chart toolbar) ────────────────── */
.proj-terminal-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  flex-wrap: wrap;
  font-size: 11px;
}
.proj-terminal-chips-anchor {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  margin-right: auto;
  flex: 0 0 auto;
}
.proj-terminal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fl-text-2);
  background: transparent;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-sm);
  cursor: pointer;
  transition: all 0.12s ease;
  font-variant-numeric: tabular-nums;
}
.proj-terminal-chip:hover {
  border-color: var(--fl-border-2);
  color: var(--fl-text);
}
.proj-terminal-chip.active {
  color: var(--fl-accent);
  border-color: var(--fl-accent);
  background: var(--fl-accent-soft);
  font-weight: 600;
}
.proj-terminal-chip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fl-text-faint);
  flex: 0 0 auto;
}
.proj-terminal-chip.active .proj-terminal-chip-dot { background: var(--fl-accent); }
.proj-terminal-chip-label {
  font-size: 10.5px;
  color: var(--fl-text-faint);
  margin-right: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.proj-terminal-chip-value {
  color: inherit;
  font-weight: 600;
}

/* ── "Show…" popover button (collapses 5 overlay chips) ────────────────── */
.proj-show-popover-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fl-text-2);
  background: transparent;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-sm);
  cursor: pointer;
  transition: all 0.12s ease;
}
.proj-show-popover-btn:hover {
  border-color: var(--fl-border-2);
  color: var(--fl-text);
}
.proj-show-popover-btn[aria-expanded="true"] {
  color: var(--fl-accent);
  border-color: var(--fl-accent);
  background: var(--fl-accent-soft);
}
.proj-show-popover-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--fl-accent);
  background: var(--fl-accent-soft);
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
}
.proj-show-popover-panel {
  position: absolute;
  z-index: 999998;
  display: none;
  min-width: 220px;
  padding: 10px;
  /* Canonical elevated panel — light #ffffff. Was `var(--fl-bg,#fdfcf6)`
     which resolves to transparent (--fl-bg is transparent), making the
     panel see-through over the chart. See CANONICAL-DARK-SURFACE-SPEC.md. */
  background: #ffffff;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-md);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}
body.dark-mode .proj-show-popover-panel {
  /* Canonical elevated surface (#1e293b) — was off-spec navy #14161c. */
  background: #131d33;
  border-color: rgba(176, 200, 244, 0.06);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.proj-show-popover-panel.is-open { display: block; }
.proj-show-popover-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--fl-text-2);
  border-radius: 4px;
  transition: background 0.12s;
}
.proj-show-popover-row:hover { background: var(--fl-accent-soft); color: var(--fl-text); }
.proj-show-popover-row input { margin: 0; accent-color: var(--fl-accent); }

/* ── Tooltip percentile-context strip (NEW row in projTooltipHandler) ──── */
.proj-tt-percentile {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--fl-rule);
  font-size: 10.5px;
}
.proj-tt-percentile-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  margin-bottom: 4px;
}
.proj-tt-percentile-bar {
  position: relative;
  height: 18px;
  margin: 4px 0 6px;
  background: linear-gradient(
    to right,
    var(--fl-accent-soft) 0%,
    var(--fl-accent-soft-2) 25%,
    var(--fl-accent) 50%,
    var(--fl-accent-soft-2) 75%,
    var(--fl-accent-soft) 100%
  );
  border-radius: 2px;
}
.proj-tt-percentile-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 22px;
  background: var(--fl-text);
  box-shadow: 0 0 0 1px var(--fl-bg, #fdfcf6);
}
.proj-tt-percentile-ticks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  font-size: 9.5px;
  color: var(--fl-text-faint);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.proj-tt-percentile-sub {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--fl-text-2);
}

/* ── Chart toolbar additions: Highlight + Reset + Fan toggle ──────────── */
.proj-chart-toolbar-group--mini {
  display: inline-flex;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-sm);
  height: 26px;
  overflow: hidden;
}
.proj-chart-toolbar-group--mini .proj-chip-mini + .proj-chip-mini {
  border-left: 1px solid var(--fl-rule);
}
.proj-reset-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 26px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fl-text-faint);
  background: transparent;
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-radius-sm);
  cursor: pointer;
  transition: all 0.12s;
}
.proj-reset-chip:hover {
  color: var(--fl-text);
  border-color: var(--fl-border-2);
}

/* ── MC fan paths (when "Show paths" is enabled) ──────────────────────── */
/* No CSS needed — Chart.js datasets are styled via dataset config in JS.
   But we provide a dataset class hook for future stylesheet-based theming: */
.proj-mc-fan-active .proj-chart-wrap canvas {
  /* Optional: subtle hint that fan is on. Currently no-op. */
}

/* ── Mobile breakpoints (<480px collapse) ─────────────────────────────── */
@media (max-width: 480px) {
  /* Symmetric padding so the hover highlight stays centred on phones too
     (the old 12/0/4 made it bottom-heavy — owner red-note 2026-05-19). */
  .proj-vol-ladder {
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 8px;
  }
  .proj-vol-cap--low { order: 1; }
  .proj-vol-scale { order: 2; flex-basis: 100%; min-width: 0; }
  .proj-vol-end { order: 3; flex-basis: 100%; margin-top: 2px; height: auto; align-items: baseline; flex-wrap: wrap; }
  .proj-vol-summary { white-space: normal; }
  .proj-terminal-chips {
    flex-wrap: wrap;
    gap: 6px;
  }
  .proj-terminal-chips-anchor { flex: 1 0 100%; margin-right: 0; }
  .proj-terminal-chip { font-size: 10.5px; padding: 4px 8px; }
  .proj-show-popover-panel { left: 8px !important; right: 8px !important; min-width: 0; }
  .proj-tt-percentile-ticks { font-size: 9px; }
}

/* Desktop: the three zones stay on ONE row across the screen (owner red-note
   2026-05-19: "all across the screen aligned … one row"). nowrap stops the
   legend's flex-grow from bumping the Projection-Horizon segment onto a 2nd
   line; the legend instead shrinks (min-width:0) and wraps its OWN items if
   it ever runs tight, keeping Y-Axis pinned left and Horizon pinned right. */
@media (min-width: 769px) {
  .proj-prechart { flex-wrap: nowrap; }
  .proj-prechart .proj-legend { flex: 1 1 auto; min-width: 0; }
}

/* ============================================================================
   CHART STRIP — responsive (2026-05-19 dense-controls). Placed last so it
   wins equal-specificity ties. On narrow screens the connected Horizon
   segment becomes a WRAPPING chip group (height:auto, overflow:visible) so
   its 6 items never clip/overflow — the old layout overflowed 16 els on
   mobile; this layout must be 0.
============================================================================ */
@media (max-width: 768px) {
  .proj-prechart.proj-chart-toolbar { gap: 8px 10px; }
  .proj-prechart .proj-horizon-seg,
  .proj-prechart .proj-legend,
  .proj-prechart .proj-prechart-right { flex: 1 1 100%; }
  .proj-prechart .proj-legend { justify-content: flex-start; }
  .proj-prechart .proj-prechart-right { justify-content: space-between; gap: 10px; }
  .proj-prechart .proj-horizon-seg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    gap: 6px;
  }
  .proj-prechart .proj-horizon-seg .proj-chart-toolbar-label {
    flex: 1 0 100%;
    border-right: 0;
    padding: 0 0 2px 0;
  }
  .proj-prechart .proj-horizon-seg .proj-chip-mini {
    height: 28px;
    border: 1px solid var(--fl-rule);
    border-radius: var(--fl-radius-sm);
    padding: 0 11px;
  }
  .proj-prechart .proj-horizon-seg .proj-chip-mini.active {
    border-color: var(--fl-accent);
  }
}
@media (max-width: 480px) {
  .proj-prechart .proj-legend { font-size: 10px; gap: 3px 10px; }
  .proj-prechart .proj-horizon-seg .proj-chip-mini { height: 26px; padding: 0 9px; font-size: 10.5px; }
  .proj-scenario-sentence { font-size: 11.5px; }
  .proj-ctl-divider { display: none; }
  .proj-control-group--layers { row-gap: 4px; }
  /* Tighten the scenario bar on phones — keep the sub-values LEGIBLE (they're
     the product's intelligence; external design review flagged 8.5px as too
     small). Remove slack without sacrificing readability or touch comfort. */
  .proj-controls { padding: var(--fl-space-6) var(--fl-space-12); }
  .proj-control-group { padding: 5px 0; gap: 6px; }
  .proj-controls .proj-chip-stack { min-height: 34px; padding: 4px 9px 5px; }
  .proj-chip-stack .proj-chip-label { font-size: 11px; }
  .proj-chip-stack .proj-chip-sub { font-size: 9.5px; }
  .proj-ctl-tag { font-size: 9px; padding-right: 4px; letter-spacing: 0.1em; }
}