/* site/assets/craton-ui.css: the Craton design system.

   One stylesheet for the whole site and app, extracted from the start flow
   (site/wizard/flow.css, site/start/start.css). Cool neutrals, one blue
   accent, colour only where it carries meaning (status, loss intensity),
   light and dark both designed. System fonts only; nothing here fetches
   anything. The living style guide is /design/ (site/design/index.html).

   HOW TO USE IT
   1. Tokens. Every value is a custom property named --ui-*, set on :root.
      The prefix keeps them clear of the older sheets' --ink, --accent, etc.
   2. Theme. Follows prefers-color-scheme. Force a theme for the whole page
      with <html data-theme="light|dark">, or for one subtree (a dark band,
      a photo hero) with data-theme="dark" on that element.
   3. Opting in. Base element styles (headings, paragraphs, links, code)
      apply only inside a .ui root, usually <body class="ui">, so pages that
      have not moved yet are untouched. Components are plain classes named
      .ui-* and work anywhere.
   4. Load order. If a page still needs the older /styles.css, load that
      first, then this file, then the page's own sheet. Base styles use
      :where() so a component class always beats them, and they beat the
      older sheet's element rules only by coming later.
   5. The chrome (.ui-top header, .ui-foot footer) lives at the end of this
      file and is loaded by every page.

   Naming: .ui-<component>, .ui-<component>-<part>, and state through
   attributes the markup already needs (aria-pressed, aria-current,
   data-state, :checked, :disabled, [open]). */

/* ======================================================================
   1. TOKENS
   ====================================================================== */

/* ---- colour and depth: light (the default) ---- */
:root,
[data-theme="light"] {
  --ui-scheme: light;
  --ui-bg: #f4f6f9;               /* page ground */
  --ui-surface: #ffffff;          /* cards, lists, inputs */
  --ui-surface-2: #eceff3;        /* secondary buttons, tracks, wells */
  --ui-glass: rgba(244, 246, 249, 0.8);   /* translucent bars */
  --ui-glass-strong: rgba(255, 255, 255, 0.88); /* controls over a map */
  --ui-line: rgba(12, 22, 34, 0.09);
  --ui-line-strong: rgba(12, 22, 34, 0.16);
  --ui-ink: #0b121a;              /* primary text */
  --ui-ink-2: #33414e;            /* secondary text */
  --ui-muted: #5f6c79;            /* labels, captions */
  --ui-faint: #9aa5b0;            /* disabled only */
  --ui-accent: #0a66d8;           /* the one accent */
  --ui-accent-ink: #ffffff;       /* text on the accent */
  --ui-accent-soft: rgba(10, 102, 216, 0.1);
  --ui-accent-glow: rgba(10, 102, 216, 0.34);
  /* status: a run's life, and good or bad outcomes */
  --ui-queued: #6a55e8;
  --ui-running: #0a66d8;
  --ui-good: #11875a;
  --ui-bad: #d23a47;
  /* loss intensity: one rose ramp, low to high */
  --ui-loss-1: #f0b6c8;
  --ui-loss-2: #e18daa;
  --ui-loss-3: #d2658c;
  --ui-loss-4: #c33c6d;
  --ui-loss-5: #b4134f;
  /* the dotted map */
  --ui-sea: #e9eef3;
  --ui-land: #a7b5c4;
  --ui-land-lit: #0a66d8;
  /* depth */
  --ui-scrim: rgba(12, 22, 34, 0.32);
  --ui-shadow-1: 0 1px 2px rgba(12, 22, 34, 0.05), 0 8px 28px rgba(12, 22, 34, 0.07);
  --ui-shadow-2: 0 2px 6px rgba(12, 22, 34, 0.06), 0 18px 48px rgba(12, 22, 34, 0.13);
  --ui-shadow-3: 0 30px 80px rgba(12, 22, 34, 0.2);
  --ui-shadow-accent: 0 6px 20px rgba(10, 102, 216, 0.18);
  --ui-ring: 0 0 0 4px rgba(10, 102, 216, 0.1);
}

/* ---- colour and depth: dark. Two copies of one block, keep them identical:
   the first follows the system, the second is the data-theme override. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-scheme: dark;
    --ui-bg: #07090d;
    --ui-surface: #10151c;
    --ui-surface-2: #171e27;
    --ui-glass: rgba(7, 9, 13, 0.9);
    --ui-glass-strong: rgba(16, 21, 28, 0.86);
    --ui-line: rgba(255, 255, 255, 0.08);
    --ui-line-strong: rgba(255, 255, 255, 0.16);
    --ui-ink: #f1f4f8;
    --ui-ink-2: #c3ccd6;
    --ui-muted: #8d99a6;
    --ui-faint: #5c6874;
    --ui-accent: #4fb2ff;
    --ui-accent-ink: #03101d;
    --ui-accent-soft: rgba(79, 178, 255, 0.13);
    --ui-accent-glow: rgba(79, 178, 255, 0.45);
    --ui-queued: #a293ff;
    --ui-running: #4fb2ff;
    --ui-good: #3ad48a;
    --ui-bad: #ff6470;
    --ui-loss-1: #5b2338;
    --ui-loss-2: #84314e;
    --ui-loss-3: #ad4064;
    --ui-loss-4: #d64e79;
    --ui-loss-5: #ff5c8f;
    --ui-sea: #0a0e14;
    --ui-land: #3d4e62;
    --ui-land-lit: #4fb2ff;
    --ui-scrim: rgba(0, 0, 0, 0.55);
    --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 32px rgba(0, 0, 0, 0.35);
    --ui-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5), 0 22px 56px rgba(0, 0, 0, 0.5);
    --ui-shadow-3: 0 30px 80px rgba(0, 0, 0, 0.6);
    --ui-shadow-accent: 0 8px 26px rgba(79, 178, 255, 0.22);
    --ui-ring: 0 0 0 4px rgba(79, 178, 255, 0.13);
  }
}
[data-theme="dark"] {
  --ui-scheme: dark;
  --ui-bg: #07090d;
  --ui-surface: #10151c;
  --ui-surface-2: #171e27;
  --ui-glass: rgba(7, 9, 13, 0.9);
  --ui-glass-strong: rgba(16, 21, 28, 0.86);
  --ui-line: rgba(255, 255, 255, 0.08);
  --ui-line-strong: rgba(255, 255, 255, 0.16);
  --ui-ink: #f1f4f8;
  --ui-ink-2: #c3ccd6;
  --ui-muted: #8d99a6;
  --ui-faint: #5c6874;
  --ui-accent: #4fb2ff;
  --ui-accent-ink: #03101d;
  --ui-accent-soft: rgba(79, 178, 255, 0.13);
  --ui-accent-glow: rgba(79, 178, 255, 0.45);
  --ui-queued: #a293ff;
  --ui-running: #4fb2ff;
  --ui-good: #3ad48a;
  --ui-bad: #ff6470;
  --ui-loss-1: #5b2338;
  --ui-loss-2: #84314e;
  --ui-loss-3: #ad4064;
  --ui-loss-4: #d64e79;
  --ui-loss-5: #ff5c8f;
  --ui-sea: #0a0e14;
  --ui-land: #3d4e62;
  --ui-land-lit: #4fb2ff;
  --ui-scrim: rgba(0, 0, 0, 0.55);
  --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 32px rgba(0, 0, 0, 0.35);
  --ui-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5), 0 22px 56px rgba(0, 0, 0, 0.5);
  --ui-shadow-3: 0 30px 80px rgba(0, 0, 0, 0.6);
  --ui-shadow-accent: 0 8px 26px rgba(79, 178, 255, 0.22);
  --ui-ring: 0 0 0 4px rgba(79, 178, 255, 0.13);
}

/* ---- everything that does not change with the theme ---- */
:root {
  /* type */
  --ui-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    "Segoe UI", system-ui, sans-serif;
  --ui-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
    "Segoe UI", system-ui, sans-serif;
  --ui-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ui-type-fine: 12.5px;         /* legal lines, chart axes */
  --ui-type-caption: 13px;        /* uppercase labels */
  --ui-type-small: 14.5px;        /* hints, secondary rows */
  --ui-type-body: 17px;           /* running text */
  --ui-type-lead: clamp(18px, 1.8vw, 21px);   /* the one supporting sentence */
  --ui-type-h3: 21px;             /* card and row titles */
  --ui-type-h2: clamp(34px, 4.6vw, 56px);     /* section headlines */
  --ui-type-h1: clamp(38px, 5.4vw, 60px);     /* screen titles */
  --ui-type-hero: clamp(46px, 6vw, 84px);     /* the page's one big headline */
  --ui-type-stat: clamp(64px, 11vw, 132px);   /* the giant numeral */
  --ui-type-stat-md: clamp(44px, 5.4vw, 68px);
  --ui-type-stat-sm: clamp(28px, 3vw, 38px);
  --ui-weight-regular: 400;
  --ui-weight-medium: 560;
  --ui-weight-semibold: 620;
  --ui-weight-bold: 700;
  --ui-leading-tight: 1.02;
  --ui-leading-snug: 1.25;
  --ui-leading-body: 1.5;
  --ui-tracking-display: -0.03em;
  --ui-tracking-stat: -0.045em;
  --ui-tracking-caps: 0.07em;

  /* space: a 4 px base */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-7: 32px;
  --ui-space-8: 40px;
  --ui-space-9: 56px;
  --ui-space-10: 72px;
  --ui-space-11: 104px;           /* a section band's vertical padding */

  /* radii */
  --ui-radius-sm: 10px;           /* tooltips, small wells */
  --ui-radius-md: 14px;           /* inputs, lists, code */
  --ui-radius-lg: 22px;           /* cards, the map */
  --ui-radius-xl: 28px;           /* floating hero cards, sheets */
  --ui-radius-pill: 999px;        /* buttons, chips */

  /* motion */
  --ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1);   /* everything that moves */
  --ui-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ui-dur-fast: 0.15s;           /* press, hover lift */
  --ui-dur: 0.2s;                 /* colour and border changes */
  --ui-dur-slow: 0.42s;           /* a screen or sheet arriving */
  --ui-dur-slower: 0.9s;          /* a meter filling */

  /* layout */
  --ui-width: 1160px;             /* content column */
  --ui-width-narrow: 760px;       /* forms, reading columns */
  --ui-measure: 68ch;             /* longest comfortable line */
  --ui-gutter: 28px;              /* side padding; 16 px on phones */
  --ui-top-h: 60px;               /* the header bar */
}
@media (max-width: 860px) {
  :root { --ui-top-h: 56px; }
}
@media (max-width: 480px) {
  :root { --ui-gutter: 16px; --ui-type-body: 16px; --ui-space-11: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --ui-dur-fast: 0.01ms; --ui-dur: 0.01ms; --ui-dur-slow: 0.01ms; --ui-dur-slower: 0.01ms; }
}

/* ======================================================================
   2. BASE: only inside a .ui root
   ====================================================================== */

