/* Shared by every page: theme tokens, base layout, inputs panel, result tiles and the site menu */
:root {
  --bg: #f3eee3;
  --surface: #fffdf8;
  --fg: #1c2420;
  --muted: #5a6058;
  --line: #e1d8c4;
  --invest: #0d5240;
  --car: #b5432c;
  --car-fill: rgba(204, 79, 54, 0.10);
  --stay: #55702a;
  --focus: #2563eb;
  /* The graphs' lines, in a fixed order (docs/decisions.md, 2026-11-10: The graphs get colours of their own): the main
     line in the brand's emerald, then blue, pink for the hard case, violet and lime. Chosen to stay apart for full
     colour vision and for colour-blind readers, on this surface and on the dark one. Only for series in a graph and
     the cards and dots that name them; --car stays the colour for a shortfall. */
  --chart-1: #0d5240; --chart-2: #278cec; --chart-3: #d0579c; --chart-4: #6724ad; --chart-5: #7f951d;
  --btn-bg: #0d5240; --btn-fg: #ffffff; --btn-hover: #0a4334;
  /* The app frame: one pale emerald behind the page's sheet, shared by the top bar and the menu, which sits on it with
     no box or edge of its own (docs/decisions.md, 2026-11-08: The menu and top bar share one background); the menu's
     current page's pill a deeper green of the same family; and the emerald accent with its pale tints, for the
     selected menu item and the Ask AI button (the Deep jewel palette, docs/decisions.md, 2026-11-04). */
  --canvas: #e3eee7; --sheet: #fffdf8;
  --nav-bg: #e3eee7; --nav-selected: #bfd9c9;
  --accent: #0d5240; --accent-container: #d8eadf; --on-accent-container: #083a2d; --accent-selected: #cbe1d4;
  /* Accent-coloured text (outlined buttons, the chosen tab), form fields' fill and outline, and text on --car */
  --accent-text: #0d5240; --field-bg: #fffdf8; --field-border: #8a8578; --on-car: #ffffff;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101a17; --surface: #172420; --fg: #e8efe9; --muted: #9fb0a8; --line: #2a3833;
    --invest: #4fd1aa; --car: #f07a5e; --car-fill: rgba(240, 122, 94, 0.12); --stay: #a9cc6c; --focus: #7aa7ff;
    --chart-1: #4fd1aa; --chart-2: #5b8df9; --chart-3: #cd7671; --chart-4: #a93db4; --chart-5: #716e09;
    --btn-bg: #4fd1aa; --btn-fg: #101a17; --btn-hover: #7fe0c2;
    --canvas: #0f2a22; --sheet: #13201c;
    --nav-bg: #0f2a22; --nav-selected: #1c5446;
    --accent: #4fd1aa; --accent-container: #15463a; --on-accent-container: #c5f0e1; --accent-selected: #1c5446;
    --accent-text: #5fdcb6; --field-bg: #101a17; --field-border: #6c7d76; --on-car: #101a17;
    color-scheme: dark;
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  --bg: #101a17; --surface: #172420; --fg: #e8efe9; --muted: #9fb0a8; --line: #2a3833;
  --invest: #4fd1aa; --car: #f07a5e; --car-fill: rgba(240, 122, 94, 0.12); --stay: #a9cc6c; --focus: #7aa7ff;
    --chart-1: #4fd1aa; --chart-2: #5b8df9; --chart-3: #cd7671; --chart-4: #a93db4; --chart-5: #716e09;
  --btn-bg: #4fd1aa; --btn-fg: #101a17; --btn-hover: #7fe0c2;
  --canvas: #0f2a22; --sheet: #13201c;
  --nav-bg: #0f2a22; --nav-selected: #1c5446;
  --accent: #4fd1aa; --accent-container: #15463a; --on-accent-container: #c5f0e1; --accent-selected: #1c5446;
  --accent-text: #5fdcb6; --field-bg: #101a17; --field-border: #6c7d76; --on-car: #101a17;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* classes like .btn set display, which would otherwise show hidden elements */
/* The app frame (nav.js): a bar across the top, the menu in a drawer on the left, and the page on a rounded sheet.
   From 900px wide the drawer is docked, open or as a rail of icons (theme.js applies the member's choice before
   anything is drawn, so the page doesn't move). Narrower, ☰ slides it over the page. */
:root { --bar-height: 64px; --drawer: 256px; }
html { scroll-padding-top: calc(var(--bar-height) + 12px); }  /* Anchors stop below the top bar. */
:root[data-nav="rail"] { --drawer: 80px; }
body {
  background: var(--canvas); color: var(--fg);
  font: 15px/1.55 var(--font-body);
  padding: var(--bar-height) 0 0;
  margin: 0;
}
/* The page's sheet. Its own width decides the page's layouts (container queries), whatever the drawer takes. */
main {
  max-width: 1240px; margin: 0 auto; display: grid; gap: 24px; align-content: start; container-type: inline-size;
  min-height: calc(100dvh - var(--bar-height));
  padding: 20px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
  background: var(--sheet); border-radius: 16px 16px 0 0;
}
/* The wide page width (theme.js, FiaidWidth): the sheet may grow to 1680px, so it only differs on big screens. The
   layouts that use the room are container queries on widths a regular sheet never reaches (main from 1360px, a plan
   page's results from 1100px). */
:root[data-width="wide"] main { max-width: 1680px; }
/* The public home page (Pricing) is always the regular width, and so is every public page for a visitor: Wide is a
   member's choice for this device, and a visitor has no switch to undo one left from before. */
:root[data-width="wide"] main.pricing,
:root[data-width="wide"] body[data-public]:not([data-signed-in]) main { max-width: 1240px; }
@media (min-width: 700px) {
  body { padding: var(--bar-height) 16px 16px; }
  main { padding: 28px 32px 48px; border-radius: 16px; min-height: calc(100dvh - var(--bar-height) - 16px); }
}
@media (min-width: 900px) {
  body { padding-left: var(--drawer); transition: padding-left 160ms ease; }
}

/* The top bar: ☰, the brand, and the member's initial (their account menu) or Sign in. It stays above the drawer
   and its shade, so ☰ always closes the menu again. */
.app-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 45; height: var(--bar-height);
  display: flex; align-items: center; gap: 8px;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
  background: var(--canvas);
}
.icon-button {
  -webkit-appearance: none; appearance: none; flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fg); cursor: pointer;
}
.icon-button svg { width: 22px; height: 22px; }
.icon-button:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.icon-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-brand {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 8px 4px 4px; border-radius: 8px;
  font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--fg); text-decoration: none;
}
.site-brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The logo's mark: public/brand/mark.svg, or mark-dark.svg in the dark theme (as the tokens above choose it). */
.brand-mark { flex: none; display: block; width: 32px; height: 32px; }
.brand-mark img { display: block; width: 32px; height: 32px; }
.brand-mark .brand-mark-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark .brand-mark-light { display: none; }
  :root:not([data-theme="light"]) .brand-mark .brand-mark-dark { display: block; }
}
:root[data-theme="dark"] .brand-mark .brand-mark-light { display: none; }
:root[data-theme="dark"] .brand-mark .brand-mark-dark { display: block; }
.app-bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* A visitor's frame: on public pages (<body data-public>) until nav.js marks the body data-signed-in, there's no drawer
   and no ☰, the page takes the full width, and from 900px the home page's sections are links in the top bar. */
