/* Pension planner v2. Tokens first; one colour per meaning. */
:root {
  /* Native controls (the date picker, number spinners, scrollbars) are painted
     by the browser from color-scheme, not from our tokens. It has to name the
     one theme actually showing: left at `light dark` it follows the operating
     system, so choosing the light theme on a dark desktop gave a light page
     with black form furniture. Each theme block below sets it alongside its
     colours. */
  color-scheme: light;
  --page: #F6F7F5;
  --surface: #FFFFFF;
  --surface-2: #EEF1EE;
  --line: #D8DEDA;
  --line-strong: #AEB8B3;
  --ink: #15201E;
  --ink-2: #4A5753;
  --muted: #66726E;
  --plan: #0E6E6A;
  /* Chart series, checked together for colour-blind separation (see minis.js). */
  --viz-1: #00968a; --viz-2: #eb6834; --viz-3: #4a3aa7; --viz-4: #eda100;
  --plan-soft: #D6ECEA;
  --plan-ink: #FFFFFF;
  --rule: #B8862B;
  --rule-soft: #F5E9D0;
  --rule-text: #8A6218;
  --state: #6B3A72;
  --state-soft: #EADDEC;
  --danger: #A83A3A;
  --danger-soft: #F4DADA;
  --focus: #1D4ED8;
  /* A finished section: a green tint, its edge, its text, the tick and the button. */
  --done-bg: #E7F3EC;
  --done-line: #A9D1B8;
  --done-ink: #1F5C3A;
  --done-mark: #2F7D4F;
  --done-strong: #2F7D4F;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --radius: 6px;
  --rail: 300px;
  --chat: 380px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0F1615; --surface: #17201E; --surface-2: #1F2A27; --line: #2A3633; --line-strong: #3C4A46;
    --ink: #E9EDEB; --ink-2: #B7C2BE; --muted: #7F8B87;
    --plan: #3FB3AC; --plan-soft: #16302E; --plan-ink: #06201E;
    --viz-1: #12a79d; --viz-2: #d95926; --viz-3: #9085e9; --viz-4: #c98500;
    --rule: #D9A84A; --rule-soft: #33291A; --rule-text: #D9A84A; --state: #B98BC0; --state-soft: #2E2231;
    --danger: #E07070; --danger-soft: #3A1F1F; --focus: #7AA2FF;
    --done-bg: #15291F; --done-line: #2F5B41; --done-ink: #A6DCBA; --done-mark: #6CC592; --done-strong: #2F7D4F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0F1615; --surface: #17201E; --surface-2: #1F2A27; --line: #2A3633; --line-strong: #3C4A46;
  --ink: #E9EDEB; --ink-2: #B7C2BE; --muted: #7F8B87;
  --plan: #3FB3AC; --plan-soft: #16302E; --plan-ink: #06201E;
  --viz-1: #12a79d; --viz-2: #d95926; --viz-3: #9085e9; --viz-4: #c98500;
  --rule: #D9A84A; --rule-soft: #33291A; --rule-text: #D9A84A; --state: #B98BC0; --state-soft: #2E2231;
  --danger: #E07070; --danger-soft: #3A1F1F; --focus: #7AA2FF;
  --done-bg: #15291F; --done-line: #2F5B41; --done-ink: #A6DCBA; --done-mark: #6CC592; --done-strong: #2F7D4F;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--body); font-size: 15px; line-height: 1.5; background: var(--page); color: var(--ink); font-variant-numeric: tabular-nums; }
h1, h2, h3, .tabs button, .hero-label { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 22px; line-height: 1.2; margin-bottom: 12px; }
h3 { font-size: 17px; margin: 20px 0 8px; }
p { max-width: 70ch; }
a { color: var(--plan); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px; }
.skip:focus { left: 8px; z-index: 50; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Header */
.top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 20; }
.wordmark { font-size: 20px; }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.tabs button { font-size: 15px; padding: 8px 12px; border: 0; background: none; color: var(--ink-2); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--plan); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.sync { font-size: 13px; color: var(--muted); min-width: 60px; text-align: right; }
.sync.error { color: var(--danger); }

/* Buttons and controls */
.btn { font: inherit; font-size: 14px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--plan); color: var(--plan-ink); border-color: var(--plan); }
.btn.small { font-size: 13px; padding: 4px 8px; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.icon { font: inherit; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; }
input[type="number"], input[type="text"], input[type="date"], select { font: inherit; width: 100%; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
input[type="number"] { text-align: right; }
input:disabled { opacity: 0.5; }

/* Frame */
.frame { display: grid; grid-template-columns: var(--rail) 1fr; min-height: calc(100vh - var(--top-h, 57px)); }
.rail { border-right: 1px solid var(--line); background: var(--surface); padding: 16px; overflow-y: auto; position: sticky; top: var(--top-h, 57px); height: calc(100vh - var(--top-h, 57px)); }
.rail-head { display: none; }
.rail-foot { font-size: 12px; color: var(--muted); margin-top: 16px; }
.group { border-top: 1px solid var(--line); }
.group summary { font-family: var(--display); font-weight: 600; font-size: 15px; padding: 10px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.group summary::-webkit-details-marker { display: none; }
.group summary::after { content: '+'; color: var(--muted); }
/* A section filled in, or with something still to give. */
.group-status { margin-left: auto; flex-shrink: 0; white-space: nowrap; font-family: var(--body); font-size: 12px; font-weight: 500; }
#profileForm .group.status-complete > summary, #profileForm .group.status-missing > summary { padding: 9px 10px; margin: 4px 0; border-radius: 8px; }
#profileForm .group.status-complete > summary { background: var(--done-bg); color: var(--done-ink); }
#profileForm .group.status-missing > summary { background: var(--rule-soft); color: var(--rule-text); }
.group[open] summary::after { content: '–'; }
.fields { display: grid; gap: 10px; padding-bottom: 14px; }
.field label, .field .label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 3px; }
.field .check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink); }
.field .check input { width: auto; }
.inline { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; }
.inline .year { grid-column: 1; font-size: 13px; color: var(--ink-2); }
.inline:has(.year) { grid-template-columns: 64px 1fr auto; }
.unit { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
.stream { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.stream .btn { justify-self: start; }
.stream .check { font-size: 13px; }
.guess { display: inline-block; font-size: 11px; padding: 0 5px; border-radius: 3px; background: var(--rule-soft); color: var(--rule-text); margin-left: 4px; vertical-align: middle; }
.field-change .inline { margin-top: 4px; }

.main { padding: 20px 24px 48px; min-width: 0; }
.view { margin-top: 24px; }

/* Hero: lifeline */
.hero { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.hero-figures { display: grid; align-content: start; gap: 18px; }
.hero-label { font-size: 15px; color: var(--ink-2); font-weight: 500; }
.hero-value { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
.hero-sub { font-size: 13px; color: var(--muted); }
.lifeline-wrap { min-width: 0; }
.lifeline { width: 100%; height: 220px; display: block; touch-action: none; }
.lifeline .area-acc { fill: var(--plan); fill-opacity: 0.85; }
.lifeline .area-draw { fill: var(--plan); fill-opacity: 0.35; }
.chart-key { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--ink-2); }
.chart-key li { display: flex; align-items: center; gap: 6px; }
.chart-key .swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--plan); }
.chart-key .swatch.acc { opacity: 0.85; }
.chart-key .swatch.draw { opacity: 0.35; }
body.dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.lifeline .axis { stroke: var(--line-strong); stroke-width: 1; }
.lifeline .tick { font: 12px var(--body); fill: var(--muted); }
.lifeline .event { stroke-width: 1.5; stroke-dasharray: 3 3; }
.lifeline .event.rule { stroke: var(--rule); }
.lifeline .event.state { stroke: var(--state); }
.lifeline .event.rule { stroke-dasharray: 6 3; }
/* The NI cap in its own colour and dash, so it isn't taken for the allowance charge. */
.lifeline .event.ni { stroke: var(--viz-3); stroke-dasharray: 1.5 3; stroke-width: 2; }
.lifeline .event-label.ni { fill: var(--viz-3); }
.lifeline .grid { stroke: var(--line); stroke-width: 1; }
.lifeline .event-label { font: 12px var(--display); font-weight: 600; }
.lifeline .event-label.rule { fill: var(--rule-text); }
.lifeline .event-label.state { fill: var(--state); }
.lifeline .handle { fill: var(--surface); stroke: var(--ink); stroke-width: 2; cursor: ew-resize; }
.lifeline .handle-label { font: 600 13px var(--display); fill: var(--ink); }
.lifeline .retire:focus-visible circle { outline: none; stroke: var(--focus); stroke-width: 3; }

/* Notices */
.notices { display: grid; gap: 8px; margin-top: 16px; }
.notice.runout { border-left-width: 6px; font-size: 15px; }
.notice.runout.late { border-left-color: var(--rule); background: var(--rule-soft); color: var(--ink); }
.notice { padding: 10px 12px; border-left: 3px solid var(--rule); background: var(--rule-soft); border-radius: 0 var(--radius) var(--radius) 0; font-size: 14px; }
.notice.danger { border-left-color: var(--danger); background: var(--danger-soft); }

/* Tables and tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tile { border-top: 2px solid var(--line-strong); padding-top: 8px; }
.tile.plan { border-top-color: var(--plan); }
.tile.rule { border-top-color: var(--rule); }
.tile.state { border-top-color: var(--state); }
.tile.danger { border-top-color: var(--danger); }
.tile .k { font-size: 13px; color: var(--ink-2); }
.tile .v { font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.15; }
.tile .s { font-size: 12px; color: var(--muted); }
.tile > .btn { margin-top: 6px; }
.table-scroll { overflow-x: auto; }
table.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.ledger th, .ledger td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ledger th:first-child, .ledger td:first-child { text-align: left; }
.ledger thead th { font-weight: 500; color: var(--ink-2); border-bottom-color: var(--line-strong); }
.ledger tr.total td { font-weight: 600; border-top: 1px solid var(--line-strong); }
.ledger tr.pot td { color: var(--plan); }
.ledger tr.muted td { color: var(--muted); }
.ledger tr.now td { background: var(--surface-2); }
.diff-pos { color: var(--plan); }
.diff-neg { color: var(--danger); }
.chart-block { margin-top: 24px; }
.chart-holder { height: 300px; position: relative; }
.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.inline-label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); }
.inline-label select { width: auto; }
.lede { max-width: 62ch; color: var(--ink-2); }
.advice { max-width: 68ch; padding-left: 20px; }
.advice li { margin-bottom: 10px; }
/* Documents: the suggestions, grouped by how much they help. */
.doc-progress { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 8px 0 4px; font-size: 14px; color: var(--ink-2); }
.doc-progress .bar-track { flex: 0 0 160px; }
.doc-group { margin: 18px 0 6px; font-size: 15px; }
.doc-group .hint { font-family: var(--body); font-weight: 400; margin-left: 6px; }
.doc-suggest { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.doc-suggest li { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.doc-suggest li .hint { margin: 0 0 0 26px; }
.doc-suggest li .btn { align-self: flex-start; margin-left: 26px; }
.doc-suggest li.done { background: var(--done-bg); border-color: var(--done-line); }
.doc-suggest li.done strong { color: var(--done-ink); }
.doc-suggest li.done .hint { display: none; }
/* Documents: the library. A card per file, drop files anywhere on it. */
.doc-library { border: 2px dashed transparent; border-radius: 14px; padding: 4px; margin: 12px 0; }
.doc-library.dragging { border-color: var(--plan); background: var(--plan-soft); }
.doc-library.empty-drop { border-color: var(--line-strong); padding: 24px; text-align: center; background: var(--surface); }
.doc-library.empty-drop p { margin: 0 auto; }
.doc-lib-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 10px; }
.doc-lib-head p { margin: 0; }
.doc-lib-head .who-switch { flex-wrap: wrap; }
.doc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.doc-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 10px; }
.doc-card.used { border-left-color: var(--plan); }
.doc-card.failed { border-left-color: var(--danger); }
.doc-card p { margin: 0; }
.doc-card-head { display: flex; gap: 12px; align-items: flex-start; }
.doc-icon { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--plan-soft); color: var(--plan); }
.doc-card-title { display: grid; gap: 2px; min-width: 0; }
.doc-name { font-weight: 600; overflow-wrap: anywhere; text-align: left; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-2); }
.doc-chip.ok { border-color: var(--done-line); background: var(--done-bg); color: var(--done-ink); }
.doc-chip.warn { border-color: var(--rule); background: var(--rule-soft); color: var(--rule-text); }
.doc-chip.bad { border-color: var(--danger); color: var(--danger); background: var(--surface); }
.doc-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.doc-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
/* Documents: payslip figures typed in by hand. */
.payslip-entry { margin: 20px 0; }
.payslip-entry details { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; max-width: 900px; }
.payslip-entry summary { cursor: pointer; font-weight: 600; }
.payslip-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; margin-top: 12px; }
.payslip-form label:not(.check) { display: grid; gap: 4px; font-size: 14px; font-weight: 500; }
.payslip-form .hint { font-weight: 400; margin: 0; }
.payslip-form .check, .payslip-form p { grid-column: 1 / -1; margin: 0; }
.payslip-year h4 { margin: 16px 0 6px; }
/* Documents: your spending. */
.spend { margin: 24px 0; }
.spend h4 { margin: 0 0 8px; font-size: 16px; }
.spend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 12px 0; }
.spend-bars { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.spend-bars li { display: grid; grid-template-columns: minmax(120px, 11em) minmax(0, 1fr) 5.5em; align-items: center; gap: 10px; font-size: 14px; }
.spend-bar { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.spend-bar span { display: block; height: 100%; border-radius: 5px; }
.spend-value { text-align: right; font-variant-numeric: tabular-nums; }
.spend-target p { margin: 6px 0; }
.spend-cols { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 8px; }
.spend-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; min-width: 0; }
.spend-area { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.spend-stack { display: flex; flex-direction: column; gap: 2px; border-radius: 4px; overflow: hidden; }
.spend-stack span { display: block; min-height: 2px; }
.spend-col-label { font-size: 12px; text-align: center; margin-top: 4px; color: var(--ink-2); }
.spend-months .spend-cols { height: 170px; }
.spend-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.spend-changes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline; }
.spend-changes li .hint { grid-column: 1 / -1; margin: 0; font-size: 12px; }
.spend-changes .up { color: var(--done-ink); text-align: right; }
.spend-changes .down { color: var(--danger); text-align: right; }
.spend-target .check, .spend-target .inline-label { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.spend-target-value strong { font-family: var(--display); font-size: 22px; }
.spend-review { margin: 12px 0; }
.spend-review select { max-width: 220px; }
.spend-manual { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 12px 0; max-width: 900px; }
.spend-manual summary { cursor: pointer; font-weight: 600; }
.spend-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; margin-top: 12px; }
.spend-inputs label { display: grid; gap: 4px; font-size: 14px; font-weight: 500; }
.spend-inputs .hint { font-weight: 400; margin: 0; }
/* Scenarios: a card per plan, then the figures side by side. */
.scn-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.scn-save { margin: 8px 0 4px; }
.scn-save input { max-width: 320px; }
.scn-divorce { margin: 4px 0; }
.scn-divorce summary { cursor: pointer; color: var(--ink-2); font-size: .9rem; }
.scn-divorce-form { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: flex-end; margin-top: 6px; }
.scn-divorce-form > .hint { flex-basis: 100%; margin: 0; }
.scn-divorce-form label { display: flex; flex-direction: column; font-size: .85rem; gap: 2px; }
.scn-divorce-form input { width: 7em; }
.scn-chart-pane[hidden] { display: none; }
.scn-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.scn-card.current { background: var(--surface-2); }
.scn-card p { margin: 0; }
.scn-head { display: flex; align-items: center; gap: 8px; }
.scn-head h3 { margin: 0; font-size: 17px; }
.scn-head .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; vertical-align: middle; }
.scn-badges, .scn-changes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.scn-line { font-weight: 500; }
.scn-actions { margin-top: auto !important; padding-top: 6px; }
.scn-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin: 8px 0 0; }
.scn-metric { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.scn-metric.same { background: var(--surface-2); }
.scn-metric h4 { margin: 0 0 8px; font-size: 14px; font-family: var(--body); font-weight: 600; color: var(--ink-2); }
.scn-metric ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.scn-metric li { display: grid; grid-template-columns: minmax(90px, 9em) minmax(0, 1fr) 4.8em 4.8em; align-items: center; gap: 8px; font-size: 13px; }
.scn-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scn-name .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.scn-track { height: 12px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.scn-track span { display: block; height: 100%; border-radius: 4px; }
.scn-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.scn-delta { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.scn-delta.up { color: var(--done-ink); }
.scn-delta.down { color: var(--danger); }
.scn-same { margin: 0; font-size: 14px; }
.chart-block h4 { font-family: var(--display); font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.partner-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; align-items: start; }
.partner-fields .group { border-top: 1px solid var(--line); }
.bar { height: 10px; background: var(--surface-2); border-radius: 3px; overflow: hidden; display: flex; }
.bar span { display: block; height: 100%; }
.bar .a { background: var(--plan); }
.bar .b { background: var(--rule); }
.legend { font-size: 13px; color: var(--ink-2); display: flex; gap: 14px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.empty { color: var(--muted); font-size: 14px; }
.callout { border: 1px solid var(--line); border-left: 3px solid var(--plan); padding: 10px 12px; border-radius: 0 var(--radius) var(--radius) 0; margin: 12px 0; font-size: 14px; }
.callout.rule { border-left-color: var(--rule); }

/* Chat */
.chat { position: fixed; right: 0; top: var(--top-h, 57px); bottom: 0; width: var(--chat); max-width: 100%; background: var(--surface); border-left: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr auto auto; z-index: 30; }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 600; }
.chat-head div { display: flex; gap: 6px; }
.chat-log { overflow-y: auto; padding: 12px 14px; display: grid; gap: 12px; align-content: start; }
.msg { font-size: 14px; }
.msg.user { background: var(--surface-2); padding: 8px 10px; border-radius: var(--radius); justify-self: end; max-width: 90%; }
.msg.assistant h2, .msg.assistant h3, .msg.assistant h4 { font-size: 15px; margin: 10px 0 4px; }
.msg.assistant ul, .msg.assistant ol { padding-left: 18px; margin: 4px 0; }
.msg.assistant p { margin: 4px 0; }
.msg.tool { font-size: 13px; color: var(--ink-2); border-left: 3px solid var(--plan); padding-left: 8px; }
.msg.error { color: var(--danger); }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; max-height: 38vh; overflow-y: auto; }
.chip { font: inherit; font-size: 13px; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line-strong); border-top-color: var(--plan); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* Scrim and drawer */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 25; }
body.chat-open .main { margin-right: var(--chat); }

@media (min-width: 901px) {
  #detailsBtn { display: none; }
}
@media (max-width: 1100px) {
  body.chat-open .main { margin-right: 0; }
}
/* Mid-size screens: the tabs get their own full-width row under the wordmark
   and buttons, rather than wrapping into a narrow middle column. */
@media (max-width: 1400px) and (min-width: 901px) {
  .top { grid-template-columns: 1fr auto; row-gap: 4px; }
  .tabs { grid-column: 1 / -1; order: 3; margin: 0 -8px; }
  .tabs button { font-size: 14px; padding: 6px 9px; }
}
@media (max-width: 900px) {
  /* clip, not hidden: nothing can slide the page sideways, not even focus. */
  html, body { overflow-x: clip; }
  input[type="number"], input[type="text"], input[type="date"], select { font-size: 16px; }
  /* The wordmark, then the buttons on a row of their own, then the tabs. */
  .top { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 10px 16px; }
  .wordmark { font-size: 18px; white-space: nowrap; }
  .top-actions { flex-wrap: wrap; gap: 6px; min-width: 0; }
  .top-actions .btn { padding: 6px 9px; font-size: 13px; }
  .sync { display: none; }
  .tabs { grid-column: 1 / -1; order: 3; margin: 0 -16px; padding: 0 16px 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .frame { grid-template-columns: 1fr; }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; width: min(92vw, 380px); height: 100vh; z-index: 30; transform: translateX(-100%); transition: transform 0.2s ease; }
  .rail.open { transform: none; }
  .rail-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-weight: 600; margin-bottom: 8px; }
  @media (prefers-reduced-motion: reduce) { .rail { transition: none; } }
  .main, .hero { min-width: 0; }
  .main { padding: 16px 16px 40px; }
  .hero { grid-template-columns: 1fr; padding: 16px; }
  .hero-value { font-size: 36px; }
  .chat { top: 0; width: 100%; }
}

