/* ── RUNWAY CALCULATOR — page-specific CSS ───────────────────────────────
   Extracted from index.html inline <style> (REFACTOR_PLAN.md Step 1).
   Loads after runway.css; critical-nav + sticky-bar stay inline in index.html
   for load-order safety.
   OWNERSHIP (DESIGN.md §00): this file is calculator-page-only and CONSUMES
   runway.css tokens. Do NOT re-declare shared-partial/design-system selectors
   here (header, nav, footer, .hero) — those live in runway.css alone, or the
   cascade becomes "which file wins?".
   BREAKPOINTS (canonical set — don't invent new ones): 600px (nav collapse /
   layout widen, mirrors runway.css's 599 nav) and 900px (wheel picker ⇄ typed
   inputs, WHEEL_MQ in app.js). qa-intake.css additionally keeps 760px (Q&A
   two-col row wrap) and 480px (choice-card stack) — both load-bearing on
   small phones, deliberately not consolidated. ─────────────────────────── */

/* ══════════════════════════════════════
   WORK OPTIONAL CALCULATOR
   iPhone 17 Pro first (393pt wide)
   ══════════════════════════════════════ */

/* Colors, fonts, type scale: see runway.css */
:root {
  /* index.html-specific tokens */
  --touch: 52px;  /* minimum tap target */
  --px: 20px;
  --gap: 16px;

  /* Motion tokens — the SINGLE definition for the calculator page (index.html).
     calc-results.css and qa-intake.css animation blocks reference these; never
     re-declare them elsewhere. All animation use sits inside
     @media (prefers-reduced-motion: no-preference); JS-driven motion checks
     matchMedia('(prefers-reduced-motion: reduce)') (see animateHeroCount). */
  --dur-1: 160ms;   /* micro-interactions: press, chip, hover */
  --dur-2: 320ms;   /* state changes: expand/collapse, dim/recover */
  --dur-3: 560ms;   /* entrances: section reveal, hero staging */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.2, .8, .2, 1);

  /* Surface tokens — radius scale (3-step, capped at 10px: hairline-editorial,
     not SaaS-card) and exactly TWO ink-derived elevation levels (≤8% alpha).
     Elevation is for INTERACTIVE/OVERLAY surfaces only (choice cards, popovers,
     modal, wheel); flat sections keep hairline rules as the primary separator. */
  --rad-1: 3px;
  --rad-2: 6px;
  --rad-3: 10px;
  --shadow-1: 0 1px 3px rgba(22, 20, 15, 0.06);
  --shadow-2: 0 6px 24px rgba(22, 20, 15, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.28);
    --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.38);
  }
}

/* Reset: see runway.css */

/* Data figures: tabular + lining so numbers align (Figtree replaced DM Mono). */
.prob-pct, .field-val, .field-subval, .sheet-cur, .ss-chip, .unit-equiv {
  font-variant-numeric:tabular-nums lining-nums; }

/* body reset lives in runway.css — no override needed here */

/* .hdr, .hdr-brand, .hdr-nav styles live in runway.css — no override needed */

/* ── HERO ── */
.calc-hero { padding:16px var(--px) 20px; border-bottom:1px solid var(--rule); }
/* Once results exist, the marketing entry hero steps aside so the page leads with the user's own
   answer (set by setPhase: body.has-results = phase !== EMPTY). Restored on a fresh/cleared run. */
body.has-results .calc-hero { display:none; }
.calc-hero-eye { font-family:var(--ui); font-size:var(--fs-mono-md); letter-spacing:0.15em; text-transform:uppercase; color:var(--blue-text); margin-bottom:8px; }
.calc-hero h1 { font-family:var(--frau); font-size:var(--fs-hero); font-weight:500; letter-spacing:-.012em; line-height:1.1; margin-bottom:8px; }
.calc-hero h1 em { font-style:italic; color:var(--blue-bright); } /* large text — passes 3:1 */
.calc-hero-desc { font-size:var(--fs-body); color:var(--ink-dim); font-weight:300; line-height:1.6; margin-bottom:0; }

/* ── SHARED INPUTS ── */
.shared-wrap { padding:20px var(--px) 0; }
.shared-title { font-family:var(--ui); font-size:var(--fs-mono-lg); letter-spacing:0.14em; text-transform:uppercase; color:var(--blue-text); margin-bottom:12px; }

