/* Kept — design system. No webfonts, no third-party requests.

   Layer order in this file:
     1. Tokens        colour, type, space, radius, shadow, motion
     2. Base          reset, body, headings, links, focus
     3. Layout        wrap, sections, grid, utilities
     4. Components    header, buttons, cards, forms, results, nav, prose …
     5. Print

   Themes: light is the base. Dark is its own palette, declared twice with identical values —
   once for "system" when the OS asks for dark, once for an explicit choice — and both are
   screen-only, so print always gets the light tokens. assets/js/theme.min.js (a blocking script
   in <head>) sets <html data-theme="light|dark"> from storage before first paint; with no stored
   choice there is no attribute and the media query decides, live.

   Contrast contract, in BOTH palettes (checked by eval/check-tokens.mjs — run it after touching a
   colour; it also fails if the two dark blocks drift apart or a colour token is left un-themed):
     every text colour is >= 4.5:1 on every surface colour,
     --border-ui and --focus are >= 3:1 on every surface colour,
     --on-accent is >= 4.5:1 on --accent, --accent-strong, --warm and --ink. */

/* ---------- 1. Tokens ---------- */

:root {
  /* surfaces */
  --paper: #f6f2e8;          /* page */
  --paper-2: #efe9db;        /* tinted band, hover wash */
  --card: #fffdf7;           /* raised surface */
  --field: #fffefb;          /* inputs */
  --well: #f1ecdf;           /* inset inside a card: maths drawer, code, meter track */
  --chip: #e9e2d1;           /* tag fill; has to read on the page and on a card */
  --warm-soft: #f6e4dc;      /* caution wash */

  /* text */
  --ink: #15180f;            /* primary text, 14.6–17.7:1 */
  --ink-display: #0a0c07;    /* second ink: display numerals and the ledger rule */
  --ink-2: #383d31;          /* secondary text, 9.1–11.0:1 */
  --muted: #565b4d;          /* tertiary text and labels, 5.7–6.9:1 (was #6b7062, 4.1–5.0:1) */
  --accent: #1d5c3a;         /* semantic, not decorative: ONLY a computed result and the primary action */
  --accent-strong: #0f3a24;  /* primary action, hover */
  --warm: #a8462a;           /* semantic caution only, never decoration, 4.8–5.8:1 */
  --on-accent: #ffffff;      /* 7.9:1 on accent */

  /* lines */
  --line: #ded6c3;           /* decorative hairline between rows; carries no meaning */
  --edge: #cfc5ad;           /* boundary of a raised surface: one step firmer than a hairline */
  --border-ui: #857c66;      /* boundary of a control, 3.4–4.1:1 */
  --focus: #15180f;          /* focus ring, >= 14:1 on every surface */

  /* type: families */
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type: modular scale, ratio 1.25 from 14px. Every size in the system is a step of it. */
  --fs-label: 0.7rem;        /* 11.2px — uppercase tracked labels only */
  --fs-sm: 0.875rem;         /* 14px — secondary running text */
  --fs-base: 1.09375rem;     /* 17.5px — body. Phones use 1rem: the rubric's 16px floor, the one off-scale size */
  --fs-md: 1.367rem;         /* 21.9px */
  --fs-lg: 1.709rem;         /* 27.3px */
  --fs-xl: 2.136rem;         /* 34.2px */
  --fs-2xl: 2.67rem;         /* 42.7px */
  --fs-3xl: 3.338rem;        /* 53.4px */
  --fs-4xl: 4.172rem;        /* 66.8px */

  --lh-display: 1.06;
  --lh-heading: 1.14;
  --lh-snug: 1.3;
  --lh-body: 1.55;

  --measure: 34em;           /* about 68 characters of body text; hard ceiling for running text */

  /* space: 4/8 rhythm */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --gutter: var(--sp-5);     /* page edge; 16px on phones */
  --header-h: 64px;
  --tap: 44px;               /* minimum interactive size */

  /* radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --r: var(--r-lg);

  /* shadow */
  --shadow-1: 0 1px 2px rgba(21, 24, 15, .06);
  --shadow-2: 0 1px 2px rgba(21, 24, 15, .05), 0 12px 32px -20px rgba(21, 24, 15, .35);

  color-scheme: light;       /* native controls, scrollbars and the canvas follow the palette */

  /* motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t-fast: .12s;
  --t-med: .2s;
}

@media (max-width: 640px) {
  :root { --gutter: var(--sp-4); --fs-base: 1rem; }
}

/* Dark, "system": no stored choice and the OS asks for dark. Keep identical to the block below. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* surfaces: a ladder of its own. Page is near-black with a green cast; a card is raised by
       lightness, not shadow; fields and wells sit below the surface they are cut into. */
    --paper: #10140f;
    --paper-2: #161b14;
    --card: #1b211a;
    --field: #0b0e0a;
    --well: #131811;
    --chip: #2b3429;
    --warm-soft: #33211b;

    /* text: warm paper-white, never pure #fff */
    --ink: #e9e5d8;            /* 10.3–15.4:1 */
    --ink-display: #f6f2e6;
    --ink-2: #c6c4b5;          /* 7.4–11.1:1 */
    --muted: #a2a595;          /* 5.1–7.7:1 */
    --accent: #7fcf9f;         /* the same green, lifted: a result figure, or the fill of the primary action */
    --accent-strong: #a6e2bd;
    --warm: #f0a184;           /* 6.2–9.4:1 */
    --on-accent: #0a1a10;      /* dark text on the lifted fills, 8.7–12.2:1 */

    /* lines */
    --line: #2a3228;
    --edge: #3a4437;
    --border-ui: #7f8776;      /* 3.5–5.2:1 */
    --focus: #f6f2e6;

    /* shadow: black, because a tinted shadow disappears on a dark page */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 32px -20px rgba(0, 0, 0, .9);

    color-scheme: dark;
  }
}