.ui, .ui-top, .ui-foot, .ui-sheet, [data-theme] { color-scheme: var(--ui-scheme); }
.ui {
  background: var(--ui-bg);
  color: var(--ui-ink);
  font: var(--ui-weight-regular) var(--ui-type-body) / var(--ui-leading-body) var(--ui-font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.ui { margin: 0; }
:where(.ui) *, :where(.ui) *::before, :where(.ui) *::after { box-sizing: border-box; }
:where(.ui) :is(h1, h2, h3, h4) {
  margin: 0; color: var(--ui-ink); font-family: var(--ui-font-display);
  font-weight: var(--ui-weight-bold); text-wrap: balance;
}
:where(.ui) h1 { font-size: var(--ui-type-h1); line-height: var(--ui-leading-tight); letter-spacing: var(--ui-tracking-display); }
:where(.ui) h2 { font-size: var(--ui-type-h2); line-height: var(--ui-leading-tight); letter-spacing: -0.035em; }
:where(.ui) h3 { font-size: var(--ui-type-h3); line-height: var(--ui-leading-snug); font-weight: 660; letter-spacing: -0.015em; }
:where(.ui) h4 { font-size: var(--ui-type-body); line-height: var(--ui-leading-snug); font-weight: var(--ui-weight-semibold); }
:where(.ui) p { margin: 0 0 var(--ui-space-3); }
:where(.ui) :is(ul, ol) { margin: 0 0 var(--ui-space-3); padding-left: 1.25em; }
:where(.ui) a { color: var(--ui-accent); text-underline-offset: 3px; }
:where(.ui) :is(b, strong) { font-weight: var(--ui-weight-semibold); }
:where(.ui) small { font-size: var(--ui-type-small); }
:where(.ui) :is(code, kbd, samp) { font-family: var(--ui-font-mono); font-size: 0.88em; }
:where(.ui) pre { margin: 0; font: 13px/1.6 var(--ui-font-mono); color: inherit; }
:where(.ui) img { max-width: 100%; height: auto; }
:where(.ui) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.ui) hr { border: 0; border-top: 1px solid var(--ui-line); margin: var(--ui-space-7) 0; }
:where(.ui) :is(section, footer) { padding: 0; background: none; color: inherit; }
:where(.ui) :is(th, td) { font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
:where(.ui) ::selection { background: var(--ui-accent-soft); }
:where(.ui) :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; border-radius: 8px; }

/* Visually hidden, still read aloud. */
.ui-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ======================================================================
   3. LAYOUT AND TYPE HELPERS
   ====================================================================== */

/* Centred content column with the side gutter. */
.ui-wrap {
  width: 100%; max-width: calc(var(--ui-width) + 2 * var(--ui-gutter));
  margin: 0 auto; padding: 0 var(--ui-gutter);
}
.ui-wrap-narrow { max-width: calc(var(--ui-width-narrow) + 2 * var(--ui-gutter)); }

/* A full-width section band. Alternate plain and -alt; for a dark band in
   either theme add data-theme="dark" to the same element. */
.ui-band { padding: var(--ui-space-11) 0; background: var(--ui-bg); color: var(--ui-ink); }
.ui-band-alt { background: var(--ui-surface); }
.ui-band-tight { padding: var(--ui-space-10) 0; }
.ui-band-head { max-width: 760px; margin: 0 0 var(--ui-space-8); }
/* A centred head gets the width to keep a short headline on one line; its
   lede stays at reading width, centred under it. */
.ui-band-head-center { max-width: 860px; margin-left: auto; margin-right: auto; text-align: center; }
.ui-band-head-center .ui-lede { margin-left: auto; margin-right: auto; }

.ui-kicker {
  margin: 0 0 var(--ui-space-3); font-size: var(--ui-type-caption); font-weight: 650;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-muted);
}
.ui-title {
  margin: 0; font: var(--ui-weight-bold) var(--ui-type-h1) / var(--ui-leading-tight) var(--ui-font-display);
  letter-spacing: var(--ui-tracking-display); color: var(--ui-ink); text-wrap: balance;
}
.ui-h2 {
  margin: 0; font: var(--ui-weight-bold) var(--ui-type-h2) / var(--ui-leading-tight) var(--ui-font-display);
  letter-spacing: -0.035em; color: var(--ui-ink); text-wrap: balance;
}
.ui-h3 {
  margin: 0; font: 660 var(--ui-type-h3) / var(--ui-leading-snug) var(--ui-font-display);
  letter-spacing: -0.015em; color: var(--ui-ink);
}
.ui-lede {
  margin: var(--ui-space-4) 0 0; max-width: 46ch;
  font-size: var(--ui-type-lead); line-height: 1.4; color: var(--ui-ink-2);
}
.ui-sub { margin: var(--ui-space-2) 0 0; font-size: 19px; color: var(--ui-muted); }
.ui-context { margin: 0 0 var(--ui-space-2); font-size: 15px; font-weight: var(--ui-weight-medium); color: var(--ui-muted); }
.ui-label {
  display: block; font-size: var(--ui-type-caption); font-weight: 650;
  letter-spacing: var(--ui-tracking-caps); text-transform: uppercase; color: var(--ui-muted);
}
.ui-hint { margin: 6px 0 0; font-size: var(--ui-type-small); color: var(--ui-muted); }
.ui-hint[data-level="warn"] { color: var(--ui-bad); }
/* A live status line under an action. When it carries a failure
   (data-level="warn") it becomes a calm tinted well: the words stay in ink,
   the tint and the edge carry the state. */
.ui-note { margin: var(--ui-space-3) 0 0; min-height: 1.4em; font-size: 15px; color: var(--ui-muted); }
.ui-note:empty { min-height: 0; margin: 0; }
.ui-note[data-level="warn"] {
  margin-top: var(--ui-space-4); padding: 12px 16px; max-width: 60ch;
  border-radius: var(--ui-radius-md); color: var(--ui-ink-2); line-height: 1.5;
  background: color-mix(in srgb, var(--ui-bad) 8%, var(--ui-surface));
  border: 1px solid color-mix(in srgb, var(--ui-bad) 30%, transparent);
}
.ui-fine { margin: 0; font-size: var(--ui-type-fine); line-height: 1.5; color: var(--ui-muted); max-width: 80ch; }
.ui-mono { font-family: var(--ui-font-mono); font-size: 0.9em; overflow-wrap: anywhere; }
.ui-num { font-variant-numeric: tabular-nums; }
.ui-muted { color: var(--ui-muted); }

/* Two columns that stack under 980 px. -5-7 and -7-5 weight the split. */
.ui-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-space-8); align-items: start; }
.ui-split-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ui-split-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* Arrival: add to anything that should rise in when it appears. */
.ui-enter { animation: ui-enter var(--ui-dur-slow) var(--ui-ease) both; }
@keyframes ui-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ui-pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }

/* ======================================================================
   4. BUTTONS
   ====================================================================== */

/* Always two classes: .ui-btn plus one of -primary, -secondary, -quiet,
   -link. Size with -sm or -lg; -block fills the row. Works on <a> and
   <button>. One primary per screen. */
.ui-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--ui-radius-pill);
  font: var(--ui-weight-semibold) 16px/1.15 var(--ui-font-text); letter-spacing: -0.005em;
  text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--ui-dur-fast) var(--ui-ease), background-color var(--ui-dur) var(--ui-ease),
    color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease), opacity var(--ui-dur) var(--ui-ease);
}
.ui-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.ui-btn:active { transform: scale(0.98); }
.ui-btn-primary { background: var(--ui-accent); color: var(--ui-accent-ink); box-shadow: var(--ui-shadow-accent); }
.ui-btn-primary:hover { transform: translateY(-1px); }
.ui-btn-secondary { background: var(--ui-surface-2); color: var(--ui-ink); }
.ui-btn-secondary:hover { background: var(--ui-line-strong); }
.ui-btn-quiet { background: transparent; color: var(--ui-ink-2); }
.ui-btn-quiet:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.ui-btn-link {
  min-height: 0; padding: 0; border-radius: 4px; background: none; color: var(--ui-accent);
  font-weight: var(--ui-weight-medium); text-decoration: underline; text-underline-offset: 3px;
}
.ui-btn-link:active { transform: none; }
.ui-btn-sm { min-height: 36px; padding: 0 16px; font-size: var(--ui-type-small); }
.ui-btn-lg { min-height: 54px; padding: 0 30px; font-size: 17px; }
.ui-btn-block { display: flex; width: 100%; }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] {
  background: var(--ui-surface-2); color: var(--ui-faint); box-shadow: inset 0 0 0 1px var(--ui-line);
  cursor: default; transform: none;
}
.ui-btn-link:disabled { background: none; box-shadow: none; }
/* A button whose work is under way: aria-busy="true" adds a spinner and
   keeps the primary colour. A button that just copied: data-copied. */
.ui-btn-primary[aria-busy="true"] { background: var(--ui-accent); color: var(--ui-accent-ink); box-shadow: none; opacity: 0.85; cursor: progress; }
.ui-btn[aria-busy="true"]::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ui-spin 0.8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-btn[data-copied] { background: var(--ui-good); color: var(--ui-bg); box-shadow: none; }

/* Round icon button (map zoom, stepper, sheet close). Give it an aria-label. */
.ui-iconbtn {
  appearance: none; flex: none; width: 38px; height: 38px; padding: 0; border-radius: 50%;
  display: inline-grid; place-items: center; cursor: pointer;
  background: var(--ui-surface); color: var(--ui-ink);
  border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-1);
  transition: background-color var(--ui-dur) var(--ui-ease);
}
.ui-iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-iconbtn:hover { background: var(--ui-surface-2); }
.ui-iconbtn:disabled { opacity: 0.35; cursor: default; }
.ui-iconbtn-flat { box-shadow: none; background: var(--ui-surface-2); border-color: transparent; }

/* A row of actions. -sticky pins it to the bottom edge on phones. */
.ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: var(--ui-space-7) 0 0; }
.ui-actions-center { justify-content: center; }
.ui-actions-end { justify-content: flex-end; }

/* ======================================================================
   5. CHIPS
   ====================================================================== */

/* .ui-chip: a static label. The basis chip (.ui-chip-basis) says what a
   figure rests on ("Observed storms, 1995 to 2024") and sits under the
   stat it qualifies, with an icon in front. */
.ui-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--ui-space-4) 0 0; }
.ui-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px;
  border-radius: var(--ui-radius-pill); background: var(--ui-accent-soft); color: var(--ui-ink);
  font: var(--ui-weight-medium) 14.5px/1.2 var(--ui-font-text); white-space: nowrap;
}
.ui-chip svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--ui-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-chip-quiet { background: var(--ui-surface-2); color: var(--ui-muted); }
.ui-chip-quiet svg { stroke: currentColor; }
.ui-chip-good { background: color-mix(in srgb, var(--ui-good) 14%, transparent); }
.ui-chip-good svg { stroke: var(--ui-good); }
.ui-chip-bad { background: color-mix(in srgb, var(--ui-bad) 14%, transparent); }
.ui-chip-bad svg { stroke: var(--ui-bad); }
.ui-chip-basis { font-weight: var(--ui-weight-semibold); }
.ui-chip-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-good) 22%, transparent);
}

/* .ui-chipbtn: a pickable pill (suggested places, filters). Pressed state
   comes from aria-pressed="true". The optional <i> is a leading dot. */
