/* ════════════════════════════════════════════════════════════════════════════
   results.css — free-output results render ("Broadsheet").
   Ported from mockups/results-fresh-broadsheet.html. Runway tokens only.
   All classes are rb-* prefixed and/or scoped under .rb to avoid colliding with
   calculator.css / runway.css. The render JS targets element IDs (unchanged);
   these classes only style. Amber appears as a signal ONLY on the S1 success bar
   and the S2 gap-callout. Threshold values stay ink (color = signal, not facts).
   ════════════════════════════════════════════════════════════════════════════ */

:root { --rb-amber-pale:#FBEBCC; --rb-gap:56px; }

@media (prefers-color-scheme: dark) {
  :root { --rb-amber-pale:#2C2010; }
}

/* ── Data figures: tabular + lining so columns align (Figtree replaced DM Mono,
   which gave fixed-width alignment for free; tabular-nums restores it without the
   monospace reading penalty on the surrounding labels). Applied to every cell that
   holds a number the eye compares down a column or across a row. ── */
.rb .rb-kv td, .rb .rb-lstable th, .rb .rb-lstable td,
.rb .rb-odds td, .rb .rb-answer-row td, .rb .rb-thresh-val,
.rb .rb-statstack-val, .rb .rb-stat-val, .rb .rb-bar-pct, .rb .rb-gap-value,
.rb .rb-headline-num, .rb .rb-levchip {
  font-variant-numeric:tabular-nums lining-nums; }

/* ── single wide editorial column ── */
.rb { width:100%; max-width:var(--content-max); margin:0 auto; padding:0 var(--px); }
/* Stale: results dimmed when inputs changed since the last run (paired with the
   "Inputs changed — Re-run" button so it's never opacity-alone). */
.rb.results-stale { opacity:0.5; transition:opacity 0.2s ease; }
@media (prefers-reduced-motion: reduce) { .rb.results-stale { transition:none; } }
.rb-sec { padding:var(--rb-gap) 0; border-top:1px solid var(--rule); }
.rb-sec:first-of-type { border-top:none; padding-top:32px; }

/* ── type ladder ── */
.rb .rb-eyebrow { font-family:var(--ui); font-size:var(--fs-mono-md); font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--blue-text); margin:0 0 16px;
  display:flex; align-items:center; gap:8px; }
/* The hero-q is a long sentence, not a short headline — lighter weight + eased size + open leading
   so Fraunces reads calm, not shouty (was 600/50px and felt shocking). */
.rb .rb-hero-q { font-family:var(--frau); font-weight:400; font-size:clamp(29px,3.6vw,40px);
  line-height:1.28; letter-spacing:-.005em; color:var(--ink); margin:0 0 24px; }
.rb .rb-hero-q em { font-style:italic; color:var(--blue-text); }
.rb h2.rb-title { font-family:var(--frau); font-weight:500; font-size:var(--fs-h2);
  line-height:1.22; letter-spacing:-.008em; color:var(--ink); margin:0 0 18px; }
.rb h2.rb-title em { font-style:italic; color:var(--blue-text); }
.rb .rb-prose { font-family:var(--serif); font-size:var(--fs-body); color:var(--ink-dim);
  line-height:1.65; margin:0 0 16px; }
.rb .rb-prose strong { color:var(--ink); font-weight:600; }
.rb .rb-note { font-family:var(--mono); font-size:var(--fs-mono-sm); color:var(--ink-muted); line-height:1.5; }

/* ── the hero: one confidence reading (Option A) ── */
.rb .rb-ls { margin:4px 0 0; }
.rb .rb-ls-scale-h { font-family:var(--mono); font-size:var(--fs-mono-sm); color:var(--ink-muted); letter-spacing:0.04em; margin:0 0 7px; }
.rb .rb-ls-track { position:relative; height:14px; background:var(--bg4); border-radius:7px; margin-bottom:30px; }
.rb .rb-ls-fill { position:absolute; left:0; top:0; height:100%; background:var(--blue); border-radius:7px; }
.rb .rb-ls-care { position:absolute; top:-5px; width:2px; height:24px; background:var(--ink); border-radius:1px; }
.rb .rb-ls-care-lbl { position:absolute; top:24px; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:var(--fs-mono-sm); color:var(--ink-muted); }

/* ── answer box (blue left border, no fill) ── */
.rb .rb-answer-box { border-left:4px solid var(--blue-bright); padding:2px 0 2px 24px; margin:0 0 28px; }
.rb .rb-answer-line { font-family:var(--serif); font-size:var(--fs-h2); font-weight:400;
  color:var(--ink); line-height:1.3; margin:0 0 12px; }
.rb .rb-answer-line .no { color:var(--ink-muted); font-style:italic; }
.rb .rb-answer-qual { font-family:var(--serif); font-style:italic; font-size:var(--fs-body-sm);
  color:var(--ink-dim); line-height:1.55; margin:0; }

/* (removed dead .rb-levers 3-up kit — superseded by the .rb-levchips lever pills) */

/* ── About This Plan / Projection ── */
.rb .rb-about { display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
.rb .rb-kv { width:100%; border-collapse:collapse; }
.rb .rb-kv caption { font-family:var(--ui); font-size:var(--fs-mono-md); font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--blue-text); text-align:left;
  border-bottom:1px solid var(--rule); padding-bottom:8px; margin-bottom:4px; }
.rb .rb-kv th, .rb .rb-kv td { font-family:var(--mono); font-size:var(--fs-mono-md); padding:9px 0;
  border-bottom:1px solid var(--rule-light); text-align:left; vertical-align:baseline; font-weight:400; }
.rb .rb-kv th { color:var(--ink-dim); padding-right:12px; }
.rb .rb-kv td { color:var(--ink); text-align:right; }

/* ── threshold answer-row (3-col table; thresholds = column headers; centered) ── */
.rb .rb-answer-row { width:100%; border-collapse:collapse; table-layout:fixed; margin-top:4px; margin-bottom:28px; }
.rb .rb-answer-row th { font-family:var(--ui); font-size:var(--fs-mono-md); font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-muted); text-align:center;
  padding:0 12px 8px; border-bottom:1px solid var(--rule); vertical-align:bottom; }
