/* Layout concept: a quiet instrument panel. Inputs sit on plain paper; every answer lands on one
   deep eucalyptus "readout" surface set in mono figures. That readout is the only bold element. */

@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: optional; }
/* Every page preloads the font (scripts/seo.mjs), so it's normally ready for the first paint. If it isn't,
   font-display: optional keeps the fallback below for that page view instead of swapping fonts once text is
   on screen, which moved lines on wrap-heavy pages (about.html CLS 0.105). The fallback is Arial scaled
   to Instrument Sans' width and line metrics, so it looks and wraps nearly the same. */
@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); font-weight: 400 549; size-adjust: 102.13%; ascent-override: 94.98%; descent-override: 24.48%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); font-weight: 550 700; size-adjust: 102.13%; ascent-override: 94.98%; descent-override: 24.48%; line-gap-override: 0%; }

:root {
  /* Colour */
  --bg: #f4f6f5;
  --surface: #ffffff;
  --sunken: #eef2f1;
  --ink: #12201e;
  --muted: #5b6b68;
  --faint: #626f6c;
  --line: #dbe3e1;
  --line-strong: #c4cfcc;
  --field-border: #7d8c89; /* input and select borders: 3.5:1 on --surface, 3.2:1 on --bg (WCAG 1.4.11) */
  --accent: #0e6a5b;
  --accent-hover: #0b5a4d;
  --accent-ink: #ffffff;
  --accent-soft: #e2efeb;
  --ochre: #b8741a;
  --error: #b42318;
  --readout: #0f2d29;
  --readout-ink: #eaf3f0;
  --readout-muted: #97b4ad;
  --readout-line: rgba(234, 243, 240, .14);
  --readout-accent: #7fd1bb;
  --readout-border: transparent;
  --focus: #0e6a5b;
  --series-1: #0b8a72; --series-2: #b8741a; /* chart series, validated for contrast and colour-blind separation */

  /* Type */
  /* One family for everything, as production finance sites do (Stripe: Söhne, Wise: Wise Sans).
     Figures use tabular widths wherever numbers update or line up, so values don't jitter. */
  --font-display: "Instrument Sans", "Instrument Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-display);
  --tnum: "tnum" 1, "lnum" 1;
  --t-xs: .8125rem; --t-sm: .875rem; --t-base: 1rem; --t-md: 1.0625rem; --t-lg: 1.375rem; --t-xl: 1.875rem; --t-2xl: clamp(2rem, 4.2vw, 2.875rem);

  /* Shape */
  --r-sm: 6px; --r: 10px;
  --wrap: 1120px;
  --header-h: 60px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1312; --surface: #121b1a; --sunken: #0f1716; --ink: #e4edeb; --muted: #93a5a1; --faint: #758783;
    --line: #22302e; --line-strong: #31423f; --field-border: #5f726e; --accent: #55bfa5; --accent-hover: #6fd0b7; --accent-ink: #062019;
    --accent-soft: #15302b; --ochre: #e1a24c; --error: #f4877b; --readout: #143832; --readout-ink: #e8f3f0; --readout-muted: #94b6ae;
    --readout-line: rgba(232, 243, 240, .12); --readout-accent: #86dcc4; --readout-border: rgba(134, 220, 196, .22); --focus: #6fd0b7;
    --series-1: #38a68b; --series-2: #c4842c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1312; --surface: #121b1a; --sunken: #0f1716; --ink: #e4edeb; --muted: #93a5a1; --faint: #758783;
  --line: #22302e; --line-strong: #31423f; --field-border: #5f726e; --accent: #55bfa5; --accent-hover: #6fd0b7; --accent-ink: #062019;
  --accent-soft: #15302b; --ochre: #e1a24c; --error: #f4877b; --readout: #143832; --readout-ink: #e8f3f0; --readout-muted: #94b6ae;
  --readout-line: rgba(232, 243, 240, .12); --readout-accent: #86dcc4; --readout-border: rgba(134, 220, 196, .22); --focus: #6fd0b7;
    --series-1: #38a68b; --series-2: #c4842c;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--t-base)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.icon { display: block; flex: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: 12px; top: 10px; z-index: 20; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--readout); color: var(--readout-ink); font-weight: 600; font-size: var(--t-sm); text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--readout-ink); outline-color: var(--readout-accent); }
main:focus { outline: none; }
.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
main.wrap { padding-block: 0 72px; }
/* layout.js prepends the header once the modules load. Until then, an empty block holds its space
   (height + 1px border), so nothing on the page moves when the header takes its place (CLS). */
body:not(:has(> .site-header))::before { content: ""; display: block; height: calc(var(--header-h) + 1px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 8px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ink); text-decoration: none; font: 700 1.0625rem/1 var(--font-display); letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 26px; height: 26px; }
.brand-accent { color: var(--accent); }
.nav { display: flex; gap: 2px; margin-right: 6px; }
.nav a { padding: 7px 10px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.nav a:hover { color: var(--ink); background: var(--sunken); }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--muted); cursor: pointer;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.icon-btn .icon { width: 18px; height: 18px; }
.theme-dark-only { display: none; }
:root[data-theme="dark"] .theme-light-only { display: none; }
:root[data-theme="dark"] .theme-dark-only { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-light-only { display: none; }
  :root:not([data-theme="light"]) .theme-dark-only { display: block; }
}
.bmc {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  border-radius: var(--r-sm); background: var(--ink); color: var(--bg); text-decoration: none;
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
}
.bmc:hover { color: var(--accent-ink); background: var(--accent); }
.bmc .icon { width: 17px; height: 17px; }
@media (max-width: 640px) {
  .bmc span { display: none; } .bmc { padding: 0 10px; }
  /* Phones: the section links sit under the brand, wrapping onto a second row rather than hiding off the edge. */
  :root { --header-h: 96px; } html { scroll-padding-top: 112px; }
  .site-header .wrap { height: auto; flex-wrap: wrap; padding-block: 8px 0; row-gap: 2px; }
  .nav { order: 5; flex-basis: 100%; flex-wrap: wrap; margin: 0 -10px; }
  .nav a { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
}
/* Small phones: tighter link padding keeps the four section links on one row down to 375px. Narrower than that
   they take two rows, so the header (and the space held for it) is taller. */
@media (max-width: 409px) { .nav { margin: 0 -6px; } .nav a { padding-inline: 6px; } }
@media (max-width: 379px) { .nav { margin: 0 -4px; } .nav a { padding-inline: 4px; } }
@media (max-width: 374px) { :root { --header-h: 136px; } html { scroll-padding-top: 152px; } }

/* Short windows (a landscape phone, or high zoom): a sticky header would cover much of the page, so it scrolls away. */
@media (max-height: 500px) {
  .site-header { position: static; }
  html { scroll-padding-top: 16px; }
  .readout { position: static; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: var(--t-sm); }
.site-footer .wrap { padding-block: 44px 36px; display: grid; gap: 32px; grid-template-columns: 1.4fr repeat(4, 1fr); }
.site-footer .foot-head { font: 600 var(--t-sm)/1.2 var(--font-body); color: var(--ink); margin: 0 0 14px; letter-spacing: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.footer-about { display: grid; gap: 12px; max-width: 40ch; align-content: start; }
.footer-about .brand { margin: 0; }
.footer-links { display: inline-flex; gap: 18px; }
.footer-legal { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--faint); font-size: var(--t-xs); }
.stamp { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 500; font-feature-settings: var(--tnum); color: var(--muted); }
.stamp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (max-width: 960px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }

/* ---------- Home ---------- */
.hero { padding-block: 56px 8px; display: grid; gap: 28px 48px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
.hero-copy .eyebrow { font: 600 var(--t-sm)/1.2 var(--font-body); color: var(--accent); margin: 0 0 12px; }
.hero h1 { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.028em; max-width: 17ch; }
.hero-copy p { margin-top: 14px; color: var(--muted); font-size: var(--t-md); max-width: 46ch; }
.hero-side { display: grid; gap: 14px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: var(--t-sm); }
.facts span { display: inline-flex; align-items: center; gap: 6px; }
.facts .icon { width: 15px; height: 15px; color: var(--accent); }
.search-box { position: relative; }
.search-box > .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--faint); pointer-events: none; }
.search {
  width: 100%; height: 48px; padding: 0 52px 0 42px; border: 1px solid var(--field-border); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-base);
}
.search::placeholder { color: var(--faint); }
.search:focus { outline: 2px solid transparent; outline-offset: 1px; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
.kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 500 var(--t-xs)/1 var(--font-body); color: var(--faint); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 3px 6px; background: var(--bg); }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; padding-top: 36px; align-items: start; } .kbd { display: none; } }
/* Popular tools: four shortcuts under the search box (written by scripts/seo.mjs). */
.popular { display: grid; gap: 8px; }
.popular-label { font: 600 var(--t-xs)/1.2 var(--font-body); color: var(--muted); }
.popular ul { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; margin: 0; padding: 0; list-style: none; }
.popular a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px 6px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none;
}
.popular a:hover { border-color: var(--accent); color: var(--ink); }
.popular .icon { width: 18px; height: 18px; color: var(--accent); }
/* Phones: the search box and the popular tools come straight after the heading, ahead of the intro,
   so both are in view without scrolling. (Order only: the HTML is the same at every width.) */