.ui-chipbtn {
  appearance: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  height: 38px; padding: 0 16px; border-radius: var(--ui-radius-pill);
  border: 1px solid var(--ui-line); background: var(--ui-surface); color: var(--ui-ink);
  font: 540 15px/1 var(--ui-font-text); white-space: nowrap; text-decoration: none;
  transition: background-color var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease), transform var(--ui-dur-fast) var(--ui-ease);
}
.ui-chipbtn:hover { border-color: var(--ui-line-strong); transform: translateY(-1px); }
.ui-chipbtn i { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.ui-chipbtn[aria-pressed="true"] { background: var(--ui-accent-soft); border-color: var(--ui-accent); }
.ui-chipbtn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* ======================================================================
   6. CARDS AND CHOICE CARDS
   ====================================================================== */

.ui-card {
  min-width: 0; padding: 26px 26px 24px; border-radius: var(--ui-radius-lg);
  background: var(--ui-surface); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-1);
  color: var(--ui-ink);
}
.ui-card-flat { box-shadow: none; }
.ui-card-well { background: var(--ui-surface-2); border-color: transparent; box-shadow: none; }
/* Frosted card for sitting on a photo or the dark hero. */
.ui-card-glass {
  background: var(--ui-glass-strong); border-color: var(--ui-line-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: var(--ui-shadow-3); border-radius: var(--ui-radius-xl);
}
.ui-card-title { margin: 0 0 6px; font: 660 var(--ui-type-h3) / var(--ui-leading-snug) var(--ui-font-display); letter-spacing: -0.015em; color: var(--ui-ink); }
.ui-card-text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ui-ink-2); }
.ui-card-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: var(--ui-space-4) 0 0; }
.ui-card-links a { color: var(--ui-accent); font-weight: var(--ui-weight-medium); text-underline-offset: 3px; }
/* A whole card that is one link. */
a.ui-card { display: block; text-decoration: none; transition: transform var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease); }
a.ui-card:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-2); }
.ui-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
ul.ui-cards { list-style: none; margin: 0; padding: 0; }

/* Link card: a whole card that is one link. A glyph, a title with a
   chevron, one line, and an optional foot saying where it leads. Lay them
   out in .ui-cards; on phones each becomes a row. */
.ui-linkcard {
  display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 24px 22px 22px;
  border-radius: var(--ui-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-line);
  color: var(--ui-ink); text-decoration: none;
  transition: transform var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease);
}
.ui-linkcard:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-2); border-color: var(--ui-line-strong); }
.ui-linkcard:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.ui-linkcard .ui-feature-glyph { width: 36px; height: 36px; margin-bottom: 16px; }
.ui-linkcard-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 660 19px/1.25 var(--ui-font-display); letter-spacing: -0.015em; }
.ui-linkcard-title::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 1px; border: solid var(--ui-muted);
  border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform var(--ui-dur) var(--ui-ease);
}
.ui-linkcard:hover .ui-linkcard-title::after { transform: translateX(3px) rotate(45deg); border-color: var(--ui-accent); }
.ui-linkcard-text { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ui-muted); }
.ui-linkcard-foot { margin: auto 0 0; padding-top: 14px; font: 12.5px/1.3 var(--ui-font-mono); color: var(--ui-muted); }

/* Choice cards: a radio or checkbox dressed as a big card (the peril
   picker). The input stays in the label for keyboard and forms; a disabled
   input dims the card. */
.ui-choices { border: 0; margin: 0; padding: 0; min-width: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ui-choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-choices-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-choice {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  min-height: 190px; padding: 22px 20px 20px; border-radius: var(--ui-radius-lg);
  background: var(--ui-surface); border: 1.5px solid var(--ui-line); box-shadow: var(--ui-shadow-1);
  color: var(--ui-ink); cursor: pointer;
  transition: transform var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease);
}
.ui-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ui-choice:hover { transform: translateY(-2px); }
.ui-choice:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.ui-choice:has(input:checked) { border-color: var(--ui-accent); box-shadow: var(--ui-ring), var(--ui-shadow-1); }
.ui-choice:has(input:disabled) { cursor: default; opacity: 0.5; box-shadow: none; background: transparent; transform: none; }
.ui-choice-glyph { width: 52px; height: 52px; margin-bottom: auto; color: var(--ui-accent); }
.ui-choice-glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ui-choice:has(input:disabled) .ui-choice-glyph { color: var(--ui-muted); }
.ui-choice-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ui-choice-title { margin-top: 18px; font: 660 21px/1.2 var(--ui-font-display); letter-spacing: -0.015em; }
.ui-choice-line { font-size: 15px; color: var(--ui-muted); }
.ui-choice-check {
  position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--ui-line-strong);
  transition: background-color var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease);
}
.ui-choice-check svg { width: 13px; height: 13px; fill: none; stroke: var(--ui-accent-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ui-choice:has(input:checked) .ui-choice-check { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-choice:has(input:checked) .ui-choice-check svg { opacity: 1; }
.ui-choice:has(input:disabled) .ui-choice-check { display: none; }
/* A choice card can also be a <button> (pressed with aria-pressed="true", or
   data-chosen="yes" on a label that wraps a file input) or an <a> that
   leads to the choice. A meta line names who made it. */
:is(a, button).ui-choice {
  -webkit-appearance: none; appearance: none; width: 100%; height: 100%;
  font: inherit; text-align: left; text-decoration: none;
}
:is(a, button).ui-choice:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
a.ui-choice:hover { border-color: var(--ui-accent); box-shadow: var(--ui-ring), var(--ui-shadow-1); }
.ui-choice:is([aria-pressed="true"], [data-chosen="yes"]) { border-color: var(--ui-accent); box-shadow: var(--ui-ring), var(--ui-shadow-1); }
.ui-choice:is([aria-pressed="true"], [data-chosen="yes"]) .ui-choice-check { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-choice:is([aria-pressed="true"], [data-chosen="yes"]) .ui-choice-check svg { opacity: 1; }
.ui-choice-meta { margin-top: 6px; font: var(--ui-weight-medium) 12.5px/1.3 var(--ui-font-mono); color: var(--ui-muted); }

/* Loading placeholder with a soft sweep. */
.ui-skeleton {
  position: relative; overflow: hidden; min-height: 76px; border-radius: var(--ui-radius-lg);
  background: var(--ui-surface); border: 1.5px solid var(--ui-line);
}
.ui-skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, var(--ui-accent-soft) 50%, transparent 80%);
  animation: ui-sweep 1.6s var(--ui-ease) infinite;
}
@keyframes ui-sweep { to { transform: translateX(100%); } }

/* ======================================================================
   7. STAT BLOCK, METER, CHART, BREAKDOWN
   ====================================================================== */

/* One huge number per screen. The label says what it is, the sub-label
   says what it is out of; a basis chip usually follows. Every figure must
   come from a real stored run or real product behaviour. */
.ui-stat { margin: 0; min-width: 0; }
.ui-stat-num {
  display: block; margin: 0; font: var(--ui-weight-bold) var(--ui-type-stat) / 0.95 var(--ui-font-display);
  letter-spacing: var(--ui-tracking-stat); font-variant-numeric: tabular-nums; color: var(--ui-ink);
  overflow-wrap: anywhere;
}
.ui-stat-md .ui-stat-num { font-size: var(--ui-type-stat-md); line-height: 1; }
.ui-stat-sm .ui-stat-num { font-size: var(--ui-type-stat-sm); line-height: 1.05; letter-spacing: -0.03em; }
.ui-stat-label { margin: 12px 0 0; font-size: 19px; line-height: 1.35; color: var(--ui-ink-2); }
.ui-stat-label b { font-weight: var(--ui-weight-semibold); color: var(--ui-ink); }
.ui-stat-sub { margin: 4px 0 0; font-size: 15px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-stat-sm .ui-stat-label { margin-top: 6px; font-size: 15px; }
/* A row of smaller stats. */
.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--ui-space-6) var(--ui-space-7); }

/* Meter: how big a share is. Set the fill width inline: style="width: 31%". */
.ui-meter { max-width: 560px; margin: var(--ui-space-7) 0 0; }
.ui-meter-track { height: 14px; border-radius: 14px; overflow: hidden; background: var(--ui-surface-2); box-shadow: inset 0 0 0 1px var(--ui-line); }
.ui-meter-fill {
  display: block; height: 100%; width: 0; border-radius: 14px;
  background: linear-gradient(90deg, var(--ui-loss-1), var(--ui-loss-5));
  transition: width var(--ui-dur-slower) var(--ui-ease);
}
.ui-meter-accent .ui-meter-fill { background: var(--ui-accent); }
.ui-meter-labels { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 0; font-size: 15px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-meter-labels > :first-child { color: var(--ui-ink); font-weight: var(--ui-weight-semibold); }

/* The loss ramp as a legend bar, and single-step fills for dots and cells. */
.ui-ramp { display: inline-block; width: 64px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--ui-loss-1), var(--ui-loss-5)); vertical-align: middle; }
.ui-loss-1 { --ui-tint: var(--ui-loss-1); }
.ui-loss-2 { --ui-tint: var(--ui-loss-2); }
.ui-loss-3 { --ui-tint: var(--ui-loss-3); }
.ui-loss-4 { --ui-tint: var(--ui-loss-4); }
.ui-loss-5 { --ui-tint: var(--ui-loss-5); }

/* Small clean charts in inline SVG. Wrap the <svg> in .ui-chart and give
   its parts these classes; colours come from the tokens. */