.shared-grid { display:flex; flex-direction:column; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.shared-cell { background:var(--surface); padding:18px var(--px) 14px; }
.prob-section { padding:14px 16px; border-bottom:1px solid var(--rule); }
.prob-section-lbl { font-family:var(--ui); font-size:var(--fs-mono-lg); letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:12px; line-height:1.5; }
.prob-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.prob-row:last-child { margin-bottom:0; }
.prob-name { font-family:var(--mono); font-size:var(--fs-body-sm); color:var(--ink-muted); min-width:70px; line-height:1.3; }
.prob-track { flex:1; height:8px; background:var(--bg5); border-radius:4px; overflow:hidden; }
.prob-fill { height:100%; transition:width 0.8s cubic-bezier(.16,1,.3,1); border-radius:4px; }
.prob-pct { font-family:var(--mono); font-size:clamp(20px, 3vw, 24px); font-weight:500; min-width:42px; text-align:right; }

/* ── INPUT PANELS (bento grid, no flip) ────────────────────────────────── */
.fp-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:12px; }
@media(min-width:600px){ .fp-grid{ grid-template-columns:repeat(2,1fr); } .fp-wide,.fp-full{ grid-column:1/-1; } }
@media(min-width:900px){ .fp-grid{ grid-template-columns:repeat(3,1fr); } .fp-wide{ grid-column:span 2; } .fp-full{ grid-column:1/-1; } }
.fp-flex { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.fp-flex > .flip-panel { flex:1 1 240px; }
.flip-panel { background:var(--surface); border:1px solid var(--rule-light); border-radius:2px; }
.fp-card { padding:18px var(--px) 16px; }
.fp-hint { font-family:var(--mono); font-size:var(--fs-mono-sm); color:var(--ink-muted); line-height:1.5; margin-top:6px; }

/* ── FIELD ROWS ── */
/* (dead bento ".ifield { margin-bottom }" rule removed; prose .ifield defined below) */
.field-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.field-lbl { font-family:var(--ui); font-size:var(--fs-body-sm); letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-muted); }
.field-val { font-family:var(--mono); font-size:var(--fs-body); font-weight:500; color:var(--ink); }
.field-subval { font-family:var(--mono); font-size:var(--fs-body-sm); color:var(--ink-muted); }

/* ── SLIDERS ── */
input[type=range] {
  width:100%; -webkit-appearance:none; appearance:none;
  height:4px; background:var(--bg5);
  outline:none; cursor:pointer; border-radius:2px;
  display:block; margin:10px 0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:28px; height:28px;
  background:var(--blue-bright);
  border-radius:50%; cursor:pointer;
}
input[type=range]::-moz-range-thumb {
  width:28px; height:28px;
  background:var(--blue-bright);
  border-radius:50%; border:none;
}
.contrib-pct-bar { height:3px; background:var(--bg5); margin-top:6px; border-radius:2px; }
.contrib-pct-fill { height:100%; background:var(--blue); transition:width 0.3s; border-radius:2px; }

/* (.mini-inp/.mini-lbl removed 2026-07-07 — legacy bento-grid inputs, zero markup refs) */

/* ── TOGGLE BUTTONS (2-state) ── */
.contrib-toggle, .acct-toggle { display:flex; margin-bottom:16px; }
.ctog-btn, .atog-btn {
  flex:1; min-height:var(--touch); padding:10px 8px;
  background:var(--bg2); border:1px solid var(--rule-light);
  color:var(--ink-muted); font-family:var(--mono); font-size:var(--fs-body-sm);
  letter-spacing:0.04em; text-transform:uppercase;
  cursor:pointer; transition:all 0.18s;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; line-height:1.3;
  -webkit-tap-highlight-color:transparent;
}
.ctog-btn:not(:last-child), .atog-btn:not(:last-child) { border-right:none; }
@media (hover: hover) {
  .ctog-btn:not(.active):hover, .atog-btn:not(.active):hover { background:var(--bg3); color:var(--ink); cursor:pointer; }
}
.ctog-btn:not(.active):active, .atog-btn:not(.active):active { background:var(--bg3); color:var(--ink); }
.ctog-btn.active, .atog-btn.active { background:var(--blue-pale); border-color:var(--blue); color:var(--blue-text); position:relative; z-index:1; border-right:1px solid var(--blue) !important; }

/* ── 3-STATE ASSUMPTION TOGGLES ── */