.rb .rb-answer-row th.is-std { color:var(--blue-text); }
.rb .rb-answer-row .rb-val-row td.is-std { color:var(--blue) !important; }
.rb .rb-answer-row td { padding:10px 12px 0; text-align:center; vertical-align:baseline; }
/* values stay ink — neutralize any sig-* traffic-light class the render JS adds */
.rb .rb-answer-row .rb-val-row td,
.rb .rb-answer-row .rb-val-row td.sig-ok,
.rb .rb-answer-row .rb-val-row td.sig-warn,
.rb .rb-answer-row .rb-val-row td.sig-bad {
  font-family:var(--mono); font-size:clamp(22px,2.6vw,30px); font-weight:500; color:var(--ink) !important; line-height:1.05; }
.rb .rb-answer-row .rb-cap-row td { font-family:var(--serif); font-style:italic; font-size:16px;
  color:var(--ink-muted); line-height:1.35; padding-top:6px; }
/* sub-label above each stress-test scenario row (return vs inflation axis) */
.rb .rb-grid-axis-lbl { font-family:var(--ui); font-size:var(--fs-mono-sm);
  font-weight:500; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-muted); margin:18px 0 2px; }
.rb .ss-timing-lbl + .rb-grid-axis-lbl { margin-top:8px; }

/* ── success bar (the one amber signal in S1) ── */
.rb .rb-bar-wrap { margin:24px 0 0; }
.rb .rb-bar-lbl { font-family:var(--ui); font-size:var(--fs-mono-md); font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:8px; }
.rb .rb-bar-row { display:flex; align-items:center; gap:14px; }
.rb .rb-bar { flex:1; height:10px; background:var(--bg4); border-radius:5px; overflow:hidden; min-width:120px; }
.rb .rb-bar > i { display:block; height:100%; background:var(--amber); border-radius:5px; }
.rb .rb-bar > i.sig-ok-bg { background:var(--green-ok-bg); }
.rb .rb-bar > i.sig-warn-bg { background:var(--amber); }
.rb .rb-bar > i.sig-bad-bg { background:var(--red-bright); }
.rb .rb-bar-pct { font-family:var(--mono); font-size:clamp(22px,2.6vw,30px); font-weight:500;
  color:var(--amber-bright); min-width:52px; text-align:right; }