/* Dark, explicit: the visitor chose it; the OS setting is ignored. Keep identical to the block above. */
@media screen {
  :root[data-theme="dark"] {
    /* surfaces: a ladder of its own. Page is near-black with a green cast; a card is raised by
       lightness, not shadow; fields and wells sit below the surface they are cut into. */
    --paper: #10140f;
    --paper-2: #161b14;
    --card: #1b211a;
    --field: #0b0e0a;
    --well: #131811;
    --chip: #2b3429;
    --warm-soft: #33211b;

    /* text: warm paper-white, never pure #fff */
    --ink: #e9e5d8;            /* 10.3–15.4:1 */
    --ink-display: #f6f2e6;
    --ink-2: #c6c4b5;          /* 7.4–11.1:1 */
    --muted: #a2a595;          /* 5.1–7.7:1 */
    --accent: #7fcf9f;         /* the same green, lifted: a result figure, or the fill of the primary action */
    --accent-strong: #a6e2bd;
    --warm: #f0a184;           /* 6.2–9.4:1 */
    --on-accent: #0a1a10;      /* dark text on the lifted fills, 8.7–12.2:1 */

    /* lines */
    --line: #2a3228;
    --edge: #3a4437;
    --border-ui: #7f8776;      /* 3.5–5.2:1 */
    --focus: #f6f2e6;

    /* shadow: black, because a tinted shadow disappears on a dark page */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 32px -20px rgba(0, 0, 0, .9);

    color-scheme: dark;
  }
}

/* ---------- 2. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--sp-4)); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-base); line-height: var(--lh-body);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(var(--fs-xl), 1.1rem + 3.4vw, var(--fs-3xl)); line-height: var(--lh-display); letter-spacing: -.022em; }
h2 { font-size: clamp(var(--fs-lg), 1.15rem + 1.7vw, var(--fs-2xl)); line-height: var(--lh-heading); letter-spacing: -.018em; }
h3 { font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: -.01em; }
h4 { font-family: var(--sans); font-size: var(--fs-base); line-height: var(--lh-snug); font-weight: 600; letter-spacing: 0; }
h1:focus, h2:focus, main:focus { outline: none; } /* programmatic focus targets (tabindex="-1"), not interactive */

p { margin: 0 0 1em; text-wrap: pretty; }
p, li, dd, figcaption { max-width: var(--measure); }
b, strong { font-weight: 600; }
small, .small { font-size: var(--fs-sm); }
ul, ol { padding-left: var(--sp-5); }
li { margin-bottom: var(--sp-1); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
a:active { color: var(--ink-2); }
/* Links inside a sentence keep their natural height: WCAG 2.5.8 exempts inline targets, and padding
   them made hit areas on adjacent lines overlap. Stand-alone links use .cell-link or .backlink (44px). */

/* One focus ring for everything focusable. Offset so it is never clipped by the element's own edge. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.btn:focus-visible, .chip:focus-visible { border-radius: var(--r-pill); }

code, pre { font-family: var(--mono); font-size: var(--fs-sm); background: var(--well); border: 1px solid var(--line); border-radius: var(--r-sm); }
code { padding: 1px var(--sp-1); }
pre { padding: var(--sp-3); overflow-x: auto; }
pre code { background: none; border: 0; padding: 0; }

.muted { color: var(--muted); }
.tnum, .money, .bignum, .amt, .v, table { font-variant-numeric: tabular-nums lining-nums; }
.green { color: var(--accent); }
.warm { color: var(--warm); }
.later { color: var(--ink-2); }

/* The page's one italic. Serif italic is used for exactly one element per view: the deck or the
   assumptions caption. Do not add a second. */
.voice { font-family: var(--serif); font-style: italic; font-size: var(--fs-md); line-height: 1.35; color: var(--ink-2); letter-spacing: -.005em; max-width: 26em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--sp-4); top: var(--sp-2); z-index: 100;
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-4);
  background: var(--ink); color: var(--card); border-radius: var(--r-md);
  font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; color: var(--card); outline-color: var(--focus); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 3. Layout ---------- */

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; margin: 0 auto; }

/* Section rhythm varies by role: the hero opens wide, bands are roomy, follow-ons sit tight,
   the closing call to action gets the most air. */
section { padding: var(--sp-8) 0; }
section.hero { padding: var(--sp-8) 0 var(--sp-6); }
section.follow { padding-top: var(--sp-5); }
section.joined { padding-top: 0; }
section.band { padding: 72px 0; background: var(--paper-2); border-block: 1px solid var(--line); }
section.closing { padding: var(--sp-9) 0; }
@media (max-width: 640px) {
  section { padding: var(--sp-7) 0; }
  section.hero { padding: var(--sp-6) 0 var(--sp-5); }
  section.follow { padding-top: var(--sp-4); }
  section.joined { padding-top: 0; }
  section.band { padding: 56px 0; }
  section.closing { padding: var(--sp-8) 0; }
}

