/* ============================================================================
   AIWA · /roadmap
   Built on the credits page's port of the NEW lander's design system (aiwa-site):
   the motion tokens, palette ramps, fluid root, type scale, .eyebrow, .grad,
   .btn/.btn--primary/.btn--ghost, .nav*, .accordion* and .footer* are lifted
   from overlay/credits/tokens.css + app.css, so re-lift if the lander changes.
   Copied rather than linked because /credits is a temporary campaign.

   What is new here is a SEMANTIC layer (--bg, --fg, --card, --line, ...) on top
   of those ramps, because this page has two themes and the credits page has one:
   dark (the site's chrome, and the default) and light (the Framer lander's warm
   light tokens). The ramps themselves never change with the theme, and the
   footer re-declares the dark semantic set so its plate stays dark in both.

   Column colours carry two values each: --c for fills, bars and tints, and
   --c-ink for text and icons, darkened in light mode to clear WCAG AA. Status
   is always also carried by a label and an icon shape, never colour alone.
   ========================================================================= */

/* ---- fonts (local copies of the credits files) --------------------------- */
@font-face { font-family: 'Bricolage Grotesque'; src: url('/roadmap/fonts/bricolage-grotesque.woff2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/roadmap/fonts/inter.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/roadmap/fonts/jetbrains-mono.woff2') format('woff2-variations'); font-weight: 100 800; font-style: normal; font-display: swap; }

/* ---- tokens: motion, ramps, type, layout (tokens.css) --------------------- */
:root {
  --ease-brand: cubic-bezier(0.625, 0.05, 0, 1);
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 350ms;
  --dur-base: 400ms;
  --dur-reveal: 800ms;
  --dur-fast: 150ms;
  --y-reveal: 2em;
  --blur-reveal: 20px;
  --radius-card: 2.5rem;

  --ink-900: #1a1714;
  --ink-950: #050403;
  --ink-850: #0b0907;
  --ink-800: #121211;
  --ink-700: #1c1811;
  --ink-600: #2a251e;
  --ink-500: #444443;
  --cream-050: #fbf9f6;
  --cream-100: #efeae1;
  --cream-300: #ada598;
  --cream-500: #8a8175;
  --accent: #fea002;
  --accent-hot: #f2813e;
  --accent-deep: #bf4e0b;
  --stop-1: #fea002;
  --stop-2: #f2813e;
  --stop-3: #ffd28a;

  /* app parity: the product's button, verbatim from apps/web globals.css */
  --app-sunset-1: #ffb300;
  --app-sunset-2: #ff5e00;
  --app-primary-fg: #1f1f1e;
  --app-foreground: #f8f8f6;
  --app-dur-colors: 150ms;
  --btn-secondary-top: #3c3a37;
  --btn-secondary-mid: #2c2a28;
  --btn-secondary-bottom: #1f1d1b;
  --btn-secondary-rim: rgb(255 255 255 / 0.16);

  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* 16px floor so a 390px phone gets exactly the 16px gutter the page is drawn to. */
  --gutter: clamp(16px, 4vw, 4.5rem);
  --measure: 78rem;
  --nav-h: 4.25rem;
  /* The sticky toolbar row on desktop: 0.75rem padding-block around its tallest control, the view
     switch (a 2.35rem button in a 3px-padded pill). Keep in step with .toolbar__inner and .seg. */
  --bar-row: calc(3.85rem + 6px);
}