.rb .rb-bar-pct.sig-ok { color:var(--green-ok); }
.rb .rb-bar-pct.sig-warn { color:var(--amber-bright); }
.rb .rb-bar-pct.sig-bad { color:var(--red-bright); }
.rb .rb-bar-sub { font-family:var(--mono); font-size:var(--fs-mono-sm); color:var(--ink-muted); margin-top:6px; }

/* ── mini-stats ── */
.rb .rb-stats { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--rule-light); margin-top:24px; }
.rb .rb-stat { padding:14px 16px; border-right:1px solid var(--rule-light); }
.rb .rb-stat:last-child { border-right:none; }
.rb .rb-stat-lbl { font-family:var(--ui); font-size:var(--fs-mono-sm); font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-muted); display:block; margin-bottom:4px; }
.rb .rb-stat-val { font-family:var(--mono); font-size:clamp(18px,2.2vw,22px); color:var(--ink); }
.rb .rb-stat-sub { font-family:var(--ui); font-size:var(--fs-mono-xs); letter-spacing:0.02em;
  color:var(--ink-muted); display:block; margin-top:4px; }

/* ── gap callout (the one amber signal in S2; text stays dark for AA on #FBEBCC) ── */
.rb .rb-gap { border-left:4px solid var(--amber); background:var(--rb-amber-pale); padding:14px 18px; margin:18px 0; }
.rb .rb-gap-label { font-family:var(--ui); font-size:var(--fs-mono-sm); font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-dim); display:block; }
.rb .rb-gap-value { font-family:var(--mono); font-size:clamp(22px,3vw,28px); font-weight:500;
  color:var(--ink); line-height:1; display:block; margin:6px 0 4px; }
.rb .rb-gap-sub { font-family:var(--serif); font-size:var(--fs-body-sm); color:var(--ink-dim); line-height:1.5; display:block; }

/* ── explainer ── */
.rb .rb-explain { margin-top:22px; }
.rb .rb-explain p { font-family:var(--serif); font-size:var(--fs-body); color:var(--ink-dim); line-height:1.65; margin:0 0 12px; }
.rb .rb-explain p strong { color:var(--ink); font-weight:600; }

/* ── chart ── */
.rb .rb-chart-caption { font-family:var(--serif); font-style:italic; font-size:var(--fs-body-sm);
  color:var(--ink-muted); line-height:1.6; margin:14px 0 0; }

/* ── life-stage table (scroll wrapper + sticky first col) ── */
.rb .rb-lstable-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rb .rb-lstable { width:100%; border-collapse:collapse; margin-top:12px; min-width:480px; }
.rb .rb-lstable th, .rb .rb-lstable td { font-family:var(--mono); font-size:var(--fs-mono-md);
  text-align:right; padding:10px 10px; border-bottom:1px solid var(--rule-light); white-space:nowrap; }
.rb .rb-lstable thead th { font-family:var(--ui); font-weight:500; font-size:var(--fs-mono-sm);
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-muted); border-bottom:1px solid var(--rule); }
.rb .rb-lstable th[scope=row] { text-align:left; color:var(--ink-dim); font-weight:400; background:var(--bg); position:sticky; left:0; }
.rb .rb-lstable thead th:first-child { text-align:left; background:var(--bg); position:sticky; left:0; }
.rb .rb-lstable .med { color:var(--blue-text); font-weight:500; }

/* ── methodology strip link ── */
.rb-meth-link { color:var(--blue-text); text-decoration:none; }
.rb-meth-link:hover { text-decoration:underline; }

/* ── chart legend swatches — tokenized so they track the Chart.js palette (which
   resolves these same vars) instead of drifting. --blue-bright is theme-stable;
   --ink is theme-aware (→#FBFAF7 in dark), so the draw swatch flips automatically.
   color-mix over transparent is exactly equivalent to the prior rgba alphas. ── */