.grid { display: grid; gap: var(--sp-4); }           /* children stretch: cards in a row are equal height */
.grid > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.gap-5 { gap: var(--sp-5); }
.gap-7 { gap: var(--sp-7); }
@media (max-width: 620px) { .gap-7 { gap: var(--sp-5); } }
.items-start { align-items: start; }
.items-center { align-items: center; }

.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }
.row-between { display: flex; justify-content: space-between; gap: var(--sp-4); }

/* spacing utilities — the only margins markup may ask for */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }       .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--sp-1); } .mb-1 { margin-bottom: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); } .mb-2 { margin-bottom: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mb-3 { margin-bottom: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mb-4 { margin-bottom: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); } .mb-5 { margin-bottom: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); } .mb-6 { margin-bottom: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); } .mb-7 { margin-bottom: var(--sp-7); }
.mx-auto { margin-inline: auto; }
.w-full { width: 100%; }
.ta-right { text-align: right; }
.ta-center { text-align: center; }
.ta-center p { margin-inline: auto; }
.nowrap { white-space: nowrap; }
.plain { text-decoration: none; }
.scroll-x { overflow-x: auto; }

.measure { max-width: var(--measure); }
.measure-sm { max-width: 26em; }
.h-narrow { max-width: 13em; }   /* display headings: about 24 characters */
.h-wide { max-width: 17em; }

.eyebrow, .stat-label {
  font-family: var(--sans); font-size: var(--fs-label); line-height: var(--lh-snug);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600;
  text-wrap: wrap;
}
.eyebrow { margin: 0 0 var(--sp-3); }
.stat-label { margin: 0; }
.rule { height: 1px; background: var(--line); border: 0; margin: var(--sp-4) 0; }
.rule.wide { margin: 0 0 var(--sp-7); }

/* ---------- 4. Components ---------- */

/* header */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
header.site .wrap { display: flex; align-items: center; gap: var(--sp-5); height: var(--header-h); }
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap);
  font-family: var(--serif); font-size: var(--fs-md); text-decoration: none; letter-spacing: -.02em;
}
.brand:hover { color: var(--ink); }
.brand .mark {
  width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--ink-display);
  color: var(--card); display: grid; place-items: center;
  font-family: var(--sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0;
}
nav.top { display: flex; gap: var(--sp-2); margin-left: auto; align-items: center; }
nav.top a:not(.btn) {
  display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap);
  padding: 0 var(--sp-3); border-radius: var(--r-md);
  text-decoration: none; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2);
}
nav.top a:not(.btn):hover { color: var(--ink); background: var(--paper-2); text-decoration: underline; }
nav.top a:not(.btn):active { background: var(--line); }
header.site .wrap > .theme { margin-left: calc(var(--sp-2) - var(--sp-5)); }   /* sits with the nav, not a full gap away */
@media (max-width: 720px) {
  nav.top a.hide-sm { display: none; }
  header.site .wrap { gap: var(--sp-2); }
  header.site .wrap > .theme { margin-left: 0; }
}

/* theme control: Light / Dark / System. Real radio buttons, so the keyboard and the state
   announcement are the browser's own. The selected segment is drawn from <html data-theme>, which is
   set before first paint, so the control never shows the wrong mode while the page loads.
   Wide: a segmented control. Narrow: a 44px button that opens the same three options as a menu. */
header.site { --theme-pop-top: calc(var(--header-h) + var(--sp-1)); }
.theme { flex: none; }
.theme-btn {
  display: none; width: var(--tap); height: var(--tap); padding: 0; place-items: center;
  background: transparent; color: var(--ink); border: 1px solid var(--border-ui); border-radius: var(--r-pill); cursor: pointer;
}
.theme-btn:hover { background: var(--paper-2); border-color: var(--ink); }
.theme-btn:active { background: var(--line); }
.theme-btn:focus-visible { border-radius: var(--r-pill); }
.theme-glyph {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);   /* a half-filled disc: a hard edge, not a gradient */
}
.theme-opts {
  display: flex; margin: 0; padding: 0; min-width: 0;
  border: 1px solid var(--border-ui); border-radius: var(--r-pill); background: var(--paper);
}
.theme-opts label { position: relative; display: flex; cursor: pointer; }
.theme-opts input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.theme-opts span {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-width: var(--tap); min-height: var(--tap); padding: 0 var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.2; color: var(--ink-2);
}
.theme-opts label:hover span { color: var(--ink); background: var(--paper-2); }
.theme-opts label:active span { background: var(--line); }
.theme-opts input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
:root:not([data-theme]) .theme-opts input[value="system"] + span,
:root[data-theme="light"] .theme-opts input[value="light"] + span,
:root[data-theme="dark"] .theme-opts input[value="dark"] + span {
  background: var(--ink); color: var(--card); font-weight: 600;
}
@media (max-width: 1000px) {
  .theme-btn { display: grid; }
  .theme-opts {
    display: none; position: absolute; z-index: 50; top: var(--theme-pop-top); right: var(--gutter);
    flex-direction: column; min-width: 176px; padding: var(--sp-1);
    background: var(--card); border-color: var(--edge); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  }
  .theme.open .theme-opts { display: flex; }
  .theme-opts span { width: 100%; justify-content: flex-start; min-height: var(--tap); border-radius: var(--r-sm); font-size: var(--fs-base); }
  /* the tick: selection is carried by shape and weight as well as the fill */
  :root:not([data-theme]) .theme-opts input[value="system"] + span::before,
  :root[data-theme="light"] .theme-opts input[value="light"] + span::before,
  :root[data-theme="dark"] .theme-opts input[value="dark"] + span::before {
    content: ""; width: 5px; height: 10px; margin: -2px var(--sp-1) 0 2px;
    border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
  }
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5);
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  border-radius: var(--r-pill); font-family: var(--sans); font-size: var(--fs-base); font-weight: 600;
  line-height: 1.2; text-decoration: none; cursor: pointer; text-align: center;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.btn:active { transform: translateY(1px); background: var(--ink); border-color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--border-ui); }