/* ---- semantic tokens: DARK (default, and always inside the footer) ------- */
:root, .footer {
  --bg: #1a1714;
  --bg-elev: #1f1b17;
  --panel: rgb(8 7 5 / 0.3);
  --panel-border: rgb(251 249 246 / 0.06);
  --card: #221e1a;
  --card-hover: #26221d;
  --card-border: rgb(251 249 246 / 0.08);
  --card-border-hover: rgb(251 249 246 / 0.17);
  --card-shadow: inset 0 1px 0 rgb(251 249 246 / 0.035), 0 1px 2px rgb(0 0 0 / 0.35), 0 10px 24px -18px rgb(0 0 0 / 0.7);
  --card-shadow-hover: inset 0 1px 0 rgb(251 249 246 / 0.05), 0 2px 4px rgb(0 0 0 / 0.35), 0 18px 34px -20px rgb(0 0 0 / 0.85);
  --line: #2a251e;
  --line-soft: rgb(251 249 246 / 0.07);
  --fg: #fbf9f6;
  --fg-2: #ada598;
  /* cream-500 (#8a8175) is 4.32:1 on a raised card; this step clears 4.5:1 on the card and the ground. */
  --fg-muted: #968d80;
  --accent-text: #fea002;
  --ring: #fea002;
  --chip-bg: rgb(251 249 246 / 0.04);
  --chip-border: rgb(251 249 246 / 0.09);
  --pressed-bg: #fbf9f6;
  --pressed-fg: #1a1714;
  --field-bg: rgb(5 4 3 / 0.35);
  --field-border: #342e26;
  --field-border-hover: #4a4136;
  --nav-glass: color-mix(in srgb, var(--ink-950) 94%, transparent);
  --nav-ring: rgb(251 249 246 / 0.1);
  --bar-glass: color-mix(in srgb, #141210 94%, transparent);
  --sheet-bg: rgb(11 9 7 / 0.96);
  --danger: #ff8d7d;
  --danger-bg: rgb(255 75 62 / 0.08);
  --danger-border: rgb(255 120 100 / 0.4);
  --c-cs: #7ea6ff;
  --c-cs-text: #7ea6ff;
  --c-ip: #fea002;
  --c-ip-text: #fea002;
  --c-live: #4ade80;
  --c-live-text: #4ade80;
  --status-check: #0b0907;
  --btn2-top: var(--btn-secondary-top);
  --btn2-mid: var(--btn-secondary-mid);
  --btn2-bottom: var(--btn-secondary-bottom);
  --btn2-fg: var(--cream-050);
  --btn2-shadow: inset 0 1px 0 var(--btn-secondary-rim), 0 1px 2px rgb(0 0 0 / 0.45), 0 6px 14px -6px rgb(0 0 0 / 0.55);
  --skel: rgb(251 249 246 / 0.055);
  --skel-shine: rgb(251 249 246 / 0.11);
  --toast-bg: #fbf9f6;
  --toast-fg: #1a1714;
  --shadow-pop: 0 30px 70px -20px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(251 249 246 / 0.07);
  --grid-dot: rgb(251 249 246 / 0.075);
  --glow-a: rgb(254 160 2 / 0.16);
  --glow-b: rgb(242 129 62 / 0.1);
}

/* ---- semantic tokens: LIGHT (the Framer lander's warm light set) ---------
   Two selectors for one palette: the explicit choice, and the OS preference for
   a visitor whose head script never ran. #6b6358 and #a84408 are the AA steps
   of the lander's muted and accent tokens (the same ones 404.html and the legal
   pages use); the three status inks are darkened further, because they sit at 11.5 to 12.5px on
   their own 15% tint over the column head's gradient, and there they clear 4.5:1 (4.8 to 5.0 at
   the gradient's strongest). */
:root[data-theme='light'] {
  --bg: #f7f4ee;
  --bg-elev: #fbf9f6;
  --panel: rgb(28 20 15 / 0.035);
  --panel-border: rgb(28 20 15 / 0.08);
  --card: #fcfcfc;
  --card-hover: #ffffff;
  --card-border: rgb(28 20 15 / 0.1);
  --card-border-hover: rgb(28 20 15 / 0.2);
  --card-shadow: 0 1px 2px rgb(28 20 15 / 0.06), 0 8px 18px -14px rgb(28 20 15 / 0.2);
  --card-shadow-hover: 0 2px 4px rgb(28 20 15 / 0.07), 0 16px 32px -18px rgb(28 20 15 / 0.32);
  --line: rgb(28 20 15 / 0.12);
  --line-soft: rgb(28 20 15 / 0.07);
  --fg: #060504;
  --fg-2: #3a342b;
  --fg-muted: #6b6358;
  --accent-text: #a84408;
  --ring: #bf4e0b;
  --chip-bg: rgb(28 20 15 / 0.035);
  --chip-border: rgb(28 20 15 / 0.12);
  --pressed-bg: #1a1714;
  --pressed-fg: #fbf9f6;
  --field-bg: #ffffff;
  --field-border: rgb(28 20 15 / 0.16);
  --field-border-hover: rgb(28 20 15 / 0.3);
  --nav-glass: color-mix(in srgb, #fbf9f6 88%, transparent);
  --nav-ring: rgb(28 20 15 / 0.1);
  --bar-glass: color-mix(in srgb, #f7f4ee 94%, transparent);
  --sheet-bg: rgb(251 249 246 / 0.98);
  --danger: #b3261e;
  --danger-bg: rgb(179 38 30 / 0.06);
  --danger-border: rgb(179 38 30 / 0.35);
  --c-cs: #5b8def;
  --c-cs-text: #2851b0;
  --c-ip: #fea002;
  --c-ip-text: #9a3e06;
  --c-live: #3fa36b;
  --c-live-text: #18623a;
  --status-check: #ffffff;
  --btn2-top: #ffffff;
  --btn2-mid: #fbf9f6;
  --btn2-bottom: #f2eee7;
  --btn2-fg: #060504;
  --btn2-shadow: inset 0 0 0 1px rgb(28 20 15 / 0.12), inset 0 1px 0 #fff, 0 1px 2px rgb(28 20 15 / 0.08), 0 6px 14px -8px rgb(28 20 15 / 0.25);
  --skel: rgb(28 20 15 / 0.06);
  --skel-shine: rgb(28 20 15 / 0.11);
  --toast-bg: #1a1714;
  --toast-fg: #fbf9f6;
  --shadow-pop: 0 30px 70px -24px rgb(28 20 15 / 0.4), 0 0 0 1px rgb(28 20 15 / 0.08);
  --grid-dot: rgb(28 20 15 / 0.075);
  --glow-a: rgb(254 160 2 / 0.2);
  --glow-b: rgb(240 101 13 / 0.08);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f7f4ee; --bg-elev: #fbf9f6; --panel: rgb(28 20 15 / 0.035); --panel-border: rgb(28 20 15 / 0.08);
    --card: #fcfcfc; --card-hover: #ffffff; --card-border: rgb(28 20 15 / 0.1); --card-border-hover: rgb(28 20 15 / 0.2);
    --card-shadow: 0 1px 2px rgb(28 20 15 / 0.06), 0 8px 18px -14px rgb(28 20 15 / 0.2);
    --line: rgb(28 20 15 / 0.12); --line-soft: rgb(28 20 15 / 0.07);
    --fg: #060504; --fg-2: #3a342b; --fg-muted: #6b6358; --accent-text: #a84408; --ring: #bf4e0b;
    --chip-bg: rgb(28 20 15 / 0.035); --chip-border: rgb(28 20 15 / 0.12);
    --field-bg: #ffffff; --field-border: rgb(28 20 15 / 0.16); --field-border-hover: rgb(28 20 15 / 0.3);
    --nav-glass: color-mix(in srgb, #fbf9f6 88%, transparent); --nav-ring: rgb(28 20 15 / 0.1); --sheet-bg: rgb(251 249 246 / 0.98);
    --danger: #b3261e; --c-cs: #5b8def; --c-cs-text: #2851b0; --c-ip-text: #9a3e06; --c-live: #3fa36b; --c-live-text: #18623a;
    --btn2-top: #ffffff; --btn2-mid: #fbf9f6; --btn2-bottom: #f2eee7; --btn2-fg: #060504;
    --btn2-shadow: inset 0 0 0 1px rgb(28 20 15 / 0.12), inset 0 1px 0 #fff, 0 1px 2px rgb(28 20 15 / 0.08), 0 6px 14px -8px rgb(28 20 15 / 0.25);
    --grid-dot: rgb(28 20 15 / 0.075); --glow-a: rgb(254 160 2 / 0.2); --glow-b: rgb(240 101 13 / 0.08);
  }
}

/* One status, one pair of colours. Columns, tabs, cards and pills all read these. */
[data-status='coming_soon'], [data-col='coming_soon'], [data-tab='coming_soon'] { --c: var(--c-cs); --c-ink: var(--c-cs-text); }
[data-status='in_progress'], [data-col='in_progress'], [data-tab='in_progress'] { --c: var(--c-ip); --c-ink: var(--c-ip-text); }
[data-status='live'], [data-col='live'], [data-tab='live'] { --c: var(--c-live); --c-ink: var(--c-live-text); }

/* ---- fluid root (tokens.css §1.6, verbatim) ------------------------------- */
html { font-size: clamp(13px, 1.1111vw, 16px); }
@media (max-width: 990px) { html { font-size: 2.0833vw; } }
@media (max-width: 767px) { html { font-size: clamp(15px, 4.2667vw, 16.5px); } }

/* ---- reset + globals ------------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* scroll-padding: every anchor jump, scrollIntoView and keyboard focus scroll clears the fixed nav.
   What the sticky toolbar can cover adds its row as scroll-margin (see 01 · Toolbar). */
html { scrollbar-gutter: stable; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); transition: background-color 300ms var(--ease-out); }
/* Scroll-locked while a dialog is open. The reserved scrollbar gutter then shows the canvas, so the
   canvas takes the backdrop's tint; without it a classic-scrollbar platform shows an undimmed strip. */
html:has(dialog[open]) { overflow: hidden; background: #0d0b0a; }
:root[data-theme='light']:has(dialog[open]) { background: #b3afa9; }
* { -webkit-tap-highlight-color: transparent; }
*:focus { outline: 0; }
*:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
ul, ol { list-style: none; }
strong, b { font-weight: 600; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -5rem; z-index: 300; padding: 0.65rem 1rem; border-radius: 0.75rem; background: var(--fg); color: var(--bg); font-size: 0.88rem; font-weight: 600; transition: top var(--dur-fast) var(--ease-out); }
.skip:focus-visible { top: 1rem; }

/* ---- layout + type (base.css) --------------------------------------------- */
.shell { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.shell--wide { max-width: 96rem; }
.section { position: relative; padding-block: clamp(4.5rem, 10vh, 8rem); }
.section__lead { max-width: 40rem; }
.eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted); }
.eyebrow--accent { color: var(--accent-text); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 0.94; letter-spacing: -0.03em; }
.t-h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.t-body { font-size: clamp(1rem, 1.1vw, 1.125rem); color: var(--fg-2); line-height: 1.6; }
.t-small { font-size: 0.875rem; color: var(--cream-500); }
.grad { background: linear-gradient(92deg, var(--stop-3) 0%, var(--stop-1) 42%, var(--stop-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
/* On the cream ground the pale first stop washes out, so the light theme starts the sweep on amber. */
:root[data-theme='light'] .grad { background-image: linear-gradient(92deg, #f59e0b 0%, #ea7a0c 45%, #c2410c 100%); }
.accent { color: var(--accent-text); }
.head { display: grid; gap: 0.9rem; justify-items: start; margin-bottom: 2.5rem; }
.head .t-h2 { max-width: 22ch; text-wrap: balance; }

/* ---- buttons (base.css: the product's button, ported) --------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem; white-space: nowrap;
  padding: 0.85rem 1.5rem; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500;
  border: 1px solid transparent;
  color: var(--app-foreground);
  transition: color var(--app-dur-colors) var(--ease-out), background-color var(--app-dur-colors) var(--ease-out), border-color var(--app-dur-colors) var(--ease-out), filter var(--app-dur-colors) var(--ease-out);
}
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled='true'] { pointer-events: none; opacity: 0.5; }
.btn--primary {
  background: linear-gradient(180deg, var(--app-sunset-1), var(--app-sunset-2));
  color: var(--app-primary-fg); font-weight: 600;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), inset 0 -10px 18px -10px rgb(255 190 80 / 0.55), 0 1px 2px rgb(0 0 0 / 0.4);
}
.btn--primary:hover { filter: brightness(1.05); }
.btn--primary:active { filter: brightness(0.97); }
.btn--ghost {
  color: var(--btn2-fg); font-weight: 500;
  background: linear-gradient(180deg, var(--btn2-top) 0%, var(--btn2-mid) 48%, var(--btn2-bottom) 100%);
  box-shadow: var(--btn2-shadow);
}
.btn--ghost:hover { filter: brightness(1.08); }
:root[data-theme='light'] .btn--ghost:hover { filter: brightness(0.98); }
.btn--ghost:active { filter: brightness(0.96); }
.btn__label { position: relative; white-space: nowrap; }
.btn__icon { width: 1rem; height: 1rem; flex: none; }
.btn__arrow { position: relative; width: 0.9rem; height: 0.9rem; overflow: hidden; }
.btn__arrow > span { display: flex; width: 200%; height: 100%; transition: transform var(--app-dur-colors) var(--ease-out); }
.btn__arrow svg { width: 50%; height: 100%; flex: 0 0 50%; }
/* The arrow is hidden at rest and slides in on hover, as the lander's CTAs do. */
.btn:not(.btn--ghost):has(.btn__arrow) { gap: 0; transition: color var(--app-dur-colors) var(--ease-out), background-color var(--app-dur-colors) var(--ease-out), filter var(--app-dur-colors) var(--ease-out), gap var(--app-dur-colors) var(--ease-out); }
.btn:not(.btn--ghost):has(.btn__arrow) .btn__arrow { width: 0; opacity: 0; transition: width var(--app-dur-colors) var(--ease-out), opacity var(--app-dur-colors) var(--ease-out); }
.btn:not(.btn--ghost):has(.btn__arrow):hover, .btn:not(.btn--ghost):has(.btn__arrow):focus-visible { gap: 0.6rem; }
.btn:not(.btn--ghost):has(.btn__arrow):hover .btn__arrow, .btn:not(.btn--ghost):has(.btn__arrow):focus-visible .btn__arrow { width: 0.9rem; opacity: 1; }
.btn:not(.btn--ghost):hover .btn__arrow > span, .btn:not(.btn--ghost):focus-visible .btn__arrow > span { transform: translate(-50%, 0); }
.btn--lg { padding: 1rem 1.7rem; font-size: 0.95rem; }
.btn--sm { padding: 0.55rem 0.95rem; font-size: 0.82rem; }
.btn.is-busy { pointer-events: none; opacity: 0.85; }
.spinner { display: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }
.is-busy .spinner { display: inline-block; }

/* Small controls: an icon-only round button, a quiet pill, and an inline text button. */
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; color: var(--fg-2); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; }
.icon-btn:hover { background: var(--chip-bg); color: var(--fg); }
.icon-btn[disabled] { opacity: 0.35; pointer-events: none; }
.quiet-btn { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.4rem; padding: 0 0.9rem; border-radius: 999px; border: 1px solid var(--line-soft); font-size: 0.82rem; font-weight: 500; color: var(--fg-2); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.quiet-btn svg { width: 0.95rem; height: 0.95rem; }
.quiet-btn:hover { background: var(--chip-bg); color: var(--fg); border-color: var(--line); }
.quiet-btn.is-done { color: var(--c-live-text); border-color: color-mix(in srgb, var(--c-live) 40%, transparent); }
.link-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0; font-size: 0.82rem; font-weight: 500; color: var(--accent-text); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-fast) var(--ease-out); }
.link-btn:hover { text-decoration-color: currentColor; }
.link-btn svg { width: 0.9rem; height: 0.9rem; }

/* ============================================================================
   NAV (site.css): transparent at rest, contracts to a glass pill when stuck.
   Ported rule for rule; colours read the semantic layer so the light theme
   gets a light pill, and the hidden CTA is also `visibility: hidden` so Tab
   never lands on a button nobody can see.
   ========================================================================= */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1rem var(--gutter) 0; pointer-events: none; }
.nav__inner {
  pointer-events: auto;
  max-width: 75rem; margin-inline: auto; min-height: 3.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: relative; padding: 0.5rem; border-radius: 999px;
  background-color: transparent; box-shadow: none;
  transition: max-width var(--dur-base) var(--ease-brand), padding var(--dur-base) var(--ease-brand), background-color var(--dur-base) var(--ease-brand), box-shadow var(--dur-base) var(--ease-brand);
}
.nav.is-stuck .nav__inner {
  max-width: 52rem; padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  background-color: var(--nav-glass);
  backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: inset 0 0 0 1px var(--nav-ring), 0 10px 30px -18px rgb(0 0 0 / 0.5);
}
.nav__logo { display: flex; align-items: center; flex-shrink: 0; padding-left: 0.5rem; }
.nav__logo img { height: 1.75rem; width: auto; }
.nav__links { display: flex; gap: 1.7rem; font-size: 0.85rem; color: var(--fg-2); transition: gap var(--dur-base) var(--ease-brand); }
.nav.is-stuck .nav__links { gap: 1.1rem; }
.nav__links a { position: relative; transition: color var(--dur-micro) var(--ease-brand); }
.nav__links a:hover, .nav__links a:focus-visible { color: var(--fg); }
.nav__links a[aria-current='page'] { color: var(--fg); }
.nav__links a[aria-current='page']::after { content: ''; position: absolute; left: 50%; bottom: -0.55rem; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.nav__sheet-only { display: none; }
.nav__end { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
.nav__cta-wrap { position: relative; display: grid; justify-items: stretch; align-items: stretch; flex: 0 0 auto; }
.nav__cta-wrap > .nav__cta { grid-area: 1 / 1; justify-self: stretch; transition: opacity var(--dur-base) var(--ease-brand), transform var(--dur-base) var(--ease-brand), filter var(--dur-base) var(--ease-brand), visibility 0s linear 0s; }
.nav__cta { height: 2.25rem; min-height: 0; padding: 0 1rem; }
/* Rest: Login (ghost). Stuck: Request a feature (primary). Crossfade + soft scale, as the lander. */
/* Hidden means `visibility: hidden` too, delayed until the fade ends, so Tab never lands on it. */
.nav__cta-wrap > .nav__cta--build, .nav.is-stuck .nav__cta-wrap > .nav__cta--login { opacity: 0; visibility: hidden; transform: scale(0.92); filter: blur(2px); transition-delay: 0s, 0s, 0s, var(--dur-base); }
.nav.is-stuck .nav__cta-wrap > .nav__cta--build { opacity: 1; visibility: visible; transform: scale(1); filter: blur(0); transition-delay: 0s; }
.nav__burger { display: none; position: relative; width: 2.4rem; height: 2.4rem; color: var(--fg); }
.nav__burger i { position: absolute; left: 0.6rem; right: 0.6rem; height: 1.5px; background: currentColor; transition: transform var(--dur-base) var(--ease-brand); }
.nav__burger i:first-child { top: 0.95rem; }
.nav__burger i:last-child { bottom: 0.95rem; }
.nav__burger[aria-expanded='true'] i:first-child { transform: translateY(0.25rem) rotate(45deg); }
.nav__burger[aria-expanded='true'] i:last-child { transform: translateY(-0.25rem) rotate(-45deg); }

/* The theme toggle: a two-segment pill, sun and moon, like the one on Base44's board. */
.theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--line-soft); }
.theme__btn { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 999px; color: var(--fg-muted); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.theme__btn svg { width: 0.95rem; height: 0.95rem; }
.theme__btn:hover { color: var(--fg); }
.theme__btn[aria-pressed='true'] { background: var(--card); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), inset 0 0 0 1px var(--card-border); }

@media (max-width: 900px) {
  .nav__burger { display: block; order: -1; }
  .nav__links {
    display: grid; gap: 0.2rem; position: absolute; top: calc(100% + 0.6rem); left: 0; right: 0;
    padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 1.4rem;
    background: var(--sheet-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-pop);
    opacity: 0; visibility: hidden; transform: translateY(-0.5rem);
    transition: opacity var(--dur-base) var(--ease-brand), transform var(--dur-base) var(--ease-brand), visibility 0s linear var(--dur-base);
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__links a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.4rem; font-size: 1rem; border-radius: 0.7rem; }
  .nav__links a[aria-current='page'] { background: var(--chip-bg); }
  .nav__links a[aria-current='page']::after { position: static; margin: 0 0 0 0.6rem; }
  .nav__sheet-only { display: flex; }
  .nav__inner, .nav.is-stuck .nav__inner { max-width: none; min-height: 2.75rem; padding: 0.3rem; background-color: var(--nav-glass); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); box-shadow: inset 0 0 0 1px var(--nav-ring); }
  .nav { padding-top: 0.6rem; }
  .nav__logo { padding-left: 0; margin-right: auto; }
  .nav__logo img { height: 1.5rem; }
  /* One CTA on phones: the request button, always. Login moves into the sheet. */
  .nav__cta--login { display: none; }
  .nav__cta-wrap > .nav__cta--build, .nav.is-stuck .nav__cta-wrap > .nav__cta--build { opacity: 1; visibility: visible; transform: none; filter: none; }
}

/* ============================================================================
   Reveal (§4.1 blur-reveal). The hidden state lives in CSS so nothing flashes;
   roadmap.js adds .is-revealed from an IntersectionObserver.
   ========================================================================= */
[data-blur-in] { opacity: 0; filter: blur(var(--blur-reveal)); transform: translateY(var(--y-reveal)); transition: opacity var(--dur-reveal) var(--ease-out), filter var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
[data-blur-in].is-revealed, .no-js [data-blur-in] { opacity: 1; filter: none; transform: none; }
[data-blur-in][data-delay='1'] { transition-delay: 90ms; }
[data-blur-in][data-delay='2'] { transition-delay: 180ms; }
[data-blur-in][data-delay='3'] { transition-delay: 270ms; }
[data-blur-in][data-delay='4'] { transition-delay: 360ms; }

/* ============================================================================
   00 · Hero
   ========================================================================= */
.hero { position: relative; padding-block: calc(var(--nav-h) + clamp(2.75rem, 5.5vw, 4.5rem)) clamp(2rem, 3.5vw, 2.75rem); overflow: clip; text-align: center; }
.hero__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(52% 60% at 50% 0%, var(--glow-a), transparent 72%), radial-gradient(30% 42% at 82% 8%, var(--glow-b), transparent 70%), radial-gradient(28% 38% at 14% 18%, var(--glow-b), transparent 70%); }
.hero__glow::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(62% 70% at 50% 22%, #000 10%, transparent 72%); mask-image: radial-gradient(62% 70% at 50% 22%, #000 10%, transparent 72%); }
.hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.hero__h1 { font-size: clamp(3rem, 5.8vw, 5.5rem); color: var(--fg); max-width: 13ch; text-wrap: balance; letter-spacing: -0.035em; }
.hero__lead { max-width: 37rem; text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.5rem; }
.hero__meta { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; margin-top: 0.9rem; }
.pulse { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.1rem; padding: 0.35rem 0.95rem 0.35rem 0.8rem; border-radius: 999px; background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--line-soft); font-size: 0.82rem; color: var(--fg-2); }
.pulse__text { display: inline-flex; align-items: center; gap: 0.5rem; }
.pulse__text b { color: var(--fg); font-weight: 600; }
.pulse__sep { color: var(--fg-muted); }
.pulse__dot { position: relative; width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: var(--c-live); }
.pulse__dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--c-live); animation: ping 2.4s var(--ease-out) infinite; }
.pulse.is-error .pulse__dot { background: var(--fg-muted); }
.pulse.is-error .pulse__dot::after { display: none; }
.hero__fine { font-size: 0.78rem; color: var(--fg-muted); }
.skel { display: inline-block; border-radius: 0.4rem; background: linear-gradient(90deg, var(--skel) 0%, var(--skel-shine) 45%, var(--skel) 90%) 0 0 / 220% 100%; animation: shimmer 1.5s linear infinite; }
.skel--line { width: 17rem; max-width: 60vw; height: 0.7rem; }

/* ============================================================================
   01 · Modes: "What's next" and "What's new", one big pill under the hero. The
   pressed half is a card that slides across (the ::before), so the switch reads
   as one object with two positions rather than two buttons.
   ========================================================================= */
.modes { position: relative; z-index: 1; padding-bottom: clamp(0.75rem, 1.6vw, 1.25rem); }
.modes__inner { display: flex; justify-content: center; }
.mode-switch { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: min(100%, 31rem); padding: 4px; border-radius: 999px; background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--line-soft); }
.mode-switch::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 12px) / 2); border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-border), inset 0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent), 0 1px 2px rgb(0 0 0 / 0.22), 0 10px 24px -14px rgb(0 0 0 / 0.55); transition: transform var(--dur-base) var(--ease-brand); }
:root[data-theme='light'] .mode-switch::before { box-shadow: inset 0 0 0 1px var(--card-border), 0 1px 2px rgb(28 20 15 / 0.08), 0 10px 22px -14px rgb(28 20 15 / 0.35); }
.mode-switch[data-active='new']::before { transform: translateX(calc(100% + 4px)); }
.mode-switch__btn { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 3.6rem; padding: 0.45rem 1.1rem 0.45rem 0.6rem; border-radius: 999px; color: var(--fg-2); text-align: left; transition: color var(--dur-fast) var(--ease-out); }
.mode-switch__btn:hover, .mode-switch__btn[aria-pressed='true'] { color: var(--fg); }
.mode-switch__btn:focus-visible { outline-offset: 0; }
.mode-switch__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; color: var(--fg-muted); background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--line-soft); transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.mode-switch__icon svg { width: 1.1rem; height: 1.1rem; }
.mode-switch__btn[aria-pressed='true'] .mode-switch__icon { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent); }
.mode-switch__text { display: grid; gap: 0.2rem; min-width: 0; }
.mode-switch__label { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.mode-switch__meta { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.2; letter-spacing: 0.04em; color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mode-switch__meta:empty { display: none; }
/* Something shipped this month: the hero's live dot, small. */
.mode-switch__meta.is-fresh::before { content: ''; width: 0.4rem; height: 0.4rem; flex: none; border-radius: 50%; background: var(--c-live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-live) 18%, transparent); }

/* ============================================================================
   01 · Toolbar: search, type chips, the layout / range switch (sticky on desktop), then area chips
   ========================================================================= */
.zone { position: relative; }
.toolbar { position: relative; z-index: 40; }
.toolbar__inner { display: flex; align-items: center; gap: 0.75rem 1rem; padding-block: 0.75rem; }
.filters { position: relative; z-index: 1; }
.filters .rail { padding-bottom: 0.25rem; }

/* Segmented control (view switch + the phone column tabs share the look). */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--line-soft); flex: none; }
.seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.35rem; padding: 0 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: var(--fg-2); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.seg__btn:hover { color: var(--fg); }
.seg__btn[aria-pressed='true'] { background: var(--card); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.22), inset 0 0 0 1px var(--card-border); }
.seg__count { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.seg__count:empty { display: none; }
.seg__btn[aria-pressed='true'] .seg__count { color: var(--c-live-text); }
.seg__btn--icon { width: 2.6rem; padding: 0; }
.seg__btn--icon svg { width: 1.05rem; height: 1.05rem; }
.seg__btn[aria-pressed='true'] svg { color: var(--accent-text); }
.layout-switch, .range-switch, .keys-btn { flex: none; }
.keys-btn { width: 2.35rem; height: 2.35rem; color: var(--fg-muted); box-shadow: inset 0 0 0 1px var(--line-soft); }
/* A touch screen has no keyboard to take shortcuts from. */
@media (hover: none) { .keys-btn { display: none; } }

.search { position: relative; flex: 1 1 15rem; max-width: 24rem; }
.search__icon { position: absolute; left: 0.95rem; top: 50%; width: 1rem; height: 1rem; translate: 0 -50%; color: var(--fg-muted); pointer-events: none; }
.search__input { width: 100%; height: 2.6rem; padding: 0 2.6rem 0 2.6rem; border-radius: 999px; border: 1px solid var(--field-border); background: var(--field-bg); font-size: 0.88rem; color: var(--fg); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.search__input::placeholder { color: var(--fg-muted); }
.search__input:hover { border-color: var(--field-border-hover); }
.search__input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 70%, var(--field-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search__kbd { position: absolute; right: 0.7rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem; border-radius: 0.4rem; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-muted); pointer-events: none; }
.search__input:focus ~ .search__kbd, .search.has-value .search__kbd { display: none; }
@media (hover: none), (max-width: 767px) { .search__kbd { display: none; } }
.search__clear { position: absolute; right: 0.35rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; color: var(--fg-muted); }
.search__clear:hover { color: var(--fg); background: var(--chip-bg); }
.search__clear svg { width: 0.9rem; height: 0.9rem; }

.rail { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.rail--type { margin-left: auto; }
.rail__label { flex: none; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); }
.rail__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0; }
.fchip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.05rem; padding: 0 0.8rem; border-radius: 999px; border: 1px solid var(--chip-border); font-size: 0.8rem; font-weight: 500; color: var(--fg-2); white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.fchip:hover { background: var(--chip-bg); color: var(--fg); border-color: var(--line); }
.fchip[aria-pressed='true'] { background: var(--pressed-bg); border-color: var(--pressed-bg); color: var(--pressed-fg); }
.fchip__n { font-family: var(--font-mono); font-size: 0.66rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.fchip[aria-pressed='true'] .fchip__n { color: inherit; opacity: 0.75; }
.fchip svg { width: 0.8rem; height: 0.8rem; }

.board__status { display: flex; align-items: center; gap: 0.9rem; min-height: 2.5rem; padding-block: 0.35rem 0.6rem; }
.board__count { font-size: 0.82rem; color: var(--fg-muted); }
.board__count b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
/* The list's sort, at the end of the status line. */
.sort { display: flex; align-items: center; gap: 0.55rem; margin-left: auto; }
.sort__label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.sort__input { height: 2.3rem; padding: 0 2.3rem 0 0.95rem; border-radius: 999px; border: 1px solid var(--field-border); background: var(--field-bg); font-size: 0.82rem; font-weight: 500; color: var(--fg); transition: border-color var(--dur-fast) var(--ease-out); }
.sort__input:hover { border-color: var(--field-border-hover); }
.sort__select .select__icon { right: 0.8rem; width: 0.9rem; height: 0.9rem; }

@media (min-width: 991px) {
  /* Sticky under the nav: the bar's own box starts --nav-h ABOVE its controls (negative margin +
     equal padding, so nothing moves in flow) and sticks at top: 0. Stuck, its glass then runs up
     behind the nav pill as one surface instead of leaving a strip of page showing between the two. */
  .toolbar { position: sticky; top: 0; margin-top: calc(-1 * var(--nav-h)); padding-top: var(--nav-h); pointer-events: none; transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .toolbar__inner { pointer-events: auto; transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear 0s; }
  .toolbar.is-stuck { background-color: var(--bar-glass); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 var(--line-soft); }
  /* The end of the board is pushing the bar up (roadmap.js sets .is-leaving): its row would slide in
     behind the nav pill, so it fades and stops taking clicks and focus instead. */
  .toolbar.is-leaving .toolbar__inner { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); }
  /* Clearing the stuck bar. The page's scroll padding stays at the nav's height: the bar's own
     controls sit inside that, so focusing one of them (Tab, "/", the search's clear button) never
     scrolls the page. What the bar can cover carries its row as scroll-margin instead, so an anchor
     jump or a scrollIntoView stops below the stuck bar. A focus scroll does not: Chrome only asks
     whether the element's own box is inside the padding, so roadmap.js (initBarFocus) scrolls a Tab
     stop the stuck bar covers to this margin itself. The margin does not wait for the bar to stick:
     a board target brought up to the nav always ends under the stuck bar (the skip link from the
     hero, "Back to the board" from the form), so both land in the same place.
     #board itself lands flush under the bar (its status line has its own padding), so the area chips
     above it go fully behind the bar instead of peeking out of a gap. Controls, headings and the
     area chips get a little air. A card's title button sits under the chips row (card padding +
     chips + gap) and its focus ring is drawn round the whole card, 4px out, so it clears that much
     more. */
  .boardwrap { scroll-margin-top: var(--bar-row); }
  .filters .fchip, .boardwrap :is(a, button, h2, [tabindex]) { scroll-margin-top: calc(var(--bar-row) + 0.75rem); }
  .boardwrap .card__open { scroll-margin-top: calc(var(--bar-row) + 0.75rem + 3.05rem + 5px); }
}

/* ============================================================================
   02 · Board
   ========================================================================= */
.boardwrap { position: relative; z-index: 1; padding-bottom: clamp(3.5rem, 8vw, 6rem); outline: none; }
.board__tabs { display: none; }
.board__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }

.status-icon { width: 1rem; height: 1rem; flex: none; color: var(--c-ink); --status-check: var(--bg); }
:root[data-theme='light'] .status-icon { --status-check: #fff; }

/* A column: recessed panel, 3px status-coloured top edge, tinted header. Grows with its cards:
   no fixed height and no nested scroll box. */
.col { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0.375rem; border-radius: 1.25rem; background: var(--panel); border: 1px solid var(--panel-border); border-top: 3px solid var(--c); }
.col__head { margin: -0.375rem -0.375rem 0.375rem; padding: 0.95rem 1rem 0.9rem; border-radius: 1.1rem 1.1rem 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 11%, transparent), transparent 92%); }
.col__title-row { display: flex; align-items: center; gap: 0.55rem; }
.col__title { font-size: 1.1rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); }
.col__count { margin-left: auto; display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.45rem; padding: 0 0.45rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--c-ink); background: color-mix(in srgb, var(--c) 15%, transparent); font-variant-numeric: tabular-nums; }
.col__count:empty { background: none; }
.is-loading .col__count:empty { width: 1.7rem; background: linear-gradient(90deg, var(--skel) 0%, var(--skel-shine) 45%, var(--skel) 90%) 0 0 / 220% 100%; animation: shimmer 1.5s linear infinite; }
.col__blurb { margin-top: 0.4rem; font-size: 0.8rem; line-height: 1.45; color: var(--fg-muted); }
/* minmax(0, 1fr), not the implicit auto track: an auto track grows to the longest unbreakable word
   in any card (a pasted URL), widening the whole column past the viewport. */