.chart-legend-band { width:24px; height:10px; background:color-mix(in srgb, var(--blue-bright) 15%, transparent); border-radius:2px; }
.chart-legend-ss   { width:24px; height:10px; background:color-mix(in srgb, var(--blue-bright) 50%, transparent); border-radius:2px; }
.chart-legend-draw { width:24px; height:10px; background:color-mix(in srgb, var(--ink) 8%, transparent); border-radius:2px; border:1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
@media (prefers-color-scheme: dark) {
  .chart-legend-band { background:color-mix(in srgb, var(--blue-bright) 20%, transparent); }
  .chart-legend-ss   { background:color-mix(in srgb, var(--blue-bright) 40%, transparent); }
  .chart-legend-draw { background:color-mix(in srgb, var(--ink) 6%, transparent); border-color:color-mix(in srgb, var(--ink) 15%, transparent); }
}

/* ── Hero status track (sc-track) ── */
/* The success rate on the 0–100% planning-band spectrum; replaces the three hero levers. */
.rb .sc-track { width:100%; height:auto; display:block; margin:8px 0 6px; }

/* ── In-answer lever chips (renderLeverChips) — the concrete reach-85 moves, under the verdict ── */
.rb .rb-levchips { margin:0 0 28px; }
.rb .rb-levchips-lab { font-family:var(--ui); font-size:var(--fs-mono-sm); font-weight:500;
  letter-spacing:0.04em; color:var(--ink-muted); margin:0 0 10px; }
.rb .rb-levchips-row { display:flex; flex-wrap:wrap; gap:8px; }
.rb .rb-levchip { font-family:var(--mono); font-size:var(--fs-mono-xs); color:var(--blue-text);
  background:var(--blue-pale); border:1px solid var(--blue); border-radius:6px; padding:5px 11px;
  white-space:nowrap; }

/* ── "What moves your odds" — expandable detail (the chips above carry the headline moves) ── */
.rb .rb-odds-detail > summary { list-style:none; cursor:pointer; display:flex; align-items:baseline;
  gap:12px; flex-wrap:wrap; padding:4px 0; }
.rb .rb-odds-detail > summary::-webkit-details-marker { display:none; }
.rb .rb-odds-detail > summary .rb-odds-sum-eye { font-family:var(--ui); font-size:var(--fs-mono-md);
  font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--blue-text);
  display:inline-flex; align-items:center; gap:8px; }
.rb .rb-odds-detail > summary .rb-odds-sum-t { font-family:var(--serif); font-size:var(--fs-body-sm);
  color:var(--ink-dim); }
.rb .rb-odds-detail > summary .rb-odds-sum-t::after { content:' \25BE'; color:var(--ink-muted); }
.rb .rb-odds-detail[open] > summary .rb-odds-sum-t::after { content:' \25B4'; }

/* ── What moves your odds (rb-odds) ── */
/* One cross-85 move per lever, sorted largest mover first. Move-forward first column
   (no lever-name prefix); Δ prominent in blue (.res, never red); muted mono tradeoff. */
.rb .rb-odds { width:100%; border-collapse:collapse; margin-top:8px; }
.rb .rb-odds th { font-family:var(--mono); font-size:var(--fs-mono-sm); font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--blue-text); text-align:left;
  padding:0 8px 10px 0; border-bottom:1px solid var(--rule); }