.btn.ghost:hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }
.btn.ghost:active { background: var(--line); border-color: var(--ink); }
.btn.danger { background: var(--warm); border-color: var(--warm); color: var(--on-accent); }
.btn.danger:hover, .btn.danger:active { background: var(--ink); border-color: var(--ink); }
.btn.sm { min-height: var(--tap); padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn.block { width: 100%; }
/* Disabled and busy: a dashed boundary and ink-2 text, so the state reads without colour (>= 3:1). */
.btn:disabled, .btn[aria-disabled="true"], .btn[aria-busy="true"] {
  background: var(--paper-2); color: var(--ink-2); border: 1px dashed var(--border-ui);
  cursor: not-allowed; transform: none;
}
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border-ui); border-top-color: var(--ink);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::before { animation: none; } }
@media (max-width: 420px) { .btn { white-space: normal; } }

.backlink {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap);
  font-size: var(--fs-sm); color: var(--muted); text-decoration: none;
}
.backlink:hover { color: var(--ink); text-decoration: underline; }

/* cards */
.card {
  background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-2);
}
.card.pad-lg { padding: var(--sp-6); }
.card.flat { box-shadow: none; }
.card > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { .card, .card.pad-lg { padding: var(--sp-4); } }
a.card { display: block; text-decoration: none; color: var(--ink); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
a.card:hover { border-color: var(--ink); color: var(--ink); }
a.card:hover h2, a.card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a.card:active { background: var(--paper-2); }
a.card:focus-visible { border-radius: var(--r-lg); }
.card-title { font-family: var(--serif); font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: -.01em; font-weight: 500; margin: 0 0 var(--sp-2); }

/* forms */
label.f, .f { display: block; margin-bottom: var(--sp-4); }
.f .lbl {
  display: block; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-2); font-weight: 600; line-height: var(--lh-snug);
}
input[type=text], input[type=number], input[type=email], select, textarea {
  width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-3);
  border: 1px solid var(--border-ui); border-radius: var(--r-md);
  background: var(--field); font-family: var(--sans); font-size: var(--fs-base); color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input[type=number] { text-align: right; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink); border-radius: var(--r-md);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--paper-2); color: var(--ink-2); border-style: dashed; cursor: not-allowed;
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--warm); border-width: 2px; }
.hint { display: block; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); margin-top: var(--sp-2); max-width: var(--measure); }
.hint + .hint { margin-top: var(--sp-1); }
/* Field error: sits directly under the field it concerns. Icon + weight + colour, not colour alone. */
.field-error {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  font-size: var(--fs-sm); line-height: 1.45; font-weight: 600; color: var(--warm); margin-top: var(--sp-2);
}
.field-error::before {
  content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  background: var(--warm); color: var(--on-accent); font-size: 12px; line-height: 18px; text-align: center; font-weight: 700;
}
.money { text-align: right; }

/* checkbox row: the native input is the 44px target; the visible box is drawn inside it */
.check {
  display: flex; gap: var(--sp-2); align-items: center; min-height: 48px;
  padding: 0 var(--sp-3) 0 0; border: 1px solid var(--border-ui); border-radius: var(--r-md);
  cursor: pointer; background: var(--field); margin-bottom: var(--sp-2);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.check:last-child { margin-bottom: 0; }
.check:hover { border-color: var(--ink); }
.check:active { background: var(--paper-2); }
.check.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.check > span { padding-block: var(--sp-2); line-height: 1.35; }
.check input {
  -webkit-appearance: none; appearance: none; flex: none;
  width: var(--tap); height: var(--tap); margin: 0; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer; outline: none; /* ring is drawn on the box below */
}
.check input::before {
  content: ""; grid-area: 1 / 1; width: 20px; height: 20px;
  border: 2px solid var(--border-ui); border-radius: var(--r-sm); background: var(--field);
}
.check input::after {
  content: ""; grid-area: 1 / 1; width: 6px; height: 11px; margin-top: -3px;
  border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0;
}
.check input:checked::before { background: var(--ink); border-color: var(--ink); }
.check input:checked::after { opacity: 1; }
.check input:focus-visible::before { outline: 2px solid var(--focus); outline-offset: 2px; }
.check input:disabled { cursor: not-allowed; }
.check input:disabled::before { border-style: dashed; background: var(--paper-2); }

input[type=range] { width: 100%; height: var(--tap); margin: var(--sp-3) 0 0; accent-color: var(--ink); cursor: pointer; }
.range-ends { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--muted); }