/* ── CHART SECTION ── */
.chart-section-wrap { padding:0 var(--px) 24px; }

/* ── FOOTER ── */
/* .footer / .footer-disc / .footer-brand → runway.css (shared partial; DESIGN.md §00). Removed the
   calculator override: the multi-line disclaimer reads better left-aligned (runway default) than
   centered, and a shared component must not be re-declared here. (.footer-sub was dead — no markup.) */

/* ── MOBILE FAB: slim bottom bar ── */
#fab_icon { color:var(--blue-bright); font-size:var(--fs-mono-lg); }
#fab_label { color:var(--ink-muted); font-size:var(--fs-mono-sm); }
#fab_vals { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:var(--fs-mono-lg); }
.fab-dot { color:var(--ink-muted); opacity:0.4; }
.fab-val-btn {
  cursor:pointer; padding:10px 14px; border-radius:3px;
  transition:background 0.15s; pointer-events:auto;
  -webkit-tap-highlight-color:rgba(91,141,239,0.1);
}
.fab-val-btn:active { background:rgba(91,141,239,0.15); }
#fab_popover {
  position:fixed; z-index:201;
  background:var(--bg2); border:1px solid var(--blue);
  border-radius:var(--rad-2); overflow:hidden;
  box-shadow:var(--shadow-2);
  font-family:var(--ui); font-size:var(--fs-mono-md);
  text-transform:uppercase; letter-spacing:0.08em;
  min-width:120px;
}
.fab-pop-opt {
  display:flex; flex-direction:column; align-items:center;
  padding:12px 16px; gap:2px; cursor:pointer;
  border-bottom:1px solid var(--rule);
  transition:background 0.12s;
}
.fab-pop-opt:last-child { border-bottom:none; }
.fab-pop-opt:active { background:var(--bg3); }
.fab-pop-opt.active { background:var(--blue-pale); }
.fab-pop-opt-label { font-size:var(--fs-mono-xs); color:var(--ink-muted); letter-spacing:0.1em; }
.fab-pop-opt-val { font-size:var(--fs-body-sm); color:var(--ink); }
.fab-pop-opt.active .fab-pop-opt-val { color:var(--blue-bright); }

/* ── RUN BUTTON ── */
/* Hover/active live HERE (CSS) — setPhase no longer writes inline onmouseover
   opacity handlers (removed with the hover-lift; they would stack). The
   background/color transition cross-fades setPhase's inline per-phase colors. */
.run-btn-outer {
  width:100%; background:var(--blue); border:none; border-radius:var(--rad-3);
  color:#FFFFFF; font-family:var(--ui); font-size:var(--fs-body-sm);
  letter-spacing:0.12em; text-transform:uppercase;
  padding:18px var(--px); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:background .25s ease, color .25s ease, transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  margin-top:1px;
  -webkit-tap-highlight-color:transparent; min-height:56px;
}
@media (hover: hover) {
  .run-btn-outer:hover:not(:disabled) { transform:translateY(-1px); box-shadow:var(--shadow-2); }
}
.run-btn-outer:active:not(:disabled) { transform:translateY(0) scale(0.985); box-shadow:var(--shadow-1); }
@media (prefers-reduced-motion: reduce) {
  .run-btn-outer, .run-btn-outer:hover:not(:disabled), .run-btn-outer:active:not(:disabled) {
    transition:background .25s ease, color .25s ease; transform:none; box-shadow:none;
  }
}

.sig-ok   { color: var(--green-ok) !important; }
.sig-warn { color: var(--amber-bright) !important; }
.sig-bad  { color: var(--red-bright) !important; }
.sig-ok-bg   { background: var(--green-ok-bg) !important; }
.sig-warn-bg { background: var(--amber) !important; }
.sig-bad-bg  { background: var(--red-bright) !important; }

/* Hide run button during computing at ALL screen sizes */

/* Gradient fade at bottom of assumption block when FAB is visible */
@media(max-width:899px) {
  body.fab-active #assump_outer { display:none; }
}

/* ── BOTTOM SHEET ── */
.sheet-item { display:flex; flex-direction:column; gap:8px; }
.sheet-lbl-row { display:flex; justify-content:space-between; align-items:baseline; }
.sheet-lbl { font-family:var(--ui); font-size:var(--fs-mono-md); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-muted); }
.sheet-cur { font-family:var(--mono); font-size:var(--fs-body-sm); color:var(--ink); }