.rb .rb-odds th.num { text-align:right; padding-right:8px; }
.rb .rb-odds td { padding:14px 8px 14px 0; border-bottom:1px solid var(--rule-light); vertical-align:baseline; }
/* Col 1 — the modeled move (the focus): serif, full ink */
.rb .rb-odds td.mv { font-family:var(--serif); font-size:var(--fs-body); color:var(--ink); }
/* Col 2 — current → new success rate */
.rb .rb-odds td.num { font-family:var(--serif); font-size:var(--fs-body-sm); color:var(--ink);
  text-align:right; padding-right:8px; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Col 3 — Δ, the mover size: prominent blue, never red */
.rb .rb-odds td.res { font-family:var(--serif); font-size:var(--fs-body); font-weight:600;
  color:var(--blue-text); text-align:right; padding-right:8px; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Col 4 — tradeoff chip + detail (padded left to separate from the Δ column) */
.rb .rb-odds th:nth-child(4) { padding-left:22px; }
.rb .rb-odds td.det { font-family:var(--serif); font-size:var(--fs-body-sm); color:var(--ink-muted); padding-left:22px; }
.rb .rb-odds .odds-flag { font-family:var(--mono); font-size:var(--fs-mono-sm); color:var(--blue-text); white-space:nowrap; }
.rb .odds-chip { display:inline-block; font-family:var(--mono); font-size:var(--fs-mono-sm);
  color:var(--blue-text); background:color-mix(in srgb, var(--blue) 10%, transparent);
  border-radius:3px; padding:1px 7px; margin-right:6px; white-space:nowrap; }
.rb .odds-chip-ss { color:var(--ink-dim); background:color-mix(in srgb, var(--ink) 10%, transparent); }

/* Post-run SS chip strip remains hidden (the input-panel claim-age selector is the live control). */
#ss-claim-row { display:none; }

/* ════════════════════════════════════════════════════════════════════════════
   BROADSHEET v2 — display-number moment, stacked thresholds/stats, fine-print.
   Added classes are additive; the render JS targets the same element IDs.
   Count-up is driven in app.js (IntersectionObserver); CSS here is layout/type
   only, and degrades to a static number when JS or motion is unavailable.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Display-number headline — Spectral display, tabular figures so the
   live-recomputing number doesn't jitter (editorial "verdict", not a mono readout) ── */
.rb .rb-headline { display:flex; align-items:baseline; gap:16px; margin:8px 0 4px; }
.rb .rb-headline-num {
  font-family:var(--frau); font-size:clamp(56px,12vw,88px); font-weight:500;
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"ss01" 0;
  line-height:0.9; letter-spacing:-0.02em; color:var(--ink); }
.rb .rb-headline-num .suf {
  font-size:0.45em; font-weight:300; color:var(--ink-muted);
  vertical-align:top; margin-left:2px; }
.rb .rb-headline-cap {
  font-family:var(--serif); font-style:italic; font-size:var(--fs-body-sm);
  color:var(--ink-muted); line-height:1.4; }
/* (removed dead .rb-fullpath companion cluster — the "if growth is uneven" stat was
   retired when the headline itself became whole-plan/mortality-aware) */
/* A2/A4 free-tier legibility notes — gloss under the track, assumptions line at section end. */
/* Two-line gloss centered under the 85% target tick. The track band is inset
   (x0=24,x1=976 in a viewBox-1000 SVG), so the 85% tick sits at X(85)/1000 = 83.3%
   of width — NOT 85%. margin-left:83.3% + translateX(-50%) centers the block on it.
   max-width:33% is the overflow ceiling (half-block must fit the 16.7% gap to the edge). */
.rb .rb-odds-gloss { margin:8px 0 0 83.3%; text-align:center; width:max-content;
  max-width:33%; transform:translateX(-50%); }
@media (max-width:640px) {
  /* Narrow screens: centering on the tick would overflow the right edge — keep it
     tidy by anchoring the block's right edge at the tick instead (16.7% from edge). */
  .rb .rb-odds-gloss { margin-left:0; max-width:none; width:auto; transform:none;
    text-align:right; padding-right:16.7%; }
}
.rb .rb-odds-assumptions { margin:18px 0 0; }
/* A5: shared-link staleness banner — subtle, sits above the answer. */
.rb .rb-shared-note { margin:0 0 16px; padding:10px 14px; border-left:3px solid var(--rule);
  background:var(--bg-subtle, var(--bg2)); }

/* ── Vertically stacked threshold rows (one confidence per record) ── */
.rb .rb-thresh-stack { width:100%; border-collapse:collapse; margin-top:10px; }
.rb .rb-thresh-row { border-bottom:1px solid var(--rule-light); }
.rb .rb-thresh-row:first-child { border-top:1px solid var(--rule-light); }
.rb .rb-thresh-lbl {
  font-family:var(--ui); font-size:var(--fs-mono-sm); font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-muted);
  text-align:left; vertical-align:top; white-space:nowrap;
  width:1%; padding:22px 32px 22px 0; }
/* Body cell holds the value + a caption line beneath it (full width, one line).
   Generous vertical padding keeps the numbers off the divider rules. */
.rb .rb-thresh-body { padding:20px 0; vertical-align:top; }
.rb .rb-thresh-val {
  font-family:var(--mono); font-size:clamp(26px,4.5vw,36px); font-weight:500;
  line-height:1; display:block; }
/* Values stay ink — neutralize the sig-* traffic-light classes renderS1 adds
   (color = signal, not facts; mirrors the old .rb-answer-row treatment). */
.rb .rb-thresh-val,
.rb .rb-thresh-val.sig-ok,
.rb .rb-thresh-val.sig-warn,
.rb .rb-thresh-val.sig-bad { color:var(--ink) !important; }
.rb .rb-thresh-cap {
  font-family:var(--serif); font-style:italic; font-size:16px;
  color:var(--ink-muted); display:block; margin-top:8px; line-height:1.4; }
/* 85% standard row — the one elevated value (blue on std, beats the neutralize) */
.rb .rb-thresh-row.is-std .rb-thresh-lbl { color:var(--blue-text); }
.rb .rb-thresh-row.is-std .rb-thresh-val { color:var(--blue) !important; }

/* ── Desktop (≥600px): the three thresholds lay out as side-by-side columns.
   Mobile keeps the vertical stack defined above. Same table markup/IDs — the
   tbody becomes a flex row and each <tr> becomes a column (label rule on top,
   big value, caption beneath), echoing the broadsheet 3-up reading. ── */
@media(min-width:600px){
  .rb .rb-thresh-stack tbody { display:flex; gap:40px; }
  .rb .rb-thresh-row { display:flex; flex-direction:column; flex:1 1 0;
    border:none; }
  .rb .rb-thresh-row:first-child { border-top:none; }
  .rb .rb-thresh-lbl { width:auto; white-space:nowrap;
    padding:0 0 12px; margin-bottom:18px;
    border-bottom:1px solid var(--rule-light); }
  .rb .rb-thresh-body { padding:0; }
  .rb .rb-thresh-cap { margin-top:10px; }
}

/* ── Stacked stats (label left, value right) — matches the threshold stack ── */
.rb .rb-statstack { width:100%; border-collapse:collapse; margin-top:24px; }
.rb .rb-statstack tr { border-bottom:1px solid var(--rule-light); }
.rb .rb-statstack tr:first-child { border-top:1px solid var(--rule-light); }
.rb .rb-statstack-lbl {
  font-family:var(--ui); font-size:var(--fs-mono-sm); font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-muted);
  text-align:left; vertical-align:middle; padding:18px 16px 18px 0; }