.ui-chart { position: relative; margin: 0; }
.ui-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ui-chart-card { padding: 20px 20px 12px; border-radius: var(--ui-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-line); }
.ui-chart-title { margin: 0 0 4px; font-size: 15px; font-weight: var(--ui-weight-semibold); color: var(--ui-ink); }
.ui-chart-grid { stroke: var(--ui-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ui-chart-base { stroke: var(--ui-line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ui-chart-axis { fill: var(--ui-muted); font: 12.5px var(--ui-font-text); font-variant-numeric: tabular-nums; }
.ui-chart-line { fill: none; stroke: var(--ui-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ui-chart-wash { fill: var(--ui-accent); opacity: 0.1; }
.ui-chart-mark { fill: var(--ui-tint, var(--ui-accent)); stroke: var(--ui-surface); stroke-width: 2.5; }
.ui-chart-label, .ui-chart-sublabel { paint-order: stroke; stroke: var(--ui-surface); stroke-width: 5px; stroke-linejoin: round; }
.ui-chart-label { fill: var(--ui-ink); font: 650 14px var(--ui-font-text); font-variant-numeric: tabular-nums; }
.ui-chart-sublabel { fill: var(--ui-muted); font: 12.5px var(--ui-font-text); }
.ui-chart-guide { stroke: var(--ui-line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Bars: tinted with --ui-tint (the accent unless set, a loss step with
   .ui-loss-N); -zero is a bar for a value of nothing, drawn as a stub. */
.ui-chart-bar { fill: var(--ui-tint, var(--ui-accent)); }
.ui-chart-bar-zero { fill: var(--ui-line-strong); }
.ui-tip {
  position: absolute; pointer-events: none; transform: translate(-50%, -100%);
  padding: 6px 10px; border-radius: var(--ui-radius-sm); white-space: nowrap;
  background: var(--ui-ink); color: var(--ui-bg); font-size: 13px; font-weight: var(--ui-weight-medium);
  font-variant-numeric: tabular-nums;
}

/* Season strip: one bar per season in an SVG drawn with
   preserveAspectRatio="none" (bars are .ui-chart-bar), the value lines
   labelled at the right edge (.ui-strip-y, placed with style="top: N%"),
   the years under it (.ui-strip-axis). -sm is the short version. */
.ui-strip { position: relative; }
.ui-strip svg { display: block; width: 100%; height: 150px; overflow: visible; }
.ui-strip-sm svg { height: 84px; }
.ui-strip-y {
  position: absolute; right: 0; transform: translateY(-100%); padding: 0 0 3px;
  font-size: 11.5px; line-height: 1; color: var(--ui-muted); white-space: nowrap;
}
.ui-strip-axis {
  display: flex; justify-content: space-between; margin: 8px 0 0;
  font-size: 12.5px; color: var(--ui-muted); font-variant-numeric: tabular-nums;
}

/* Stacked bar: the parts of one figure, side by side. Each child is a
   part: size it with flex-grow or width, colour it with a .ui-tone-N step
   (the accent, lightening) or --ui-tint. The same tone classes colour the
   matching .ui-breakdown-dot. */
.ui-stack {
  display: flex; gap: 2px; height: 14px; margin: 14px 0 4px;
  border-radius: 14px; overflow: hidden; background: var(--ui-surface-2);
}
.ui-stack > * { display: block; height: 100%; min-width: 0; background: var(--ui-tint, var(--ui-accent)); transition: width var(--ui-dur) var(--ui-ease); }
.ui-tone-1 { --ui-tint: var(--ui-accent); }
.ui-tone-2 { --ui-tint: color-mix(in srgb, var(--ui-accent) 70%, var(--ui-surface)); }
.ui-tone-3 { --ui-tint: color-mix(in srgb, var(--ui-accent) 46%, var(--ui-surface)); }
.ui-tone-4 { --ui-tint: color-mix(in srgb, var(--ui-accent) 27%, var(--ui-surface)); }
.ui-tone-5 { --ui-tint: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)); }

/* Breakdown: a short ranked list with a colour dot, a name and a value.
   Colour the dot inline: style="--ui-tint: var(--ui-loss-5)" or class ui-loss-N. */
.ui-breakdown { list-style: none; margin: 14px 0 0; padding: 0; }
.ui-breakdown li {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline;
  padding: 11px 4px; border-bottom: 1px solid var(--ui-line); font-size: 16px;
}
.ui-breakdown li:last-child { border-bottom: 0; }
.ui-breakdown-dot { width: 10px; height: 10px; border-radius: 50%; align-self: center; background: var(--ui-tint, var(--ui-accent)); }
.ui-breakdown-name { color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-breakdown-value { color: var(--ui-ink); font-weight: var(--ui-weight-semibold); font-variant-numeric: tabular-nums; }
.ui-breakdown-sub { grid-column: 2 / 4; margin-top: -2px; font-size: 13.5px; color: var(--ui-muted); }

/* ======================================================================
   8. CONTROLS: segmented control, stepper, step indicator
   ====================================================================== */

/* Segmented control: radios in labels. <div class="ui-seg" role="radiogroup">. */
.ui-seg {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--ui-radius-pill);
  background: var(--ui-surface-2); max-width: 100%;
}
.ui-seg label { position: relative; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.ui-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ui-seg span {
  display: block; padding: 7px 16px; border-radius: var(--ui-radius-pill);
  font: var(--ui-weight-medium) 14.5px/1.2 var(--ui-font-text); color: var(--ui-muted);
  text-align: center; white-space: nowrap;
  transition: background-color var(--ui-dur) var(--ui-ease), color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease);
}
.ui-seg label:hover span { color: var(--ui-ink); }
.ui-seg input:checked + span { background: var(--ui-surface); color: var(--ui-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06); }
.ui-seg input:focus-visible + span { outline: 2px solid var(--ui-accent); outline-offset: 1px; }

/* Numeric stepper: minus, a big number, plus. */
.ui-stepper { display: inline-flex; align-items: center; gap: 12px; }
.ui-stepper output {
  min-width: 2.4em; text-align: center; font: var(--ui-weight-bold) 30px/1 var(--ui-font-display);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ui-ink);
}

/* Step indicator for a multi-screen flow. data-state: current, done, locked. */
.ui-steps ol { display: flex; justify-content: center; gap: 6px; list-style: none; margin: 0 0 26px; padding: 0; }
.ui-steps-item {
  appearance: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 0; border-radius: var(--ui-radius-pill); background: none; cursor: pointer; text-decoration: none;
  font: var(--ui-weight-medium) 14px/1.2 var(--ui-font-text); letter-spacing: 0.01em; color: var(--ui-muted);
  transition: color var(--ui-dur) var(--ui-ease), background-color var(--ui-dur) var(--ui-ease);
}
.ui-steps-item::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.55;
  transition: transform var(--ui-dur) var(--ui-ease);
}
.ui-steps-item:disabled, .ui-steps-item[data-state="locked"] { cursor: default; color: var(--ui-faint); }
.ui-steps-item:not(:disabled):hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.ui-steps-item[data-state="current"] { color: var(--ui-ink); background: var(--ui-surface); box-shadow: var(--ui-shadow-1); }
.ui-steps-item[data-state="current"]::before { background: var(--ui-accent); opacity: 1; transform: scale(1.15); }
.ui-steps-item[data-state="done"]::before { background: var(--ui-good); opacity: 1; }
/* open: reachable, not done yet. failed: the step that stopped. */
.ui-steps-item[data-state="open"]::before { background: var(--ui-accent); opacity: 0.6; }
.ui-steps-item[data-state="failed"] { color: var(--ui-bad); }
.ui-steps-item[data-state="failed"]::before { background: var(--ui-bad); opacity: 1; }
/* .ui-steps-compact: on phones only the current step keeps its name; the
   others are dots, still named for a screen reader. Wrap each name in
   .ui-steps-name. */

/* ======================================================================
   9. INPUTS
   ====================================================================== */

/* A labelled field: <label class="ui-field"><span class="ui-label">..</span>
   <input class="ui-input"> <span class="ui-hint">..</span></label>. */
.ui-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 var(--ui-space-5); min-width: 0; }
.ui-input {
  width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--ui-radius-md);
  background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line-strong);
  font: 16px/1.4 var(--ui-font-text);  /* 16 px keeps phones from zooming */
  transition: border-color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease);
}
textarea.ui-input { min-height: 112px; padding: 12px 16px; resize: vertical; }
.ui-input::placeholder { color: var(--ui-muted); opacity: 0.85; }
.ui-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-ring); }
.ui-input[aria-invalid="true"] { border-color: var(--ui-bad); }
.ui-input:disabled { background: var(--ui-surface-2); color: var(--ui-faint); }
.ui-input-mono { font-family: var(--ui-font-mono); font-size: 14.5px; }

/* Search: a pill with a magnifier. Frosted so it can float on the map. */
.ui-search { position: relative; width: min(340px, 100%); }
.ui-search > svg {
  position: absolute; left: 13px; top: 12px; width: 18px; height: 18px; z-index: 1; pointer-events: none;
  fill: none; stroke: var(--ui-muted); stroke-width: 1.8; stroke-linecap: round;
}
.ui-search input {
  width: 100%; height: 42px; padding: 0 14px 0 38px; border-radius: var(--ui-radius-pill);
  font: 16px var(--ui-font-text); color: var(--ui-ink);
  background: var(--ui-glass-strong); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ui-search input::placeholder { color: var(--ui-muted); }
.ui-search input:focus { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
/* Results under the search box: buttons in a list. */
.ui-search-results { margin-top: 6px; border-radius: var(--ui-radius-md); overflow: hidden; background: var(--ui-surface); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-2); }
.ui-search-results:empty { display: none; }
.ui-search-results button {
  display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 14px;
  border: 0; background: none; cursor: pointer; text-align: left; font: 15.5px var(--ui-font-text); color: var(--ui-ink);
}
.ui-search-results button span { color: var(--ui-muted); font-size: 14px; }
.ui-search-results button:hover, .ui-search-results button[aria-selected="true"] { background: var(--ui-accent-soft); }

/* A secret shown once (an API key): a big monospaced well the reader can
   select whole with one tap. */
.ui-secret {
  display: block; padding: 20px 22px; border-radius: var(--ui-radius-lg);
  background: var(--ui-bg); border: 1.5px solid color-mix(in srgb, var(--ui-accent) 40%, var(--ui-line));
  box-shadow: var(--ui-ring);
  font: 600 clamp(19px, 2.2vw, 23px) / 1.4 var(--ui-font-mono); letter-spacing: 0.01em;
  color: var(--ui-ink); text-align: left; overflow-wrap: anywhere; word-break: break-all;
  -webkit-user-select: all; user-select: all; cursor: text;
}
.ui-secret:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }

/* A file as a spreadsheet: a head (the file's name and size), then its
   first rows as a grid that scrolls sideways, then how many more. */
.ui-sheetgrid {
  overflow: hidden; border-radius: var(--ui-radius-lg);
  background: var(--ui-surface); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-1);
}
.ui-sheetgrid-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 18px 12px; border-bottom: 1px solid var(--ui-line);
}
.ui-sheetgrid-name { min-width: 0; font: var(--ui-weight-semibold) 14px/1.3 var(--ui-font-mono); color: var(--ui-ink); overflow-wrap: anywhere; }
.ui-sheetgrid-size { flex: none; font-size: 13px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.ui-sheetgrid-body { max-width: 100%; overflow-x: auto; }
.ui-sheetgrid-body:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.ui-sheetgrid table { border-collapse: collapse; font: 13px/1.35 var(--ui-font-text); color: var(--ui-ink-2); white-space: nowrap; }
.ui-sheetgrid th {
  padding: 8px 12px; text-align: left; background: var(--ui-surface-2);
  font-weight: var(--ui-weight-semibold); color: var(--ui-muted); border-right: 1px solid var(--ui-line);
}
.ui-sheetgrid td {
  padding: 8px 12px; border-top: 1px solid var(--ui-line); border-right: 1px solid var(--ui-line);
  font-variant-numeric: tabular-nums;
}
.ui-sheetgrid :is(th, td):last-child { border-right: 0; }
.ui-sheetgrid-more { margin: 0; padding: 8px 18px 10px; font-size: 13px; color: var(--ui-muted); }

/* The big amount field: a figure you type into, at stat size. */
.ui-bigfield { display: flex; align-items: baseline; gap: 6px; max-width: 100%; margin-top: 4px; }
.ui-bigfield-sign, .ui-bigfield input {
  font: var(--ui-weight-bold) clamp(38px, 4.6vw, 54px) / 1.1 var(--ui-font-display);
  letter-spacing: var(--ui-tracking-display); font-variant-numeric: tabular-nums; color: var(--ui-ink);
}
.ui-bigfield-sign { color: var(--ui-muted); }
.ui-bigfield input {
  flex: 0 1 auto; min-width: 0; width: 9.5ch; padding: 0 0 2px; border: 0; border-radius: 0;
  border-bottom: 2px solid var(--ui-line); background: none;
  transition: border-color var(--ui-dur) var(--ui-ease);
}
.ui-bigfield input:focus { outline: none; border-bottom-color: var(--ui-accent); }
.ui-bigfield-unit { font-size: 15px; font-weight: 650; letter-spacing: 0.04em; color: var(--ui-muted); }

/* ======================================================================
   10. GROUPED INSET LIST (the settings list)
   ====================================================================== */

/* <section class="ui-group">
     <h3 class="ui-group-head">Account</h3>
     <ul class="ui-list"><li><div class="ui-row">..</div></li>..</ul>
     <p class="ui-group-foot">..</p>
   </section>
   A row holds an optional .ui-row-icon, a .ui-row-main (title and sub),
   then a trailing .ui-row-value, a .ui-toggle, or nothing. Make the row an
   <a class="ui-row ui-row-link"> for a disclosure row with a chevron. */
.ui-group { margin: 0 0 var(--ui-space-7); }
.ui-group-head {
  margin: 0 0 8px; padding: 0 16px; font: 650 var(--ui-type-caption) / 1.3 var(--ui-font-text);
  letter-spacing: var(--ui-tracking-caps); text-transform: uppercase; color: var(--ui-muted);
}
.ui-group-foot { margin: 8px 0 0; padding: 0 16px; font-size: 13.5px; line-height: 1.45; color: var(--ui-muted); }
.ui-list {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  border-radius: var(--ui-radius-md); background: var(--ui-surface); border: 1px solid var(--ui-line);
}
/* A list a script has not filled yet draws no empty box. */
.ui-list:empty { border-width: 0; }
.ui-row {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px;
  color: var(--ui-ink); text-decoration: none; font-size: 16px; line-height: 1.3;
  background-repeat: no-repeat;
}
/* Inset hairline between rows, starting at the text, not the edge. */
.ui-list > li + li > .ui-row, .ui-list > .ui-row + .ui-row {
  background-image: linear-gradient(var(--ui-line), var(--ui-line));
  background-size: calc(100% - 16px) 1px; background-position: right top;
}
.ui-row-icon {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--ui-tint, var(--ui-accent)); color: #ffffff;
}
.ui-row-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-row-title { color: var(--ui-ink); }
.ui-row-sub { font-size: 13.5px; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-row-value { flex: none; max-width: 50%; color: var(--ui-muted); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
/* A value that is an id, an address or a key: monospaced, allowed more room. */
.ui-row-value-mono { max-width: 64%; font: 13.5px/1.35 var(--ui-font-mono); color: var(--ui-ink-2); }
.ui-row-link { cursor: pointer; transition: background-color var(--ui-dur) var(--ui-ease); }
.ui-row-link::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 2px 0 4px;
  border: solid var(--ui-faint); border-width: 2px 2px 0 0; transform: rotate(45deg);
}
.ui-row-link:hover { background-color: var(--ui-surface-2); }
.ui-row-link:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; border-radius: var(--ui-radius-md); }
.ui-row-danger .ui-row-title { color: var(--ui-bad); }