/* Hide FAB on desktop */
/* ── MOBILE STICKY COMPACT (post-run, <900px only) ── */
@media(max-width:899px) {
}

@media(min-width:900px) {
  :root { --px:40px; }

  /* ── HEADER ── */
  /* padding comes from runway.css (.hdr 18px var(--px) 16px) — no override, so the calculator-phase
     masthead is the same height as the essay pages and the intake topbar. */

  /* ── HERO ── */
  .calc-hero { max-width:var(--content-max); margin:0 auto; padding:48px var(--px) 40px; }
  .calc-hero-eye { font-size:var(--fs-mono-md); }
  .calc-hero-desc { font-size:var(--fs-lede); }

  /* ── SHARED INPUTS ── */
  .shared-wrap { max-width:var(--content-max); margin:0 auto; }
  #inputs-region { max-width:var(--content-max); margin:0 auto; }
  #sticky_controls { margin:0 auto; }  /* nested in #inputs-region (already capped) — no own cap */
  .shared-title { font-size:var(--fs-mono-md); }

  /* Number inputs */
  input[type=range]::-webkit-slider-thumb { width:20px; height:20px; }
  input[type=range]::-moz-range-thumb { width:20px; height:20px; }

  /* Toggle buttons */
  .ctog-btn, .atog-btn { font-size:var(--fs-mono-md); min-height:38px; padding:7px 10px; }

  /* ── RUN BUTTON ── */
  .run-btn-outer { font-size:var(--fs-mono-md); padding:18px var(--px); min-height:56px; }

  /* ── OUTPUT ── */
  .prob-section { padding:14px 22px; }
  .prob-section-lbl { font-size:var(--fs-mono-md); margin-bottom:10px; }
  .prob-name { font-size:var(--fs-body-sm); min-width:90px; }
  .prob-track { height:7px; }
  .prob-pct { font-size:var(--fs-h3); min-width:46px; }
  /* ── CHART & FOOTER ── */
  .chart-section-wrap { max-width:var(--content-max); margin:0 auto; }
  /* .footer / .footer-disc → runway.css (§00) */

  /* SS */
  .ss-lbl { font-size:var(--fs-mono-lg); }
  .ss-fields { flex-direction:row; flex-wrap:wrap; }
  .ss-fields > div { flex:1; min-width:140px; }
}
.pre-run-hidden { display:none !important; }

/* SS claim-age selector chips (62/67/70) — input panel, post-compute strip */
.ss-chips { display:flex; gap:6px; margin-top:4px; }
.ss-chip { flex:1; padding:10px 0; font-family:var(--mono); font-size:var(--fs-mono-md);
  color:var(--ink-dim); background:var(--bg2); border:1px solid var(--rule); border-radius:var(--rad-2);
  cursor:pointer; }
.ss-chip:hover { border-color:var(--blue); }
.ss-chip:disabled { opacity:0.5; cursor:default; }
/* Active state carries an inset ring in addition to the tint, so selection
   never reads by color alone (color-blind-safe affordance). */
.ss-chip-active { background:var(--blue-pale); border-color:var(--blue); color:var(--blue-text); font-weight:500;
  box-shadow:inset 0 0 0 1px var(--blue); }
.ss-chips[aria-busy="true"] { opacity:0.7; }
@media (prefers-reduced-motion: no-preference) {
  .ss-chip { transition:border-color var(--dur-1) ease, background var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out); }
  .ss-chip:active:not(:disabled) { transform:scale(0.97); }
}

/* Post-compute SS claim age quick-toggle strip */
/* Containment via warm surface tint + hairline — deliberately NO shadow
   (elevation is reserved for interactive/overlay surfaces). */