.visitor-links { display: none; }
body[data-public]:not([data-signed-in]) .site-nav,
body[data-public]:not([data-signed-in]) .nav-scrim,
body[data-public]:not([data-signed-in]) .app-bar > .icon-button { display: none; }
body[data-public]:not([data-signed-in]) .app-bar { padding-left: max(16px, env(safe-area-inset-left, 0px)); }
@media (min-width: 900px) {
  body[data-public]:not([data-signed-in]) { padding-left: 16px; }
  body[data-public]:not([data-signed-in]) .visitor-links { display: flex; gap: 4px; margin-left: 28px; min-width: 0; }
}
.visitor-links a {
  padding: 8px 12px; border-radius: 999px; font: 500 14px var(--font-body); color: var(--muted); text-decoration: none; white-space: nowrap;
}
.visitor-links a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.visitor-links a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.account-button {
  -webkit-appearance: none; appearance: none; flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--stay); color: var(--surface); font: 600 16px var(--font-body);
}
.account-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The account menu, under the member's initial (a popover, so a click outside or Esc closes it). Its own height and
   rows packed at the top: Safari otherwise stretched the popover to the window's foot and spread the rows down it. */
.account-menu {
  position: fixed; inset: calc(var(--bar-height) - 4px) max(12px, env(safe-area-inset-right, 0px)) auto auto; margin: 0;
  width: 280px; max-width: calc(100vw - 24px); height: auto; max-height: calc(100dvh - var(--bar-height) - 8px);
  overflow-y: auto; padding: 8px; display: none; gap: 2px; align-content: start;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--fg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.account-menu:popover-open { display: grid; }  /* Shut, and in browsers without popovers, it stays hidden. */
.account-email { margin: 0 0 6px; padding: 8px 12px 12px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.account-menu a, .account-menu button {
  -webkit-appearance: none; appearance: none; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left;
  font: 500 14px var(--font-body); color: var(--fg); text-decoration: none;
}
.account-menu a:hover, .account-menu button:hover { background: var(--bg); }
.account-menu a:focus-visible, .account-menu button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* The account menu's Wide layout switch (nav.js): a label with "On this device" under it, and a track on the right. */
.width-switch-text { display: grid; gap: 1px; flex: 1; }
.width-switch-text small { font: 400 12px var(--font-body); color: var(--muted); }
.switch-track {
  flex: none; position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--field-border);
  transition: background 120ms ease;
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); transition: transform 120ms ease;
}
.width-switch[aria-checked="true"] .switch-track { background: var(--accent); }
.width-switch[aria-checked="true"] .switch-track::after { transform: translateX(16px); }

/* The menu drawer. Its items are round pills, set in from its edge, the current page's in the accent tint. Sliding
   over the page (under 900px) it has its own background and round corners on the right, like the page's sheet;
   docked, it sits on the frame with no box or edge of its own. */
.site-nav {
  position: fixed; z-index: 40; top: var(--bar-height); bottom: 0; left: 0;
  width: 280px; max-width: calc(100vw - 56px);
  display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 12px 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--nav-bg); border-radius: 0 16px 16px 0;
  transform: translateX(-100%); visibility: hidden;
  transition: transform 200ms ease, visibility 0s linear 200ms;
}
:root[data-menu="open"] .site-nav {
  transform: none; visibility: visible; transition: transform 200ms ease;
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.18);
}
.nav-scrim {
  position: fixed; inset: var(--bar-height) 0 0 0; z-index: 35; background: rgba(10, 15, 20, 0.45);
  opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms;
}
:root[data-menu="open"] .nav-scrim { opacity: 1; visibility: visible; transition: opacity 200ms ease; }
.nav-icon { display: grid; place-items: center; flex: none; width: 20px; height: 20px; }
.nav-icon svg { width: 20px; height: 20px; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.site-sections { flex: 1 0 auto; display: flex; flex-direction: column; gap: 6px; }
.nav-section { display: flex; flex-direction: column; }
.nav-heading { margin: 10px 0 2px; padding: 0 0 0 26px; font: 500 12px var(--font-body); color: var(--muted); white-space: nowrap; }
.site-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.site-menu a {
  display: flex; align-items: center; gap: 16px; min-height: 36px; margin-left: 12px; padding: 0 16px 0 14px; border-radius: 999px;
  font: 500 14px var(--font-body); color: var(--fg); text-decoration: none; white-space: nowrap;
}
.site-menu a:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.site-menu a[aria-current="page"] { background: var(--nav-selected); color: var(--on-accent-container); font-weight: 600; }
.site-menu a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* A members-only page in a trial or expired account's menu (nav.js, an item's "lock"): a small lock after its name. */
/* Sabbatical's or Between jobs' place in the menu while /api/me hasn't said which (nav.js): held empty, not flipped. */
.site-menu .nav-pending { visibility: hidden; }
.site-menu a .nav-lock { margin-left: auto; width: 16px; height: 16px; color: var(--muted); }
.site-menu a .nav-lock svg { width: 16px; height: 16px; }

/* The privacy notice and terms, at the foot of the drawer */
.nav-legal { margin: auto 0 0; padding: 4px 0 4px 26px; font-size: 12px; white-space: nowrap; }

/* Docked, from 900px wide: the drawer sits beside the page. As a rail it keeps only the icons; the labels stay for
   screen readers, and each item's title names it. */