/* Toggle switch: <input type="checkbox" class="ui-toggle" role="switch">. */
.ui-toggle {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
  width: 51px; height: 31px; border-radius: 31px; cursor: pointer;
  background: var(--ui-line-strong);
  transition: background-color var(--ui-dur) var(--ui-ease);
}
.ui-toggle::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  transition: transform var(--ui-dur) var(--ui-ease);
}
.ui-toggle:checked { background: var(--ui-accent); }
.ui-toggle:checked::before { transform: translateX(20px); }
.ui-toggle:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.ui-toggle:disabled { opacity: 0.45; cursor: default; }

/* ======================================================================
   11. SHEET: settings panel (right side on desktop, bottom on phones)
   ====================================================================== */

/* <dialog class="ui-sheet" id="settings" aria-labelledby="settings-title">
     <div class="ui-sheet-head"><h2 class="ui-sheet-title" id="settings-title">..</h2>
       <form method="dialog"><button class="ui-iconbtn ui-iconbtn-flat" aria-label="Close">..</button></form></div>
     <div class="ui-sheet-body">..</div>
   </dialog>
   Open it with a button carrying data-sheet-open="settings" plus the
   three-line script in the style guide, or commandfor="settings"
   command="show-modal" where supported. The form closes it without JS. */
.ui-sheet {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0;
  width: min(420px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  border: 0; border-left: 1px solid var(--ui-line); border-radius: var(--ui-radius-xl) 0 0 var(--ui-radius-xl);
  background: var(--ui-bg); color: var(--ui-ink); box-shadow: var(--ui-shadow-3);
  font: var(--ui-type-body) / var(--ui-leading-body) var(--ui-font-text);
  overflow: hidden; display: none; flex-direction: column;
}
.ui-sheet[open] { display: flex; animation: ui-sheet-side var(--ui-dur-slow) var(--ui-ease) both; }
.ui-sheet::backdrop { background: var(--ui-scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ui-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 18px 12px 22px; border-bottom: 1px solid var(--ui-line);
}
.ui-sheet-head form { margin: 0; }
.ui-sheet-title { margin: 0; font: var(--ui-weight-bold) 22px/1.2 var(--ui-font-display); letter-spacing: -0.02em; color: var(--ui-ink); }
.ui-sheet-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 22px 18px 32px; }
.ui-sheet-foot { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-line); background: var(--ui-bg); }
@keyframes ui-sheet-side { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ui-sheet-up { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ======================================================================
   12. QUIET DISCLOSURE: where long text, legal lines and raw API detail go
   ====================================================================== */

.ui-quiet { margin: var(--ui-space-7) 0 0; }
.ui-quiet > summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none;
  font: var(--ui-weight-medium) 15px/1.3 var(--ui-font-text); color: var(--ui-muted);
}
.ui-quiet > summary::-webkit-details-marker { display: none; }
.ui-quiet > summary::before {
  content: ""; width: 7px; height: 7px; margin-right: 2px; border: solid currentColor; border-width: 0 1.8px 1.8px 0;
  transform: rotate(-45deg); transition: transform var(--ui-dur) var(--ui-ease);
}
.ui-quiet[open] > summary::before { transform: rotate(45deg); }
.ui-quiet > summary:hover { color: var(--ui-ink); }
.ui-quiet > summary:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; border-radius: 6px; }
.ui-quiet-body { max-width: 72ch; padding: 6px 0 0 17px; font-size: 15.5px; color: var(--ui-ink-2); }
.ui-quiet-body p { margin: 0 0 12px; }
.ui-quiet-body h3 { margin: 14px 0 4px; font-size: 15.5px; color: var(--ui-ink); }

/* ======================================================================
   13. STATUS: pulse dot and timeline
   ====================================================================== */

/* A live status dot. data-status: idle, queued, running, done, failed.
   The ring pulses while work is in flight. */
.ui-status { display: flex; align-items: center; gap: 16px; }
.ui-pulse {
  --ui-node: var(--ui-muted);
  position: relative; flex: none; display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ui-node); color: var(--ui-node);
  transition: background-color var(--ui-dur-slow) var(--ui-ease);
}
.ui-pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.ui-pulse[data-status="queued"] { --ui-node: var(--ui-queued); }
.ui-pulse[data-status="running"] { --ui-node: var(--ui-running); }
.ui-pulse[data-status="done"] { --ui-node: var(--ui-good); }
.ui-pulse[data-status="failed"] { --ui-node: var(--ui-bad); }
.ui-pulse:is([data-status="queued"], [data-status="running"])::after { animation: ui-ring 2.2s var(--ui-ease) infinite; }
.ui-pulse-sm { width: 9px; height: 9px; }
.ui-pulse-sm::after { inset: -4px; border-width: 1.5px; }
@keyframes ui-ring { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }

/* Timeline: an ordered list of stages. Each <li> carries data-stage
   (queued, running, done, or anything) for its colour and data-state
   (done, current, pending, skipped, failed) for where the run is.
   Horizontal on desktop, vertical on phones. */
.ui-timeline {
  list-style: none; margin: var(--ui-space-7) 0 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.ui-timeline li { --ui-node: var(--ui-muted); position: relative; display: flex; flex-direction: column; gap: 4px; padding-top: 30px; }
.ui-timeline li[data-stage="queued"] { --ui-node: var(--ui-queued); }
.ui-timeline li[data-stage="running"] { --ui-node: var(--ui-running); }
.ui-timeline li[data-stage="done"] { --ui-node: var(--ui-good); }
.ui-timeline li[data-state="failed"] { --ui-node: var(--ui-bad); }
.ui-timeline li::before {
  content: ""; position: absolute; top: 9px; left: 20px; right: -2px; height: 3px; border-radius: 3px;
  background: var(--ui-line-strong);
}
.ui-timeline li:last-child::before { display: none; }
.ui-timeline li[data-state="done"]::before { background: var(--ui-good); }
.ui-timeline li[data-state="current"]::before {
  background: linear-gradient(90deg, transparent, var(--ui-node) 50%, transparent) 0 0 / 40% 100% no-repeat, var(--ui-line-strong);
  animation: ui-travel 1.9s linear infinite;
}
@keyframes ui-travel { from { background-position: -60% 0, 0 0; } to { background-position: 160% 0, 0 0; } }
.ui-timeline-node {
  position: absolute; top: 0; left: 0; width: 21px; height: 21px; border-radius: 50%;
  border: 2.5px solid var(--ui-line-strong); background: var(--ui-bg);
  transition: background-color var(--ui-dur-slow) var(--ui-ease), border-color var(--ui-dur-slow) var(--ui-ease);
}
.ui-timeline li[data-state="done"] .ui-timeline-node { background: var(--ui-good); border-color: var(--ui-good); }
.ui-timeline li[data-state="done"] .ui-timeline-node::after {
  content: ""; position: absolute; left: 5px; top: 2.5px; width: 5px; height: 9px;
  border: solid var(--ui-bg); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg);
}
.ui-timeline li:is([data-state="current"], [data-state="failed"]) .ui-timeline-node {
  background: var(--ui-node); border-color: var(--ui-node);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ui-node) 22%, transparent);
}
.ui-timeline li[data-state="skipped"] .ui-timeline-node { border-style: dashed; }
.ui-timeline-stage { font-size: 15.5px; font-weight: var(--ui-weight-semibold); color: var(--ui-ink); }
.ui-timeline li:is([data-state="pending"], [data-state="skipped"]) .ui-timeline-stage { color: var(--ui-muted); }
.ui-timeline li[data-state="failed"] .ui-timeline-stage { color: var(--ui-bad); }
.ui-timeline-when { min-height: 1.3em; font-size: 13.5px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }

/* ======================================================================
   14. MAP FRAME
   ====================================================================== */

/* The frame the dotted map is drawn in (canvas, SVG or img as
   .ui-map-canvas). Controls float inside: search top left, zoom stack
   bottom right, the loss legend bottom left. Set the shape with
   style="--ui-map-ratio: 4 / 3". */