/* in-page confirmation (replaces confirm()) */
.confirm {
  margin-top: var(--sp-4); padding: var(--sp-4); max-width: var(--measure);
  background: var(--warm-soft); border: 1px solid var(--warm); border-left-width: 4px; border-radius: var(--r-md);
}
.confirm p { margin: 0 0 var(--sp-3); color: var(--ink); font-size: var(--fs-base); }
.confirm:focus { outline: none; }
.action-status { font-size: var(--fs-sm); color: var(--ink-2); margin: var(--sp-3) 0 0; min-height: 1.45em; }
.action-status.error { color: var(--warm); font-weight: 600; }

/* hero: proposition left, the example statement right, equal height: the call to action sits on
   the statement's bottom edge. The assumptions run under both as one band, so the answer is read
   before the inputs at every width. */
.hero .lede { font-size: var(--fs-md); line-height: 1.45; color: var(--ink-2); max-width: 27em; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: var(--sp-7); align-items: stretch; }
.hero-text { display: flex; flex-direction: column; }
.hero-cta { margin-top: auto; padding-top: var(--sp-6); }
.assume-band { margin-top: var(--sp-6); border-top: 1px solid var(--ink-display); }
.assume-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.assume-grid .f, .assume-grid .check { margin-bottom: 0; }
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); }
  .hero-cta { padding-top: var(--sp-5); }
}
@media (max-width: 620px) {
  .assume-grid { grid-template-columns: minmax(0, 1fr); }
  .assume-band .btn { width: 100%; }
  .hero .lede { font-size: var(--fs-base); }
}

/* ---- financial statement: the page's third texture ----
   A ruled block of figures. Labels left, tabular figures right, an ink hairline above, and the one
   print cue in the system below the figure group: the accountant's double rule. No fills, no gradients. */
.stmt { border-top: 1px solid var(--ink-display); }
.stmt-row, .stmt-total {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-4); align-items: baseline;
}
.stmt-row { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); }
.stmt-row > :last-child, .stmt-total > :last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.stmt-row > :last-child { font-weight: 600; color: var(--ink); }
.stmt-row .sub { display: block; color: var(--muted); }
.stmt-row:last-child { border-bottom: 0; }
.stmt-total { padding: var(--sp-3) 0 var(--sp-2); }
.stmt-total .fig { font-family: var(--serif); font-size: var(--fs-xl); line-height: 1; letter-spacing: -.02em; color: var(--ink-display); }
.stmt-total.lead .fig { font-size: clamp(var(--fs-2xl), 1.9rem + 2.2vw, var(--fs-3xl)); letter-spacing: -.03em; }
.stmt-total.result .fig { color: var(--accent); }
.stmt-close { border: 0; border-bottom: 3px double var(--ink-display); margin: 0; height: 0; }
.stmt-source { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); margin: var(--sp-3) 0 0; max-width: var(--measure); }
.stmt-cap { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-base); line-height: 1.45; }
.stmt-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
@media (max-width: 400px) { .stmt-total.lead { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-1); } .stmt-total.lead > :last-child { text-align: left; } }

/* A statement that is the subject of its section rather than a summary in a card: body-size rows. */
.stmt.lg .stmt-row { font-size: var(--fs-base); padding: var(--sp-3) 0; }
.stmt-end { font-family: var(--serif); font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: -.01em; color: var(--ink-display); margin: var(--sp-3) 0 0; }

/* Steps set as a statement: ink rule above, one column per step divided by hairlines, the step
   number in the figure face, the double rule below. Row tracks are shared, so the three titles and
   the three paragraphs start on the same lines however the titles wrap. */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-5); border-top: 1px solid var(--ink-display); list-style: none; margin: 0; padding: 0; }