.rb .rb-statstack-val {
  font-family:var(--mono); font-size:clamp(20px,3vw,24px); color:var(--ink);
  text-align:right; vertical-align:middle; white-space:nowrap; padding:18px 0; }
.rb .rb-statstack-sub {
  display:block; font-family:var(--ui); font-size:var(--fs-mono-sm);
  font-weight:400; letter-spacing:0.02em; color:var(--ink-muted);
  text-transform:none; white-space:nowrap; margin-top:4px; }
.rb .rb-statstack-note {
  font-family:var(--mono); font-size:var(--fs-mono-sm); color:var(--ink-muted);
  letter-spacing:0.02em; margin:14px 0 0; }

/* ── Desktop (≥600px): stats lay out as side-by-side columns (label over value),
   matching the threshold stack above. Mobile keeps the label-left/value-right
   stack defined above. The optional 4th "Other income" row (toggled via showEl →
   display:'') joins the flex row as a 4th column when present. ── */
@media(min-width:600px){
  .rb .rb-statstack tbody { display:flex; gap:40px; }
  .rb .rb-statstack tr { display:flex; flex-direction:column; flex:1 1 0; border:none; }
  .rb .rb-statstack tr:first-child { border-top:none; }
  .rb .rb-statstack-lbl { padding:0 0 10px; white-space:nowrap; }
  .rb .rb-statstack-val { text-align:left; padding:0; }
}

/* ── "Fine print" collapsible — methodology + About, demoted below levers ── */
.rb .rb-fineprint-toggle {
  width:100%; background:none; border:none; cursor:pointer;
  touch-action:manipulation; text-align:left;
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px 0; /* ≥44px tap target (WCAG 2.5.8) */
  font-family:var(--ui); font-size:var(--fs-mono-md); font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--blue-text); }
.rb .rb-fineprint-caret { color:var(--ink-muted); }
.rb .rb-fineprint-body { display:none; margin-top:16px; }
.rb .rb-fineprint-body.open { display:block; }
/* Focus-visible ring matching the site convention (calculator.css group). */
.rb .rb-fineprint-toggle:focus-visible,
.rb .rb-meth-link:focus-visible {
  outline:2px solid var(--blue-bright); outline-offset:2px; border-radius:2px; }