.col__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.col__more { padding: 0.375rem 0 0; }
.more-btn { display: flex; align-items: center; justify-content: center; gap: 0.35rem; width: 100%; min-height: 2.6rem; border-radius: 0.8rem; font-size: 0.84rem; font-weight: 500; color: var(--fg-2); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.more-btn svg { width: 0.95rem; height: 0.95rem; transition: transform var(--dur-fast) var(--ease-out); }
.more-btn:hover { background: var(--chip-bg); color: var(--fg); }
.more-btn:hover svg { transform: translateX(2px); }

/* A card. The title is a real <button> whose ::after stretches over the whole card, so the card
   opens on a click anywhere, and the vote button sits above that layer. */
.card { display: flex; }
.card__body { flex: 1 1 auto; min-width: 0; position: relative; display: flex; flex-direction: column; padding: 0.95rem 1rem 0.8rem 1.05rem; border-radius: 0.9rem; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.card__body::before { content: ''; position: absolute; left: -1px; top: 0.95rem; bottom: 0.95rem; width: 2px; border-radius: 0 2px 2px 0; background: var(--c); opacity: 0.9; }
.card__body:hover { border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); background: var(--card-hover); transform: translateY(-1px); }
.card.is-entering .card__body { animation: card-in 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
.card__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip { display: inline-flex; align-items: center; gap: 0.3rem; height: 1.4rem; padding: 0 0.55rem; border-radius: 999px; border: 1px solid var(--chip-border); background: var(--chip-bg); font-size: 0.7rem; font-weight: 500; line-height: 1; color: var(--fg-2); white-space: nowrap; }
.chip svg { width: 0.72rem; height: 0.72rem; color: var(--fg-muted); }
.card__title { margin-top: 0.7rem; font-size: 1.02rem; font-weight: 600; line-height: 1.28; letter-spacing: -0.012em; color: var(--fg); overflow-wrap: anywhere; }
.card__open { display: block; width: 100%; text-align: left; font: inherit; letter-spacing: inherit; }
.card__open::after { content: ''; position: absolute; inset: 0; border-radius: 0.9rem; }
.card__open:focus-visible { outline: none; }
.card__open:focus-visible::after { outline: 2px solid var(--ring); outline-offset: 2px; }
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.card__summary { margin-top: 0.35rem; font-size: 0.84rem; line-height: 1.5; color: var(--fg-2); overflow-wrap: anywhere; }
.card__meta { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.8rem; min-height: 3.05rem; }
.when { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; font-size: 0.76rem; color: var(--fg-muted); white-space: nowrap; }
.when svg { width: 0.8rem; height: 0.8rem; flex: none; }
.when > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fresh { flex: none; padding: 0.26rem 0.42rem; border-radius: 0.35rem; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 15%, transparent); }

/* Upvote: pill with an arrow and a count. aria-pressed carries the state; the ::before grows the
   hit area to 44px without growing the pill. */
.vote { position: relative; z-index: 1; margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; height: 2.25rem; min-width: 3.6rem; padding: 0 0.8rem 0 0.65rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.vote::before { content: ''; position: absolute; inset: -0.3rem -0.2rem; }
.vote svg { width: 0.85rem; height: 0.85rem; color: var(--fg-muted); transition: transform 220ms var(--ease-out), color var(--dur-fast) var(--ease-out); }
.vote:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.vote:hover svg { color: var(--accent-text); transform: translateY(-1px); }
.vote[aria-pressed='true'] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 15%, var(--card)); color: var(--accent-text); }
.vote[aria-pressed='true'] svg { color: var(--accent-text); }
.vote.is-popping svg { animation: vote-pop 460ms var(--ease-brand); }
.votes-static { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.votes-static b { color: var(--fg-2); font-weight: 600; }
.votes-static svg { width: 0.75rem; height: 0.75rem; }

/* Loading cards: the real card's shape, shimmering. */
.card--skel .card__body { pointer-events: none; gap: 0; }
.card--skel .card__body::before { opacity: 0.35; }
.card--skel .skel { display: block; height: 0.62rem; }
.card--skel .skel-row { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; margin-top: 1rem; }
.card--skel .skel-row--chips { justify-content: flex-start; margin-top: 0; }
.card--skel .skel--chip { width: 4.4rem; height: 1.4rem; border-radius: 999px; }
.card--skel .skel--title { width: 78%; height: 0.9rem; margin-top: 0.85rem; }
.card--skel .skel--text { width: 100%; margin-top: 0.6rem; }
.card--skel .skel--text.is-short { width: 62%; }
.card--skel .skel--when { width: 5.5rem; }
.card--skel .skel--vote { width: 3.6rem; height: 2.25rem; border-radius: 999px; }

/* Empty column, and the board-wide states (error, nothing matches). */
.empty { display: grid; justify-items: center; gap: 0.35rem; padding: 1.75rem 1.25rem 1.6rem; border: 1px dashed var(--line); border-radius: 0.9rem; text-align: center; font-size: 0.84rem; line-height: 1.5; color: var(--fg-muted); }
.empty svg { width: 1.3rem; height: 1.3rem; margin-bottom: 0.25rem; color: var(--c-ink); opacity: 0.85; }
.empty b { color: var(--fg); font-weight: 600; font-size: 0.9rem; }
.empty a { margin-top: 0.25rem; color: var(--accent-text); font-weight: 500; }
.empty a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* One minmax(0, 1fr) track, for the same reason as .col__list: the no-results title and its "Request
   <query>" button carry whatever was typed in the search box, unbroken or not. */
.state { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0.6rem; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; margin-bottom: 1rem; border-radius: 1.25rem; border: 1px solid var(--panel-border); background: var(--panel); text-align: center; }
.state__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.4rem; border-radius: 1rem; background: var(--card); border: 1px solid var(--card-border); color: var(--fg-2); box-shadow: var(--card-shadow); }
.state__icon svg { width: 1.3rem; height: 1.3rem; }
.state--error .state__icon { color: var(--danger); }
.state__title { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.state__text { max-width: 30rem; font-size: 0.92rem; color: var(--fg-2); }
.state__text a { color: var(--accent-text); }
.state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.6rem; max-width: 100%; }
.state__actions .btn { max-width: 100%; }
.state__actions .btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---- phones and tablets: one column at a time, picked from a tab bar --------
   The break sits at 990px, not 900px, because that is where the fluid root jumps from 13px to
   ~20px: between 900 and 990 three columns would get 14rem each at a 19px root. */