.how > li { max-width: none; margin-bottom: 0; }
.how > * { display: flex; flex-direction: column; row-gap: var(--sp-2); padding: var(--sp-4) 0 var(--sp-5) var(--sp-5); border-left: 1px solid var(--line); min-width: 0; }
.how > :first-child { padding-left: 0; border-left: 0; }
.how > * > * { margin: 0; }
.how-n { font-family: var(--serif); font-size: var(--fs-xl); line-height: 1; letter-spacing: -.02em; color: var(--ink-display); font-variant-numeric: tabular-nums lining-nums; }
.how p { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
@supports (grid-template-rows: subgrid) {
  .how > * { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
}
@media (max-width: 760px) {
  .how { grid-template-columns: minmax(0, 1fr); }
  .how > * {
    display: grid; grid-template-columns: var(--sp-7) minmax(0, 1fr); grid-template-rows: auto; grid-row: auto;
    column-gap: var(--sp-3); row-gap: var(--sp-1); padding: var(--sp-4) 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .how > :first-child { border-top: 0; }
  .how-n { grid-row: span 2; font-size: var(--fs-lg); }
  .how h3, .how p { grid-column: 2; }
}

/* assumptions: the inputs behind a statement, presented under the answer */
.assume { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0; min-width: 0; }
.assume legend { padding: 0; float: left; width: 100%; margin-bottom: var(--sp-3); }
.assume > * { clear: left; }
.assume .f { margin-bottom: var(--sp-3); }

/* ---- comparison tracks ----
   Two or more figures side by side share row tracks through subgrid: the label row grows to fit
   the longest label and every figure starts on the same line. Labels flex; numbers never move.
   When the columns stack, the constraint is released and each item becomes a statement row. */
.compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-5); }
.compare > * { display: flex; flex-direction: column; row-gap: var(--sp-1); padding: var(--sp-3) 0 var(--sp-3) var(--sp-5); border-left: 1px solid var(--line); min-width: 0; }
.compare > :first-child { padding-left: 0; border-left: 0; }
.compare > * > :last-child { margin-top: auto; }           /* fallback where subgrid is missing */
.compare .bignum { margin: 0; }
.tracks > * { row-gap: var(--sp-1); }
.tracks > * > * { margin-top: 0; margin-bottom: 0; }
@supports (grid-template-rows: subgrid) {
  .compare > * { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; }
  .compare > * > :last-child { margin-top: 0; }
  .tracks > * { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; }
}
@media (max-width: 620px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare > * {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; grid-row: auto;
    align-items: baseline; column-gap: var(--sp-4); padding: var(--sp-3) 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .compare > :first-child { border-top: 0; }
  .compare > * > :last-child { text-align: right; margin-top: 0; }
  .tracks > * { display: block; grid-row: auto; }
  .tracks > * > * + * { margin-top: var(--sp-1); }
}

/* figures */
.bignum { font-family: var(--serif); font-size: clamp(var(--fs-2xl), 1.6rem + 4vw, var(--fs-4xl)); line-height: 1; letter-spacing: -.03em; margin: var(--sp-1) 0; color: var(--ink-display); }
.bignum.small { font-size: clamp(var(--fs-xl), 1.5rem + 1.4vw, var(--fs-2xl)); letter-spacing: -.02em; }
.bignum.green { color: var(--accent); }
.est-note { font-size: var(--fs-sm); color: var(--muted); margin: var(--sp-1) 0 0; }

.meter { margin: var(--sp-3) 0; }
.meter-head { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); }
.meter-track { height: 8px; background: var(--well); border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: var(--sp-1); overflow: hidden; }
.meter-fill { height: 100%; background: var(--ink); }

/* quiz */
.quiz-shell { min-height: 78vh; display: flex; align-items: center; padding: var(--sp-6) 0 var(--sp-8); }
.quiz-shell h1 { font-size: clamp(var(--fs-xl), 1.3rem + 2.4vw, var(--fs-2xl)); }
.progress { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-6); }
.progress i { height: 4px; flex: 1; background: var(--line); border-radius: var(--r-sm); }
.progress i.on { background: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap);
  border: 1px solid var(--border-ui); background: var(--field); border-radius: var(--r-pill);
  padding: 0 var(--sp-4); font-size: var(--fs-base); line-height: 1.2; text-align: left;
  cursor: pointer; font-family: var(--sans); color: var(--ink);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--ink); background: var(--paper-2); }
.chip:active { background: var(--line); }
.chip.on, .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--card); font-weight: 600; }
.chip.on::before, .chip[aria-pressed="true"]::before {
  content: ""; width: 5px; height: 10px; margin: -2px 2px 0 0;
  border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.chip.on:hover, .chip[aria-pressed="true"]:hover { background: var(--ink-2); border-color: var(--ink-2); }
.chip:disabled { background: var(--paper-2); color: var(--ink-2); border-style: dashed; cursor: not-allowed; }

/* app shell */
.app-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: calc(100vh - var(--header-h)); }
aside.side { border-right: 1px solid var(--line); padding: var(--sp-5) var(--sp-3); }
.side nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.side a {
  display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-3);
  border-radius: var(--r-md); border-left: 3px solid transparent;
  text-decoration: none; font-size: var(--fs-base); color: var(--ink-2); white-space: nowrap;
}
.side a:hover { background: var(--paper-2); color: var(--ink); text-decoration: underline; }
.side a:active { background: var(--line); }
.side a.on, .side a[aria-current="page"] {
  background: var(--paper-2); color: var(--ink); font-weight: 600; border-left-color: var(--ink);
}
main.pane { padding: var(--sp-6) var(--sp-6) var(--sp-9); min-width: 0; max-width: 1040px; }
main.pane h1 { font-size: clamp(var(--fs-xl), 1.5rem + 1.6vw, var(--fs-2xl)); line-height: var(--lh-heading); letter-spacing: -.018em; }
main.pane h2 { font-size: var(--fs-lg); line-height: 1.2; letter-spacing: -.012em; }
main.pane h1.stat-label, main.pane h2.eyebrow, main.pane h2.stat-label { font-size: var(--fs-label); line-height: var(--lh-snug); letter-spacing: .12em; }
.card > h2.eyebrow { color: var(--ink); margin-bottom: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
main.pane h2.card-title, main.pane h3.card-title { font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: -.01em; }
.view-head { margin-bottom: var(--sp-5); }
.view-head p { margin: var(--sp-2) 0 0; color: var(--muted); }
.view-head p.voice { color: var(--ink-2); }
.section-head { margin: var(--sp-7) 0 var(--sp-4); }
/* Phones and small tablets: every destination is visible at once in a fixed grid, four across
   (eight across from 600px). Nothing scrolls sideways, so no link is ever off-screen. */
@media (max-width: 860px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  aside.side { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--sp-2) var(--gutter); background: var(--paper); }
  .side nav { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-1); }
  .side a {
    justify-content: center; text-align: center; white-space: normal; min-height: var(--tap); padding: var(--sp-1);
    border-left: 0; border-bottom: 3px solid transparent; font-size: var(--fs-sm); line-height: 1.15;
  }
  .side a.on, .side a[aria-current="page"] { border-bottom-color: var(--ink); }
  main.pane { padding: var(--sp-5) var(--gutter) var(--sp-8); }
}
@media (max-width: 599px) { .side nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* …and stays in reach: on a phone the site header scrolls away and the plan's own nav pins to the
   top instead (both pinned would take a quarter of the screen). Not in a short landscape viewport. */
@media (max-width: 860px) and (min-height: 560px) {
  .page-app header.site { position: relative; }
  .page-app aside.side { position: sticky; top: 0; z-index: 30; }
  html:has(.page-app) { scroll-padding-top: 128px; }
}

/* rows: label left, figure right */
.rowline {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-base);
}
.rowline:last-child { border-bottom: 0; }
.rowline.top { align-items: flex-start; }
.rowline .k { color: var(--ink-2); min-width: 0; }
.rowline .k > a:first-child { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); } /* a row's title link is a target, not a word in a sentence */
.rowline .v { font-weight: 600; text-align: right; white-space: nowrap; flex: none; }
.rowline.total { border-top: 2px solid var(--ink); border-bottom: 0; margin-top: var(--sp-2); padding-top: var(--sp-3); font-weight: 700; }
.rowline.total > :last-child { text-align: right; white-space: nowrap; }
@media (max-width: 420px) { .rowline .v { white-space: normal; } }

