/* Coast FIRE v2. Calm layout on warm ivory/ink neutrals with one cobalt accent: the answer and
   the chart are shown; everything else sits in collapsed rows whose summary keeps a live value.
   Tokens on :root; dark set under prefers-color-scheme and [data-theme="dark"]. */
:root {
  color-scheme: light;
  --bg: #f6f3ec; --surface: #fffdf9; --surface-2: #faf7f1;
  --ink: #1d1c1a; --ink-2: #4f4b44; --muted: #6f6962;
  --line: #e4ded3; --grid: #ece7de; --base: #c9c2b5;
  --accent: #2f5bb8; --accent-ink: #24489a; --on-accent: #ffffff;
  --accent-wash: rgba(47, 91, 184, .09); --accent-soft: #dfe7f6; --focus: rgba(47, 91, 184, .35);
  --good: #2f7a4a; --good-wash: rgba(47, 122, 74, .11);
  --bad: #b3362c; --bad-fill: #c9483d; --bad-wash: rgba(179, 54, 44, .10);
  --warn: #8a5a00; --warn-wash: rgba(196, 140, 20, .15);
  /* series: validated with the dataviz validator (light surface #fffdf9) */
  --c1: #2f5bb8; --c2: #20917a; --c3: #c2602e; --c4: #a0549a; --tax: #8a8478;
  /* bridge: pre-tax money blue (72(t), like 401(k)), Roth money orange (basis; ladder a darker step) */
  --ladder: #853e19;
  /* main chart "keep saving, never coast" line: the validated teal series step (= --c2) */
  --keep: #20917a;
  /* heatmap: one blue hue, 5 steps, more years coasting = darker. Lightest step >= 2:1 on the
     surface, adjacent steps >= 0.06 apart in OKLab L, cell text >= 4.5:1. */
  --h1: #9db5e6; --h2: #809fdf; --h3: #6388d6; --h4: #436cc8; --h5: #26499b;
  --h-ink-lo: #1d1c1a; --h-ink-hi: #ffffff; --h3-ink: #1d1c1a;
  --shadow: 0 1px 2px rgba(29, 28, 26, .05), 0 6px 18px rgba(29, 28, 26, .05);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141311; --surface: #1c1b18; --surface-2: #22211d;
    --ink: #efebe3; --ink-2: #c4beb3; --muted: #948d82;
    --line: #34312c; --grid: #2a2824; --base: #4a463f;
    --accent: #5f88e0; --accent-ink: #9db8f2; --on-accent: #141311;
    --accent-wash: rgba(95, 136, 224, .13); --accent-soft: #22304d; --focus: rgba(95, 136, 224, .45);
    --good: #6cc28d; --good-wash: rgba(108, 194, 141, .14);
    --bad: #ec8a7c; --bad-fill: #e0705f; --bad-wash: rgba(236, 138, 124, .15);
    --warn: #e3b25a; --warn-wash: rgba(227, 178, 90, .13);
    --c1: #5f88e0; --c2: #2aa384; --c3: #cf6a3c; --c4: #b874b0; --tax: #6b665e; --ladder: #e9a679; --keep: #2aa384;
    --h1: #384c76; --h2: #425c93; --h3: #4a6cb4; --h4: #6990e2; --h5: #9dbaf5;
    --h-ink-lo: #efebe3; --h-ink-hi: #141311; --h3-ink: #ffffff;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141311; --surface: #1c1b18; --surface-2: #22211d;
  --ink: #efebe3; --ink-2: #c4beb3; --muted: #948d82;
  --line: #34312c; --grid: #2a2824; --base: #4a463f;
  --accent: #5f88e0; --accent-ink: #9db8f2; --on-accent: #141311;
  --accent-wash: rgba(95, 136, 224, .13); --accent-soft: #22304d; --focus: rgba(95, 136, 224, .45);
  --good: #6cc28d; --good-wash: rgba(108, 194, 141, .14);
  --bad: #ec8a7c; --bad-fill: #e0705f; --bad-wash: rgba(236, 138, 124, .15);
  --warn: #e3b25a; --warn-wash: rgba(227, 178, 90, .13);
  --c1: #5f88e0; --c2: #2aa384; --c3: #cf6a3c; --c4: #b874b0; --tax: #6b665e; --ladder: #e9a679; --keep: #2aa384;
  --h1: #384c76; --h2: #425c93; --h3: #4a6cb4; --h4: #6990e2; --h5: #9dbaf5;
  --h-ink-lo: #efebe3; --h-ink-hi: #141311; --h3-ink: #ffffff;
  --shadow: none;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.45 var(--sans);
  padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           96px max(16px, env(safe-area-inset-left));
}
.app { max-width: 420px; margin: 0 auto; }
h1, h2, h3 { margin: 0; }
h2 { font: 400 20px/1.2 var(--serif); letter-spacing: -.005em; }
h3 { font: 400 18px/1.2 var(--serif); }
p { margin: 0; }
a { color: var(--accent-ink); text-underline-offset: 2px; }
.fine { font-size: 12px; color: var(--muted); }
.grow { flex: 1; min-width: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ===== Masthead ===== */
.mast { padding: 6px 0 2px; }
.mast-row { display: flex; align-items: center; gap: 6px; }
.mast-row .logo { margin-right: 4px; }
.logo { width: 32px; height: 32px; border-radius: 9px; background: var(--ink); display: grid; place-items: center; flex: none; }
.logo svg { width: 21px; height: 21px; fill: none; stroke: var(--bg); stroke-width: 2.2; stroke-linecap: round; }
h1 { font: 400 26px/1.05 var(--serif); letter-spacing: -.015em; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid transparent; background: none;
  color: var(--ink-2); display: grid; place-items: center; cursor: pointer; flex: none; padding: 0;
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { color: var(--ink); border-color: var(--line); background: var(--surface); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Cards ===== */
/* Only the answer and the chart are raised; everything else sits on the page background. */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  margin-top: 10px; min-width: 0;
}
.hero-card { box-shadow: var(--shadow); border-color: transparent; padding: 12px 14px; }
.chart-card { padding: 12px 14px 10px; }
.card-head h2 { font-size: 19px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.card-head .fine { margin-top: 2px; }
.mini-title { font: 600 12px/1.3 var(--sans); color: var(--muted); }
/* Two quiet headings, "Your numbers" and "Go deeper"; space, not rules, between groups. */
.group { margin-top: 28px; min-width: 0; }
.group + .group { margin-top: 22px; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 2px; }
.group-h { font: 400 19px/1.25 var(--serif); color: var(--ink); }
.deeper-h { margin: 34px 0 4px; }

/* ===== Banner, buttons ===== */
.banner { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--warn-wash); border: 1px solid var(--line); }
.banner p { font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn {
  font: inherit; font-size: 14px; font-weight: 650; min-height: 44px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--base); }
.btn.sm { min-height: 36px; padding: 6px 14px; font-size: 13px; position: relative; }
.btn.sm::before { content: ""; position: absolute; inset: -4px 0; } /* 44px tall hit area, smaller pill */
.btn.lg { flex: 1; }
.btn:disabled { opacity: .45; cursor: default; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.end-actions { margin-top: 22px; }
.linkish {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--accent-ink); background: none; border: 0;
  padding: 14px 2px; margin: -14px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 0;
}

/* ===== Hero ===== */
.hero { display: grid; grid-template-columns: 68px 1fr; gap: 14px; align-items: center; }
.ring { width: 68px; height: 68px; display: block; }
.ring-track { fill: none; stroke: var(--accent-soft); stroke-width: 8; }
.ring-fill { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
.ring-num { font: 700 16px var(--sans); fill: var(--ink); }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650;
  padding: 3px 9px 3px 7px; border-radius: 999px;
}
.chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.chip.good { color: var(--good); background: var(--good-wash); }
.chip.bad { color: var(--bad); background: var(--bad-wash); }
.chip.warn { color: var(--warn); background: var(--warn-wash); }
.hero-num { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.hero-num b { font: 700 44px/1 var(--sans); letter-spacing: -.03em; white-space: nowrap; }
.hero-num b.words { font-size: 34px; letter-spacing: -.02em; }
.hero-num span { font-size: 13px; color: var(--ink-2); line-height: 1.25; }
.hero-num.stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.pull { margin: 10px 0 0; padding: 0; }
.pull p { font: 400 17px/1.4 var(--serif); color: var(--ink); }
.pull strong { font-weight: 700; }
/* The one off-track line from the suggestions engine, with a link to all of them. */
.sug-line { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.hero-scn { color: var(--muted); font-weight: 400; }
.sug-line .linkish { min-height: 44px; margin: -11px 0; display: inline-flex; align-items: center; vertical-align: middle; }
/* The numbers, when opened: a plain two-column list with hairlines; colour only on the deltas. */
.kpi-d { margin-top: 6px; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 0; }
.kpi { border-top: 1px solid var(--line); padding: 10px 0; min-width: 0; margin: 0; }
.kpis > .kpi:nth-child(-n+2) { border-top: 0; padding-top: 2px; }
.kpi dt { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.kpi dd { margin: 3px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi dd.kpi-note { font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; line-height: 1.35; white-space: normal; letter-spacing: 0; }
.delta-line { display: block; margin-top: 2px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.delta.up { color: var(--good); } .delta.down { color: var(--bad); }
.delta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.warn { color: var(--warn); font-size: 13px; margin-top: 10px; }

/* ===== Legends, readout, charts ===== */
.legend { list-style: none; padding: 0; margin: 2px 0 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-2); }
.legend-row { display: flex; align-items: center; gap: 4px 8px; margin: 2px 0 4px; }
.legend-row .legend { margin: 0; gap: 4px 8px; flex: 1; min-width: 0; }
.legend-row .legend .key { width: 12px; }
.legend-row .more-lines { white-space: nowrap; }
.legend-row .more-lines { margin-left: auto; }
.legend-x { margin: 0 0 4px; }
.legend li { display: flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 16px; height: 0; border-top: 2px solid; flex: none; }
.k-proj { border-top: 2.5px solid var(--accent); }
.k-coast { border-color: var(--ink-2); }
.k-stop { border-top: 2px dashed var(--muted); }
.k-keep { border-top: 2.5px dashed var(--keep); }
.k-buy { border-top: 2.25px solid var(--c4); }
.kpi-wide { grid-column: 1 / -1; }
.kpi dt .key { width: 14px; margin-right: 6px; vertical-align: middle; }
.readout .past { font-weight: 500; color: var(--muted); }
.table-note { margin: 6px 0 4px; }
table.data tr.past-row td { color: var(--muted); }
table.data tr.past-row td:last-child { color: var(--ink); }
.k-fire { border-top: 1px solid var(--muted); position: relative; }
.k-fire::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; border-top: 0; }
.k-zone { height: 10px; border: 1px solid var(--accent-soft); background: var(--accent-wash); border-radius: 2px; }
.sq { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.sq.c1 { background: var(--c1); } .sq.c2 { background: var(--c2); } .sq.c3 { background: var(--c3); } .sq.c4 { background: var(--c4); } .sq.c5 { background: var(--tax); }
.sq.b72 { background: var(--c1); } .sq.btax { background: var(--tax); } .sq.bbasis { background: var(--c3); } .sq.bladder { background: var(--ladder); }
.sq.bgap { background: repeating-linear-gradient(135deg, var(--bad-fill) 0 1.5px, var(--bad-wash) 1.5px 4px); outline: 1px solid var(--bad-fill); outline-offset: -1px; }
.readout {
  display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 12px; font-variant-numeric: tabular-nums;
  background: var(--surface-2); border-radius: 8px; padding: 5px 9px; margin: 4px 0 6px; min-height: 30px;
}
.readout span { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; }
.readout .key { width: 10px; }
.readout .gap { margin-left: auto; }
.readout .gap.down { color: var(--bad); } .readout .gap.up { color: var(--good); }
/* At rest the row is quiet: plain weight, no shaded box; it lights up while reading an age. */
.readout.rest { background: transparent; color: var(--ink-2); }
.readout.rest span { font-weight: 500; }
.chart { position: relative; height: 216px; }
#chart-svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; }
#chart-svg:focus { outline: none; }
#chart-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
svg text { font-family: var(--sans); }
.tick { font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.grid { stroke: var(--grid); stroke-width: 1; }
.base { stroke: var(--base); stroke-width: 1; }
.fire-line { stroke: var(--muted); stroke-width: 1; }
.ref-label { font-size: 10px; font-weight: 600; fill: var(--ink-2); }
.halo { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.coast-zone { fill: var(--accent-wash); }
.coast-label { font-weight: 600; }
.zone-label { font-size: 10px; font-weight: 700; fill: var(--accent-ink); }
.l-proj { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.l-coast { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.l-stop { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.l-keep { fill: none; stroke: var(--keep); stroke-width: 2.25; stroke-dasharray: 7 3; stroke-linejoin: round; }
.dot-keep { fill: var(--keep); stroke: var(--surface); stroke-width: 2; }
/* Buying a home: solid --c4 (the validated HSA step), a square at the purchase, the buyer's FIRE tick. */
.l-buy { fill: none; stroke: var(--c4); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.buy-mark { fill: var(--c4); stroke: var(--surface); stroke-width: 2; paint-order: stroke; }
.buy-leader { stroke: var(--c4); stroke-width: 1; }
.dot-buy { fill: var(--c4); stroke: var(--surface); stroke-width: 2; }
.fire-own { stroke: var(--c4); stroke-width: 1.5; }
.buy-t { fill: var(--ink); }
.ret-line { stroke: var(--base); stroke-width: 1; stroke-dasharray: 2 3; }
.tick-ret { font-weight: 700; fill: var(--ink-2); }
.dot-proj { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.dot-coast { fill: var(--ink-2); stroke: var(--surface); stroke-width: 2; }
.xhair { stroke: var(--ink-2); stroke-width: 1; opacity: .5; }
.ann { font-size: 11px; font-weight: 700; fill: var(--ink); }
.end-label { font-size: 11px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.end-label.muted { font-weight: 500; fill: var(--muted); font-size: 10px; }
.pin-line { stroke: var(--ink-2); stroke-width: 1; }
.pin-a { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.pin-t { font-size: 9px; font-weight: 800; fill: var(--ink); }
.short-br { stroke: var(--bad); stroke-width: 1.5; fill: none; }
.short-t { font-size: 11px; font-weight: 700; fill: var(--bad); }
.chart-empty {
  position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--muted); padding: 20px; border: 1px dashed var(--base); border-radius: 10px;
}
.chart-foot .linkish { white-space: nowrap; }
.chart-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; min-height: 18px; }
.chart-foot #table-toggle { margin-left: auto; }
#path-table table.data th:first-child, #path-table table.data td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
#path-table table.data thead th:first-child { z-index: 2; }
@media (max-width: 360px) { #path-table table.data th, #path-table table.data td { padding: 6px 2px; font-size: 11px; } }
.table-wrap { margin-top: 10px; max-height: 320px; overflow: auto; border-top: 1px solid var(--line); }
table.data { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
table.data th, table.data td { text-align: right; padding: 6px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th { color: var(--muted); font-weight: 600; font-size: 11px; position: sticky; top: 0; background: var(--surface); }
table.data tr.gap-row td.short { color: var(--bad); font-weight: 700; }
svg.bars, svg.spark, svg.bridge-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lab { font-size: 11px; fill: var(--ink-2); font-weight: 600; }
.val { font-size: 11px; fill: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.c1 { fill: var(--c1); } .c2 { fill: var(--c2); } .c3 { fill: var(--c3); } .c4 { fill: var(--c4); } .c5 { fill: var(--tax); }
.b72 { fill: var(--c1); } .btax { fill: var(--tax); } .bbasis { fill: var(--c3); } .bladder { fill: var(--ladder); }
.bgap { fill: url(#gaphatch); }
.gap-bg { fill: var(--bad-wash); } .gap-line { stroke: var(--bad-fill); stroke-width: 1.6; }
.gap-amt { font-size: 10px; font-weight: 700; fill: var(--bad); font-variant-numeric: tabular-nums; }
.spend-line { stroke: var(--ink); stroke-width: 1.5; }
.l-spark { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ok-zone { fill: color-mix(in srgb, var(--ink) 5%, transparent); } /* neutral: the FIRE line and point label carry the meaning */
.axis-note { font-weight: 400; color: var(--muted); }

/* ===== Contributions total ===== */
.total { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; }
.total b { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }

/* ===== Earliest coast list ===== */
.ec { list-style: none; margin: 0; padding: 0; }
.ec li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who who" "res btn" "why why"; gap: 4px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.ec li:first-child { border-top: 0; padding-top: 2px; }
.ec .who { grid-area: who; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ec .who small { font-weight: 400; font-size: 12px; color: var(--muted); }
.ec .res { grid-area: res; display: flex; align-items: baseline; gap: 8px; }
.ec .btn { grid-area: btn; }
.ec li.nobtn .res { grid-column: 1 / -1; }
.ec li.ec-empty { display: block; font-size: 13px; color: var(--muted); padding: 6px 0; }
.ec .age { font-size: 24px; font-weight: 700; line-height: 1.1; }
.ec .yrs { font-size: 12px; color: var(--ink-2); }
.ec li.lead .age { color: var(--accent-ink); }
.ec .np { font-size: 15px; font-weight: 700; color: var(--bad); display: inline-flex; align-items: center; gap: 4px; }
.ec .np svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ec .why { grid-area: why; font-size: 12px; color: var(--ink-2); }
.subhead { font-size: 12px; font-weight: 650; color: var(--ink-2); margin: 12px 0 4px; }

/* ===== Badges: A circle, B rounded square ===== */
.badge {
  width: 32px; height: 32px; display: grid; place-items: center; font-weight: 750; font-size: 14px;
  background: var(--accent-soft); color: var(--accent-ink); flex: none; border-radius: 50%;
}
.badge.b { border-radius: 8px; }
.badge.sm { width: 22px; height: 22px; font-size: 11px; }
.badge.sm.b { border-radius: 6px; }
.badge.hh { border-radius: 8px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }

/* ===== Heatmap (an HTML table) ===== */
.heat-wrap { overflow-x: auto; }
table.heat { width: 100%; border-collapse: separate; border-spacing: 3px; font-variant-numeric: tabular-nums; table-layout: fixed; }
/* The caption is the one-line "what a cell means", shown above the grid. */
table.heat caption { caption-side: top; text-align: left; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); padding: 0 3px 8px; }
table.heat th { font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 2px; line-height: 1.15; }
table.heat th .u { display: block; font-size: 9.5px; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
table.heat thead th.ax-row { width: 64px; text-align: left; vertical-align: bottom; font-size: 10px; font-weight: 700; color: var(--ink); padding: 0 2px 4px 0; }
table.heat thead th.ax-col { font-size: 11px; font-weight: 700; color: var(--ink); text-align: center; padding: 0 0 3px; border-bottom: 1px solid var(--base); }
table.heat tbody th { text-align: left; }
@media (min-width: 560px) { table.heat thead th.ax-row { width: 96px; font-size: 11px; } }
table.heat th.cur-h { color: var(--ink); }
table.heat th.cur-h .u { color: var(--ink-2); font-weight: 700; }
table.heat td {
  height: 38px; border-radius: 6px; text-align: center; font-size: 13px; font-weight: 650; padding: 2px 1px; cursor: default; line-height: 1.1;
}
table.heat td .n { display: block; }
table.heat td .you { display: block; font-size: 8.5px; font-weight: 700; line-height: 1.05; margin-top: 1px; }
table.heat td:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
td.h1 { background: var(--h1); color: var(--h-ink-lo); } td.h2 { background: var(--h2); color: var(--h-ink-lo); }
td.h3 { background: var(--h3); color: var(--h3-ink); } td.h4 { background: var(--h4); color: var(--h-ink-hi); }
td.h5 { background: var(--h5); color: var(--h-ink-hi); }
td.none {
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--grid) 4px 6px);
  color: var(--muted); font-size: 11px; font-weight: 500; border: 1px dashed var(--base);
}
td.none .you { color: var(--ink); }
td.cur { outline: 2.5px solid var(--ink); outline-offset: 1px; }
/* Legend: the colour scale, the hatching and the outline, each in words. */
.scale { display: grid; gap: 7px; font-size: 12px; color: var(--ink-2); }
.ramp-wrap { display: grid; grid-template-columns: auto; gap: 3px; justify-items: start; }
.scale-t { font-weight: 650; color: var(--ink-2); }
.ramp { display: flex; gap: 2px; } .ramp > span { display: flex; flex-direction: column; align-items: center; font-size: 10px; line-height: 1.2; min-width: 34px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ramp i { width: 100%; height: 10px; border-radius: 2px; display: block; margin-bottom: 2px; }
.ramp-ends { display: flex; justify-content: space-between; width: 178px; font-size: 10px; color: var(--muted); }
.heat-all { font-size: 13px; color: var(--ink-2); margin: 0 0 6px; }
.ramp .h1 { background: var(--h1); } .ramp .h2 { background: var(--h2); } .ramp .h3 { background: var(--h3); }
.ramp .h4 { background: var(--h4); } .ramp .h5 { background: var(--h5); }
.key-row { display: flex; align-items: flex-start; gap: 7px; margin: 0; line-height: 1.35; }
.key-row i { flex: none; width: 20px; height: 12px; border-radius: 2px; margin-top: 2px; }
.none-sw { border: 1px dashed var(--base); background: repeating-linear-gradient(135deg, var(--surface-2) 0 3px, var(--grid) 3px 5px); }
.cur-sw { outline: 2.5px solid var(--ink); outline-offset: -2px; background: var(--surface); }

/* ===== Inputs ===== */
/* Fields: no rules between them, about 14px apart. */
.field { padding: 7px 0; }
.field-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field-top .lab { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.field-top label { font-size: 14px; font-weight: 600; min-width: 0; }
.box {
  display: flex; align-items: center; width: 8.6rem; min-height: 44px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); padding: 0 10px; flex: none;
}
/* (i): shows the field's hint. Small mark, 44px tap area. */
.info {
  position: relative; flex: none; width: 18px; height: 18px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--base); background: none; color: var(--muted);
  font: italic 700 11px/16px var(--serif); text-align: center;
}
.info::before { content: ""; position: absolute; inset: -13px; }
.info[aria-expanded="true"] { background: var(--ink-2); border-color: var(--ink-2); color: var(--bg); }
.info:hover { color: var(--ink); border-color: var(--ink-2); }
.box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.box input {
  flex: 1; min-width: 0; width: 100%; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px;
  font-weight: 650; padding: 8px 0; text-align: right; outline: none; font-variant-numeric: tabular-nums;
  align-self: stretch; /* the whole 44px box is the tap target */
}
.unit { color: var(--muted); font-size: 12px; padding-left: 4px; white-space: nowrap; }
.unit.pre { padding: 0 2px 0 0; }
.field.invalid .box { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.note { font-size: 12px; font-weight: 600; text-align: right; margin-top: 4px; color: var(--warn); }
.note:empty { display: none; }
.field.invalid .note { color: var(--bad); }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
/* A field's hint shows while its number box has focus, or after a tap on (i); a few always show.
   The slider's range labels show only while the box or slider has focus (the limit tick stays). */
.field .hint, .field .range { display: none; }
.field.show-hint .hint, .field .hint.keep { display: block; }
.field.show-hint .range { display: flex; }
@supports selector(:has(a)) {
  .field:has(.box input:focus) .hint { display: block; }
  .field:has(.box input:focus) .range, .field:not(.sliding):has(input[type="range"]:focus-visible) .range { display: flex; }
}
@supports not selector(:has(a)) {
  .field:focus-within .hint { display: block; }
  .field:focus-within .range { display: flex; }
}
.hint:empty, .field .hint:empty { display: none; }
.slider { position: relative; }
.slider .limit-tick {
  position: absolute; z-index: 0; right: 10px; top: 50%; width: 2px; height: 14px; margin-top: -7px; background: var(--ink);
  border-radius: 1px; pointer-events: none;
}
input[type="range"] {
  --thumb: 22px; /* read by ui.js guardSlider to find the thumb */
  position: relative; z-index: 1; /* the thumb covers the limit tick when it sits on the limit */
  width: 100%; margin: 0; height: 32px; background: none; -webkit-appearance: none; appearance: none; touch-action: pan-y; display: block;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fill, 50%), var(--line) var(--fill, 50%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; box-sizing: border-box; width: var(--thumb); height: var(--thumb); margin-top: calc((4px - var(--thumb)) / 2); border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: box-shadow .12s ease, background-color .12s ease, transform .12s ease;
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: var(--thumb); height: var(--thumb); border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); transition: box-shadow .12s ease, background-color .12s ease, transform .12s ease; }
/* Touch screens (<html class="touch-guard">, set by app.js on any coarse pointer): the
   wrapper takes the touches (ui.js guardSlider), so a tap on the track or a vertical swipe
   never moves a value. 44px-tall rows, a larger thumb (48px grab width in JS), slim track.
   The wrapper overhangs the input by 8px each side (into the page/card padding), so the grab
   area stays 45px+ with the thumb at either end. While dragging the thumb shows a halo and the
   number box is tinted (no focus ring: focus is on the slider). */
.touch-guard .field { padding: 10px 0; }
.touch-guard .slider { margin: 0 -8px; padding: 0 8px; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.touch-guard input[type="range"] { --thumb: 26px; height: 44px; pointer-events: none; }
.touch-guard .slider .limit-tick { right: 20px; } /* under the larger thumb's center at the end (8px overhang + 12px) */
.touch-guard .slider.dragging input[type="range"]::-webkit-slider-thumb { background: var(--accent-soft); box-shadow: 0 0 0 10px var(--focus); transform: scale(1.15); }
.touch-guard .slider.dragging input[type="range"]::-moz-range-thumb { background: var(--accent-soft); box-shadow: 0 0 0 10px var(--focus); transform: scale(1.15); }
.field.sliding:not(.invalid) .box { border-color: var(--accent); background: var(--accent-wash); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  input[type="range"]::-webkit-slider-thumb { transition: none; }
  input[type="range"]::-moz-range-thumb { transition: none; }
}
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.range { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: -4px; font-variant-numeric: tabular-nums; }
.range .lim { color: var(--ink-2); font-weight: 600; }

.toggle-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.inline-toggle { padding-top: 0; }
.tlabel { font-size: 14px; font-weight: 600; }
.switch {
  width: 44px; height: 26px; border-radius: 13px; background: var(--base); position: relative; flex: none; cursor: pointer;
  border: 0; padding: 0; min-height: 0;
}
.switch::before { content: ""; position: absolute; inset: -9px -2px; } /* 44px tall hit area */
.switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .12s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] i { left: 21px; }
@media (prefers-reduced-motion: reduce) { .switch i { transition: none; } }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; margin-bottom: 4px; }
.seg button {
  font: inherit; font-size: 13px; font-weight: 650; min-height: 44px; border: 0; border-radius: 9px; background: none;
  color: var(--ink-2); cursor: pointer; line-height: 1.2;
}
.seg button small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 1px var(--line); }
.partner { margin-top: 14px; min-width: 0; }
.p-head { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.p-head h3 { font: 400 18px/1.2 var(--serif); }
.icon-btn.quiet { margin-right: -10px; }
.partner-sub { color: var(--muted); }
.partner-foot { font-size: 13px; color: var(--ink-2); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.partner-foot b { font-weight: 650; color: var(--ink); }
.coast-sub { padding-left: 12px; border-left: 2px solid var(--accent-soft); margin-bottom: 4px; }
.hsa-note { margin-bottom: 8px; }

/* ===== Buying a home (SPEC 11): one more row after the HSA, off by default ===== */
.group.house-g { margin-top: 0; }
.house-g > details.dis { border-bottom: 1px solid var(--line); }
.house-verdict { font: 400 16px/1.4 var(--serif); color: var(--ink); margin: 2px 0 8px; }
.house-verdict.muted { font: 400 14px/1.4 var(--sans); color: var(--ink-2); }
.house-verdict b { font-weight: 700; }
.house-afford { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--ink-2); margin: 0 0 8px; }
/* Renting | Buying: a plain list with hairlines; status as icon + word. */
table.hcmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; margin: 4px 0 6px; }
table.hcmp thead th, table.hcmp thead td { font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; padding: 0 6px 4px 0; }
table.hcmp tbody th { width: 38%; font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; padding: 8px 8px 8px 0; line-height: 1.3; }
table.hcmp td { font-size: 15px; font-weight: 700; padding: 8px 6px 8px 0; vertical-align: top; overflow-wrap: anywhere; }
table.hcmp tbody th, table.hcmp tbody td { border-top: 1px solid var(--line); vertical-align: top; }
table.hcmp td small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.3; }
table.hcmp .delta { font-size: 12px; }
.delta.same { color: var(--ink-2); }
table.hcmp tbody th small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--muted); }
.house-below { margin: 0 0 6px; line-height: 1.4; }
.field.na input, .field.na .lab, .field.na .unit { opacity: .55; }
.narrow-only { display: none; }
@media (max-width: 480px) {
  #path-table table.with-buy th:nth-child(5), #path-table table.with-buy td:nth-child(5) { display: none; }
  #path-table table.with-buy th, #path-table table.with-buy td { padding-left: 2px; padding-right: 2px; }
  .narrow-only { display: inline; }
}
.house-notes p { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin-top: 6px; }
.house-in-t { margin: 16px 0 0; }
.house-seg-note { margin: 2px 0 6px; line-height: 1.4; }
.house-be-p { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.house-be-p b { color: var(--ink); }

/* ===== Collapsed rows (native <details>) =====
   One line: title left, live value right, chevron. Fixed height, so a value changing while a
   slider moves never changes the row. */
details.dis { border-top: 1px solid var(--line); min-width: 0; }
details.dis > summary { list-style: none; cursor: pointer; }
details.dis > summary::-webkit-details-marker { display: none; }
.sum { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0; border-radius: 6px; }
.sum::after {
  content: ""; flex: none; width: 7px; height: 7px; border-right: 1.75px solid var(--muted); border-bottom: 1.75px solid var(--muted);
  transform: rotate(45deg); margin: -4px 4px 0 2px;
}
details[open] > .sum::after { transform: rotate(-135deg); margin-top: 3px; }
.sum-t { flex: 0 0 auto; max-width: 62%; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sum-v {
  flex: 1 1 0; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
/* Long values (a partner's accounts): title above, value below, still a fixed height. */
.sum.stack { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t c" "v c"; align-content: center; gap: 1px 10px; height: 52px; }
.sum.stack::after { grid-area: c; grid-row: 1 / 3; align-self: center; }
.sum.stack .sum-t { grid-area: t; max-width: none; font-size: 13px; }
.sum.stack .sum-v { grid-area: v; text-align: left; }
/* The off-track line under the headline: up to two lines in the same 44px row. */
.sum-n { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sum:hover .sum-t, .sum:hover .sum-n { color: var(--accent-ink); }
.dis-body { padding: 2px 0 14px; min-width: 0; }
.dis-body > .field.first { padding-top: 2px; }
details.sub > .sum .sum-t { font-size: 13px; }
@keyframes rowflash { from { background: var(--accent-soft); } to { background: transparent; } }
.sum.flash { animation: rowflash 1.5s ease-out; }
@media (prefers-reduced-motion: reduce) { .sum.flash { animation: none; background: var(--accent-wash); } }

/* Go deeper: one list of borderless rows separated by hairlines. */
.deep-list > :last-child { border-bottom: 1px solid var(--line); }
.deep-bridge { border-top: 1px solid var(--line); }
.deep-bridge > details.dis { border-top: 0; }
/* The bridge status in the answer card, shown only when retiring before 59½. */
.br-hero { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.br-hero .linkish { min-height: 44px; margin: -11px 0; display: inline-flex; align-items: center; }
.br-peek { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 12px 0 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ===== Suggestions: "Ways to reach your goal" (SPEC 12) =====
   A collapsed row under the answer card; inside, the goal, a progress bar and ranked cards.
   Cards are flat (no shadow); the first has a hairline accent on its left edge. */
.sug-d { margin-top: 10px; border-bottom: 1px solid var(--line); }
.sug-body { padding-top: 4px; }
.sug-body > .mini-title { margin: 2px 0 6px; }
.seg.seg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.seg3 button { padding-left: 4px; padding-right: 4px; }
.goal-note { margin: 2px 0 6px; }
.goal-note:empty { display: none; }
#goal-fields > .field.first { padding-top: 0; }
.goal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.sug-scn { margin-top: 8px; color: var(--ink-2); }
.sug-status { margin-top: 10px; font-size: 14px; color: var(--ink); line-height: 1.4; }
.sug-status:focus { outline: none; }
.meter { position: relative; height: 8px; margin: 8px 0 0; border-radius: 999px; background: var(--accent-soft); }
.meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); transition: width .25s ease-out; }
.meter.met .meter-fill { background: var(--good); }
.meter-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.sug-prog { margin-top: 4px; font-variant-numeric: tabular-nums; }
.sug-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.sug-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.sug-card.lead { border-left-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.sug-kicker { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sug-card.lead .sug-kicker { color: var(--accent-ink); }
.sug-title { margin: 2px 0 0; font: 650 16px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.sug-detail { margin-top: 2px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sug-dl { margin: 8px 0 0; }
.sug-dl dt { font-size: 11px; font-weight: 650; color: var(--muted); margin-top: 6px; }
.sug-dl dd { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); min-width: 0; font-variant-numeric: tabular-nums; }
.sug-split { margin: 0; padding-left: 16px; }
.sug-split li { margin: 1px 0; overflow-wrap: anywhere; }
.sug-effect { display: inline-flex; align-items: flex-start; gap: 4px; color: var(--ink); font-weight: 600; }
.sug-effect svg { width: 12px; height: 12px; flex: none; margin-top: 3px; fill: none; stroke: var(--good); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sug-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.chip.neutral { color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); padding-left: 9px; }
.size-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 650; color: var(--ink); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--base); }
.sug-card > .fine { margin-top: 6px; }
.sug-more { margin-top: 2px; }
.sug-more > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent-ink); min-height: 32px; display: flex; align-items: center; list-style: none; }
.sug-more > summary::-webkit-details-marker { display: none; }
.sug-more > summary::after { content: "+"; margin-left: 6px; font-weight: 700; }
.sug-more[open] > summary::after { content: "−"; }
.sug-card > .sug-more > .fine { margin: 0 0 4px; }
.sug-apply { margin-top: 10px; width: 100%; }
.sug-empty { font-size: 13px; color: var(--ink-2); padding: 4px 0; }
.sug-rej, .sug-sens { margin-top: 10px; line-height: 1.45; }
.sug-cushion { margin: 12px 0 0; }
.sug-dis { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .meter-fill { transition: none; } }

/* ===== Bridge ===== */
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.mini .kpi dd:not(.kpi-note) { font-size: 17px; }
.lanes { display: grid; gap: 4px; margin: 12px 0 6px; font-size: 11px; color: var(--ink-2); }
.lane { display: grid; grid-template-columns: 46px 1fr; align-items: center; }
.lane .bar { position: relative; height: 18px; }
.lane .bar span {
  position: absolute; top: 0; height: 18px; border-radius: 4px; font-size: 10px; font-weight: 650; display: flex; align-items: center;
  padding: 0 6px; white-space: nowrap; overflow: hidden; background: var(--surface-2); color: var(--ink);
}
.lane .lock { border: 1.5px solid var(--c1); }
.lane .open { border: 1.5px solid var(--ladder); }
.lane .open.wait { border: 1.5px dashed var(--base); color: var(--muted); }
.lane .ages { position: relative; height: 14px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lane .ages span { position: absolute; top: 0; }
.callout { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-top: 10px; }
.callout svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.callout.bad { background: var(--bad-wash); } .callout.bad svg { color: var(--bad); }
.callout.good { background: var(--good-wash); } .callout.good svg { color: var(--good); }
.callout ul { margin: 6px 0 0; padding-left: 16px; }
.callout li { margin: 2px 0; }
details.more { margin-top: 10px; border-top: 1px solid var(--line); }
details.more summary { cursor: pointer; font-size: 13px; font-weight: 650; padding: 12px 0 6px; min-height: 44px; display: flex; align-items: center; }
.caveats { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.caveats li { margin-bottom: 6px; }
.teaser p { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.teaser .actions { margin-top: 10px; }

/* ===== Explainers ===== */
.explain details:first-child { border-top: 0; }
.explain details[open] > .sum { margin-bottom: 4px; }
.explain details p, .explain details ul { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.explain .kicker { font-size: 12px; font-weight: 650; color: var(--muted); margin-bottom: 4px; }
.explain .dek { font: italic 15px/1.45 var(--serif); color: var(--ink); }
.sources { padding-left: 18px; }
.sources li { margin-bottom: 6px; }

/* ===== Toast, bottom bar, footer ===== */
.toast {
  position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom));
  width: calc(100% - 32px); max-width: 420px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 10px 12px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  overflow-wrap: anywhere;
}
.toast .grow { flex: 1 1 180px; }
.toast button { font: inherit; font-weight: 700; color: var(--bg); background: none; border: 0; text-decoration: underline; padding: 10px 6px; margin: -10px 0; cursor: pointer; min-height: 44px; }
.toast .copy-box { flex: 1 1 100%; min-height: 40px; padding: 6px 8px; font: inherit; font-size: 12px; color: var(--ink); background: var(--surface); border: 0; border-radius: 8px; }
.peek {
  position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom));
  width: calc(100% - 32px); max-width: 420px; display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--ink); color: var(--bg); border: 0; border-radius: 14px; padding: 8px 12px; min-height: 48px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font: inherit; font-size: 13px; cursor: pointer;
}
.peek .mring { width: 28px; height: 28px; flex: none; }
.peek .mring circle { fill: none; stroke-width: 4; }
.peek .mr-track { stroke: color-mix(in srgb, var(--bg) 40%, transparent); }
.peek .mr-fill { stroke: var(--accent-soft); }
.peek .mr-num { font: 700 8px var(--sans); fill: var(--bg); }
.peek .pk-delta { font-weight: 700; white-space: nowrap; }
.peek .txt { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.peek .txt b { font-size: 14px; }
.peek .go { opacity: .75; font-size: 12px; white-space: nowrap; }
.foot { text-align: center; margin-top: 18px; }
.foot a { display: inline-block; padding: 13px 8px; margin: -13px 0; }

/* ===== Wide screens: inputs on the left, results on the right ===== */
@media (min-width: 860px) {
  body { padding-top: 20px; padding-bottom: 32px; }
  .app { max-width: 1040px; }
  .layout { display: grid; grid-template-columns: minmax(340px, 400px) 1fr; grid-template-areas: "inputs top" "inputs more"; gap: 0 18px; align-items: start; }
  .col-top { grid-area: top; min-width: 0; }
  .col-more { grid-area: more; min-width: 0; }
  .col-inputs { grid-area: inputs; min-width: 0; }
  .col-inputs > .group:first-child { margin-top: 10px; }
  .deeper-h { margin-top: 28px; }
  .chart { height: 320px; }
  .peek { display: none !important; }
  .hero-num b { font-size: 56px; }
  .sug-dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 12px; }
  .sug-dl dt, .sug-dl dd { margin: 0; }
  .sug-dl dt { padding-top: 1px; }
  .sug-apply { width: auto; }
}

/* ===== Privacy page ===== */
article { max-width: 560px; margin: 0 auto; }
article h1 { margin: 12px 0 4px; }
article h2 { margin: 22px 0 6px; }
article p { margin: 0 0 10px; color: var(--ink-2); }