@media (max-width: 990px) {
  .board__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; margin-bottom: 0.75rem; border-radius: 1.1rem; background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--line-soft); }
  .board__tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.9rem; padding: 0.35rem 0.5rem; border-radius: 0.85rem; font-size: 0.86rem; font-weight: 500; color: var(--fg-2); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
  .board__tab[aria-selected='true'] { background: var(--card); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), inset 0 0 0 1px var(--card-border); }
  .board__tab[aria-selected='true']::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: -1px; height: 2px; border-radius: 2px; background: var(--c); }
  .board__tab-label { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
  .board__tab-count { order: 2; display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.3rem; padding: 0 0.4rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; color: var(--c-ink); background: color-mix(in srgb, var(--c) 15%, transparent); font-variant-numeric: tabular-nums; }
  .board__tab-count:empty { display: none; }
  .board__cols { display: block; }
  .col { display: none; }
  .col.is-active { display: flex; }
  .col__title-row { display: none; }
  .col__head { padding-block: 0.8rem; }
  .col__blurb { margin-top: 0; }
}
@media (min-width: 640px) and (max-width: 990px) {
  .col__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col__list > .empty, .col__list > li:only-child { grid-column: 1 / -1; }
}
/* Narrow phones: the count stacks over the label, so three tabs fit 358px without truncating. */
@media (max-width: 520px) {
  .board__tab { flex-direction: column; gap: 0.2rem; min-height: 3.6rem; padding: 0.5rem 0.25rem; }
  .board__tab-count { order: 0; min-width: 0; height: auto; padding: 0; background: none; font-family: var(--font-display); font-size: 1.15rem; line-height: 1; color: var(--fg); }
  .board__tab[aria-selected='false'] .board__tab-count { color: var(--fg-2); }
  .board__tab-label { font-size: 0.74rem; gap: 0.3rem; }
  .board__tab-label .status-icon { width: 0.8rem; height: 0.8rem; }
  .is-loading .board__tab-count:empty { display: block; width: 1.4rem; height: 1.15rem; border-radius: 0.35rem; background: linear-gradient(90deg, var(--skel) 0%, var(--skel-shine) 45%, var(--skel) 90%) 0 0 / 220% 100%; animation: shimmer 1.5s linear infinite; }
}