.ss-claim-row-wrap {
  width:100%; max-width:var(--content-max); margin:0 auto 14px; padding:10px var(--px);
  box-sizing:border-box; background:var(--bg2); border:1px solid var(--rule-light);
  border-radius:var(--rad-2);
}
.ss-claim-row-inner { display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.ss-claim-group { display:flex; align-items:center; gap:10px; }
.ss-claim-lbl { font-family:var(--mono); font-size:var(--fs-mono-sm); color:var(--ink-dim);
  letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; }
.ss-claim-row-wrap .ss-chips { margin-top:0; }
.ss-claim-row-wrap .ss-chip { padding:6px 0; min-width:36px; }

/* Collapsed-inputs summary bar — shown after a run; click to edit. Distinct from
   .pre-run-hidden so the render smoke test's hiddenCount===0 stays valid. */
.inputs-collapsed { display:none !important; }
.input-summary-bar {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; max-width:var(--content-max); margin:18px auto; box-sizing:border-box;
  padding:16px var(--px); background:var(--bg2); border:1px solid var(--rule-light);
  border-radius:var(--rad-2); cursor:pointer; text-align:left; font-family:var(--mono);
  font-size:var(--fs-mono-lg); color:var(--ink); letter-spacing:0.02em;
  transition:border-color var(--dur-1) ease, background var(--dur-1) ease;
}
.input-summary-bar:hover { border-color:var(--blue); background:var(--bg3); }
.input-summary-bar .edit-affordance {
  font-family:var(--ui); font-size:var(--fs-mono-md); letter-spacing:0.1em;
  text-transform:uppercase; color:var(--blue-text); white-space:nowrap; flex-shrink:0; font-weight:500;
}
#inputs-summary-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { .input-summary-bar { transition:none; } }
.slide-in {
  animation: slideDown 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-12px); }
  to   { opacity:1; transform:translateY(0); }
}
   ══════════════════════════════════════ */
@media(min-width:600px) {
  :root { --px:28px; --gap:20px; }
  .hdr-nav { display:flex; }          /* counteract the display:none above */
  .hdr-menu-btn { display:none; }
  .hdr-nav-drawer { display:none !important; }
  .shared-grid { flex-direction:row; flex-wrap:wrap; }
  .shared-cell { flex:1; min-width:260px; }
  #sticky_controls.is-fixed .atog-3 br { display:none; }

  #sticky_placeholder { display:block; }

  /* SS */
  .ss-lbl { font-size: var(--fs-mono-lg); }
  .ss-fields { flex-direction:row; flex-wrap:wrap; }
  .ss-fields > div { flex:1; min-width:140px; }

  /* ── RUN BUTTON ── */
  .run-btn-outer { font-size:var(--fs-mono-md); padding:18px var(--px); min-height:56px; }

  .prob-section { padding:14px 22px; }
  .prob-section-lbl { font-size:var(--fs-mono-md); margin-bottom:10px; }
  .prob-name { font-size:var(--fs-body-sm); min-width:90px; }
  .prob-track { height:7px; }
  .prob-pct { font-size:var(--fs-h3); min-width:46px; }

  /* ── CHART & FOOTER ── */
  .chart-section-wrap { max-width:var(--content-max); margin:0 auto; }
  /* .footer / .footer-disc → runway.css (§00) */
}

  @keyframes modalSpin {
    to { transform: rotate(360deg); }
  }
  @keyframes modalDot {
    0%, 100% { opacity: 0.2; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1); }
  }
  .modal-dot:nth-child(1) { animation: modalDot 1.2s ease-in-out infinite 0s; }
  .modal-dot:nth-child(2) { animation: modalDot 1.2s ease-in-out infinite 0.4s; }
  .modal-dot:nth-child(3) { animation: modalDot 1.2s ease-in-out infinite 0.8s; }
  .modal-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--blue-bright);
  }

/* ── DARK MODE OVERRIDES ─────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Secondary header override (hardcoded rgba bypasses token) */
  .hdr { background:rgba(22,20,15,0.97) !important; }

  /* FAB bar */
  #fab_assump { background:rgba(22,20,15,0.97); box-shadow:0 -4px 24px rgba(0,0,0,0.4); }
  #fab_assump:active { background:rgba(30,32,36,0.99); }

  /* Chart legend swatches */
  .chart-legend-band { background:rgba(91,141,239,0.2) !important; }
  .chart-legend-draw { background:rgba(251,250,247,0.06) !important;
                       border-color:rgba(251,250,247,0.15) !important; }
}

/* ── CALCULATION MODAL (moved from second inline <style>) ── */
/* Enter-only fade — plays when showCalcModal flips display none→flex. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
  #calc-modal { animation: modalFadeIn 200ms ease; }
}
@keyframes modal-indeterminate {
  0%   { left:-40%; width:40%; }
  50%  { left:20%;  width:60%; }
  100% { left:100%; width:40%; }
}
#calc-modal-bar.indeterminate {
  position:relative; width:100% !important;
  animation: modal-indeterminate 1.4s ease-in-out infinite;
  transition: none !important;
}

/* ── PROSE FORM (conversational inputs) ────────────────────────────────── */
.prose-form {
  width: 100%;
  padding: 32px var(--px, 20px) 0;
  box-sizing: border-box;
}
.prose-line {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 8px;
}
.prose-line--muted { color: var(--ink-muted); }
.prose-note { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: 0.04em; color: var(--ink-muted); line-height: 1.6; margin: -2px 0 4px; }