@media (max-width: 640px) {
  .hero { display: flex; flex-direction: column; padding-top: 24px; gap: 0; }
  .hero-copy, .hero-side { display: contents; }
  .hero .eyebrow { order: 1; }
  .hero h1 { order: 2; }
  .search-box { order: 3; margin-top: 18px; }
  .popular { order: 4; margin-top: 12px; }
  .hero-copy .hero-intro { order: 5; margin-top: 18px; font-size: var(--t-base); }
  .facts { order: 6; margin-top: 12px; }
  .popular ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .popular a { min-height: 44px; border-radius: var(--r-sm); }
}

.cat-section, #pinned-section { margin-top: 44px; scroll-margin-top: 80px; }
.cat-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.cat-title { font-size: var(--t-lg); font-weight: 650; }
.cat-count { font: 500 var(--t-sm)/1 var(--font-body); font-feature-settings: var(--tnum); color: var(--faint); }
.cat-blurb { margin-left: auto; color: var(--muted); font-size: var(--t-sm); }
.section-title { font: 600 var(--t-sm)/1.2 var(--font-body); color: var(--muted); margin: 0 0 14px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
/* home.js fills the tool sections. Until then keep the content below out of view, so it isn't
   seen jumping down when the tiles arrive (CLS). */
#sections:empty { min-height: 100vh; }
/* With tools pinned, home.js moves them to the top. Keep the tiles hidden until it has, so none jump
   under a finger mid-tap. Shown after 3s regardless, in case the script never runs. */
.has-pins #sections { visibility: hidden; animation: pins-reveal 0s 3s forwards; }
@keyframes pins-reveal { to { visibility: visible; } }
.tile {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 14px; row-gap: 4px;
  padding: 18px 18px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.tile:hover { color: var(--ink); border-color: var(--line-strong); }
/* Lift only where there's a real hover: on a phone a tap leaves :hover stuck and the tile would jump. */
@media (hover: hover) {
  .tile:hover { transform: translateY(-1px); }
  .tile:hover .tile-go { color: var(--accent); transform: translateX(2px); }
}
/* Instant feedback on tap, before the next page arrives. :active only where there's a real hover:
   iOS applies it to tiles a finger scrolls across. */
@media (hover: hover) { .tile:active { transform: scale(.985); border-color: var(--accent); } }
.tile.is-pressed { transform: scale(.985); border-color: var(--accent); }
.tile.is-pressed .tile-go { color: var(--accent); transform: translateX(3px); }
.tile .ico { grid-row: 1 / span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.tile .ico .icon { width: 22px; height: 22px; }
.tile h3 { font-size: var(--t-md); font-weight: 650; padding-right: 28px; align-self: center; }
.tile-link { color: inherit; text-decoration: none; }
.tile-link:hover { color: inherit; }
.tile-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.tile-link:focus-visible { outline: none; }
.tile-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.tile p { grid-column: 2; color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }
.tile-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
.tag { font: 500 var(--t-xs)/1.2 var(--font-body); color: var(--muted); }
.tile-go { width: 16px; height: 16px; color: var(--faint); transition: transform .15s ease, color .15s ease; }
.pin { position: absolute; z-index: 1; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--faint); cursor: pointer; }
.pin .icon { width: 17px; height: 17px; }
.pin:hover { color: var(--ochre); background: var(--sunken); }
.pin[aria-pressed="true"] { color: var(--ochre); }
.pin[aria-pressed="true"] .icon { fill: currentColor; }
.empty { color: var(--muted); padding: 24px 0; display: grid; gap: 12px; }
.empty-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--accent); font: 600 var(--t-sm)/1 var(--font-body); cursor: pointer; }
.chip:hover { border-color: var(--accent); }
@media (max-width: 560px) {
  .grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tile { padding: 14px; }
  .tile-foot { margin-top: 10px; padding-top: 8px; }
  .cat-blurb { margin-left: 0; flex-basis: 100%; }
}