/* move cards */
.move { display: flex; flex-direction: column; border: 1px solid var(--edge); border-top: 1px solid var(--ink); background: var(--card); border-radius: var(--r-lg); padding: var(--sp-5); }
.move.is-done { border-top-color: var(--border-ui); background: var(--well); }
.move.is-done .move-title { text-decoration: line-through; text-decoration-thickness: 1px; }
.move-head { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: flex-start; }
.move-title, .move h3, .move h4 { font-family: var(--sans); font-size: var(--fs-base); font-weight: 600; line-height: var(--lh-snug); letter-spacing: 0; margin: var(--sp-2) 0 var(--sp-1); }
.move-figure { text-align: right; flex: none; }
.move .amt, .amt { font-family: var(--serif); font-size: var(--fs-lg); color: var(--accent); line-height: 1.1; white-space: nowrap; }
.move .amt.later, .amt.later { color: var(--ink-2); }
.move .meta, .meta { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.move-facts { margin: var(--sp-4) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }
.move-facts div { margin: 0; }
.move-facts b { display: block; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 420px) { .move-facts { grid-template-columns: 1fr; } }
.move-actions { margin-top: auto; padding-top: var(--sp-4); }
@media (max-width: 640px) { .move { padding: var(--sp-4); } }

.tag {
  display: inline-block; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; line-height: 1.3;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); background: var(--chip); color: var(--ink-2); font-weight: 600; white-space: nowrap;
}
.tag.g { background: transparent; color: var(--ink); border: 1px solid var(--ink-2); }
.tag.w { background: var(--warm-soft); color: var(--ink); border: 1px solid var(--warm); }

/* show-the-maths drawer */
details.math { margin-top: var(--sp-3); }
details.math summary {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap);
  cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; list-style: none;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
}
details.math summary:hover { color: var(--ink); text-decoration-thickness: 2px; }
details.math summary::-webkit-details-marker { display: none; }
details.math summary::before {
  content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease);
}
details.math[open] summary::before { transform: rotate(45deg); }
details.math .body {
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); background: var(--well);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3);
}
details.math .math-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 2px 0; }
details.math .math-row b { text-align: right; white-space: nowrap; }
details.math .math-note { margin-top: var(--sp-2); color: var(--muted); }
details.math code { background: none; border: 0; padding: 0; }

/* accordion */
.acc { border-top: 1px solid var(--line); }
.acc > div { border-bottom: 1px solid var(--line); }
.acc h3 { font: inherit; margin: 0; letter-spacing: 0; }
.acc button {
  width: 100%; min-height: 56px; text-align: left; background: none; border: 0; padding: var(--sp-3) 0;
  font-family: var(--serif); font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--ink); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
}
.acc button:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.acc button:active { color: var(--ink-2); }
.acc button .sign { flex: none; width: 24px; text-align: center; font-family: var(--sans); text-decoration: none; }
.acc .panel { display: none; padding: 0 0 var(--sp-5); color: var(--ink-2); }
.acc .panel p:last-child { margin-bottom: 0; }
.acc .open .panel { display: block; }

/* course */
.lesson-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lesson-list li { margin: 0; max-width: none; border-bottom: 1px solid var(--line); }
.lesson { display: flex; gap: var(--sp-4); align-items: baseline; min-height: 56px; padding: var(--sp-3) 0; text-decoration: none; }
.lesson .n { font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); width: 28px; flex: none; }
.lesson .t { flex: 1; min-width: 0; }
.lesson .t b { display: block; font-weight: 600; }
.lesson:hover .t b { text-decoration: underline; text-decoration-thickness: 2px; }
.lesson .hint { margin-top: 2px; }