.ui-map {
  position: relative; overflow: hidden; aspect-ratio: var(--ui-map-ratio, 16 / 8.2);
  border-radius: var(--ui-radius-lg); background: var(--ui-sea);
  border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-1);
}
.ui-map-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ui-map-canvas:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -3px; border-radius: var(--ui-radius-lg); }
.ui-map-search { position: absolute; left: 14px; top: 14px; width: min(300px, calc(100% - 28px)); }
.ui-map-ctl { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.ui-map-legend {
  position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: var(--ui-radius-pill);
  font: var(--ui-weight-medium) 12px/1.2 var(--ui-font-text); color: var(--ui-muted);
  background: var(--ui-glass-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* A plain dot texture for placeholders; real maps draw from /assets/maps. */
.ui-map-dots {
  background-color: var(--ui-sea);
  background-image: radial-gradient(var(--ui-land) 1.2px, transparent 1.6px);
  background-size: 9px 9px;
}
/* SVG parts for a hand-placed dot map. */
.ui-map-land { fill: var(--ui-land); }
.ui-map-pin { fill: var(--ui-land-lit); stroke: var(--ui-surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ui-map-halo { fill: var(--ui-accent-glow); opacity: 0.35; }
/* A label pinned to a point on the map: position it with left/top in
   percent, then place it -above, -below or -left of the point. */
.ui-map-label {
  position: absolute; z-index: 1; white-space: nowrap; pointer-events: none;
  padding: 3px 9px; border-radius: var(--ui-radius-pill);
  background: var(--ui-glass-strong); box-shadow: var(--ui-shadow-1);
  font-size: 12.5px; line-height: 1.3; color: var(--ui-ink-2); font-variant-numeric: tabular-nums;
}
.ui-map-label b { color: var(--ui-ink); font-weight: var(--ui-weight-semibold); }
.ui-map-label-above { transform: translate(-50%, calc(-100% - 16px)); }
.ui-map-label-below { transform: translate(-40%, 14px); }
.ui-map-label-left { transform: translate(calc(-100% - 16px), -50%); }
/* Marks for a map legend: a point (tinted with --ui-tint) and an area. */
.ui-map-mark {
  display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ui-tint, var(--ui-accent)); box-shadow: 0 0 0 2px var(--ui-surface);
}
.ui-map-mark-area {
  width: 14px; height: 10px; border-radius: 2px; box-shadow: none;
  border: 1.5px dashed var(--ui-accent); background: var(--ui-accent-soft);
}

/* ======================================================================
   15. CODE BLOCK
   ====================================================================== */

/* <div class="ui-code"><div class="ui-code-head"><span class="ui-code-label">POST /v1/..</span>
   <button class="ui-code-copy" type="button">Copy</button></div><pre><code>..</code></pre></div>
   A bare <pre class="ui-code"> works too. For a code panel that stays
   dark in both themes, add data-theme="dark". */
.ui-code {
  margin: 0 0 var(--ui-space-4); max-width: 100%; overflow: hidden;
  border-radius: var(--ui-radius-md); background: var(--ui-surface); border: 1px solid var(--ui-line);
  color: var(--ui-ink-2);
}
pre.ui-code, .ui-code pre {
  margin: 0; padding: 14px 16px; overflow: auto; max-width: 100%;
  font: 13px/1.6 var(--ui-font-mono); color: var(--ui-ink-2); white-space: pre; tab-size: 2;
}
.ui-code pre { border: 0; border-radius: 0; background: none; }
.ui-code-tall pre, pre.ui-code-tall { max-height: 320px; }
.ui-code-wrap pre, pre.ui-code-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--ui-line);
}
.ui-code-label { min-width: 0; font: var(--ui-weight-medium) 12.5px/1.3 var(--ui-font-mono); color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-code-copy {
  appearance: none; flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: var(--ui-radius-pill);
  background: var(--ui-surface-2); color: var(--ui-ink); cursor: pointer;
  font: var(--ui-weight-medium) 13px/1 var(--ui-font-text);
}
.ui-code-copy:hover { background: var(--ui-line-strong); }
.ui-code-copy:disabled { opacity: 0.45; cursor: default; }
/* /assets/copy.js marks a button that just copied. */
.ui-code-copy[data-copied] { background: color-mix(in srgb, var(--ui-good) 18%, transparent); color: var(--ui-good); }
/* On an alt band a code panel sits inset on the page ground, in both themes. */
.ui-band-alt .ui-code { background: var(--ui-bg); }
/* A status in a code head: what the call answered (<b>201</b> Created), or
   with -dot, that the block is checked ("Runs in CI"). */
.ui-code-status {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font: var(--ui-weight-medium) 12.5px/1.3 var(--ui-font-mono); color: var(--ui-muted); overflow-wrap: anywhere;
}
.ui-code-status b {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--ui-radius-pill);
  background: color-mix(in srgb, var(--ui-good) 18%, transparent); color: var(--ui-good);
  font: 650 12px/1 var(--ui-font-mono);
}
.ui-code-status-dot { gap: 6px; font-family: var(--ui-font-text); color: var(--ui-good); white-space: nowrap; }
.ui-code-status-dot::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Terminal: a code block of shell commands. Put .ui-term on the .ui-code. A
   prompt is <span class="ui-term-prompt">$ </span>, or .ui-term-cmd on a pre
   that holds one command; a passing check is <span class="ui-term-ok">. */
.ui-term { margin: 0; border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-2); }
.ui-term .ui-code-head { padding: 12px 16px; }
.ui-term pre { color: var(--ui-ink); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-term pre + pre { padding-top: 4px; }
.ui-term-prompt { color: var(--ui-muted); -webkit-user-select: none; user-select: none; }
.ui-term-cmd::before { content: "$ "; color: var(--ui-muted); }
.ui-term-ok { color: var(--ui-good); font-weight: var(--ui-weight-semibold); }
.ui-term-note { margin: 0; padding: 0 16px 14px; font-size: 12.5px; line-height: 1.5; color: var(--ui-muted); }

/* Console: a frosted card that stacks code blocks (a request and its
   answer) over a photo hero or a dark band. Give it data-theme="dark". */
.ui-console {
  margin: 0; padding: 8px; min-width: 0; border-radius: var(--ui-radius-xl);
  background: color-mix(in srgb, var(--ui-surface) 74%, transparent); border: 1px solid var(--ui-line-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: var(--ui-shadow-3);
}
.ui-console .ui-code { margin: 0; border-radius: 20px; background: color-mix(in srgb, var(--ui-bg) 55%, transparent); }
.ui-console .ui-code + .ui-code { margin-top: 8px; }
.ui-console figcaption { padding: 12px 14px 6px; font-size: var(--ui-type-fine); line-height: 1.5; color: var(--ui-muted); }
.ui-code .k { color: var(--ui-ink); }                 /* keys, verbs */
.ui-code .s { color: var(--ui-accent); }              /* strings */
.ui-code .n { color: var(--ui-queued); }              /* numbers */
.ui-code .c { color: var(--ui-muted); font-style: italic; } /* comments */

/* ======================================================================
   16. DATA TABLE
   ====================================================================== */

/* <div class="ui-table-wrap"><table class="ui-table">..</table></div>.
   Put .ui-num on numeric th and td to right-align them. */
.ui-table-wrap {
  max-width: 100%; overflow-x: auto; border-radius: var(--ui-radius-md);
  background: var(--ui-surface); border: 1px solid var(--ui-line);
}
.ui-table { width: 100%; border-collapse: collapse; font: 15px/1.4 var(--ui-font-text); color: var(--ui-ink); }
.ui-table caption { padding: 14px 16px 0; text-align: left; font-size: 13.5px; color: var(--ui-muted); caption-side: top; }
.ui-table th {
  padding: 12px 16px 10px; text-align: left; white-space: nowrap; vertical-align: bottom;
  font: 650 12px/1.3 var(--ui-font-text); letter-spacing: var(--ui-tracking-caps); text-transform: uppercase;
  color: var(--ui-muted); border: 0; border-bottom: 1px solid var(--ui-line);
}
.ui-table td { padding: 12px 16px; vertical-align: top; border: 0; border-top: 1px solid var(--ui-line); color: var(--ui-ink); }
.ui-table tbody tr:first-child td { border-top: 0; }
.ui-table tbody tr:hover td { background: color-mix(in srgb, var(--ui-accent) 4%, transparent); }
.ui-table :is(th, td).ui-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-table td.ui-mono, .ui-table td code { font-family: var(--ui-font-mono); font-size: 13px; color: var(--ui-ink-2); }
.ui-table code { white-space: nowrap; overflow-wrap: normal; }  /* an identifier never breaks; the wrap scrolls */
.ui-table-compact :is(th, td) { padding-top: 8px; padding-bottom: 8px; }
/* -stack: on phones each row becomes a block, its cells stacked (a list of
   files: the name, then what it is). */
@media (max-width: 640px) {
  .ui-table-stack thead { display: none; }
  .ui-table-stack, .ui-table-stack :is(tbody, tr, td) { display: block; }
  .ui-table-stack tr { padding: 12px 16px; border-top: 1px solid var(--ui-line); }
  .ui-table-stack tbody tr:first-child { border-top: 0; }
  .ui-table-stack td { padding: 0; border: 0; min-width: 0; }
  .ui-table-stack td + td { margin-top: 4px; color: var(--ui-ink-2); }
  .ui-table-stack td.ui-num { text-align: left; color: var(--ui-muted); font-size: 13.5px; }
  .ui-table-stack td code { white-space: normal; overflow-wrap: anywhere; }
}

/* ======================================================================
   17. CALLOUT
   ====================================================================== */

/* One short message that needs to stand apart. Default is information;
   -good and -bad carry status; -quiet is neutral. */
.ui-callout {
  --ui-tint: var(--ui-accent);
  display: flex; gap: 12px; align-items: flex-start; margin: var(--ui-space-5) 0;
  padding: 14px 18px; border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--ui-tint) 9%, var(--ui-surface));
  border: 1px solid color-mix(in srgb, var(--ui-tint) 28%, transparent);
  color: var(--ui-ink-2); font-size: 15.5px; line-height: 1.5;
}
.ui-callout > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--ui-tint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-callout p { margin: 0; }
.ui-callout-title { display: block; margin: 0 0 2px; font-weight: var(--ui-weight-semibold); color: var(--ui-ink); }
.ui-callout-good { --ui-tint: var(--ui-good); }
.ui-callout-bad { --ui-tint: var(--ui-bad); }
.ui-callout-quiet { --ui-tint: var(--ui-muted); background: var(--ui-surface-2); border-color: transparent; }

/* ======================================================================
   18. HERO, BANDS, FEATURE GRID
   ====================================================================== */

/* The page's first screen: kicker, two-to-six-word headline, one
   sentence, actions, and optionally one figure beside it. For a photo
   hero add .ui-hero-media and data-theme="dark", with the image in
   .ui-hero-backdrop (credit it in the fine line). */
.ui-hero { position: relative; overflow: hidden; padding: var(--ui-space-11) 0 var(--ui-space-10); background: var(--ui-bg); color: var(--ui-ink); }
/* One column until 981 px, then two. Set the split with --ui-hero-cols on
   the hero (not grid-template-columns on the grid): the variable is read
   only above 980 px, so no page override can cost the phone its stack. */
.ui-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-7); align-items: center; }
@media (min-width: 981px) {
  .ui-hero-grid { grid-template-columns: var(--ui-hero-cols, minmax(0, 3fr) minmax(0, 2fr)); gap: var(--ui-space-9); }
}
.ui-hero-title {
  margin: 0; font: var(--ui-weight-bold) var(--ui-type-hero) / 1 var(--ui-font-display);
  letter-spacing: -0.04em; color: var(--ui-ink); text-wrap: balance;
}
.ui-hero .ui-lede { max-width: 34ch; }
.ui-hero-fine { margin: var(--ui-space-6) 0 0; max-width: 60ch; font-size: var(--ui-type-fine); line-height: 1.5; color: var(--ui-muted); }
.ui-hero-media {
  display: flex; align-items: center; min-height: min(760px, calc(100vh - var(--ui-top-h)));
  border-bottom: 1px solid var(--ui-line-strong);  /* the edge a dark first band would otherwise lose */
}
.ui-hero-media > .ui-wrap { position: relative; z-index: 1; }
.ui-hero-backdrop { position: absolute; inset: 0; }
.ui-hero-backdrop :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.ui-hero-backdrop::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 9, 13, 0.82) 0%, rgba(7, 9, 13, 0.45) 55%, rgba(7, 9, 13, 0.2) 100%),
    linear-gradient(180deg, rgba(7, 9, 13, 0.2) 60%, rgba(7, 9, 13, 0.78));
}
/* A sub-page's hero: shorter than a landing page's, its headline a size
   down, two even columns, so the next band shows under it on a laptop. */
.ui-hero-page { --ui-hero-cols: minmax(0, 1fr) minmax(0, 1fr); padding: 104px 0 96px; }
.ui-hero-page.ui-hero-media { min-height: 0; }
.ui-hero-page .ui-hero-title { font-size: clamp(42px, 4.4vw, 64px); }
.ui-hero-center { text-align: center; }
.ui-hero-center .ui-lede { margin-left: auto; margin-right: auto; }
.ui-hero-center .ui-actions { justify-content: center; }

/* Feature grid: a glyph, a two-to-four-word title, one line. */
.ui-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.ui-feature { min-width: 0; padding: 24px 22px; border-radius: var(--ui-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-line); }
.ui-feature-glyph { display: block; width: 40px; height: 40px; margin: 0 0 18px; color: var(--ui-accent); }
.ui-feature-glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-feature-title { margin: 0 0 4px; font: 660 19px/1.25 var(--ui-font-display); letter-spacing: -0.015em; color: var(--ui-ink); }
.ui-feature-text { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ui-muted); }
.ui-features-plain .ui-feature { padding: 0; background: none; border: 0; }

/* ======================================================================
   19. PRICING TIER
   ====================================================================== */