/* ════ RESPONSIVE — mobile-first output layer ════ */
@media(max-width:599px){
  :root { --rb-gap:32px; }

  /* ── About section: single column ── */
  .rb .rb-about { grid-template-columns:1fr; gap:0; }
  .rb .rb-kv + .rb-kv { margin-top:24px; }

  /* ── Broadsheet v2 stacks: tighten padding on narrow screens ── */
  .rb .rb-headline-num { font-size:clamp(48px,18vw,72px); }
  .rb .rb-headline-cap { font-size:16px; }
  .rb .rb-thresh-lbl { padding-right:20px; }
  .rb .rb-thresh-cap { font-size:13px; }

  /* ── Cost-of-aging stat-stack: let the value + long sub-caption WRAP on mobile. Their base
     white-space:nowrap pushed captions like "median — about 1 in 10 reach 96 · your plan funds
     to 95" past the viewport (≈106px horizontal overflow at 390px). ── */
  .rb .rb-statstack-val, .rb .rb-statstack-sub { white-space:normal; }

  /* ── Mini-stats: 2-col grid instead of 3 (pairs naturally: nest+years, SS+income) ── */
  .rb .rb-stats { grid-template-columns:1fr 1fr; }
  /* Remove right border on col 2 (now the last in each row) */
  .rb .rb-stat:nth-child(2n) { border-right:none; }
  /* Restore right border on col 1 */
  .rb .rb-stat:nth-child(2n+1) { border-right:1px solid var(--rule-light); }
  /* Add bottom border between rows */
  .rb .rb-stat:nth-child(1),
  .rb .rb-stat:nth-child(2) { border-bottom:1px solid var(--rule-light); }

  /* ── Threshold table: stacked cards instead of 3-column ──
     Each confidence level becomes its own block, separated by a rule.
     The is-std (85%) column is visually elevated by blue label color (already set). */
  .rb .rb-answer-row,
  .rb .rb-answer-row thead,
  .rb .rb-answer-row tbody,
  .rb .rb-answer-row tr { display:block; width:100%; }

  /* Hide the header row — labels move into each card via padding/context */
  .rb .rb-answer-row thead { display:none; }

  /* Each data row pair (val + cap) stacks as a card */
  .rb .rb-answer-row .rb-val-row,
  .rb .rb-answer-row .rb-cap-row { display:flex; }

  /* Each cell in a row becomes a flex item occupying 1/3 width —
     but since columns are now vertical cards we swap to full-width blocks */
  .rb .rb-answer-row .rb-val-row td,
  .rb .rb-answer-row .rb-cap-row td {
    flex: 1;
    display:block;
    text-align:left;
    padding:12px 0 0;
    border-bottom:none;
  }

  /* Card separators between the three confidence columns */
  .rb .rb-answer-row .rb-val-row td + td { border-left:1px solid var(--rule-light); padding-left:16px; }
  .rb .rb-answer-row .rb-cap-row td + td { border-left:1px solid var(--rule-light); padding-left:16px; }

  /* Add bottom border after each val+cap pair to separate the three thresholds */
  .rb .rb-answer-row .rb-val-row td { font-size:clamp(20px,5.5vw,26px); padding-top:16px; }
  .rb .rb-answer-row .rb-cap-row td { padding-bottom:16px; border-bottom:1px solid var(--rule-light); }

  /* Add the confidence label back above each value since we hid the header */
  .rb .rb-answer-row .rb-val-row td::before {
    display:block;
    font-family:var(--ui);
    font-size:13px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ink-muted);
    margin-bottom:4px;
    font-weight:500;
  }
  /* Inject labels via attr or order — use nth-child to target each column */
  .rb .rb-answer-row .rb-val-row td:nth-child(1)::before { content:'75% confidence'; }
  .rb .rb-answer-row .rb-val-row td:nth-child(2)::before { content:'85% confidence'; color:var(--blue-text); }
  .rb .rb-answer-row .rb-val-row td:nth-child(3)::before { content:'90% confidence'; }

  /* ── Odds table: hide tradeoff column (col 4) on narrow screens — too cramped ── */
  .rb .rb-odds th:nth-child(4),
  .rb .rb-odds td.det { display:none; }

  /* Slightly tighten odds table column spacing */
  .rb .rb-odds td.mv { font-size:var(--fs-body-sm); }
  .rb .rb-odds td.res { font-size:var(--fs-body-sm); }
}

/* ════════════════════════════════════════════════════════════════════════════
   Hybrid label case (2026-07-01) — expert-recommended readability pass.
   All-caps destroys word-shape and reads worst at small sizes on mobile, so the
   FUNCTIONAL data/table labels (paired with a value, or column headers) drop to
   sentence case — their source text is already sentence-case, only CSS capitalized
   them. The short SECTION EYEBROWS (.rb-eyebrow, .rb-odds-sum-eye) and the
   fine-print toggle KEEP tracked caps as a deliberate editorial device.
   Unconditional + last in source, so it also overrides any mobile re-cap.
   ════════════════════════════════════════════════════════════════════════════ */