/* ---------- Long-form content ---------- */
.content { max-width: 70ch; margin-top: 64px; }
.content h2 { font-size: var(--t-lg); font-weight: 650; margin: 40px 0 12px; }
.content h2:first-child { margin-top: 0; }
.content p + p, .content p + table, .content table + p, .content ul + p, .content p + ul { margin-top: 12px; }
.content ul { padding-left: 20px; margin: 10px 0 0; display: grid; gap: 6px; }
.content .table-scroll { margin: 16px 0; border-top: 0; }
.content .table-scroll table { margin: 0; }
.content table { margin: 16px 0; border: 1px solid var(--line); border-radius: var(--r-sm); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--surface); }
.content th { background: var(--sunken); color: var(--muted); }
.content td { font-feature-settings: var(--tnum); font-size: var(--t-sm); }

.content tr:last-child td { border-bottom: 0; }
.content details { border-bottom: 1px solid var(--line); }
.content details:first-of-type { border-top: 1px solid var(--line); }
.content summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 600; }
.content summary::-webkit-details-marker { display: none; }
.content summary::after { content: "+" / ""; font: 400 1.25rem/1 var(--font-body); color: var(--faint); }
.content details[open] summary::after { content: "−" / ""; }
.content details p { padding: 0 0 16px; color: var(--muted); }
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 4px; }
.related a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--t-sm); }
.related a:hover { border-color: var(--accent); color: var(--ink); }
.related .icon { width: 18px; height: 18px; color: var(--accent); }