.ui-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; align-items: stretch; }
.ui-tier {
  display: flex; flex-direction: column; min-width: 0; padding: 28px 26px 26px;
  border-radius: var(--ui-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-1);
}
.ui-tier-featured { border: 1.5px solid var(--ui-accent); box-shadow: var(--ui-ring), var(--ui-shadow-1); }
.ui-tier-name { margin: 0; font: 650 var(--ui-type-caption) / 1.3 var(--ui-font-text); letter-spacing: var(--ui-tracking-caps); text-transform: uppercase; color: var(--ui-muted); }
.ui-tier-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 14px 0 0; }
.ui-tier-amount { font: var(--ui-weight-bold) clamp(40px, 4.4vw, 56px) / 1 var(--ui-font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ui-ink); }
.ui-tier-unit { font-size: 15px; color: var(--ui-muted); }
.ui-tier-note { margin: 10px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--ui-ink-2); }
.ui-tier-list { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--ui-ink-2); }
.ui-tier-list li { position: relative; padding-left: 26px; }
.ui-tier-list li::before {
  content: ""; position: absolute; left: 3px; top: 0.35em; width: 5px; height: 10px;
  border: solid var(--ui-accent); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg);
}
.ui-tier > .ui-btn { margin-top: auto; }

/* ======================================================================
   20. STEP LIST: numbered "how it works"
   ====================================================================== */

/* <ol class="ui-steplist"><li><h3 class="ui-steplist-title">Place</h3>
   <p class="ui-steplist-text">Tap a map or pick a city.</p></li>..</ol>
   Add .ui-steplist-cards for three cards in a row with an optional
   .ui-steplist-art graphic on top; -cards-4 makes it four (two under
   1100 px), and -badge moves the number to the card's corner so the
   drawing leads. On phones a card with a drawing becomes a row: the
   drawing beside its words. */
.ui-steplist { counter-reset: ui-step; list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.ui-steplist > li { counter-increment: ui-step; position: relative; min-width: 0; padding-left: 52px; }
.ui-steplist > li::before {
  content: counter(ui-step); position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ui-accent-soft); color: var(--ui-accent);
  font: var(--ui-weight-bold) 15px/1 var(--ui-font-display); font-variant-numeric: tabular-nums;
}
.ui-steplist-title { margin: 0 0 4px; font: 660 19px/1.3 var(--ui-font-display); letter-spacing: -0.015em; color: var(--ui-ink); }
.ui-steplist-text { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ui-muted); }
.ui-steplist-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ui-steplist-cards > li {
  padding: 28px 26px 26px; border-radius: var(--ui-radius-lg); background: var(--ui-surface);
  border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-1);
}
.ui-steplist-cards > li::before { position: static; margin: 0 0 18px; }
.ui-steplist-art { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 0 18px; }
.ui-steplist-text code { font-size: 0.86em; overflow-wrap: anywhere; }
.ui-steplist-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ui-steplist-cards-4 > li { padding: 24px 22px; }
.ui-steplist-cards-4 .ui-steplist-art { max-width: none; height: 88px; }
.ui-steplist-cards-4 .ui-steplist-title { font-size: 18px; }
.ui-steplist-cards-4 .ui-steplist-text { font-size: 15px; }
.ui-steplist-badge > li::before {
  position: absolute; top: 18px; right: 18px; left: auto; margin: 0;
  width: 30px; height: 30px; font-size: 14px;
}

/* Sequence: numbered cards joined by arrows, for calls made in order. Each
   card holds a glyph (the number sits opposite it), a title, one line and a
   call chip. Four across, two under 1080 px, a column on phones. */
.ui-seq {
  list-style: none; margin: 0; padding: 0; counter-reset: ui-seq;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
}
.ui-seq > li {
  counter-increment: ui-seq; position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 22px 22px; border-radius: var(--ui-radius-lg);
  background: var(--ui-surface); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-1);
}
/* The joint between two cards: a short line and an arrowhead, in the gap. */
.ui-seq > li + li::before {
  content: ""; position: absolute; left: -22px; top: 45px; width: 22px; height: 2px;
  background: var(--ui-accent); opacity: 0.55;
}
.ui-seq > li + li::after {
  content: ""; position: absolute; left: -9px; top: 42px; width: 6px; height: 6px;
  border: solid var(--ui-accent); border-width: 2px 2px 0 0; transform: rotate(45deg); opacity: 0.8;
}
.ui-seq-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ui-seq-glyph {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--ui-accent-soft); color: var(--ui-accent);
}
.ui-seq-glyph svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ui-seq-top::after {
  content: counter(ui-seq); font: var(--ui-weight-bold) 14px/1 var(--ui-font-display);
  color: var(--ui-muted); font-variant-numeric: tabular-nums;
}
.ui-seq-title { margin: 0; font: 660 19px/1.25 var(--ui-font-display); letter-spacing: -0.015em; color: var(--ui-ink); }
.ui-seq-text { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ui-muted); }
.ui-seq .ui-call { margin-top: auto; padding-top: 14px; }

/* Call chip: a method and path, then what comes back. */
.ui-call { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; margin: 0; }
.ui-call code {
  min-width: 0; padding: 5px 10px; border-radius: 9px;
  background: var(--ui-surface-2); color: var(--ui-ink);
  font: 13px/1.35 var(--ui-font-mono); overflow-wrap: anywhere;
}
.ui-call code b { color: var(--ui-accent); font-weight: 650; margin-right: 4px; }
.ui-call-back {
  padding: 5px 9px; border-radius: 9px; font: 600 12.5px/1.35 var(--ui-font-mono);
  background: color-mix(in srgb, var(--ui-good) 14%, transparent); color: var(--ui-good);
}

/* Checks: checks that passed, in order, joined by a line in the good
   colour. .ui-checks-stop marks the one that failed. */
.ui-checks { list-style: none; margin: 0; padding: 0; max-width: 640px; }
.ui-checks li {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 16px;
  padding: 0 0 26px;
}
.ui-checks li:not(:last-child)::after {
  content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px; width: 3px; border-radius: 3px;
  background: var(--ui-good);
}
.ui-checks-mark {
  grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ui-good);
}
.ui-checks-mark svg { width: 15px; height: 15px; fill: none; stroke: var(--ui-bg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ui-checks-title { font: 650 18px/1.3 var(--ui-font-display); letter-spacing: -0.01em; color: var(--ui-ink); padding-top: 3px; }
.ui-checks-text { font-size: 15px; color: var(--ui-muted); }
.ui-checks-stop .ui-checks-mark { background: var(--ui-bad); }
.ui-checks-stop .ui-checks-title { color: var(--ui-bad); }

/* ======================================================================
   21. THE CHROME: header bar (.ui-top) and footer (.ui-foot)
   Loaded by every page, including pages that have not opted into .ui, so
   every rule here sets its own font and colour.
   ====================================================================== */

html:has(.ui-top) { scroll-padding-top: calc(var(--ui-top-h) + 12px); }
.ui-top, .ui-foot { font-family: var(--ui-font-text); -webkit-font-smoothing: antialiased; }
.ui-top *, .ui-foot * { box-sizing: border-box; }

.ui-top {
  position: sticky; top: 0; z-index: 50; height: var(--ui-top-h);
  color: var(--ui-ink);
}
/* The frosted ground sits on a pseudo-element: a backdrop-filter on the
   header itself would trap the phone menu's fixed panel inside the bar. */
.ui-top::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ui-glass); border-bottom: 1px solid var(--ui-line);
  -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px);
}
.ui-top-in {
  display: flex; align-items: center; gap: 8px; height: 100%;
  max-width: calc(var(--ui-width) + 2 * var(--ui-gutter)); margin: 0 auto; padding: 0 var(--ui-gutter);
}
.ui-brand {
  flex: none; margin-right: 18px; color: var(--ui-ink); text-decoration: none;
  font: var(--ui-weight-bold) 15px/1 var(--ui-font-display); letter-spacing: 0.22em;
}
.ui-brand:focus-visible, .ui-nav a:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; border-radius: 8px; }