.rb .rb-kv caption,
.rb .rb-answer-row th,
.rb .rb-grid-axis-lbl,
.rb .rb-bar-lbl,
.rb .rb-stat-lbl,
.rb .rb-gap-label,
.rb .rb-lstable thead th,
.rb .rb-odds th,
.rb .rb-thresh-lbl,
.rb .rb-statstack-lbl {
  text-transform:none; letter-spacing:0.01em; }

/* ── Shareable recap card (screenshot-only; display-only, tokens throughout) ─── */
/* Lives at the bottom of #share-sec as its centered, elevated hero (product-design
   review). Card → anonymize toggle + hint → demoted "share the live version" strip. */
.rb .recap-wrap { }
.rb .recap-card {
  width:100%; max-width:560px; margin:0 auto;
  background:var(--surface); border:1px solid var(--bg3);
  border-radius:14px; padding:28px 30px 22px;
  box-shadow:0 6px 20px color-mix(in srgb, var(--ink) 8%, transparent); }
.rb .recap-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; }
.rb .recap-wm { font-size:15px; }
.rb .recap-url { font-family:var(--ui); font-size:12px; letter-spacing:0.08em; color:var(--ink-muted); }
.rb .recap-headline {
  font-family:var(--frau); font-size:26px; line-height:1.25; color:var(--ink); margin:0 0 18px; }
.rb .recap-lines { list-style:none; margin:0 0 16px; padding:0; }
.rb .recap-lines li {
  font-family:var(--ui); font-size:16px; line-height:1.5; color:var(--ink-dim);
  padding-left:18px; position:relative; }
.rb .recap-lines li::before {
  content:''; position:absolute; left:0; top:0.6em; width:6px; height:6px;
  border-radius:50%; background:var(--blue-bright); }
.rb .recap-facts {
  font-family:var(--ui); font-size:13px; color:var(--ink-muted); margin:0 0 14px;
  padding-top:14px; border-top:1px solid var(--bg3); }
.rb .recap-disclaimer {
  font-family:var(--ui); font-size:12px; line-height:1.45; color:var(--ink-muted); margin:0; }
.rb .recap-tools {
  display:flex; align-items:center; justify-content:center; gap:18px;
  max-width:560px; margin:12px auto 0; flex-wrap:wrap; }
.rb .recap-anon {
  font-family:var(--ui); font-size:14px; color:var(--ink-dim);
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.rb .recap-hint { font-family:var(--ui); font-size:13px; color:var(--ink-muted); }

/* Hairline between the card (hero) and the demoted live-link strip. */
.rb .recap-share-rule {
  border:0; border-top:1px solid var(--bg3); max-width:560px; margin:26px auto 14px; }

/* Demoted "share the live version" strip — flattest element in the section, defers to the card. */
.rb .share-strip {
  max-width:560px; margin:0 auto; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:2px; }
.rb .share-strip-title { font-family:var(--ui); font-size:14px; font-weight:500; color:var(--ink-dim); margin-bottom:2px; }
.rb .share-strip-sub { font-family:var(--mono); font-size:var(--fs-mono-sm); color:var(--ink-muted); letter-spacing:0.04em; }
.rb .share-strip-btn {
  background:transparent; border:1px solid var(--rule); border-radius:4px;
  font-family:var(--mono); font-size:var(--fs-mono-sm); color:var(--ink-dim);
  padding:9px 14px; cursor:pointer; white-space:nowrap; letter-spacing:0.04em;
  flex-shrink:0; transition:background 0.15s; }
.rb .share-strip-btn:hover { background:var(--bg3); }
.rb .share-strip-input {
  flex:1; min-width:0; font-family:var(--mono); font-size:var(--fs-mono-sm); color:var(--ink-dim);
  background:var(--bg); border:1px solid var(--rule); border-radius:4px; padding:9px 12px;
  outline:none; letter-spacing:0.02em; }
@media (max-width:600px){
  .rb .recap-headline { font-size:22px; }
  .rb .recap-card { padding:22px 20px 18px; } }