/* ---------- Tool pages ---------- */
/* Shown only with JavaScript off (written into every page by scripts/seo.mjs). */
.noscript { margin: 20px 0 0; padding: 12px 16px; border: 1px solid var(--line-strong); border-left: 4px solid var(--ochre); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--t-sm); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 28px 0 0; font-size: var(--t-sm); color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.tool-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: center; margin: 18px 0 28px; }
.tool-head .ico { grid-row: 1 / span 3; width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r); background: var(--accent-soft); color: var(--accent); }
.tool-head .ico .icon { width: 28px; height: 28px; }
.tool-head h1 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.025em; }
.tool-head p { color: var(--muted); margin-top: 4px; max-width: 62ch; }
.tool-head .tag { color: var(--accent); font-weight: 600; font-size: var(--t-sm); }
.tool-head p { margin-top: 2px; }
/* layout.js adds the icon and tag. Place each item explicitly and hold their cells until they arrive (CLS). */
.tool-head .tag { grid-column: 2; grid-row: 1; }
.tool-head h1 { grid-column: 2; grid-row: 2; }
.tool-head p { grid-column: 2; grid-row: 3; }
.tool-head:not(:has(.ico))::before { content: ""; grid-column: 1; grid-row: 1 / span 3; width: 52px; height: 52px; }
.tool-head:not(:has(.tag))::after { content: ""; grid-column: 2; grid-row: 1; height: calc(var(--t-sm) * 1.2); }
.nowrap { white-space: nowrap; }
@media (max-width: 560px) { .tool-head h1 { font-size: 1.5rem; } .tool-head { align-items: start; column-gap: 14px; } .tool-head .ico, .tool-head:not(:has(.ico))::before { grid-row: 1 / span 2; width: 44px; height: 44px; } .tool-head .ico .icon { width: 24px; height: 24px; } .tool-head p { grid-column: 1 / -1; margin-top: 10px; } }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 820px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; min-width: 0; }
form.card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
form > .card { display: grid; gap: 12px; }
form > .card + .card { margin-top: 12px; }
.card > .section-title { margin-bottom: 0; }

/* Readout: where every answer lands */
.readout { background: var(--readout); color: var(--readout-ink); border-color: var(--readout-border); position: sticky; top: 84px; }
.readout, .calc-display, .big-time, .clock.local { --focus: var(--readout-accent); }
.readout-label { font: 500 var(--t-sm)/1.6 var(--font-body); letter-spacing: 0; text-wrap: wrap; color: var(--readout-muted); }
.readout .kv { border-bottom-color: var(--readout-line); }
.readout .kv span:first-child { color: var(--readout-muted); }
.readout .note { color: var(--readout-ink); background: rgba(255, 255, 255, .06); border-radius: var(--r-sm); padding: 10px 12px; }
.readout .note:empty { display: none; }
.readout .disclaimer { color: var(--readout-muted); }
.readout a { color: var(--readout-accent); }
.readout .table-scroll { border-top-color: var(--readout-line); }
.readout th, .readout td { border-bottom-color: var(--readout-line); }
.readout th { color: var(--readout-muted); }
.readout .section-title { color: var(--readout-muted); margin-top: 22px; }
@media (max-width: 820px) { .readout { position: static; } }