/* Desktop nav: plain links and groups with a drop panel on hover/focus. */
.ui-nav { display: flex; align-items: center; gap: 2px; height: 100%; min-width: 0; }
.ui-nav-plain { display: contents; }
.ui-nav a {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: var(--ui-radius-pill);
  color: var(--ui-ink-2); text-decoration: none; white-space: nowrap;
  font: var(--ui-weight-medium) 14.5px/1.2 var(--ui-font-text);
  transition: color var(--ui-dur) var(--ui-ease), background-color var(--ui-dur) var(--ui-ease);
}
.ui-nav a:hover { color: var(--ui-ink); background: var(--ui-surface-2); }
.ui-nav a[aria-current] { color: var(--ui-ink); font-weight: var(--ui-weight-semibold); }
.ui-nav-group { position: relative; display: flex; align-items: center; height: 100%; }
.ui-nav-group > a::after {
  content: ""; width: 6px; height: 6px; margin: -3px 0 0 1px; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0.6;
}
.ui-nav-drop {
  position: absolute; top: calc(100% - 6px); left: -8px; z-index: 60; min-width: 232px;
  display: flex; flex-direction: column; padding: 8px;
  border-radius: var(--ui-radius-md); background: var(--ui-surface); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--ui-dur) var(--ui-ease), transform var(--ui-dur) var(--ui-ease), visibility 0s linear var(--ui-dur);
}
.ui-nav-group:hover > .ui-nav-drop, .ui-nav-group:focus-within > .ui-nav-drop {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.ui-nav-drop a { display: flex; padding: 9px 12px; border-radius: var(--ui-radius-sm); font-size: 15px; color: var(--ui-ink); }
.ui-nav-drop a:hover { background: var(--ui-accent-soft); }
/* A group's name as a real heading. The phone menu shows it in place of the
   group's link (which is the desktop hover trigger, and repeats the group's
   first item), so the menu's titles are headings, not links styled as ones. */
.ui-nav-head { display: none; }
.ui-top-cta { margin-left: auto; }
.ui-top .ui-top-cta { box-shadow: none; }
.ui-top .ui-btn[aria-current="page"] { background: var(--ui-surface-2); color: var(--ui-ink); box-shadow: none; }

/* The phone menu button: a <details> whose only job is its open state.
   The nav that follows it becomes a full-screen sheet while it is open. */
.ui-top-menu { display: none; }
.ui-top-menu > summary {
  display: grid; place-items: center; width: 40px; height: 40px; margin-right: -6px;
  border-radius: 50%; cursor: pointer; list-style: none; color: var(--ui-ink);
}
.ui-top-menu > summary::-webkit-details-marker { display: none; }
.ui-top-menu > summary:hover { background: var(--ui-surface-2); }
.ui-top-menu > summary:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.ui-top-burger, .ui-top-burger::before, .ui-top-burger::after {
  display: block; width: 18px; height: 1.8px; border-radius: 2px; background: currentColor;
  transition: transform var(--ui-dur) var(--ui-ease), background-color var(--ui-dur) var(--ui-ease);
}
.ui-top-burger { position: relative; }
.ui-top-burger::before, .ui-top-burger::after { content: ""; position: absolute; left: 0; }
.ui-top-burger::before { top: -5.5px; }
.ui-top-burger::after { top: 5.5px; }
.ui-top-menu[open] .ui-top-burger { background: transparent; }
.ui-top-menu[open] .ui-top-burger::before { transform: translateY(5.5px) rotate(45deg); }
.ui-top-menu[open] .ui-top-burger::after { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .ui-top-in { gap: 10px; }
  .ui-brand { margin-right: auto; }
  .ui-top-cta { order: 2; margin-left: 0; }
  .ui-top-menu { display: block; order: 3; }
  .ui-nav { display: none; }
  /* The open sheet: grouped inset lists, the Apple Settings shape. */
  .ui-top-menu[open] ~ .ui-nav {
    position: fixed; top: var(--ui-top-h); left: 0; right: 0; bottom: 0; z-index: 49;
    display: block; height: auto; overflow-y: auto; overscroll-behavior: contain;
    padding: 20px var(--ui-gutter) calc(40px + env(safe-area-inset-bottom));
    background: var(--ui-bg); animation: ui-enter var(--ui-dur-slow) var(--ui-ease) both;
  }
  .ui-nav-group { display: block; height: auto; margin: 0 0 22px; }
  .ui-nav-group > a { display: none; }
  .ui-nav-head {
    display: block; margin: 0 0 8px; padding: 0 16px;
    font: 650 var(--ui-type-caption) / 1.3 var(--ui-font-text); letter-spacing: var(--ui-tracking-caps);
    text-transform: uppercase; color: var(--ui-muted); text-wrap: initial;
  }
  .ui-nav-drop, .ui-nav-plain {
    position: static; display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden;
    opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border-radius: var(--ui-radius-md); background: var(--ui-surface); border: 1px solid var(--ui-line);
  }
  .ui-nav-drop a, .ui-nav-plain > a {
    display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 16px;
    border-radius: 0; font-size: 17px; font-weight: var(--ui-weight-regular); color: var(--ui-ink);
  }
  .ui-nav-drop a + a, .ui-nav-plain > a + a {
    background-image: linear-gradient(var(--ui-line), var(--ui-line));
    background-size: calc(100% - 16px) 1px; background-position: right top; background-repeat: no-repeat;
  }
  .ui-nav-drop a::after, .ui-nav-plain > a::after {
    content: ""; flex: none; width: 8px; height: 8px; border: solid var(--ui-faint);
    border-width: 2px 2px 0 0; transform: rotate(45deg);
  }
  .ui-nav-drop a:hover, .ui-nav-plain > a:hover { background-color: var(--ui-surface-2); }
  body:has(.ui-top-menu[open]) { overflow: hidden; }
}
@media (max-width: 380px) {
  .ui-top .ui-top-cta { padding: 0 12px; font-size: 14px; }
}

/* Footer: brand line, four link columns, the one legal sentence. */
.ui-foot {
  margin: 0; padding: var(--ui-space-10) 0 var(--ui-space-8);
  background: var(--ui-bg); color: var(--ui-muted); border-top: 1px solid var(--ui-line);
  font-size: 14.5px; line-height: 1.45;
}
.ui-foot-in { max-width: calc(var(--ui-width) + 2 * var(--ui-gutter)); margin: 0 auto; padding: 0 var(--ui-gutter); }
.ui-foot-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin: 0 0 var(--ui-space-8); }
.ui-foot-top .ui-brand { margin: 0; }
.ui-foot-tag { margin: 0; color: var(--ui-muted); }
.ui-foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-space-7) var(--ui-space-6); }
.ui-foot-head {
  margin: 0 0 12px; padding: 0; font: 650 12.5px/1.3 var(--ui-font-text); letter-spacing: var(--ui-tracking-caps);
  text-transform: uppercase; color: var(--ui-ink); text-wrap: initial;
}
.ui-foot-col ul { list-style: none; margin: 0; padding: 0; }
.ui-foot-col a {
  display: inline-block; padding: 5px 0; color: var(--ui-ink-2); text-decoration: none;
  font-size: 14.5px; line-height: 1.35; opacity: 1;
}
.ui-foot-col a:hover { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }
.ui-foot-col a:focus-visible, .ui-foot .ui-brand:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; border-radius: 6px; }
.ui-foot-fine {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  margin: var(--ui-space-8) 0 0; padding: var(--ui-space-5) 0 0; border-top: 1px solid var(--ui-line);
  font-size: 13px; line-height: 1.5; color: var(--ui-muted);
}
.ui-foot-fine p { margin: 0; max-width: 74ch; }
.ui-foot-stage { white-space: nowrap; }
@media (max-width: 760px) {
  .ui-foot { padding: var(--ui-space-9) 0 var(--ui-space-7); }
  .ui-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-7) var(--ui-space-5); }
}

/* ======================================================================
   22. WIDTHS
   ====================================================================== */

@media (max-width: 980px) {
  .ui-split, .ui-split-7-5, .ui-split-5-7 { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-7); }
  .ui-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-steplist-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) and (min-width: 641px) {
  .ui-steplist-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .ui-seq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-seq > li:nth-child(odd)::before, .ui-seq > li:nth-child(odd)::after { display: none; }
}
@media (max-width: 640px) {
  .ui-steplist-cards { gap: 10px; }
  .ui-steplist-cards > li:has(> .ui-steplist-art) {
    display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; align-items: center;
    padding: 16px 16px 16px 18px;
  }
  .ui-steplist-cards > li:has(> .ui-steplist-art)::before { display: none; }
  .ui-steplist-cards .ui-steplist-art { grid-row: span 2; width: 88px; max-width: 88px; height: auto; margin: 0; }
  .ui-steplist-cards > li:has(> .ui-steplist-art) .ui-steplist-title { align-self: end; margin: 0; font-size: 17px; }
  .ui-steplist-cards > li:has(> .ui-steplist-art) .ui-steplist-text { align-self: start; margin-top: 2px; font-size: 14.5px; }
  /* Sequence cards stack, the number under the glyph, joined by a line. */
  .ui-seq { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ui-seq > li { padding: 18px 18px 18px 78px; min-height: 0; }
  .ui-seq-top { position: absolute; left: 18px; top: 18px; margin: 0; flex-direction: column; gap: 8px; }
  .ui-seq-top::after { font-size: 13px; }
  .ui-seq > li + li::before, .ui-seq > li:nth-child(odd)::before {
    display: block; left: 40px; top: -18px; width: 2px; height: 18px;
  }
  .ui-seq > li + li::after, .ui-seq > li:nth-child(odd)::after { display: none; }
  .ui-seq > li:first-child::before { display: none; }
  .ui-seq .ui-call { padding-top: 10px; }
  /* Link cards become rows: the glyph, then the title and its line. */
  .ui-linkcard {
    display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: start;
    padding: 16px 16px 16px 18px;
  }
  .ui-linkcard .ui-feature-glyph { grid-row: span 2; width: 28px; height: 28px; margin: 1px 0 0; }
  .ui-linkcard-title { font-size: 17.5px; }
  .ui-linkcard-text { font-size: 15px; }
  .ui-linkcard-foot { display: none; }
}
@media (max-width: 480px) {
  .ui-title { font-size: clamp(34px, 10vw, 44px); }
  .ui-hero-title { font-size: clamp(42px, 12.5vw, 56px); }
  .ui-hero { padding: var(--ui-space-9) 0; }
  .ui-hero-media { min-height: 0; }
  .ui-hero-page { padding: 56px 0 48px; }
  .ui-hero-page .ui-hero-title { font-size: clamp(40px, 11.5vw, 52px); }
  .ui-sub { font-size: 17px; }
  .ui-card { padding: 20px 18px; }
  .ui-console { padding: 6px; border-radius: 22px; }
  .ui-term pre { padding: 14px; font-size: 12px; }
  .ui-console .ui-code { border-radius: 16px; }
  .ui-actions-sticky { position: sticky; bottom: 12px; z-index: 5; }
  /* Filled buttons fill the row and stack; quiet and link buttons keep
     their own width. */
  .ui-actions > :is(.ui-btn-primary, .ui-btn-secondary) { flex: 1 1 100%; }
  .ui-chips-scroll {
    flex-wrap: nowrap; overflow-x: auto; gap: 7px; margin-left: calc(-1 * var(--ui-gutter)); margin-right: calc(-1 * var(--ui-gutter));
    padding: 2px var(--ui-gutter) 4px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--ui-gutter);
  }
  .ui-chips-scroll::-webkit-scrollbar { display: none; }
  .ui-chips-scroll > * { flex: none; scroll-snap-align: start; }
  /* Choice cards become rows: glyph, text, check. */
  .ui-choices, .ui-choices-3, .ui-choices-2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ui-choice { min-height: 0; padding: 16px; flex-direction: row; align-items: center; gap: 14px; }
  .ui-choice-glyph { width: 40px; height: 40px; margin: 0; flex: none; }
  .ui-choice-title { margin-top: 0; font-size: 18px; }
  .ui-choice-text { padding-right: 30px; }
  .ui-choice-check { top: 50%; margin-top: -12px; }
  /* The timeline turns vertical. */
  .ui-timeline { grid-auto-flow: row; margin-top: 26px; }
  .ui-timeline li { padding: 0 0 22px 36px; min-height: 48px; }
  .ui-timeline li::before { top: 26px; bottom: 2px; left: 9px; right: auto; width: 3px; height: auto; }
  .ui-timeline li[data-state="current"]::before {
    background: linear-gradient(180deg, transparent, var(--ui-node) 50%, transparent) 0 0 / 100% 40% no-repeat, var(--ui-line-strong);
    animation-name: ui-travel-down;
  }
  .ui-steps ol { gap: 0; justify-content: space-between; }
  .ui-steps-item { padding: 6px 8px; font-size: 13px; gap: 6px; }
  .ui-steps-compact .ui-steps-item { padding: 10px 9px; }
  .ui-steps-compact .ui-steps-item:not([data-state="current"]) .ui-steps-name {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .ui-row-value-mono { max-width: 72%; font-size: 12px; }
  .ui-secret { padding: 18px; font-size: 19px; }
  .ui-map { border-radius: 18px; }
  .ui-map-search { left: 10px; top: 10px; width: calc(100% - 20px); }
  .ui-map-ctl { right: 10px; bottom: 10px; }
  .ui-map-label { font-size: 11.5px; padding: 2px 7px; }
  .ui-map-label-above { transform: translate(-50%, calc(-100% - 12px)); }
  .ui-map-label-below { transform: translate(-22%, 11px); }
  .ui-map-label-left { transform: translate(calc(-100% - 12px), -50%); }
  .ui-quiet-body { padding-left: 0; }
  .ui-band-head { margin-bottom: var(--ui-space-7); }
  /* The sheet rises from the bottom with a grabber. */
  .ui-sheet {
    inset: auto 0 0 0; width: 100vw; height: auto; max-height: 90dvh;
    border-left: 0; border-top: 1px solid var(--ui-line); border-radius: var(--ui-radius-xl) var(--ui-radius-xl) 0 0;
  }
  .ui-sheet[open] { animation-name: ui-sheet-up; }
  .ui-sheet-head { position: relative; padding-top: 24px; }
  .ui-sheet-head::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px;
    border-radius: 5px; background: var(--ui-line-strong);
  }
  .ui-sheet-body { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}
@keyframes ui-travel-down { from { background-position: 0 -60%, 0 0; } to { background-position: 0 160%, 0 0; } }

/* ======================================================================
   23. REDUCED MOTION: durations are already near zero via the tokens;
   loops and arrivals stop here.
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ui-enter, .ui-sheet[open], .ui-top-menu[open] ~ .ui-nav { animation: none; }
  .ui-pulse::after, .ui-skeleton::after { animation: none !important; }
  .ui-btn[aria-busy="true"]::before { animation-duration: 2.4s; }
  .ui-timeline li[data-state="current"]::before {
    animation: none !important;
    background: color-mix(in srgb, var(--ui-node) 55%, var(--ui-line-strong)) !important;
  }
  .ui-btn:hover, .ui-btn:active, .ui-chipbtn:hover, .ui-choice:hover, a.ui-card:hover, .ui-linkcard:hover { transform: none; }
  .ui-linkcard, .ui-linkcard-title::after { transition: none; }
}