.prose { max-width: var(--measure); }
.prose h1 { margin-bottom: var(--sp-5); }
.prose h2, main.pane .prose h2 { margin: var(--sp-6) 0 var(--sp-2); font-family: var(--sans); font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -.005em; }
.prose h3 { margin: var(--sp-5) 0 var(--sp-2); font-family: var(--sans); font-size: var(--fs-base); font-weight: 600; }
.prose p, .prose li { color: var(--ink-2); }
.prose table, table.data { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: var(--fs-sm); }
.prose th, .prose td, table.data th, table.data td { border-bottom: 1px solid var(--line); padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; text-align: left; vertical-align: baseline; max-width: none; }
.prose th, table.data th { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.prose td + td, .prose th + th { text-align: right; padding-right: 0; padding-left: var(--sp-3); }
table.data { margin: 0; }
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }
/* links that stand alone in a cell or row: a full 44px target */
.cell-link { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); color: var(--ink); font-weight: 600; }
.cell-link:hover { text-decoration-thickness: 2px; }

.callout { background: var(--paper-2); border: 1px solid var(--ink-2); border-left-width: 4px; border-radius: var(--r-md); padding: var(--sp-4); margin: var(--sp-5) 0; }
.callout.warn { background: var(--warm-soft); border-color: var(--warm); }
.callout p { color: var(--ink); }
.callout p:last-child { margin-bottom: 0; }
.card > .callout:last-child { margin-bottom: 0; }

.list-plain { margin: 0; color: var(--ink-2); }
.list-plain li { margin-bottom: var(--sp-2); }
.list-plain li:last-child { margin-bottom: 0; }
.pager { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; margin-top: var(--sp-6); }
.pager .btn { white-space: normal; max-width: 100%; }

/* footer */
footer.site { border-top: 1px solid var(--line); padding: var(--sp-7) 0 var(--sp-8); font-size: var(--fs-sm); color: var(--muted); }
footer.site nav { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin-bottom: var(--sp-4); }
footer.site nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink-2); text-decoration: none; }
footer.site nav a:hover { color: var(--ink); text-decoration: underline; }
.disclaimer { font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); max-width: var(--measure); }

/* toast: polite status, never the only place a result is reported */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translate(-50%, 16px);
  max-width: calc(100vw - 2 * var(--sp-4)); width: max-content;
  background: var(--ink); color: var(--card); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: 1.4; box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 99;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.toast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

/* the live-years line: under the site header on every page. Which tax years are open today,
   then, smaller, when the data was read and whose calendar the dates are in. */
.yearbar { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.yearbar .wrap { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: var(--sp-1) var(--sp-5); padding-top: var(--sp-2); padding-bottom: var(--sp-2); min-height: 2.5rem; }
/* The bar is filled in by script. Its height is reserved for the filled state at each width, so
   the page below it does not move when the text arrives. */
@media (max-width: 900px) { .yearbar .wrap { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 2px; min-height: 3.75rem; } }
@media (max-width: 480px) { .yearbar .wrap { min-height: 4.75rem; } }
.yearbar p { margin: 0; max-width: none; }
.yearbar-live { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.yearbar-meta { font-size: var(--fs-label); line-height: 1.5; color: var(--muted); }
.yearbar-meta.stale { color: var(--warm); font-weight: 600; }

/* simulated date (?asof=): persistent, not dismissible, on screen from the first paint and on
   paper. It is the first element in <body>, fixed to the bottom edge so it survives scrolling
   without fighting the sticky header. */
.asof-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--warm); color: var(--on-accent);
  padding: var(--sp-3) var(--gutter); text-align: center;
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; letter-spacing: .01em;
}
.asof-banner.refused { background: var(--ink); }
html[data-asof] body { padding-bottom: var(--sp-8); }
html[data-asof] .toast { bottom: calc(var(--sp-8) + var(--sp-3)); }

/* a figure that leaves something out says what, beside the number */
.excl { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); line-height: 1.4; font-weight: 600; color: var(--warm); max-width: var(--measure); }
.excl-inline { color: var(--warm); font-weight: 600; }
.peryear { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); }
.stmt-flag { margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); background: var(--warm-soft); border-left: 3px solid var(--warm); border-radius: var(--r-sm); max-width: var(--measure); }
.compare .excl, .compare .peryear { text-align: left; }

/* which tax year a statement shows, when two are open */
.yearswitch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: var(--sp-4) 0 0; }
.tool-year { font-size: var(--fs-sm); font-variant-numeric: tabular-nums lining-nums; }

/* the front door inside the app */
.door .door-title { font-family: var(--serif); font-size: var(--fs-lg); line-height: var(--lh-heading); color: var(--ink-display); margin: var(--sp-2) 0 var(--sp-3); max-width: var(--measure); }
.move.is-closed { border-style: dashed; }
.stmt-row.is-closed > :last-child { font-weight: 500; color: var(--muted); }

/* ---------- 5. Print ---------- */

@media print {
  header.site, aside.side, .noprint, .skip, .toast, footer.site nav, details.math summary { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }
  .app-shell { display: block; }
  .card, .move { box-shadow: none; border-color: #999; break-inside: avoid; }
  main.pane { padding: 0; max-width: none; }
  a { text-decoration: none; }
  h1, h2, h3 { break-after: avoid; }
  /* A plan printed under a simulated date says so at the top of the page. */
  .asof-banner { position: static; background: #fff; color: #000; border: 2px solid #000; margin: 0 0 12pt; padding: 6pt 10pt; }
  html[data-asof] body { padding-bottom: 0; }
  .yearbar { background: #fff; border-bottom: 1px solid #999; }
}