/* ============================================================================
   Shipped view: a changelog grouped by month, with a timeline rule.
   ========================================================================= */
.shipped__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; padding-bottom: 1.25rem; }
.shipped__title { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.shipped__lead { font-size: 0.88rem; color: var(--fg-muted); }
.month { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1.5rem 2rem; padding-block: 1.75rem 0.5rem; border-top: 1px solid var(--line-soft); }
.month__title { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.month__count { margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.log { position: relative; display: grid; }
.log__item { position: relative; display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 1.4rem; padding-bottom: 1.6rem; }
.log__item::before { content: ''; position: absolute; left: calc(4.75rem + 0.7rem - 0.5px); top: 0.9rem; bottom: -0.3rem; width: 1px; background: var(--line); }
.log__item:last-child::before { display: none; }
.log__date { position: relative; padding-top: 0.2rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.log__date::after { content: ''; position: absolute; right: -1.05rem; top: 0.4rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--c-live); }
.log__body { display: grid; gap: 0.4rem; justify-items: start; padding: 0 0 0 0.6rem; }
.log__title { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--fg); overflow-wrap: anywhere; }
.log__title button { text-align: left; font: inherit; letter-spacing: inherit; }
.log__title button:hover { color: var(--accent-text); }
.log__summary { max-width: 40rem; font-size: 0.9rem; line-height: 1.55; color: var(--fg-2); overflow-wrap: anywhere; }
.log__actions { display: flex; align-items: center; gap: 1.1rem; margin-top: 0.15rem; }
.log__actions a { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 500; color: var(--accent-text); }
.log__actions a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.log__actions a svg { width: 0.8rem; height: 0.8rem; }
.log__votes { font-size: 0.78rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* What's new: the headline numbers beside the title. */
.shipped__intro { display: grid; gap: 0.5rem; }
.shipped__head { align-items: flex-end; }
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; border-radius: 1.1rem; border: 1px solid var(--panel-border); background: var(--panel); }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.35rem; min-width: 8.5rem; padding: 0.85rem 1.25rem 0.8rem; }
.stat + .stat { border-left: 1px solid var(--line-soft); }
.stat dd { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -0.035em; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat dt { font-family: var(--font-mono); font-size: 0.6rem; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.stat:first-child dd { color: var(--c-live-text); }

/* ============================================================================
   The list: one row per planned item. A table on wide screens (status, item,
   area, type, target, votes); stacked rows under 990px, never a sideways scroll.
   ========================================================================= */
.lview__panel { overflow: hidden; border-radius: 1.1rem; border: 1px solid var(--card-border); background: var(--card); box-shadow: var(--card-shadow); }
.lview__panel > .empty { margin: 0.5rem; }
.lt { width: 100%; border-collapse: separate; border-spacing: 0; }
.lt th { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line-soft); background: var(--panel); text-align: left; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.lt th:first-child { padding-left: 1.15rem; }
.lt th[aria-sort] { color: var(--fg-2); }
.lt th[aria-sort] span::after { content: ''; display: inline-block; width: 0.4rem; height: 0.4rem; margin-left: 0.4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; vertical-align: 0.15em; transform: rotate(45deg); }
.lt th[aria-sort='ascending'] span::after { vertical-align: -0.05em; transform: rotate(-135deg); }
.lt th.lt__votes { text-align: right; padding-right: 1.15rem; }
.lt td { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; font-size: 0.82rem; color: var(--fg-2); }
.lt tbody tr:last-child td { border-bottom: 0; }
.lt__row { cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.lt__row:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.lt__row > td:first-child { padding-left: 1.15rem; box-shadow: inset 2px 0 0 color-mix(in srgb, var(--c) 85%, transparent); }
.lt__status, .lt__area, .lt__type, .lt__when, .lt__votes { width: 1%; white-space: nowrap; }
.lt td.lt__votes { text-align: right; padding-right: 1.15rem; }
.lt__votes .vote { margin-left: 0; }
.lt__head { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.lt__open { min-width: 0; text-align: left; font-size: 0.95rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); overflow-wrap: anywhere; transition: color var(--dur-fast) var(--ease-out); }
.lt__row:hover .lt__open { color: var(--accent-text); }
.lt__summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; max-width: 44rem; margin-top: 0.2rem; font-size: 0.8rem; line-height: 1.5; color: var(--fg-muted); overflow-wrap: anywhere; }
.lt__area { color: var(--fg-2); }
.lt .when { font-size: 0.8rem; color: var(--fg-2); }
.lt .when svg { color: var(--fg-muted); }
.lview__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; padding: 0.85rem 1.15rem; border-top: 1px solid var(--line-soft); background: var(--panel); font-size: 0.84rem; color: var(--fg-2); }
.lview__foot .link-btn { margin-left: auto; }
.lt__row .spill { cursor: inherit; }
/* The narrow cells are sized to their content (width: 1%), which the global svg { max-width: 100% }
   would resolve against and collapse the icons to nothing. */
.lt svg { max-width: none; flex: none; }

@media (max-width: 990px) {
  .lt, .lt tbody, .lt__row, .lt td { display: block; }
  .lt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lt__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.5rem; padding: 0.95rem 1rem 0.9rem 1.15rem; border-bottom: 1px solid var(--line-soft); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--c) 85%, transparent); }
  .lt tbody .lt__row:last-child { border-bottom: 0; }
  .lt .lt__row > td { width: auto; padding: 0; border: 0; box-shadow: none; white-space: normal; }
  .lt__status { order: 1; }
  .lt__type { order: 2; }
  .lt__item { order: 3; flex: 1 1 100%; margin-top: 0.15rem; }
  .lt__summary { -webkit-line-clamp: 2; line-clamp: 2; }
  .lt__area { order: 4; font-size: 0.78rem; color: var(--fg-muted); }
  .lt__area:empty { display: none; }
  .lt__area:not(:empty)::after { content: '\00b7'; margin-left: 0.5rem; }
  .lt__when { order: 5; flex: 1 1 auto; min-width: 0; }
  .lt__votes { order: 6; margin-left: auto; }
  .lt .when { font-size: 0.78rem; color: var(--fg-muted); }
}

/* ============================================================================
   The timeline: a vertical journey. Each step is a node on one rail (Now, Next
   up, each target quarter, Later), with its cards beside it; the rail ends on
   the latest releases. The node carries the status colour and its icon shape.
   ========================================================================= */