.result-big { font: 600 clamp(2.25rem, 6vw, 3rem)/1.05 var(--font-display); letter-spacing: -.03em; font-feature-settings: var(--tnum); margin: 6px 0 14px; overflow-wrap: anywhere; }
.card:not(.readout) .result-big { color: var(--accent); font-size: clamp(1.6rem, 5vw, 2rem); margin: 0; }
.kv { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
/* The label takes the room it needs; the value drops below it only when the two can't share a line.
   Values wrap between words ("4 years 8 months") but never inside a number. */
.kv span:first-child { color: var(--muted); font-size: var(--t-sm); flex: 1 1 12ch; min-width: 0; }
.kv span:last-child { font: 600 var(--t-base)/1.4 var(--font-display); font-feature-settings: var(--tnum); text-align: right; margin-left: auto; min-width: 0; }
.note { font-size: var(--t-sm); color: var(--muted); margin-top: 12px; }
.disclaimer { font-size: var(--t-xs); line-height: 1.55; color: var(--muted); margin-top: 16px; }

/* Fields */
/* A fieldset that groups fields without a box of its own (its legend is the group's heading). */
fieldset.plain { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.plain > legend { padding: 0; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.field label, .field-label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.field small { color: var(--muted); font-size: var(--t-xs); }
input[type="number"], input[type="text"], input[type="date"], input[type="datetime-local"], select {
  width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--field-border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-base);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input[type="number"], input.num { font-feature-settings: var(--tnum); }
input[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
input[aria-invalid="true"]:focus { border-color: var(--error); box-shadow: 0 0 0 3px var(--accent-soft), inset 0 0 0 1px var(--error); }
.field-error { margin: 0; color: var(--error); font-size: var(--t-sm); font-weight: 600; line-height: 1.4; }
.field-error[hidden] { display: none; }
.check + .field-error, .timer-inputs + .field-error { margin-top: -4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
input:hover, select:hover { border-color: var(--faint); }
input:focus, select:focus, input:focus-within { outline: 2px solid transparent; outline-offset: 1px; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
/* Forced colours drop box-shadows, so the focus ring becomes a real outline in the system highlight colour. */
@media (forced-colors: active) { input:focus, select:focus, .search:focus { outline: 2px solid Highlight; outline-offset: 1px; } }
select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat;
}
.check { display: flex; align-items: center; gap: 10px; font-size: var(--t-base); cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.hint { display: block; margin: -8px 0 0 28px; color: var(--muted); font-size: var(--t-xs); }
.check:has(input:disabled) { color: var(--faint); cursor: not-allowed; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
  font: 600 var(--t-sm)/1 var(--font-body); cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.btn:hover { border-color: var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn .icon { width: 16px; height: 16px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.result-actions { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--readout-line); }
.result-actions .btn { justify-self: start; background: transparent; color: var(--readout-ink); border-color: var(--readout-line); }
.result-actions .btn:hover { border-color: var(--readout-ink); }
.report-figure { font-size: var(--t-sm); color: var(--readout-muted); }
.report-figure a { color: var(--readout-ink); text-underline-offset: 3px; }
.report-figure a:hover { text-decoration-thickness: 2px; }
.nudge { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--readout-muted); }
.nudge .icon { width: 16px; height: 16px; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--t-sm); }
th, td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
th { font-weight: 600; font-size: var(--t-sm); color: var(--muted); }
.table-scroll { overflow: auto; border-top: 1px solid var(--line); }
.table-scroll.is-long { max-height: 340px; }
.total-row th, .total-row td { color: inherit; font-weight: 700; border-top: 2px solid var(--line-strong); }
.readout .total-row th, .readout .total-row td { border-top-color: var(--readout-line); }
.readout td { font-feature-settings: "tnum" 1; font-size: var(--t-sm); }
.readout thead th { position: sticky; top: 0; background: var(--readout); }

/* Calculator */
.calc-modes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-sm); background: var(--sunken); border: 1px solid var(--line); }
.seg button { border: 0; border-radius: 4px; background: none; color: var(--muted); padding: 7px 14px; font: 600 var(--t-sm)/1 var(--font-body); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent), 0 1px 2px rgba(16, 24, 40, .12); }
@media (forced-colors: active) { .seg button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; } }
.sci-keys { grid-template-columns: repeat(5, 1fr); margin-bottom: 8px; }
.sci-keys button { height: 44px; font-size: var(--t-sm); font-weight: 600; color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.calc.is-sci .calc-keys:not(.sci-keys) button { height: 50px; }
.calc-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 820px) { .calc-layout { grid-template-columns: minmax(0, 1fr); } }
.calc { padding: 14px; }
.tape { list-style: none; margin: 0; padding: 0; display: grid; }
.tape li button { width: 100%; display: flex; justify-content: space-between; gap: 16px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: 500 var(--t-sm)/1.4 var(--font-body); font-feature-settings: var(--tnum); cursor: pointer; text-align: left; }
.tape li button:hover { color: var(--accent); }
.tape li span:first-child { color: var(--muted); overflow-wrap: anywhere; }
.tape-empty { color: var(--muted); font-size: var(--t-sm); }
.calc-display { background: var(--readout); color: var(--readout-ink); border-radius: var(--r-sm); padding: 16px 16px 14px; text-align: right; margin-bottom: 12px; min-height: 96px; display: grid; align-content: end; gap: 4px; overflow-wrap: anywhere; }
.calc-expr { color: var(--readout-muted); min-height: 1.4em; font: 500 var(--t-sm)/1.4 var(--font-body); font-feature-settings: var(--tnum); }
.calc-out { font: 600 clamp(1.75rem, 8vw, 2.25rem)/1.1 var(--font-display); min-width: 0; letter-spacing: -.03em; font-feature-settings: var(--tnum); }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-keys button { height: 56px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 500 1.1875rem/1 var(--font-body); font-feature-settings: var(--tnum); cursor: pointer; transition: background .1s ease, border-color .1s ease; }
.calc-keys button:hover { border-color: var(--line-strong); background: var(--sunken); }
.calc-keys button:active { transform: translateY(1px); }
.calc-keys button.op { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.calc-keys button.eq { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.calc-keys button[data-k="C"], .calc-keys button[data-k="⌫"] { color: var(--muted); font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600; }

/* Stopwatch / timer */
.big-time {
  font: 600 clamp(2.75rem, 13vw, 5rem)/1 var(--font-display); letter-spacing: -.035em; text-align: center; font-feature-settings: var(--tnum);
  background: var(--readout); color: var(--readout-ink); border-radius: var(--r-sm); padding: 32px 12px; margin: 0 0 16px;
}
.laps { list-style: none; padding: 0; margin: 16px 0 0; max-height: 280px; overflow: auto; }
.laps:not(:empty) { border-top: 1px solid var(--line); }
.laps li { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; padding: 9px 2px; border-bottom: 1px solid var(--line); font: 500 var(--t-sm)/1.4 var(--font-body); font-feature-settings: var(--tnum); }
.laps li span:first-child { color: var(--muted); }
.timer-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.timer-done { margin: -6px 0 14px; text-align: center; font: 600 var(--t-md)/1.4 var(--font-body); color: var(--accent); }
.flash { animation: flash 1s ease-in-out 3; }
@keyframes flash { 50% { color: var(--readout-accent); } }

/* World clock */
.clock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
/* Hold room for the default five clocks until world-clock.js draws them (CLS). */
.clock-grid:empty { min-height: 264px; }
@media (max-width: 735px) { .clock-grid:empty { min-height: 402px; } }
@media (max-width: 503px) { .clock-grid:empty { min-height: 678px; } }
.clock { position: relative; display: grid; gap: 2px; }
.clock .city { font-weight: 600; font-size: var(--t-sm); padding-right: 24px; }
.clock .time { font: 600 1.875rem/1.2 var(--font-display); letter-spacing: -.03em; font-feature-settings: var(--tnum); }
.clock .meta { color: var(--muted); font-size: var(--t-xs); }
.clock.local { background: var(--readout); color: var(--readout-ink); border-color: transparent; }
.clock.local .meta { color: var(--readout-muted); }
.clock .remove { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border: 0; border-radius: 4px; background: none; color: var(--faint); cursor: pointer; font-size: .875rem; }
.clock .remove:hover { background: var(--sunken); color: var(--ink); }
.add-row { display: flex; gap: 8px; margin-bottom: 16px; }
.add-row select { flex: 1; min-width: 0; }

/* Ads: one labelled slot, space reserved so the page doesn't jump when the ad loads */
/* A clear gap and a rule above the slot, so an ad never reads as part of the results, the Copy link and Print
   buttons or the coffee note above it. */
.ad-slot { position: relative; margin-top: 64px; padding: 12px; min-height: 280px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--sunken); }
.ad-slot::before { content: ""; position: absolute; left: 0; right: 0; top: -32px; border-top: 1px solid var(--line-strong); }
.ad-label { display: block; margin-bottom: 8px; font: 500 var(--t-xs)/1 var(--font-body); color: var(--faint); }

/* Privacy page */
.legal { max-width: 70ch; padding-block: 28px 0; }
.legal h1 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.025em; margin: 18px 0 6px; }
.legal .updated { color: var(--muted); font-size: var(--t-sm); }
.legal h2 { font-size: var(--t-lg); font-weight: 650; margin: 36px 0 10px; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 12px; }
.legal ul { padding-left: 20px; margin: 10px 0 0; display: grid; gap: 6px; }
/* Get in touch: one card per reason to write, each with its own email button. */
.legal .contact-reasons { list-style: none; padding: 0; gap: 12px; margin-top: 16px; }
.contact-reasons li { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.contact-reasons h3 { font-size: var(--t-md); font-weight: 650; margin: 0 0 4px; }
.contact-reasons p { margin: 0 0 12px; color: var(--muted); }
.contact-reasons .btn { height: auto; min-height: 40px; padding-block: 9px; line-height: 1.3; text-align: left; text-decoration: none; }
.contact-reasons .btn[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .has-pins #sections { animation: pins-reveal 0s 3s forwards !important; }
}

/* ---------- Charts ---------- */
.chart-card { margin-top: 20px; }
.chart-card .section-title { margin-bottom: 4px; }
.assumptions { margin-top: 20px; font-size: var(--t-sm); line-height: 1.55; }
.assumptions > .section-title { font-size: var(--t-md); color: var(--ink); margin-bottom: 10px; }
.assumptions p, .assumptions ul { margin: 0 0 10px; }
.assumptions ul { padding-left: 1.2em; }
.assumptions li { margin-bottom: 4px; }
.assumptions > :last-child { margin-bottom: 0; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0 0 8px; padding: 0; font-size: var(--t-sm); color: var(--muted); }
.chart-legend li { display: flex; align-items: center; gap: 7px; }
.chart-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.chart-key.s1, .chart-svg .s1 { background: var(--series-1); fill: var(--series-1); }
.chart-key.s2, .chart-svg .s2 { background: var(--series-2); fill: var(--series-2); }
.chart-plot { position: relative; }
.chart-table { margin-top: 14px; }
.chart-table summary { cursor: pointer; color: var(--accent); font-size: var(--t-sm); font-weight: 600; }
.chart-table .table-scroll { margin-top: 10px; max-height: 360px; overflow: auto; }
.chart-svg { display: block; max-width: 100%; height: auto; overflow: visible; border-radius: var(--r-sm); }
.chart-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.chart-svg text { fill: var(--muted); font: 500 12px var(--font-body); font-feature-settings: var(--tnum); }
.chart-grid line { stroke: var(--line); stroke-width: 1; }
.chart-base { stroke: var(--line-strong); stroke-width: 1; }
.chart-hl { fill: var(--sunken); }
.chart-tip { position: absolute; top: 4px; transform: translateX(-50%); pointer-events: none; z-index: 2; min-width: 168px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12); padding: 8px 10px; font-size: var(--t-xs); display: grid; gap: 3px; }
.chart-tip strong { font-size: var(--t-sm); }
.chart-tip span { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.chart-tip b { margin-left: auto; padding-left: 12px; color: var(--ink); font-weight: 600; font-feature-settings: var(--tnum); }
.chart-tip .chart-tip-total { border-top: 1px solid var(--line); padding-top: 3px; margin-top: 2px; }
@media (forced-colors: active) { .chart-svg .s1 { fill: CanvasText; } .chart-svg .s2 { fill: GrayText; } .chart-key.s1 { background: CanvasText; } .chart-key.s2 { background: GrayText; } }

/* ---------- In Aussie terms ---------- */
/* scripts/content.py leaves an empty .aus-slot where the card goes. Until js/aussie.js fills it, it holds
   about the card's height, so the explainer below doesn't move when the card arrives (CLS). */
.aus-slot:empty { min-height: 519px; margin-top: 20px; }
@media (max-width: 900px) { .aus-slot:empty { min-height: 621px; } } /* tiles two to a row */
@media (max-width: 640px) { .aus-slot:empty { min-height: 0; } } /* phones: well below the first screen */
.aus-card { margin-top: 20px; }
.aus-card .section-title { font-size: var(--t-md); color: var(--ink); margin-bottom: 14px; }
.aus-amount { color: var(--accent); font-feature-settings: var(--tnum); }
.aus-tiles { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 900px) { .aus-tiles { grid-template-columns: repeat(2, 1fr); } }
.aus-tile { background: var(--sunken); border-radius: var(--r); padding: 14px; display: grid; gap: 4px; align-content: start; }
.aus-tile .icon { color: var(--accent); width: 22px; height: 22px; margin-bottom: 4px; }
.aus-num { font: 600 clamp(1.4rem, 3.4vw, 1.75rem)/1.1 var(--font-display); letter-spacing: -.02em; font-feature-settings: var(--tnum); }
.aus-unit { font-size: var(--t-sm); color: var(--muted); line-height: 1.35; }
.aus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; }
@media (max-width: 760px) { .aus-grid { grid-template-columns: 1fr; } }
.aus-count-text { margin: 0 0 12px; font-size: var(--t-base); line-height: 1.45; }
.aus-pics { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 340px; }
.aus-pic { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.aus-pic-empty { fill: none; stroke: var(--faint); stroke-width: 1.2; }
.aus-pic-full { fill: var(--series-2); }
.aus-pic .cut { fill: var(--surface); }
.aus-pic-key { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: var(--t-xs); color: var(--muted); }
.aus-pic-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--series-2); flex: none; }
.aus-est { text-decoration: none; font-size: var(--t-xs); color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 2px; white-space: nowrap; }
.aus-sub { font: 600 var(--t-sm)/1.2 var(--font-body); color: var(--muted); margin: 0 0 12px; }
.aus-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.aus-bars li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label value" "track track"; gap: 4px 12px; font-size: var(--t-sm); }
.aus-bar-label { grid-area: label; color: var(--muted); }
.aus-bar-value { grid-area: value; font-weight: 600; font-feature-settings: var(--tnum); }
.aus-bar-track { grid-area: track; height: 10px; background: var(--sunken); border-radius: 5px; overflow: hidden; }
.aus-bar { display: block; height: 100%; background: var(--line-strong); border-radius: 5px; }
.aus-bars .is-you .aus-bar { background: var(--series-1); }
.aus-bars .is-you .aus-bar-label { color: var(--ink); font-weight: 600; }
.aus-sources { margin-top: 18px; font-size: var(--t-xs); color: var(--muted); }
.aus-sources summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: var(--t-sm); }
.aus-sources ul { margin: 10px 0 6px; padding-left: 18px; display: grid; gap: 4px; }
@media (forced-colors: active) { .aus-bar, .aus-pic-empty { fill: GrayText; background: GrayText; } .aus-bars .is-you .aus-bar { background: Highlight; } .aus-pic-full { fill: Highlight; } }