@media (min-width: 900px) {
  .site-nav, :root[data-menu="open"] .site-nav {
    z-index: 20; width: var(--drawer); max-width: none; transform: none; visibility: visible; box-shadow: none;
    background: transparent; border-radius: 0;
    transition: width 160ms ease;
  }
  .nav-scrim { display: none; }
  :root[data-nav="rail"] .site-nav { padding-right: 0; }
  :root[data-nav="rail"] .site-nav .nav-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  :root[data-nav="rail"] .nav-heading, :root[data-nav="rail"] .nav-legal { display: none; }
  :root[data-nav="rail"] .site-menu a .nav-lock { display: none; }  /* The rail shows icons only; the title says it. */
  :root[data-nav="rail"] .nav-section + .nav-section { border-top: 1px solid var(--line); padding-top: 6px; margin-left: 12px; }
  :root[data-nav="rail"] .nav-section + .nav-section .site-menu a { margin-left: 0; }
  :root[data-nav="rail"] .site-menu a { width: 56px; min-height: 40px; margin-left: 12px; padding: 0; justify-content: center; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body, .site-nav, :root[data-menu="open"] .site-nav, .nav-scrim, :root[data-menu="open"] .nav-scrim { transition: none; }
}
/* A page's sections as tabs (FiaidPageTabs). A tab-group holds several sections as one tab without changing their
   layout. On a narrow screen the bar scrolls sideways by itself, never the page. */
.tab-group { display: contents; }
.page-tabs {
  display: flex; gap: 2px 4px; margin: 0 0 18px; border-bottom: 1px solid var(--line);
  position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; max-width: 100%;
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tabs a {
  flex: none; white-space: nowrap; padding: 11px 16px 9px; margin-bottom: -1px; border-bottom: 3px solid transparent;
  border-radius: 4px 4px 0 0; font: 500 14px var(--font-body); color: var(--muted); text-decoration: none;
}
.page-tabs a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.page-tabs a[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.page-tabs a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (max-width: 480px) { .page-tabs { gap: 0; } .page-tabs a { padding: 11px 9px 9px; } }
/* Tabs in groups (a tab's "group"): each group's name above its tabs; on a phone, one menu grouped the same. */
.page-tabs.grouped { gap: 4px 20px; flex-wrap: wrap; overflow: visible; }
.page-tab-group { display: grid; gap: 0; }
.page-tab-group-name { padding: 6px 16px 0; font: 600 10.5px var(--font-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.page-tab-group-tabs { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.page-tabs-menu { display: none; width: 100%; margin: 0 0 18px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--fg); font: 500 15px var(--font-body); }
@media (max-width: 640px) { .page-tabs.grouped { display: none; } .page-tabs-menu { display: block; } }

header h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 6vw, 52px); line-height: 1.05; margin: 0;
  letter-spacing: -0.01em; text-wrap: balance;
}
header p { margin: 8px 0 0; color: var(--muted); max-width: 60ch; }

/* Plan pages (<main class="plan">): the situation and the page's own settings on the left (.plan-side), the result
   beside them (.plan-results). One column on a narrow sheet, and until there's a result to show. The results column
   is a container, so its headline and tables fit its own width. */
.plan { gap: 20px; }
/* A page's slots for banners and cards (nav.js, welcome-answer.js, trial-recap.js, basics-card.js) take no room, and
   add no gap, while they're empty: before their script fills them, when it has nothing to show, and once closed. */
[data-numbers-banner]:empty, [data-two-factor-prompt]:empty, [data-welcome-answer]:empty, [data-trial-recap]:empty,
[data-basics-card]:empty, [data-page-tabs]:empty { display: none; }
/* Each column is a minmax(0, 1fr) track, so a wide table scrolls in its own box instead of widening the page. */
.plan-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.plan-side, .plan-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; min-width: 0; }
.plan-results { container-type: inline-size; }
@container (min-width: 880px) {
  .plan-layout:has(> .plan-results > :not([hidden])) { grid-template-columns: 340px minmax(0, 1fr); }
}
/* Wide: a little more room for the situation, and taller charts for the wider results. */
@container (min-width: 1360px) {
  .plan-layout:has(> .plan-results > :not([hidden])) { grid-template-columns: 380px minmax(0, 1fr); }
  .plan-results .chart-wrap { height: 440px; }
}
/* The saved situation as rows, with Edit beside its heading. While the form is open it shows all of this, so the
   summary steps aside; on a narrow sheet the rows pair up, two to a line. */
.strip { display: grid; gap: 10px; }
.strip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.strip-head h2 { margin: 0; font: 600 16px var(--font-body); }
.strip .hint a { color: inherit; text-underline-offset: 2px; }
.strip:has(#editSituation[aria-expanded="true"]) { display: none; }
.situation-rows { margin: 0; display: grid; }
.situation-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.situation-rows dt { font-size: 14px; color: var(--muted); }
.situation-rows dd { margin: 0; text-align: right; overflow-wrap: anywhere; font: 500 14px var(--font-data); font-variant-numeric: tabular-nums; }
.situation-rows dd.words { font-family: var(--font-body); }
@container (max-width: 560px) {
  .situation-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .situation-rows div { flex-direction: column; align-items: flex-start; gap: 0; }
  .situation-rows dd { text-align: left; }
}
/* The rest every plan page shares: the situation form, the headline, the ways to close a gap and the year table */
.situation { display: grid; gap: 18px; }
.situation h2, .outcome h2 { margin: 0; }
.situation > h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.1; }
.situation-form { display: grid; gap: 18px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px; }
/* Each field takes three lines of its grid (label, box, help) as a subgrid, so a label that wraps or carries a "?"
   doesn't push its box down: every box in a row starts on one line, with its label just above it. */
.field-grid > .field { grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; align-content: start; }
.field-grid > .field > :first-child { align-self: end; }
.situation details { border-top: 1px solid var(--line); padding-top: 12px; }
.situation summary { cursor: pointer; font-size: 14px; overflow-wrap: anywhere; }
.situation summary strong { font-weight: 600; }
.situation details > .field-grid { margin-top: 14px; }
/* Tax: "Starting figures…, not tax advice" first, then the rates and the country's note (situation-form.js, plan.js) */
.situation details > #taxStartingNote { margin-top: 12px; }
.tax-starting { margin-top: 12px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.form-status { font-size: 13px; color: var(--muted); margin: 0; }
.outcome { display: grid; gap: 18px; min-width: 0; }
/* The panel toggle (nav.js, FiaidSideToggle): before a title or kicker, in one row; hidden, the results take the
   whole width. */
.title-with-toggle { display: flex; align-items: center; gap: 6px; margin-left: -8px; min-width: 0; }
.plan-layout.side-hidden { grid-template-columns: minmax(0, 1fr) !important; }
.plan-layout.side-hidden > .plan-side, .plan-layout.side-hidden > .history-side { display: none; }
.kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.kicker.preview { color: var(--car); }
.headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 5.5cqi, 44px); line-height: 1.1; text-wrap: balance; }
.headline.short { color: var(--car); }
.subline { margin: -8px 0 0; font-size: 15px; max-width: 70ch; }
/* When the money runs out: the two ways to close the gap, side by side (stacked on phones) */
.gap-ways { display: grid; gap: 10px; }
.gap-ways h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.gap-ways ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.gap-ways li { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.gap-ways li[hidden] { display: none; }
.gap-ways strong { font: 600 22px var(--font-data); font-variant-numeric: tabular-nums; }
.outcome details { border-top: 1px solid var(--line); padding-top: 12px; }
.outcome summary { cursor: pointer; font-size: 14px; font-weight: 500; }
.table-scroll { overflow-x: auto; margin-top: 12px; }
.year-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.year-table th, .year-table td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.year-table th:first-child, .year-table td:first-child { text-align: left; }
.year-table td { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.year-table th { font-weight: 500; color: var(--muted); }
.how { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.inputs { display: grid; gap: 16px; }
.group-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding-top: 4px; border-top: 1px solid var(--line);
}
.group-label:first-child { border-top: 0; padding-top: 0; }
.field { display: grid; gap: 6px; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
label { font-size: 14px; font-weight: 500; }
output { font-family: var(--font-data); font-weight: 600; font-size: 14px; }
/* "(€)" after the label of a money input, added by currency.js */
.currency-tag { font-family: var(--font-data); font-size: 12.5px; font-weight: 500; color: var(--muted); }
/* Form fields are outlined; the outline takes the accent while you type in one. Pages' own text fields use the same
   --field-bg and --field-border. */
input[type=number], select, textarea {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  font: 500 16px var(--font-data); color: var(--fg);
  background: var(--field-bg); border: 1px solid var(--field-border);
}
/* Drawn by the page, not the browser, so a dropdown looks the same everywhere (Safari otherwise draws its own control,
   ignoring the padding, border and radius): a chevron in the muted colour, from two gradients so it follows the theme. */
select {
  -webkit-appearance: none; appearance: none; font-family: var(--font-body); padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
select::-ms-expand { display: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type=range] { width: 100%; accent-color: var(--accent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hint { font-size: 12.5px; color: var(--muted); margin: 0; }
/* The situation form's shared part: the note above it, and the "Already stopped working" tick box, which sits level
   with the inputs beside it under a label-sized heading. */
.shared-note { margin: 0 0 12px; }
.field-label { font-size: 14px; font-weight: 500; }
/* Between jobs (situation-form.js): what comes in now and the pay once working again, each under its own heading, in
   time order, so the two amounts can't be taken for each other. A group spans the form's grid. */
.work-group { grid-column: 1 / -1; display: grid; gap: 10px; min-width: 0; }
.work-group.tinted { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.field-grid > .work-group-title { grid-column: 1 / -1; margin-top: 4px; }
.work-group-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
/* Columns as wide as the form's own, so a group's single field (the pay) doesn't stretch across it. */
.work-group > .field-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.with-unit { display: flex; align-items: center; gap: 8px; }
.with-unit input { max-width: 120px; }
.note-warn { margin: 0; font-size: 13px; color: var(--car); }
.check-choice { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; cursor: pointer; }
.check-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.check-choice input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* ⓘ beside a label, title or figure: shows and hides the explanation under it (FiaidInfo in nav.js) */
.help-toggle {
  -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid var(--field-border); background: transparent; color: var(--muted);
  font: italic 15px/1 var(--font-display); cursor: pointer; vertical-align: middle;
}
.help-toggle:hover { color: var(--fg); border-color: var(--fg); }
/* A title with its ⓘ beside it */
.title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
div.title-row > h1, div.title-row > h2, div.title-row > h3 { margin: 0; }
.info-text { max-width: 62ch; }
.help-toggle[aria-expanded="true"] { background: var(--accent-selected); border-color: var(--accent-selected); color: var(--on-accent-container); }
.help-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.saved-note a { color: inherit; text-underline-offset: 2px; }
.warn { font-size: 13px; color: var(--car); margin: 0; }
.warn:empty { display: none; }

.results { display: grid; gap: 18px; min-width: 0; }
.futures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@container (max-width: 560px) { .futures { grid-template-columns: minmax(0, 1fr); } }
.future { display: grid; gap: 2px; padding-left: 12px; border-left: 3px solid var(--line); }
.future.invest { border-left-color: var(--invest); }
.future.car { border-left-color: var(--car); }
.future .k { font-size: 12.5px; color: var(--muted); }
.future .v { font-family: var(--font-data); font-size: clamp(17px, 3.2cqi, 24px); font-weight: 600; font-variant-numeric: tabular-nums; }
.future.invest .v { color: var(--invest); }
.future.car .v { color: var(--car); }

/* min-width: 0, so the box never sizes itself to the chart drawn in it: Chart.js resizes the chart to the box, and in
   a grid whose column fits its content the two would hold each other at the old width after the page narrows (Wide
   to Regular). */
.chart-wrap { position: relative; height: 380px; min-width: 0; }
@media (max-width: 560px) { .chart-wrap { height: 300px; } }
/* Under a chart that ends at the pension (forecast.horizon_note): where it stops, and who can help with the pension. */
.horizon-note { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.horizon-note:empty { display: none; }
.verdict { margin: 0; font-size: 15px; max-width: 65ch; }
.verdict strong { font-family: var(--font-data); font-weight: 600; }
.assumptions { margin: 0; font-size: 12.5px; color: var(--muted); max-width: 70ch; }

/* Ask AI panel */
.advisor { display: grid; gap: 12px; }
.advisor-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.advisor h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; margin: 0; line-height: 1.1; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Buttons are pills: filled in the accent for the main action, outlined (.secondary) for the others, and red
   (.danger) for one that can't be undone. */
.btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 10px 24px; border-radius: 999px; cursor: pointer;
  font: 600 14.5px var(--font-body); line-height: 1.2;
  border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg);
  transition: background-color 120ms, border-color 120ms, box-shadow 120ms;
}
a.btn { text-decoration: none; }  /* Links styled as buttons, such as Join */
.btn:hover:not(:disabled) { background: var(--btn-hover); border-color: var(--btn-hover); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.btn.secondary { background: transparent; color: var(--accent-text); border-color: var(--field-border); }
.btn.secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: none; }
.btn.danger { background: var(--car); border-color: var(--car); color: var(--on-car); }
.btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--car) 88%, var(--fg)); border-color: transparent; }
/* Disabled means unavailable as often as busy (Move up on the first scenario), so no loading cursor: the faded
   button says it, and a busy one says what it's doing in its label or status. */
.btn:disabled { cursor: default; opacity: 0.6; box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-icon { font-size: 16px; line-height: 1; }
.status { font-size: 13px; color: var(--muted); margin: 0; }
.advisor .hint a { color: inherit; text-underline-offset: 2px; }
.advisor .hint a:hover { color: var(--fg); }
/* The member's note for this page (ask-ai.js), folded until opened. */
.page-note { display: grid; gap: 6px; }
.page-note summary { cursor: pointer; font-size: 14px; font-weight: 600; width: max-content; max-width: 100%; }
.page-note[open] { gap: 8px; }
.page-note textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; resize: vertical; }
.page-note-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.page-note-foot > span:last-child { display: flex; align-items: center; gap: 8px; }
/* An answer shown again because nothing had changed. */
.repeat-note { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin: 0;
  padding: 10px 12px; border-radius: 8px; background: var(--bg); font-size: 14px; }
/* The last three answers on this page, under the Ask AI panel. */
.earlier-answers h3 { margin: 0; font-size: 16px; }
.earlier-answers .advisor-head a { font-size: 14px; }
.earlier-item { border-top: 1px solid var(--line); }
.earlier-item.open { padding-bottom: 12px; }
.earlier-toggle { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto 16px; gap: 4px 12px; align-items: start; width: 100%;
  padding: 10px 0; border: 0; background: none; color: var(--fg); font: inherit; font-size: 14px; line-height: 1.5;
  text-align: left; cursor: pointer; }
.earlier-toggle:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.earlier-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* A chevron that turns when the answer is open. */
.earlier-chevron { width: 8px; height: 8px; margin-top: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform 120ms; }
.earlier-toggle[aria-expanded="true"] .earlier-chevron { transform: translateY(3px) rotate(-135deg); }
.earlier-item .answer-reader { margin-left: 122px; }
.earlier-note { display: block; }
.earlier-answers .hint { color: var(--muted); font-size: 13px; }
@media (max-width: 560px) {
  .earlier-toggle { grid-template-columns: minmax(0, 1fr) auto 16px; }
  .earlier-toggle > .hint:first-child { grid-column: 1 / -1; }
  .earlier-item .answer-reader { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .earlier-chevron { transition: none; } }
/* An Ask AI answer (answer-reader.js): the reading bar, then the answer in paragraphs at the site's text size
   (--reading-scale, as articles) and the member's spacing (data-answer-spacing), held to a comfortable line length. */
.answer-reader { display: grid; gap: 10px; max-width: 64ch; }
.reader-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reader-button {
  min-height: 32px; min-width: 36px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--field-border);
  background: transparent; color: var(--fg); font: inherit; font-size: 13.5px; cursor: pointer;
}
.reader-button:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.reader-button:disabled { opacity: 0.4; cursor: default; }
.reader-button[aria-pressed="true"] { border-color: var(--accent-text); color: var(--accent-text); }
.reader-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:root { --answer-leading: 1.7; }
:root[data-answer-spacing="roomy"] { --answer-leading: 1.95; }
.answer-text { font-size: calc(1rem * var(--reading-scale, 1)); line-height: var(--answer-leading); max-width: 62ch;
  border-left: 3px solid var(--line); padding-left: 16px; overflow-wrap: anywhere; }
.answer-text p { margin: 0 0 0.9em; }
.answer-text p:last-child { margin-bottom: 0; }
.answer-text:empty { display: none; }
.answer-text.stale { opacity: 0.55; }
@media (max-width: 560px) {
  .answer-text { font-size: calc(1.0625rem * var(--reading-scale, 1)); padding-left: 12px; }
  .reader-spacing, .reader-copy, .answer-reader .text-size > span { display: none; }
}
/* Focus: the answer on its own sheet, larger and in a book-like type; the page waits behind it. */
.reader-focus { width: min(680px, 100vw - 24px); max-height: calc(100vh - 32px); padding: 0 32px 32px; border: none;
  border-radius: 14px; background: var(--surface); color: var(--fg); overflow-y: auto; }
.reader-focus::backdrop { background: rgba(0, 0, 0, 0.5); }
.reader-focus-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 14px 0 8px; background: var(--surface); }
.reader-progress { position: sticky; top: 56px; height: 3px; background: var(--line); border-radius: 2px; margin-bottom: 20px; }
.reader-progress-bar { height: 3px; width: 0; background: var(--accent-text); border-radius: 2px; }
.reader-focus-text { font-family: Georgia, "Times New Roman", serif; font-size: calc(1.15rem * var(--reading-scale, 1));
  line-height: calc(var(--answer-leading) + 0.1); border-left: none; padding-left: 0; max-width: none; }
@media (max-width: 560px) { .reader-focus { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; padding: 0 18px 24px; } }
/* Feedback under an Ask AI answer (ask-ai.js): 👍/👎, then reason chips and an optional comment */
.feedback { display: grid; gap: 10px; max-width: 68ch; padding-top: 12px; border-top: 1px solid var(--line); }
.feedback[hidden], .feedback-details[hidden] { display: none; }
.feedback-question, .feedback-reasons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feedback-label { font-size: 14px; font-weight: 500; margin-right: 4px; }
.feedback-details { display: grid; gap: 10px; }
/* Chips: outlined, and the chosen one in the accent tint */
.feedback-rating, .chip {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  min-height: 32px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--field-border); background: transparent; color: var(--fg);
  font: 500 13px var(--font-body); line-height: 1.2;
}
.feedback-rating:hover:not(:disabled), .chip:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.feedback-rating[aria-pressed="true"], .chip[aria-pressed="true"] {
  background: var(--accent-selected); border-color: var(--accent-selected); color: var(--on-accent-container);
}
.feedback-rating:focus-visible, .chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* A choice of a few short answers, as one rounded bar with the picked one filled (docs/decisions.md, 2026-11-10: Short
   choices are one switch). Real radio buttons, hidden from sight only, each followed by a span with its answer:
   <div class="choice-switch"><label><input type="radio" name="…" value="…"><span>Yes</span></label>…</div>. So Tab, the
   arrow keys and screen readers work as on any radio group, and the focus ring shows on the answer. */
.choice-switch {
  display: inline-flex; max-width: 100%; padding: 3px; border: 1px solid var(--field-border); border-radius: 999px;
  background: var(--field-bg);
}
.choice-switch label { position: relative; display: block; margin: 0; font-weight: 400; }
.choice-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choice-switch span {
  display: block; padding: 8px 20px; border-radius: 999px; font: 500 15px/1.3 var(--font-body); color: var(--fg);
  cursor: pointer; white-space: nowrap;
}
.choice-switch span:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.choice-switch input:checked + span, .choice-switch input:checked + span:hover {
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 600;
}
.choice-switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 420px) { .choice-switch span { padding: 8px 14px; } }
.feedback-rating:disabled { cursor: default; }
.feedback textarea {
  width: 100%; padding: 9px 12px; border-radius: 8px; resize: vertical;
  font: 400 14px var(--font-body); color: var(--fg); background: var(--field-bg); border: 1px solid var(--field-border);
}
/* Consent choices (nav.js, FiaidConsent): in the one-time question and on the Account page */
.consent-choices { display: grid; gap: 10px; }
.consent-choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: start;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.consent-choice input { margin: 3px 0 0; width: 18px; height: 18px; grid-row: span 2; accent-color: var(--accent); }
.consent-choice input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.consent-choice strong { font-weight: 600; }
.consent-choice > strong, .consent-choice > span { grid-column: 2; }
.consent-description { color: var(--muted); font-size: 14px; line-height: 1.5; }
.consent-general { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
/* Dialogs: a rounded sheet over a shaded page. Each kind below sets only its width and what's inside. */
dialog {
  padding: 24px; border: 1px solid var(--line); border-radius: 24px;
  background: var(--surface); color: var(--fg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
dialog::backdrop { background: rgba(10, 15, 20, 0.55); }
dialog.consent-dialog { max-width: min(520px, calc(100vw - 32px)); }
dialog.consent-dialog h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.15; }
dialog.consent-dialog > p { margin: 0 0 14px; line-height: 1.5; }
dialog.consent-dialog .consent-choices { margin-bottom: 14px; }
dialog.consent-dialog .actions { display: flex; flex-wrap: wrap; gap: 10px; }
dialog.consent-dialog .form-error { margin: 0 0 12px; font-size: 13px; color: var(--car); }
dialog.consent-dialog .form-error:empty { display: none; }
dialog.consent-dialog .actions .btn { flex: 1 1 160px; }
/* Inactivity warning (nav.js): "Are you still there?" with a countdown */
dialog.session-timeout { max-width: min(440px, calc(100vw - 32px)); }
dialog.session-timeout h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.15; }
dialog.session-timeout p { margin: 0 0 18px; line-height: 1.5; }
.session-countdown { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
/* Onboarding (onboarding.js): three short steps; on a phone it fills the screen */
dialog.onboarding-dialog { width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.onboarding-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onboarding-skip {
  min-height: 40px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  color: var(--accent-text); font: 600 14px var(--font-body); text-decoration: underline; text-underline-offset: 3px;
}
.onboarding-skip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.onboarding-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 18px; }
.onboarding-progress span { height: 4px; border-radius: 2px; background: var(--line); }
.onboarding-progress span.done { background: var(--accent); }
.onboarding-progress.four { grid-template-columns: repeat(4, 1fr); }
/* Onboarding's welcome step (the welcome-answer experiment): starters, their words, and what happens to them */
.onboarding-starters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.onboarding-step textarea {
  width: 100%; min-height: 120px; padding: 10px 12px; border-radius: 8px; resize: vertical;
  font: 400 15px/1.5 var(--font-body); color: var(--fg); background: var(--field-bg); border: 1px solid var(--field-border);
}
.onboarding-step textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* A number that looks like a slip, asked about calmly before saving (onboarding.js, askAbout) */
.onboarding-check { display: grid; gap: 8px; margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--accent-container); color: var(--on-accent-container); }
.onboarding-check p { margin: 0; line-height: 1.5; }
.onboarding-check-title { font-weight: 600; }
.onboarding-check-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.onboarding-privacy { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.onboarding-privacy a { color: inherit; text-underline-offset: 2px; }
.onboarding-step h2 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.15; }
.onboarding-step h2:focus { outline: none; }
.onboarding-step .lead { margin: 0 0 16px; color: var(--muted); line-height: 1.5; }
.onboarding-step .check-choice { margin-top: 12px; }
dialog.onboarding-dialog .warn { margin-top: 14px; }
.onboarding-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.onboarding-actions .spacer { flex: 1; }
/* The welcome answer's card on the home pages (welcome-answer.js) */
/* "New in Basics" on the home pages (basics-card.js) */
.basics-card { position: relative; display: grid; gap: 10px; margin: 0 0 20px; border-left: 3px solid #a5551f; }
.basics-card .kicker { padding-right: 44px; }
.basics-card h2 { margin: 0; font: 400 24px/1.2 var(--font-display); padding-right: 44px; }
.basics-card p { margin: 0; max-width: 62ch; }
.basics-card > .btn { justify-self: start; }
.basics-card-close { position: absolute; top: 8px; right: 8px; }
/* "That's one of your money questions worked through" (nav.js): a line near the foot of the window, clear of the
   postcard button in the corner, until it's closed. */
.worked-through { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 31;
  width: min(640px, calc(100vw - 24px)); margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  padding: 12px 14px 12px 16px; border-radius: 12px; border: 1px solid var(--accent);
  background: var(--accent-container); color: var(--on-accent-container); font-size: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
.worked-through span { flex: 1 1 260px; min-width: 0; }
.worked-through a { color: inherit; font-weight: 600; text-underline-offset: 2px; }
.worked-through button { border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: 6px; }
.worked-through button:focus-visible, .worked-through a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The money questions worked through, in "Your trial, so far" (trial-recap.js). */
.trial-recap-questions { display: grid; gap: 8px; }
.trial-recap-questions ul { list-style: none; margin: 0; padding: 0; }
.trial-recap-questions li { display: grid; gap: 1px; padding: 8px 0; border-top: 1px solid var(--line); }
.trial-recap-questions li:first-child { border-top: 0; padding-top: 0; }
.trial-recap-questions .q { font-weight: 600; }
.trial-recap-questions .a { font-size: 13.5px; color: var(--muted); }
.trial-recap-questions .a b { color: var(--fg); font-weight: 600; }
.trial-recap-questions > a { justify-self: start; font-size: 14px; color: var(--accent-text); }
/* "Your trial, so far" on the home pages (trial-recap.js) */
.trial-recap { position: relative; display: grid; gap: 14px; margin: 0 0 20px; border-left: 3px solid var(--accent); }
.trial-recap .kicker, .trial-recap h2 { padding-right: 44px; }
.trial-recap h2 { margin: 0; font: 400 24px/1.2 var(--font-display); }
.trial-recap .lead { margin: 0; max-width: 62ch; }
.trial-recap-close { position: absolute; top: 8px; right: 8px; }
.trial-recap-found { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 0; padding: 0; list-style: none; }
.trial-recap-found li { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.trial-recap-found .page { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.trial-recap-found .found-figure { font: 600 18px/1.3 var(--font-data); color: var(--invest); }
.trial-recap-found .note { font-size: 13px; color: var(--muted); }
.trial-recap-found a, .trial-recap-did a, .trial-recap-none a { color: var(--accent-text); }
.trial-recap-found a { font-size: 13px; }
.trial-recap-none { margin: 0; }
.trial-recap-did { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.trial-recap-did li::before { content: "✓ "; color: var(--invest); font-weight: 700; }
.trial-recap-keeps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.trial-recap-keeps > div { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.trial-recap-keeps .stays { background: color-mix(in srgb, var(--invest) 9%, var(--surface)); }
.trial-recap-keeps .member { background: color-mix(in srgb, var(--fg) 5%, var(--surface)); }
.trial-recap-keeps b { font-size: 13px; }
.trial-recap-keeps ul { margin: 0; padding-left: 18px; }
.trial-recap-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.trial-recap-actions .price { font-size: 13px; color: var(--muted); }
/* Basics' Continue line, in the card's place once the series is opened (basics-card.js) */
.basics-continue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 20px; padding: 6px 6px 6px 14px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, #a5551f 45%, transparent); background: color-mix(in srgb, #a5551f 10%, var(--surface)); }
.basics-continue-cup { width: 26px; height: 26px; flex: none; color: #a5551f; }
.basics-continue-what { flex: 1 1 180px; min-width: 0; font-size: 14px; }
.basics-continue-what .count { color: var(--muted); }
.basics-continue-go { font-weight: 600; font-size: 14px; color: var(--accent-text); }
.basics-continue-close { width: 36px; height: 36px; }
@media (max-width: 560px) { .basics-continue-go { order: 3; flex-basis: 100%; padding-bottom: 6px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .basics-continue-cup { color: #e0955f; } }
:root[data-theme="dark"] .basics-continue-cup { color: #e0955f; }
.welcome-card { position: relative; display: grid; gap: 12px; margin: 0 0 20px; border-left: 3px solid var(--accent); }
.welcome-card .kicker { padding-right: 44px; }
.welcome-close { position: absolute; top: 8px; right: 8px; }
.welcome-thinking { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); line-height: 1.5; }
.welcome-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .welcome-dot { animation: welcome-pulse 1.4s ease-in-out infinite; }
  @keyframes welcome-pulse { 50% { opacity: 0.3; } }
}
.welcome-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.welcome-links a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--field-border); color: var(--accent-text); font: 500 13px var(--font-body); text-decoration: none;
}
.welcome-links a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.welcome-links a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.welcome-members { font-size: 12px; color: var(--muted); }
.welcome-small { margin: 0; font-size: 13px; color: var(--muted); }
.welcome-card .warn { margin: 0; }
.welcome-card > .btn { justify-self: start; }
@media (max-width: 599px) {
  dialog.onboarding-dialog {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0;
    padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px));
  }
  .onboarding-actions .btn { flex: 1 1 auto; }
  .onboarding-actions .spacer { display: none; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .thinking::after { content: ""; animation: dots 1.2s steps(4) infinite; }
  @keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
}

/* AI log entries, drawn by ai-log-view.js */
.ai-log { display: grid; border-top: 1px solid var(--line); }
.log-entry { border-bottom: 1px solid var(--line); }
.log-summary {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto 80px; gap: 12px; align-items: center;
  padding: 11px 4px; cursor: pointer; font-size: 14px; list-style: none;
}
.log-summary.with-model { grid-template-columns: 150px 90px minmax(0, 1fr) auto 80px; }
.log-summary.without-cost { grid-template-columns: 150px 110px minmax(0, 1fr) auto; align-items: start; }  /* A member's own history. */
/* The answer's first line: beside the page in a member's own history; on rows with the model and cost, a row of its
   own under the others. At most two lines. */
.log-line { grid-row: 2; grid-column: 2 / -1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--fg); font-size: 14px; line-height: 1.5; }
.log-summary.without-cost .log-line { grid-row: auto; grid-column: auto; }
.log-line.none { color: var(--muted); font-style: italic; }
.log-summary::-webkit-details-marker { display: none; }
.log-summary:hover { background: var(--bg); }
.log-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (max-width: 640px) {
  .log-summary, .log-summary.with-model, .log-summary.without-cost { grid-template-columns: minmax(0, 1fr) auto; }
  .log-summary .log-page, .log-summary .log-model { display: none; }
  .log-summary .log-line { grid-column: 1 / -1; }
  /* A member's own history keeps the page, under the time. */
  .log-summary.without-cost { grid-template-areas: "when status" "page page" "line line"; gap: 2px 12px; }
  .log-summary.without-cost .log-when { grid-area: when; }
  .log-summary.without-cost .log-status { grid-area: status; justify-self: end; }
  .log-summary.without-cost .log-page { display: block; grid-area: page; color: var(--muted); font-size: 13px; }
  .log-summary.without-cost .log-line { grid-area: line; margin-top: 4px; }
}
.log-when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.log-model { font-family: var(--font-data); font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-cost { font-family: var(--font-data); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.log-status { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; justify-self: start; }
.log-status.completed { color: var(--invest); }
.log-status.cut_short, .log-status.stopped, .log-status.running { color: var(--muted); }
.log-status.refused, .log-status.error { color: var(--car); }
.log-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 4px 4px 18px; }
.log-open { margin: 0; font-size: 14px; }
.log-section h3 { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.log-context { margin: 0; white-space: pre-wrap; line-height: 1.6; max-width: 72ch; font-size: 14.5px; }
.log-context { color: var(--muted); }
.log-empty { margin: 0; color: var(--muted); font-style: italic; font-size: 13.5px; }
/* An answer's numbers then, and what changed since the answer before on the same page (ai-log-view.js). */
.log-changes { padding: 10px 14px; border-radius: 10px; background: var(--accent-container); color: var(--on-accent-container); font-size: 14px; }
.log-changes p { margin: 0; font-weight: 600; }
.log-changes ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
.log-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 4px 24px; max-width: 880px; }
.log-numbers-group { border-top: 1px solid var(--line); padding-top: 8px; }
.log-numbers-group h4 { margin: 0 0 2px; font-size: 13px; font-weight: 600; }
.log-numbers-section { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.log-number { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; line-height: 1.8; }
.log-number span:first-child { color: var(--muted); }
.log-number .changed { padding: 0 5px; border-radius: 4px; background: var(--accent-container); color: var(--on-accent-container); font-weight: 600; }
.log-error { margin: 0 0 6px; color: var(--car); font-size: 13.5px; }
.log-meta { margin: 0; color: var(--muted); font-size: 12px; font-family: var(--font-data); }
.log-inputs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 16px; margin: 0; font-size: 13.5px; }
.log-inputs dt { color: var(--muted); }
.log-inputs dd { margin: 0; font-family: var(--font-data); font-size: 13px; }
.log-inputs dd .log-inputs { font-size: 12.5px; padding: 4px 0 6px; }
.log-inputs ul { margin: 0; padding-left: 16px; }
.log-prompt summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; cursor: pointer; list-style: none; }
.log-prompt summary::-webkit-details-marker { display: none; }
.log-prompt summary h3 { margin: 0; }
.log-prompt summary h3::before { content: "▸ "; }
.log-prompt[open] summary h3::before { content: "▾ "; }
.log-prompt summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.log-copy { margin-left: auto; padding: 2px 12px; font-size: 12.5px; }
.log-prompt-text { margin: 8px 0 0; padding: 10px 12px; background: var(--bg); border-radius: 8px; white-space: pre-wrap;
  overflow-wrap: anywhere; font-family: var(--font-data); font-size: 12.5px; line-height: 1.55; }
/* An article's text on Learn (article.html) and in the editor's preview: the HTML articles.render makes on the
   server, sized for a three-minute read */
/* The text size (FiaidTextSize in theme.js) scales an article's text, its summary and its column together, so lines
   keep about the same number of characters; the privacy notice and terms (legal.html) and the editor's preview keep
   their own sizes. */
:root { --reading-scale: 1; }
:root[data-text-size="large"] { --reading-scale: 1.08; }
:root[data-text-size="larger"] { --reading-scale: 1.16; }
.article-body { font-size: calc(clamp(17px, 2.2vw, 18.5px) * var(--reading-scale)); line-height: 1.72; overflow-wrap: anywhere; }
.article-body > :first-child { margin-top: 0; }
.article-body p, .article-body ul, .article-body ol { margin: 0 0 1.15em; }
.article-body h2 { margin: 1.7em 0 0.45em; font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(26px, 4vw, 32px) * var(--reading-scale)); line-height: 1.15; }
.article-body h3 { margin: 1.5em 0 0.35em; font-size: 1.08em; font-weight: 600; line-height: 1.35; }
.article-body ul, .article-body ol { padding-left: 1.3em; }
.article-body li { margin: 0.35em 0; padding-left: 0.2em; }
.article-body li::marker { color: var(--muted); }
.article-body strong { font-weight: 600; }
.article-body a { color: inherit; text-decoration-color: var(--invest); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article-body a:hover { color: var(--invest); }
.article-body a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.article-body code { font: 0.88em var(--font-data); padding: 1px 5px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); }
.article-body blockquote { margin: 1.6em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--invest);
                           font-family: var(--font-display); font-size: calc(clamp(22px, 3.4vw, 26px) * var(--reading-scale)); line-height: 1.35; }
.article-body blockquote p { margin: 0 0 0.6em; }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body hr { margin: 2em auto; width: 80px; border: 0; border-top: 1px solid var(--line); }
/* The privacy notice and terms links at the end of the drawer (nav.js), and the terms dialog (FiaidTerms) */
.nav-legal a { color: var(--muted); text-decoration: none; }
.nav-legal a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.nav-legal a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
dialog.terms-dialog .terms-points { margin: 0 0 14px; padding-left: 1.2em; display: grid; gap: 6px; line-height: 1.5; }
dialog.terms-dialog a { color: inherit; text-underline-offset: 2px; }

/* The free trial's banner and the soft lock after it (nav.js, FiaidAccess) */
.access-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 16px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent-container) 55%, var(--surface)); font-size: 14px; line-height: 1.5;
}
.access-banner p { margin: 0; flex: 1 1 320px; min-width: 0; }
.access-banner strong { font-weight: 600; }
.access-banner .access-answers { display: block; font-size: 13px; color: var(--muted); }
.access-banner .access-link { color: var(--accent-text); text-underline-offset: 2px; white-space: nowrap; }
.access-banner.expired { border-color: color-mix(in srgb, var(--car) 40%, transparent); background: var(--car-fill); }
.btn.small { min-height: 34px; padding: 7px 16px; font-size: 13.5px; }
body.locked main input:disabled, body.locked main select:disabled, body.locked main textarea:disabled { opacity: 0.75; cursor: not-allowed; }
body.locked main button:disabled { cursor: not-allowed; }

/* Postcards (postcard.js): the button in the corner of the pages members work on, and its panel, at the corner on
   wide windows and a sheet from the bottom on phones. */
.postcard-button {
  position: fixed; z-index: 30; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px;
  background: var(--surface); color: var(--accent-text); font: 600 14px var(--font-body);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}
/* Room under the page's end, so the button never covers its last line. */
body[data-postcard] main { padding-bottom: 96px; }
.postcard-button:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.postcard-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.postcard-icon svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.postcard-icon.large svg { width: 52px; height: 52px; stroke-width: 1.4; }
dialog.postcard-dialog {
  width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 120px); box-sizing: border-box; padding: 20px;
  margin: auto max(20px, env(safe-area-inset-right, 0px)) 84px auto; border-radius: 16px; overflow: auto;
}
dialog.postcard-dialog::backdrop { background: rgba(10, 15, 20, 0.2); }
.postcard-writing, .postcard-sent { display: flex; flex-direction: column; gap: 14px; }
.postcard-writing[hidden], .postcard-sent[hidden], .postcard-included[hidden] { display: none; }
.postcard-head { display: flex; align-items: center; gap: 10px; color: var(--accent-text); }
.postcard-head h2, .postcard-sent h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--fg); }
.postcard-close {
  margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--muted);
}
.postcard-close:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); }
.postcard-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.postcard-intro { margin: 0; font-size: 14px; color: var(--muted); }
.postcard-kinds { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.postcard-kinds legend { padding: 0 0 8px; font-size: 14px; font-weight: 600; }
.postcard-message { display: flex; flex-direction: column; gap: 6px; }
.postcard-message label { font-size: 14px; font-weight: 600; }
.postcard-message textarea {
  min-height: 96px; padding: 10px 12px; resize: vertical; border: 1px solid var(--field-border); border-radius: 8px;
  background: var(--field-bg); color: var(--fg); font: 14px/1.5 var(--font-body);
}
.postcard-message textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.postcard-count { align-self: flex-end; font-size: 12px; color: var(--muted); }
.postcard-numbers {
  display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent-container) 35%, var(--surface));
}
.postcard-numbers > label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.postcard-numbers input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.postcard-note { display: block; margin: 0; font-size: 13px; color: var(--muted); }
.postcard-included { font-size: 13px; }
.postcard-included summary { cursor: pointer; color: var(--accent-text); font-weight: 500; }
.postcard-included summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.postcard-rows { margin: 8px 0; display: grid; gap: 3px; }
.postcard-rows div { display: flex; justify-content: space-between; gap: 12px; }
.postcard-rows dt { color: var(--muted); }
.postcard-rows dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.postcard-writing .form-error { margin: 0; font-size: 13.5px; color: var(--car); }
.postcard-writing .form-error:empty { display: none; }
.postcard-sent { align-items: center; padding: 16px 4px; text-align: center; color: var(--accent-text); }
.postcard-sent p { margin: 0; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) {
  .postcard-button { min-height: 44px; padding: 0 12px; }
  dialog.postcard-dialog {
    width: 100vw; max-width: 100vw; max-height: 88vh; margin: auto 0 0; padding: 16px 16px max(20px, env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0; border-bottom: 0;
  }
}
@media print { .postcard-button { display: none; } }

/* The text size control on reading pages (FiaidTextSizePicker in nav.js) */
.text-size { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.text-size .chip { min-width: 40px; }

/* Two-factor login, recommended (nav.js FiaidTwoFactorPrompt, account.html) */
.two-factor-prompt { margin-bottom: 4px; }
.recommended { margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
               text-transform: uppercase; vertical-align: middle; background: var(--accent-container); color: var(--on-accent-container); }

/* The start-year calendar and the Members tag, shared by Historical and the front page (pricing.html): each start
   year coloured by how it ended (forecast.historical_outcome). */
.legend-scale { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.legend-scale span.bar { width: 90px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--car), #e8b44a, color-mix(in srgb, var(--invest) 45%, var(--surface)), var(--invest)); }
.start-years { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; }
.start-year { min-height: 36px; border: 0; border-radius: 6px; cursor: pointer; font: 500 12.5px var(--font-data); color: var(--fg); }
.start-year:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.start-year[aria-pressed="true"] { outline: 2px solid var(--fg); outline-offset: 1px; }
.start-year.ran-out { background: var(--car); color: var(--on-car); }
.start-year.low { background: color-mix(in srgb, #e8b44a 70%, var(--surface)); }
.start-year.held { background: color-mix(in srgb, var(--invest) 30%, var(--surface)); }
.start-year.grew { background: color-mix(in srgb, var(--invest) 60%, var(--surface)); }
.start-year.doubled { background: var(--invest); color: var(--btn-fg); }
/* Too short for the run, with money left (docs/decisions.md, 2026-11-04): grey, not an outcome's colour. */
.start-year.not-enough, .legend-scale .not-enough-swatch { background: transparent; color: var(--muted);
  border: 1.5px dashed var(--field-border); }
.legend-scale .not-enough-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-left: 10px; }
.members-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--accent-container); color: var(--on-accent-container); }
.members-tag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The pager under a list shown a page at a time (pager.js): the count, a step back, the page numbers and a step on;
 on a phone, the steps and "3 of 5". */
.fiaid-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 16px; }
.fiaid-pager .count { font-size: 13px; color: var(--muted); }
.fiaid-pager .steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fiaid-pager a, .fiaid-pager button, .fiaid-pager .off { font: 500 14px var(--font-body); border-radius: 999px; text-decoration: none; }
.fiaid-pager button { -webkit-appearance: none; appearance: none; cursor: pointer; }
.fiaid-pager .step { border: 1px solid var(--line); background: var(--surface); color: var(--accent-text); padding: 8px 14px; white-space: nowrap; }
.fiaid-pager .step.off { color: var(--muted); opacity: .5; }
.fiaid-pager .nums { display: flex; gap: 2px; }
.fiaid-pager .nums a, .fiaid-pager .nums button, .fiaid-pager .nums .gap { min-width: 36px; height: 36px; display: grid; place-items: center; font: 500 13px var(--font-data); color: var(--accent-text); }
.fiaid-pager .nums .here { background: var(--btn-bg); color: var(--btn-fg); }
.fiaid-pager .nums .gap { color: var(--muted); }
.fiaid-pager a:focus-visible, .fiaid-pager button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fiaid-pager .where { display: none; font: 13px var(--font-data); color: var(--muted); }
@media (max-width: 560px) {
  .fiaid-pager { flex-direction: column; align-items: stretch; }
  .fiaid-pager .steps { justify-content: space-between; flex-wrap: nowrap; }
  .fiaid-pager .nums { display: none; }
  .fiaid-pager .where { display: inline; }
  .fiaid-pager .step { padding: 10px 16px; }
  .fiaid-pager .count { text-align: center; order: 2; }
}
.fiaid-pager .nums button { border: 0; background: none; padding: 0; }
.fiaid-pager .nums button.here { background: var(--btn-bg); }
.fiaid-pager[hidden] { display: none; }

/* Dialogs with a form and a reason: ban, membership, a copy of their data, two-factor login. */
dialog.ban-dialog { max-width: min(480px, calc(100vw - 32px)); }
dialog.ban-dialog form { display: grid; gap: 10px; }
dialog.ban-dialog h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; }
dialog.ban-dialog p { margin: 0; }
dialog.ban-dialog textarea { width: 100%; padding: 9px 12px; border-radius: 8px; font: 400 14px var(--font-body); color: var(--fg); background: var(--field-bg); border: 1px solid var(--field-border); resize: vertical; }
.form-error { margin: 0; font-size: 13px; color: var(--car); }
.form-error:empty { display: none; }
.membership-actions { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; border: 0; }
.membership-actions legend { font-weight: 600; margin-bottom: 6px; }
.membership-actions label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.membership-actions input[type="number"] { width: 5em; }
.access-button { -webkit-appearance: none; appearance: none; cursor: pointer; white-space: nowrap; font: 500 13px var(--font-body); padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); }
.access-button.ban { color: var(--car); border-color: color-mix(in srgb, var(--car) 45%, var(--line)); }
.access-button:hover { border-color: var(--muted); }
.access-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.access-button:disabled { cursor: progress; opacity: 0.6; }