/* Inline ⓘ affordance — tucks a footnote behind a tap so the prose flow
   reads clean. The pop reveals below the sentence. */
.prose-info { display: inline; }
.prose-info-btn {
  appearance: none; -webkit-appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 0.62em; font-weight: 600; line-height: 1;
  vertical-align: baseline; padding: 0; margin-left: 2px;
  width: 1.45em; height: 1.45em; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blue-text); border: 1px solid var(--ink-sub);
  transition: background .12s ease, border-color .12s ease;
}
.prose-info-btn:hover { background: var(--rule-light); border-color: var(--blue); }
.prose-info-btn[aria-expanded="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.prose-info-pop {
  display: block; font-family: var(--mono); font-size: var(--fs-mono-sm);
  letter-spacing: 0.04em; color: var(--ink-dim); line-height: 1.65;
  background: var(--bg2); border: 1px solid var(--rule-light); border-left: 3px solid var(--blue);
  padding: 12px 14px; margin: 6px 0 10px;
}
.prose-info-pop strong { color: var(--ink); }
.prose-info-pop[hidden] { display: none; }

/* Optional-line + popover reveals — ENTER-ONLY motion. These elements are
   shown/hidden by inline display writes (toggleSS/toggleRetInc/toggleWindfall/
   setContrib/toggleInfo/toggleMoreAssumptions); a CSS animation restarts each
   time display flips from none, so the REVEAL animates while collapse stays an
   instant display:none — fully inert (no tab-order or SR leakage; deliberate
   alternative to a 0fr grid collapse, which leaves hidden inputs focusable).
   End-state display values are untouched (render-suite safe). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes proseIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  #partner_line, #retinc_line, #windfall_line, #ss_line, #no_ss_line,
  #add_partner_btn, #add_income_btn, #add_windfall_btn,
  .prose-info-pop, .more-asmp-body {
    animation: proseIn var(--dur-2) var(--ease-out);
  }
}

/* ── Conversational form — grouped prose with breathing room ─────────────
   The form reads as short first-person sentences, ordered goal → what you
   have → Social Security → how long → optional. Logical groups are separated
   by a hairline + generous vertical rhythm (no boxes), so the eye can scan
   the sections without the page feeling like one dense paragraph. */
.prose-group { padding: 18px 0; border-top: 0.5px solid var(--rule-light); }
.prose-group:first-of-type { border-top: none; padding-top: 2px; }
.prose-form .prose-line { line-height: 1.5; margin: 0; }
.prose-group .prose-line + .prose-line { margin-top: 12px; }

/* Within the merged money+SS group, separate the SS line from the savings line
   above it (a div wrapper, so the prose-line + prose-line selector can't reach). */
#ss_line, #no_ss_line { margin-top: 12px; }

/* Each optional addition (spouse / other income / windfall) is its own
   .prose-group, so a hairline delineates each one — collapsed or expanded. The
   collapsed "I'm not including…" prompt and its full line stack without extra gap. */
.prose-group > div + div { margin-top: 12px; }

/* Unit-mismatch guard — muted sub-hint echoing the value in its other period,
   on its own line so it reads as a quiet aside (and never orphans punctuation). */
.unit-equiv { display: block; font-family: var(--mono); font-size: var(--fs-mono-sm);
  letter-spacing: 0.03em; color: var(--ink-sub); margin-top: 3px; }
.unit-equiv:empty { display: none; }

/* Read-only derived-longevity pill — blue text matches the editable input slots
   (--blue-text), but the dashed muted border + tint still signal "computed, not
   typed". Tokens (not raw hex) keep it dark-mode-safe. */
.hor-pill {
  display: inline-block; font-family: var(--mono); font-weight: 500;
  font-size: 0.78em; line-height: 1.25; padding: 1px 10px; border-radius: 7px;
  background: var(--rule-light); border: 1px dashed var(--ink-sub); color: var(--blue-text);
  letter-spacing: 0.02em; vertical-align: baseline;
}