/* Print: overview, payslip and retirement only */
@media print {
  :root {
    --page: #F6F7F5; --surface: #FFFFFF; --ink: #15201E; --ink-2: #4A5753; --muted: #66726E;
    --line: #D8DEDA; --plan: #0E6E6A; --rule: #B8862B; --rule-text: #8A6218; --state: #6B3A72;
  }
  .top, .rail, .chat, .scrim, .row-actions, .btn, .icon, .chat-chips { display: none !important; }
  .frame { display: block; }
  .main { padding: 0; }
  .view { display: block !important; page-break-inside: avoid; }
  #view-ladder, #view-allowance, #view-projection, #view-scenarios { display: none !important; }
  body { background: #fff; color: #000; }
}

.list-editor { display: grid; gap: .5rem; }
.list-row { display: grid; gap: .4rem; padding: .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.scheme-row label { display: grid; gap: .2rem; font-size: .9rem; }
.list-foot { display: flex; justify-content: space-between; align-items: center; }
.list-foot .total { font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* Dark on light, for legible contrast at this size in both themes. */
.tag { display: inline-block; padding: 0 .4rem; border-radius: 999px; font-size: .75rem; background: var(--rule-soft); color: var(--rule-text); border: 1px solid var(--rule); vertical-align: middle; }

.headline { font-size: 1.2rem; line-height: 1.5; max-width: 60ch; }
.checklist { list-style: none; padding: 0; display: grid; gap: .5rem; }
.checklist .hint { margin: .2rem 0 0 1.6rem; }

/* Review: one screen. The headline and tiles across the top, the findings
   listed on the left, the selected one (or the checklist, written review or
   check-up) in a panel on the right. On a laptop screen or larger the list and
   panel scroll inside themselves and the page doesn't; narrower, they stack. */
.rv-board { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 1600px; margin-inline: auto; }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.rv-title { flex: 1 1 360px; min-width: 0; }
.rv-title h2 { margin: 0; font-size: 30px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.rv-title .headline { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); max-width: 70ch; }
.rv-head .tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.rv-head .tile { flex: 1 1 160px; min-width: 150px; max-width: 230px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--line-strong); border-radius: 8px; padding: 8px 12px; }
.rv-head .tile.plan { border-top-color: var(--plan); }
.rv-head .tile.rule { border-top-color: var(--rule); }
.rv-head .tile .v { font-size: clamp(18px, 1.5vw, 24px); line-height: 1.15; overflow-wrap: anywhere; }
.rv-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.rv-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 8px; }
.rv-list > .hint, .rv-list > .empty { margin: 4px 10px; }
.rv-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rv-tier { font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); margin: 14px 10px 4px; }
.rv-tier:first-child { margin-top: 4px; }
.rv-tier.tier-act { color: var(--rule-text); }
.rv-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; font: inherit; font-size: 14px; line-height: 1.4; color: var(--ink); background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.rv-item:hover { background: var(--surface-2); }
.rv-item[aria-current="true"] { background: var(--plan-soft); box-shadow: inset 0 0 0 2px var(--plan); font-weight: 600; }
.rv-item.dismissed { color: var(--ink-2); }
.rv-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--line-strong); }
.rv-item.tier-act .rv-dot { background: var(--rule); }
.rv-item.tier-check .rv-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--plan); }
.rv-item.tier-fyi .rv-dot { background: var(--state); }
.rv-list-foot { margin: auto 0 0; padding: 10px 10px 2px; border-top: 1px solid var(--line); font-size: 14px; }
.rv-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border: 2px solid var(--plan); border-radius: 14px; overflow: hidden; }
.rv-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; background: var(--surface-2); }
/* Tabs that look like what they are: buttons you can press, the chosen one filled. */
.rv-tabs button { font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px; cursor: pointer; white-space: nowrap; }
.rv-tabs button:hover { border-color: var(--plan); background: var(--plan-soft); }
.rv-tabs button[aria-selected="true"] { background: var(--plan); border-color: var(--plan); color: var(--plan-ink); font-weight: 600; }
.rv-count { font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.rv-tabs button[aria-selected="true"] .rv-count { background: var(--surface); color: var(--ink); }
.rv-pane { flex: 1 1 auto; min-height: 0; padding: 18px 24px; }
.rv-pane[hidden] { display: none; }
.rv-pane > :first-child { margin-top: 0; }
.rv-pane .report { max-width: 70ch; }
.rv-kicker { margin: 0; }
.rv-badge { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-2); }
.rv-badge.tier-act { background: var(--rule-soft); border-color: var(--rule); color: var(--rule-text); }
.rv-badge.tier-check { background: var(--plan-soft); border-color: var(--plan); color: var(--ink); }
.rv-badge.tier-fyi { background: var(--state-soft); border-color: var(--state); color: var(--ink); }
.rv-finding h3 { font-size: 24px; font-weight: 650; line-height: 1.2; margin: 10px 0 8px; max-width: 40ch; }
.rv-finding h3:focus { outline: none; }
.rv-finding h3:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rv-finding h4 { font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 14px 0 2px; }
.rv-finding p { margin: 0; max-width: 70ch; line-height: 1.55; }
.rv-finding .row-actions { margin: 18px 0 0; }
.example-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--state-soft); border-left: 4px solid var(--state); font-size: 14px; }
.example-bar[hidden] { display: none; }
.example-actions { display: flex; gap: 8px; flex-wrap: wrap; }
dialog.examples { width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; background: var(--surface); color: var(--ink); }
dialog.examples::backdrop { background: rgba(0, 0, 0, 0.35); }
.examples-head { display: flex; align-items: center; justify-content: space-between; }
.examples-head h2 { margin: 0; font-size: 22px; }
.examples-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.example-pick { display: grid; gap: 4px; width: 100%; height: 100%; text-align: left; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; }
.example-pick:hover, .example-pick:focus-visible { border-color: var(--plan); background: var(--plan-soft); }
.example-pick span { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.rv-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.rv-more-card { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; }
.rv-more-card h4 { font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 6px; }
.rv-more-card p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.rv-more-card p:last-child { margin-bottom: 0; }
.rv-more-card.wide { grid-column: 1 / -1; }
.rv-answer h4 .hint { font-weight: 400; margin-left: 6px; }
.rv-answer-text { max-height: 320px; overflow-y: auto; padding-right: 6px; font-size: 14px; line-height: 1.5; }
.rv-answer-text h2, .rv-answer-text h3, .rv-answer-text h4 { font-size: 14px; margin: 10px 0 4px; }
.rv-answer-text ul, .rv-answer-text ol { margin: 0 0 8px; padding-left: 20px; }
.rv-chart { max-width: 640px; margin-top: 8px; }
.rv-fixes { list-style: none !important; padding: 0 !important; display: grid; gap: 10px !important; }
.rv-fixes li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; background: var(--surface); border-radius: 8px; }
.rv-fix-effects { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0 !important; }
.rv-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
.rv-more-card ul { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.rv-foot { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 10px 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.rv-foot .linklike { text-align: left; }
.rv-disclaimer { margin: 0; }
/* Retirement: the same one-screen pattern, the chart beside the details. */
.rt-board { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 1600px; margin-inline: auto; }
.rt-head .tile { max-width: 210px; }
.rt-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.rt-card { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; }
.rt-card h3 { margin: 0 0 4px; font-size: 17px; }
.rt-card .chart-note { margin: 0 0 8px; }
.rt-side h3:not(:first-child) { margin-top: 16px; }
.rt-side p { margin: 4px 0; }
.rt-side .row-actions { margin: 8px 0; }
.rt-side .callout { margin: 10px 0; }
/* Panels that scroll: their contents keep their height rather than squash. */
.rt-side > *, .rt-main > * { flex-shrink: 0; }
.rt-side .ledger th, .rt-side .ledger td { padding: 6px 6px; }
.rt-side .ledger td:first-child { white-space: normal; }
.al-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rt-chart canvas { cursor: pointer; }
.st-controls { margin: 0; }
.st-tiles { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.st-tiles .tile { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--line-strong); border-radius: 8px; padding: 8px 12px; }
.st-tiles .tile.plan { border-top-color: var(--plan); }
.st-tiles .tile.rule { border-top-color: var(--rule); }
.st-tiles .tile.danger { border-top-color: var(--danger); }
.st-tiles .tile .v { font-size: 24px; }
/* Cards laid out to fill the screen, each scrolling inside itself. */
.fit-grid { display: grid; gap: 16px; }
.ov-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ld-grid { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fit-card h2 { font-size: 20px; margin: 0 0 8px; }
.fit-card > p { margin: 6px 0; }
.fit-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.fit-tiles .tile .v { font-size: 22px; }
.fit-chart .chart-holder { height: 220px; }
@media (min-width: 901px) {
  body.one-screen #hero { flex: none; }
  .rt-board > .fit-grid, .ov-grid { flex: 1 1 0; min-height: 0; }
  .ov-grid { width: 100%; }
  .fit-card { overflow-y: auto; overscroll-behavior: contain; }
  .fit-card > * { flex-shrink: 0; }
  .pj-grid { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .fit-chart .chart-holder { flex: 1 1 0; min-height: 120px; height: auto; }
  body.one-screen #view-overview { min-height: 180px; }
}
@media (max-width: 900px) {
  .ld-grid, .pj-grid { grid-template-columns: minmax(0, 1fr); }
}
.dc-add { display: grid; gap: 8px; justify-items: end; }
.dc-add .situation { margin: 0; }
.dc-add .situation legend { font-size: 13px; font-weight: 500; }
.dc-add form { margin: 0; justify-content: flex-end; }
.dc-where { margin: 0 0 8px; font-size: 14px; }
.dc-where summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.dc-where p { margin: 6px 0 0; max-width: 80ch; color: var(--ink-2); }
.chip-head { width: 100%; margin: 4px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.chip.canned { background: var(--surface); }
/* Assumptions: which one moves your income most, as a tornado. */
.tornado { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; max-width: 900px; }
.tornado li { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.tn-label { font-weight: 600; font-size: 14px; }
.tn-bars { display: grid; grid-template-columns: 1fr 1fr; height: 16px; border-left: 0; }
.tn-half { display: flex; height: 100%; }
.tn-left { justify-content: flex-end; border-right: 2px solid var(--ink-2); }
.tn-bar { display: block; height: 100%; }
.tn-bar.down { background: var(--viz-2); border-radius: 4px 0 0 4px; }
.tn-bar.up { background: var(--viz-1); border-radius: 0 4px 4px 0; }
.tn-words { grid-column: 2; font-size: 13px; color: var(--ink-2); }
.as-table th, .as-table td:nth-child(2) { white-space: normal; text-align: left; }
.as-table td:nth-child(3) { white-space: normal; text-align: left; color: var(--ink-2); }
.as-guesses { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; }
@media (max-width: 900px) { .tornado li { grid-template-columns: minmax(0, 1fr); } .tn-words { grid-column: 1; } }
.rt-curve input, .rt-events input[type=number] { width: 4.5em; }
.rt-sub { margin: 14px 0 6px; font-size: 15px; }
.rt-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rt-events li { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.rt-events input[type=text] { width: 100%; }
.rt-ev-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.rt-ev-row .inline input { width: 6.5em; }
.ap-v { font-size: 20px !important; line-height: 1.2; white-space: normal !important; }
/* On a big screen the panel takes what's left of the screen and scrolls
   inside; on a phone the page scrolls, so it takes the height it needs. */
@media (min-width: 901px) {
  .rt-board > .rv-panel { flex: 1 1 0; min-height: 0; }
  .rt-board > .rv-panel .rv-pane { overflow-y: auto; overscroll-behavior: contain; }
}
.rv-pane > p { margin: 0 0 10px; max-width: 75ch; }
.dr-note { flex-shrink: 0; margin: 0; padding: 10px 24px; border-top: 1px solid var(--line); }
.derisk-form.rt-card { display: flex; margin: 0; }
.derisk-form.rt-card fieldset { margin: 0 0 14px; min-width: 0; }
.derisk-form select { max-width: 100%; }
.dr-body .rv-pane .tiles { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); }
.derisk-form .inline-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dr-body .rv-pane .tile .v { font-size: 24px; }
.dr-body .derisk-fan { margin-top: 16px; }
.dr-body .derisk-fan svg { height: 200px; }
.ps-flow { margin: 4px 0 16px; }
.rt-main h3:not(:first-child) { margin-top: 8px; }
.rt-main .ledger input { width: 7.5em; }
a.btn { text-decoration: none; }
body.on-review #notices .notice { padding: 6px 12px; font-size: 14px; }
@media (min-width: 901px) {
  body.one-screen .main { padding: 16px 24px; display: flex; flex-direction: column; min-height: calc(100dvh - var(--top-h, 57px)); }
  body.one-screen #notices { margin-top: 0; }
  body.one-screen .view:not([hidden]) { flex: 1 1 0; min-height: 340px; display: flex; margin-top: 12px; }
  .rv-board, .rt-board { flex: 1 1 auto; min-height: 0; }
  .rt-body { flex: 1 1 0; min-height: 0; grid-template-columns: minmax(0, 1fr) clamp(320px, 30%, 400px); }
  .rt-chart .chart-holder { flex: 1 1 0; min-height: 140px; height: auto; }
  .dr-body { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  .dr-body .rv-pane { overflow-y: auto; overscroll-behavior: contain; }
  .scn-chart-pane { display: flex; flex-direction: column; }
  .scn-chart-pane .chart-holder { flex: 1 1 0; min-height: 240px; height: auto; }
  .rt-side, .al-scroll, .rt-main { overflow-y: auto; overscroll-behavior: contain; }
  .al-scroll { flex: 1 1 0; min-height: 0; }
  .al-scroll thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
  .rv-body { flex: 1 1 0; min-height: 0; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); }
  .rv-list, .rv-pane { overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 900px) {
  .rv-title h2 { font-size: 26px; }
  .rv-head .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .rv-head .tile { min-width: 0; max-width: none; }
  .rv-head .tile { width: auto; padding: 6px 8px; }
  .rv-head .tile .v { font-size: 18px; }
  .rv-head .tile .s { display: none; }
  .rv-head .tile .k { font-size: 12px; }
  .rv-pane, .rv-foot { padding-inline: 16px; }
}

.report { border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.25rem; background: var(--surface); max-width: 70ch; }
.report-list { list-style: none; padding: 0; }
.linklike { background: none; border: 0; padding: 0; color: var(--plan); text-decoration: underline; cursor: pointer; font: inherit; }
.term-wrap { position: relative; display: inline; }
.term { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.tip { display: none; position: fixed; left: 8px; top: 0; z-index: 40; width: max-content; max-width: min(280px, calc(100vw - 16px)); white-space: normal; text-align: left; text-transform: none; letter-spacing: normal; background: var(--ink); color: var(--surface); padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.4; font-weight: 400; }
.term:hover + .tip, .term:focus + .tip { display: block; }
.term-wrap.dismissed .tip { display: none; }
@media print { .tip { display: none !important; } .term { text-decoration: none; } }

@media print {
  body.print-report .view:not(#view-review), body.print-report #hero, body.print-report #notices,
  body.print-report .rv-head, body.print-report .rv-list, body.print-report .rv-tabs, body.print-report .rv-foot, body.print-report .rv-disclaimer,
  body.print-report .rv-pane:not(.rv-pane-report), body.print-report [data-report] > :not(.report) { display: none !important; }
  body.print-report #view-review, body.print-report .rv-body, body.print-report .rv-pane-report { display: block !important; }
  body.print-report .rv-panel { border: 0; }
  .rv-list, .rv-pane { overflow: visible !important; }
  body.print-report .report { border: 0; padding: 0; max-width: none; }
}

body.simple .rail, body.simple #detailsBtn { display: none; }
body.simple .frame { grid-template-columns: 1fr; }

/* Your details: a one-screen board of tiles, the questions in a panel beside
   them. On a laptop screen or larger the page itself never scrolls; the panel
   does, if a section's questions are taller than it. */
@media (min-width: 901px) { body.on-details .main { padding: 16px 24px; } }
body.on-details #view-details { margin-top: 0; }
/* The plan's warnings belong on Review; elsewhere only a sign-in or save problem shows. */
body:not(.on-review) #notices:not(:has(.danger)), body:not(.on-review) #notices > .notice:not(.danger) { display: none; }
body.on-details #notices { margin: 0 0 12px; }
/* On a big screen the board stops growing: wider or taller than this, tiles
   stretch into empty boxes. It sits centred, with any spare height below it. */
.board { display: flex; flex-direction: column; gap: 14px; min-height: min(calc(100dvh - var(--top-h, 57px) - 32px - 52px), 900px); max-width: 1600px; margin-inline: auto; }
.board.stacked { min-height: 0; }
.board h2, .board h3 { margin: 0; }
.board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.board-title { display: grid; gap: 2px; min-width: 0; flex: 1 1 320px; }
.board-title h2 { font-size: 30px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.board-title .lede { font-size: 15px; margin: 0; }
.board-progress { display: grid; gap: 6px; justify-items: end; width: 260px; font-size: 14px; color: var(--ink-2); }
.bar-track { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--done-strong); transition: width 0.3s ease; }
.who-switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 10px; padding: 3px; background: var(--surface); gap: 2px; }
.who-switch button { font: inherit; font-size: 14px; font-weight: 500; border: 0; border-radius: 7px; padding: 6px 12px; background: none; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.who-switch button[aria-pressed="true"] { background: var(--plan); color: var(--plan-ink); }
.who-count { font-size: 12px; opacity: 0.85; margin-left: 2px; }

.board-body { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 32%, 400px); grid-template-rows: minmax(min-content, 1fr); gap: 20px; }
.board-tiles { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fixed-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.have-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.have-head h3 { font-size: 19px; }
.have-head .hint { margin: 0; font-size: 13px; }
.have-grid { flex: 1 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(min-content, 130px)); align-content: start; gap: 12px; }

/* A tile: not ticked, ticked (not started / started / ready), selected, complete. */
.dtile { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.dtile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dtile-title { font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.dtile-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.dtile-check input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--plan); }
.dtile-status { margin: 0 0 auto; font-size: 13px; line-height: 1.35; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dtile-btn { align-self: flex-start; font: inherit; font-size: 13px; font-weight: 600; min-height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--plan); background: transparent; color: var(--plan); cursor: pointer; }
.dtile-btn:hover { background: var(--plan-soft); }
.dtile-btn[aria-current="true"] { background: var(--plan); color: var(--plan-ink); }
.dtile-tick { flex-shrink: 0; color: var(--done-mark); }
.dtile.state-unticked { background: var(--surface-2); border: 1px dashed var(--line-strong); justify-content: flex-start; }
.dtile.state-unticked .dtile-title, .dtile.state-unticked .dtile-status { color: var(--ink-2); }
.dtile.state-complete { background: var(--done-bg); border-color: var(--done-line); }
.dtile.state-complete .dtile-title, .dtile.state-complete .dtile-status { color: var(--done-ink); }
.dtile.state-complete .dtile-btn { border-color: var(--done-line); color: var(--done-ink); }
.dtile.state-complete .dtile-btn:hover { background: var(--surface); }
.dtile.selected { border-color: var(--plan); box-shadow: 0 0 0 1px var(--plan); }
.dtile-note { margin: 0; align-self: center; font-size: 13px; color: var(--muted); padding: 0 6px; }

/* The panel: the selected section's questions, then Mark section complete. */
.board-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; contain: size; }
.editor { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--plan); border-radius: 16px; overflow: hidden; }
.editor-head { display: grid; gap: 2px; padding: 18px 20px 10px; }
.editor-head .kicker { font-size: 13px; color: var(--muted); }
.editor-head h2 { font-size: 22px; font-weight: 650; }
.editor-head h2:focus { outline: none; }
.editor-head h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.editor-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px 8px; overscroll-behavior: contain; }
.editor-body > p { margin: 6px 0; }
.editor-body > .notice { margin: 8px 0; }
.editor-foot { padding: 12px 20px 16px; border-top: 1px solid var(--line); }
.editor-foot p { margin: 0; font-size: 14px; }
.foot-more { color: var(--muted); }
.foot-done { color: var(--done-ink); }
.mark-complete { width: 100%; min-height: 48px; font: inherit; font-size: 16px; font-weight: 600; border: 0; border-radius: 12px; background: var(--done-strong); color: #FFFFFF; cursor: pointer; }
.mark-complete:hover { filter: brightness(1.08); }
.board-review { flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; }
.board-review h3 { font-size: 16px; margin: 0 0 4px; }
.board-review .headline.small { font-size: 14px; line-height: 1.45; margin: 0; }
.board-review .hint { margin: 6px 0 0; }

/* Questions inside the panel. */
.board .q { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 12px 0; min-width: 0; }
.board .not-sure, .board .pot-row { grid-template-columns: minmax(0, 1fr); }
.board .q-label { font-weight: 500; margin: 0; }
.board .q .hint, .board .where { margin: 0; }
.board .where { font-size: 13px; color: var(--ink-2); }
.board .q-input { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.board .q-input .inline, .board .q-input select, .board .q-input input[type="date"] { flex: 1 1 200px; width: auto; min-width: 0; max-width: 100%; }
.board .btn.ghost { background: transparent; }
.board .not-sure { background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 8px; }
.board .not-sure label { display: grid; gap: 4px; max-width: 200px; font-size: 13px; }
.board .bands { display: flex; flex-wrap: wrap; gap: 6px; }
.board .bands .btn { white-space: normal; text-align: left; }
.board .band-text { font-variant-numeric: tabular-nums; }
.board .q-input input[inputmode] { text-align: right; font-variant-numeric: tabular-nums; }
.board .warn { color: var(--rule-text); font-weight: 500; }
.board .warn:empty { display: none; }
.board .warn .btn { margin-left: 4px; }
.board .pot-row { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.board .pot-row .q { margin: 4px 0; }
.board .row-title { font-weight: 600; margin: 4px 0 0; }
.board .confirm { display: grid; gap: 8px; margin: 4px 0 10px; padding: 10px 12px; background: var(--rule-soft); border-radius: var(--radius); }
.board .confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.board-review .brief-link { margin: 4px 0 0; font-size: 14px; }
/* A narrow tile area (the settings rail or Ask Claude taking room): smaller tile type. */
.board-tiles { container-type: inline-size; }
@container (max-width: 720px) {
  .dtile { padding: 10px 11px; gap: 6px; }
  .dtile-title { font-size: 14px; }
  .dtile-check { gap: 8px; }
  .dtile-check input { width: 18px; height: 18px; }
  .dtile-btn { min-height: 28px; padding: 0 10px; }
}
/* Shorter laptop screens: the same board, a little tighter. */
@media (max-height: 760px) {
  .board-title .lede { font-size: 14px; }
  .board-review { padding: 10px 14px; }
  .board-review .headline.small { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .board-review .hint { font-size: 11px; margin-top: 4px; }
  .editor-head h2 { font-size: 20px; }
  .board { gap: 10px; }
  .board-title h2 { font-size: 26px; }
  .board-body, .board-tiles, .fixed-row, .have-grid { gap: 10px; }
  .dtile { padding: 10px 12px; gap: 6px; }
  .dtile-title { font-size: 15px; }
  .dtile-btn { min-height: 28px; }
  .editor-head { padding: 14px 18px 8px; }
  .editor-body { padding: 0 18px 6px; }
  .editor-foot { padding: 10px 18px 12px; }
  .mark-complete { min-height: 44px; }
}
/* Narrow: one column, the questions open under the selected tile, and the
   page scrolls. (The layout is chosen by the view's width, so the rail or
   Ask Claude taking room counts too.) */
.board.stacked .board-head { align-items: flex-start; }
.board.stacked .board-progress { width: 100%; justify-items: start; }
.board.stacked .board-body { display: flex; flex-direction: column; }
.board.stacked .board-side { contain: none; }
.board.stacked .fixed-row, .board.stacked .have-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.board.stacked .dtile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
.board.stacked .dtile-head, .board.stacked .dtile-status { grid-column: 1; }
.board.stacked .dtile-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 40px; }
.board.stacked .editor { flex: none; overflow: visible; }
.board.stacked .editor-body { overflow: visible; }
.board.stacked .dtile-note { padding: 0; }
.board.stacked .editor { grid-column: 1 / -1; }
/* Stacked but tablet-wide: two tiles to a row, the questions spanning both. */
@container (min-width: 600px) {
  .board.stacked .fixed-row, .board.stacked .have-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .bar-fill { transition: none; } }
@media print {
  body.on-details #hero { display: grid !important; }
  .board { min-height: 0; }
  .board-side { contain: none; }
  .editor, .editor-body { overflow: visible; }
}
.chart-note { color: var(--ink-2); margin: 4px 0 8px; max-width: 70ch; }

/* A scan's transcription, shown under its row on Documents. */
.doc-text { white-space: pre-wrap; max-height: 320px; overflow: auto; font-size: 12px; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin: 6px 0 0; }

/* Passing it on: who you are, which decides who can inherit free of tax. */
.situation { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.situation legend { font-weight: 600; margin-bottom: 6px; }
.situation .who-switch { flex-wrap: wrap; justify-self: start; }
.widowed-inputs { display: grid; gap: 8px; max-width: 640px; }
.widowed-inputs p { margin: 0; }
.widowed-inputs input { width: 90px; }

/* The top of each tab other than Overview: a slim sustainable-income strip and
   the tab's own small graphic, in place of the full lifeline. */
.hero:has(.sustain-strip) { display: block; padding: 14px 18px; }
.sustain-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.sustain-k { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.sustain-v { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.sustain-s { font-size: 13px; color: var(--muted); flex: 1 1 280px; }
.tab-head { display: grid; gap: 8px; }
.tab-head-title { font-family: var(--display); font-weight: 600; font-size: 16px; }
.tab-head-body { display: grid; gap: 6px; max-width: 900px; }
.tab-head-caption { margin: 0; font-size: 13px; color: var(--muted); max-width: 900px; }
.mini-bar { display: block; width: 100%; height: 18px; }
.mini-cols { display: block; width: 100%; height: 80px; }
.mini-labels { display: grid; text-align: center; font-size: 12px; color: var(--ink-2); gap: 4px; }
.mini-labels strong { color: var(--ink); font-size: 13px; }
.mini-line { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.mini-track { stroke: var(--line); }
.mini-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ink-2); }
.mini-key li { display: flex; align-items: center; gap: 6px; }
.mini-key strong { color: var(--ink); font-weight: 600; }
.mini-key .swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.mini-row-label { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.mini-gauge-row { display: flex; align-items: center; gap: 16px; }
.mini-gauge-row p { margin: 0; font-size: 14px; }
.mini-gauge { width: 150px; flex: none; }
.mini-gauge-value { font-family: var(--display); font-weight: 700; font-size: 16px; fill: var(--ink); }

/* De-risking: the choices, and the fan of outcomes. */
.derisk-form { display: grid; gap: 14px; margin: 12px 0 18px; }
.derisk-form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 8px; background: var(--surface); }
.derisk-form legend { font-family: var(--display); font-weight: 600; padding: 0 4px; }
.derisk-form .hint { margin: 0; }
.derisk-form .hint input { width: 70px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.derisk-fan { margin: 12px 0; }
.derisk-fan figcaption { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.derisk-fan svg { display: block; width: 100%; height: 220px; }
.derisk-fan .tick { font-size: 12px; fill: var(--muted); }

/* Donut, waterfall and share grid (minis.js). */
.mini-donut-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.mini-donut { width: 140px; height: 140px; flex: none; }
.mini-donut-row .mini-key { flex-direction: column; gap: 6px; font-size: 13px; }
.mini-donut-value { font-family: var(--display); font-weight: 700; font-size: 13px; fill: var(--ink); }
.mini-donut-label { font-size: 7px; fill: var(--muted); }
.mini-waterfall { display: block; width: 100%; height: 160px; }
.mini-link { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.share-grid { border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; }
.share-grid th { font-size: 12px; font-weight: 500; color: var(--ink-2); padding: 4px 8px; text-align: center; }
.share-grid th[scope="row"] { text-align: right; }
.share-grid td { min-width: 64px; text-align: center; padding: 8px 6px; border-radius: 4px; font-size: 13px; font-weight: 600;
  /* One hue, light to dark, never so dark that the figure in it stops being readable. */
  background: color-mix(in srgb, var(--plan) calc(var(--share) * 0.7), var(--surface)); color: var(--ink); }
.share-grid td.mark { outline: 2px solid var(--ink); outline-offset: -2px; }
.share-grid td.pending { background: var(--surface-2); color: var(--muted); font-weight: 400; }

/* Download or restore the plan, at the foot of the settings panel. */
.rail-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 6px; }
.plan-file-msg { flex-basis: 100%; font-size: 13px; color: var(--ink-2); }
.plan-file-msg:empty { display: none; }
.plan-file-msg .btn { margin-top: 6px; }
.board-foot { margin-top: 6px; }

/* The one-page summary: printed on its own, never shown on screen. */
@media screen { #printSummary { display: none !important; } }
@media print {
  body.print-summary > :not(#printSummary) { display: none !important; }
  body.print-summary #printSummary { display: block !important; }
  .ps { font-size: 10.5pt; color: #000; line-height: 1.35; }
  .ps h1 { font-size: 17pt; margin: 0 0 2pt; }
  .ps h2 { font-size: 11.5pt; margin: 10pt 0 4pt; border-bottom: 1px solid #999; padding-bottom: 2pt; }
  .ps-head p, .ps-small { font-size: 9pt; color: #333; margin: 0; }
  .ps-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14pt; }
  .ps table { border-collapse: collapse; width: 100%; }
  .ps th { text-align: left; font-weight: 600; padding: 2pt 8pt 2pt 0; vertical-align: top; width: 38%; }
  .ps td { padding: 2pt 0; vertical-align: top; }
  .ps-findings { margin: 0; padding-left: 14pt; }
  .yr h3 { font-size: 10pt; margin: 6pt 0 2pt; }
  .yr ul { margin: 0; padding-left: 14pt; }
  .yr li { margin: 2pt 0; }
  .ps-findings li { margin: 2pt 0; }
  @page { margin: 14mm; }
}

/* The yearly check-up card on Review. */
.checkup { margin: 10px 0 16px; }
.checkup h3 { margin: 0 0 6px; }
.checkup ul { margin: 6px 0 10px 18px; }
.checkup .ledger { margin: 8px 0; }
.dr-body .derisk-fan .tick { font-size: 20px; }

/* Your details on a laptop-height screen: nine tiles still fit without scrolling. */
@media (min-width: 901px) and (max-height: 820px) {
  .have-grid { grid-template-rows: repeat(3, auto); gap: 8px; }
  .fixed-row { gap: 8px; }
  .dtile { padding: 8px 10px; gap: 4px; }
  .dtile-title { font-size: 14px; }
  .dtile-btn { min-height: 26px; padding: 0 10px; }
  .dtile-status { -webkit-line-clamp: 1; margin: 0; }
  .board { gap: 8px; }
  .board-title h2 { font-size: 24px; }
  .have-head h3 { font-size: 16px; }
}

/* What each £1 costs you (Ladder): a £1 bar per slice of pay. */
.ld-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 0 0 10px; }
.ld-stat { margin: 0; background: var(--surface-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-2); }
.ld-stat strong { font-size: 19px; color: var(--ink); font-weight: 600; }
.ld-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); margin: 0 0 6px; }
.ld-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ld-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ld-cols, .ld-row { display: grid; grid-template-columns: minmax(110px, 150px) 1fr 62px 52px; gap: 10px; align-items: center; }
.ld-cols { white-space: nowrap; font-size: 12px; color: var(--ink-2); padding: 0 0 4px; border-bottom: 1px solid var(--line); }
.ld-cols span:nth-child(n+3) { text-align: right; }
.ld-group { font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 10px 0 2px; }
.ld-rows { list-style: none; margin: 0; padding: 0; }
.ld-row { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ld-slice { display: flex; flex-direction: column; line-height: 1.25; }
.ld-slice .hint { font-size: 12px; }
.ld-pound { display: flex; gap: 2px; height: 14px; }
.ld-pound span { border-radius: 3px; min-width: 3px; }
.ld-cost, .ld-pot { text-align: right; font-variant-numeric: tabular-nums; }
.ld-pot { color: var(--plan); font-weight: 600; }
span.ld-cost { font-weight: 600; }
.ld-pound .ld-cost, .ld-legend .ld-cost { background: var(--ink-2); }
.ld-pound .ld-tax, .ld-legend .ld-tax { background: var(--plan); }
.ld-pound .ld-ni, .ld-legend .ld-ni { background: var(--rule); }
.ld-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ld-goal { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; }
.ld-goal h4 { font-family: var(--body); font-size: 15px; font-weight: 600; margin: 0; }
.ld-goal p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.ld-goal .hint { margin: 0; font-size: 12px; color: var(--ink-2); }
.ld-warn { color: var(--danger); }
@media (max-width: 560px) { .ld-cols, .ld-row { grid-template-columns: 96px 1fr 58px 50px; gap: 6px; } }

/* Documents: what the planner already has, from typed-in figures or files. */
.holdings h3, .doc-files-head { font-family: var(--body); font-size: 15px; font-weight: 600; margin: 10px 0 8px; }
.holdings h3 .hint { font-weight: 400; margin-left: 6px; }
.holding-grid { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.holding { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.holding.have, .holding.none { border-left-color: var(--plan); }
.holding.estimate { border-left-color: var(--rule); }
.holding.missing { border-left-color: var(--danger); }
.holding-head { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.holding-head strong { flex: 1; min-width: 0; }
.holding-head .doc-icon svg { width: 18px; height: 18px; }
.holding-lines { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.holding-foot { margin: auto 0 0; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.holding-foot .linklike { margin-left: auto; }
.holding .doc-icon { width: 28px; height: 28px; flex: none; }
.holding-head { flex-wrap: wrap; }
.holding-head .doc-chip { margin-left: auto; }

/* Approach: the tax-smart drawdown plan. */
.dd-lead { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.dd-way { margin: 0; font-size: 15px; line-height: 1.5; }
.dd-way .hint { display: block; font-size: 13px; }
.dd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.dd-years { margin: 8px 0; }
.dd-years summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.dd-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.3fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .dd-grid { grid-template-columns: minmax(0, 1fr); } }

/* Signing in and access (account.js). */
.account { display: inline-flex; }
.account:empty { display: none; }
.account-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin: 0 0 12px; max-width: 760px; }
.account-panel h2 { font-size: 18px; margin: 0 0 6px; }
.account-panel h3 { font-family: var(--body); font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
.account-panel textarea { width: 100%; max-width: 560px; display: block; margin-top: 4px; }
.access-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.access-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.signin-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.signin-note .hint { flex-basis: 100%; }

/* Your details: where you are in the steps (#112). */
.stepper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0; padding: 12px 20px 10px; border-bottom: 1px solid var(--line); }
.stepper-where { margin: 0; font-size: 14px; }
.stepper-where .hint { margin-left: 6px; }
.stepper-dots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.step { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; display: grid; place-items: center; padding: 0; }
.step.started, .step.ready { border-color: var(--rule); color: var(--ink); }
.step.complete { background: var(--done-strong); border-color: var(--done-strong); color: #FFFFFF; }
.step.here { outline: 3px solid var(--plan); outline-offset: 2px; }
.step:hover { border-color: var(--plan); }
.step-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.step-nav .mark-complete { width: auto; min-height: 40px; padding: 0 18px; font-size: 15px; }

/* Review: this tax year (#103). */
.ty-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; }
.ty-head p { margin: 0; }
.ty-count strong { font-size: 24px; }
.ty-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.ty-item { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; }
.ty-item p { margin: 4px 0 0 26px; font-size: 14px; line-height: 1.5; }
.ty-item.done { opacity: 0.65; }
.ty-item.done strong { text-decoration: line-through; }
.ty-item .hint { color: var(--ink-2); }
.ty-dates { margin: 12px 0 0; }
.ty-dates h4 { font-family: var(--body); font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.ty-dates ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.ty-date { display: inline-block; min-width: 100px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Storms: spending guardrails (#106). */
.gr-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0 0 12px; }
.gr-rule { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--line-strong); font-size: 13px; color: var(--ink-2); }
.gr-rule strong { font-size: 24px; color: var(--ink); }
.gr-rule .k { font-weight: 600; color: var(--ink); }
.gr-rule.start { border-left-color: var(--plan); }
.gr-rule.cut { border-left-color: var(--rule); }
.gr-rule.raise { border-left-color: var(--viz-1); }

/* Approach: a guaranteed floor (#107). */
.fl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 8px 0; }
.fl-col { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.fl-col h4 { font-family: var(--body); font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.fl-col p { margin: 4px 0; line-height: 1.45; }
.fl-col strong { font-size: 18px; }
.fl-col .hint { color: var(--ink-2); font-size: 13px; }
.uf-title { font-family: var(--body); font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.uf-table td { white-space: normal; text-align: left; vertical-align: top; font-size: 13px; }
.uf-table td:first-child { font-weight: 600; width: 22%; }

/* Assumptions: the daily check against gov.uk (#110). */
.tc { border-radius: 10px; padding: 10px 14px; margin: 0 0 10px; background: var(--surface-2); border-left: 4px solid var(--plan); font-size: 14px; }
.tc.tc-bad { border-left-color: var(--danger); }
.tc p { margin: 0 0 4px; }
.tc .hint { color: var(--ink-2); }
.tc-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 12px; font-size: 13px; }
.tc-mark { display: inline-block; width: 18px; font-weight: 700; }
.tc-mark.match { color: var(--plan); }
.tc-mark.differs { color: var(--danger); }

/* Your details: a section docks just under the sticky header (#112). */
.editor { scroll-margin-top: calc(var(--top-h, 57px) + 8px); }

/* Explain any number (#118). */
.tile { position: relative; }
.tile-why { position: absolute; top: 6px; right: 8px; background: none; border: 0; padding: 0 2px; font: inherit; font-size: 12px; color: var(--plan); text-decoration: underline; cursor: pointer; }
.rv-title .tile-why { position: static; margin-left: 4px; }
dialog.explain { border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; max-width: min(640px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); }
dialog.explain::backdrop { background: rgba(0, 0, 0, 0.35); }
dialog.explain h2 { font-size: 20px; margin: 0 0 10px; }
.explain-steps { border-collapse: collapse; width: 100%; font-size: 14px; margin: 0 0 10px; }
.explain-steps th { text-align: left; font-weight: 500; padding: 5px 10px 5px 0; vertical-align: top; }
.explain-steps td { padding: 5px 10px 5px 0; vertical-align: top; white-space: nowrap; font-variant-numeric: tabular-nums; }
.explain-steps td.hint { white-space: normal; font-size: 13px; }
.explain-steps tr:last-child th, .explain-steps tr:last-child td { border-top: 1px solid var(--line-strong); font-weight: 600; }
.scn-share { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hist-table td:first-child { white-space: nowrap; }

/* A payslip checked against the plan (#115). */
.ps-check { margin: 8px 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border-left: 4px solid var(--plan); }
.ps-check.off { border-left-color: var(--rule); }
.ps-check h4 { font-family: var(--body); font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.ps-check-table tr.differs td { color: var(--ink); font-weight: 600; }
.ps-check-table tr.why td { border-bottom: 1px solid var(--line); padding-top: 0; white-space: normal; text-align: left; font-weight: 400; }
.ps-check-table tr.match td:last-child { color: var(--plan); }
/* Fields read from a statement (#120). */
.prefill { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.prefill h4 { font-family: var(--body); font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.prefill-table { border-collapse: collapse; font-size: 13px; margin: 0 0 6px; }
.prefill-table th { text-align: left; font-weight: 500; padding: 2px 10px 2px 0; color: var(--ink-2); }
.prefill-table td { padding: 2px 0; }

/* Retirement: stopping before the pensions open (#123). */
.rt-early { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.rt-early h3 { margin-top: 0; }
.rt-early p { font-size: 14px; line-height: 1.5; margin: 6px 0; }

/* What's new (#114). */
.whats-new ul { margin: 6px 0 8px; padding-left: 18px; }
.whats-new li { margin: 2px 0; }
.whats-new li.tier-act strong { color: var(--danger); }
.ty-partner { font-family: var(--body); font-size: 14px; font-weight: 600; margin: 14px 0 6px; }

/* The welcome page (landing.js): one screen, no scrolling. The hero is the
   planner's own vocabulary set large; colour is spent only on the full stops
   and the one button that matters. */
.landing { display: none; }
html[data-landing] .landing { display: grid; }
html[data-landing] .top, html[data-landing] .frame, html[data-landing] .skip { display: none; }
html[data-landing], html[data-landing] body { height: 100%; overflow: hidden; }
.landing { box-sizing: border-box; height: 100dvh; grid-template-rows: auto 1fr auto; padding: clamp(14px, 2.5vh, 28px) clamp(16px, 4vw, 56px); max-width: 1280px; margin: 0 auto; }
.landing-top { display: flex; align-items: center; justify-content: space-between; }
.landing-top .wordmark { font-family: var(--display); font-weight: 700; font-size: clamp(17px, 2.4vh, 21px); }
.landing-main { align-self: center; display: grid; gap: clamp(14px, 3vh, 30px); max-width: 1100px; }
.landing-main h1 { font-family: var(--display); font-weight: 650; letter-spacing: -0.025em; line-height: 1; margin: 0; font-size: clamp(30px, min(6.2vh, 4.8vw), 64px); max-width: 16ch; }
.landing-knows { margin: 0; font-family: var(--display); font-weight: 500; line-height: 1.28; letter-spacing: -0.01em; color: var(--ink-2); font-size: clamp(17px, min(3.4vh, 2.5vw), 36px); max-width: 44ch; text-wrap: pretty; }
.landing-knows span { white-space: nowrap; margin-right: 0.42em; }
.landing-knows em { font-style: normal; color: var(--plan); font-weight: 700; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.btn.big { padding: clamp(10px, 1.6vh, 14px) clamp(16px, 2.4vh, 24px); font-size: clamp(15px, 2vh, 17px); }
.landing-foot { display: flex; flex-wrap: wrap; gap: 6px clamp(18px, 3vw, 40px); font-size: clamp(12px, 1.7vh, 14px); color: var(--ink-2); }
.landing-foot span { white-space: nowrap; }
.landing-advice { margin-left: auto; white-space: normal !important; color: var(--muted); }
@media (max-width: 700px) {
  .landing-main h1 { font-size: clamp(26px, min(4.6vh, 8.6vw), 40px); max-width: none; }
  .landing-knows { font-size: clamp(16px, min(2.55vh, 5.4vw), 24px); line-height: 1.32; max-width: none; }
  .landing-knows span { white-space: normal; }
  .landing-foot { font-size: 12px; gap: 4px 14px; }
  .landing-advice { margin-left: 0; flex-basis: 100%; }
}
@media (max-height: 560px) { .landing-knows span:nth-child(n+9) { display: none; } }
@media (prefers-reduced-motion: no-preference) { .landing-main h1, .landing-knows, .landing-actions { animation: landing-in .6s ease-out both; } .landing-knows { animation-delay: .12s; } .landing-actions { animation-delay: .24s; } }
@keyframes landing-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Your details: skipped sections (every section is a step). */
.dtile.state-skipped { border-style: dashed; opacity: 0.8; }
.dtile.state-skipped .dtile-status { color: var(--muted); }
.step.skipped { border-style: dashed; color: var(--muted); }
.step-nav-right { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.stepper-key { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.stepper-key .step { width: 18px; height: 18px; font-size: 10px; pointer-events: none; }
.stepper-key .step + span, .stepper-key span:not(.step) { margin-right: 6px; }
/* On a phone the progress line stays in view while the sections scroll under
   the header, and a docked section sits just below it. */
@media (max-width: 900px) {
  /* The header's children become the board's own, so the progress line can
     stick for the whole board, not just the header's height. */
  .board.stacked .board-head { display: contents; }
  .board.stacked .board-progress { position: sticky; top: var(--top-h, 57px); z-index: 5; background: var(--page); padding: 6px 0 8px; }
  .board.stacked .editor { scroll-margin-top: calc(var(--top-h, 57px) + 60px); }
}