.tl { display: grid; }
.tl__group { position: relative; padding: 0 0 2.4rem 3.3rem; }
.tl__group::before { content: ''; position: absolute; left: calc(1.2rem - 1px); top: 2.9rem; bottom: 0.5rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, transparent), var(--line) 70%); }
.tl__group:last-child { padding-bottom: 0; }
.tl__group:last-child::before { bottom: auto; height: 3rem; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, transparent), transparent); }
.tl__node { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: color-mix(in srgb, var(--c) 13%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 0 0 5px var(--bg); }
.tl__node .status-icon { width: 1.05rem; height: 1.05rem; }
/* Now is happening: its node breathes, like the hero's live dot. */
.tl__group[data-kind='now'] .tl__node::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px var(--c); animation: node-ping 2.8s var(--ease-out) infinite; }
/* Later has no date: a muted node, so the dated steps read first. */
.tl__group[data-kind='later'] { --c: var(--fg-muted); --c-ink: var(--fg-muted); }
.tl__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; min-height: 2.4rem; margin-bottom: 1rem; }
.tl__title { font-size: 1.4rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: var(--fg); }
.tl__count { display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.45rem; padding: 0 0.45rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--c-ink); background: color-mix(in srgb, var(--c) 15%, transparent); font-variant-numeric: tabular-nums; }
.tl__note { flex: 1 1 100%; font-size: 0.82rem; color: var(--fg-muted); }
.tl__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.6rem; }
/* Wide screens: each step's heading sits beside its cards, so a quarter with one item costs one row. */
@media (min-width: 1100px) {
  .tl__group { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0 1.5rem; align-items: start; }
  .tl__head { margin-bottom: 1.5rem; }
  .tl__group > :not(.tl__head) { grid-column: 2; }
  .tl__cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
}
.tl__shipped { display: grid; gap: 2px; padding: 0.375rem; border-radius: 1.1rem; border: 1px solid var(--panel-border); background: var(--panel); }
.tl-ship { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.7rem 0.85rem; border-radius: 0.75rem; transition: background-color var(--dur-fast) var(--ease-out); }
.tl-ship:hover { background: var(--card); }
.tl-ship__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; min-width: 0; }
.tl-ship__open { text-align: left; font-size: 0.95rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); overflow-wrap: anywhere; }
.tl-ship__open::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.tl-ship__open:focus-visible { outline: none; }
.tl-ship__open:focus-visible::after { outline: 2px solid var(--ring); outline-offset: 2px; }
.tl-ship__type { font-size: 0.76rem; color: var(--fg-muted); }
.tl-ship__date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl__more { margin-top: 0.4rem; justify-content: flex-start; padding-inline: 0.85rem; color: var(--c-ink); width: auto; }

/* The views rise in once when they come on screen. */
.view-enter { animation: rise-in 360ms var(--ease-out); }

/* An idea is exploratory: its chip gets a dashed edge, the same shape as a queued status ring. */
.chip[data-type='idea'] { border-style: dashed; }

/* Loading rows (list, What's new) and the timeline's loading heading. */
.skel-rows { display: grid; }
.skel-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line-soft); }
.skel-line:last-child { border-bottom: 0; }
.skel-line .skel { display: block; height: 0.62rem; }
.skel-line__text { display: grid; gap: 0.55rem; }
.skel-line .skel--pill { width: 5.5rem; height: 1.5rem; border-radius: 999px; }
.skel-line .skel--title { width: min(22rem, 70%); height: 0.85rem; }
.skel-line .skel--text { width: min(30rem, 90%); }
.skel-line .skel--vote { width: 3.6rem; height: 2.25rem; border-radius: 999px; }
.skel.skel--heading { width: 7rem; height: 1.1rem; }

/* The shortcuts dialog. */
.keys { display: grid; border-top: 1px solid var(--line-soft); }
.keys > div { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); }
.keys dt { display: flex; gap: 0.3rem; flex: none; }
.keys dd { font-size: 0.9rem; color: var(--fg-2); }
.key { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.45rem; border-radius: 0.45rem; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--chip-bg); font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; color: var(--fg); }

/* ============================================================================
   Dialogs: the item drawer, and the small vote / subscribe modals
   ========================================================================= */
dialog { color: var(--fg); }
dialog::backdrop { background: rgb(5 4 3 / 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
:root[data-theme='light'] dialog::backdrop { background: rgb(26 23 20 / 0.32); }
dialog[open]::backdrop { animation: fade-in 300ms var(--ease-out); }
dialog.is-closing::backdrop { animation: fade-out 220ms var(--ease-out) forwards; }

.drawer { position: fixed; inset: 0 0 0 auto; width: min(36rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--bg-elev); box-shadow: var(--shadow-pop); overflow: hidden; }
.drawer[open] { display: flex; flex-direction: column; animation: drawer-in 420ms var(--ease-brand); }
.drawer.is-closing { animation: drawer-out 240ms var(--ease-out) forwards; }
.drawer__grab { display: none; }
.drawer__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.85rem 0.7rem 1rem; border-bottom: 1px solid var(--line-soft); }
.drawer__pager, .drawer__tools { display: flex; align-items: center; gap: 0.25rem; }
.drawer__tools { gap: 0.4rem; }
.drawer__pos { margin-left: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.drawer__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.6rem 1.75rem 2.25rem; }
.drawer__scroll:focus-visible { outline-offset: -2px; }
.d-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.spill { display: inline-flex; align-items: center; gap: 0.4rem; height: 1.75rem; padding: 0 0.7rem 0 0.5rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); font-size: 0.78rem; font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.spill .status-icon { width: 0.9rem; height: 0.9rem; }
.spill--sm { height: 1.5rem; padding: 0 0.55rem 0 0.4rem; font-size: 0.72rem; }
.spill--sm .status-icon { width: 0.8rem; height: 0.8rem; }
.d-title:focus, .shipped__title:focus { outline: none; }
.d-title { margin-top: 1rem; font-size: clamp(1.65rem, 2.3vw, 2.1rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.028em; color: var(--fg); text-wrap: balance; overflow-wrap: anywhere; }
.d-summary { margin-top: 0.75rem; font-size: 1rem; line-height: 1.55; color: var(--fg-2); overflow-wrap: anywhere; }
.d-facts { display: grid; margin-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.d-facts > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); }
.d-facts dt { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.d-facts dd { font-size: 0.9rem; color: var(--fg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.d-details { display: grid; gap: 0.9rem; margin-top: 1.5rem; font-size: 0.95rem; line-height: 1.7; color: var(--fg-2); overflow-wrap: anywhere; }
.d-learn { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.1rem; font-size: 0.9rem; font-weight: 500; color: var(--accent-text); }
.d-learn:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.d-learn svg { width: 0.9rem; height: 0.9rem; }
.d-vote { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.9rem 1rem; margin-top: 1.75rem; padding: 1.1rem 1.15rem 1.1rem 1.3rem; border-radius: 1.1rem; border: 1px solid var(--card-border); background: var(--card); box-shadow: var(--card-shadow); }
.d-vote__count { display: flex; align-items: baseline; gap: 0.45rem; }
.d-vote__count b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.d-vote__count span { font-size: 0.85rem; color: var(--fg-2); }
.d-vote__note { margin-top: 0.35rem; font-size: 0.8rem; color: var(--fg-muted); }
.d-vote__shipped { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--fg); }
.d-vote .btn[aria-pressed='true'] { background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.d-vote--live { grid-template-columns: auto minmax(0, 1fr); }
.d-vote--live .status-icon { width: 1.8rem; height: 1.8rem; }
.d-change { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); font-size: 0.86rem; color: var(--fg-muted); }

.modal { margin: auto; width: min(27rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: 1.4rem; background: var(--bg-elev); box-shadow: var(--shadow-pop); overflow: auto; }
.modal[open] { animation: modal-in 320ms var(--ease-brand); }
.modal.is-closing { animation: modal-out 180ms var(--ease-out) forwards; }
.modal__form { display: grid; gap: 1rem; padding: 1.4rem 1.5rem 1.5rem; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; }
.modal__close { margin: -0.35rem -0.5rem 0 0; }
.modal__badge { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 0.85rem; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.modal__badge svg { width: 1.15rem; height: 1.15rem; }
.modal__title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.modal__lead { margin-top: -0.45rem; font-size: 0.9rem; line-height: 1.55; color: var(--fg-2); overflow-wrap: anywhere; }
.modal__lead b { color: var(--fg); }
.modal__actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.3rem; }
.modal__done { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 0.9rem; border-radius: 0.85rem; background: color-mix(in srgb, var(--c-live) 12%, transparent); color: var(--fg); font-size: 0.9rem; }
.modal__done svg { width: 1rem; height: 1rem; flex: none; color: var(--c-live-text); }
/* Empty until the address is on the list, but kept in the accessibility tree (not display: none), so
   filling it is announced. Absolutely positioned, it takes no row in the form's grid. */
.modal__done:empty { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }

/* Toasts. One host per top-layer context; roadmap.js writes into the topmost open one. */
.toast-host { position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 200; display: grid; justify-items: center; gap: 0.5rem; width: max-content; max-width: calc(100vw - 2rem); translate: -50% 0; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.05rem 0.75rem 0.9rem; border-radius: 0.95rem; background: var(--toast-bg); color: var(--toast-fg); font-size: 0.86rem; font-weight: 500; line-height: 1.4; box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.5); animation: toast-in 360ms var(--ease-brand); pointer-events: auto; }
.toast svg { width: 1rem; height: 1rem; flex: none; color: var(--c-live); }
:root[data-theme='dark'] .toast svg { color: #1f7a48; }
.toast--error svg, :root[data-theme='dark'] .toast--error svg { color: #d93b2b; }
.toast.is-leaving { animation: toast-out 240ms var(--ease-out) forwards; }

/* ============================================================================
   03 · Request a feature
   ========================================================================= */
.request { border-top: 1px solid var(--line-soft); }
.request__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); grid-template-areas: 'head head' 'main how'; gap: 0 clamp(2rem, 4vw, 3.5rem); align-items: start; }
.request__head { grid-area: head; }
.request__main { grid-area: main; min-width: 0; }
.request__card { position: relative; padding: clamp(1.25rem, 2.6vw, 2.1rem); border-radius: 1.4rem; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.request__bugs { margin-top: 1.1rem; padding-inline: 0.25rem; font-size: 0.84rem; color: var(--fg-muted); }
.request__bugs a { color: var(--accent-text); font-weight: 500; }
.request__bugs a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.form { display: grid; gap: 1.4rem; }
.form__row--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; align-items: start; }
.field { position: relative; display: grid; gap: 0.45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.field__label { padding: 0; font-size: 0.88rem; font-weight: 500; color: var(--fg); }
legend.field__label { margin-bottom: 0.1rem; }
.field__opt { font-weight: 400; color: var(--fg-muted); }
.field__count { flex: none; font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.field__count.is-near { color: var(--accent-text); }
.field__count.is-short { color: var(--fg-muted); }
.field__input { width: 100%; min-height: 2.9rem; padding: 0.7rem 0.95rem; border-radius: 0.8rem; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--fg); font-size: 0.95rem; line-height: 1.45; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.field__input::placeholder { color: var(--fg-muted); opacity: 0.85; }
.field__input:hover { border-color: var(--field-border-hover); }
.field__input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 70%, var(--field-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.field__input--area { min-height: 7.5rem; resize: vertical; }
.field__help { font-size: 0.78rem; line-height: 1.5; color: var(--fg-muted); }
.field__error { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.8rem; line-height: 1.45; color: var(--danger); }
.field__error:empty { display: none; }
.field__error::before { content: '!'; flex: none; display: grid; place-items: center; width: 1rem; height: 1rem; margin-top: 0.05rem; border-radius: 50%; background: var(--danger); color: var(--bg); font-size: 0.68rem; font-weight: 800; line-height: 1; }
.field.is-invalid .field__input { border-color: var(--danger-border); }
.field.is-invalid .field__input:focus { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
.field.is-invalid .field__help { display: none; }

.choice__chips { position: relative; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choice__chip { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0 1.05rem 0 0.85rem; border-radius: 999px; border: 1px solid var(--field-border); background: var(--field-bg); font-size: 0.88rem; font-weight: 500; color: var(--fg-2); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.choice__chip::before { content: ''; width: 0.95rem; height: 0.95rem; flex: none; border-radius: 50%; border: 1.5px solid var(--field-border-hover); transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.choice__chip:hover { border-color: var(--field-border-hover); color: var(--fg); }
.choice__input:checked + .choice__chip { border-color: color-mix(in srgb, var(--accent) 65%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--field-bg)); color: var(--fg); }
.choice__input:checked + .choice__chip::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 36%, transparent 42%); }
.choice__input:focus-visible + .choice__chip { outline: 2px solid var(--ring); outline-offset: 2px; }

.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer; }
.select select option { background: var(--bg-elev); color: var(--fg); }
.select__icon { position: absolute; right: 0.9rem; top: 50%; width: 1rem; height: 1rem; translate: 0 -50%; color: var(--fg-muted); pointer-events: none; }

.check { position: relative; display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; cursor: pointer; font-size: 0.9rem; color: var(--fg-2); }
.check__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.check__box { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; flex: none; border-radius: 0.4rem; border: 1.5px solid var(--field-border-hover); background: var(--field-bg); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.check__box svg { width: 0.8rem; height: 0.8rem; color: var(--app-primary-fg); opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.check__input:checked + .check__box { border-color: transparent; background: linear-gradient(180deg, var(--app-sunset-1), var(--app-sunset-2)); }
.check__input:checked + .check__box svg { opacity: 1; transform: none; }
.check__input:focus-visible + .check__box { outline: 2px solid var(--ring); outline-offset: 2px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form__summary { padding: 0.95rem 1.1rem; border-radius: 0.9rem; border: 1px solid var(--danger-border); background: var(--danger-bg); }
.form__summary:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.form__summary-title { font-size: 0.92rem; font-weight: 600; color: var(--fg); }
.form__summary-list { display: grid; gap: 0.2rem; margin-top: 0.4rem; font-size: 0.86rem; }
.form__summary-list a { color: var(--danger); text-decoration: underline; text-underline-offset: 0.18em; }
.form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.1rem; padding-top: 0.3rem; }
.form__status { font-size: 0.86rem; color: var(--fg-muted); }
.form__status[data-tone='error'] { color: var(--danger); }

/* "Might already be on the roadmap": the live duplicate check under the problem field. */
.dupes { padding: 1rem 1.1rem 1.1rem; border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--c-cs) 35%, transparent); background: color-mix(in srgb, var(--c-cs) 7%, transparent); animation: rise-in 320ms var(--ease-out); }
.dupes__head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.dupes__icon { width: 1.05rem; height: 1.05rem; flex: none; color: var(--c-cs-text); }
.dupes__title { font-size: 0.92rem; font-weight: 600; color: var(--fg); }
.dupes__dismiss { margin-left: auto; }
.dupes__list { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.dupe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.6rem 0.9rem; padding: 0.75rem 0.8rem 0.75rem 0.9rem; border-radius: 0.8rem; background: var(--card); border: 1px solid var(--card-border); }
.dupe__main { display: grid; gap: 0.35rem; justify-items: start; min-width: 0; }
.dupe__title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; font-weight: 600; color: var(--fg); }
.dupe__actions { display: flex; align-items: center; gap: 0.35rem; }

.success { display: grid; justify-items: start; gap: 1rem; animation: rise-in 420ms var(--ease-out); }
.success__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: var(--c-live-text); background: color-mix(in srgb, var(--c-live) 15%, transparent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-live) 7%, transparent); }
.success__icon svg { width: 1.35rem; height: 1.35rem; }
.success__title { margin-top: 0.35rem; font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; outline: none; }
.success__ref { font-size: 0.92rem; color: var(--fg-2); }
.success__ref b { margin-left: 0.2rem; padding: 0.15rem 0.45rem; border-radius: 0.4rem; border: 1px solid var(--chip-border); background: var(--chip-bg); font-family: var(--font-mono); font-size: 0.82rem; color: var(--fg); letter-spacing: 0.04em; }
.success__echo { display: grid; width: 100%; border-top: 1px solid var(--line-soft); }
.success__echo > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); }
.success__echo dt { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); padding-top: 0.15rem; }
.success__echo dd { font-size: 0.92rem; color: var(--fg); overflow-wrap: anywhere; }
.success__next { max-width: 36rem; font-size: 0.95rem; line-height: 1.6; color: var(--fg-2); }
.success__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.2rem; }