/* (.ifield/.ifield-sizer removed 2026-07-07 — superseded by the .slot wheel/input
   system below; zero markup refs. initSizers/sizeField in app.js are retained
   no-ops against the empty selector.) */

/* Keyboard focus — visible ring on all interactive intake controls (WCAG 2.4.7) */
.ss-chip:focus-visible,
.i-chip:focus-visible,
.prose-toggle:focus-visible,
.prose-add:focus-visible,
.more-asmp-btn:focus-visible,
.run-btn-outer:focus-visible,
.input-summary-bar:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; border-radius: 2px; }
.slot .val:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 2px; }

/* ════════════════════════════════════════════════════════════════════
   INPUT WHEELS v2 — tap-to-open overlay scroll wheel + tap-to-type.
   Each numeric value reads as inline editable text at rest (a blue figure
   on a dotted underline). Tapping opens a wheel that floats centered over
   the pill (no horizontal reflow). A "⌨ type" chip drops a precise input.
   The backing <input> (.slot-input) stays the source of truth — getBase /
   restoreSession reads & writes it unchanged; the wheel mirrors it.
   Tokens only; dark mode handled by the token layer.
   ════════════════════════════════════════════════════════════════════ */
/* --row is based on the --fs-h2 token (a fixed length, NOT an em) so it resolves
   to the SAME value on the wheel, its items, and the "type" chip — an `em` custom
   property would re-resolve against each element's own font-size and misalign them. */
.slot { display: inline-block; vertical-align: middle; position: relative; --row: calc(var(--fs-h2) * 1.7); }
/* The backing input is hidden but live — JS writes .value + dispatches input. */
.slot-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none; }
/* At rest the value reads as inline editable text — no wheel, no button chrome. */
.slot .val {
  font-family: var(--serif); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1em; color: var(--blue-text);
  background: none; border: none; border-bottom: 1.5px dotted color-mix(in srgb, var(--blue) 55%, transparent);
  border-radius: 0; padding: 1px 1px 2px; cursor: pointer; white-space: nowrap;
  min-height: 44px; line-height: 1; -webkit-tap-highlight-color: transparent; }
.slot .val:hover { border-bottom-style: solid; border-bottom-color: var(--blue); }
.slot .val .caret { font-family: var(--ui); font-size: 0.62em; opacity: 0.5; margin-left: 3px; vertical-align: 0.1em; }
.slot.active .val { visibility: hidden; }   /* keeps its box → no horizontal reflow */

/* The wheel floats centered over the pill — middle row sits where the value was. */
.slot .wheel {
  position: absolute; left: 50%; top: 50%; z-index: 30;
  transform: translate(-50%,-50%) scale(0.9); opacity: 0; pointer-events: none;
  transition: transform var(--dur-1) var(--ease-spring), opacity .12s ease;
  height: calc(var(--row) * 5); width: max-content;
  overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; touch-action: pan-y;
  border-radius: var(--rad-3); background: var(--surface);
  box-shadow: 0 6px 22px rgba(0,0,0,0.22), 0 0 0 2px color-mix(in srgb, var(--blue) 40%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); }
.slot.active .wheel { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
.slot .wheel::-webkit-scrollbar { display: none; }
.wheel-list { display: flex; flex-direction: column; padding: calc(var(--row) * 2) 0; }
.wheel-item { height: var(--row); line-height: var(--row); scroll-snap-align: center;
  font-family: var(--mono); font-weight: 500; font-size: 0.9em; color: var(--ink-muted);
  text-align: center; padding: 0 14px; white-space: nowrap; }
.wheel-item.sel { color: var(--blue-text); }
/* selection band — fixed lines across the wheel's center row */
.slot.active .wheel-frame-line { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: calc(100% - 4px); height: var(--row); z-index: 31; pointer-events: none;
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--blue) 40%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 40%, transparent); }