/* ---------- Touch targets (44px on touch screens) ---------- */
@media (pointer: coarse) {
  .pin, .icon-btn { width: 44px; height: 44px; }
  .pin { top: 6px; right: 6px; }
  .seg button { min-height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .chart-table summary, .aus-sources summary { padding-block: 11px; }
}
@media (max-width: 640px) { .site-footer ul { gap: 0; } .site-footer ul a { display: block; padding-block: 8px; } }
/* Reserve the chart's height so the page doesn't jump when it draws. */
#chart:empty { min-height: 252px; }
.chart-svg { touch-action: pan-y; }
/* Short phone screens: keep the whole scientific keypad in view. */
@media (max-height: 760px) and (max-width: 560px) { .calc.is-sci .calc-keys button { min-height: 40px; height: 40px; } }
.aus-key { margin: 14px 0 0; font-size: var(--t-xs); color: var(--muted); }
/* Phones show the tiles, with the rest behind "More comparisons"; wider screens show it all, without the toggle. */
.aus-more > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: var(--t-sm); }
.aus-more[open] > summary { margin-bottom: 16px; }
@media (min-width: 641px) { .aus-more > summary { display: none; } }
@media (max-width: 640px) { .aus-tiles { margin-bottom: 14px; } }
@media (pointer: coarse) { .aus-more > summary { padding-block: 11px; } }