/* "How requests work": three numbered steps on a timeline rule, then two links. */
.how { grid-area: how; position: sticky; top: calc(var(--nav-h) + 1.5rem); padding: 1.5rem 1.4rem 1.2rem; border-radius: 1.4rem; background: var(--panel); border: 1px solid var(--panel-border); }
.how__title { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.how__steps { display: grid; gap: 1.3rem; margin-top: 1.3rem; }
.how__step { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.9rem; }
.how__step:not(:last-child)::after { content: ''; position: absolute; left: calc(1rem - 0.5px); top: 2.35rem; bottom: -1.05rem; width: 1px; background: var(--line); }
.how__n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.how__step :is(h2, h4) { margin-top: 0.35rem; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--fg); }
.how__step p { margin-top: 0.3rem; font-size: 0.84rem; line-height: 1.55; color: var(--fg-2); }
.how__links { display: grid; gap: 0.25rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.how__link { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; min-height: 3.25rem; padding: 0.55rem 0.7rem; margin-inline: -0.7rem; border-radius: 0.85rem; color: var(--fg-2); transition: background-color var(--dur-fast) var(--ease-out); }
.how__link svg { width: 1.05rem; height: 1.05rem; }
.how__link:hover { background: var(--chip-bg); }
.how__link b { display: block; font-size: 0.88rem; font-weight: 600; color: var(--fg); }
.how__link small { display: block; font-size: 0.76rem; color: var(--fg-muted); }
.how__link .how__go { width: 0.85rem; height: 0.85rem; color: var(--fg-muted); }

/* ============================================================================
   04 · FAQ (site.css accordion, ported)
   ========================================================================= */
.faq__inner { display: grid; gap: clamp(2.5rem, 5vw, 3.75rem); max-width: 48rem; margin-inline: auto; }
.faq__head { display: grid; gap: 0.85rem; justify-items: center; text-align: center; }
.faq__title { color: var(--fg); letter-spacing: -0.03em; text-wrap: balance; }
.faq__lead { max-width: 36rem; font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.accordion { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.accordion__item { border: 0; transition: opacity 0.65s var(--ease-brand); }
.accordion__h { font: inherit; letter-spacing: normal; line-height: inherit; }
.accordion__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 0.35rem 0; text-align: left; font-family: var(--font-body); font-size: clamp(1.05rem, 1.35vw, 1.2rem); font-weight: 500; letter-spacing: -0.015em; color: var(--fg); line-height: 1.35; }
.accordion__head > span:first-child { flex: 1 1 auto; }
.accordion__icon { position: relative; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--fg) 40%, transparent); transition: border-color var(--dur-base) var(--ease-brand); }
.accordion__icon::before, .accordion__icon::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: 0.7rem; height: 1.5px; background: var(--fg); translate: -50% -50%; }
.accordion__icon::after { width: 1.5px; height: 0.7rem; transition: opacity var(--dur-base) var(--ease-brand); }
[data-accordion-status='active'] .accordion__icon { border-color: color-mix(in srgb, var(--fg) 70%, transparent); }
[data-accordion-status='active'] .accordion__icon::after { opacity: 0; }
.accordion__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-brand), visibility 0s linear 0.6s; visibility: hidden; }
[data-accordion-status='active'] .accordion__body { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.no-js .accordion__body { grid-template-rows: 1fr; visibility: visible; }
.accordion__body > * { overflow: hidden; }
.accordion__body p { padding: 0.85rem 0 0.35rem; max-width: 42rem; font-size: 0.98rem; line-height: 1.65; color: var(--fg-2); }
@media (min-width: 992px) and (hover: hover) {
  .accordion:not(.has-open):hover .accordion__item { opacity: 0.45; }
  .accordion:not(.has-open) .accordion__item:hover { opacity: 1; }
}

/* ============================================================================
   FOOTER (site.css, ported): plate + cropped wordmark. Dark in both themes;
   the .footer selector in the dark token block above is what pins it.
   ========================================================================= */
main, .footer { position: relative; z-index: 2; }
.footer { --footer-inset: clamp(0.75rem, 2.2vw, 1.5rem); --footer-pad-x: clamp(1.25rem, 3.5vw, 3rem); --footer-pad-y: clamp(1.75rem, 4vw, 3.25rem); --footer-radius: var(--radius-card); color: var(--fg); padding: var(--footer-inset); padding-bottom: calc(var(--footer-inset) + 0.25rem); opacity: 0; filter: blur(10px); transition: opacity var(--dur-reveal) var(--ease-out), filter var(--dur-reveal) var(--ease-out); }
.footer.is-in { opacity: 1; filter: blur(0); }
.no-js .footer { opacity: 1; filter: none; }
.footer__plate { position: relative; overflow: hidden; border-radius: var(--footer-radius); border: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--cream-050) 4%, var(--ink-850)) 0%, var(--ink-850) 42%, var(--ink-950) 100%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream-050) 10%, transparent), 0 1.25rem 3rem color-mix(in srgb, var(--ink-950) 55%, transparent); padding-block: var(--footer-pad-y) 0; }
:root[data-theme='light'] .footer__plate { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream-050) 10%, transparent), 0 1.25rem 3rem rgb(28 20 15 / 0.22); }
.footer__plate > .shell { padding-inline: max(var(--gutter), var(--footer-pad-x)); }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; padding-bottom: 2rem; }
.footer__logo { display: flex; align-items: center; }
.footer__logo img { height: 2.05rem; width: auto; }
.footer__news-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
.footer__news { display: flex; gap: 0.5rem; align-items: center; }
.footer__news input { padding: 0.8rem 1.1rem; border-radius: 999px; border: 1px solid var(--ink-600); background: color-mix(in srgb, var(--ink-950) 70%, var(--ink-800)); font-size: 0.85rem; min-width: 15rem; }
.footer__news input::placeholder { color: var(--cream-500); }
.footer__news input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 70%, var(--ink-600)); }
.footer__news-note { min-height: 1.1rem; padding-inline: 0.3rem; color: var(--cream-300); font-size: 0.78rem; }
.footer__news-note[data-error='true'] { color: #ff8d7d; }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.5rem 1.25rem; padding-block: 2rem; border-top: 1px solid color-mix(in srgb, var(--cream-050) 8%, transparent); }
.footer__cols div { display: grid; gap: 0.55rem; align-content: start; font-size: 0.85rem; color: var(--cream-300); }
.footer__col-name { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-500); }
.footer__cols a { transition: color var(--dur-micro) var(--ease-brand); }
.footer__cols a:hover { color: var(--accent); }
.footer__cols a[aria-current='page'] { color: var(--cream-050); }
.footer__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.35rem; border-top: 1px solid color-mix(in srgb, var(--cream-050) 8%, transparent); }
.footer__legal { margin: 0; color: var(--cream-500); }
.footer__wordmark-crop { --fw-crop: 0.58; --fw-w: 1000; --fw-h: 459; --fw-fade-start: 42%; position: relative; width: min(92%, 58rem); margin: clamp(1.25rem, 3vw, 2.25rem) auto 0; overflow: hidden; aspect-ratio: var(--fw-w) / calc(var(--fw-h) * var(--fw-crop)); pointer-events: none; }
.footer__wordmark { display: block; width: 100%; height: auto; opacity: 0.28; mix-blend-mode: luminosity; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--fw-fade-start), rgba(0,0,0,0.55) 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 var(--fw-fade-start), rgba(0,0,0,0.55) 72%, transparent 100%); user-select: none; pointer-events: none; }
@media (max-width: 700px) {
  .footer { --footer-inset: 0.65rem; --footer-radius: calc(var(--radius-card) * 0.72); }
  .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__news-wrap { width: 100%; }
  .footer__news { width: 100%; }
  .footer__news input { flex: 1; min-width: 0; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .footer__cols a { padding-block: 0.3rem; }
}

/* ---- /roadmap/thanks and /roadmap/subscribed (thanks.html, subscribed.html): where the request form
   and the footer's newsletter form land without JavaScript ---- */
.thanks { position: relative; overflow: clip; min-height: 100dvh; display: grid; align-content: center; padding-block: calc(var(--nav-h) + 2.5rem) 3rem; }
.thanks__inner { position: relative; z-index: 1; max-width: 42rem; }
.thanks__steps { width: 100%; margin-top: 0.25rem; }

/* ---- no-script state: the board needs JavaScript, the form and FAQ do not --- */
.noscript { margin: 0 auto 2.5rem; padding: 1rem 1.25rem; border-radius: 1rem; border: 1px solid var(--line); background: var(--panel); font-size: 0.92rem; color: var(--fg-2); }
.noscript a { color: var(--accent-text); }
.no-js .modes, .no-js .toolbar, .no-js .filters, .no-js .boardwrap, .no-js .hero__meta .pulse { display: none; }

/* ============================================================================
   Responsive passes
   ========================================================================= */
@media (max-width: 990px) {
  .toolbar__inner { flex-wrap: wrap; }
  /* Row one: the search, with the layout switch (and the shortcuts button) beside it. The range
     switch takes a row of its own, then the type chips. */
  .search { order: 1; flex: 1 1 0; min-width: 0; max-width: none; }
  .layout-switch, .keys-btn { order: 1; }
  .range-switch { order: 2; flex: 1 1 100%; }
  .range-switch .seg__btn { flex: 1 1 0; padding-inline: 0.5rem; }
  .rail--type { order: 3; margin-left: 0; flex-basis: 100%; }
  /* Chip rails become one scrollable line each, faded at the edge so the overflow reads as more. */
  /* overflow-x: auto clips on every side (overflow-y computes to auto too), so the padding is the
     room the chips' focus ring needs: 2px wide at a 2px offset. */
  .rail__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); }
  .rail__chips::-webkit-scrollbar { display: none; }
  .rail__chips.is-scrolled-end { -webkit-mask-image: none; mask-image: none; }
  .request__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'main' 'how'; }
  .how { position: static; margin-top: 1.5rem; }
  .month { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
@media (max-width: 767px) {
  .section { padding-block: clamp(3.25rem, 9vh, 5rem); }
  .hero { padding-block: calc(var(--nav-h) + 2.25rem) 1.75rem; }
  .hero__inner { gap: 1rem; }
  .hero__h1 { font-size: clamp(2.6rem, 12.5vw, 3.4rem); }
  .hero__lead { font-size: 1rem; }
  .hero__cta { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .hero__cta .btn { width: 100%; }
  .btn--lg { padding: 0.95rem 1.4rem; font-size: 0.92rem; }
  .btn:not(.btn--ghost):has(.btn__arrow) { gap: 0.6rem; }
  .btn:not(.btn--ghost):has(.btn__arrow) .btn__arrow { width: 0.9rem; opacity: 1; }
  .pulse { align-items: flex-start; padding: 0.55rem 1rem 0.55rem 0.85rem; border-radius: 1rem; font-size: 0.8rem; text-align: left; }
  .pulse__dot { margin-top: 0.35rem; }
  .pulse__text { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
  .pulse__sep { display: none; }
  .t-h2 { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1; }
  .head { gap: 0.7rem; margin-bottom: 1.75rem; }
  .form__row--2 { grid-template-columns: minmax(0, 1fr); }
  .request__card { padding: 1.25rem 1.1rem; border-radius: 1.2rem; }
  .form__submit { width: 100%; }
  .success__echo > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .accordion { gap: 1.1rem; }
  .accordion__head { font-size: 1rem; gap: 0.9rem; }
  .accordion__icon { width: 1.7rem; height: 1.7rem; }
  .footer__logo img { height: 1.7rem; }
  .footer__news .btn { flex: 0 0 auto; }
  .log__item { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; padding: 0 0 1.4rem 1.4rem; }
  .log__item::before { left: 0.3rem; top: 0.7rem; }
  .log__date { text-align: left; }
  .log__date::after { right: auto; left: -1.4rem; top: 0.25rem; }
  .log__body { padding-left: 0; }
  /* Phones: the search keeps the row's room; the shortcuts button goes (no keyboard to use it). */
  .keys-btn { display: none; }
  /* No "/" hint on phones, so an empty search gives its placeholder that room. */
  .search:not(.has-value) .search__input { padding-right: 0.9rem; }
  .layout-switch .seg__btn--icon { width: 2.35rem; }
  .mode-switch__btn { gap: 0.55rem; min-height: 3.3rem; padding: 0.4rem 0.7rem 0.4rem 0.45rem; }
  .mode-switch__icon { width: 2.1rem; height: 2.1rem; }
  .mode-switch__icon svg { width: 1rem; height: 1rem; }
  .mode-switch__label { font-size: 0.98rem; }
  .mode-switch__meta { font-size: 0.62rem; letter-spacing: 0.02em; }
  .stats { width: 100%; }
  .stat { min-width: 0; padding: 0.75rem 0.8rem; }
  .stat dd { font-size: 1.4rem; }
  .stat dt { font-size: 0.6rem; letter-spacing: 0.06em; }
  .tl__group { padding-left: 2.6rem; }
  .tl__node { width: 2rem; height: 2rem; }
  .tl__group::before { left: calc(1rem - 1px); top: 2.5rem; }
  .tl__title { font-size: 1.2rem; }
  .tl-ship { grid-template-columns: auto minmax(0, 1fr); }
  .tl-ship__date { grid-column: 2; }
  .sort__label { display: none; }

  /* The drawer becomes a bottom sheet with a grab handle. */
  .drawer { inset: auto 0 0 0; width: 100%; height: auto; max-height: 92dvh; border-left: 0; border-top: 1px solid var(--line); border-radius: 1.4rem 1.4rem 0 0; }
  .drawer[open] { animation-name: sheet-in; }
  .drawer.is-closing { animation-name: sheet-out; }
  .drawer__grab { display: block; width: 2.5rem; height: 4px; margin: 0.55rem auto 0; border-radius: 4px; background: var(--line); }
  .drawer__bar { padding: 0.35rem 0.6rem 0.55rem 0.75rem; }
  .drawer__scroll { padding: 1.25rem 1.1rem calc(1.75rem + env(safe-area-inset-bottom)); }
  .d-facts > div { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
  .d-vote { grid-template-columns: minmax(0, 1fr); }
  .d-vote .btn { width: 100%; }
  /* Copy link goes icon-only; its label is hidden visually, not from screen readers (display: none
     would leave a nameless button). "Ask for a change to this" keeps its words. */
  .drawer__tools .quiet-btn { width: 2.4rem; padding: 0; justify-content: center; }
  .drawer__tools .quiet-btn span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .modal__form { padding: 1.25rem 1.2rem 1.3rem; }
  .modal__actions .btn { flex: 1 1 0; }
  .dupe { grid-template-columns: minmax(0, 1fr); }
}
.btn__label--short { display: none; }
@media (max-width: 480px) { .btn__label--long { display: none; } .btn__label--short { display: inline; } }
@media (max-width: 420px) {
  .nav__cta { padding: 0 0.85rem; font-size: 0.8rem; }
  .nav__cta--build .btn__arrow { display: none; }
  .nav__end { gap: 0.4rem; }
  .theme__btn { width: 1.75rem; height: 1.75rem; }
}

/* ============================================================================
   Keyframes, and the reduced-motion switch
   ========================================================================= */
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.6; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes node-ping { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes vote-pop { 0% { transform: translateY(0); } 35% { transform: translateY(-4px) scale(1.18); } 100% { transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes drawer-out { to { transform: translateX(100%); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* Every animation and transition on the page collapses to 1ms rather than `none`: roadmap.js
   waits for animationend before closing a dialog, and a zero-length animation still fires it.
   The shimmer therefore stops on a flat frame, the reveal is instant, the drawer simply appears. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  [data-blur-in] { opacity: 1; filter: none; transform: none; }
  .pulse__dot::after, .tl__group[data-kind='now'] .tl__node::after { display: none; }
}