/* tap-to-type escape hatch — a tiny keyboard chip pinned to the open wheel */
.wheel-kbd { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + var(--row, 1.7em) * 3.2));
  z-index: 32; display: none; font-family: var(--ui); font-size: var(--fs-mono-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  min-height: 44px; padding: 3px 10px; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.slot.active .wheel-kbd { display: inline-flex; align-items: center; }
.wheel-type { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 33;
  width: 7.5em; text-align: center; font-family: var(--mono); font-weight: 500; font-size: 0.94em;
  color: var(--blue-text); background: var(--surface); border: none; border-radius: 8px; padding: 12px 6px;
  outline: 2px solid var(--blue-bright); box-shadow: 0 6px 22px rgba(0,0,0,0.22); }
@media (prefers-reduced-motion: reduce) { .slot .wheel { transition: none; } }

/* Desktop (≥900px): the scroll wheel is a touch affordance — fall back to a
   plain inline typed field. Hide the pill + wheel chrome and un-hide the backing
   .slot-input, styled like the prior .ifield input. JS sets its `size` attr so it
   auto-fits the value, and restores its tabindex/aria so it's a real control. */
@media (min-width: 900px) {
  .slot .val,
  .slot .wheel,
  .slot .wheel-frame-line,
  .slot .wheel-kbd { display: none !important; }
  .slot .slot-input {
    position: static; width: auto; height: auto; clip: auto; overflow: visible;
    opacity: 1; pointer-events: auto;
    padding: 11px 2px; margin: -11px 1px;
    font-family: var(--serif); font-size: var(--fs-h2); font-weight: inherit;
    text-align: center; line-height: 1;
    color: var(--blue-text); background: transparent;
    border: none; border-bottom: 2px solid var(--blue-text); border-radius: 0;
    outline: none; cursor: text; -webkit-tap-highlight-color: transparent;
  }
  .slot .slot-input:hover { border-bottom-color: var(--blue); }
  .slot .slot-input:focus { border-bottom-color: var(--blue); background: var(--blue-pale); border-radius: 2px 2px 0 0; }
  .slot .slot-input:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; border-radius: 2px; }
}

/* Inline SS claim age chips (override .ss-chip sizing inside prose form) */
.i-chips { display: inline-flex; gap: 6px; vertical-align: middle; margin: 0 3px; }
.i-chip.ss-chip {
  flex: none;
  min-height: 38px;
  padding: 8px 11px;
  font-size: var(--fs-mono-sm);
}

/* "No SS" / "Remove" inline toggles */
.prose-toggle {
  font-family: var(--ui);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  background: none;
  border: none;
  border-bottom: 1px dashed var(--rule-light);
  cursor: pointer;
  margin-left: 6px;
  padding: 15px 6px;
  margin-top: -15px;
  margin-bottom: -15px;
  display: inline-block;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
.prose-toggle:hover { color: var(--ink); border-bottom-color: var(--ink-dim); }

/* "+ Add partner" / "+ Add other income" buttons */
.prose-adds { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.prose-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: none;
  border: 1px dashed var(--rule-light);
  border-radius: 4px;
  min-height: 44px;
  padding: 10px 16px;
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.prose-add:hover { color: var(--blue-text); border-color: var(--blue-text); background: var(--blue-pale); }

/* More assumptions */
.more-asmp { margin: 24px 0 36px; }
.more-asmp-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.more-asmp-btn:hover { color: var(--ink); }
.more-asmp-chevron { transition: transform .2s; display: inline-block; }
.more-asmp-body {
  margin-top: 16px;
  padding: 18px 20px;
  background: var(--bg2);
  border: 1px solid var(--rule-light);
  border-radius: var(--rad-2);
}
.more-asmp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.more-asmp-row:last-child { margin-bottom: 0; }
.more-asmp-lbl {
  font-family: var(--ui);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.more-asmp-row input[type=range] {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 3px; background: var(--bg5); outline: none; cursor: pointer; border-radius: 2px;
}
.more-asmp-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; background: var(--blue-bright); border-radius: 50%; cursor: pointer;
}
.more-asmp-row input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; background: var(--blue-bright); border-radius: 50%; border: none; cursor: pointer;
}
.more-asmp-val {
  font-family: var(--mono);
  font-size: var(--fs-mono-md);
  font-weight: 500;
  color: var(--ink);
  min-width: 3ch;
  text-align: right;
  flex-shrink: 0;
}
.more-asmp-chk {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink);
}
.more-asmp-chk input[type=checkbox] {
  width: 18px; height: 18px; accent-color: var(--blue-bright); cursor: pointer; flex-shrink: 0;
}

@media (max-width: 480px) {
  /* .prose-line font-size inherits from --fs-h2 clamp — no override needed */
  /* .ifield input / .ifield-sizer font-size inherits from --fs-h2 clamp */
  .i-chip.ss-chip { font-size: var(--fs-mono-sm); padding: 9px 11px; }
}