/* Next step: a link at the foot of a results panel to the tool you'd usually use next, filled in. */
.next-step { margin-top: 16px; }
.next-step a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: var(--t-sm); }
.next-step .icon { width: 16px; height: 16px; flex: none; }

/* Phones: the headline result in a bar along the bottom of the screen while the results panel is further
   down (js/layout.js). Tapping it goes to the panel. The page gets matching room at the bottom. */
.mini-result {
  position: fixed; z-index: 9; left: 0; right: 0; bottom: 0; width: 100%; min-height: 56px;
  display: flex; align-items: center; gap: 12px; margin: 0;
  padding: 8px max(20px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  border: 0; border-top: 1px solid var(--readout-line); border-radius: 0; background: var(--readout); color: var(--readout-ink);
  font: inherit; text-align: left; cursor: pointer; box-shadow: 0 -6px 18px rgba(0, 0, 0, .14);
  --focus: var(--readout-accent);
}
.mini-result:focus-visible { outline-offset: -4px; }
.mini-result-label { flex: 1 1 auto; min-width: 0; color: var(--readout-muted); font-size: var(--t-sm); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-result-value { flex: none; font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -.02em; font-feature-settings: var(--tnum); white-space: nowrap; }
.mini-result .mini-result-go { width: 18px; height: 18px; color: var(--readout-accent); transform: rotate(90deg); }
html.has-mini-result body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
html.has-mini-result { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 821px) { .mini-result { display: none !important; } }
@media (forced-colors: active) { .mini-result { border-top: 2px solid CanvasText; } }

.checked-line { font-size: var(--t-sm); color: var(--muted); border-left: 3px solid var(--accent-soft); padding-left: 12px; }
.content .advice-line { margin-top: 16px; }
.readout-hint { margin: -6px 0 12px; font-size: var(--t-sm); color: var(--readout-muted); }
/* A results panel taller than the window scrolls with the page instead of sticking, so nothing is cut off. */
.readout.is-tall { position: static; }

/* Page changes: a short cross-fade between pages (browsers without support just load normally), and a
   loading bar from the moment a link is clicked, so a slow connection never looks like a missed tap. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
html.is-leaving body::before {
  content: ""; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 3px; background: var(--accent);
  transform-origin: left; animation: nav-progress 2.5s cubic-bezier(.1, .7, .2, 1) forwards; pointer-events: none;
}
@keyframes nav-progress { from { transform: scaleX(.05); } to { transform: scaleX(.92); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* "In today's dollars" (present value) line under a result: as prominent as the line it explains. */
.readout .kv-pv span:first-child { color: var(--readout-ink); }
.kv-pv span:last-child { font-size: var(--t-md); }
.kv[hidden] { display: none; }

/* "Tools I use" affiliate card (off by default). The disclosure is at body-text size, directly above the links. */
.affiliates { margin-top: 40px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.content .affiliates h2 { margin: 0 0 8px; font-size: var(--t-md); }
.affiliates-disclosure { font-size: var(--t-base); color: var(--ink); }
.affiliates ul { margin-top: 12px; }
.affiliates li span { color: var(--muted); }

/* Printing (the "Print or save as PDF" button, or the browser's own Print). Light colours whatever the theme,
   no header, ads, coffee links, buttons, form controls or explainer: just the tool name, the inputs as a list,
   the results, the chart and assumptions, and a footer with the date checked, the not-advice statement and
   the link that reopens the result. */
.print-only { display: none; }
@media print {
  /* Browsers drop backgrounds when printing; the legend swatches carry the series colours, so keep them. */
  .chart-key { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  :root:not(#_) {
    --bg: #fff; --surface: #fff; --sunken: #fff; --ink: #000; --muted: #333; --faint: #444; --line: #bbb; --line-strong: #888;
    --accent: #0b5a4d; --accent-soft: #ccc; --readout: #fff; --readout-ink: #000; --readout-muted: #333; --readout-line: #bbb;
    --readout-accent: #0b5a4d; --readout-border: #888; --series-1: #0b8a72; --series-2: #b8741a; color-scheme: light;
  }
  @page { margin: 14mm; }
  html, body { background: #fff !important; color: #000; font-size: 11pt; }
  .site-header, .skip-link, .site-footer, .ad-slot, .bmc, .mini-result, #theme-toggle, .result-actions, .report-figure, .crumbs,
  .aus-slot, main .content, .affiliates, .readout-hint, .next-step, .noscript, main form.card, .tool-head .ico, .tool-head .tag,
  details.chart-table:not([open]), html.is-leaving body::before { display: none !important; }
  .print-only { display: block; }
  .wrap { max-width: none; padding: 0; }
  .tool-head { display: block; margin: 0 0 10px; }
  .tool-head h1 { font-size: 18pt; }
  .cols { display: block; }
  .card { border-color: #999; padding: 12px 14px; margin-top: 10px; break-inside: avoid; box-shadow: none; }
  .readout { position: static; }
  .readout .note { background: none; padding: 0; }
  .table-scroll, .table-scroll.is-long { max-height: none !important; overflow: visible !important; }
  .chart-card, .assumptions { break-inside: avoid; }
  .assumptions { break-inside: auto; }
  a { color: inherit; text-decoration: underline; }
  .print-inputs h2 { font-size: 12pt; margin: 0 0 6px; }
  .print-inputs dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 0; }
  .print-inputs dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid #ddd; break-inside: avoid; }
  .print-inputs dt { color: #333; }
  .print-inputs dd { margin: 0; font-weight: 600; text-align: right; }
  .print-foot { margin-top: 14px; padding-top: 8px; border-top: 1px solid #888; font-size: 9pt; color: #333; break-inside: avoid; }
  .print-foot p + p { margin-top: 4px; }
  .print-foot p:nth-last-child(2) { word-break: break-all; }
}