/*
 * Glance Reader. Design rules live in DESIGN.md:
 * a playful learning app. White pages, soft grey pills, ink cards for the
 * thing to do now, and four pastel blocks (periwinkle, lilac, yellow,
 * orange) that each own a place. Plus Jakarta Sans throughout; Open
 * Doodles characters on each tab's coloured header; Phosphor icons on
 * pastel circles for things, in the colour of their place, the same icon
 * for a drill or mode wherever it appears (Fluent Emoji only as Word →
 * Picture's pictures; Phrase glance's things are Phosphor icons painted
 * in --paint-*); Phosphor icons for actions and status.
 * Hallmark · genre: playful · theme: Hum, re-keyed to the reference board (redesign, system-locked)
 * Hallmark · pre-emit critique: P5 H4 E4 S4 R5 V5
 * Hallmark · component: icon tile · tone: colour of its place · contrast: pass (line 7.2:1 or better on every pastel)
 * Hallmark · page: landing (#welcome) · macrostructure: Bento Grid · F1 knobs: tiles=6, spans=irregular, border=none · nav: N1 (brand + Log in + Join now) · footer: Ft2 inline single line · enrichment: Pip (character moment) + Try a glance (live drill, the designed exception) · pre-emit critique: P5 H4 E4 S5 R4 V4
 * taste-skill dials: variance 7 · motion 5 · density 3
 */

/* The free, local PDF is available on the final onboarding plan and the public speed test. */
.stats-download { display: grid; justify-items: start; gap: var(--space-1); margin-top: var(--space-4); }
.stats-download > .button { min-height: 44px; max-width: 100%; white-space: normal; text-align: start; }
.stats-download-note { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--muted-foreground); }
.tour .stats-download { margin-top: 0; }
.tour .stats-download > .button {
  min-height: 50px;
  padding: 12px 24px;
  background: var(--lilac);
  color: var(--on-pastel);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--lilac) 72%, var(--on-pastel));
}
.tour .stats-download > .button:hover { background: color-mix(in srgb, var(--lilac) 90%, var(--on-pastel-surface)); }
.tour .stats-download-note { color: var(--on-scene-muted); }
.stats-download-note[data-state="error"] { color: var(--destructive); }
.tour .stats-download-note[data-state="error"] { color: var(--on-scene); }
@media (max-width: 359px) {
  .tour .stats-download > .button { padding-inline: 16px; font-size: 0.95rem; }
}
@media (max-width: 959px) {
  /* Packed to the top: a short result (one too quick to count) keeps its cards' own spacing instead of stretching to the screen. */
  .tour-chapter[data-chapter="result"] { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .tour-chapter[data-chapter="result"] > .tour-story { grid-row: 1; }
  .tour-chapter[data-chapter="result"] > .tour-visual { display: contents; }
}

/* ---------- Fonts ---------- */

/*
 * Gulp's faces, shipped with the app as Latin subsets (assets/fonts, with
 * their OFL licences): Bricolage Grotesque for the interface, Shantell Sans
 * only when Nibs speaks. The reading faces, Literata and Atkinson
 * Hyperlegible Next, still come from the fonts stylesheet in the page's head.
 */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/BricolageGrotesque-400Regular.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/BricolageGrotesque-500Medium.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/BricolageGrotesque-600SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/BricolageGrotesque-700Bold.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/BricolageGrotesque-800ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/ShantellSans-600SemiBold.woff2") format("woff2"); }

/* ---------- Tokens ---------- */

:root {
  /*
   * The Gulp brand colours (docs/brand/brand-identity.md), named for where
   * they come from on Nibs. docs/brand/rollout-plan.md maps each to its job.
   */
  --brand-fur: #fcfcfd;
  --brand-shade: #d5d8e0;
  --brand-ear: #f8c0c0;
  --brand-bow: #a04058;
  --brand-ink: #1f1a24;
  --brand-cheek: #ff8fab;
  --brand-sky: #a8d8f4;
  --brand-butter: #ffd75e;
  --brand-leaf: #1d7546;
  --brand-aubergine: #16131a;
  --brand-aubergine-raised: #211d26;
  --brand-aubergine-sunken: #2c2733;

  /* Inked buttons: the outline and the lip (deep tones on a dark ground). */
  --press-outline: var(--brand-ink);
  --press-lip: var(--brand-ink);
  --press-lip-push: var(--brand-ink);

  --background: #fcfcfd;
  --surface: #f1f2f6;
  --surface-raised: #ffffff;
  --surface-muted: #e6e8ee;
  --surface-sunken: #d5d8e0;
  --foreground: #1f1a24;
  --muted-foreground: #5a5464;
  --border: #e1e3ea;

  /* Ink cards: the one thing to do now, and whatever is chosen. */
  --ink: #1f1a24;
  --on-ink: #ffffff;
  --on-ink-muted: #bdb7c4;

  /* Pastel blocks keep dark text and a white sticker surface in both themes. */
  --periwinkle: #a8d8f4;
  --lilac: #f8c0c0;
  --yellow: #ffd75e;
  --orange: #ff8fab;
  --orange-deep: #c2456b;
  --on-pastel: #1f1a24;
  --on-pastel-muted: #3a3442;
  --on-pastel-faint: #8e8ea0;
  --on-pastel-surface: #ffffff;
  --on-pastel-success: #1d7546;
  /* Pip's warm, fixed illustration colours stay cozy on every pastel. */
  --pip-feather: #986c4a;
  --pip-feather-deep: #755039;
  --pip-feather-light: #c59a6a;
  --pip-cream: #fff0cf;
  --pip-belly: #f1d8a5;
  --pip-eye-white: #fffdf4;
  --pip-ink: #47372d;
  --pip-blush: #e8a18a;
  --pip-bow: #70ad9d;
  --pip-bow-deep: #4c887c;
  --pip-beak: #e9b74c;
  /* Pip is a night owl: gently lidded by day, bright-eyed after dark. */
  --pip-lid-y: -2px;
  --pip-pupil-size: 0.9;
  --pip-tempo: 8s;
  --pip-head-idle: pip-drowse;
  /*
   * Phrase glance paints: the colour words of its phrases. Content, not
   * places, so they never mark a tab. Hues after Okabe & Ito's palette, so
   * the six stay apart with common colour blindness too; the same in both themes.
   */
  --paint-red: #d9432b;
  --paint-orange: #f09a14;
  --paint-yellow: #f3da3a;
  --paint-green: #129e6f;
  --paint-blue: #1f6fc5;
  --paint-purple: #a35bd0;

  /* Medal metals, light to deep. Stickers like the pastels: the same in both themes. */
  --bronze-light: #f4bd8c;
  --bronze: #d4864a;
  --bronze-deep: #8f4f1e;
  --silver-light: #f3f5fa;
  --silver: #c4cbd8;
  --silver-deep: #77819a;
  --gold-light: #ffe69a;
  --gold: #f2b830;
  --gold-deep: #a46f05;
  --platinum-light: #f2faf8;
  --platinum: #b2d5ce;
  --platinum-deep: #507e75;
  --diamond-light: #f3f7ff;
  --diamond: #a8c8fb;
  --diamond-deep: #456cb1;
  /* The celebration's stage: dark in both themes, so a medal shines on it. */
  --stage: #121318;
  --on-stage: #ffffff;
  --on-stage-muted: #b4b4c4;

  /*
   * The tour's full-screen scenes: a pastel fills the screen in light mode;
   * in dark mode its deep tint does, with light words, and Pip stands on a
   * pastel perch. Sticker cards on a scene are white with dark text in both
   * themes, like the pastels, so their greys never change with the theme.
   */
  --scene-hello: var(--periwinkle);
  --scene-periwinkle: var(--periwinkle);
  --scene-lilac: var(--lilac);
  --scene-done: var(--yellow);
  --on-scene: var(--on-pastel);
  --on-scene-muted: var(--on-pastel-muted);
  --perch-hello: color-mix(in srgb, var(--on-pastel-surface) 40%, transparent);
  --perch-periwinkle: color-mix(in srgb, var(--on-pastel-surface) 40%, transparent);
  --perch-lilac: color-mix(in srgb, var(--on-pastel-surface) 40%, transparent);
  --perch-done: color-mix(in srgb, var(--on-pastel-surface) 40%, transparent);
  --sticker-grey: #f1f2f6;
  --sticker-sunken: #dfe1e8;
  --sticker-success-muted: #d8f1e2;
  --sticker-destructive-muted: #fde1de;
  /* Measurement roles: the reader's raised bar and quiet utility feedback. */
  --compare-depth: color-mix(in srgb, var(--on-pastel) 24%, var(--sticker-sunken));
  --measurement-badge: color-mix(in srgb, var(--on-ink) 12%, var(--ink));

  /* Soft tints of the pastels, for small fills on the page. */
  --periwinkle-soft: #dcf0fb;
  --lilac-soft: #fde6e6;
  --yellow-soft: #fff1c2;
  --nav-active: #1f1a24;

  --accent: var(--periwinkle);
  --accent-soft: var(--periwinkle-soft);
  --accent-foreground: #1f1a24;
  --highlight: var(--orange);
  --primary: var(--ink);
  --primary-foreground: var(--on-ink);
  --ring: #1f1a24;
  --success: #1d7546;
  --success-muted: #d8f1e2;
  /* Green where the background never follows the theme: white stickers (5.6:1), and the ink card (light green on dark ink, 10:1). */
  --sticker-success: #1d7546;
  --sticker-destructive: #bf3127;
  --success-on-ink: #6fd09a;
  --score-regular: #23679a;
  --score-gold: #8a5a00;
  --score-gold-on-ink: #f6c453;
  --sticker-score: #23679a;
  --sticker-score-gold: #8a5a00;
  --destructive: #bf3127;
  --destructive-muted: #fde1de;
  --series-1: #1f1a24;
  --series-2: #3b8ac0;
  --grid: #e4e6ec;
  /* The month plan's chart and meter: each 3:1 or better against what it sits on (WCAG 1.4.11). */
  --forecast-band: color-mix(in srgb, var(--yellow) 45%, transparent);
  --forecast-edge: #917639;
  --chart-bar: var(--series-2);
  --today-line: var(--orange-deep);
  --meter-mark: #9c2a50;
  /* The paced reader: the pen's ink and tip, the sliding highlight, and the calm sky. */
  --pen-ink: var(--lilac);
  --pencil-tip: var(--on-pastel);
  --pencil-trail: #5a5464;
  --pencil-trail-opacity: 0.6;
  --pen-tip: var(--orange);
  --pen-halo: color-mix(in srgb, var(--orange) 26%, transparent);
  --guide-glow: color-mix(in srgb, var(--lilac) 34%, transparent);
  /* Around every reading: a quiet grey, so the page carries the focus; Read's lilac stays in the sparkles. */
  --sky: var(--surface);
  --sky-sparkle: var(--lilac);
  --shadow-color: 31 26 36;

  --font-ui: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Nibs' handwriting: speech bubbles only, never a button, number or instruction. */
  --font-hand: "Shantell Sans", "Bricolage Grotesque", system-ui, sans-serif;
  --font-display: var(--font-ui);
  --font-num: var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Reading faces (the reader picks one in Settings; no single font is fastest for everyone: Wallace et al., 2022).
   * Literata was made for long reading on screens (Google Play Books); Atkinson Hyperlegible Next for letters that
   * can't be mistaken for each other (Braille Institute). */
  --font-read: "Literata", Georgia, "Times New Roman", serif;
  --font-legible: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", var(--font-ui);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-input: 16px;
  --radius-tile: 18px;
  --radius-container: 24px;
  --radius-card: 30px;
  --radius-block: 36px;
  --radius-pill: 999px;
  --tab-height: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-press: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --shadow-soft: 0 1px 2px rgb(var(--shadow-color) / 0.06), 0 16px 36px -18px rgb(var(--shadow-color) / 0.3);

  /* Drawn marks for the pastel blocks, used as masks so they take any colour. */
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.9 5.9 4.6 9.6 10.5 10.5-5.9.9-9.6 4.6-10.5 10.5-.9-5.9-4.6-9.6-10.5-10.5 5.9-.9 9.6-4.6 10.5-10.5z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ring-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --press-outline: transparent;
    --press-lip: #5d5866;
    --press-lip-push: var(--orange-deep);
    --background: #16131a;
    --surface: #211d26;
    --surface-raised: #2c2733;
    --surface-muted: #302a37;
    --surface-sunken: #3d3645;
    --foreground: #f3f0f6;
    --muted-foreground: #b6aebf;
    --border: #342f3b;
    --ink: #f3f0f6;
    --on-ink: #1f1a24;
    --on-ink-muted: #5d5866;
    --periwinkle: #9fd0ee;
    --lilac: #f0b5b5;
    --pencil-tip: var(--lilac);
    --pencil-trail: var(--lilac);
    --yellow: #f5cd55;
    --orange: #f7859f;
    --orange-deep: #b8325e;
    --periwinkle-soft: #1f3140;
    --lilac-soft: #3a2629;
    --yellow-soft: #3a3118;
    --nav-active: #a8d8f4;
    --ring: #f3f0f6;
    --success: #6fd09a;
    --success-muted: #17321f;
    /* Ink turns light in dark mode, so its green turns dark (5.1:1). */
    --success-on-ink: #1d7546;
    --score-regular: #a8d8f4;
    --score-gold: #f6c453;
    --score-gold-on-ink: #8a5a00;
    --destructive: #f48b81;
    --destructive-muted: #3d1f1c;
    --series-1: #f3f0f6;
    --series-2: #a8d8f4;
    --grid: #2f2a36;
    --forecast-edge: #edd296;
    --today-line: var(--orange);
    --meter-mark: var(--orange);
    --scene-hello: var(--periwinkle-soft);
    --scene-periwinkle: var(--periwinkle-soft);
    --scene-lilac: var(--lilac-soft);
    --scene-done: var(--yellow-soft);
    --on-scene: var(--foreground);
    --on-scene-muted: var(--muted-foreground);
    --perch-hello: var(--periwinkle);
    --perch-periwinkle: var(--periwinkle);
    --perch-lilac: var(--lilac);
    --perch-done: var(--yellow);
    --shadow-color: 0 0 0;
    color-scheme: dark;
    --pip-lid-y: -20px;
    --pip-pupil-size: 1.05;
    --pip-tempo: 5.2s;
    --pip-head-idle: pip-curious;
  }
}

:root[data-theme="dark"] {
    --press-outline: transparent;
    --press-lip: #5d5866;
    --press-lip-push: var(--orange-deep);
  --background: #16131a;
  --surface: #211d26;
  --surface-raised: #2c2733;
  --surface-muted: #302a37;
  --surface-sunken: #3d3645;
  --foreground: #f3f0f6;
  --muted-foreground: #b6aebf;
  --border: #342f3b;
  --ink: #f3f0f6;
  --on-ink: #1f1a24;
  --on-ink-muted: #5d5866;
  --periwinkle: #9fd0ee;
  --lilac: #f0b5b5;
  --pencil-tip: var(--lilac);
  --pencil-trail: var(--lilac);
  --yellow: #f5cd55;
  --orange: #f7859f;
  --orange-deep: #b8325e;
  --periwinkle-soft: #1f3140;
  --lilac-soft: #3a2629;
  --yellow-soft: #3a3118;
  --nav-active: #a8d8f4;
  --ring: #f3f0f6;
  --success: #6fd09a;
  --success-muted: #17321f;
  /* Ink turns light in dark mode, so its green turns dark (5.1:1). */
  --success-on-ink: #1d7546;
  --score-regular: #a8d8f4;
  --score-gold: #f6c453;
  --score-gold-on-ink: #8a5a00;
  --destructive: #f48b81;
  --destructive-muted: #3d1f1c;
  --series-1: #f3f0f6;
  --series-2: #a8d8f4;
  --grid: #2f2a36;
  --forecast-edge: #edd296;
  --today-line: var(--orange);
  --meter-mark: var(--orange);
  --scene-hello: var(--periwinkle-soft);
  --scene-periwinkle: var(--periwinkle-soft);
  --scene-lilac: var(--lilac-soft);
  --scene-done: var(--yellow-soft);
  --on-scene: var(--foreground);
  --on-scene-muted: var(--muted-foreground);
  --perch-hello: var(--periwinkle);
  --perch-periwinkle: var(--periwinkle);
  --perch-lilac: var(--lilac);
  --perch-done: var(--yellow);
  --shadow-color: 0 0 0;
  color-scheme: dark;
  --pip-lid-y: -20px;
  --pip-pupil-size: 1.05;
  --pip-tempo: 5.2s;
  --pip-head-idle: pip-curious;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

@media (pointer: fine) {
  html { overscroll-behavior: none; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--background);
  color: var(--foreground);
  font: 400 1rem/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, select, input, textarea { font: inherit; color: inherit; }
button, a, label, select, summary, input { touch-action: manipulation; }
button, summary, label:has(input) { cursor: pointer; }
[hidden] { display: none !important; }
img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3 { margin: 0; text-wrap: balance; color: var(--foreground); font-style: normal; overflow-wrap: anywhere; min-width: 0; }
h1 {
  font: 500 clamp(2rem, 7.4vw, 2.7rem)/1.08 var(--font-display);
  letter-spacing: -0.035em;
}
h2 { font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
h3 { font-size: 0.95rem; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--foreground); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0 0.45em;
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: inset 0 -2px 0 var(--surface-sunken), 0 0 0 1px var(--border);
  font: 600 0.8em/1.7 var(--font-mono);
  text-align: center;
}

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

/* Emphasis in a heading is weight, as on the reference board: "Read and **measure**". */
.mark { font-weight: 800; letter-spacing: -0.04em; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 30;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus-visible { top: 12px; }

/* ---------- Icons, pictures and doodles ---------- */

.icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.22em; }

/* Duotone icons: ink line, periwinkle fill. */
.icon [opacity] { fill: var(--icon-tint, var(--accent)); opacity: 1; }

/*
 * Anything that stands for a thing (a passage, a mode, a skill, a section)
 * is a duotone icon on a pastel circle, in the colours of Today's numbers:
 * dark line, white fill layer. The pastel is the colour of the place the
 * thing belongs to (data-tone; periwinkle by default). No outline: the
 * pastel is the edge. Pastels keep their colour on ink rows and in dark
 * mode, like stickers.
 */
.icon-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--periwinkle);
  color: var(--on-pastel);
  --icon-tint: var(--on-pastel-surface);
}
.icon-tile[data-tone] { background: var(--tone); }
.icon-tile .icon { width: 52%; height: 52%; }
.icon-tile[data-size="lg"] { width: 72px; height: 72px; }
/* Already on a pastel block (Today's numbers, the profile card): a thin ring instead of a fill. */
.profile-card > .icon-tile { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* Doodles always stand on a pastel block or tile, never on the page. */
.doodle {
  display: block;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
}
.text-link .icon { color: currentColor; opacity: 0.7; text-decoration: none; }
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- App shell ---------- */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1088px;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 24px 6px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--foreground);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}

.brand { min-height: 44px; }
/* The gulp wordmark (js/ui/wordmark.js), one colour, 1689:858. */
.brand .wordmark { width: auto; height: 30px; aspect-ratio: 1689 / 858; flex: none; }

.tab-bar { display: flex; gap: 2px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface); }

.tab-bar a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  color: var(--muted-foreground);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.tab-bar svg { width: 20px; height: 20px; flex: none; }
.tab-bar a:hover { color: var(--foreground); }
.tab-bar a[aria-current="page"] { color: var(--on-ink); background: var(--ink); }

main { max-width: 1088px; margin: 0 auto; padding: var(--space-4) 24px var(--space-8); }

.screen { display: flex; flex-direction: column; gap: var(--space-6); max-width: 640px; margin-inline: auto; }
.screen[data-width="wide"] { max-width: 680px; }
.screen[data-width="narrow"] { max-width: 600px; }
.screen[data-width="prose"] { max-width: 720px; }
.screen[data-width="read"] { max-width: 760px; }

.screen-header { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); }
.eyebrow { color: var(--muted-foreground); font-size: 0.88rem; font-weight: 600; }
.lead { color: var(--muted-foreground); font-size: 1.02rem; max-width: 46ch; }
.hint { color: var(--muted-foreground); font-size: 0.9rem; max-width: 60ch; }
.meta-line { font-size: 0.8rem; }
.meta-line:empty { display: none; }
.section { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.section-meta { color: var(--muted-foreground); font-size: 0.85rem; font-weight: 500; }

.note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted-foreground);
  font-size: 0.9rem;
}
.note .icon { margin-top: 2px; color: var(--foreground); }

/* Two columns from desktop width: the work on the left, context on the right. */
.split { display: flex; flex-direction: column; gap: var(--space-6); }
.split-main, .split-side { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

@media (min-width: 960px) {
  main { padding-top: var(--space-5); }
  .screen { gap: var(--space-7); }
  .screen[data-width="wide"] { max-width: 1040px; }
  .screen .split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
  .split-side { position: sticky; top: var(--space-5); }
}

@media (prefers-reduced-motion: no-preference) {
  .screen:not([hidden]) { animation: screen-in 0.32s var(--ease-out); }
  @keyframes screen-in { from { opacity: 0; transform: translateY(10px); } }
}

@media (max-width: 719px) {
  .app-header { padding-inline: 16px; }
  main { padding-inline: 16px; }

  .tab-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    justify-content: space-around;
    gap: 0;
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius: 28px 28px 0 0;
    background: var(--background);
    box-shadow: 0 -1px 0 var(--border), 0 -12px 32px -20px rgb(var(--shadow-color) / 0.35);
  }

  .tab-bar a { flex: 1; flex-direction: column; gap: 2px; padding: 6px 2px 10px; border-radius: 18px; font-size: 0.7rem; font-weight: 600; }
  .tab-bar svg { width: 24px; height: 24px; }
  .tab-bar a[aria-current="page"] { color: var(--foreground); background: transparent; }
  .tab-bar a[aria-current="page"] svg { color: var(--nav-active); }
  .tab-bar a[aria-current="page"]::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--nav-active);
  }
  main { padding-bottom: calc(var(--tab-height) + 40px + env(safe-area-inset-bottom, 0px)); }
}

/* Focus mode: during a session the chrome steps away. */
body[data-focus-mode="true"] .app-header { display: none; }
body[data-focus-mode="true"] main { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 24px; }

/* ---------- Pastel blocks ---------- */

[data-tone] { --tone: var(--periwinkle); }
[data-tone="lilac"] { --tone: var(--lilac); }
[data-tone="yellow"] { --tone: var(--yellow); }
[data-tone="orange"] { --tone: var(--orange); }

/*
 * The coloured header of a tab: title on the left, its character on the
 * right, bleeding off the bottom edge, with a few drawn sparkles.
 */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: 0 8px;
  min-height: 208px;
  padding: 26px 0 0 24px;
  overflow: hidden;
  border-radius: var(--radius-block);
  background: var(--tone);
  color: var(--on-pastel);
}

.hero-text { align-self: start; display: flex; flex-direction: column; gap: 10px; padding-bottom: 26px; min-width: 0; }
.hero h1, .hero h2 { color: var(--on-pastel); }
.hero h2 { font: 600 clamp(1.45rem, 5.4vw, 1.8rem)/1.15 var(--font-display); letter-spacing: -0.03em; }
.hero .lead, .hero p:not(.eyebrow) { color: var(--on-pastel-muted); font-size: 0.92rem; line-height: 1.5; }
.hero .eyebrow { color: var(--on-pastel-muted); }
/* The character runs off the right and bottom edges. */
.hero .doodle { justify-self: end; width: calc(100% + 20px); max-width: 320px; margin: 0 -20px -6px 0; }
/* A result is a sentence, so its header gives the words more room than the character. */
.hero:has(.result-headline) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.hero .result-headline { font-size: clamp(1.55rem, 6vw, 2.2rem); }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--on-pastel);
  opacity: 0.85;
  -webkit-mask: var(--sparkle) 58% 16% / 20px no-repeat, var(--sparkle) 94% 10% / 14px no-repeat, var(--ring-dot) 70% 38% / 10px no-repeat, var(--sparkle) 47% 88% / 12px no-repeat, var(--ring-dot) 97% 80% / 8px no-repeat;
  mask: var(--sparkle) 58% 16% / 20px no-repeat, var(--sparkle) 94% 10% / 14px no-repeat, var(--ring-dot) 70% 38% / 10px no-repeat, var(--sparkle) 47% 88% / 12px no-repeat, var(--ring-dot) 97% 80% / 8px no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .hero::after { animation: twinkle 3.6s ease-in-out infinite; }
  @keyframes twinkle { 50% { opacity: 0.35; } }
}

@media (min-width: 640px) {
  .hero { min-height: 232px; padding: 34px 0 0 36px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .hero-text { padding-bottom: 34px; }
  .hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.3rem); }
  .hero .lead { max-width: 38ch; font-size: 1.02rem; }
}

@media (max-width: 359px) {
  .hero, .hero:has(.result-headline) { grid-template-columns: minmax(0, 1fr); padding-right: 22px; }
  .hero .doodle { width: 70%; margin-right: -30px; }
  /* One column: the sparkles move down beside the character, clear of the words. */
  .hero::after {
    -webkit-mask: var(--sparkle) 12% 90% / 16px no-repeat, var(--ring-dot) 24% 72% / 9px no-repeat, var(--sparkle) 6% 66% / 11px no-repeat;
    mask: var(--sparkle) 12% 90% / 16px no-repeat, var(--ring-dot) 24% 72% / 9px no-repeat, var(--sparkle) 6% 66% / 11px no-repeat;
  }
}

/* ---------- Button ---------- */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transform: translateY(0);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 140ms var(--ease-press), box-shadow 140ms var(--ease-press), opacity 0.2s;
}

.button .icon { width: 1.15em; height: 1.15em; }
.button:active { transform: translateY(2px); transition-duration: 70ms; }
.button:disabled { opacity: 0.45; cursor: default; transform: none; }

/*
 * Gulp's inked buttons, like Nibs' stickers: a 2px ink outline and a 3px
 * ink lip straight down that the face presses flat into. Primary and
 * sticker are white, the push is cheek; labels are 700. On a dark ground
 * (the ink card, the dark page) the outline goes and the lip takes a deep
 * tone (--press-* tokens).
 */
.button:is([data-variant="primary"], [data-variant="sticker"], [data-variant="highlight"]) {
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--press-outline), 0 3px 0 0 var(--press-lip);
}
.button:is([data-variant="primary"], [data-variant="sticker"]) { background: #ffffff; color: var(--brand-ink); }
.button:is([data-variant="primary"], [data-variant="sticker"], [data-variant="highlight"]):hover { transform: translateY(-1px); box-shadow: inset 0 0 0 2px var(--press-outline), 0 4px 0 0 var(--press-lip); }
.button:is([data-variant="primary"], [data-variant="sticker"], [data-variant="highlight"]):active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--press-outline), 0 0 0 0 var(--press-lip); }
.button:is([data-variant="primary"], [data-variant="sticker"], [data-variant="highlight"]):disabled { transform: none; }
.button[data-variant="secondary"] { background: var(--surface); color: var(--foreground); }
.button[data-variant="secondary"]:hover { background: var(--surface-muted); }
.button[data-variant="ghost"] { background: transparent; color: var(--foreground); padding-inline: 14px; }
.button[data-variant="ghost"]:hover { background: var(--surface); }
.button[data-variant="danger"] { background: transparent; color: var(--destructive); padding-inline: 14px; }
.button[data-variant="danger"]:hover { background: var(--destructive-muted); }

/* The suggested next step: the cheek push button; the press is the feedback. */
.button[data-variant="highlight"] { --press-lip: var(--press-lip-push); background: var(--highlight); color: var(--brand-ink); }

.button[data-size="lg"] { min-height: 56px; padding: 14px 28px; font-size: 1.02rem; }
.button[data-size="sm"] { min-height: 38px; padding: 6px 16px; font-size: 0.9rem; }
.button[data-size="icon"] { width: 44px; min-height: 44px; padding: 0; }
.button[data-size="icon"] .icon { width: 20px; height: 20px; }
.button[data-block] { width: 100%; }

.button[data-state="armed"] { background: var(--destructive); color: var(--background); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions .button[data-size="lg"] { flex: 1 1 200px; }
.form-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

/* ---------- Forms ---------- */

.form { display: flex; flex-direction: column; gap: var(--space-6); }

/* A fieldset is a titled group on the page, not a box; data-card makes it one. */
.fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: 0;
}

.fieldset[data-card] { padding: 22px; border-radius: var(--radius-card); background: var(--surface); }

.fieldset > legend {
  float: left;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.fieldset > legend .icon { width: 22px; height: 22px; }
.fieldset > legend + * { clear: both; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.field-grid .wide { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--muted-foreground); }

.select, .textarea, .input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-input);
  background-color: var(--surface-raised);
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 0.2s var(--ease-out);
}

.select { min-height: 48px; padding: 10px 14px; }
.input { min-height: 48px; padding: 10px 14px; }
.textarea { padding: 14px; line-height: 1.55; resize: vertical; }
.select:hover, .textarea:hover, .input:hover { border-color: var(--muted-foreground); }

.range { width: 100%; accent-color: var(--foreground); }
.range:disabled { opacity: 0.45; cursor: not-allowed; }
.field output { color: var(--foreground); font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; }

.check-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  border-radius: var(--radius-container);
  background: var(--surface);
  transition: background-color 0.2s var(--ease-out);
}

.check-row:hover { background: var(--surface-muted); }
.fieldset[data-card] .check-row { background: var(--surface-raised); }
.check-row input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--foreground); }
.check-row span { color: var(--muted-foreground); font-size: 0.92rem; }
.check-row strong { display: flex; align-items: center; gap: 6px; color: var(--foreground); font-weight: 700; font-size: 0.98rem; }

/* Short choices: a wrap of pills, ink when chosen. */
.segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.segmented-option { position: relative; }
.segmented-option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }

.segmented-option span {
  display: block;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--pill, var(--surface));
  font-weight: 600;
  font-size: 0.94rem;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

/* On a grey card the pills turn white, so they still read as buttons. */
.fieldset[data-card] .segmented, .range-bar .segmented { --pill: var(--surface-raised); }
.segmented-option input:hover + span { background: var(--surface-muted); }
.segmented-option input:checked + span { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.segmented-option input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 3px; }
.field .segmented-option span { color: var(--foreground); }
.field .segmented-option input:checked + span { color: var(--on-ink); }

.segmented[data-size="sm"] { gap: 6px; }
.segmented[data-size="sm"] .segmented-option span { padding: 7px 14px; font-size: 0.88rem; }

/* A two-way switch that fills the width (Passages / My texts). */
.segmented[data-fill] { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 5px; border-radius: var(--radius-pill); background: var(--surface); }
.segmented[data-fill] .segmented-option span { text-align: center; background: transparent; box-shadow: none; color: var(--muted-foreground); }
.segmented[data-fill] .segmented-option input:hover + span { color: var(--foreground); background: transparent; }
.segmented[data-fill] .segmented-option input:checked + span { background: var(--surface-raised); color: var(--foreground); box-shadow: 0 2px 8px -2px rgb(var(--shadow-color) / 0.2); }

/* Choices that need a sentence: a pill per row, ink when chosen. */
.option-cards { display: flex; flex-direction: column; gap: 10px; }
.option-card { position: relative; }
.option-card > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }

.option-card > span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  row-gap: 1px;
  padding: 12px 62px 12px 12px;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.45;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.25s var(--ease-spring);
}

.option-card > span > .icon-tile { grid-row: 1 / span 3; width: 60px; height: 60px; }
.option-card > span > :not(.icon-tile) { grid-column: 2; }
.option-card strong { color: var(--foreground); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; transition: color 0.25s var(--ease-out); }

/* The selection mark: an empty ring, then an orange dot in white when chosen. */
.option-card > span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--surface-sunken);
  transition: box-shadow 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}

.option-meta { margin-top: 5px; width: fit-content; padding: 1px 10px; border-radius: 10px; background: var(--surface-raised); color: var(--muted-foreground); font: 600 0.76rem/1.6 var(--font-num); font-variant-numeric: tabular-nums; }
.option-meta:empty { display: none; }
.option-card > input:hover + span { background: var(--surface-muted); }
.option-card > input:checked + span { background: var(--ink); color: var(--on-ink-muted); }
.option-card > input:checked + span strong { color: var(--on-ink); }
.option-card > input:checked + span .option-meta { background: color-mix(in srgb, var(--on-ink) 14%, var(--ink)); color: var(--on-ink); }
.option-card > input:checked + span::after { background: var(--orange); box-shadow: inset 0 0 0 7px var(--on-pastel-surface); }
.option-card > input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 3px; }
@media (pointer: fine) {
  .option-card > input:not(:checked):hover + span { transform: translateY(-2px); }
}

.drill-panel { display: flex; flex-direction: column; gap: var(--space-4); }

/* Train in two steps: #train picks a drill, #train/<drill> sets it up and starts it. One column each, so a step reads top to bottom. */
.screen[data-step="pick"] [data-train-step="setup"],
.screen[data-step="setup"] [data-train-step="pick"] { display: none; }
.screen[data-screen="train"] .split { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; max-width: 680px; }
.screen[data-screen="train"] .split-side { position: static; }
.train-pick { display: flex; flex-direction: column; gap: var(--space-5); }
.train-step-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.train-choices { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.train-choice { display: block; color: inherit; text-decoration: none; }
.train-choice > span::after { display: none; }
.train-choice-arrow { position: absolute; top: 50%; right: 22px; width: 20px; height: 20px; margin-top: -10px; color: var(--foreground); }
.train-choice:hover > span { background: var(--surface-muted); }
.train-choice:focus-visible { outline: none; }
.train-choice:focus-visible > span { outline: 2px solid var(--ring); outline-offset: 3px; }
@media (pointer: fine) {
  .train-choice:hover > span { transform: translateY(-2px); }
}
.train-setup-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.train-setup-title { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.train-setup-title .icon-tile { width: 64px; height: 64px; }
.train-setup-title h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
.train-setup-title .lead { margin-top: 4px; }
.train-more-body { display: flex; flex-direction: column; gap: var(--space-4); }
/* On phones the settings step keeps Start in view, just above the tab bar (78px tall), as the How it works page does. */
@media (max-width: 719px) {
  .screen[data-step="setup"] .form-actions { position: sticky; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 2; padding: 12px 0 10px; background: var(--background); }
}

.details summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 4px 0;
  color: var(--foreground);
  font-weight: 600;
  list-style: none;
}
.details summary::-webkit-details-marker { display: none; }
.details summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s var(--ease-out);
}
.details[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.details summary .icon { color: var(--muted-foreground); }
.details summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.details[open] > summary { margin-bottom: 14px; }
.explainer[open] { display: grid; gap: 8px; }

.form-error { color: var(--destructive); font-weight: 600; }
.form-error:empty { display: none; }

.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 18px 20px;
  border-radius: var(--radius-container);
  background: var(--accent-soft);
  color: var(--foreground);
  font-size: 0.94rem;
}
.callout > .icon { width: 22px; height: 22px; }
.callout > span { flex: 1 1 14rem; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 22px;
  border-radius: var(--radius-container);
  background: var(--surface);
  color: var(--muted-foreground);
  text-align: center;
}
.empty-state p { max-width: 40ch; }

/* An empty state with a character: a pastel tile, doodle above the words. */
.empty-state[data-tone] { gap: 6px; padding: 18px 22px 24px; border-radius: var(--radius-card); background: var(--tone); color: var(--on-pastel-muted); }
.empty-state[data-tone] .doodle { width: min(240px, 80%); }
.empty-state[data-tone] a { color: var(--on-pastel); font-weight: 700; }

/* ---------- Passage and text pickers ---------- */

.source-panel { display: flex; flex-direction: column; gap: 14px; }
.passage-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.inline-check { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 0.9rem; font-weight: 500; }
.inline-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--foreground); }

.passage-list {
  display: grid;
  gap: 8px;
  max-height: min(480px, 62vh);
  padding: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.passage-list:empty { display: none; }

/* ---------- Read: the next read, the collection, how you'll read ---------- */

/* Hallmark · genre: playful · macrostructure: Split dashboard (work column, context column) · theme: Hum, re-keyed · design-system: DESIGN.md · designed-as-app
 * pre-emit critique: P5 H5 E4 S5 R4 V4
 * What, then go, then how: the next read and its Start lead the work
 * column; the collection is what you have, never a wall of locks; how
 * you'll read is the context column on desktop, under it on phones. */
[data-screen="read"] .hero { min-height: 190px; padding-block: 24px; }
[data-screen="read"] .hero .doodle { max-height: 140px; object-fit: contain; }
[data-screen="read"] .hero-text { padding-bottom: 0; align-self: center; }

.next-read { display: grid; gap: var(--space-4); }
.trail-card { display: grid; gap: 14px; padding: 22px; border-radius: var(--radius-card); background: var(--ink); color: var(--on-ink); }
.trail-card-chip { justify-self: start; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--on-ink) 14%, var(--ink)); color: var(--on-ink); font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.trail-card[data-state="next"] .trail-card-chip { background: var(--orange); color: var(--on-pastel); }
.trail-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.trail-card-head > .icon-tile { width: 60px; height: 60px; }
.trail-card-titles { display: grid; gap: 4px; min-width: 0; }
.trail-card-title { font-size: clamp(1.3rem, 4.2vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
.trail-card-meta { color: var(--on-ink-muted); font-size: 0.86rem; }
.trail-card-hook { margin: 0; padding-left: 14px; border-left: 3px solid var(--lilac); font: 400 1.08rem/1.55 var(--read-font, var(--font-read)); text-wrap: pretty; }
.trail-card-medal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--on-ink) 16%, transparent); color: var(--on-ink-muted); font-size: 0.8rem; }
.trail-card-medal-lead { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.trail-card-medal-item { display: inline-flex; align-items: center; gap: 6px; color: var(--on-ink); font-weight: 600; }

/* A flat coin in its metal with a star; the metal comes from [data-metal]. */
.trail-coin { position: relative; display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--metal); box-shadow: inset 0 0 0 1.5px var(--metal-deep); }
.trail-coin::after { content: ""; position: absolute; inset: 4px; background: var(--metal-deep); -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat; }

.next-read-go { display: grid; gap: 10px; }
.next-read-go .form-error:empty { display: none; }
/* On phones Start reading stays in view just above the tab bar, as Train's Start does. */
@media (max-width: 719px) {
  .screen[data-screen="read"] .next-read-go { position: sticky; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 2; padding: 10px 0 8px; background: var(--background); }
}
.setup-summary { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 10px; margin: 0; color: var(--muted-foreground); font-size: 0.86rem; font-weight: 600; text-align: center; }
button.text-link { border: 0; background: none; font: inherit; cursor: pointer; }
#setup-change { min-height: 44px; padding: 0 4px; color: var(--foreground); }
@media (min-width: 960px) {
  #setup-change { display: none; }
}

/* The collection: a bar per chapter, then what you have. */
.trail-shelf { display: grid; gap: var(--space-4); padding: 22px; border-radius: var(--radius-card); background: var(--surface); }
.trail-shelf h2 { font-size: 1.05rem; }
.trail-chapters { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.trail-chapter-bar { flex: var(--stops) 1 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 8px; min-width: 0; }
.trail-chapter-name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 0.82rem; font-weight: 700; }
.trail-chapter-name .icon { width: 12px; height: 12px; flex: none; }
.trail-chapter-count { color: var(--muted-foreground); font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.trail-chapter-track { grid-column: 1 / -1; position: relative; height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-raised); }
.trail-chapter-track::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--lilac); transform: scaleX(var(--share)); transform-origin: left; }
.trail-chapter-bar[data-state="locked"] { color: var(--muted-foreground); }
/* What's ahead is planned, and planned things are dashed. */
.trail-chapter-bar[data-state="locked"] .trail-chapter-track { background: transparent; outline: 1.5px dashed var(--surface-sunken); outline-offset: -1.5px; }

.trail-shelf-items { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 12px; padding: 4px 0 6px; }
.trail-free-options { display: grid; justify-items: start; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.trail-free-options .text-link, #trail-pro-link { min-height: 44px; text-align: left; white-space: normal; }
.source-panel > .pro-gate { margin-top: var(--space-4); }
.guide-options .guide-option-body strong { white-space: normal; }
.trail-sticker { position: relative; display: grid; place-items: center; width: 52px; height: 52px; cursor: pointer; }
.trail-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.trail-disc { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--lilac); color: var(--on-pastel); --icon-tint: var(--on-pastel-surface); box-shadow: 0 6px 14px -8px rgb(var(--shadow-color) / 0.5); transition: transform 0.2s var(--ease-out); }
.trail-disc .icon { width: 50%; height: 50%; }
.trail-sticker[data-metal] .trail-disc { box-shadow: 0 0 0 3px var(--metal), 0 6px 14px -8px rgb(var(--shadow-color) / 0.5); }
.trail-badge { position: absolute; right: -5px; bottom: -5px; width: 21px; height: 21px; box-shadow: inset 0 0 0 1.5px var(--metal-deep), 0 0 0 2px var(--surface); }
.trail-sticker[data-state="next"] .trail-disc { background: var(--surface-raised); color: var(--foreground); --icon-tint: var(--lilac); box-shadow: 0 0 0 3px var(--orange); }
.trail-next-chip { position: absolute; bottom: -10px; left: 50%; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--orange); color: var(--on-pastel); font-size: 0.66rem; font-weight: 800; transform: translateX(-50%); white-space: nowrap; }
.trail-sticker[data-state="done"]:has(.trail-input:checked) .trail-disc { outline: 2.5px solid var(--ink); outline-offset: 6px; }
.trail-sticker:has(.trail-input:focus-visible) .trail-disc { outline: 3px solid var(--ring); outline-offset: 5px; }
@media (hover: hover) {
  .trail-sticker:hover .trail-disc { transform: translateY(-2px); }
}
.trail-more { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: var(--radius-pill); color: var(--muted-foreground); font-size: 0.86rem; font-weight: 600; outline: 1.5px dashed var(--surface-sunken); outline-offset: -1.5px; }
.trail-more .icon { width: 16px; height: 16px; }
.trail-more[data-state="complete"] { outline: none; background: var(--yellow); color: var(--on-pastel); }
.trail-shelf-hint { margin: 0; font-size: 0.82rem; }

/* How you'll read: three ways side by side, then the guide as tiles that show what they do. */
.reading-modes .option-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reading-modes .option-card { display: grid; }
.reading-modes .option-card > span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; text-align: center; }
.reading-modes .option-card > span::after { display: none; }
.reading-modes .option-card .icon-tile { width: 40px; height: 40px; }
.reading-modes .option-card strong { font-size: 0.9rem; }
.reading-modes .option-card > span > span:last-child { font-size: 0.74rem; line-height: 1.35; }

.guide-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.guide-option { position: relative; display: grid; }
.guide-option input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.guide-option-body { display: grid; justify-items: center; gap: 8px; padding: 8px 8px 10px; border-radius: var(--radius-tile); background: var(--surface-raised); font-size: 0.82rem; transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.guide-option-body strong { font-weight: 700; white-space: nowrap; }
.guide-option input:hover + .guide-option-body { background: var(--surface-muted); }
.guide-option input:checked + .guide-option-body { background: var(--ink); color: var(--on-ink); }
.guide-option input:focus-visible + .guide-option-body { outline: 2px solid var(--ring); outline-offset: 3px; }
@media (max-width: 379px) {
  .guide-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Each tile's preview is a small working copy: a page of three lines and its guide. */
.guide-preview { position: relative; display: grid; align-content: center; gap: 7px; width: 100%; height: 50px; padding: 0 10%; overflow: hidden; border-radius: 10px; background: var(--surface); container-type: inline-size; }
.guide-option input:checked + .guide-option-body .guide-preview { background: var(--surface-raised); }
.gp-line { height: 4px; border-radius: 2px; background: var(--surface-sunken); }
.gp-line.short { width: 60%; }
.gp-ink { position: absolute; top: 18px; left: 10cqw; width: 70cqw; height: 4px; border-radius: 1px; background: var(--pencil-trail); opacity: var(--pencil-trail-opacity); transform: scaleX(0.6); transform-origin: left; }
.gp-tip { position: absolute; top: 14px; left: 10cqw; width: 6px; transform: translateX(42cqw); }
.guide-preview[data-preview="pen"] { align-content: start; padding-top: 10px; gap: 14px; }
.gp-glow { position: absolute; top: 9px; left: 8cqw; width: 22cqw; height: 10px; border-radius: 4px; background: var(--guide-glow); }
.gp-word { justify-self: center; font: 700 0.92rem/1 var(--read-font, var(--font-read)); }
.gp-word::before, .gp-word::after { content: ""; position: absolute; left: 50%; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: var(--periwinkle); }
.gp-word::before { top: 6px; }
.gp-word::after { bottom: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .guide-option input:checked + .guide-option-body .gp-ink { animation: gp-ink 2.4s linear infinite; }
  .guide-option input:checked + .guide-option-body .gp-tip { animation: gp-tip 2.4s linear infinite; }
  .guide-option input:checked + .guide-option-body .gp-glow { animation: gp-glow 2.4s var(--ease-out) infinite; }
}
@keyframes gp-ink { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gp-tip { from { transform: translateX(0); } to { transform: translateX(70cqw); } }
@keyframes gp-glow { 0%, 30% { transform: translateX(0); } 36%, 63% { transform: translateX(26cqw); } 69%, 100% { transform: translateX(52cqw); } }

/* The reading's reward on its result: the medal large, the way on under it. */
.trail-stamp { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 20px; padding: 22px; border-radius: var(--radius-card); background: var(--surface); }
.trail-stamp > .medal-art { --medal-size: 96px; }
.trail-stamp-text { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.trail-stamp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 5px; border-radius: var(--radius-pill); background: var(--metal-light); color: var(--on-pastel); font-size: 0.78rem; font-weight: 800; }
.trail-stamp-title { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
.trail-stamp-line { margin: 0; color: var(--muted-foreground); font-size: 0.88rem; }
.trail-stamp-next { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: var(--radius-container); background: var(--surface-raised); color: var(--foreground); text-decoration: none; transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out); }
.trail-stamp-next-words { display: grid; gap: 2px; flex: 1; min-width: 0; }
.trail-stamp-next-label { color: var(--muted-foreground); font-size: 0.76rem; font-weight: 600; }
.trail-stamp-next strong { font-size: 0.98rem; }
.trail-stamp-next > .icon { width: 20px; height: 20px; flex: none; color: var(--orange-deep); }
.trail-stamp-next:hover { background: var(--surface-muted); }
.trail-stamp[data-state="partial"] .trail-stamp-chip { padding-left: 10px; background: var(--surface-raised); color: var(--foreground); }
.trail-stamp[data-state="partial"] .trail-stamp-chip .icon { width: 14px; height: 14px; }
.trail-stamp-tile { width: 72px; height: 72px; }
.trail-stamp-next:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

@media (max-width: 479px) {
  .trail-card { padding: 18px; }
  .trail-card-head > :is(.icon-tile, .medal-art) { width: 48px; height: 48px; --medal-size: 48px; }
  .trail-shelf { padding: 18px 16px; }
  .trail-card-medal-lead:only-child { flex-basis: auto; }
  .trail-card-medal-lead { flex-basis: 100%; }
  .trail-stamp { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 22px 18px; }
  .trail-stamp-text { justify-items: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .trail-chapter-track::after { transition: transform 0.9s var(--ease-out); }
  .trail-sticker[data-state="next"] .trail-disc { animation: next-call 1.4s var(--ease-out) 0.3s 2; }
  .trail-sticker[data-fresh="done"] .trail-badge { animation: coin-stamp 0.7s var(--ease-spring) 0.2s both; }
  .trail-sticker[data-fresh="next"] .trail-disc { animation: sticker-pop 0.6s var(--ease-spring) 0.6s both, next-call 1.4s var(--ease-out) 1.2s 2; }
  .trail-stamp[data-first="true"] > .medal-art { animation: stamp-in 0.8s var(--ease-spring) 0.15s both; }
}
@keyframes next-call { from { box-shadow: 0 0 0 3px var(--orange), 0 0 0 3px var(--pen-halo); } to { box-shadow: 0 0 0 3px var(--orange), 0 0 0 16px transparent; } }
@keyframes coin-stamp { from { opacity: 0; transform: scale(2.4) rotate(-25deg); } }
@keyframes sticker-pop { from { opacity: 0; transform: scale(0.4); } }
@keyframes stamp-in { from { opacity: 0; transform: scale(1.5) rotate(-14deg); } }

.passage-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--radius-container);
  background: var(--surface);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.passage-row > input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.passage-row > .icon-tile { width: 48px; height: 48px; }
.passage-row > span:not(.badge):not(.icon-tile) { display: flex; flex-direction: column; min-width: 0; }
.passage-row strong { font-weight: 700; line-height: 1.35; }
.passage-meta { color: var(--muted-foreground); font-size: 0.84rem; }
.passage-row:hover { background: var(--surface-muted); }
.passage-row:has(input:checked) { background: var(--ink); color: var(--on-ink); }
.passage-row:has(input:checked) .passage-meta { color: var(--on-ink-muted); }
.passage-row:has(input:checked) .badge { background: color-mix(in srgb, var(--on-ink) 14%, var(--ink)); color: var(--on-ink); }
.passage-row:has(input:checked) .row-progress { background: color-mix(in srgb, var(--on-ink) 20%, var(--ink)); }
.passage-row:has(input:checked) .row-progress > span { background: var(--orange); }
.passage-row:has(input:checked) .button { color: var(--on-ink); }
.passage-row:has(input:checked) .button:hover { background: color-mix(in srgb, var(--on-ink) 14%, var(--ink)); }
.passage-row:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

.library-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.library-add { display: grid; gap: 12px; }
.library-add-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.file-button { cursor: pointer; }
.file-button:focus-within { outline: 2px solid var(--ring); outline-offset: 3px; }
.row-actions { display: flex; gap: 4px; align-items: center; }
.passage-row > span.row-actions { flex-direction: row; }
.row-progress { display: block; height: 5px; margin-top: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.row-progress > span { display: block; height: 100%; background: var(--foreground); border-radius: inherit; }
.field-optional { color: var(--muted-foreground); font-weight: 400; }
.field-label { color: var(--muted-foreground); font-size: 0.88rem; font-weight: 600; }

/* ---------- Today ---------- */

.today-head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-5); }
.today-head h1 { font-size: clamp(2.6rem, 11vw, 3.4rem); }
/* On phones the date and title share their row with a compact goal pill, so the header takes one row, not two. */
@media (max-width: 539px) {
  .today-head { flex-wrap: nowrap; align-items: center; gap: var(--space-3); }
  .today-head > div:first-child { min-width: 0; }
  .today-head .goal-meter { flex: none; gap: 8px; padding: 4px 14px 4px 4px; }
  .today-head .goal-ring { width: 40px; height: 40px; }
  .today-head .goal-ring svg { width: 31px; height: 31px; }
  .today-head .goal-label { font-size: 0.86rem; }
  .today-head .goal-link { font-size: 0.76rem; }
}
/* Too narrow for both: the pill goes under the title again. */
@media (max-width: 359px) {
  .today-head { flex-wrap: wrap; }
}

/* Today's minutes: a grey pill with the ring in a periwinkle circle, like the board's Progress card. */
.goal-meter { display: flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px; border-radius: var(--radius-pill); background: var(--surface); }
.goal-ring { position: relative; display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 50%; background: var(--periwinkle); }
.goal-ring svg { width: 42px; height: 42px; transform: rotate(-90deg); }
.goal-ring circle { fill: none; stroke-width: 6; }
.goal-ring-track { stroke: color-mix(in srgb, var(--on-pastel-surface) 60%, transparent); }
.goal-ring-fill { stroke: var(--on-pastel); stroke-linecap: round; transition: stroke-dasharray 0.8s var(--ease-out); }
.goal-ring-fill[stroke-dasharray^="0 "] { visibility: hidden; }
.goal-ring[data-reached="true"] { background: var(--orange); }
.goal-text { display: flex; flex-direction: column; gap: 0; }
.goal-label { font-weight: 700; font-variant-numeric: tabular-nums; }
.goal-link { color: var(--muted-foreground); font-size: 0.84rem; font-weight: 500; }
.goal-link:hover { color: var(--foreground); }

/* The goal reached: a star bursts from the ring, once. */
.goal-ring[data-reached="true"]::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  background: var(--foreground);
  -webkit-mask: var(--sparkle) center / contain no-repeat;
  mask: var(--sparkle) center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .goal-ring[data-reached="true"]::after { animation: star-burst 0.6s var(--ease-spring) both; }
  @keyframes star-burst { from { transform: scale(0) rotate(-45deg); opacity: 0; } }
}

.welcome .doodle { max-width: 280px; }

.profile-chip {
  display: inline-flex;
  width: fit-content;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--lilac-soft);
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 700;
}

/* Next up: the one ink card on Today. */
.next-up {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 18px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--on-ink-muted);
  box-shadow: 0 22px 40px -26px rgb(var(--shadow-color) / 0.7);
}
.next-up > :not(.next-up-art) { grid-column: 1; }
.next-up-art { grid-column: 2; grid-row: 1 / span 3; align-self: start; width: 84px; height: 84px; }
.next-up .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--on-ink) 14%, var(--ink));
  color: var(--on-ink);
  font-size: 0.8rem;
}
.next-up h2 { color: var(--on-ink); font: 700 clamp(1.45rem, 5vw, 1.75rem)/1.15 var(--font-display); letter-spacing: -0.03em; }
.next-up p:not(.eyebrow) { max-width: 46ch; }
.next-up .next-target { display: flex; align-items: center; gap: 8px; width: fit-content; color: var(--on-ink); font-size: 0.9rem; font-weight: 600; }
.next-up .next-target .icon { color: var(--orange); }
.next-up .button { justify-self: start; margin-top: 10px; grid-column: 1 / -1; }

@media (max-width: 479px) {
  .next-up { padding: 22px 20px; }
  .next-up-art { width: 64px; height: 64px; }
}

/*
 * The plan on a result screen: the ink card that carries the day on from
 * here, so the next step is one tap instead of a trip back to Today.
 */
.plan-next {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 18px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--on-ink-muted);
  box-shadow: 0 22px 40px -26px rgb(var(--shadow-color) / 0.7);
}
.plan-next[hidden] { display: none; }
.plan-next > :not(.plan-next-art) { grid-column: 1; }
.plan-next-art { grid-column: 2; grid-row: 1 / span 3; align-self: start; width: 72px; height: 72px; }
.plan-next .eyebrow {
  width: fit-content;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--on-ink) 14%, var(--ink));
  color: var(--on-ink);
  font-size: 0.8rem;
}
.plan-next h2 { color: var(--on-ink); font: 700 clamp(1.35rem, 4.6vw, 1.6rem)/1.15 var(--font-display); letter-spacing: -0.03em; }
.plan-next-detail { max-width: 46ch; }
.plan-next .next-target { display: flex; align-items: center; gap: 8px; width: fit-content; color: var(--on-ink); font-size: 0.9rem; font-weight: 600; }
.plan-next .next-target .icon { color: var(--orange); }
.plan-next > .plan-next-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.plan-next .text-link { color: var(--on-ink); }
/* One dot per step: done ones filled with a check, the next one ringed in orange. */
.plan-dots { list-style: none; display: flex; gap: 6px; margin: 2px 0 0; padding: 0; }
.plan-dots li { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--on-ink) 14%, var(--ink)); }
.plan-dots li[data-state="done"] { background: var(--orange); color: var(--on-pastel); }
.plan-dots li[data-state="next"] { box-shadow: inset 0 0 0 2px var(--orange); }
.plan-dots .icon { width: 13px; height: 13px; }
@media (max-width: 479px) {
  .plan-next { padding: 22px 20px; }
  .plan-next-art { width: 56px; height: 56px; }
}

.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.plan-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 10px 8px 8px;
  border-radius: var(--radius-card);
  background: var(--surface);
}

.plan-art { position: relative; flex: none; }
.plan-art .icon-tile { width: 54px; height: 54px; }
.plan-check {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--on-pastel);
  box-shadow: 0 0 0 3px var(--surface);
}
.plan-check .icon { width: 14px; height: 14px; }
.plan-item[data-met="false"] .plan-check { background: var(--surface-sunken); color: var(--foreground); }

.plan-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-text strong { font-weight: 700; line-height: 1.3; }
.plan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted-foreground); font-size: 0.84rem; }
.plan-meta .icon { width: 15px; height: 15px; }
.plan-role { display: inline-flex; align-items: center; gap: 4px; color: var(--foreground); font-weight: 600; }
.plan-outcome { display: flex; align-items: flex-start; gap: 6px; font-size: 0.84rem; color: var(--muted-foreground); }
.plan-outcome .icon { width: 15px; height: 15px; margin-top: 2px; }
.plan-item[data-met="true"] .plan-outcome { color: var(--success); }
.plan-item .button[data-size="icon"][data-variant="secondary"] { background: var(--ink); color: var(--on-ink); }
.plan-item .button[data-size="icon"][data-variant="secondary"]:hover { background: color-mix(in srgb, var(--ink) 82%, var(--background)); }
.plan-item[data-state="done"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border); }
.plan-item[data-state="done"] .plan-check { box-shadow: 0 0 0 3px var(--background); }
.plan-item[data-state="done"] .plan-text strong { color: var(--muted-foreground); }
.plan-item[data-state="done"] .plan-art .icon-tile { opacity: 0.75; }

/* The week: a periwinkle block with a white day strip, like the board. */
.week-card { display: grid; gap: 16px; padding: 20px; border-radius: var(--radius-card); background: var(--periwinkle); color: var(--on-pastel); }
.streak { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--on-pastel-muted); font-size: 0.9rem; font-weight: 500; }
.streak strong { display: inline-flex; align-items: center; gap: 6px; color: var(--on-pastel); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; }
.streak strong .icon { width: 24px; height: 24px; align-self: center; --icon-tint: var(--orange); }
.week-strip { list-style: none; margin: 0; padding: 12px 10px; display: flex; justify-content: space-between; gap: 2px; border-radius: var(--radius-pill); background: var(--on-pastel-surface); color: var(--on-pastel); }
.week-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.week-label { order: -1; color: var(--on-pastel-muted); font-size: 0.74rem; font-weight: 600; }
.week-day[data-today="true"] .week-label { color: var(--on-pastel); font-weight: 800; }
.week-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px dashed var(--on-pastel-faint); }
.week-dot .icon { width: 15px; height: 15px; }
.week-day[data-practised="true"] .week-dot { border: 0; background: var(--on-pastel); color: var(--on-pastel-surface); }
.week-day[data-today="true"] .week-dot { border: 2px solid var(--orange); }
.week-day[data-today="true"][data-practised="true"] .week-dot { border: 0; background: var(--orange); color: var(--on-pastel); }

/* ---------- Stats ---------- */

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Result screens: the first number is the headline, on an ink card. */
.stats:not([data-columns]) > .stat:first-child { grid-column: 1 / -1; padding: 22px 24px; background: var(--ink); color: var(--on-ink); }
.stats:not([data-columns]) > .stat:first-child .stat-label, .stats:not([data-columns]) > .stat:first-child .stat-note { color: var(--on-ink-muted); }
.stats:not([data-columns]) > .stat:first-child .stat-value { font-size: clamp(2.6rem, 12vw, 3.6rem); }

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 18px;
  border-radius: var(--radius-container);
  background: var(--surface);
}

.stat-label { color: var(--muted-foreground); font-size: 0.85rem; font-weight: 600; }
.stat-value { font: 800 clamp(1.4rem, 6vw, 1.85rem)/1.1 var(--font-num); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-note { color: var(--muted-foreground); font-size: 0.82rem; }

/* Accuracy colours describe this round only. Text names the result as well. */
[data-score-tone] { --score-value: var(--score-regular); --score-good: var(--success); --score-excellent: var(--score-gold); }
.stats:not([data-columns]) > .stat:first-child[data-score-tone] { --score-regular: var(--periwinkle); --score-good: var(--success-on-ink); --score-excellent: var(--score-gold-on-ink); }
[data-score-tone="good"] { --score-value: var(--score-good); }
[data-score-tone="gold"] { --score-value: var(--score-excellent); }
.stat[data-score-tone] .stat-value { color: var(--score-value); }
.score-caption { color: var(--on-ink); font-size: 0.95rem; font-weight: 700; }

.result-headline { font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.12; font-weight: 600; }

.stats[data-columns="3"] > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .stats[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats[data-columns="3"] > .stat:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------- Train ---------- */

.form-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
button.text-link { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }

/* Fine-tune: only for Custom, the level's parts one by one on a soft grey card. */
.fine-tune { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-container); background: var(--surface); }
.fine-tune-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.fine-tune-title .icon { width: 18px; height: 18px; color: var(--muted-foreground); }
.fine-tune :is(.select, .check-row) { background-color: var(--surface-raised); }

/*
 * How a drill works: its own page before the first session. Each step is a
 * small working copy of the drill's screen that plays on a loop: the cross,
 * the flash and its mask, then the right answer lighting up.
 */
.drill-intro { gap: var(--space-5); }
.intro-head { display: grid; justify-items: start; gap: var(--space-2); }
.intro-head .icon-tile { margin-bottom: var(--space-2); }
.intro-head h1 { font: 800 clamp(2rem, 8vw, 2.6rem)/1.05 var(--font-display); letter-spacing: -0.035em; }
.intro-steps { list-style: none; display: grid; gap: var(--space-3); margin: 0; padding: 0; }
.intro-step { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.intro-step-number { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 700 0.68rem/1 var(--font-num); }
.intro-step-text { display: grid; gap: 2px; }
.intro-step-text strong { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.intro-step-text span { color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.4; }
.intro-stage { display: grid; place-items: center; height: 96px; padding: 8px; overflow: hidden; border-radius: var(--radius-container); background: var(--surface); }
.intro-cross { color: var(--muted-foreground); font: 300 2.2rem/1 var(--font-ui); }
.intro-question { padding: 6px 12px; border-radius: var(--radius-pill); background: var(--periwinkle); color: var(--on-pastel); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.intro-flash { display: grid; place-items: center; }
.intro-flash > span { grid-area: 1 / 1; }
.intro-word { font: 700 1.5rem/1 var(--font-ui); letter-spacing: -0.03em; }
.intro-flash[data-length="long"] .intro-word { font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap; }
.intro-flash .intro-mask { width: 7em; height: 2.5em; font-size: 1rem; opacity: 0; }
.intro-cue { color: var(--muted-foreground); font: 300 2.2rem/1 var(--font-ui); opacity: 0; }
.intro-choices { display: grid; grid-template-columns: repeat(2, 36px); gap: 5px; }
.intro-choices[data-layout] { grid-template-columns: repeat(2, minmax(0, 48px)); }
.intro-choice { display: grid; place-items: center; height: 36px; border-radius: 10px; background: var(--surface-raised); font-size: 0.78rem; font-weight: 700; }
.intro-choices[data-layout="scenes"] .intro-choice { height: 44px; }
.intro-picture { width: 26px; height: 26px; }
.intro-choices .intro-choice .scene[data-kind] { --thing-size: 17px; gap: 0; }
.intro-tips { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-radius: var(--radius-container); background: var(--surface); }
.intro-tips h2 { font-size: 1rem; }
.intro-tips ul { display: grid; gap: 6px; margin: 0; padding-left: 1.1em; color: var(--muted-foreground); font-size: 0.92rem; line-height: 1.45; }
/* Pinned to the bottom, so Start and the skip choice show without scrolling past the steps. */
.intro-actions { display: grid; gap: var(--space-1); justify-items: center; text-align: center; }
.intro-skip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); color: var(--muted-foreground); font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.intro-skip:hover { background: var(--surface-muted); }
.intro-skip:has(input:checked) { color: var(--foreground); }
.intro-skip input { width: 20px; height: 20px; margin: 0; accent-color: var(--foreground); }
#intro-skip-note { max-width: 36ch; }
#intro-skip-note:empty { display: none; }
@media (max-width: 379px) {
  .intro-step { grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-3); }
  .intro-flash[data-length="long"] .intro-word { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .intro-cue { animation: intro-cue 2.8s steps(1, end) infinite; }
  .intro-word { animation: intro-word 2.8s steps(1, end) infinite; }
  .intro-mask { animation: intro-mask 2.8s steps(1, end) infinite; }
  .intro-choice[data-answer] { animation: intro-answer 2.8s var(--ease-out) infinite; }
  @keyframes intro-cue { 0% { opacity: 1; } 18% { opacity: 0; } 90% { opacity: 1; } }
  @keyframes intro-word { 0% { opacity: 0; } 18% { opacity: 1; } 34% { opacity: 0; } }
  @keyframes intro-mask { 0% { opacity: 0; } 34% { opacity: 1; } 90% { opacity: 0; } }
  @keyframes intro-answer {
    0%, 52% { box-shadow: none; background: var(--surface-raised); }
    60%, 92% { box-shadow: inset 0 0 0 2px var(--success); background: var(--success-muted); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-choice[data-answer] { box-shadow: inset 0 0 0 2px var(--success); background: var(--success-muted); }
}

.level-summary { color: var(--muted-foreground); font-size: 0.92rem; min-height: 1.5em; }

/* ---------- Session HUD ---------- */

.hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; color: var(--muted-foreground); font-size: 0.9rem; }
.hud strong { color: var(--foreground); font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-stat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--surface); white-space: nowrap; }
@media (max-width: 419px) {
  .hud { gap: 8px; font-size: 0.86rem; }
  .hud-stat { padding: 6px 11px; }
  .hud-label { display: none; }
  /* A steady session always says so: it is a different kind of session. */
  .hud-flash[data-trend="steady"] .hud-label { display: inline; }
}
/* The flash at its quickest yet this session: a green tint and a down arrow, the way better looks elsewhere. */
.hud-trend { display: none; width: 16px; height: 16px; }
.hud-flash[data-trend="faster"] { background: var(--success-muted); }
.hud-flash[data-trend="faster"] strong { color: var(--success); }
.hud-flash[data-trend="faster"] .hud-trend { display: block; color: var(--success); }
/* Right answers in a row, on orange like the streak on Today. */
.hud-streak { margin-left: auto; background: var(--orange); color: var(--on-pastel); font-weight: 700; }
.hud .hud-streak strong { color: var(--on-pastel); }
.hud-streak .icon { width: 18px; height: 18px; }
.hud-streak .icon [opacity] { fill: var(--on-pastel-surface); }
.hud-streak[hidden] { display: none; }
.hud-streak-label { display: none; }
@media (min-width: 480px) {
  .hud-streak-label { display: inline; }
}
@media (prefers-reduced-motion: no-preference) {
  .hud-streak[data-pop="true"] { animation: streak-pop 0.42s var(--ease-spring); }
  @keyframes streak-pop { 40% { transform: scale(1.14); } }
}
.hud-title { margin: 0; color: var(--muted-foreground); font: 600 0.9rem/1.4 var(--font-ui); letter-spacing: 0; }

.progress-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface); overflow: hidden; }
.progress-fill { height: 100%; width: 100%; border-radius: inherit; background: var(--periwinkle); transform: scaleX(0); transform-origin: left center; transition: transform 0.25s linear; }

/* ---------- Drill ---------- */

.drill { max-width: 720px; min-height: calc(100dvh - 48px); user-select: none; -webkit-user-select: none; gap: 14px; }

/* Keep the question immediately above the word and reserve the answer area. */
.trial-focus { display: grid; align-content: center; gap: 8px; min-width: 0; }
.drill > .trial-focus { flex: 1; min-height: 180px; }

.stage {
  position: relative;
  --trial-font-short: clamp(1.75rem, 8vw, 2.75rem);
  --trial-font-long: clamp(1.25rem, 5vw, 2rem);
  --trial-font-xlong: clamp(1rem, 3.6vw, 1.4rem);
  flex: none;
  height: 112px;
  min-height: 112px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 var(--trial-size, var(--trial-font-short))/1.3 var(--font-ui);
  letter-spacing: -0.02em;
  text-align: center;
  transition: none;
}

.stage[data-length="long"] { --trial-size: var(--trial-font-long); }
.stage[data-length="xlong"] { --trial-size: var(--trial-font-xlong); }
.stage[data-look="fixation"] { color: var(--muted-foreground); }
.stage[data-look="mask"] { color: var(--muted-foreground); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; }
/* Feedback belongs to the answer controls. The revealed word stays ink. */
.stage[data-look="correct"] { color: var(--foreground); }
.stage[data-look="wrong"] { color: var(--destructive); }

/* A cartoon cloud: crisp puffs and a solid horizontal cover. */
.liquid-mask { position: relative; display: inline-block; flex: 0 1 auto; width: var(--liquid-width); max-width: 100%; height: 2.9em; pointer-events: none; isolation: isolate; }
.mist-shell, .mist-body { position: absolute; inset: 0; display: block; }
.mist-body { overflow: hidden; background: var(--on-pastel-surface); -webkit-mask: var(--mist-envelope) center / 100% 100% no-repeat; mask: var(--mist-envelope) center / 100% 100% no-repeat; }
.cloud-outline { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cloud-puff { position: absolute; left: 1%; top: 58%; width: 0.23em; height: 0.23em; border: 1.8px solid var(--on-pastel); border-radius: 50%; background: var(--on-pastel-surface); }
.cloud-puff[data-side="right"] { left: 96%; top: 49%; width: 0.17em; height: 0.17em; }
.cloud-puff[data-side="small"] { left: 3%; top: 39%; width: 0.12em; height: 0.12em; border-width: 1.5px; }
.liquid-mask[data-state="revealing"] { position: absolute; margin: auto; inset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .liquid-mask:not(.intro-mask) .mist-shell { animation: mist-gather 650ms var(--ease-out) both; }
  .liquid-mask:not(.intro-mask) .cloud-puff { animation: cloud-puff-drift 3.2s linear infinite; }
  .liquid-mask:not(.intro-mask) .cloud-puff[data-side="right"] { animation-direction: reverse; animation-delay: -1.6s; }
  .liquid-mask:not(.intro-mask) .cloud-puff[data-side="small"] { animation-duration: 3.8s; animation-delay: -1s; }
  .liquid-mask[data-motion="paused"] :is(.mist-shell, .cloud-puff) { animation-play-state: paused; }
  .liquid-mask[data-state="revealing"] { animation: mist-dissolve 180ms var(--ease-out) both; }
  .intro-mask .mist-shell { animation: mist-intro 2.8s var(--ease-out) infinite; }
  @keyframes mist-gather {
    0% { transform: scale(0.78, 0.64); }
    100% { transform: none; }
  }
  @keyframes cloud-puff-drift {
    0% { opacity: 0; transform: translate(4px, 2px); }
    20% { opacity: 1; }
    75% { opacity: 0.8; }
    100% { opacity: 0; transform: translate(-8px, -4px); }
  }
  @keyframes mist-dissolve {
    0% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(-7%) scale(1.1, 1.16); }
  }
  @keyframes mist-intro {
    0%, 34% { transform: scale(0.78, 0.64); }
    41% { transform: scale(1.035, 1.1); }
    48%, 100% { transform: none; }
  }
}

.choices { --choice-height: clamp(88px, 25vw, 132px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: var(--choice-height); gap: 10px; min-height: 0; align-content: start; }
.choices[data-state="waiting"] > * { visibility: hidden; }
.choices[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
.choices[data-count="8"] { grid-template-columns: repeat(4, 1fr); gap: 8px; }

.choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  border: 0;
  border-radius: var(--radius-container);
  background: var(--surface);
  transition: box-shadow 0.15s var(--ease-out), background-color 0.15s var(--ease-out), opacity 0.15s, transform 0.12s var(--ease-press);
}

.choice:active { transform: translateY(2px) scale(0.98); }
.choice:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--foreground); }
.choice:disabled { cursor: default; opacity: 0.4; transform: none; }
.choice[data-state] { opacity: 1; }
.choice[data-state="correct"] { background: var(--success-muted); box-shadow: inset 0 0 0 2px var(--success); }
.choice[data-state="wrong"] { background: var(--destructive-muted); box-shadow: inset 0 0 0 2px var(--destructive); }

/* Word → Picture's pictures: bundled 3D-style illustrations, the same on every device. */
.choice-picture { display: block; width: clamp(2.8rem, 14vw, 4.2rem); max-width: 80%; height: auto; aspect-ratio: 1; pointer-events: none; -webkit-user-drag: none; }
.choices[data-count="6"] .choice-picture { width: clamp(3.1rem, 15vw, 4.6rem); }
.choices[data-count="8"] .choice-picture { width: clamp(2.5rem, 11vw, 3.8rem); }
.choice-key { position: absolute; top: 9px; left: 12px; font: 600 0.72rem/1 var(--font-mono); color: var(--muted-foreground); }

@media (min-width: 640px) {
  .choices, .choices[data-count="8"] { grid-template-columns: repeat(4, 1fr); }
  .choices[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
}

/* The question a drill asks before the flash ("Is it an animal?"). */
.drill-prompt {
  align-self: center;
  margin: 0;
  justify-self: center;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  background: var(--periwinkle);
  color: var(--on-pastel);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
}

/* Yes / No answers: two wide buttons, No on the left like the F key. */
.choices[data-layout="answers"] { --choice-height: 96px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice[data-kind="answer"] { min-height: 0; }
.choice-answer { font-size: clamp(1.4rem, 6vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; }
.choice[data-kind="answer"] .choice-key { top: 10px; left: 13px; }

/*
 * Scenes: painted things in a row, or two arranged above/below or side by
 * side. Each thing is an outlined sticker whose body takes its paint.
 */
.choices[data-layout="scenes"] { grid-template-columns: repeat(2, 1fr); }
.choice[data-kind="scene"] { min-height: 0; }
.scene { --thing-size: clamp(3.6rem, 18vw, 5rem); display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.scene[data-kind="row"][data-count="2"] { --thing-size: clamp(2.8rem, 14vw, 3.8rem); }
.scene[data-kind="row"][data-count="3"] { --thing-size: clamp(2.2rem, 10.5vw, 3rem); }
.scene[data-kind="row"][data-count="4"] { --thing-size: clamp(1.75rem, 8.2vw, 2.4rem); gap: 0; }
.scene[data-kind="pair"] { --thing-size: clamp(2.6rem, 12.5vw, 3.4rem); }
.scene[data-axis="horizontal"] { --thing-size: clamp(2.4rem, 11vw, 3.2rem); }
.scene[data-axis="vertical"] { flex-direction: column; gap: 2px; }
.scene[data-axis="horizontal"] { gap: 8px; }
.scene-thing { width: var(--thing-size); height: var(--thing-size); flex: none; color: var(--foreground); }
.scene-thing [opacity] { fill: var(--paint); opacity: 1; }
.scene-thing[data-paint="red"] { --paint: var(--paint-red); }
.scene-thing[data-paint="orange"] { --paint: var(--paint-orange); }
.scene-thing[data-paint="yellow"] { --paint: var(--paint-yellow); }
.scene-thing[data-paint="green"] { --paint: var(--paint-green); }
.scene-thing[data-paint="blue"] { --paint: var(--paint-blue); }
.scene-thing[data-paint="purple"] { --paint: var(--paint-purple); }

@media (min-width: 640px) {
  .choices[data-layout="scenes"] { grid-template-columns: repeat(4, 1fr); }
}

.paused-panel {
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px;
  border-radius: var(--radius-card);
  background: var(--surface);
}

.paused-panel p { color: var(--muted-foreground); }

.missed-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.missed-word { padding: 7px 16px; border-radius: var(--radius-pill); background: var(--surface); font-size: 0.94rem; font-weight: 600; }
.missed-word[data-picture] { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; }
.missed-picture { width: 30px; height: 30px; flex: none; }
.missed-word .scene { --thing-size: 26px; gap: 0; padding-left: 4px; }
.missed-word .scene[data-axis="vertical"] { --thing-size: 18px; }
.missed-word .scene[data-kind="row"][data-count="3"], .missed-word .scene[data-kind="row"][data-count="4"] { --thing-size: 18px; }

/* ---------- Reading ---------- */

.reading-page {
  width: 100%;
  max-width: var(--read-measure, 62ch);
  margin: 0 auto;
  padding: 30px 28px;
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1.5px var(--border);
  font: 400 var(--read-size, 1.18rem)/var(--read-leading, 1.7) var(--read-font, var(--font-read));
  letter-spacing: var(--read-tracking, 0em);
  word-spacing: calc(var(--read-tracking, 0em) * 2);
  font-optical-sizing: auto;
}

.reading-page p + p { margin-top: 1em; }
.reading-page[data-state="covered"] { filter: blur(8px); user-select: none; pointer-events: none; }

/* The reading desk (the speed test, and any reading at your own pace): the reading sky, still, with the text on a
 * sheet that sits in a light tray, the passage's own title in the reading face, and while covered, a card that says how
 * the timed read goes. Nothing on the desk moves while the clock runs, so the time is the reading's own. */
body[data-active-screen="reading"] { background: var(--sky); }
.reading-desk { position: relative; isolation: isolate; gap: var(--space-4); max-width: 820px; color: var(--foreground); }
.desk-bar { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.desk-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin: 0 auto 0 0; font: 700 0.95rem/1.2 var(--font-ui); letter-spacing: -0.01em; white-space: nowrap; }
.desk-label .icon { width: 20px; height: 20px; }
.desk-timing { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 13px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--foreground); font: 700 0.82rem/1 var(--font-ui); white-space: nowrap; box-shadow: 0 6px 16px -10px rgb(var(--shadow-color) / 0.5); }
.desk-timing .icon { width: 16px; height: 16px; color: var(--orange-deep); }
.desk-quit { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 15px 0 12px; border: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--on-scene) 9%, transparent); color: var(--on-scene); font: 700 0.88rem/1 var(--font-ui); white-space: nowrap; cursor: pointer; transition: background-color 0.2s var(--ease-out); }
.desk-quit .icon { width: 16px; height: 16px; }
.desk-quit:hover { background: color-mix(in srgb, var(--on-scene) 16%, transparent); }
.desk-quit:focus-visible { outline: 2px solid var(--on-scene); outline-offset: 2px; }
.desk-quit[data-state="armed"] { background: var(--destructive); color: var(--background); }
/* The sheet: the page on white (the raised surface in dark mode) in a soft grey tray, the same on every reading screen. */
.desk-sheet { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; padding: 8px; border-radius: calc(var(--radius-card) + 8px); background: color-mix(in srgb, var(--surface-sunken) 60%, transparent); }
.sheet-page { width: var(--read-measure, 62ch); max-width: 100%; margin: 0; padding: clamp(26px, 6vw, 48px) clamp(22px, 6vw, 52px) clamp(30px, 6vw, 56px); border-radius: var(--radius-card); background: var(--surface-raised); color: var(--foreground); font: 400 var(--read-size, 1.18rem)/var(--read-leading, 1.7) var(--read-font, var(--font-read)); box-shadow: 0 28px 56px -34px rgb(var(--shadow-color) / 0.65); }
/* In paced reading the page inside the sheet is the guide's own box: no card of its own. */
.sheet-page .pacer-page, .sheet-page .rsvp-stage { width: auto; max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.reading-head { display: grid; gap: 6px; margin-bottom: 1.3em; padding-bottom: 1.1em; border-bottom: 1px solid var(--border); }
.reading-meta { margin: 0; color: var(--muted-foreground); font: 600 0.82rem/1.3 var(--font-ui); }
.reading-title { margin: 0; color: var(--foreground); font: 600 clamp(1.55rem, 5.2vw, 2.1rem)/1.15 var(--read-font, var(--font-read)); letter-spacing: -0.015em; font-optical-sizing: auto; }
.reading-body p + p { margin-top: 1em; }
.reading-body[data-state="covered"] { filter: blur(7px); opacity: 0.5; user-select: none; pointer-events: none; }
.reading-cover { position: absolute; top: clamp(150px, 34%, 260px); left: 50%; display: grid; justify-items: start; gap: 8px; width: min(400px, calc(100% - 40px)); padding: 24px 24px 26px; border-radius: var(--radius-card); background: var(--surface-raised); color: var(--foreground); box-shadow: 0 24px 60px -28px rgb(var(--shadow-color) / 0.7); transform: translateX(-50%); }
.reading-cover .icon-tile { width: 52px; height: 52px; margin-bottom: 4px; }
.reading-cover-title { margin: 0; font: 800 1.4rem/1.2 var(--font-ui); letter-spacing: -0.025em; }
.reading-cover-line { margin: 0; color: var(--muted-foreground); font-size: 0.96rem; line-height: 1.5; }
.reading-desk[data-state="visible"] .reading-cover { display: none; }
/* Still, whatever the motion setting: the desk measures. */
.reading-desk .reading-sky::before, .reading-desk .reading-sky::after { animation: none; }
/* The way on floats over the sheet on its own: a fade behind it would paint a box over the page. */
.reading-desk .desk-actions { width: 100%; max-width: 440px; margin-inline: auto; background: none; }
/* After the read, the score guess and the questions stay on the desk: the same scene, the work on white sheets. */
body:is([data-active-screen="predict"], [data-active-screen="quiz"]) { background: var(--sky); }
.predict .predict-body { width: 100%; max-width: 520px; margin-inline: auto; padding: clamp(28px, 6vw, 44px) clamp(20px, 5vw, 40px); border-radius: var(--radius-card); background: var(--surface-raised); color: var(--foreground); box-shadow: 0 28px 56px -34px rgb(var(--shadow-color) / 0.65); }
[data-screen="quiz"] .quiz-question { background: var(--surface-raised); color: var(--foreground); box-shadow: 0 18px 40px -30px rgb(var(--shadow-color) / 0.6); }
[data-screen="quiz"] .quiz-option:hover, [data-screen="quiz"] .quiz-option:has(input:checked) { background: var(--surface); }
@media (prefers-reduced-motion: no-preference) {
  /* The page clears as the clock starts: quick, so the reading time is the reader's own. */
  .reading-body { transition: filter 0.18s var(--ease-out), opacity 0.18s var(--ease-out); }
}
@media (max-width: 479px) {
  .desk-sheet { padding: 5px; border-radius: calc(var(--radius-card) + 5px); }
  .desk-label span { font-size: 0.9rem; }
  /* Paced reading's bar also holds the pace and the sky: the label keeps just its icon. */
  .player .desk-label span { display: none; }
}

.sticky-actions {
  position: sticky;
  bottom: 0;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, var(--background) 32%);
}

.rsvp-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  align-content: center;
  min-height: 46vh;
  font: 600 clamp(2.2rem, 9.5vw, 3.4rem)/1.2 var(--read-font, var(--font-ui));
  letter-spacing: calc(var(--read-tracking, 0em) - 0.01em);
  white-space: pre;
}

.rsvp-stage::before, .rsvp-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 3px;
  height: 14px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--periwinkle);
}

.rsvp-stage::before { top: calc(50% - 50px); }
.rsvp-stage::after { top: calc(50% + 36px); }
.rsvp-before { text-align: right; }
.rsvp-pivot { color: var(--destructive); }
.rsvp-after { text-align: left; }
.rsvp-stage[data-pivot="false"] { grid-template-columns: 1fr; text-align: center; white-space: normal; }
.rsvp-stage[data-pivot="false"] .rsvp-pivot { color: var(--foreground); }
.rsvp-stage[data-pivot="false"]::before, .rsvp-stage[data-pivot="false"]::after { display: none; }

.player[data-mode="rsvp"] .pacer-page { display: none; }
.player[data-mode="pacer"] .rsvp-stage { display: none; }

/* The paced page: the words never change; one guide moves over them. */
.pacer-page { position: relative; isolation: isolate; }
.pacer-page:has(> .guide[data-guide="pen"]) { --reading-pen-height: 7cm; padding-bottom: var(--reading-pen-height); }
.pacer-page p > span { transition: color 0.4s var(--ease-out); }
.pacer-page p > span.is-read { color: var(--muted-foreground); }
.guide { position: absolute; inset: 0; pointer-events: none; clip-path: inset(-4px -16px -40px -16px); }
.guide[data-guide="pen"] { z-index: 1; }
.guide-pen, .guide-glow { position: absolute; top: 0; left: 0; }
.guide-pen, .guide-ink { transition-property: none; }
/* The nib is the guide's origin; the barrel rests below the text. */
.guide-ink { stroke: var(--pen-ink); stroke-width: 1.5px; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.pen-illustration[data-skin="pencil"] .guide-ink { stroke-opacity: var(--pencil-trail-opacity); }
.guide-pen { width: calc(var(--reading-pen-height) * 28 / 160); }
.pen-illustration, .pen-illustration svg { display: block; width: 100%; }
.pen-illustration svg { overflow: visible; }
.pen-illustration { transform: translate(-50%, -0.625%); }
.guide[data-state="playing"] .guide-pen { will-change: transform; }
.guide-glow { z-index: -1; border-radius: 8px; background: var(--guide-glow); filter: blur(3px); transform-origin: top left; transition-property: none; }
.guide-glow-trail { opacity: 0; }
.guide[data-state="playing"] .guide-glow { will-change: transform, opacity; }

/* The player: one row of HUD, the page, a dock of controls under the thumb. */
.player { position: relative; isolation: isolate; }
.player .hud { flex-wrap: nowrap; gap: 6px; }
.player .hud-title { flex: 1; min-width: 0; overflow: hidden; font-size: 0.98rem; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 359px) {
  /* Too narrow for a useful title: it stays for screen readers, and the controls get the room. */
  .player .hud-title { flex: 1 1 0; width: 0; color: transparent; }
}
.hud-toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted-foreground); cursor: pointer; transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.hud-toggle .icon { width: 22px; height: 22px; }
.hud-toggle:hover { background: var(--surface); color: var(--foreground); }
.hud-toggle[aria-pressed="true"] { background: var(--lilac); color: var(--on-pastel); --icon-tint: var(--on-pastel-surface); }
.hud-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* Ready, set: the hint floats just above Play, where the eye already is, and leaves when reading starts. */
.player { gap: var(--space-4); }
.player-guide-hint { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 2; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 8px 16px; border-radius: var(--radius-container); background: var(--ink); color: var(--on-ink); font-size: 0.86rem; font-weight: 600; text-align: center; transform: translateX(-50%); transition: opacity 0.2s var(--ease-out); }
.player[data-state="playing"] .player-guide-hint, .player[data-checking="true"] .player-guide-hint { opacity: 0; pointer-events: none; }

/* Done before the guide's end: one small question, above the dock. */
.finish-check { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: grid; justify-items: center; gap: 8px; width: min(380px, calc(100% - 32px)); padding: 18px 18px 8px; border-radius: var(--radius-card); background: var(--ink); color: var(--on-ink); text-align: center; transform: translateX(-50%); box-shadow: 0 18px 40px -20px rgb(var(--shadow-color) / 0.6); }
.finish-check[hidden] { display: none; }
.finish-check-title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.finish-check-line { margin: 0; color: var(--on-ink-muted); font-size: 0.86rem; }
.finish-check-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.finish-check .text-link { min-height: 44px; color: var(--on-ink); }
.finish-check .button:focus-visible, .finish-check .text-link:focus-visible { outline-color: var(--on-ink); }
@media (prefers-reduced-motion: no-preference) {
  .finish-check:not([hidden]) { animation: finish-check-in 0.22s var(--ease-out); }
}
@keyframes finish-check-in { from { opacity: 0; transform: translate(-50%, 8px); } }
.player .player-controls { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 6px; border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: 0 16px 34px -18px rgb(var(--shadow-color) / 0.6), inset 0 0 0 1px var(--border); }
.player .player-controls .button[data-variant="secondary"] { min-width: 48px; height: 48px; padding-inline: 12px; background: transparent; box-shadow: none; }
.player .player-controls .button[data-variant="secondary"]:hover { background: var(--surface); }
.player #player-toggle { min-width: 116px; height: 52px; }
@media (max-width: 420px) {
  .player .player-controls { width: 100%; }
  .player .player-controls .button { flex: 1 1 0; min-width: 0; padding-inline: 4px; }
  .player .player-controls #player-toggle { flex-grow: 1.7; min-width: 0; }
}

/* The calm sky: a quiet grey with Read's lilac sparkles at the edges, around every reading. In paced reading they
 * drift (still while paused) and Calm sky can switch them off; on the reading desk they hold still, since it measures. */
body:has(#player[data-sky="true"]:not([hidden])) { background: var(--sky); }
.reading-sky { display: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.player[data-sky="true"] .reading-sky, .reading-desk .reading-sky { display: block; }
.reading-sky::before, .reading-sky::after { content: ""; position: absolute; inset: -40px 0; background: var(--sky-sparkle); }
.reading-sky::before {
  opacity: 0.6;
  -webkit-mask: var(--sparkle) 5% 14% / 22px no-repeat, var(--ring-dot) 11% 44% / 10px no-repeat, var(--sparkle) 4% 78% / 16px no-repeat, var(--sparkle) 95% 22% / 18px no-repeat, var(--ring-dot) 90% 58% / 12px no-repeat, var(--sparkle) 96% 88% / 24px no-repeat;
  mask: var(--sparkle) 5% 14% / 22px no-repeat, var(--ring-dot) 11% 44% / 10px no-repeat, var(--sparkle) 4% 78% / 16px no-repeat, var(--sparkle) 95% 22% / 18px no-repeat, var(--ring-dot) 90% 58% / 12px no-repeat, var(--sparkle) 96% 88% / 24px no-repeat;
}
.reading-sky::after {
  opacity: 0.35;
  -webkit-mask: var(--sparkle) 15% 30% / 12px no-repeat, var(--sparkle) 9% 96% / 10px no-repeat, var(--ring-dot) 84% 8% / 9px no-repeat, var(--sparkle) 86% 72% / 13px no-repeat, var(--ring-dot) 3% 62% / 8px no-repeat;
  mask: var(--sparkle) 15% 30% / 12px no-repeat, var(--sparkle) 9% 96% / 10px no-repeat, var(--ring-dot) 84% 8% / 9px no-repeat, var(--sparkle) 86% 72% / 13px no-repeat, var(--ring-dot) 3% 62% / 8px no-repeat;
}
.player[data-sky="true"] .progress-track { background: var(--surface-raised); }
/* The pace chip is grey like the sky around it: on the sky it turns white, so it still reads as a chip. */
.player .hud-stat { background: var(--surface-raised); }
.player .progress-fill { background: var(--lilac); }
.player[data-state="paused"] .reading-sky::before, .player[data-state="paused"] .reading-sky::after { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  .player .reading-sky::before { animation: sky-drift 26s var(--ease-in-out) infinite alternate; }
  .player .reading-sky::after { animation: sky-drift 34s var(--ease-in-out) infinite alternate-reverse; }
}
@keyframes sky-drift { from { transform: translate3d(0, 20px, 0); } to { transform: translate3d(0, -20px, 0); } }

.player-controls {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr;
  gap: 8px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--background);
}

.player-controls .button { gap: 4px; padding-inline: 4px; font-family: var(--font-num); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
#player-toggle[data-state="paused"] .when-playing, #player-toggle[data-state="playing"] .when-paused { display: none; }
@media (max-width: 479px) {
  .control-label { display: none; }
}

/* ---------- Quiz & review ---------- */

.quiz { display: grid; gap: 12px; }

.quiz-question {
  margin: 0;
  padding: 20px;
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 0;
  border-radius: var(--radius-container);
  background: var(--surface);
}

.quiz-question legend { float: left; width: 100%; padding: 0 0 8px; font-weight: 700; }
.quiz-question legend + * { clear: both; }

.quiz-option {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  padding: 11px 14px;
  border-radius: var(--radius-input);
  transition: background-color 0.15s var(--ease-out);
}

.quiz-option:hover { background: var(--surface-raised); }
.quiz-option:has(input:checked) { background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--foreground); }
.quiz-option input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--foreground); }
.quiz-option[data-unsure] { color: var(--muted-foreground); }

.review { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.review-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 16px 18px;
  border-radius: var(--radius-container);
  background: var(--surface);
}

.review-mark { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-raised); color: var(--muted-foreground); }
.review-mark .icon { width: 18px; height: 18px; }
.review-item[data-state="correct"] .review-mark { background: var(--success-muted); color: var(--success); }
.review-item[data-state="wrong"] .review-mark { background: var(--destructive-muted); color: var(--destructive); }
/* A question's kind: Read's lilac, the pastel's dark words, its icon with a white fill layer. */
.review-kind { background: var(--lilac); color: var(--on-pastel); --icon-tint: var(--on-pastel-surface); }
.review-kind .icon { flex: none; width: 14px; height: 14px; }
.review-prompt { font-weight: 700; }
.review-prompt .badge { margin-right: 4px; vertical-align: 1px; }
.review-answer { color: var(--muted-foreground); font-size: 0.92rem; }

/* ---------- Predict & comprehension breakdown ---------- */

.predict { min-height: calc(100dvh - 48px); }
.predict-body { margin-block: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.predict-question { max-width: 20ch; font-size: clamp(1.7rem, 6vw, 2.3rem); line-height: 1.15; }
.predict-body .hint { max-width: 40ch; }
.predict-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.predict-pill {
  min-width: 60px;
  min-height: 60px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--foreground);
  font: 800 1.3rem/1 var(--font-num);
  cursor: pointer;
  transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out), transform 0.12s var(--ease-press);
}

.predict-pill:hover { background: var(--periwinkle); color: var(--on-pastel); }
.predict-pill:active { transform: translateY(2px); }
.predict-pill:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

.kind-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kind-bar { display: grid; grid-template-columns: minmax(84px, 9rem) 1fr auto; align-items: center; gap: 12px; }
.kind-bar-name { font-weight: 600; }
.kind-bar-track { height: 12px; border-radius: var(--radius-pill); background: var(--surface); overflow: hidden; }
.kind-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--foreground); }
.kind-bar-score { color: var(--muted-foreground); font: 600 0.9rem var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }

.calibration { margin: 6px 0 0; padding: 14px 16px; border-radius: var(--radius-input); background: var(--surface); font-size: 0.94rem; }
.calibration[data-verdict="over"] { box-shadow: inset 4px 0 0 var(--destructive); }
.calibration[data-verdict="calibrated"] { box-shadow: inset 4px 0 0 var(--success); }
.calibration[hidden] { display: none; }

/* ---------- Training pace ---------- */

.pace-card {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: var(--radius-container);
  background: var(--yellow);
  color: var(--on-pastel);
}

.pace-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pace-card-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; }
.pace-card-label .icon { width: 22px; height: 22px; --icon-tint: var(--on-pastel-surface); }
.pace-card-value { font: 800 1.5rem/1 var(--font-num); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pace-card-reason { margin: 0; color: var(--on-pastel-muted); font-size: 0.9rem; }
.pace-card .inline-check { color: var(--on-pastel); font-weight: 600; }
.pace-card .inline-check input { accent-color: var(--on-pastel); }

/* ---------- Skim challenge ---------- */

.skim { min-height: calc(100dvh - 48px); }
.skim-clock { margin-left: auto; margin-right: 12px; font: 800 1.1rem/1 var(--font-num); font-variant-numeric: tabular-nums; }
.skim-clock[data-urgent="true"] { color: var(--destructive); }
.skim-bar { transform: scaleX(1); transition: transform 0.1s linear; background: var(--orange); }
.skim-primer { display: grid; gap: 14px; padding: 26px; border-radius: var(--radius-card); background: var(--surface); }
.skim-primer .icon-tile { width: 60px; height: 60px; }
.skim-primer h2 { margin: 0; font: 700 1.5rem/1.2 var(--font-display); letter-spacing: -0.03em; }
.skim-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.skim-steps strong { font-weight: 700; }
.skim-timeup { align-self: center; margin: 0; padding: 10px 24px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-weight: 700; }

/* ---------- Progress ---------- */

.progress-content { display: flex; flex-direction: column; gap: var(--space-7); }
.progress-content[hidden] { display: none; }

.progress-columns { display: grid; gap: var(--space-7); }
@media (min-width: 960px) {
  .progress-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); align-items: start; }
}

.profile-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 26px;
  border-radius: var(--radius-card);
  background: var(--lilac);
  color: var(--on-pastel-muted);
}
.profile-card > .icon-tile { width: 84px; height: 84px; }
.profile-body { display: grid; gap: 8px; min-width: 0; }
.profile-card h2 { color: var(--on-pastel); font: 700 clamp(1.5rem, 5vw, 1.85rem)/1.15 var(--font-display); letter-spacing: -0.03em; }
.profile-card p:not(.profile-chip) { max-width: 60ch; }
.profile-card .profile-chip { background: var(--on-pastel-surface); color: var(--on-pastel); }
.profile-card .text-link { color: var(--on-pastel); }
@media (max-width: 479px) {
  .profile-card { flex-direction: column; gap: 14px; padding: 22px; }
  .profile-card > .icon-tile { width: 68px; height: 68px; }
}

/* The progress story: the answer to "am I getting better?", first on Progress. */
.story-card { display: grid; gap: 18px; padding: 26px; border-radius: var(--radius-card); background: var(--surface); }
.story-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px 18px; }
.story-head > .icon-tile { grid-row: span 3; width: 64px; height: 64px; }
.story-eyebrow { background: var(--yellow-soft); }
.story-title { font: 700 clamp(1.3rem, 4.6vw, 1.7rem)/1.2 var(--font-display); letter-spacing: -0.03em; max-width: 30ch; }
.story-detail { color: var(--muted-foreground); font-size: 0.92rem; max-width: 56ch; }
.story-figures { display: grid; gap: 2px; }
.story-figure-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; }
.story-figure { display: grid; gap: 2px; margin: 0; }
.story-figure-label { color: var(--muted-foreground); font-size: 0.8rem; font-weight: 600; }
.story-figure-value { font: 800 2.1rem/1 var(--font-num); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.story-figure[data-role="then"] .story-figure-value { color: var(--muted-foreground); font-size: 1.6rem; }
.story-figure[data-role="now"] .story-figure-value { font-size: clamp(2.6rem, 11vw, 3.4rem); }
.story-arrow { width: 22px; height: 22px; margin-bottom: 8px; color: var(--muted-foreground); }
.story-unit { color: var(--muted-foreground); font-size: 0.86rem; }
.story-body { display: grid; gap: 18px; }
@media (min-width: 720px) { .story-body { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 32px; } }
.story-spark { position: relative; height: 64px; margin: 6px 6px 6px 0; }
.story-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.story-spark-line { fill: none; stroke: var(--series-1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.story-spark-start { stroke: var(--muted-foreground); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.6; vector-effect: non-scaling-stroke; }
.story-spark-end { position: absolute; right: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--series-1); transform: translate(50%, -50%); }
.story-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.story-chips .trend-chip { font-size: 0.8rem; padding: 5px 12px; }
.story-drivers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.story-driver { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-tile); background: var(--surface-raised); }
.story-driver dt { color: var(--muted-foreground); font-size: 0.78rem; font-weight: 600; }
.story-driver dd { margin: 0; font-weight: 800; font-size: 1.02rem; }
.story-driver[data-trend="better"] dd { color: var(--success); }
.story-next { display: grid; gap: 10px; padding-top: 16px; border-top: 1px dashed var(--surface-sunken); }
.story-next p { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; }
.story-next .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--orange-deep); }
.story-dots { list-style: none; margin: 0 0 0 28px; padding: 0; display: flex; gap: 8px; }
.story-dots li { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--surface-sunken); }
.story-dots li[data-done] { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--on-pastel); }
@media (max-width: 479px) {
  .story-card { padding: 22px 20px; }
  .story-head > .icon-tile { width: 52px; height: 52px; }
}

.inline-details { font-size: 0.86rem; }
.inline-details summary { font-size: 0.86rem; color: var(--muted-foreground); }
.inline-details[open] { flex-basis: 100%; }
.inline-details[open] > summary { margin-bottom: 8px; }

/* "This week" or "Since you started": one grid at a time. */
.numbers-panel { display: grid; gap: 12px; }
.numbers:has(#numbersView-week:checked) [data-panel="start"],
.numbers:has(#numbersView-start:checked) [data-panel="week"] { display: none; }

/* The numbers as tiles: three pastels and a grey, each colour its own surface. */
.overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
@media (min-width: 960px) { .overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.metric { display: flex; flex-direction: column; }
.metric .stat-value { font-size: 1.6rem; }
.metric:not(:nth-child(4n)) { background: var(--tile); color: var(--on-pastel); }
.metric:nth-child(4n + 1) { --tile: var(--periwinkle); }
.metric:nth-child(4n + 2) { --tile: var(--yellow); }
.metric:nth-child(4n + 3) { --tile: var(--lilac); }
.metric:not(:nth-child(4n)) .stat-label, .metric:not(:nth-child(4n)) .stat-note { color: var(--on-pastel-muted); }
/* Trend chips: better is green; a dip stays neutral, information rather than a warning. */
.trend-chip { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; width: fit-content; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; background: var(--surface-raised); color: var(--muted-foreground); }
.trend-chip .icon { width: 13px; height: 13px; }
.trend-chip[data-trend="better"] { background: var(--success-muted); color: var(--success); }
.metric .trend-chip { margin-top: 10px; }
.metric:not(:nth-child(4n)) .trend-chip { background: var(--on-pastel-surface); color: var(--on-pastel-muted); }
.metric:not(:nth-child(4n)) .trend-chip[data-trend="better"] { color: var(--on-pastel-success); }

.range-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px 10px 20px; border-radius: 30px; background: var(--surface); width: fit-content; max-width: 100%; }

.chart-pickers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.chart-pickers .segmented:empty, .chart-pickers .segmented[hidden] { display: none; }

.chart { position: relative; padding: 18px 14px 12px; border-radius: var(--radius-container); background: var(--surface); }
.chart-title { color: var(--muted-foreground); font-size: 0.88rem; font-weight: 500; }
.chart-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.chart-svg:focus { outline: none; }
.chart-svg:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.chart-grid line { stroke: var(--surface-sunken); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-grid text { fill: var(--muted-foreground); font: 500 11px var(--font-num); font-variant-numeric: tabular-nums; }
.chart-line { fill: none; stroke: var(--line); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-end { fill: var(--orange); stroke: var(--line); stroke-width: 2; }
.chart-end-label { fill: var(--foreground); font: 700 12px var(--font-num); font-variant-numeric: tabular-nums; }
.chart-crosshair { stroke: var(--muted-foreground); stroke-width: 1; }
.chart-legend { display: flex; gap: 16px; padding: 0 8px 6px; font-size: 0.85rem; color: var(--muted-foreground); }

.chart-legend-item::before, .chart-tooltip-row::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--line);
  border-radius: 2px;
}

.chart-tooltip {
  position: absolute;
  top: 8px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  padding: 9px 12px;
  border-radius: var(--radius-input);
  background: var(--surface-raised);
  box-shadow: 0 10px 24px -10px rgb(var(--shadow-color) / 0.45), 0 0 0 1px var(--border);
  font-size: 0.82rem;
}

.chart-tooltip-label { color: var(--muted-foreground); }
.chart-tooltip-row { font: 700 0.85rem var(--font-num); color: var(--foreground); font-variant-numeric: tabular-nums; }
.chart-tooltip-name { font-family: var(--font-ui); font-weight: 400; color: var(--muted-foreground); }

.chart-reference line { stroke: var(--muted-foreground); stroke-width: 1; stroke-dasharray: 4 4; }
.chart-reference text { fill: var(--muted-foreground); font: 500 11px var(--font-ui); }
.chart-quadrant text { fill: var(--muted-foreground); font: 700 11px var(--font-ui); opacity: 0.75; }
.scatter-hit { fill: transparent; }
.scatter ~ .chart-tooltip .chart-tooltip-row::before { display: none; }
.scatter-dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }
.scatter-latest .scatter-dot { fill: var(--orange); stroke: var(--foreground); }
.scatter-point.is-active .scatter-dot { stroke: var(--foreground); stroke-width: 2.5; }
.scatter-legend .scatter-key::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--series-1); vertical-align: 0; }
.scatter-legend .scatter-key:nth-child(1)::before { opacity: 0.3; }
.scatter-legend .scatter-key:nth-child(3)::before { background: var(--orange); box-shadow: 0 0 0 1.5px var(--foreground); }

.table-wrap { overflow-x: auto; border-radius: var(--radius-container); background: var(--surface); }
.table-wrap:has(> table[hidden]) { display: none; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 12px 16px; white-space: nowrap; }
td { font-variant-numeric: tabular-nums; }
th { color: var(--muted-foreground); font-size: 0.8rem; font-weight: 600; border-bottom: 1px solid var(--border); }
tbody tr + tr td { border-top: 1px solid var(--grid); }

.heatmap-wrap { display: flex; flex-direction: column; gap: 10px; max-width: 100%; overflow-x: auto; padding: 20px; border-radius: var(--radius-container); background: var(--surface); }
.heatmap { display: grid; grid-template-rows: repeat(7, 14px); grid-auto-flow: column; grid-auto-columns: 14px; gap: 4px; width: max-content; }
.heatmap-day, .heatmap-legend span { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-sunken); }
.heatmap-day[data-future] { background: transparent; box-shadow: inset 0 0 0 1px var(--surface-sunken); }
.heatmap-day[data-level="1"], .heatmap-legend span[data-level="1"] { background: color-mix(in srgb, var(--periwinkle) 45%, var(--surface-sunken)); }
.heatmap-day[data-level="2"], .heatmap-legend span[data-level="2"] { background: var(--periwinkle); }
.heatmap-day[data-level="3"], .heatmap-legend span[data-level="3"] { background: var(--foreground); }
.heatmap-legend { display: flex; align-items: center; gap: 4px; color: var(--muted-foreground); font-size: 0.8rem; }

.bests { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.best { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 14px; align-items: center; padding: 10px 18px 10px 10px; border-radius: var(--radius-container); background: var(--surface); }
.best > .icon-tile { grid-row: span 2; }
.best-label { color: var(--foreground); font-size: 0.92rem; font-weight: 600; }
.best-value { grid-column: 3; grid-row: 1 / span 2; font: 800 1.1rem var(--font-num); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.best-date { grid-column: 2; color: var(--muted-foreground); font-size: 0.8rem; }
.best-date:empty { display: none; }

.history-details { display: flex; flex-direction: column; gap: 10px; }
/* A grey row that opens in place: detail one tap away (Today's plan). */
.more-row > summary { justify-content: space-between; width: 100%; padding: 18px 22px; border-radius: var(--radius-container); background: var(--surface); font-size: 1rem; font-weight: 700; }
.more-row > summary:hover { background: var(--surface-muted); text-decoration: none; }
.more-row-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.more-row-title .section-meta { font-weight: 600; }
/* Everything past the story, the skills and two insights: one tap away, so Progress opens on what matters. */
.more-row[open] > summary { margin-bottom: var(--space-5); }

/* Progress in three parts: where you are now, what's improving, and the details as topic tiles, each opening its own page. */
.progress-part { display: flex; flex-direction: column; gap: var(--space-4); }
.part-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.screen[data-view="overview"] [data-progress-view="topic"],
.screen[data-view="topic"] [data-progress-view="overview"] { display: none; }

/* What's improving: good news only, grey tiles with the number's icon on its place's pastel. */
.improving-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.improving-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon name value" "icon note note"; align-items: center; gap: 2px 14px; padding: 14px 18px 14px 14px; border-radius: var(--radius-container); background: var(--surface); color: var(--foreground); }
.improving-item > .icon-tile { grid-area: icon; width: 46px; height: 46px; }
.improving-value { grid-area: value; font: 800 1.3rem/1.1 var(--font-num); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.improving-name { grid-area: name; font-weight: 700; font-size: 0.95rem; }
.improving-note { grid-area: note; color: var(--muted-foreground); font-size: 0.82rem; line-height: 1.4; }
.improving-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius-container); background: var(--surface); color: var(--muted-foreground); font-size: 0.92rem; line-height: 1.5; }
.improving-empty[hidden] { display: none; }
.improving-empty .icon-tile { width: 48px; height: 48px; }

/* More details: five topic tiles, the landing page's bento in Progress. Three on pastels, two on grey with their icon tile. */
.topic-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.progress-tiles > [data-topic="skills"] { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .topic-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .progress-tiles > [data-topic="skills"] { grid-column: span 2; }
}
/* The month plan's three tiles: two side by side on phones, the rhythm under them. */
@media (max-width: 719px) {
  .month-tiles > [data-topic="rhythm"] { grid-column: 1 / -1; }
}

/* The month plan's views: the overview, a topic page (#month/skills, #month/days), and the rhythm under the month's header (#month/rhythm). */
.screen[data-view="overview"] [data-month-view]:not([data-month-view~="overview"]),
.screen[data-view="skills"] [data-month-view]:not([data-month-view~="skills"]),
.screen[data-view="days"] [data-month-view]:not([data-month-view~="days"]),
.screen[data-view="rhythm"] [data-month-view]:not([data-month-view~="rhythm"]) { display: none; }
.screen[data-screen="month"]:not([data-view="overview"]) .split { display: flex; flex-direction: column; }
.month-back { align-self: flex-start; }
/* On its own page a topic's name is the page's heading, so the section's own heading is only read out. */
.screen[data-view="days"] #month-days-title,
.screen[data-view="skills"] #month-skills-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.topic-tile { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 148px; padding: 18px 18px 20px; border-radius: var(--radius-card); background: var(--surface); color: var(--foreground); text-decoration: none; transition: background-color 0.15s var(--ease-out), transform 0.25s var(--ease-spring); }
.topic-tile[data-tone] { background: var(--tone); color: var(--on-pastel); }
.topic-tile .icon-tile { width: 48px; height: 48px; }
.topic-tile[data-tone] .icon-tile { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.topic-text { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-right: 22px; }
.topic-text strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.topic-teaser { color: var(--muted-foreground); font-size: 0.84rem; line-height: 1.4; }
.topic-tile[data-tone] .topic-teaser { color: var(--on-pastel-muted); }
.topic-teaser:empty { display: none; }
.topic-arrow { position: absolute; right: 16px; bottom: 20px; width: 20px; height: 20px; }
.topic-tile:not([data-tone]):hover { background: var(--surface-muted); }
.topic-tile[data-tone]:focus-visible { outline-color: var(--on-pastel); }
@media (pointer: fine) {
  .topic-tile:hover { transform: translateY(-2px); }
}

/* A topic's own page: the way back, its icon and name, then its content. */
.progress-topic-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.progress-topic-title { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.progress-topic-title .icon-tile { width: 64px; height: 64px; }
.progress-topic-title h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
.progress-topic-title .lead { margin-top: 4px; }
.progress-topic { display: grid; gap: var(--space-6); }
.progress-topic[hidden] { display: none; }
.history-details .table-wrap { margin-bottom: 8px; }

/* Skill map: one row per skill, on its own scale. */
.skill-map { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.skill-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; padding: 16px 18px 16px 14px; border-radius: var(--radius-container); background: var(--surface); }
.skill-row > .icon-tile { grid-row: span 3; }
.skill-row > :not(.icon-tile) { grid-column: 2; }
.skill-head { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name value" "chips chips"; align-items: baseline; gap: 4px 12px; }
.skill-name { grid-area: name; font-weight: 700; }
.skill-value { grid-area: value; font: 800 1.1rem var(--font-num); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.skill-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; }
.status-chip, .focus-chip { padding: 2px 10px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; background: var(--surface-raised); color: var(--muted-foreground); }
.skill-row[data-status="strong"] .status-chip { background: var(--success-muted); color: var(--success); }
.skill-row[data-status="unknown"] .status-chip { background: transparent; box-shadow: inset 0 0 0 1px var(--surface-sunken); }
/* Today's focus is information, not an alarm: Train's periwinkle, like the month plan's Your focus chip. */
.focus-chip { background: var(--periwinkle); color: var(--on-pastel); }
.skill-track { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--surface-raised); overflow: hidden; }
.skill-track::before, .skill-track::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--surface-sunken); z-index: 1; }
.skill-track::before { left: var(--focus-mark); }
.skill-track::after { left: var(--strong-mark); }
.skill-fill { display: block; height: 100%; border-radius: inherit; background: var(--foreground); }
.skill-row[data-status="unknown"] .skill-track { background: repeating-linear-gradient(135deg, var(--surface-sunken) 0 6px, transparent 6px 10px); }
.skill-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.skill-evidence { color: var(--muted-foreground); font-size: 0.84rem; }
.skill-link, .insight-link { flex: none; color: var(--foreground); font-size: 0.85rem; font-weight: 600; }

.insights { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.insight { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 16px 18px 16px 14px; border-radius: var(--radius-container); background: var(--surface); }
.insight[data-tone="watch"] .insight-mark { background: var(--destructive-muted); color: var(--destructive); }
.insight[data-tone="good"] .insight-mark { background: var(--success-muted); color: var(--success); }
.insight-body { display: grid; gap: 2px; min-width: 0; }
.insight-body p { margin: 0; color: var(--muted-foreground); font-size: 0.88rem; }
.insight-link { align-self: center; }
@media (max-width: 479px) {
  .insight { grid-template-columns: auto minmax(0, 1fr); }
  .insight-link { grid-column: 2; justify-self: start; }
}

/* ---------- Settings ---------- */

.settings-form { gap: var(--space-4); }
.app-header .tab-bar { margin-left: auto; }
.header-actions { display: flex; align-items: center; gap: 10px; }
:is(.settings-link, .medals-link) { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--foreground); box-shadow: inset 0 0 0 1.5px var(--border); transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out); }
:is(.settings-link, .medals-link) svg { width: 22px; height: 22px; }
:is(.settings-link, .medals-link):hover { background: var(--surface); box-shadow: none; }
:is(.settings-link, .medals-link)[aria-current="page"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
/* Medals earned, on a gold sticker. */
.medals-count {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--on-pastel);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2.5px var(--background);
}
/* Medals you haven't looked at yet: a still orange ring, like today's dot in the week. It never pulses: the header stays calm. */
.medals-count[data-new="true"] { box-shadow: 0 0 0 2.5px var(--background), 0 0 0 5px var(--orange); }
.display-pickers { display: grid; gap: 14px; }
.display-picker { display: grid; gap: 6px; }
.display-preview { margin: 4px 0 0; box-shadow: none; }
.reminder-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.reminder-row .field { width: 9rem; }
.danger-zone { display: grid; gap: 8px; justify-items: start; margin-top: 8px; padding-top: 16px; border-top: 1.5px dashed var(--surface-sunken); }
/* Account: sign in or create one, then the save status. Its form and the
   preferences form stack at the same spacing as the cards inside them. */
.settings-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* Settings as a hub: the account, then grey rows with each section's coloured icon and its current value; a row opens the section as its own page (#settings/<section>). */
.screen[data-view="hub"] [data-settings-view="section"],
.screen[data-view="section"] [data-settings-view="hub"],
.screen[data-view="hub"] [data-settings-section],
.screen[data-view="section"] [data-settings-section]:not([data-active]) { display: none; }
/* The membership row shows only while the membership section does (billing configured). */
.screen:has(#settings-billing[hidden]) .settings-rows [data-row="billing"] { display: none; }
.settings-hub { display: flex; flex-direction: column; gap: var(--space-3); }
.settings-hub-title { margin-top: var(--space-3); color: var(--muted-foreground); font-size: 0.86rem; font-weight: 700; }
.settings-rows { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 6px; border-radius: var(--radius-card); background: var(--surface); }
.settings-rows > li + li { border-top: 1px solid var(--surface-sunken); }
.settings-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px 10px 10px; border-radius: 20px; color: var(--foreground); text-decoration: none; transition: background-color 0.15s var(--ease-out); }
.settings-row:hover { background: var(--surface-muted); }
.settings-row .icon-tile { width: 44px; height: 44px; }
.settings-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-row-text strong { font-weight: 700; }
.settings-row-value { color: var(--muted-foreground); font-size: 0.86rem; }
.settings-row-value:empty { display: none; }
.settings-row-arrow { width: 18px; height: 18px; color: var(--muted-foreground); }
.settings-page-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.settings-page-title { display: flex; align-items: center; gap: 16px; }
.settings-page-title .icon-tile { width: 56px; height: 56px; }
.settings-page-title h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
/* On its own page the section's name is the page's heading, so its card drops the legend (still read out). */
.screen[data-view="section"] [data-settings-section] > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.account-panel { display: grid; gap: var(--space-4); }
#billing-plan-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#billing-plan-picker .segmented-option span { white-space: normal; }
.pro-intro { min-width: 0; padding: var(--space-5); border-radius: var(--radius-card); background: var(--lilac); color: var(--on-pastel); }
.pro-intro h2 { margin: var(--space-3) 0; color: var(--on-pastel); font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 500; letter-spacing: -0.03em; }
.pro-intro .badge { background: var(--on-pastel-surface); color: var(--on-pastel); }
.pro-intro p { color: var(--on-pastel-muted); }
.pro-benefits { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.pro-benefits li { display: grid; gap: 4px; }
.pro-benefits strong { font-size: 0.96rem; }
.pro-benefits span { color: var(--muted-foreground); font-size: 0.86rem; }
.pro-plan-details .pro-comparison { margin-top: var(--space-3); }
.pro-comparison { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: 0.88rem; text-align: left; }
.pro-comparison th, .pro-comparison td { padding: 12px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: normal; }
.pro-comparison th:first-child { padding-left: 0; }
.pro-comparison th[scope="row"] { font-weight: 600; }
.pro-comparison th[scope="col"]:not(:first-child) { width: 3.5rem; }
.pro-comparison .icon { width: 20px; height: 20px; vertical-align: middle; }
.pro-comparison th[scope="col"]:not(:first-child), .pro-comparison td { text-align: center; }
.pro-comparison td:last-child { font-weight: 800; }
.pro-comparison small { display: block; margin-top: 4px; color: var(--muted-foreground); font-size: 0.8rem; font-weight: 400; }
.pro-actions { display: grid; gap: var(--space-3); }
.pro-actions .button { width: 100%; white-space: normal; }
.pro-gate { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-card); background: var(--surface); }
.pro-gate h2 { font-size: 1.3rem; }
.pro-gate .text-link { min-height: 44px; }
.pro-reminder { position: relative; margin: var(--space-5) 0; padding: var(--space-5); border-radius: var(--radius-card); background: var(--surface); color: var(--foreground); }
.pro-reminder h2 { max-width: 22ch; padding-right: 28px; font-size: 1.25rem; font-weight: 500; line-height: 1.4; }
.pro-reminder p { margin: var(--space-3) 0 var(--space-4); color: var(--muted-foreground); font-size: 0.9rem; }
.pro-reminder-close { position: absolute; top: 8px; right: 8px; }
.pro-reminder-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pro-reminder-actions .button { white-space: normal; }
.pro-reminder-choices { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: var(--space-2); }
.pro-reminder-choices .text-link { min-height: 44px; font-size: 0.8rem; }
.fieldset > legend .badge { margin-left: 2px; }
.input[aria-invalid="true"] { border-color: var(--destructive); }
.account-who { overflow-wrap: break-word; }
.account-email { display: block; color: var(--muted-foreground); }
.account-status { display: flex; align-items: flex-start; gap: 8px; color: var(--muted-foreground); font-size: 0.94rem; }
.account-status .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.account-status[data-state="saved"] .icon { color: var(--success); }
.account-status:is([data-state="error"], [data-state="outdated"]) .icon { color: var(--destructive); }

/* ---------- Science ---------- */

/* Science in five groups; each topic is a closed grey row (icon and title) that opens on its summary and evidence. */
.science-group { display: flex; flex-direction: column; gap: var(--space-3); }
.science-group > .hint { margin: 0 0 var(--space-1); }

.science-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border-radius: var(--radius-card);
  background: var(--surface);
  scroll-margin-top: 16px;
}
.science-head { display: flex; align-items: center; gap: 16px; }
.science-head .icon-tile { width: 56px; height: 56px; }
.science-head :is(h2, h3) { font: 700 1.35rem/1.2 var(--font-display); letter-spacing: -0.03em; }
.science-topic { padding: 12px 20px 12px 12px; transition: background-color 0.15s var(--ease-out); }
.science-topic[open] { padding-bottom: 24px; }
.science-topic > summary { list-style: none; cursor: pointer; }
.science-topic > summary::-webkit-details-marker { display: none; }
.science-topic > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--ease-out); }
.science-topic[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.science-topic:not([open]):hover { background: var(--surface-muted); }
.science-topic .science-head .icon-tile { width: 44px; height: 44px; }
.science-topic .science-head h3 { font-size: 1.08rem; letter-spacing: -0.02em; }
.science-summary { font-size: 1.02rem; max-width: 60ch; }
.evidence { color: var(--muted-foreground); }
.evidence summary { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--foreground); font-size: 0.88rem; font-weight: 600; list-style: none; }
.evidence summary::-webkit-details-marker { display: none; }
.evidence summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--ease-out); }
.evidence[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.evidence summary:hover { background: var(--surface-muted); }
.evidence[open] { display: grid; gap: 12px; }
.evidence[open] > summary { margin-bottom: 2px; }
.evidence p, .evidence li { max-width: 62ch; font-size: 0.94rem; }
.evidence ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.evidence strong { color: var(--foreground); }
.limit { padding: 12px 16px; border-radius: var(--radius-input); background: var(--yellow-soft); color: var(--foreground); }
.sources { font-size: 0.85rem; }

@media (max-width: 479px) {
  .science-section:not(.science-topic) { padding: 20px; }
  .science-head .icon-tile { width: 46px; height: 46px; }
}

/* ---------- Medals ---------- */

/*
 * A medal: a metal rim with a highlight, a shadow and beads, an enamel
 * centre in the colour of its place, the icon, and an ink banner with a
 * star per tier. The metal is set by data-metal; a locked medal is grey.
 */
.medal-art {
  --medal-size: 76px;
  --metal-light: var(--gold-light);
  --metal: var(--gold);
  --metal-deep: var(--gold-deep);
  display: inline-grid;
  flex: none;
  width: var(--medal-size);
  height: var(--medal-size);
  position: relative;
}
[data-metal="silver"] { --metal-light: var(--silver-light); --metal: var(--silver); --metal-deep: var(--silver-deep); }
[data-metal="bronze"] { --metal-light: var(--bronze-light); --metal: var(--bronze); --metal-deep: var(--bronze-deep); }
[data-metal="gold"] { --metal-light: var(--gold-light); --metal: var(--gold); --metal-deep: var(--gold-deep); }
[data-metal="platinum"] { --metal-light: var(--platinum-light); --metal: var(--platinum); --metal-deep: var(--platinum-deep); }
[data-metal="diamond"] { --metal-light: var(--diamond-light); --metal: var(--diamond); --metal-deep: var(--diamond-deep); }
.medal-face { display: block; width: 100%; height: 100%; overflow: visible; }
.m-rim { fill: var(--metal); stroke: var(--on-pastel); stroke-width: 5; }
.m-rim-light, .m-rim-dark { fill: none; stroke-width: 9; stroke-linecap: round; }
.m-rim-light { stroke: var(--metal-light); }
.m-rim-dark { stroke: var(--metal-deep); opacity: 0.45; }
.m-bead { fill: var(--metal-deep); }
.m-enamel { fill: var(--tone); stroke: var(--on-pastel); stroke-width: 5; }
.m-gloss { fill: none; stroke: var(--on-pastel-surface); stroke-opacity: 0.55; stroke-width: 6; stroke-linecap: round; }
.m-icon { color: var(--on-pastel); }
.m-icon [opacity] { fill: var(--on-pastel-surface); opacity: 1; }
.m-banner-pill { fill: var(--on-pastel); }
.m-star { fill: var(--metal-light); }
.m-facet { fill: var(--metal-light); stroke: var(--metal-deep); stroke-width: 0.6; }
.medal-art[data-finish="foil"] .m-enamel { fill: color-mix(in srgb, var(--tone) 60%, var(--metal-light)); }
.medal-art[data-finish="holographic"] .m-enamel { fill: var(--diamond-light); }
.medal-art:not(.coin)[data-finish="holographic"]::after,
.medal-art:not(.coin)[data-finish="foil"]::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; pointer-events: none; opacity: 0.3; mix-blend-mode: soft-light; }
.medal-art:not(.coin)[data-finish="foil"]::after { background: linear-gradient(125deg, var(--metal-light), transparent 30%, var(--metal-light) 46%, var(--metal-deep) 70%, var(--metal-light)); }
.medal-art:not(.coin)[data-finish="holographic"]::after { background: conic-gradient(from 35deg, var(--periwinkle), var(--lilac), var(--yellow), var(--platinum), var(--periwinkle)); mix-blend-mode: color; opacity: 0.7; }
.m-secret text { font: 800 64px/1 var(--font-ui); fill: var(--muted-foreground); }

/* Locked: the same medal in grey, its icon faint, no shine. */
.medal-art[data-state="locked"] { --metal: var(--surface-muted); --metal-deep: var(--surface-sunken); --tone: var(--surface-raised); }
.medal-art[data-state="locked"] :is(.m-rim, .m-enamel) { stroke: var(--surface-sunken); }
.medal-art[data-state="locked"] :is(.m-rim-light, .m-rim-dark, .m-gloss) { display: none; }
.medal-art[data-state="locked"] .m-icon { color: var(--muted-foreground); opacity: 0.5; }
.medal-art[data-state="locked"] .m-icon [opacity] { fill: var(--surface-muted); }
.medal-art[data-state="locked"] .m-secret { opacity: 1; }

/*
 * The coin you can turn: two faces and an edge of stacked discs in 3D.
 * --ry and --rx come from medalCoin.js; --sheen moves a band of light
 * across the face as it turns. Metal is the one place with a gradient.
 */
.coin-stage {
  --coin-size: 200px;
  --thick: calc(var(--coin-size) * 0.07);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--coin-size);
  height: var(--coin-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  perspective: 900px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.coin-stage[data-dragging] { cursor: grabbing; }
.coin-stage:focus-visible { outline-offset: 10px; border-radius: 50%; }
.coin { --medal-size: 100%; position: relative; display: block; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.coin-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.coin-front { transform: translateZ(calc(var(--thick) / 2)); }
.coin-back {
  inset: 1.5%;
  align-content: center;
  gap: 2px;
  padding: 16%;
  background: var(--metal);
  box-shadow: inset 0 0 0 calc(var(--coin-size) * 0.024) var(--on-pastel), inset 0 0 0 calc(var(--coin-size) * 0.1) var(--metal), inset 0 0 0 calc(var(--coin-size) * 0.11) var(--metal-deep);
  color: var(--on-pastel);
  text-align: center;
  text-shadow: 0 1px 0 var(--metal-light);
  transform: rotateY(180deg) translateZ(calc(var(--thick) / 2));
}
.coin-back-brand { font-size: calc(var(--coin-size) * 0.05); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.coin-back > [class^="coin-back-"] { position: relative; z-index: 1; }
.coin-back > :is(.coin-foil, .coin-sheen) { inset: 0; }
.coin[data-finish="holographic"] .coin-back { background: var(--diamond-light); }
.coin-back-name { color: var(--on-pastel); font-size: calc(var(--coin-size) * 0.1); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-shadow: none; }
.coin-back-tier { font-size: calc(var(--coin-size) * 0.06); font-weight: 700; }
.coin-back-date { font-size: calc(var(--coin-size) * 0.05); font-weight: 600; }
.coin-edge { position: absolute; inset: 1.5%; border-radius: 50%; background: var(--metal-deep); transform: translateZ(calc(var(--layer) * var(--thick))); }
.coin-edge:nth-child(even) { background: color-mix(in srgb, var(--metal-deep) 70%, var(--metal)); }
.coin-edge:first-child, .coin-edge:nth-child(12) { background: var(--on-pastel); }
.coin-sheen {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background: linear-gradient(105deg, transparent 36%, color-mix(in srgb, var(--on-pastel-surface) 70%, transparent) 50%, transparent 64%) var(--sheen, 50%) 0 / 300% 100% no-repeat;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.coin-foil { display: none; position: absolute; inset: 4%; border-radius: 50%; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.55; transform: rotate(var(--foil-angle, 0deg)); }
.coin[data-finish="foil"] .coin-foil { display: block; background: conic-gradient(from 25deg, var(--metal-light), var(--metal-deep), var(--metal-light), var(--metal), var(--metal-light)); }
.coin[data-finish="holographic"] .coin-foil { display: block; background: conic-gradient(from 35deg, var(--periwinkle), var(--lilac), var(--yellow), var(--platinum), var(--periwinkle)); mix-blend-mode: color; opacity: 0.8; }
.coin[data-finish="holographic"] .coin-sheen { opacity: 0.85; mix-blend-mode: screen; }
.coin-orbits { position: absolute; inset: -10%; pointer-events: none; }
.coin-orbit { position: absolute; inset: calc(var(--orbit-index) * -8%); border: 1px solid color-mix(in srgb, var(--metal-light) 36%, transparent); border-radius: 50%; transform: rotate(calc(var(--orbit-index) * 65deg)); }
.coin-orbit .icon { position: absolute; top: 9%; left: 13%; width: 21px; height: 21px; color: var(--metal-light); }
/* Overhead shafts cross the coin face, ending before the result text. */
.coin-spotlight {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 16%;
  width: min(1100px, 150vw);
  height: clamp(480px, 75svh, 960px);
  pointer-events: none;
  transform: translateX(-50%) rotate(-4deg);
  transform-origin: 50% 0;
  background: conic-gradient(from 155deg at 50% 0%, transparent 0deg 10deg, color-mix(in srgb, var(--metal-light) 30%, transparent) 11deg 15deg, transparent 16deg 26deg, color-mix(in srgb, var(--metal-light) 22%, transparent) 27deg 31deg, transparent 32deg);
  -webkit-mask: linear-gradient(transparent, #000 15% 60%, transparent 98%);
  mask: linear-gradient(transparent, #000 15% 60%, transparent 98%);
}
.celebration[data-rarity="5"] .coin-spotlight {
  background: conic-gradient(from 155deg at 50% 0%, transparent 0deg 5deg, color-mix(in srgb, var(--periwinkle) 38%, transparent) 6deg 10deg, transparent 11deg 17deg, color-mix(in srgb, var(--lilac) 32%, transparent) 18deg 22deg, transparent 23deg 29deg, color-mix(in srgb, var(--platinum-light) 38%, transparent) 30deg 34deg, transparent 35deg 40deg, color-mix(in srgb, var(--yellow) 28%, transparent) 41deg 44deg, transparent 45deg);
}
.coin-shadow { position: absolute; bottom: -22px; left: 22%; right: 22%; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--on-pastel) 24%, transparent); filter: blur(6px); }
.coin-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; }
.coin-hint .icon { width: 18px; height: 18px; }

/*
 * The celebration: a dark stage that fills the screen, slow rays behind
 * the coin, sparkles flying out, then the words, Pip and one button.
 */
.celebration {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--stage);
  color: var(--on-stage);
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.celebration[open] { display: grid; place-items: center; }
.celebration::backdrop { background: var(--stage); }
.celebration-confetti { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.celebration-lighting { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; isolation: isolate; }
.confetti-bit { position: absolute; border-radius: 50%; }
.confetti-bit[data-shape="sparkle"] { border-radius: 0; -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat; }
.confetti-bit[data-shape="ring"] { -webkit-mask: var(--ring-dot) center / contain no-repeat; mask: var(--ring-dot) center / contain no-repeat; }
.confetti-bit[data-shape="dot"] { scale: 0.55; }
.celebration-body {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 440px);
  padding: calc(36px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.celebration-eyebrow { padding: 6px 16px; border-radius: var(--radius-pill); background: var(--metal); color: var(--on-pastel); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.01em; }
.celebration-coin { position: relative; z-index: -1; display: grid; place-items: center; margin: 22px 0 14px; }
.celebration-coin .coin-stage { --coin-size: min(var(--reward-coin-size, 220px), 74vw); }
.celebration[data-rarity="1"] .celebration-lighting::before { display: none; }
.celebration[data-rarity="1"] .celebration-lighting::after { opacity: 0.35; }
.celebration[data-rarity="2"] .celebration-lighting::before { opacity: 0.45; }
.celebration[data-rarity="4"] { --reveal-lag: 0.35s; }
.celebration[data-rarity="5"] { --reveal-lag: 0.65s; }
.celebration:is([data-rarity="4"], [data-rarity="5"]) .celebration-coin { margin-block: 44px 34px; }
.celebration[data-rarity="5"] .celebration-lighting::after { width: 440px; height: 440px; background: radial-gradient(closest-side, color-mix(in srgb, var(--diamond) 48%, transparent), transparent); }
/* Rays and a glow, centred on the coin wherever it lands. */
.celebration-lighting::before, .celebration-lighting::after { content: ""; position: absolute; left: 50%; top: var(--light-centre-y, 35%); z-index: -1; border-radius: 50%; pointer-events: none; translate: -50% -50%; }
.celebration-lighting::before {
  --ray-diameter: clamp(820px, 145vw, 3400px);
  width: var(--ray-diameter);
  height: var(--ray-diameter);
  background: repeating-conic-gradient(color-mix(in srgb, var(--metal-light) 20%, transparent) 0deg 8deg, transparent 8deg 22.5deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 15%, transparent 90%);
  mask: radial-gradient(circle closest-side, #000 15%, transparent 90%);
}
.celebration-lighting::after { width: 340px; height: 340px; background: radial-gradient(closest-side, color-mix(in srgb, var(--metal) 38%, transparent), transparent); }
/* Platinum keeps one soft light shaft; diamond splits its light into a spectrum. */
.celebration[data-rarity="4"] .celebration-lighting::before {
  --ray-diameter: clamp(700px, 125vw, 3400px);
  background: linear-gradient(125deg, transparent 36%, color-mix(in srgb, var(--metal-light) 24%, transparent) 49%, transparent 62%);
  animation: none;
}
.celebration[data-rarity="4"] .celebration-lighting::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--metal) 30%, transparent), transparent); }
.celebration[data-rarity="5"] .celebration-lighting::before {
  background: conic-gradient(from 20deg, var(--periwinkle), var(--lilac), var(--orange), var(--yellow), var(--platinum), var(--periwinkle));
  opacity: 0.38;
  -webkit-mask: radial-gradient(circle closest-side, #000 15%, transparent 90%), repeating-conic-gradient(#000 0deg 8deg, transparent 8deg 22.5deg);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle closest-side, #000 15%, transparent 90%), repeating-conic-gradient(#000 0deg 8deg, transparent 8deg 22.5deg);
  mask-composite: intersect;
}
.celebration[data-rarity="5"] .celebration-lighting::after {
  background: conic-gradient(from 20deg, var(--periwinkle), var(--lilac), var(--orange), var(--yellow), var(--platinum), var(--periwinkle));
  opacity: 0.2;
  -webkit-mask: radial-gradient(closest-side, #000, transparent 85%);
  mask: radial-gradient(closest-side, #000, transparent 85%);
}
.celebration .coin-hint { color: var(--on-stage-muted); }
.celebration-title { color: var(--on-stage); font: 800 clamp(1.9rem, 8.4vw, 2.5rem)/1.08 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.celebration-goal { display: flex; align-items: flex-start; gap: 8px; max-width: 34ch; color: var(--on-stage); font-weight: 600; text-align: left; }
.celebration-goal .icon { margin-top: 3px; color: var(--metal); }
.celebration-next { max-width: 36ch; color: var(--on-stage-muted); font-size: 0.9rem; }
.celebration-next:empty, .celebration-count:empty { display: none; }
.celebration-pip { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; text-align: left; }
.celebration-pip .pip-perch { width: 72px; height: 72px; }
.celebration-pip .pip-perch .pip { --pip-size: 82px; }
.celebration-pip .pip-bubble { margin-bottom: 14px; background: var(--on-pastel-surface); color: var(--on-pastel); }
.celebration-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; margin-top: 14px; }
.celebration-actions .button { width: 100%; }
.celebration .text-link { color: var(--on-stage); }
.celebration-count { color: var(--on-stage-muted); font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/*
 * The day's goal on the stage: Today's goal ring, large. A white track on
 * periwinkle and an ink fill that sweeps from where the day stood to full;
 * then the disc turns orange (reached, as on Today) and the app's sparkles burst.
 */
.goal-moment {
  position: relative;
  display: grid;
  place-items: center;
  width: min(210px, 54vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--periwinkle);
  color: var(--on-pastel);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--periwinkle) 22%, transparent);
  transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.goal-moment svg { position: absolute; inset: 9%; width: 82%; height: 82%; overflow: visible; transform: rotate(-90deg); }
.goal-moment circle { fill: none; stroke-width: 9; }
.goal-moment-track { stroke: color-mix(in srgb, var(--on-pastel-surface) 60%, transparent); }
.goal-moment-fill { stroke: var(--on-pastel); stroke-linecap: round; stroke-dasharray: 100 100; }
.goal-moment-centre { position: relative; display: grid; justify-items: center; }
.goal-moment-centre strong { font: 800 clamp(3rem, 15vw, 4.2rem)/1 var(--font-num); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.goal-moment-centre span { margin-top: 2px; color: var(--on-pastel-muted); font-size: 0.86rem; font-weight: 700; }
.goal-moment[data-reached="true"] { background: var(--orange); box-shadow: 0 0 0 10px color-mix(in srgb, var(--orange) 30%, transparent); }

/* The week under it, as on Today: practised days white with a check, today ringed in orange until it fills. */
.celebration-week { list-style: none; display: flex; justify-content: center; gap: 8px; margin: 4px 0 0; padding: 0; }
.celebration-week li { display: grid; justify-items: center; gap: 5px; }
.celebration-week-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-stage) 26%, transparent); color: var(--on-pastel); }
.celebration-week-dot .icon { width: 15px; height: 15px; }
.celebration-week li[data-practised="true"] .celebration-week-dot { background: var(--on-stage); box-shadow: none; }
.celebration-week li[data-today="true"] .celebration-week-dot { box-shadow: inset 0 0 0 2.5px var(--orange); }
.celebration-week li[data-today="true"] .celebration-week-dot .icon { opacity: 0; }
.celebration-week li[data-done="true"] .celebration-week-dot { background: var(--orange); box-shadow: none; }
.celebration-week li[data-done="true"] .celebration-week-dot .icon { opacity: 1; }
.celebration-week-label { color: var(--on-stage-muted); font-size: 0.72rem; font-weight: 700; }
.celebration-week li[data-today="true"] .celebration-week-label { color: var(--on-stage); }
@media (max-width: 359px) {
  .celebration-week { gap: 5px; }
  .celebration-week-dot { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: no-preference) {
  .celebration[open] { animation: stage-in 0.3s var(--ease-out); }
  .celebration-lighting::before { animation: rays-turn 40s linear infinite; }
  .celebration-body[data-play="true"] > * { animation: rise-in 0.5s var(--ease-out) both; }
  .celebration-body[data-play="true"] > .celebration-eyebrow { animation-delay: 0.1s; }
  .celebration-body[data-play="true"] > .celebration-coin { animation: coin-pop 0.7s var(--ease-spring) both; }
  .celebration-body[data-play="true"] > .coin-hint { animation-delay: 1.5s; }
  .celebration-body[data-play="true"] > .celebration-title { animation-delay: calc(1s + var(--reveal-lag, 0s)); }
  .celebration-body[data-play="true"] > .celebration-goal { animation-delay: calc(1.12s + var(--reveal-lag, 0s)); }
  .celebration-body[data-play="true"] > .celebration-next { animation-delay: calc(1.22s + var(--reveal-lag, 0s)); }
  .celebration-body[data-play="true"] > .celebration-pip { animation: pip-pop 0.6s var(--ease-spring) calc(1.3s + var(--reveal-lag, 0s)) both; }
  .celebration-body[data-play="true"] > .celebration-actions { animation-delay: calc(1.45s + var(--reveal-lag, 0s)); }
  .celebration-body[data-play="true"] > .celebration-count { animation-delay: 1.5s; }
  .celebration-body[data-play="true"] > .celebration-week { animation-delay: 1.3s; }
  .celebration-body[data-play="true"] .goal-moment-fill { animation: goal-fill 1s var(--ease-out) 0.35s forwards; }
  .goal-moment[data-reached="true"] { animation: goal-pulse 0.6s var(--ease-spring); }
  .celebration-week li[data-done="true"] .celebration-week-dot { animation: week-pop 0.5s var(--ease-spring); }
  .coin-orbit { animation: rare-orbit 12s linear infinite; animation-delay: calc(var(--orbit-index) * -4s); }
  .celebration[data-rarity="5"] .coin-orbit { animation-duration: 16s; }
  .celebration[data-rarity="5"] .coin-spotlight { animation: overhead-light-drift 12s ease-in-out infinite; }
  .celebration:is([data-rarity="4"], [data-rarity="5"]) .celebration-body[data-play="true"] > .celebration-coin { animation: rare-coin-arrive 1.15s var(--ease-out) both; }
  @keyframes goal-fill { to { stroke-dashoffset: 0; } }
  @keyframes goal-pulse { 40% { transform: scale(1.08); } }
  @keyframes week-pop { 50% { transform: scale(1.3); } }
  @keyframes stage-in { from { opacity: 0; } }
  @keyframes rays-turn { to { rotate: 360deg; } }
  @keyframes overhead-light-drift { 50% { transform: translateX(-50%) rotate(4deg); } }
  @keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }
  @keyframes coin-pop { from { opacity: 0; transform: scale(0.25); } }
  @keyframes pip-pop { from { opacity: 0; transform: translateY(24px) scale(0.8); } }
  @keyframes rare-orbit { to { transform: rotate(calc(360deg + var(--orbit-index) * 65deg)); } }
  @keyframes rare-coin-arrive { from { opacity: 0; transform: translateY(-32px) scale(0.7); } 65% { opacity: 1; transform: translateY(4px) scale(1.03); } to { transform: translateY(0) scale(1); } }
}

/*
 * Small medals arrive as a toast: above the tab bar on phones, top right on
 * desktop. A toast stays until it is closed or opened, so none is missed.
 */
.medal-toasts {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: calc(var(--tab-height) + 18px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 10px;
  width: min(calc(100% - 32px), 420px);
  translate: -50% 0;
  pointer-events: none;
}
/* Nothing sits over the answers while a drill or reading runs; the cards come back after it. */
body[data-focus-mode="true"] .medal-toasts { display: none; }
.medal-toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 8px 10px 10px;
  border-radius: var(--radius-container);
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 18px 40px -16px rgb(var(--shadow-color) / 0.7), 0 0 0 3px var(--gold);
  pointer-events: auto;
}
.medal-toast .medal-art { --medal-size: 64px; }
.medal-toast-text { display: grid; gap: 2px; min-width: 0; line-height: 1.25; }
.medal-toast-eyebrow { width: fit-content; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--gold); color: var(--on-pastel); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.01em; }
.medal-toast-name { font-size: 1rem; font-weight: 800; }
.medal-toast-goal { display: flex; align-items: flex-start; gap: 5px; color: var(--on-ink-muted); font-size: 0.8rem; font-weight: 600; }
.medal-toast-goal .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--gold); }
.medal-toast-close { color: var(--on-ink); }
.medal-toast-close:hover { background: color-mix(in srgb, var(--on-ink) 14%, var(--ink)); }
@media (max-width: 379px) {
  .medal-toast { grid-template-columns: auto minmax(0, 1fr) auto; }
  .medal-toast-link { grid-column: 2 / -1; justify-self: start; }
  .medal-toast-close { grid-row: 1; grid-column: 3; }
}
@media (min-width: 720px) {
  .medal-toasts { top: 84px; right: 24px; bottom: auto; left: auto; translate: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .medal-toast { animation: toast-in 0.5s var(--ease-spring) both; }
  .medal-toast[data-leaving] { animation: toast-out 0.3s ease-in forwards; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.92); } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(12px); } }
}
.medal-toast[data-leaving] { opacity: 0; pointer-events: none; }

/* Bars towards the next tier: ink on a grey track. */
.medal-bar { position: relative; display: block; width: 100%; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.medal-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%); border-radius: inherit; background: var(--foreground); }
.medal-bar[data-size="lg"] { height: 12px; }

/* "New": medals earned since you last looked, on an orange sticker. */
.new-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--orange); color: var(--on-pastel); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.01em; line-height: 1.4; }
.medal-tile-new { position: absolute; top: 10px; right: 10px; }

/* Medals a session moved: on its result, and in the pop-up as it ends. */
.medal-move-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.medal-move {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: var(--radius-container);
  background: var(--surface);
  color: var(--foreground);
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .medal-move:hover { background: var(--surface-muted); }
}
.medal-move-text { display: grid; gap: 4px; min-width: 0; }
.medal-move-text strong { font-size: 0.95rem; font-weight: 700; line-height: 1.25; }
.medal-move-meta { color: var(--muted-foreground); font-size: 0.8rem; font-weight: 600; }
.medal-move-chip { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--foreground); font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.medal-move[data-state="earned"] .medal-move-chip { background: var(--gold); color: var(--on-pastel); }
/* Where the medal was (ink) and what this session added (orange, the nudge colour); the new part grows in. */
.move-bar { position: relative; display: block; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.move-bar > span { position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; }
.move-bar-before { background: var(--foreground); transform: scaleX(var(--before)); }
.move-bar-after { background: var(--orange); transform: scaleX(var(--after)); }
@media (prefers-reduced-motion: no-preference) {
  .move-bar-after { transition: transform 0.9s var(--ease-out) 0.25s; }
}
.medal-moves .section-head .text-link { font-size: 0.86rem; }

/* ---------- Medals screen ---------- */

/* Medals in two views: the overview, with a tile per collection, and a collection's own page (#medals/collection-<id>). */
.screen[data-view="overview"] [data-medals-view="collection"],
.screen[data-view="collection"] [data-medals-view="overview"] { display: none; }
.medals-part { display: flex; flex-direction: column; gap: var(--space-4); }
.collection-tile { min-height: 156px; }
.collection-tile .medal-bar { margin-top: 6px; }
.collection-new { position: absolute; top: 18px; right: 18px; }

/* Medals earned since you last looked: the first thing on the screen, grey rows where the medal art carries the colour. */
.medals-new { display: grid; gap: 12px; }
.medals-new[hidden] { display: none; }
.medals-new h2 { display: flex; align-items: center; gap: 10px; }
.medals-new-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; margin: 0; padding: 0; }
/* Two to a row on phones, the art above the name, so a long catch-up stays short. */
@media (max-width: 559px) {
  .medals-new-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .medals-new-list .new-medal { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px; padding: 14px; }
}
.new-medal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px 10px 10px;
  border: 0;
  border-radius: var(--radius-container);
  background: var(--surface);
  color: var(--foreground);
  text-align: left;
  transition: transform 0.2s var(--ease-out), background-color 0.15s var(--ease-out);
}
.new-medal:hover { background: var(--surface-muted); }
.new-medal-text { display: grid; gap: 2px; min-width: 0; }
.new-medal-text strong { font-size: 0.98rem; font-weight: 800; line-height: 1.25; }
.new-medal-meta { color: var(--muted-foreground); font-size: 0.8rem; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .new-medal:hover { transform: translateY(-2px); }
}

.medals-top { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 960px) {
  .medals-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-7); }
}
.medal-summary { display: grid; gap: 14px; padding: 22px 24px 24px; border-radius: var(--radius-card); background: var(--surface); }
.medal-summary .text-link { margin-top: 4px; font-size: 0.86rem; }
.medal-summary-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--muted-foreground); font-weight: 600; }
.medal-summary-count strong { color: var(--foreground); font: 800 clamp(2.8rem, 11vw, 3.6rem)/1 var(--font-num); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.medal-summary .medal-bar { background: var(--surface-raised); }
.metal-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.metal-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px 5px 6px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--muted-foreground); font-size: 0.86rem; font-weight: 600; }
.metal-chip strong { color: var(--foreground); font-variant-numeric: tabular-nums; }
.metal-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--metal); box-shadow: inset 0 0 0 2px var(--on-pastel), inset 0 0 0 5px var(--metal-light); }

.medal-collections { display: grid; gap: var(--space-6); }
.medal-collection > .hint { margin-top: -8px; }
.collection-title { display: flex; align-items: center; gap: 12px; }
.collection-title .icon-tile { width: 38px; height: 38px; }
.medal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr)); gap: 10px; }
.medal-grid > li { display: grid; }
.medal-tile {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  width: 100%;
  padding: 18px 10px 16px;
  border: 0;
  border-radius: var(--radius-container);
  background: var(--surface);
  color: var(--foreground);
  text-align: center;
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.medal-tile .medal-art { --medal-size: 78px; margin-bottom: 8px; transition: transform 0.45s var(--ease-spring); }
.medal-tile[data-state="earned"] .medal-art { filter: drop-shadow(0 8px 10px rgb(var(--shadow-color) / 0.28)); }
.medal-tile-name { font-size: 0.92rem; font-weight: 700; line-height: 1.25; }
.medal-tile-meta { color: var(--muted-foreground); font-size: 0.78rem; font-weight: 600; }
.medal-tile .medal-bar { width: 64%; height: 5px; margin-top: 6px; }
@media (hover: hover) and (pointer: fine) {
  .medal-tile:hover { background: var(--surface-muted); transform: translateY(-2px); }
  .medal-tile[data-state="earned"]:hover .medal-art { transform: rotate(-10deg) scale(1.06); }
}

.almost-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
:is(.almost-row, .medal-next) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 18px 12px 12px;
  border: 0;
  border-radius: var(--radius-container);
  background: var(--surface);
  color: var(--foreground);
  text-align: left;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
:is(.almost-row, .medal-next) > .icon { width: 18px; height: 18px; color: var(--muted-foreground); }
.medal-next[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.almost-row, .medal-next):hover { background: var(--surface-muted); }
}
:is(.almost-text, .medal-next-text) { display: grid; gap: 4px; min-width: 0; }
:is(.almost-text, .medal-next-text) strong { font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.almost-goal { color: var(--muted-foreground); font-size: 0.84rem; line-height: 1.4; }
:is(.almost-progress, .medal-next-progress) { color: var(--muted-foreground); font-size: 0.78rem; font-weight: 600; }
.medal-next-eyebrow { color: var(--muted-foreground); font-size: 0.78rem; font-weight: 700; }
.medal-next-slot[hidden] { display: none; }
.medal-road { display: grid; gap: 12px; padding: 20px; border-radius: var(--radius-card); background: var(--surface); }
.medal-road[hidden] { display: none; }
.medal-road h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.medal-road .hint { margin: 0; }
.medal-road-levels { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.medal-road-levels li { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted-foreground); }
.medal-road-levels .icon { width: 18px; height: 18px; flex: none; }
.medal-road-levels [data-earned="true"] { color: var(--foreground); font-weight: 700; }
.medal-road-levels [data-earned="true"] .icon { color: var(--success); }
.medal-road-bigger { display: flex; align-items: flex-start; gap: 8px; padding-top: 12px; border-top: 1px solid var(--surface-sunken); font-size: 0.82rem; line-height: 1.6; }
.medal-road-bigger .icon { width: 18px; height: 18px; margin-top: 2px; flex: none; }
/* Where the medal is earned: the card goes straight there. */
.medal-next-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--foreground); font-size: 0.82rem; font-weight: 700; }
.medal-next-go .icon { width: 14px; height: 14px; color: var(--orange-deep); }

/* Today's latest result, one tap away. */
.last-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 12px;
  border-radius: var(--radius-container);
  background: var(--surface);
  color: var(--foreground);
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
.last-result[hidden] { display: none; }
.last-result > .icon { width: 18px; height: 18px; color: var(--muted-foreground); }
.last-result .icon-tile { width: 52px; height: 52px; }
.last-result-text { display: grid; gap: 2px; min-width: 0; }
.last-result-eyebrow { color: var(--muted-foreground); font-size: 0.78rem; font-weight: 700; }
.last-result-text strong { font-size: 0.95rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.last-result-detail { color: var(--muted-foreground); font-size: 0.8rem; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .last-result:hover { background: var(--surface-muted); }
}
:is(.almost-text, .medal-next-text) .medal-bar { margin-top: 2px; }

/* The viewer: a sheet with the coin on its place's colour, every tier, and why. */
.medal-viewer {
  width: min(calc(100% - 32px), 460px);
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 30px 80px -20px rgb(var(--shadow-color) / 0.45);
  overflow: auto;
  overscroll-behavior: contain;
}
.medal-viewer::backdrop { background: color-mix(in srgb, var(--stage) 55%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.viewer-sheet { position: relative; display: grid; }
.viewer-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.medal-viewer .button.viewer-close { background: var(--on-pastel-surface); color: var(--on-pastel); }
.viewer-stage { display: grid; justify-items: center; gap: 14px; padding: 40px 20px 20px; background: var(--tone); color: var(--on-pastel-muted); }
.viewer-coin { display: grid; place-items: center; }
.viewer-stage .coin-stage { --coin-size: 184px; }
.viewer-stage > .viewer-coin > .medal-art { --medal-size: 184px; }
.viewer-body { display: grid; gap: 14px; padding: 22px 24px calc(26px + env(safe-area-inset-bottom, 0px)); }
.viewer-body h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.viewer-body .eyebrow { margin-bottom: -8px; }
.tier-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tier-ladder:empty { display: none; }
.tier-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: var(--radius-container); background: var(--surface); }
/* An earned tier is done, like a done plan row: no fill, an outline. */
.tier-row[data-state="earned"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border); }
.tier-row[data-state="later"] .tier-text strong { color: var(--muted-foreground); font-weight: 600; }
.tier-text { display: grid; gap: 5px; font-size: 0.9rem; line-height: 1.35; }
.tier-note { color: var(--muted-foreground); font-size: 0.8rem; font-weight: 600; }
.tier-row[data-state="earned"] .tier-note { color: var(--success); }
.viewer-why { display: flex; align-items: flex-start; gap: 10px; color: var(--muted-foreground); font-size: 0.9rem; }
.viewer-why .icon { margin-top: 3px; color: var(--foreground); }
.viewer-body > .button { justify-self: stretch; }
@media (max-width: 559px) {
  /* A bottom sheet on phones. */
  .medal-viewer { width: 100%; max-width: 100%; max-height: 92%; margin: auto 0 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .medal-viewer[open] { animation: sheet-in 0.4s var(--ease-out); }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } }
}

body:has(dialog[open]) { overflow: hidden; }

/* ---------- Pip ---------- */

/*
 * Pip's owl silhouette and face stay legible down to the tour's 54px size.
 * The theme controls alertness; mood controls expression. Static poses live
 * outside the motion query so the whole personality survives reduced motion.
 * Separate head, body and gaze layers keep their choreography independent.
 */
.pip { --pip-size: 96px; display: inline-block; flex: none; width: var(--pip-size); height: var(--pip-size); }
.pip-art { display: block; width: 100%; height: 100%; overflow: visible; }

/*
 * Nibs (js/ui/nibs.js): one sticker, moving as a whole. A drop and settle
 * when it arrives (240ms, the spring curve), then a slow 2.8s bob; on fire,
 * a warm glow behind it. Still under reduced motion and in a hidden tab.
 */
.nibs { position: relative; }
.nibs-art { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.nibs-glow { position: absolute; inset: 6%; border-radius: 50%; background: color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: 0 0 calc(var(--pip-size) * 0.3) color-mix(in srgb, var(--paint-orange) 50%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .nibs-art { animation: nibs-arrive 240ms var(--ease-spring) both, nibs-bob 2.8s ease-in-out 240ms infinite; }
  /* On fire: the glow ignites with the entrance, then burns gently while the moment lasts; a saved result, or OK, leaves it still. */
  .nibs[data-mood="firebird"] .nibs-art { animation: none; }
  .nibs[data-mood="firebird"][data-transforming] .nibs-art { animation: nibs-arrive 600ms var(--ease-spring) both; }
  .nibs[data-mood="firebird"][data-transforming] .nibs-glow { animation: nibs-ignite 900ms var(--ease-out) both; }
  .nibs[data-mood="firebird"][data-idling] .nibs-art { animation: nibs-bob 2.8s ease-in-out infinite; }
  .nibs[data-mood="firebird"][data-idling] .nibs-glow { animation: nibs-glow 1.4s ease-in-out infinite alternate; }
  html[data-pip-page-hidden] .nibs :is(.nibs-art, .nibs-glow) { animation-play-state: paused; }
}
@keyframes nibs-arrive { from { opacity: 0; transform: translateY(-8%) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes nibs-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-2.5%); } }
@keyframes nibs-glow { from { opacity: 0.6; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes nibs-ignite { from { opacity: 0; transform: scale(0.4); } 70% { opacity: 1; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
.pip-torso, .pip-head-fill, .pip-ear, .pip-tail, .pip-wing-fill { fill: var(--pip-feather); stroke: var(--pip-feather-deep); stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; }
.pip-wing-fill, .pip-tail { fill: var(--pip-feather-deep); }
.pip-mask { fill: var(--pip-cream); }
.pip-belly { fill: var(--pip-belly); }
.pip-belly-feathers { fill: none; stroke: var(--pip-feather-light); stroke-width: 2.2; stroke-linecap: round; }
.pip-forehead-feathers { fill: var(--pip-feather-light); }
.pip-eyeball { fill: var(--pip-eye-white); }
.pip-feather-line { fill: none; stroke: var(--pip-cream); stroke-width: 2.5; stroke-linecap: round; }
.pip-cheek { fill: var(--pip-blush); opacity: 0.85; }
.pip-iris { transform-box: fill-box; transform-origin: center; transform: scale(var(--pip-pupil-size)); }
.pip-pupil, .pip-mouth { fill: var(--pip-ink); }
.pip-glint { fill: var(--pip-eye-white); }
.pip-eye-left .pip-eye-window { clip-path: ellipse(12px 14px at 42px 52px) view-box; }
.pip-eye-right .pip-eye-window { clip-path: ellipse(12px 14px at 78px 52px) view-box; }
.pip-lids { transform: translateY(var(--pip-lid-y)); }
.pip-lids path { fill: var(--pip-cream); }
.pip-feet path, .pip-beak > path:first-child, .pip-beak-open > path:first-child { fill: var(--pip-beak); stroke: var(--pip-feather-light); stroke-width: 0.6; stroke-linejoin: round; }
.pip-beak-seam { fill: none; stroke: var(--pip-feather-deep); stroke-width: 0.9; stroke-linecap: round; }
.pip-eyes-happy, .pip-eyes-shut, .pip-blink-lines, .pip-brows { fill: none; stroke: var(--pip-ink); stroke-width: 2.5; stroke-linecap: round; }
.pip-brows { stroke-width: 1.6; }
.pip-shadow { fill: var(--pip-ink); opacity: 0.14; }
.pip-bowtie { fill: var(--pip-bow); transform-box: view-box; transform-origin: 60px 83px; }
.pip-bow-fold { fill: none; stroke: var(--pip-bow-deep); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.pip-bow-knot { fill: var(--pip-bow-deep); }
.pip-tear, .pip-sweat { fill: color-mix(in srgb, var(--periwinkle) 45%, var(--on-pastel-surface)); stroke: var(--pip-ink); stroke-width: 1; }
.pip-zzz text { font: 800 12px/1 var(--font-ui); fill: var(--on-pastel); }
.pip-zzz text:nth-child(2) { font-size: 10px; }
.pip-zzz text:nth-child(3) { font-size: 8px; }
.pip-sparkles path { fill: var(--yellow); stroke: var(--pip-ink); stroke-width: 0.6; }
.pip-eyes-happy, .pip-eyes-shut, .pip-blink-lines, .pip-brows, .pip-beak-open, .pip-tear, .pip-sweat, .pip-zzz, .pip-sparkles { display: none; }
.pip-body { transform-box: view-box; transform-origin: 60px 108px; }
.pip-head, .pip-head-pose, .pip-wing, .pip-ear, .pip-foot, .pip-eyes-open { transform-box: view-box; }
.pip-head, .pip-head-pose { transform-origin: 60px 75px; }
.pip-wing-left { transform-origin: 30px 75px; }
.pip-wing-right { transform-origin: 90px 75px; }
.pip-ear-left { transform-origin: 33px 35px; }
.pip-ear-right { transform-origin: 87px 35px; }
.pip-foot-left { transform-origin: 47px 106px; }
.pip-foot-right { transform-origin: 73px 106px; }
.pip-eyes-open { transform-origin: 60px 54px; }
.pip-shadow, .pip-tear, .pip-sweat, .pip-zzz text, .pip-sparkles path { transform-box: fill-box; transform-origin: center; }

.pip[data-mood="hello"] .pip-head-pose { transform: rotate(-3deg); }
.pip[data-mood="hello"] .pip-wing-right { transform: rotate(-90deg); }
.pip[data-mood="happy"] .pip-lids { transform: translateY(min(var(--pip-lid-y), -11px)); }
.pip[data-mood="happy"] .pip-head-pose { transform: translateY(-2px) rotate(4deg); }
.pip[data-mood="happy"] .pip-wing-left { transform: rotate(15deg); }
.pip[data-mood="happy"] .pip-wing-right { transform: rotate(-20deg); }
.pip:is([data-mood="proud"], [data-mood="cheer"]) .pip-eyes-open { display: none; }
.pip:is([data-mood="proud"], [data-mood="cheer"]) :is(.pip-eyes-happy, .pip-sparkles) { display: inline; }
.pip[data-mood="proud"] .pip-head-pose { transform: translateY(-3px); }
.pip[data-mood="proud"] .pip-body { transform: scale(1.035, 1.02); }
.pip[data-mood="proud"] .pip-wing-left { transform: rotate(42deg); }
.pip[data-mood="proud"] .pip-wing-right { transform: rotate(-42deg); }
.pip[data-mood="cheer"] .pip-wing-left { transform: rotate(85deg); }
.pip[data-mood="cheer"] .pip-wing-right { transform: rotate(-85deg); }
.pip[data-mood="cheer"] .pip-beak { display: none; }
.pip[data-mood="cheer"] .pip-beak-open { display: inline; }
.pip[data-mood="waiting"] .pip-head-pose { transform: rotate(7deg); }
.pip[data-mood="waiting"] .pip-look { transform: translate(2px, -1px); }
.pip:is([data-mood="worried"], [data-mood="sad"]) .pip-brows { display: inline; }
.pip[data-mood="worried"] .pip-head-pose { transform: translateY(1px) rotate(-6deg); }
.pip[data-mood="worried"] .pip-sweat { display: inline; }
.pip[data-mood="worried"] .pip-look { transform: translateX(-2px); }
.pip[data-mood="worried"] .pip-wing-left { transform: rotate(-12deg); }
.pip[data-mood="worried"] .pip-wing-right { transform: rotate(12deg); }
.pip[data-mood="sad"] .pip-head-pose { transform: translateY(4px) rotate(6deg); }
.pip[data-mood="sad"] .pip-look { transform: translateY(3px); }
.pip[data-mood="sad"] .pip-tear { display: inline; }
.pip[data-mood="sad"] .pip-body { transform: scale(1.025, 0.96); }
.pip[data-mood="sad"] .pip-ear-left { transform: rotate(-8deg); }
.pip[data-mood="sad"] .pip-ear-right { transform: rotate(8deg); }
.pip[data-mood="sleepy"] .pip-eyes-open { display: none; }
.pip[data-mood="sleepy"] :is(.pip-eyes-shut, .pip-zzz) { display: inline; }
.pip[data-mood="sleepy"] .pip-head-pose { transform: translateY(3px) rotate(-9deg); }
.pip[data-mood="sleepy"] .pip-body { transform: scale(1.03, 0.96); }

@media (prefers-reduced-motion: no-preference) {
  .pip-lids, .pip-iris, .pip-head-pose, .pip-wing, .pip-look { transition: transform 0.65s var(--ease-out); }
  .pip-eyes-open { animation: pip-blink var(--pip-tempo) infinite; }
  .pip-blink-lines { display: inline; opacity: 0; animation: pip-blink-lines var(--pip-tempo) infinite; }
  .pip:is([data-mood="proud"], [data-mood="cheer"], [data-mood="sleepy"]) .pip-blink-lines { display: none; }
  .pip-head { animation: var(--pip-head-idle) var(--pip-tempo) ease-in-out infinite; }
  .pip-body { animation: pip-breathe 4s ease-in-out infinite; }
  .pip[data-mood="hello"] .pip-wing-right { animation: pip-wave var(--pip-tempo) ease-in-out infinite; }
  .pip[data-mood="hello"] .pip-ear-right { animation: pip-ruffle var(--pip-tempo) ease-in-out infinite; }
  .pip[data-mood="happy"] .pip-body { animation: pip-hop 3.6s ease-in-out infinite; }
  .pip[data-mood="happy"] .pip-foot-left { animation: pip-toe-tap 3.6s ease-in-out infinite; }
  .pip[data-mood="proud"] .pip-head { animation: pip-nod 4s ease-in-out infinite; }
  .pip[data-mood="proud"] .pip-ear-left { animation: pip-ruffle 4s ease-in-out infinite reverse; }
  .pip[data-mood="cheer"] .pip-body { animation: pip-jump 2.4s ease-in-out infinite; }
  .pip[data-mood="cheer"] .pip-wing-left { animation: pip-flap-left 2.4s ease-in-out infinite; }
  .pip[data-mood="cheer"] .pip-wing-right { animation: pip-flap-right 2.4s ease-in-out infinite; }
  .pip[data-mood="cheer"] .pip-head { animation: pip-cheer-head 2.4s ease-in-out infinite; }
  .pip[data-mood="cheer"] .pip-foot-left { animation: pip-kick 2.4s ease-in-out infinite; }
  .pip[data-mood="cheer"] .pip-bowtie { animation: pip-bow-bounce 2.4s ease-in-out infinite; }
  .pip[data-mood="cheer"] .pip-shadow { animation: pip-jump-shadow 2.4s ease-in-out infinite; }
  .pip:is([data-mood="proud"], [data-mood="cheer"]) .pip-sparkles path { animation: pip-twinkle 2.4s ease-in-out infinite; }
  .pip:is([data-mood="proud"], [data-mood="cheer"]) .pip-sparkles path:nth-child(2) { animation-delay: 0.5s; }
  .pip:is([data-mood="proud"], [data-mood="cheer"]) .pip-sparkles path:nth-child(3) { animation-delay: 1s; }
  .pip[data-mood="waiting"] .pip-head { animation: pip-listen var(--pip-tempo) ease-in-out infinite; }
  .pip[data-mood="waiting"] .pip-look { animation: pip-search var(--pip-tempo) ease-in-out infinite; }
  .pip[data-mood="waiting"] .pip-foot-right { animation: pip-toe-tap var(--pip-tempo) ease-in-out infinite; }
  .pip[data-mood="worried"] .pip-head { animation: pip-listen 6s ease-in-out infinite; }
  .pip[data-mood="worried"] .pip-look { animation: pip-glance 6s ease-in-out infinite; }
  .pip[data-mood="worried"] .pip-sweat { animation: pip-drip 6s ease-in-out infinite; }
  .pip[data-mood="sad"] .pip-head { animation: pip-sigh 7s ease-in-out infinite; }
  .pip[data-mood="sad"] .pip-tear { animation: pip-drip 7s ease-in-out infinite; }
  .pip[data-mood="sleepy"] .pip-head { animation: pip-doze 6s ease-in-out infinite; }
  .pip[data-mood="sleepy"] .pip-beak-open { display: inline; animation: pip-yawn 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center top; }
  .pip[data-mood="sleepy"] .pip-beak { animation: pip-yawn-beak 6s infinite; }
  .pip[data-mood="sleepy"] .pip-zzz text { animation: pip-z 4.5s ease-out infinite; }
  .pip[data-mood="sleepy"] .pip-zzz text:nth-child(2) { animation-delay: 0.9s; }
  .pip[data-mood="sleepy"] .pip-zzz text:nth-child(3) { animation-delay: 1.8s; }
  .pip[data-in-view="false"] *, :root[data-pip-page-hidden] .pip * { animation-play-state: paused !important; }

  @keyframes pip-blink { 0%, 38%, 42%, 76%, 80%, 100% { opacity: 1; } 39%, 41%, 77%, 79% { opacity: 0; } }
  @keyframes pip-blink-lines { 0%, 38%, 42%, 76%, 80%, 100% { opacity: 0; } 39%, 41%, 77%, 79% { opacity: 1; } }
  @keyframes pip-breathe { 50% { scale: 1.015 0.985; translate: 0 0.5px; } }
  @keyframes pip-drowse { 0%, 20%, 100% { transform: rotate(0); } 38%, 57% { transform: translateY(2px) rotate(5deg); } 66% { transform: translateY(-1px) rotate(-3deg); } 78% { transform: rotate(1deg); } }
  @keyframes pip-curious { 0%, 12%, 100% { transform: rotate(0); } 24%, 36% { transform: translateY(-2px) rotate(-7deg); } 48%, 58% { transform: translateY(-1px) rotate(8deg); } 70% { transform: rotate(-4deg); } 82% { transform: rotate(2deg); } }
  @keyframes pip-wave { 0%, 6%, 36%, 100% { transform: rotate(-90deg); } 12%, 24% { transform: rotate(-116deg); } 18%, 30% { transform: rotate(-73deg); } }
  @keyframes pip-ruffle { 0%, 28%, 53%, 100% { transform: rotate(0); } 34%, 46% { transform: rotate(15deg); } 40% { transform: rotate(-8deg); } }
  @keyframes pip-hop { 0%, 32%, 72%, 100% { transform: none; } 40% { transform: scale(1.07, 0.9); } 49% { transform: translateY(-9px) rotate(-4deg) scale(0.97, 1.04); } 59% { transform: scale(1.05, 0.94) rotate(2deg); } }
  @keyframes pip-toe-tap { 0%, 55%, 74%, 100% { transform: none; } 60%, 68% { transform: translateY(-3px) rotate(-13deg); } 64% { transform: none; } }
  @keyframes pip-nod { 0%, 24%, 65%, 100% { transform: none; } 35% { transform: translateY(3px) rotate(-4deg); } 48% { transform: translateY(-2px) rotate(3deg); } }
  @keyframes pip-jump { 0%, 8%, 78%, 100% { transform: none; } 16%, 47% { transform: scale(1.08, 0.88); } 30% { transform: translateY(-15px) rotate(-6deg) scale(0.96, 1.04); } 60% { transform: translateY(-11px) rotate(6deg); } 70% { transform: scale(1.05, 0.95); } }
  @keyframes pip-flap-left { 0%, 8%, 78%, 100% { transform: rotate(85deg); } 18%, 48% { transform: rotate(55deg); } 30%, 60% { transform: rotate(112deg); } }
  @keyframes pip-flap-right { 0%, 8%, 78%, 100% { transform: rotate(-85deg); } 18%, 48% { transform: rotate(-55deg); } 30%, 60% { transform: rotate(-112deg); } }
  @keyframes pip-cheer-head { 0%, 78%, 100% { transform: none; } 30% { transform: rotate(8deg); } 60% { transform: rotate(-8deg); } }
  @keyframes pip-kick { 0%, 16%, 47%, 78%, 100% { transform: none; } 30% { transform: rotate(22deg); } 60% { transform: rotate(-18deg); } }
  @keyframes pip-bow-bounce { 0%, 16%, 47%, 78%, 100% { transform: none; } 30% { transform: rotate(8deg) scale(1.04); } 60% { transform: rotate(-8deg); } }
  @keyframes pip-jump-shadow { 0%, 16%, 47%, 78%, 100% { transform: scaleX(1); opacity: 0.14; } 30%, 60% { transform: scaleX(0.65); opacity: 0.07; } }
  @keyframes pip-twinkle { 0%, 100% { opacity: 0.55; transform: scale(0.75) rotate(-10deg); } 50% { opacity: 1; transform: scale(1.15) rotate(12deg); } }
  @keyframes pip-listen { 0%, 15%, 100% { transform: none; } 30%, 48% { transform: rotate(-13deg) translateY(-1px); } 65%, 80% { transform: rotate(5deg); } }
  @keyframes pip-search { 0%, 15%, 100% { transform: translate(2px, -1px); } 30%, 48% { transform: translate(-2px, -2px); } 65%, 80% { transform: translate(2px, 1px); } }
  @keyframes pip-glance { 0%, 20%, 100% { transform: translateX(-2px); } 36%, 64% { transform: translateX(2px); } }
  @keyframes pip-sigh { 0%, 20%, 80%, 100% { transform: none; } 40% { transform: translateY(-1px) rotate(-3deg); } 60% { transform: translateY(2px) rotate(2deg); } }
  @keyframes pip-drip { 0%, 60% { opacity: 0; transform: translateY(-2px); } 70% { opacity: 0.8; } 94%, 100% { opacity: 0; transform: translateY(10px); } }
  @keyframes pip-doze { 0%, 18%, 100% { transform: none; } 36% { transform: translateY(4px) rotate(8deg); } 48% { transform: translateY(-3px) rotate(-5deg); } 58% { transform: rotate(2deg); } 72% { transform: translateY(2px) rotate(4deg); } }
  @keyframes pip-yawn { 0%, 28%, 62%, 100% { opacity: 0; transform: scale(0.5); } 36%, 52% { opacity: 1; transform: scale(1, 1.2); } }
  @keyframes pip-yawn-beak { 0%, 28%, 62%, 100% { opacity: 1; } 36%, 52% { opacity: 0; } }
  @keyframes pip-z { 0% { opacity: 0; transform: translate(0, 4px) rotate(-8deg); } 25% { opacity: 0.8; } 100% { opacity: 0; transform: translate(5px, -9px) rotate(8deg); } }
}

/* Firebird: two flame eyes and a large fire behind Pip's familiar silhouette.
 * The resting pose is also the reduced-motion alternative. */
.pip[data-mood="firebird"] { --firebird-duration: 1800ms; }
.pip[data-mood="firebird"] * { animation: none; transition: none; }
.pip[data-mood="firebird"] :is(.pip-torso, .pip-head-fill, .pip-ear) { fill: var(--orange); stroke: var(--orange-deep); }
.pip[data-mood="firebird"] :is(.pip-wing-fill, .pip-tail) { fill: var(--orange-deep); stroke: var(--orange-deep); }
.pip[data-mood="firebird"] .pip-belly { fill: var(--yellow); }
.pip[data-mood="firebird"] .pip-belly-feathers { stroke: var(--orange-deep); }
.pip[data-mood="firebird"] .pip-forehead-feathers { fill: var(--yellow); }
.pip[data-mood="firebird"] :is(.pip-eyes-open, .pip-eyes-happy, .pip-blink-lines, .pip-beak) { display: none; }
.pip[data-mood="firebird"] .pip-beak-open { display: inline; }
.pip[data-mood="firebird"] .pip-head-pose { transform: translateY(-2px); }
.pip[data-mood="firebird"] .pip-wing-left { transform: rotate(55deg); }
.pip[data-mood="firebird"] .pip-wing-right { transform: rotate(-55deg); }
.pip-fire-outer { fill: var(--orange); }
.pip-fire-inner { fill: var(--yellow); }
.pip-fire-core { fill: var(--gold-light); }
.pip-fire-light { opacity: 0.85; transform-box: view-box; transform-origin: 60px 70px; }
.pip-fire-rays { fill: var(--gold-light); opacity: 0.45; }
.pip-eye-fire-outer { fill: var(--orange); stroke: var(--orange-deep); stroke-width: 1; stroke-linejoin: round; }
.pip-eye-fire-core { fill: var(--yellow); }
.pip-fire-aura, .pip-fire-charge, .pip-fire-ring { transform-box: view-box; transform-origin: 60px 105px; }
.pip-fire-aura { transform: scale(1.02); }
.pip-fire-aura > path { transform-box: view-box; transform-origin: 60px 65px; }
.pip-fire-charge { fill: none; stroke: var(--orange-deep); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.pip-fire-ring { fill: none; stroke: var(--yellow); stroke-width: 2; transform-origin: 60px 70px; opacity: 0; }
.pip-fire-embers > * { fill: var(--orange); opacity: 0; transform-box: fill-box; transform-origin: center; }
.pip-fire-embers > :nth-child(1) { --ember-x: -12px; --ember-y: -22px; }
.pip-fire-embers > :nth-child(2) { --ember-x: 14px; --ember-y: -24px; }
.pip-fire-embers > :nth-child(3) { --ember-x: -9px; --ember-y: -19px; }
.pip-fire-embers > :nth-child(4) { --ember-x: 10px; --ember-y: -15px; }
.pip-fire-embers > :nth-child(5) { --ember-x: -14px; --ember-y: -28px; }
.pip-fire-embers > :nth-child(6) { --ember-x: 16px; --ember-y: -32px; }
.firebird-ok { display: flex; width: fit-content; min-width: 64px; min-height: 44px; margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  /* 1. Anticipation: sink, tuck wings, draw energy inward (0–30%).
   * 2. Ignite: light at the head grows into a core, then outer flames (24–55%).
   * 3. Take flight: a strong downstroke, lift, and soft landing (55–100%). */
  .pip[data-mood="firebird"][data-transforming] .pip-body { animation: firebird-takeoff var(--firebird-duration) ease-in-out both; }
  .pip[data-mood="firebird"][data-transforming] .pip-head-pose { animation: firebird-anticipate var(--firebird-duration) ease-in-out both; }
  .pip[data-mood="firebird"][data-transforming] .pip-wing-left { animation: firebird-wing var(--firebird-duration) ease-in-out both; }
  .pip[data-mood="firebird"][data-transforming] .pip-wing-right { animation: firebird-wing-right var(--firebird-duration) ease-in-out both; }
  .pip[data-mood="firebird"][data-transforming] .pip-fire-aura { animation: firebird-ignite var(--firebird-duration) var(--ease-out) both; }
  .pip[data-mood="firebird"][data-transforming] .pip-fire-light { animation: firebird-light var(--firebird-duration) var(--ease-out) both; }
  .pip[data-mood="firebird"][data-transforming] .pip-fire-core { animation: firebird-core var(--firebird-duration) var(--ease-out) both; }
  .pip[data-mood="firebird"][data-transforming] .pip-fire-inner { animation: firebird-inner var(--firebird-duration) var(--ease-out) both; }
  .pip[data-mood="firebird"][data-transforming] .pip-fire-outer { animation: firebird-outer var(--firebird-duration) var(--ease-out) both; }
  .pip[data-mood="firebird"][data-transforming] .pip-eyes-happy { display: inline; animation: firebird-normal-eyes var(--firebird-duration) var(--ease-out) both; }
  .pip[data-mood="firebird"][data-transforming] .pip-fire-eyes { animation: firebird-flame-eyes var(--firebird-duration) var(--ease-out) both; }
  .pip[data-mood="firebird"][data-transforming] .pip-fire-charge { animation: firebird-charge var(--firebird-duration) ease-in both; }
  .pip[data-mood="firebird"][data-transforming] .pip-fire-ring { animation: firebird-ring var(--firebird-duration) var(--ease-out) both; }
  .pip[data-mood="firebird"][data-transforming] .pip-fire-embers > * { animation: firebird-embers var(--firebird-duration) var(--ease-out) both; }
  .pip[data-mood="firebird"][data-transforming] :is(.pip-torso, .pip-head-fill, .pip-ear) { animation: firebird-colour var(--firebird-duration) linear both; }
  .pip[data-mood="firebird"][data-transforming] :is(.pip-wing-fill, .pip-tail) { animation: firebird-deep-colour var(--firebird-duration) linear both; }
  .pip[data-mood="firebird"][data-transforming] .pip-shadow { animation: firebird-shadow var(--firebird-duration) ease-in-out both; }
  /* After landing, keep the energy warm and contained until OK. */
  .pip[data-mood="firebird"][data-idling] .pip-body { animation: firebird-idle-body 2.8s ease-in-out infinite; }
  .pip[data-mood="firebird"][data-idling] .pip-wing-left { animation: firebird-idle-wing 2.8s ease-in-out infinite; }
  .pip[data-mood="firebird"][data-idling] .pip-wing-right { animation: firebird-idle-wing-right 2.8s ease-in-out infinite; }
  .pip[data-mood="firebird"][data-idling] .pip-fire-aura { animation: firebird-idle-aura 2.8s ease-in-out infinite; }
  .pip[data-mood="firebird"][data-idling] .pip-fire-outer { animation: firebird-idle-flame 1.8s ease-in-out infinite; }
  .pip[data-mood="firebird"][data-idling] .pip-fire-inner { animation: firebird-idle-flame 2.4s ease-in-out infinite reverse; }
  .pip[data-mood="firebird"][data-idling] .pip-fire-light { animation: firebird-idle-light 2.8s ease-in-out infinite; }
  @keyframes firebird-takeoff {
    0% { transform: none; }
    18% { transform: translateY(7px) scale(1.12, 0.82); }
    25% { transform: translate(-2px, 8px) rotate(-3deg) scale(1.12, 0.82); }
    30% { transform: translate(2px, 8px) rotate(3deg) scale(1.12, 0.82); }
    43% { transform: translateY(-8px) scale(0.94, 1.08); }
    61% { transform: translateY(-24px) scale(1.02); }
    75% { transform: translateY(-13px) rotate(-3deg); }
    88% { transform: translateY(3px) scale(1.06, 0.94); }
    100% { transform: none; }
  }
  @keyframes firebird-anticipate {
    0%, 100% { transform: translateY(-2px); }
    18%, 30% { transform: translateY(6px) rotate(-5deg); }
    43%, 61% { transform: translateY(-5px) rotate(4deg); }
    78% { transform: rotate(-3deg); }
  }
  @keyframes firebird-wing {
    0% { transform: rotate(8deg); }
    18%, 30% { transform: rotate(-24deg); }
    44% { transform: rotate(112deg); }
    61% { transform: rotate(15deg); }
    77% { transform: rotate(82deg); }
    100% { transform: rotate(55deg); }
  }
  @keyframes firebird-wing-right {
    0% { transform: rotate(-8deg); }
    18%, 30% { transform: rotate(24deg); }
    44% { transform: rotate(-112deg); }
    61% { transform: rotate(-15deg); }
    77% { transform: rotate(-82deg); }
    100% { transform: rotate(-55deg); }
  }
  @keyframes firebird-ignite {
    0%, 22% { opacity: 0; transform: translateY(8px) scale(0.45, 0.2); }
    30% { opacity: 0.65; transform: translateY(4px) scale(0.65, 0.5); }
    44% { opacity: 1; transform: translateY(-9px) scale(1.04, 1.1); }
    61% { opacity: 1; transform: translateY(-24px) scale(0.94, 1.1); }
    78% { transform: translateY(-13px) scale(1.05, 0.98); }
    100% { opacity: 1; transform: scale(1.02); }
  }
  @keyframes firebird-light {
    0%, 18% { opacity: 0; transform: translateY(8px) scale(0.35); }
    28% { opacity: 0.4; transform: translateY(4px) scale(0.6); }
    44% { opacity: 1; transform: scale(1.12); }
    64% { opacity: 0.9; transform: scale(1.04); }
    100% { opacity: 0.85; transform: none; }
  }
  @keyframes firebird-core {
    0%, 22% { opacity: 0; transform: scale(0.2, 0.1); }
    32% { opacity: 0.85; transform: scale(0.7, 0.8); }
    42%, 100% { opacity: 1; transform: none; }
  }
  @keyframes firebird-inner {
    0%, 26% { opacity: 0; transform: scale(0.4, 0.25); }
    37% { opacity: 0.9; transform: scale(0.9, 0.85); }
    46% { opacity: 1; transform: scale(1.02, 1.06); }
    58%, 100% { opacity: 1; transform: none; }
  }
  @keyframes firebird-outer {
    0%, 30% { opacity: 0; transform: scale(0.45, 0.35); }
    40% { opacity: 0.9; transform: scale(0.94, 0.85) skewX(-3deg); }
    48% { opacity: 1; transform: scale(1.03, 1.08) skewX(2deg); }
    60% { transform: scale(0.97, 1.03) skewX(-2deg); }
    76% { transform: scale(1.02, 0.98) skewX(1deg); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes firebird-normal-eyes {
    0%, 22% { opacity: 1; }
    30% { opacity: 0.35; }
    44%, 100% { opacity: 0; }
  }
  @keyframes firebird-flame-eyes {
    0%, 22% { opacity: 0; }
    30% { opacity: 0.65; }
    44%, 100% { opacity: 1; }
  }
  @keyframes firebird-charge {
    0%, 8% { opacity: 0; transform: scale(1.2); }
    17% { opacity: 0.9; }
    31% { opacity: 0; transform: translateY(12px) scale(0.55); }
    100% { opacity: 0; }
  }
  @keyframes firebird-ring {
    0%, 30% { opacity: 0; transform: scale(0.25); }
    36% { opacity: 0.85; }
    58%, 100% { opacity: 0; transform: translateY(-8px) scale(1.65); }
  }
  @keyframes firebird-embers {
    0%, 36% { opacity: 0; transform: translateY(12px) scale(0.2); }
    46% { opacity: 1; }
    86%, 100% { opacity: 0; transform: translate(var(--ember-x), var(--ember-y)) scale(0.3) rotate(25deg); }
  }
  @keyframes firebird-colour {
    0%, 27% { fill: var(--pip-feather); stroke: var(--pip-feather-deep); }
    38%, 100% { fill: var(--orange); stroke: var(--orange-deep); }
  }
  @keyframes firebird-deep-colour {
    0%, 27% { fill: var(--pip-feather-deep); stroke: var(--pip-feather-deep); }
    38%, 100% { fill: var(--orange-deep); stroke: var(--orange-deep); }
  }
  @keyframes firebird-shadow {
    0%, 30%, 100% { transform: scaleX(1); opacity: 0.14; }
    61% { transform: scaleX(0.55); opacity: 0.06; }
    88% { transform: scaleX(1.12); opacity: 0.16; }
  }
  @keyframes firebird-idle-body {
    0%, 100% { transform: none; }
    50% { transform: translateY(-1.5px) scale(1.012, 0.988); }
  }
  @keyframes firebird-idle-wing {
    0%, 100% { transform: rotate(55deg); }
    50% { transform: rotate(60deg); }
  }
  @keyframes firebird-idle-wing-right {
    0%, 100% { transform: rotate(-55deg); }
    50% { transform: rotate(-60deg); }
  }
  @keyframes firebird-idle-aura {
    0%, 100% { transform: scale(1.02); }
    50% { transform: translateY(-1.5px) scale(1.025, 1.04); }
  }
  @keyframes firebird-idle-flame {
    0%, 100% { transform: none; }
    50% { transform: scale(0.985, 1.025) skewX(1deg); }
  }
  @keyframes firebird-idle-light {
    0%, 100% { opacity: 0.85; transform: none; }
    50% { opacity: 0.94; transform: scale(1.035); }
  }
}

/* Pip on Today: on a pastel perch, with a speech bubble pointing at it. */
.pip-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.pip-strip[hidden] { display: none; }
.pip-perch { display: grid; place-items: end center; width: 84px; height: 84px; border-radius: 50%; background: var(--tone); }
.pip-perch .pip { --pip-size: 94px; margin-bottom: -4px; }
.pip-bubble { position: relative; width: fit-content; padding: 12px 16px; border-radius: 20px; background: var(--surface); color: var(--foreground); font-family: var(--font-hand); font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
.pip-bubble::before { content: ""; position: absolute; left: -6px; bottom: 16px; width: 14px; height: 14px; border-radius: 3px; background: inherit; transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .pip-strip:not([hidden]) .pip-perch { animation: pip-pop 0.6s var(--ease-spring) both; }
  .pip-strip:not([hidden]) .pip-bubble { animation: rise-in 0.45s var(--ease-out) 0.15s both; }
}

/* In a coloured header Pip takes the doodle's place, and its line is a white sticker. */
.hero-pip { justify-self: end; align-self: end; width: min(100%, 200px); margin: 0 18px 4px 0; }
.hero-pip .pip { --pip-size: 100%; }
.hero-pip[hidden] { display: none; }
/* Firelight needs a dark stage in both themes; the OK sticker keeps dark ink. */
.hero:has(#results-streak-pip:not([hidden])) { --tone: var(--stage); --ring: var(--on-stage); color: var(--on-stage); }
.hero:has(#results-streak-pip:not([hidden])) :is(h1, h2) { color: var(--on-stage); }
.hero:has(#results-streak-pip:not([hidden])) :is(.eyebrow, p) { color: var(--on-stage-muted); }
.hero:has(#results-streak-pip:not([hidden])) :focus-visible { outline-color: var(--on-stage); }
.hero:has(#results-streak-pip:not([hidden]))::after { background: var(--on-stage-muted); }
#results-streak-pip { width: min(100%, 180px); margin: 84px 30px 12px 0; }
#tour-result-pip:has(.pip[data-mood="firebird"]) { width: 88px; height: 88px; margin-top: 52px; margin-right: 16px; overflow: visible; }
#tour-result-pip:has(.pip[data-mood="firebird"]) .pip { --pip-size: 80px; }
@media (max-width: 639px) {
  .hero:has(#results-streak-pip:not([hidden])) { grid-template-columns: minmax(0, 1fr); padding-right: 24px; }
  .hero:has(#results-streak-pip:not([hidden])) .hero-text { padding-bottom: 0; }
  #results-streak-pip { justify-self: center; width: 160px; margin: 112px 0 20px; }
}
.hero:has(.hero-pip:not([hidden])) .doodle { display: none; }
.hero .pip-bubble { background: var(--on-pastel-surface); color: var(--on-pastel); font-size: 0.9rem; }
.hero .welcome-bubble::before { left: auto; right: -6px; }
.hero .welcome-bubble[hidden] { display: none; }

/* ---------- Landing, Join and Log in ---------- */

/*
 * The public screens: the landing page (#welcome), Join and Log in. They
 * wear their own header (brand, Log in, Join now); the app's header and
 * tabs wait behind the account gate (js/account/access.js).
 */
.public-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1088px;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 24px 6px;
}
.public-actions { display: flex; align-items: center; gap: 6px; }
body[data-public="true"] .public-header { display: flex; }
body[data-public="true"] .app-header { display: none; }
/* Join and Log in don't offer themselves. */
body[data-active-screen="join"] .public-actions [href="#join"],
body[data-active-screen="login"] .public-actions [href="#login"] { display: none; }

/*
 * Before the app starts, paint the screen the saved account implies (the
 * inline script in index.html sets data-access), so a visitor never sees
 * the app flash before the landing page, or the other way round.
 */
html[data-access="out"] body:not([data-active-screen]) .public-header { display: flex; }
html[data-access="out"] body:not([data-active-screen]) :is(.app-header, [data-screen="today"]) { display: none; }
html:not([data-access="out"]) body:not([data-active-screen]) [data-screen="welcome"] { display: none; }

@media (max-width: 719px) {
  .public-header { padding-inline: 16px; }
  /* No tab bar on public screens, so no room kept for one. */
  body[data-public="true"] main { padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom, 0px)); }
}


/* A white sticker button on a pastel block: the quieter choice beside the orange push. */
/* The sticker button (white, inked) is drawn with the other inked buttons under Button. */

/* Focus rings stay visible on pastels and ink, in both themes. */
:is(.hero, .bento-tile[data-tone]) :focus-visible { outline-color: var(--on-pastel); }
.landing-close :focus-visible, :is(.next-up, .plan-next) :focus-visible { outline-color: var(--on-ink); }

.screen[data-width="landing"] { max-width: 1040px; }
.landing { gap: var(--space-7); }

/*
 * The landing hero: the headline and its one sentence, Join now and Log
 * in, and Pip waving on the right. On phones the buttons stack beside Pip,
 * under the words.
 */
.landing-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "text text" "actions pip";
  align-items: end;
  gap: 0 4px;
  min-height: 0;
  padding: 30px 12px 0 24px;
}
.landing-hero .hero-text { grid-area: text; gap: 14px; padding-bottom: 22px; }
.landing-hero h1 { font-size: clamp(2.3rem, 10vw, 2.9rem); line-height: 1.04; letter-spacing: -0.045em; }
/* Two beats, one sentence to a line where it fits. */
.landing-line { display: inline-block; }
.landing-hero .lead { max-width: 34ch; font-size: 1rem; }
.landing-actions { grid-area: actions; align-self: start; display: grid; gap: 10px; padding-bottom: 26px; }
.landing-actions .button { padding-inline: 20px; }
.landing-pip { grid-area: pip; width: clamp(80px, calc(100vw - 240px), 128px); margin: 0 0 4px; }
.landing-hero::after {
  -webkit-mask: var(--sparkle) 94% 52% / 16px no-repeat, var(--ring-dot) 64% 72% / 9px no-repeat, var(--sparkle) 70% 92% / 12px no-repeat;
  mask: var(--sparkle) 94% 52% / 16px no-repeat, var(--ring-dot) 64% 72% / 9px no-repeat, var(--sparkle) 70% 92% / 12px no-repeat;
}

@media (min-width: 640px) {
  .landing-hero {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    grid-template-areas: "text pip" "actions pip";
    grid-template-rows: auto 1fr;
    min-height: 400px;
    padding: 56px 28px 0 48px;
  }
  .landing-hero .hero-text { align-self: end; padding-bottom: 28px; }
  .landing-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4rem); }
  .landing-hero .lead { font-size: 1.1rem; }
  .landing-actions { display: flex; flex-wrap: wrap; padding-bottom: 56px; }
  .landing-actions .button { padding-inline: 28px; }
  .landing-pip { width: min(100%, 290px); justify-self: center; }
  .landing-hero::after {
    -webkit-mask: var(--sparkle) 61% 18% / 22px no-repeat, var(--ring-dot) 92% 14% / 11px no-repeat, var(--sparkle) 96% 34% / 14px no-repeat, var(--ring-dot) 60% 66% / 9px no-repeat, var(--sparkle) 64% 90% / 13px no-repeat;
    mask: var(--sparkle) 61% 18% / 22px no-repeat, var(--ring-dot) 92% 14% / 11px no-repeat, var(--sparkle) 96% 34% / 14px no-repeat, var(--ring-dot) 60% 66% / 9px no-repeat, var(--sparkle) 64% 90% / 13px no-repeat;
  }
}

/* Section titles on the landing page read like the screens' titles: 500, the key word at 800. */
.landing-section { display: flex; flex-direction: column; gap: var(--space-5); }
.landing-title { font: 500 clamp(1.75rem, 6vw, 2.5rem)/1.1 var(--font-display); letter-spacing: -0.035em; max-width: 20ch; }

/*
 * What's inside: six tiles of different sizes, each in the colour of the
 * place it shows (Train periwinkle, Read lilac, Medals yellow, Science
 * orange), the plan and the account on grey. One column on phones, two
 * from 640px, the full mosaic from 960px.
 */
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.bento-tile {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 22px;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--foreground);
}
.bento-tile[data-tone] { background: var(--tone); color: var(--on-pastel); }
.bento-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bento-tile h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: inherit; font-size: 1.22rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; }
.bento-text p, .bento-note { color: var(--muted-foreground); font-size: 0.95rem; line-height: 1.5; max-width: 52ch; }
.bento-tile[data-tone] :is(.bento-text p, .bento-note) { color: var(--on-pastel-muted); }
.bento-tile[data-tone] a { color: var(--on-pastel); }
.bento-tile .icon-tile { width: 46px; height: 46px; margin-bottom: 8px; }
/* On a pastel the icon is a thin ring, like Today's numbers. */
.bento-tile[data-tone] .icon-tile { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.bento-tile:not([data-tone]) { flex-direction: row; align-items: flex-start; gap: 16px; }
.bento-tile:not([data-tone]) .icon-tile { margin-bottom: 0; }
.bento-tile .badge { background: var(--surface-raised); }
.bento-note { margin-top: auto; font-size: 0.86rem; }
.bento-note strong { color: var(--on-pastel); font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "train train" "read medals" "read science" "plan account";
  }
  .bento-tile[data-area="train"] { grid-area: train; }
  .bento-tile[data-area="read"] { grid-area: read; }
  .bento-tile[data-area="medals"] { grid-area: medals; }
  .bento-tile[data-area="science"] { grid-area: science; }
  .bento-tile[data-area="plan"] { grid-area: plan; }
  .bento-tile[data-area="account"] { grid-area: account; }
  .bento-tile { padding: 26px; }
}

@media (min-width: 960px) {
  .landing { gap: var(--space-8); }
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "train train read medals" "train train read science" "plan plan account account";
    gap: 14px;
  }
  .bento-tile[data-area="train"] { padding: 30px; }
}

/* The formula behind the main number: white stickers on lilac, the result on a dark sticker. */
.formula { list-style: none; margin: 0; padding: 0; display: grid; justify-items: start; gap: 4px; }
.formula li:not(.formula-sign) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  background: var(--on-pastel-surface);
  color: var(--on-pastel);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}
.formula .icon { width: 18px; height: 18px; }
.formula-sign { padding-left: 20px; color: var(--on-pastel); font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.formula li.formula-result { border-radius: var(--radius-tile); background: var(--on-pastel); color: var(--on-pastel-surface); }
.formula-result strong { font-weight: 700; }

/* Three real medals, fanned and tilted: the page's one off-grid moment. */
.landing-medals { display: flex; align-items: center; padding: 4px 0 0 14px; }
.landing-medals .medal-art {
  --medal-size: 78px;
  margin-left: -16px;
  filter: drop-shadow(0 8px 10px rgb(var(--shadow-color) / 0.28));
  transition: transform 0.35s var(--ease-spring);
}
.landing-medals .medal-art:nth-child(1) { transform: rotate(-12deg); }
.landing-medals .medal-art:nth-child(2) { position: relative; z-index: 1; transform: translateY(-8px) rotate(3deg); --medal-size: 88px; }
.landing-medals .medal-art:nth-child(3) { transform: rotate(13deg); }
@media (hover: hover) and (pointer: fine) {
  .bento-tile:hover .landing-medals .medal-art:nth-child(1) { transform: translateX(-8px) rotate(-18deg); }
  .bento-tile:hover .landing-medals .medal-art:nth-child(2) { transform: translateY(-14px) rotate(0deg); }
  .bento-tile:hover .landing-medals .medal-art:nth-child(3) { transform: translateX(8px) rotate(19deg); }
}

/*
 * "Try a glance": the drill itself, set in the page's own colours like a
 * screen inside the periwinkle tile. The stage and choices are the drill's
 * (.stage, .choice), sized down.
 */
.glance-demo {
  container-type: inline-size;
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding: 14px;
  border-radius: var(--radius-container);
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 20px 34px -24px rgb(var(--shadow-color) / 0.7);
  user-select: none;
  -webkit-user-select: none;
}
.glance-demo:focus-visible { outline: 2px solid var(--on-pastel); outline-offset: 3px; }
.glance-stage { --trial-font-short: clamp(1.25rem, 7cqi, 1.75rem); --trial-font-long: clamp(1.1rem, 5.5cqi, 1.5rem); --trial-font-xlong: clamp(1rem, 4.5cqi, 1.25rem); padding: 12px; border-radius: var(--radius-tile); background: var(--surface); }
/* The row of pictures keeps its place between trials (and shows empty slots before and after), so the tile never jumps. */
.glance-choices { --choice-height: calc((100cqi - 24px) / 4 * 0.82); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.choice-slot { min-width: 0; visibility: hidden; }
.glance-choices .choice-picture { width: clamp(2.4rem, 11vw, 3.4rem); }
.glance-choices .choice-key { top: 6px; left: 8px; font-size: 0.66rem; }
.glance-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.glance-readout { flex: 1 1 16rem; color: var(--muted-foreground); font-size: 0.86rem; line-height: 1.45; }
.glance-foot { display: grid; grid-template-rows: minmax(88px, auto) 48px; align-content: start; gap: 10px; }
.glance-foot .button { justify-self: start; }

/* Straight answers: a grey row per question, the first one open. */
.landing-honest { display: grid; gap: var(--space-5); }
.honest-head { display: grid; gap: 12px; align-content: start; }
.faq { display: grid; gap: 10px; }
.faq-item { border-radius: var(--radius-container); background: var(--surface); transition: background-color 0.2s var(--ease-out); }
.faq-item:has(> summary:hover) { background: var(--surface-muted); }
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-radius: var(--radius-container);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--ease-out); }
.faq-item[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.faq-item > p { padding: 0 22px 20px; color: var(--muted-foreground); max-width: 64ch; }

@media (min-width: 960px) {
  .landing-honest { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-7); align-items: start; }
}

/* On the ink cards the inked buttons lose their outline and stand on a deep lip, as on the dark page. */
:is(.landing-close, .next-up, .plan-next) { --press-outline: transparent; --press-lip: #5d5866; --press-lip-push: var(--orange-deep); }

/* The close: the one ink card on the page, with the cheek push button. */
.landing-close {
  display: grid;
  gap: 22px;
  padding: 32px 26px;
  border-radius: var(--radius-block);
  background: var(--ink);
  color: var(--on-ink-muted);
  box-shadow: 0 26px 44px -30px rgb(var(--shadow-color) / 0.75);
}
.landing-close-text { display: grid; gap: 10px; }
.landing-close h2 { color: var(--on-ink); font: 500 clamp(1.7rem, 6vw, 2.4rem)/1.12 var(--font-display); letter-spacing: -0.035em; max-width: 18ch; }
.landing-close p { max-width: 46ch; }
.landing-close-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.landing-close-login { font-size: 0.94rem; }
.landing-close-login a { color: var(--on-ink); font-weight: 700; }

@media (min-width: 960px) {
  .landing-close { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 44px 52px; }
  .landing-close-actions { flex-direction: column; align-items: flex-end; }
}

/*
 * Early access: while Gulp collects a list (data-launch on <html>, set by
 * main.js from <meta name="glance-launch">), the places that offered Join
 * and Log in offer the list's form instead. Before the script runs the list
 * shows, as it's the default, so nothing flashes.
 */
html:not([data-launch="open"]) [data-join-only] { display: none !important; }
html[data-launch="open"] [data-waitlist-only] { display: none !important; }

.early-access { scroll-margin-block: 96px; }
.early-access:focus { outline: none; }
.early-access-badge { justify-self: start; background: var(--yellow); color: var(--on-pastel); }
.early-access-perks { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.early-access-perks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 12px; color: var(--on-ink); font-size: 0.98rem; line-height: 1.45; }
.early-access-perks .icon { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--yellow); color: var(--on-pastel); }
.early-access-form { align-self: stretch; }
.early-access-test { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--on-ink); font-weight: 700; }
.early-access-test .icon { width: 1.1em; height: 1.1em; }

/* The form: an email and one button, side by side when there's room. */
.waitlist { display: grid; gap: 10px; width: 100%; min-width: 0; }
.waitlist-fields { display: grid; gap: 8px; }
.waitlist-label { font-weight: 700; font-size: 0.94rem; }
.waitlist-row { display: flex; flex-wrap: wrap; gap: 10px; }
.waitlist-row .input { flex: 1 1 220px; min-width: 0; min-height: 52px; border-radius: var(--radius-pill, 999px); padding-inline: 20px; font-size: 1rem; }
.waitlist-row .button { flex: 0 0 auto; }
.waitlist-status { margin: 0; font-size: 0.94rem; line-height: 1.5; }
.waitlist-status:empty { display: none; }
.waitlist-status[data-tone="error"] { color: var(--destructive); font-weight: 600; }
.waitlist-status[data-tone="success"] { padding: 14px 16px; border-radius: 18px; background: var(--surface-sunken); color: var(--foreground); }
.waitlist-status[data-tone="success"] strong { color: var(--success); }
.waitlist-status:focus { outline: none; }
.waitlist-another { margin-left: 2px; }
.waitlist-fine { margin: 0; color: var(--muted-foreground); font-size: 0.82rem; line-height: 1.5; }
.waitlist-fine a { color: inherit; font-weight: 700; }
.waitlist[data-state="joined"] .waitlist-fine { display: none; }
/* Off screen for people and screen readers alike; only form-filling bots find it. */
.waitlist-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* On the ink card. */
.waitlist[data-on-ink] .waitlist-label { color: var(--on-ink); }
.waitlist[data-on-ink] .input { background: var(--on-ink); color: var(--ink); border-color: transparent; }
.waitlist[data-on-ink] .input::placeholder { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.waitlist[data-on-ink] .waitlist-fine { color: var(--on-ink-muted); }
.waitlist[data-on-ink] .waitlist-status[data-tone="error"] { color: var(--on-ink); }
.waitlist[data-on-ink] .waitlist-status[data-tone="success"] { background: color-mix(in srgb, var(--on-ink) 12%, transparent); color: var(--on-ink); }
.waitlist[data-on-ink] .waitlist-status[data-tone="success"] strong { color: var(--yellow); }
.waitlist[data-on-ink] .text-link { color: var(--on-ink); }

/* After a visitor's first result, in the tour. */
.tour-waitlist { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-5); }
.tour-waitlist-title { font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.tour-waitlist-lead { margin: 0; color: var(--muted-foreground); font-size: 1rem; line-height: 1.5; }

@media (min-width: 960px) {
  .early-access { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
  .early-access .landing-close-actions { align-items: stretch; }
}

.landing-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: calc(var(--space-5) * -1);
  padding-top: 20px;
  border-top: 1.5px dashed var(--surface-sunken);
  color: var(--muted-foreground);
  font-size: 0.85rem;
}
.landing-footer p { display: inline-flex; align-items: center; gap: 8px; }
.landing-footer strong { color: var(--foreground); font-weight: 800; letter-spacing: -0.04em; }
.landing-tagline { color: var(--muted-foreground); }
/* Every public page, on its own line: the landing page's and the public pages' footers (site.css). */
.site-footer-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; flex-basis: 100%; order: -1; }
.site-footer-nav a { color: var(--muted-foreground); font-weight: 600; text-decoration: none; }
.site-footer-nav a:hover { color: var(--foreground); text-decoration: underline; }

/* Join and Log in: the welcome doodle's header, then one grey card holding the form. */
.auth-card { display: grid; gap: var(--space-4); padding: 24px; border-radius: var(--radius-card); background: var(--surface); }
.auth-card .callout { background: var(--surface-raised); }
.auth-note > .icon { color: var(--success); }
.field-hint { color: var(--muted-foreground); font-size: 0.82rem; font-weight: 500; }
.auth-switch { color: var(--muted-foreground); font-size: 0.94rem; text-align: center; }
.auth-switch a { font-weight: 700; }
.google-login { display: grid; gap: var(--space-4); }
.button.google-button { background: var(--surface-raised); }
.google-button img { flex: 0 0 20px; object-fit: contain; }
.auth-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--muted-foreground); font-size: 0.88rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-top: 1px solid var(--surface-sunken); }
.auth .hero { min-height: 188px; }
.auth .hero .doodle { max-width: 260px; }

@media (max-width: 479px) {
  .auth-card { padding: 20px; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* Small actions inside a column screen keep their own width. */
.screen > .button[data-size="sm"] { align-self: flex-start; }

/* Screen headings take focus on navigation (for screen readers); no ring for that. */
[data-screen] h1[tabindex="-1"]:focus { outline: none; }

/* ---------- The tour (#start) ---------- */

/* Hallmark · genre: playful · macrostructure: Narrative Workflow · theme: Hum, re-keyed · design-system: DESIGN.md · designed-as-app */

/*
 * A new reader's first screen, and the one place a colour fills the screen:
 * checks alternate lilac (speed test, Sound traps) and periwinkle (Word
 * → Picture, Phrase glance), with each result keeping its check's colour.
 * Hello is periwinkle and the starting point yellow, crossfading as you
 * move on. Words sit on the scene; everything
 * you read closely sits on white sticker cards. Phones get one column with
 * the way on pinned under the thumb; from 960px the story is on the left
 * with its button, the picture on the right.
 */
body[data-active-screen="start"] main { max-width: none; padding: 0; }
body[data-active-screen="start"] { background: var(--scene-hello); }
body[data-active-screen="start"][data-scene="lilac"] { background: var(--scene-lilac); }
body[data-active-screen="start"][data-scene="periwinkle"] { background: var(--scene-periwinkle); }
body[data-active-screen="start"][data-scene="done"] { background: var(--scene-done); }

.tour {
  --scene: var(--scene-hello);
  --perch: var(--perch-hello);
  --tour-accent: var(--periwinkle);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 0;
  max-width: none;
  min-height: 100dvh;
  padding: calc(12px + env(safe-area-inset-top, 0px)) max(20px, calc((100vw - 640px) / 2)) 0;
  overflow-x: clip;
  background: var(--scene);
  color: var(--on-scene);
  touch-action: pan-y;
  transition: background-color 0.55s var(--ease-out);
}
.tour[data-scene="lilac"] { --scene: var(--scene-lilac); --perch: var(--perch-lilac); --tour-accent: var(--lilac); }
.tour[data-scene="periwinkle"] { --scene: var(--scene-periwinkle); --perch: var(--perch-periwinkle); }
.tour[data-scene="done"] { --scene: var(--scene-done); --perch: var(--perch-done); }
.tour:has(.tour-chapter[data-chapter="result"]:not([hidden]) #tour-result-pip .pip[data-mood="firebird"]) {
  --scene: var(--stage);
  --perch: var(--stage);
  --on-scene: var(--on-stage);
  --on-scene-muted: var(--on-stage-muted);
}
.tour-chapter { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; padding: var(--space-4) 0 var(--space-6); }
.tour-story, .tour-visual { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.tour-visual { gap: var(--space-5); }

/* The sky: a few drawn sparkles in the scene's line colour, drifting slowly. */
.tour-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.tour-sky::before, .tour-sky::after { content: ""; position: absolute; inset: -20px; background: var(--on-scene); opacity: 0.4; }
.tour-sky::before {
  -webkit-mask: var(--sparkle) 8% 12% / 18px no-repeat, var(--ring-dot) 88% 9% / 10px no-repeat, var(--sparkle) 94% 44% / 14px no-repeat, var(--ring-dot) 4% 58% / 9px no-repeat, var(--sparkle) 52% 96% / 16px no-repeat;
  mask: var(--sparkle) 8% 12% / 18px no-repeat, var(--ring-dot) 88% 9% / 10px no-repeat, var(--sparkle) 94% 44% / 14px no-repeat, var(--ring-dot) 4% 58% / 9px no-repeat, var(--sparkle) 52% 96% / 16px no-repeat;
}
.tour-sky::after {
  opacity: 0.25;
  -webkit-mask: var(--sparkle) 30% 4% / 11px no-repeat, var(--sparkle) 70% 70% / 22px no-repeat, var(--ring-dot) 18% 88% / 12px no-repeat, var(--sparkle) 60% 30% / 9px no-repeat;
  mask: var(--sparkle) 30% 4% / 11px no-repeat, var(--sparkle) 70% 70% / 22px no-repeat, var(--ring-dot) 18% 88% / 12px no-repeat, var(--sparkle) 60% 30% / 9px no-repeat;
}

/*
 * The bar: a segment per check in the middle, full once done, the next one
 * wider and filling as its pages go by, with how many are done beside it;
 * the way out small and quiet in the corner.
 */
.tour-bar { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; min-height: 44px; }
.tour-progress-wrap { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 10px; min-width: 0; }
.tour-progress { list-style: none; display: flex; align-items: center; gap: 5px; margin: 0; padding: 0; }
.tour-progress li { position: relative; width: 24px; height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--on-scene) 22%, transparent); }
.tour-progress li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--on-scene); transform: scaleX(var(--fill, 0)); transform-origin: left; }
.tour-progress li[data-state="done"]::after { transform: none; }
.tour-progress li[data-state="current"] { width: 40px; box-shadow: inset 0 0 0 1.5px var(--on-scene); }
.tour-count { color: var(--on-scene); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 379px) {
  .tour-progress li { width: 18px; }
  .tour-progress li[data-state="current"] { width: 30px; }
}
.tour-exit { position: relative; grid-column: 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--on-scene); text-decoration: none; background: color-mix(in srgb, var(--on-scene) 9%, transparent); transition: background-color 0.15s var(--ease-out); }
/* A 44px target around the 40px circle. */
.tour-exit::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
.tour-exit .icon { width: 18px; height: 18px; }
.tour-exit:hover, .tour-exit:focus-visible { background: color-mix(in srgb, var(--on-scene) 16%, transparent); }
.tour-exit:active { background: color-mix(in srgb, var(--on-scene) 24%, transparent); }
.tour-exit:focus-visible { outline-color: var(--on-scene); outline-offset: 2px; border-radius: 50%; }
/* Its words show on a pointer's pause or on focus, never by default. */
.tour-exit-tip { position: absolute; top: 50%; right: calc(100% + 8px); padding: 4px 11px; border-radius: var(--radius-pill); background: var(--on-scene); color: var(--scene); font-size: 0.78rem; font-weight: 700; white-space: nowrap; opacity: 0; transform: translateY(-50%); pointer-events: none; transition: opacity 0.18s var(--ease-out); }
.tour-exit:hover .tour-exit-tip { opacity: 1; transition-delay: 0.8s; }
.tour-exit:focus-visible .tour-exit-tip { opacity: 1; transition-delay: 0s; }

/* Words on the scene. */
.tour-title { color: var(--on-scene); font: 500 clamp(2.3rem, 10.5vw, 3rem)/1.04 var(--font-display); letter-spacing: -0.045em; }
.tour-title .mark:has(.tour-title-value) { font-weight: 500; }
.tour-chapter[data-chapter="result"] .tour-title { letter-spacing: -0.03em; text-wrap: pretty; }
.tour-chapter[data-chapter="result"] .tour-title .mark { letter-spacing: inherit; }
.tour-title-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.tour-inline-value { font-weight: 800; font-variant-numeric: tabular-nums; }
/* Data roles: the place's pastel identifies a measured value; units stay
 * smaller, references are outlined, and an opportunity uses a dashed rule. */
.tour-value { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); min-width: 0; }
.tour-value-number { color: inherit; font: 800 1.8rem/1.1 var(--font-num); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tour-value-unit { color: inherit; font: 500 0.875rem/1.4 var(--font-ui); letter-spacing: 0; }
.tour-lead { max-width: 40ch; color: var(--on-scene-muted); font-size: 1.04rem; line-height: 1.5; }
.tour-eyebrow { color: var(--on-scene-muted); font-size: 0.88rem; font-weight: 700; }
.tour-visual-title { margin-bottom: var(--space-3); color: var(--on-scene); font-size: 1.05rem; }
.tour-note { display: flex; align-items: flex-start; gap: 8px; color: var(--on-scene-muted); font-size: 0.86rem; }
.tour-note .icon { flex: none; margin-top: 3px; color: var(--on-scene); }

/* Pip, the guide: on a perch (a pastel disc in dark mode, so Pip always stands on a pastel), with a white bubble. */
.tour-guide { display: flex; align-items: flex-end; gap: 4px; }
.tour-pip { display: grid; place-items: end center; flex: none; width: 112px; height: 112px; border-radius: 50%; background: var(--perch); overflow: hidden; }
.tour-pip .pip { --pip-size: 92px; margin-bottom: -2px; }
.tour-pip:empty, .tour-pip:empty + .tour-bubble { display: none; }
.tour-bubble { margin-bottom: 18px; background: var(--on-pastel-surface); color: var(--on-pastel); font-size: 0.92rem; box-shadow: 0 12px 24px -16px rgb(var(--shadow-color) / 0.5); }
/* On the pages that show data (a result, the starting point, the plan), Pip is company, not the headline: small, so the number comes first. */
.tour-guide[data-size="compact"] .tour-pip { width: 64px; height: 64px; }
.tour-guide[data-size="compact"] .tour-pip .pip { --pip-size: 54px; }
.tour-guide[data-size="compact"] .tour-bubble { margin-bottom: 8px; font-size: 0.88rem; }

/* Sticker cards: white with dark words in both themes, like the pastels; inside, the theme's greys are the light ones. */
:is(.tour-card, .tour-result, .tour-step) {
  --foreground: var(--on-pastel);
  --muted-foreground: var(--on-pastel-muted);
  --surface: var(--sticker-grey);
  --surface-raised: var(--on-pastel-surface);
  --surface-muted: var(--sticker-grey);
  --surface-sunken: var(--sticker-sunken);
  --border: var(--sticker-sunken);
  --ink: var(--on-pastel);
  --on-ink: var(--on-pastel-surface);
  --ring: var(--on-pastel);
  --success: var(--on-pastel-success);
  --success-muted: var(--sticker-success-muted);
  --destructive: var(--sticker-destructive);
  color: var(--on-pastel);
  background: var(--on-pastel-surface);
  box-shadow: 0 1px 2px rgb(var(--shadow-color) / 0.06), 0 22px 44px -28px rgb(var(--shadow-color) / 0.55);
}
.tour-card { border-radius: var(--radius-card); }

/*
 * The path: the four checks and the reader profile as stops on a trail that
 * winds down the screen, each leaning left or right of a middle line
 * (--swing), with two dots leading from the stop before (--from). Done
 * stops are white discs with the plan's orange check and what they found;
 * the next is the orange push button with Start bobbing over it; stops
 * still to come are faded discs. Each label sits to the right of its disc.
 */
.tour-map { --axis: 34%; --lean: 50px; --node: 64px; position: relative; min-width: 0; padding: var(--space-2) 0 var(--space-6); }
.tour-map[hidden] { display: none; }
.tour-path { list-style: none; display: grid; margin: 0; padding: 0; }
.path-stop { --x: calc(var(--axis) + var(--swing, 0) * var(--lean)); --from-x: calc(var(--axis) + var(--from, 0) * var(--lean)); position: relative; display: grid; }
/* Two dots between stops, a third and two thirds of the way from the last disc to this one. */
.path-trail { position: relative; display: block; height: 30px; }
.path-trail > span { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--on-scene) 28%, transparent); translate: -50% -50%; }
.path-trail > span:first-child { top: 30%; left: calc(var(--from-x) + (var(--x) - var(--from-x)) * 0.33); }
.path-trail > span:last-child { top: 74%; left: calc(var(--from-x) + (var(--x) - var(--from-x)) * 0.67); }
.path-trail[data-done] > span { background: var(--orange); }
.path-link { position: relative; display: grid; grid-template-columns: var(--node) minmax(0, 1fr); align-items: center; gap: var(--space-4); min-height: var(--node); margin-left: calc(var(--x) - var(--node) / 2); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.path-spot { position: relative; display: grid; place-items: center; width: var(--node); height: var(--node); }
.path-node { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--on-pastel-surface); color: var(--on-pastel); --icon-tint: var(--tone); box-shadow: 0 5px 0 color-mix(in srgb, var(--on-scene) 22%, transparent); transition: translate 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out); }
.path-node .icon { width: 46%; height: 46%; }
.path-node .plan-check { right: -5px; bottom: -3px; box-shadow: 0 0 0 3px var(--scene); }
.path-stop[data-state="todo"] .path-node { background: color-mix(in srgb, var(--on-scene) 10%, transparent); color: var(--on-scene); --icon-tint: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-scene) 24%, transparent); }
.path-stop[data-state="todo"] .path-node .icon { opacity: 0.6; }
.path-stop[data-kind="goal"][data-state="todo"] .path-node { box-shadow: none; outline: 2px dashed color-mix(in srgb, var(--on-scene) 40%, transparent); outline-offset: -2px; }
/* The next stop: larger, the orange push button, with Start over it like a speech bubble. */
.path-stop[data-state="current"] { --node: 80px; }
.path-stop[data-state="current"] .path-trail { height: 76px; }
.path-stop[data-state="current"] .path-trail > span:first-child { top: 14%; }
.path-stop[data-state="current"] .path-trail > span:last-child { top: 34%; }
/* Under a check's sheet the next stop is already open, so it has no Start over it, nor the room for one. */
.tour[data-chapter="check"] .path-stop[data-state="current"] .path-trail { height: 30px; }
.tour[data-chapter="check"] .path-stop[data-state="current"] .path-trail > span:first-child { top: 30%; }
.tour[data-chapter="check"] .path-stop[data-state="current"] .path-trail > span:last-child { top: 74%; }
.path-stop[data-state="current"]:first-child { padding-top: 40px; }
.path-stop[data-state="current"] .path-node { background: var(--highlight); --icon-tint: var(--on-pastel-surface); box-shadow: 0 6px 0 var(--orange-deep), 0 0 0 7px color-mix(in srgb, var(--on-pastel-surface) 42%, transparent); }
.path-stop[data-state="current"] a.path-link:hover .path-node { translate: 0 -2px; box-shadow: 0 8px 0 var(--orange-deep), 0 0 0 7px color-mix(in srgb, var(--on-pastel-surface) 60%, transparent); }
.path-stop[data-state="current"] a.path-link:active .path-node { translate: 0 4px; box-shadow: 0 2px 0 var(--orange-deep), 0 0 0 7px color-mix(in srgb, var(--on-pastel-surface) 42%, transparent); }
.path-cue { position: absolute; bottom: calc(100% + 12px); left: 50%; z-index: 1; padding: 5px 14px; border-radius: var(--radius-pill); background: var(--on-pastel-surface); color: color-mix(in srgb, var(--orange-deep) 78%, var(--on-pastel)); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; translate: -50% 0; box-shadow: 0 8px 18px -10px rgb(var(--shadow-color) / 0.5); }
.path-cue::after { content: ""; position: absolute; top: 100%; left: 50%; border: 7px solid transparent; border-top-color: var(--on-pastel-surface); translate: -50% -1px; }
.path-label { display: grid; justify-items: start; gap: 4px; min-width: 0; padding-right: var(--space-2); }
.path-name { font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.path-stop[data-state="current"] .path-name { font-size: 1.14rem; }
.path-stop[data-state="todo"] .path-label { color: var(--on-scene-muted); }
.path-minutes { color: var(--on-scene-muted); font-size: 0.84rem; }
.path-minutes .tour-value-number { color: var(--on-scene); font-size: 1rem; letter-spacing: 0; }
.path-minutes .tour-value-unit { font-size: 0.8125rem; }
/* What a done check found, on a white sticker: its own pastel would vanish on a scene of the same colour. */
.path-result { width: fit-content; padding: 4px 10px; border-radius: var(--radius-input); background: var(--on-pastel-surface); color: var(--on-pastel); font-size: 0.84rem; font-weight: 500; line-height: 1.4; box-shadow: 0 6px 14px -10px rgb(var(--shadow-color) / 0.5); }
/* Under the path, the reassurance that stopping is fine; on a check's sheet the sheet has the say. */
.tour-map-note { margin-top: var(--space-5); }
.tour[data-chapter="check"] .tour-map-note { display: none; }
a.path-link:focus-visible { outline: none; }
a.path-link:focus-visible .path-node { outline: 3px solid var(--on-scene); outline-offset: 6px; }
@media (max-width: 379px) {
  .tour-map { --lean: 34px; --node: 56px; }
  .path-stop[data-state="current"] { --node: 70px; }
  .path-link { gap: var(--space-3); }
}

/* The skills a check measures, by their skill-map names and icons. */
.measure-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; }
.measure-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 8px; border-radius: var(--radius-pill); background: var(--surface); font-size: 0.78rem; font-weight: 700; line-height: 1.5; }
.measure-chips .icon { width: 15px; height: 15px; flex: none; }

/* Try it: a white sticker with the sum, the sliders, and Pip naming the reader. */
.tour-lab-head { display: grid; gap: 2px; }
.tour-lab-head p { color: var(--muted-foreground); font-size: 0.9rem; }
.tour-verdict { display: flex; align-items: flex-end; gap: 6px; min-height: 92px; }
.tour-lab-pip { display: grid; place-items: end center; flex: none; width: 76px; height: 76px; border-radius: 50%; background: var(--lilac); overflow: hidden; }
.tour-lab-pip .pip { --pip-size: 62px; margin-bottom: -2px; }
.tour-lab-pip:empty { display: none; }
.tour-verdict .tour-bubble { margin-bottom: 12px; background: var(--sticker-grey); box-shadow: none; font-weight: 500; }
.tour-verdict .tour-bubble strong { display: block; font-weight: 800; }

/*
 * Try it, for a drill: the drill's own stage and answers (.stage, .choice)
 * sized into the sticker, with Pip on the check's accent reacting below.
 * Pictures and scenes are sized from the card's width, not the screen's.
 */
.tour-taste { container-type: inline-size; display: grid; gap: var(--space-4); padding: var(--space-5); user-select: none; -webkit-user-select: none; }
.tour-taste:focus-visible { outline: 2px solid var(--on-pastel); outline-offset: 3px; }
.tour-taste h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 1.2rem; }
.tour-taste-count { color: var(--muted-foreground); font-size: 0.86rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tour-taste-count { min-width: 3.6rem; min-height: 1.4em; }
.tour-taste-count:empty { visibility: hidden; }
/* An empty count still has a line of text, so its baseline (and the heading's height) is the same before and after it fills in. */
.tour-taste-count:empty::before { content: "\00a0"; }
.tour-taste .tour-lab-pip { background: var(--tour-accent); }
.tour-taste-prompt { display: grid; align-items: center; justify-self: stretch; min-height: 48px; margin: 0; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--tour-accent); color: var(--on-pastel); font-size: 0.95rem; font-weight: 700; line-height: 1.3; text-align: center; }
.tour-taste-choices { --cell: calc((100cqi - 8px) / 2); --choice-height: calc(var(--cell) * 0.82); min-height: 0; gap: 8px; }
.tour-taste-choices[data-layout="grid"] { --cell: calc((100cqi - 24px) / 4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tour-taste-choices[data-layout="grid"] .choice-picture { width: calc(var(--cell) * 0.66); }
.tour-taste-choices[data-layout="scenes"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tour-taste-choices[data-layout="scenes"] { --choice-height: calc(var(--cell) * 0.8); }
.tour-taste-choices[data-layout="answers"] { --choice-height: 76px; }
/* Quiet skeletons show where words and answers belong, without revealing a trial. */
.tour-taste[data-state="idle"] .tour-taste-stage { position: relative; padding-top: 64px; font: 500 0.85rem/1.4 var(--font-ui); }
.tour-taste[data-state="idle"] .tour-taste-stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(44%, 140px);
  height: 18px;
  border-radius: 6px;
  background: var(--surface-sunken);
  transform: translate(-50%, -50%);
}
.tour-taste-choices .choice-slot,
.tour-taste-choices[data-state="waiting"] .choice {
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible;
  position: relative;
  border-radius: var(--radius-container);
  background: var(--surface);
  box-shadow: none;
  opacity: 1;
  transform: none;
  pointer-events: none;
}
.tour-taste-choices[data-state="waiting"] .choice > * { visibility: hidden; }
.choice-placeholder { display: none; }
.tour-taste-choices .choice-slot .choice-placeholder,
.tour-taste-choices[data-state="waiting"] .choice > .choice-placeholder {
  display: block;
  visibility: visible;
  position: absolute;
  width: 66%;
  height: auto;
  max-width: 64px;
  opacity: 0.1;
  color: var(--muted-foreground);
  --icon-tint: var(--surface-sunken);
}
.tour-taste-choices[data-layout="answers"] .choice-slot::before,
.tour-taste-choices[data-layout="answers"][data-state="waiting"] .choice::before {
  content: "";
  position: absolute;
  width: 44%;
  max-width: 56px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.tour-taste .tour-verdict { min-height: 112px; align-items: center; }
.tour-taste .tour-lab-pip { width: 44px; height: 44px; }
.tour-taste .tour-bubble { margin: 0; font-size: 0.9rem; line-height: 1.45; }
.tour-taste .choice-key { top: 6px; left: 8px; font-size: 0.66rem; }
.tour-taste .scene[data-kind] { --thing-size: calc(var(--cell) * 0.41); }
.tour-taste .scene[data-kind="row"][data-count="2"] { --thing-size: calc(var(--cell) * 0.32); }
.tour-taste .scene[data-kind="row"][data-count="3"] { --thing-size: calc(var(--cell) * 0.24); }
.tour-taste .scene[data-kind="row"][data-count="4"] { --thing-size: calc(var(--cell) * 0.19); }
.tour-taste .scene[data-kind="pair"] { --thing-size: calc(var(--cell) * 0.29); }
.tour-taste .scene[data-kind][data-axis="horizontal"] { --thing-size: calc(var(--cell) * 0.25); }
/* Reserve wrapped feedback on phones without leaving a large empty row on wider cards. */
@container (min-width: 300px) {
  .tour-taste .tour-verdict { min-height: 88px; }
}
@container (min-width: 480px) {
  .tour-taste .tour-verdict { min-height: 72px; }
  .tour-taste-choices[data-layout="scenes"] { --cell: calc((100cqi - 24px) / 4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tour-taste > .button { justify-self: start; min-height: 48px; }

/* The full drill uses the same picture proportions as its warm-up. */
.drill .choices { container-type: inline-size; --cell: calc((100cqi - 10px) / 2); }
.drill .choices[data-count="6"] { --cell: calc((100cqi - 20px) / 3); }
.drill .choices[data-count="8"] { --cell: calc((100cqi - 24px) / 4); }
.drill .scene[data-kind] { --thing-size: calc(var(--cell) * 0.41); }
.drill .scene[data-kind="row"][data-count="3"] { --thing-size: calc(var(--cell) * 0.24); }
.drill .scene[data-kind="row"][data-count="4"] { --thing-size: calc(var(--cell) * 0.19); }
.drill .scene[data-kind="pair"] { --thing-size: calc(var(--cell) * 0.29); }
.drill .scene[data-kind][data-axis="horizontal"] { --thing-size: calc(var(--cell) * 0.25); }
@media (min-width: 640px) {
  .drill .choices[data-count="4"] { --cell: calc((100cqi - 30px) / 4); }
}

/*
 * Under a check's frames, the rest waits behind a pill each: what's good to
 * know, why it matters and, for a drill, the warm-up. They sit in a row; the
 * one opened takes the row's width and opens under its pill.
 */
.tour-more { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-3); }
.tour-more > details[open] { flex-basis: 100%; }
.tour-more > details[hidden] { display: none; }
.tour-tips .tour-evidence-body { margin: 0; padding-left: 1.1em; font-size: 0.9rem; line-height: 1.45; }
.tour-more .tour-taste { margin-top: var(--space-1); }

/* One test, three numbers, and what it also sets. */

.tour-evidence { color: var(--on-scene-muted); }
.tour-evidence summary { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 14px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--on-scene) 10%, transparent); color: var(--on-scene); font-size: 0.86rem; font-weight: 700; list-style: none; cursor: pointer; }
.tour-evidence summary::-webkit-details-marker { display: none; }
/* The pill stays compact; its tap area reaches 44px. */
.tour-evidence summary { position: relative; }
.tour-evidence summary::before { content: ""; position: absolute; inset: -5px 0; }
.tour-evidence summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--ease-out); }
.tour-evidence[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.tour-evidence[open], .tour-evidence-body { display: grid; gap: 10px; }
.tour-evidence p { max-width: 60ch; font-size: 0.9rem; }
.tour-evidence .text-link { color: var(--on-scene); }

/* How a check goes: three sticker frames side by side, each a small working copy of the check's own screen over its step. */
.tour-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; }
.tour-step { position: relative; display: grid; align-content: start; gap: var(--space-2); padding: 6px 6px 12px; border-radius: var(--radius-container); }
.tour-step .intro-stage { height: 92px; padding: 6px; }
.tour-step .intro-question { max-width: 100%; background: var(--tour-accent); white-space: normal; text-align: center; line-height: 1.25; }
.tour-step .intro-step-number { top: 11px; left: 11px; }
.tour-step .intro-step-text { padding: 0 6px; }
.tour-step .intro-step-text strong { font-size: 0.84rem; line-height: 1.3; }
/* A frame is a third of the row, so its flash, mask and answers fit the frame rather than the How it works page's wider stage. */
.tour-step .intro-flash { width: 100%; }
.tour-step .intro-flash .intro-mask { width: min(7em, 100%); }
.tour-step .intro-flash[data-length="long"] .intro-word { font-size: 0.8rem; }
/* The detail under each step is for wide screens; on a phone the step's title says it. */
@media (max-width: 959px) {
  .tour-step .intro-step-text span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tour-step .intro-choices { grid-template-columns: repeat(2, minmax(0, 32px)); gap: 4px; }
  .tour-step .intro-choices[data-layout] { grid-template-columns: repeat(2, minmax(0, 44px)); }
  .tour-step .intro-choice { height: 32px; border-radius: 8px; }
  .tour-step .intro-choices[data-layout="scenes"] .intro-choice { height: 40px; }
  .tour-step .intro-picture { width: 22px; height: 22px; }
  .tour-step .tour-pill { padding: 4px 8px; font-size: 0.6rem; }
  .tour-step .tour-pill .icon { display: none; }
}
.tour-stage { gap: 0; }
.tour-stage[data-kind="start"], .tour-stage[data-kind="finish"] { grid-template-rows: auto auto; align-content: center; }
.tour-page { display: grid; gap: 6px; width: 78px; padding: 10px; border-radius: 10px; background: var(--surface-raised); }
.tour-line { display: block; height: 5px; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.tour-line:nth-child(2) { width: 86%; }
.tour-line:nth-child(3) { width: 58%; }
.tour-page[data-state="covered"] .tour-line { opacity: 0.45; }
.tour-pill { display: inline-flex; align-items: center; gap: 4px; margin-top: -9px; padding: 4px 9px; border-radius: var(--radius-pill); font-size: 0.64rem; font-weight: 700; white-space: nowrap; }
.tour-pill .icon { width: 12px; height: 12px; }
.tour-pill[data-kind="start"] { background: var(--ink); color: var(--on-ink); }
.tour-pill[data-kind="finish"] { background: var(--orange); color: var(--on-pastel); }
@media (max-width: 379px) {
  .tour-step .intro-stage { height: 80px; }
  .tour-pill { gap: 0; padding: 3px 7px; font-size: 0.56rem; }
  .tour-pill .icon { display: none; }
}
.tour-guess { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 96px; }
.tour-guess-chip { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--surface-raised); font-size: 0.68rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tour-guess-chip[data-chosen] { background: var(--ink); color: var(--on-ink); }
.tour-guess-unsure { padding: 0 9px; }

/* The passage the test will use, with a way to choose another. */
.tour-passage { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 14px; padding: 14px 18px 14px 14px; border-radius: var(--radius-container); }
/* A visitor's medals at the starting point, waiting to be kept: the coins in a row, slightly overlapping like a hand of cards, then the words. */
.tour-medals { display: grid; gap: 12px; padding: 16px 20px; border-radius: var(--radius-container); }
.tour-medals-art { display: flex; padding-left: 10px; }
.tour-medals-art > * { margin-left: -10px; filter: drop-shadow(0 6px 10px rgb(var(--shadow-color) / 0.25)); }
.tour-medals-text { display: grid; gap: 2px; min-width: 0; }
.tour-medals-text strong { font-size: 1.06rem; font-weight: 700; line-height: 1.3; }
.tour-medals-text span { color: var(--muted-foreground); font-size: 0.88rem; line-height: 1.4; }
/* Beside their names where there's room, so the starting point's main button stays on a laptop's first screen. */
@media (min-width: 600px) {
  .tour-medals { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
}

/*
 * The result's spotlight, after the reading measure: where the reader's number
 * stands, as a heading, two bars from zero and one line of where the
 * comparison comes from. The reader's own bar is ink; the one it's set
 * against is outlined, so the two never rest on colour alone, and every
 * value is written at its bar's tip.
 */
.tour-spotlight { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-card); }
.tour-spotlight-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.tour-comparison-finding { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.tour-comparison-finding .tour-value-number { color: var(--on-pastel); font-size: clamp(3.5rem, 14vw, 4.5rem); line-height: 1; }
.tour-comparison-finding .tour-value-unit { flex: 1; min-width: 12ch; max-width: 22ch; color: var(--muted-foreground); font-size: 1rem; font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.tour-spotlight-note { color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.5; text-wrap: pretty; }
.compare { list-style: none; display: grid; gap: var(--space-4); margin: 0; padding: 0; }
.compare-row { display: grid; gap: var(--space-2); min-width: 0; }
.compare-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); min-width: 0; }
.compare-name { color: var(--muted-foreground); font-size: 0.875rem; font-weight: 500; }
.compare-row[data-emphasis] .compare-name { color: var(--foreground); font-size: 1rem; font-weight: 800; }
.compare-track { display: block; height: 12px; border-radius: var(--radius-pill); background: var(--surface); }
.compare-bar { display: block; width: calc(var(--share, 0) * 100%); height: 100%; border-radius: inherit; background: var(--surface-sunken); box-shadow: inset 0 0 0 1.5px var(--on-pastel-muted); transform-origin: left; }
.compare-row[data-emphasis] .compare-track { height: 32px; margin-bottom: 4px; border-radius: var(--radius-input); }
.compare-row[data-emphasis] .compare-bar { background: var(--tone); box-shadow: inset 0 0 0 2px var(--on-pastel), 0 4px 0 var(--compare-depth), 0 8px 12px -8px rgb(var(--shadow-color) / 0.5); }
.compare-value { justify-content: flex-end; color: var(--foreground); }
.compare-value .tour-value-number { font-size: 2rem; }
.compare-value .tour-value-unit { font-size: 0.8125rem; }
.compare-row:not([data-emphasis]) .compare-value { color: var(--muted-foreground); }
.compare-row:not([data-emphasis]) .compare-value .tour-value-number { font-size: 1.5rem; font-weight: 600; }

/* What a check page will tell you, on the scene under what to do. */
.tour-finds { display: flex; align-items: flex-start; gap: 10px; max-width: 44ch; color: var(--on-scene); font-size: 1rem; font-weight: 600; line-height: 1.45; }
.tour-finds .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.tour-finds:empty { display: none; }
/* Why it matters, opened: its first line is the case in one sentence, the rest the studies behind it. */
.tour-evidence .tour-evidence-lead { color: var(--on-scene); font-size: 0.98rem; font-weight: 600; }
.tour-passage .icon-tile { grid-row: span 2; width: 50px; height: 50px; }
.tour-passage-text { display: grid; min-width: 0; }
.tour-passage-eyebrow { color: var(--muted-foreground); font-size: 0.8rem; font-weight: 600; }
.tour-passage-text strong { font-weight: 700; line-height: 1.3; }
.tour-passage-meta { color: var(--muted-foreground); font-size: 0.84rem; }
.tour-passage .text-link { grid-column: 2; font-size: 0.86rem; }
@media (min-width: 480px) {
  .tour-passage { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tour-passage .icon-tile { grid-row: auto; }
  .tour-passage .text-link { grid-column: 3; }
}

/* Your starting point: the number on the ink card, the four checks, the profile and where the plan begins. */
:is(.tour-headline, .tour-answer-review) { border-radius: var(--radius-card); background: var(--ink); color: var(--on-ink); box-shadow: 0 22px 44px -26px rgb(var(--shadow-color) / 0.6); }
.tour-headline { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "label parts" "measure parts" "context context" "extra extra" "tools tools"; gap: var(--space-3) var(--space-4); padding: var(--space-5); }
.tour-headline-label { grid-area: label; display: flex; align-items: flex-start; gap: var(--space-2); color: var(--on-ink); font-size: 1rem; font-weight: 600; line-height: 1.4; }
.tour-headline-label > .icon { --icon-tint: var(--tone); flex: none; width: 20px; height: 20px; margin-top: var(--space-1); }
.tour-measure { grid-area: measure; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); align-self: start; }
:is(.tour-headline-number, .tour-part-number) { display: flex; align-items: center; width: 100%; min-height: calc(1em + 2 * var(--space-2)); padding: var(--space-2) var(--space-3); border-radius: var(--radius-input); font: 800 clamp(2rem, 12cqw, 3.5rem)/1 var(--font-num); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tour-headline-number { background: var(--tone); color: var(--on-pastel); }
.tour-headline-unit { max-width: 14ch; color: var(--on-ink-muted); font-size: 0.875rem; line-height: 1.5; }
.tour-parts { grid-area: parts; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; }
/* A supporting measurement has the main one's anatomy: the same label, the
 * number in a block of the same size and shape, the unit on one line beneath.
 * Only the fill differs: the place's pastel marks the main measurement, the
 * ink's own muted tone the one that explains it. */
.tour-part { display: grid; align-content: start; gap: var(--space-3); min-width: 0; }
.tour-part dt { color: var(--on-ink); font-size: 1rem; font-weight: 600; line-height: 1.4; }
.tour-part dd { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; margin: 0; }
.tour-part-number { background: var(--measurement-badge); color: var(--on-ink); }
.tour-part-number .tour-value-number { font: inherit; letter-spacing: inherit; }
.tour-part-unit { max-width: 18ch; color: var(--on-ink-muted); font-size: 0.875rem; line-height: 1.5; }
.tour-count-value { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); }
.tour-count-total { color: var(--on-ink-muted); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
/* Side by side, the two labels share a row and so do the two blocks, even when one label wraps. */
@container (min-width: 19.01rem) {
  .tour-parts:has(> .tour-part:only-child) { grid-template-rows: subgrid; row-gap: normal; }
  .tour-parts > .tour-part:only-child { grid-row: 1 / span 2; grid-template-rows: subgrid; row-gap: normal; }
}
.tour-headline-context { grid-area: context; max-width: 52ch; padding-top: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--on-ink) 20%, transparent); color: var(--on-ink-muted); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.tour-headline-sum { max-width: 52ch; margin-top: var(--space-3); color: var(--on-ink-muted); font-size: 0.875rem; line-height: 1.5; text-wrap: pretty; }
.tour-headline-sum strong { display: block; width: fit-content; margin-bottom: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: 8px; background: var(--tone); color: var(--on-pastel); font-size: 1rem; font-weight: 800; }
.tour-measure-tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.tour-calculation { min-width: 0; }
/* Opening keeps the summary where it was tapped; the badge moves below the working instead. */
.tour-calculation[open] { flex-basis: 100%; }
.tour-calculation summary { display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; min-height: 44px; list-style: none; color: var(--on-ink-muted); font-size: 0.875rem; cursor: pointer; border-radius: var(--radius-input); transition: color 0.15s var(--ease-out); }
/* The drawn chevron every disclosure uses (DESIGN.md · Disclosures), not the browser's triangle. */
.tour-calculation summary::-webkit-details-marker { display: none; }
.tour-calculation summary::after { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--ease-out); }
.tour-calculation[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.tour-calculation summary:hover { color: var(--on-ink); }
.tour-calculation summary:active { background: var(--measurement-badge); color: var(--on-ink); }
.tour-calculation summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.tour-potential { grid-area: extra; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed color-mix(in srgb, var(--on-ink) 40%, transparent); }
.tour-potential-label { color: var(--on-ink); font-size: 0.9rem; font-weight: 600; }
.tour-potential-note { margin-top: var(--space-1); color: var(--on-ink-muted); font-size: 0.875rem; line-height: 1.5; }
.tour-potential-value { flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: 1.5px dashed var(--on-pastel); border-radius: var(--radius-input); background: var(--orange); color: var(--on-pastel); }
.tour-potential-value .tour-value-number { font-size: 2rem; }
.tour-potential-value .tour-value-unit { font-size: 0.8125rem; }
.tour-result-feedback { display: inline-flex; align-items: center; gap: var(--space-1); width: fit-content; max-width: 100%; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--periwinkle); color: var(--on-pastel); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; }
.tour-result-feedback .icon { flex: none; width: 16px; height: 16px; }
.tour-result-feedback[data-tone="good"] { background: var(--sticker-success-muted); color: var(--sticker-success); }
.tour-result-feedback[data-tone="gold"] { background: var(--yellow); }
/* Reading record: a speed headline, then meaning and comprehension as a
 * paired receipt. The speed is already above, so it is never repeated here.
 * Hallmark · macrostructure: Stat-Led reading record · design-system: DESIGN.md
 */
.tour-headline[data-kind="reading"] { grid-template-areas: "label parts" "measure parts" "context context" "tools tools"; }
.tour-headline[data-kind="reading"] .tour-potential { margin-top: var(--space-4); }
.tour-story { container-type: inline-size; }
/* Small phones and enlarged text stack the receipt instead of squeezing
 * either measurement. Wider phones keep their paired values. */
@container (max-width: 19rem) {
  .tour-headline, .tour-headline[data-kind="reading"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "measure" "parts" "context" "extra" "tools"; }
}
.tour-headline-growth { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; color: var(--on-ink); font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
.tour-headline-growth .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
/* A disclosure, not a second result: one 44px row on the ink, opening to the review. */
.tour-answer-review { padding: var(--space-2) var(--space-5); }
.tour-answer-review[open] { padding-bottom: var(--space-5); }
.tour-answer-review summary { min-height: 44px; color: var(--on-ink); font-size: 0.875rem; }
.tour-answer-review summary .icon-tile { width: 28px; height: 28px; }
/* One line at 320px too: Bricolage runs a little wider than the old face. */
#tour-answer-review-label { white-space: nowrap; }
@media (max-width: 359px) {
  .tour-answer-review { padding-inline: var(--space-4); }
}
.tour-answer-review summary .icon { color: var(--on-pastel); }
.tour-answer-review summary:active { color: var(--on-ink-muted); }
.tour-answer-review summary:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 4px; border-radius: 4px; }
.tour-answer-review .review { margin-top: var(--space-2); }
/* The question's kind sits above it as a label, so the question wraps on its own left edge. */
.tour-answer-review .review-prompt .badge { display: flex; width: fit-content; margin: 0 0 var(--space-1); }
/* Each answer is a white sticker row in both themes, as everything read closely in the tour is:
 * dark words, the sticker greys, and the fixed sticker green and red, so a dark-mode
 * ink card (light) never holds darker holes or pale marks. */
.tour-answer-review .review-item {
  --foreground: var(--on-pastel);
  --muted-foreground: var(--on-pastel-muted);
  --surface: var(--sticker-grey);
  --surface-raised: var(--sticker-grey);
  --surface-muted: var(--sticker-grey);
  --surface-sunken: var(--sticker-sunken);
  --border: var(--sticker-sunken);
  --success: var(--sticker-success);
  --success-muted: var(--sticker-success-muted);
  --destructive: var(--sticker-destructive);
  --destructive-muted: var(--sticker-destructive-muted);
  background: var(--on-pastel-surface);
  color: var(--on-pastel);
  box-shadow: inset 0 0 0 1px var(--sticker-sunken);
}
.tour-results { container-type: inline-size; list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); margin: 0; padding: 0; }
.tour-result { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: "icon text value"; align-items: center; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); border-radius: var(--radius-container); }
.tour-result .icon-tile { grid-area: icon; width: 48px; height: 48px; }
.tour-result > div { grid-area: text; display: grid; gap: var(--space-1); min-width: 0; }
.tour-result strong { font-weight: 700; line-height: 1.3; }
.tour-result-detail { color: var(--muted-foreground); font-size: 1rem; line-height: 1.5; }
.tour-result-value { grid-area: value; flex-direction: column; align-items: center; justify-content: center; align-self: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-input); background: var(--tone); color: var(--on-pastel); text-align: center; }
.tour-result-value .tour-value-number { font-size: 1.7rem; font-weight: 800; }
.tour-result-value .tour-value-unit { font-size: 0.8125rem; }
/* On phones the number stays on the right, level with the check's name, and
 * the line about it runs the card's width underneath: a list of scores to
 * scan, not four tall cards. */
@media (max-width: 479px) {
  .tour-result { grid-template-areas: "icon name value" "icon detail detail"; align-items: center; gap: var(--space-1) var(--space-3); }
  .tour-result > div { display: contents; }
  .tour-result > div > strong { grid-area: name; }
  .tour-result-detail { grid-area: detail; }
  .tour-result-value { flex-direction: row; align-items: baseline; padding: var(--space-1) var(--space-2); }
  .tour-result-value .tour-value-number { font-size: 1.35rem; }
  .tour-result .icon-tile { align-self: start; width: 40px; height: 40px; }
}
/* Enlarged labels and scores each keep their own row on narrow screens. */
@container (max-width: 17rem) {
  .tour-result { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon name" "detail detail" "value value"; }
  .tour-result > div { display: contents; }
  .tour-result > div > strong { grid-area: name; }
  .tour-result-detail { grid-area: detail; }
}
.tour-profile { position: relative; display: grid; gap: var(--space-2); padding: var(--space-5); }
/* The profile's icon sits in the corner, as on the ink card, so the profile's name starts the card. */
.tour-profile-art { position: absolute; top: 18px; right: 18px; width: 56px; height: 56px; }
.tour-profile > .eyebrow, .tour-profile > h2 { padding-right: 64px; }
.tour-profile h2 { font-size: 1.3rem; letter-spacing: -0.03em; }
.tour-profile-summary { max-width: 62ch; color: var(--muted-foreground); font-size: 0.92rem; }
.tour-focus { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1.5px dashed var(--surface-sunken); font-weight: 600; }
.tour-focus .icon { flex: none; width: 20px; height: 20px; color: var(--orange-deep); }
.tour-focus-reason { max-width: 62ch; color: var(--muted-foreground); font-size: 0.9rem; }

/*
 * Hello is the path, under Pip and the title: the path takes the rest of the
 * screen, and its next stop is the way on, so there is no button bar.
 */
.tour[data-chapter="hello"] { grid-template-rows: auto auto 1fr; }
@media (max-width: 959px) {
  .tour-chapter[data-chapter="hello"] { gap: var(--space-3); padding-bottom: var(--space-2); }
  .tour-chapter[data-chapter="hello"] .tour-story { gap: var(--space-3); }
  .tour-chapter[data-chapter="hello"] .tour-title { font-size: clamp(2rem, 8.6vw, 2.4rem); }
  .tour-chapter[data-chapter="hello"] .tour-lead { font-size: 1rem; }
  .tour-chapter[data-chapter="hello"] .tour-guide[data-size="compact"] .tour-bubble { margin-bottom: 4px; }
}
.tour-actions:empty { display: none; }

/*
 * Below 960px a check is a sheet that rises over the path: white, like
 * every sticker, its top rounded, with Back and Start pinned at its foot.
 * The path stays still behind it, faded but for the next stop, and moves
 * up so that stop sits in the space above the sheet (aimPath). Back from a
 * result, the stamp lands first and the sheet follows.
 */
@media (max-width: 959px) {
  .tour[data-chapter="check"] { grid-template-rows: auto 1fr; height: 100dvh; min-height: 0; overflow: hidden; }
  .tour[data-chapter="check"] .tour-bar { position: relative; z-index: 3; background: var(--scene); box-shadow: 0 0 0 100vmax var(--scene); clip-path: inset(-12px -100vmax 0); }
  .tour[data-chapter="check"] .tour-map { translate: 0 var(--map-shift, 0px); transition: translate 0.6s var(--ease-out) var(--sheet-delay, 0s); }
  /* Only the discs and dots fade, so every label keeps its contrast. */
  .tour[data-chapter="check"] .path-stop:not([data-state="current"], [data-fresh]) :is(.path-spot, .path-trail) { opacity: 0.45; }
  .tour[data-chapter="check"][data-stamped] { --sheet-delay: 0.9s; }
  .tour-sheet:not([hidden]),
  .tour[data-chapter="check"] .tour-actions {
    --on-scene: var(--on-pastel);
    --on-scene-muted: var(--on-pastel-muted);
    --foreground: var(--on-pastel);
    --muted-foreground: var(--on-pastel-muted);
    --surface: var(--sticker-grey);
    --surface-raised: var(--on-pastel-surface);
    --surface-muted: var(--sticker-grey);
    --surface-sunken: var(--sticker-sunken);
    --border: var(--sticker-sunken);
    --ink: var(--on-pastel);
    --on-ink: var(--on-pastel-surface);
    --ring: var(--on-pastel);
    position: fixed;
    right: 0;
    left: 0;
    padding-inline: max(20px, calc((100vw - 640px) / 2));
    background: var(--on-pastel-surface);
    color: var(--on-pastel);
  }
  .tour-sheet:not([hidden]) {
    bottom: 0;
    z-index: 4;
    display: block;
    max-height: calc(100dvh - 116px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: var(--space-6);
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -20px 44px -24px rgb(var(--shadow-color) / 0.6);
  }
  /* A grabber says it's a sheet; a tap on the path above closes it. */
  .tour-sheet::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 5px; border-radius: var(--radius-pill); background: var(--sticker-sunken); translate: -50% 0; }
  .tour[data-chapter="check"] .tour-actions { bottom: 0; z-index: 5; padding-top: var(--space-3); box-shadow: 0 -1px 0 var(--sticker-sunken); }
  .tour-sheet .tour-story { gap: var(--space-3); }
  .tour-sheet .tour-title { font-size: clamp(1.7rem, 7.4vw, 2.1rem); }
  .tour-sheet .tour-lead { font-size: 0.98rem; line-height: 1.45; }
  .tour-sheet .tour-finds { font-size: 0.94rem; }
  .tour-sheet .tour-finds { max-width: none; }
  .tour-sheet .tour-more { gap: 6px; }
  .tour-sheet .tour-evidence summary { gap: 6px; padding: 6px 11px; font-size: 0.8rem; }
  /* Inside the white sheet, its stickers are outlined rather than lifted. */
  .tour-sheet :is(.tour-step, .tour-passage, .tour-taste) { box-shadow: inset 0 0 0 1.5px var(--sticker-sunken); }
}
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
  .tour-sheet:not([hidden]), .tour[data-chapter="check"] .tour-actions { animation: tour-sheet-up 0.45s var(--ease-out) var(--sheet-delay, 0s) both; }
  @keyframes tour-sheet-up { from { translate: 0 100%; } }
}

/* The way on, pinned under the thumb on phones: Back (an arrow below 480px) and the one thing to do next. */
:root:has(body[data-active-screen="start"]) { scroll-padding-bottom: calc(6rem + 32px); }
.tour-actions { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); background: var(--scene); }
.tour-actions .button { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; }
.tour-actions .button[data-role="back"] { flex: none; }
/* One hover cue: shadow on a raised button, fill on a quiet one. Physical
 * depression belongs to activation. Disabled native buttons stay explicit. */
.tour .button:is([data-variant="primary"], [data-variant="highlight"]):hover:not(:active) { transform: translateY(0); }
.tour .button:disabled { cursor: not-allowed; }
@media (max-width: 479px) {
  .tour-actions .button[data-role="back"] { width: 56px; padding: 0; }
  .tour-back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Tabbing never leaves the focused control under the pinned buttons. */
.tour :is(a, button, input, summary) { scroll-margin: 80px 0 calc(6rem + 32px); }
/* On a sticker, focus rings take the sticker's dark line. */
.tour-card :focus-visible { outline-color: var(--on-pastel); }

/* From 960px: the story and its button on the left, the picture on the right, both centred in the screen. */
@media (min-width: 960px) {
  .tour {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-rows: auto 1fr auto auto 1fr;
    grid-template-areas: "bar bar" ". visual" "story visual" "actions visual" ". visual";
    column-gap: clamp(48px, 6vw, 96px);
    padding: 24px max(48px, calc((100vw - 1180px) / 2)) 40px;
  }
  .tour-bar { grid-area: bar; }
  .tour-chapter:not([hidden]) { display: contents; }
  .tour-story { grid-area: story; gap: var(--space-5); padding-top: var(--space-5); }
  .tour-visual { grid-area: visual; align-self: center; padding: var(--space-6) 0; }
  .tour-map { --axis: 30%; --lean: 72px; --node: 72px; grid-area: visual; align-self: center; padding: var(--space-6) 0; }
  .tour-map .path-stop[data-state="current"] { --node: 88px; }
  .tour-actions { grid-area: actions; position: static; justify-content: flex-start; padding: var(--space-6) 0 var(--space-5); background: none; }
  .tour-actions .button { flex: none; min-width: 210px; }
  .tour-actions .button[data-role="back"] { min-width: 0; }
  .tour-title { font-size: clamp(3rem, 4.6vw, 4.4rem); }
  .tour-lead { font-size: 1.15rem; }
  .tour-pip { width: 148px; height: 148px; }
  .tour-pip .pip { --pip-size: 122px; }
  .tour-guide[data-size="compact"] .tour-pip { width: 80px; height: 80px; }
  .tour-guide[data-size="compact"] .tour-pip .pip { --pip-size: 66px; }
  /* Evidence can continue down the right without moving the reader's
   * result and next action down the left. No spacer rows on these pages. */
  .tour:is([data-chapter="result"], [data-chapter="done"], [data-chapter="plan"]) {
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "bar bar" "story visual" "actions visual" ". visual";
    column-gap: var(--space-7);
  }
  .tour:is([data-chapter="result"], [data-chapter="done"], [data-chapter="plan"]) .tour-story { align-self: start; gap: var(--space-4); }
  .tour:is([data-chapter="result"], [data-chapter="done"], [data-chapter="plan"]) .tour-visual { align-self: start; padding-top: var(--space-5); }
  .tour:is([data-chapter="result"], [data-chapter="done"], [data-chapter="plan"]) .tour-actions { align-self: start; padding-top: var(--space-5); }
  .tour:is([data-chapter="result"], [data-chapter="done"], [data-chapter="plan"]) .tour-title { font-size: clamp(2.5rem, 3.75vw, 3rem); }
  .tour[data-chapter="plan"] .tour-lead { font-size: 1rem; }
  /* The one off-grid moment: the three frames lie slightly askew, like cards dealt on a table. */
  .tour-step:nth-child(1) { transform: rotate(-1.6deg); }
  .tour-step:nth-child(2) { transform: rotate(1.2deg) translateX(10px); }
  .tour-step:nth-child(3) { transform: rotate(-0.6deg); }
}

.tour-chapter:is([data-chapter="result"], [data-chapter="done"], [data-chapter="plan"]) { gap: var(--space-5); }
.tour-chapter:is([data-chapter="result"], [data-chapter="done"], [data-chapter="plan"]) .tour-guide[data-size="compact"] .tour-pip { width: 48px; height: 48px; }
.tour-chapter:is([data-chapter="result"], [data-chapter="done"], [data-chapter="plan"]) .tour-guide[data-size="compact"] .tour-pip .pip { --pip-size: 42px; }
@media (max-width: 959px) {
  .tour-headline, .tour-spotlight { padding: var(--space-4); }
  .tour-comparison-finding .tour-value-number { font-size: 3.5rem; }
}
@media (max-width: 479px) {
  .compare-row { gap: var(--space-1); }
  .compare-value .tour-value-number { font-size: 1.5rem; }
  .compare-row:not([data-emphasis]) .compare-value .tour-value-number { font-size: 1.25rem; }
  .compare-row[data-emphasis] .compare-track { height: 24px; }
  .compare-track { height: 8px; }
  .tour-spotlight-note { font-size: 0.8125rem; }
  .tour-answer-review { padding-inline: var(--space-4); }
}

/*
 * Results arrive as a short reading sequence: finding, supporting evidence,
 * then the way on. Bars grow from the same zero to their true proportions.
 * Default content is visible; reduced motion keeps all measurements still.
 */
@media (prefers-reduced-motion: no-preference) {
  .tour-chapter[data-chapter="result"] [data-result-entrance="waiting"] { opacity: 0; transform: translateY(40px); }
  .tour-chapter[data-chapter="result"]:not([hidden]) [data-result-entrance="shown"] { animation: tour-result-arrive 0.65s var(--ease-press) var(--result-arrival, 0ms) both; }
  .tour-chapter[data-chapter="result"] .tour-title { --result-arrival: 40ms; }
  .tour-chapter[data-chapter="result"] .tour-lead { --result-arrival: 80ms; }
  .tour-chapter[data-chapter="result"] .tour-headline { --result-arrival: 100ms; }
  .tour-chapter[data-chapter="result"] .tour-spotlight { --result-arrival: 160ms; }
  .tour-chapter[data-chapter="result"] .tour-answer-review { --result-arrival: 240ms; }
  .tour-chapter[data-chapter="result"] .tour-note { --result-arrival: 280ms; }
  .tour-chapter[data-chapter="result"]:not([hidden]) :is(.tour-headline, .tour-spotlight)[data-result-entrance="shown"] > * { animation: tour-result-detail 0.4s var(--ease-out) calc(var(--result-arrival, 0ms) + var(--result-detail, 180ms)) backwards; }
  .tour-chapter[data-chapter="result"] :is(.tour-headline, .tour-spotlight) > :nth-child(2) { --result-detail: 220ms; }
  .tour-chapter[data-chapter="result"] :is(.tour-headline, .tour-spotlight) > :nth-child(3) { --result-detail: 260ms; }
  .tour-chapter[data-chapter="result"] :is(.tour-headline, .tour-spotlight) > :nth-child(n+4) { --result-detail: 300ms; }
  .tour-chapter[data-chapter="result"]:not([hidden]) .tour-spotlight[data-result-entrance="shown"] .compare-bar { animation: tour-result-bar 0.65s var(--ease-out) var(--bar-arrival, 300ms) backwards; }
  .tour-chapter[data-chapter="result"] .compare-row:nth-child(2) { --bar-arrival: 360ms; }
  @keyframes tour-result-arrive { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes tour-result-detail { from { opacity: 0; transform: translateY(8px); } }
  @keyframes tour-result-bar { from { transform: scaleX(0); } }
  /* Arriving on the path, its stops pop in down the trail; back from a check, its tick stamps in, then its result, then the dots on to the next stop fill. */
  .tour[data-chapter="hello"] .path-stop { animation: tour-pop 0.5s var(--ease-out) both; animation-delay: calc(160ms + var(--stop, 0) * 90ms); }
  .path-stop[data-fresh] .plan-check { animation: tour-stamp 0.55s var(--ease-spring) 0.35s both; }
  .path-stop[data-fresh] .path-result { animation: tour-rise 0.5s var(--ease-out) 0.55s both; }
  .path-trail[data-fresh] > span { animation: path-dot 0.3s var(--ease-out) 0.8s both; }
  .path-trail[data-fresh] > span:last-child { animation-delay: 0.95s; }
  /* The next stop calls twice, and its Start bobs. */
  .path-stop[data-state="current"] .path-node { animation: path-call 1.4s var(--ease-out) 1s 2 both; }
  .path-cue { animation: path-bob 1.8s ease-in-out 0.6s infinite; }
  .tour-chapter:not([hidden]) .tour-step { animation: tour-deal 0.55s var(--ease-out) both; animation-delay: calc(200ms + var(--stop, 0) * 110ms); }
  /* The bar's next segment fills from where it was; the one just done fills to the end. */
  .tour-progress li[data-state="current"]::after { animation: tour-fill 0.6s var(--ease-out) 0.2s both; }
  .tour-progress li[data-fresh]::after { animation: tour-fill 0.7s var(--ease-out) 0.5s both; }
  .tour-taste-line.is-changed, .tour-taste .tour-bubble.is-changed { animation: rise-in 0.3s var(--ease-out); }
  .tour-verdict .tour-bubble.is-changed { animation: rise-in 0.3s var(--ease-out); }
  .tour-page[data-state="covered"] .tour-line { animation: tour-uncover 2.8s steps(1, end) infinite; }
  .tour-pill { animation: tour-press 2.8s var(--ease-out) infinite; }
  .tour-pill[data-kind="finish"] { animation-delay: 1.2s; }
  .tour-guess-chip[data-chosen] { animation: tour-choose 2.8s var(--ease-out) infinite; }
  @keyframes tour-rise { from { opacity: 0; transform: translate(14px, 18px); } }
  @keyframes tour-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
  @keyframes tour-deal { from { opacity: 0; transform: translateY(24px) rotate(-4deg); } }
  @keyframes tour-fill { from { transform: scaleX(var(--from, 0)); } }
  @keyframes tour-stamp { from { opacity: 0; transform: scale(2.4) rotate(-25deg); } }
  @keyframes path-call { 50% { box-shadow: 0 6px 0 var(--orange-deep), 0 0 0 16px color-mix(in srgb, var(--on-pastel-surface) 18%, transparent); } }
  @keyframes path-bob { 50% { translate: -50% -5px; } }
  @keyframes path-dot { from { background: color-mix(in srgb, var(--on-scene) 28%, transparent); scale: 0.4; } }
  @keyframes number-pop { from { transform: scale(0.86); } }
  @keyframes tour-uncover { 0% { opacity: 0.45; } 34% { opacity: 1; } 92% { opacity: 0.45; } }
  @keyframes tour-press { 0%, 22% { transform: translateY(0); } 28% { transform: translateY(2px); } 36%, 100% { transform: translateY(0); } }
  @keyframes tour-choose {
    0%, 30% { background: var(--surface-raised); color: var(--foreground); transform: scale(1); }
    38% { transform: scale(1.18); }
    46%, 100% { background: var(--ink); color: var(--on-ink); transform: scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour, body[data-active-screen="start"] { transition: none; }
}

/* ---------- Today while the four checks are under way ---------- */

/* How far through: a bar per check on the welcome header, done ones in the pastels' dark line. */
.start-meter { display: grid; gap: 6px; }
.start-meter-bars { display: flex; gap: 5px; }
.start-meter-bars span { width: 30px; height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--on-pastel-surface) 65%, transparent); }
.start-meter-bars span[data-done="true"] { background: var(--on-pastel); }
.start-meter-label { color: var(--on-pastel); font-size: 0.86rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero .text-link { color: var(--on-pastel); font-size: 0.86rem; }
.welcome .hero-text { gap: 12px; }

/* Next up holds the check's start button and, for the speed test, How it works beside it. */
.next-up > .next-up-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 10px; }
.next-up-actions .button { margin-top: 0; }
.next-up .text-link { color: var(--on-ink); }

/* A check's skills sit on the grey row as white chips. */
.plan-item .measure-chips { margin-top: 4px; }
.plan-item .measure-chips li { background: var(--surface-raised); }
/* The profile row: what the checks unlock, not a step of its own. */
.plan-item[data-state="locked"] { background: transparent; border: 1.5px dashed var(--surface-sunken); }
.plan-item[data-state="locked"] .plan-meta { font-size: 0.84rem; }
.plan-lock { display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted-foreground); }
.plan-lock .icon { width: 20px; height: 20px; }

/* A drill's How it works page names the skill it measures, as the tour does. */
.intro-measures { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 0.84rem; font-weight: 600; }
.intro-measures .measure-chips { margin: 0; }

/* ---------- The month plan (#month) ---------- */

/*
 * A plan for each calendar month: its promise (the forecast, a white sticker
 * in Progress's yellow header), how it's going (the story card and its
 * meter), the month day by day (the chart, its own section), the rhythm that
 * drives it, and what's still to come, by date. Nothing here is ever red: a
 * lighter month is a path from here, not a warning. Colours are the
 * --forecast-*, --chart-bar, --today-line and --meter-mark tokens, each 3:1
 * or better against what it sits on.
 */

/* The row on Today and Progress that leads here. */
.month-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border-radius: var(--radius-container);
  background: var(--surface);
  color: var(--foreground);
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
.month-link > .icon { width: 18px; height: 18px; color: var(--muted-foreground); }
.month-link .icon-tile { width: 52px; height: 52px; }
.month-link-text { display: grid; gap: var(--space-1); min-width: 0; }
.month-link-eyebrow { color: var(--muted-foreground); font-size: 0.78rem; font-weight: 700; }
.month-link-text strong { font-size: 0.95rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.month-link-detail { color: var(--muted-foreground); font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.month-link:active { background: var(--surface-sunken); }
@media (hover: hover) and (pointer: fine) {
  .month-link:hover { background: var(--surface-muted); }
}

/* The header: Change rhythm is a quiet link to the rhythm's section; Pip shrinks on phones so the month's state reaches the first screen. */
.month-hero .month-change { color: var(--on-pastel); font-size: 0.86rem; }
@media (max-width: 479px) {
  .month-hero .hero-pip { width: min(100%, 132px); }
  .month-hero .pip-bubble { font-size: 0.84rem; padding: var(--space-2) var(--space-3); }
}

/* The promise, on a white sticker in the header: where the rhythm can take your usual by the month's last day. */
.month-forecast { grid-column: 1 / -1; display: grid; gap: var(--space-3) var(--space-6); margin: var(--space-1) var(--space-5) var(--space-5) 0; padding: var(--space-4) var(--space-5) var(--space-5); border-radius: var(--radius-container); background: var(--on-pastel-surface); color: var(--on-pastel); box-shadow: 0 14px 30px -20px rgb(var(--shadow-color) / 0.5); }
.month-forecast-main, .month-forecast-aside { display: grid; gap: var(--space-2); min-width: 0; }
.month-forecast-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--yellow); color: var(--on-pastel); font-size: 0.8rem; font-weight: 700; }
.month-forecast-eyebrow .icon { width: 15px; height: 15px; }
.month-forecast-figure { display: grid; gap: 2px; margin: 0; }
.month-forecast-figure strong { width: fit-content; color: var(--on-pastel); font: 800 clamp(2.4rem, 11vw, 3.4rem)/1 var(--font-num); letter-spacing: -0.04em; transform-origin: left bottom; }
.hero .month-forecast-figure > span, .hero .month-forecast-line { color: var(--on-pastel-muted); font-size: 0.9rem; font-weight: 600; }
.month-forecast-title { font: 700 clamp(1.25rem, 4.6vw, 1.5rem)/1.2 var(--font-display); letter-spacing: -0.03em; color: var(--on-pastel); }
.month-forecast-title:focus, .month-story .story-title:focus { outline: none; }
.month-forecast-dots li { box-shadow: inset 0 0 0 2px var(--sticker-sunken); }
.month-forecast-dots li[data-done] { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--on-pastel); }
/* Now, and the range ahead, on one line. */
.month-forecast-bar { position: relative; height: 36px; }
.month-forecast-bar::before { content: ""; position: absolute; left: 0; right: 0; top: var(--space-2); height: 6px; border-radius: var(--radius-pill); background: var(--sticker-grey); }
.month-forecast-range { position: absolute; top: 6px; height: 10px; border-radius: var(--radius-pill); background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--on-pastel); }
.hero .month-forecast-now { position: absolute; top: 0; padding-top: 22px; transform: translateX(-50%); color: var(--on-pastel); font-size: 0.76rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.month-forecast-now::before { content: ""; position: absolute; top: var(--space-1); left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--on-pastel-surface), 0 0 0 3.5px var(--on-pastel); transform: translateX(-50%); }

/* The month's target: start to target as one bar, filled as far as your usual has come,
 * a tick per weekly checkpoint (ink once met, orange today), Now as the orange dot, the flag at the end. */
.month-target-bar { position: relative; display: grid; gap: var(--space-2); padding-top: 22px; }
.month-target-track { position: relative; height: 10px; overflow: hidden; border-radius: var(--radius-pill); background: var(--sticker-grey); box-shadow: inset 0 0 0 1.5px var(--sticker-sunken); }
.month-target-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--on-pastel); transform: scaleX(var(--share)); transform-origin: left; }
.month-target-tick { position: absolute; top: 20px; left: calc(var(--at) * 100%); width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: var(--sticker-sunken); }
.month-target-tick[data-state="met"] { background: var(--on-pastel); }
.month-target-tick[data-state="today"] { background: var(--orange); }
.month-target-dot { position: absolute; top: 18px; left: calc(var(--at) * 100%); width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--on-pastel-surface), 0 0 0 3.5px var(--on-pastel); }
.hero .month-target-now { position: absolute; top: 0; left: calc(var(--at) * 100%); color: var(--on-pastel); font-size: 0.76rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.month-target-now[data-align="start"] { transform: translateX(-9px); }
.month-target-now[data-align="end"] { transform: translateX(calc(-100% + 9px)); }
.hero .month-target-ends { display: flex; justify-content: space-between; color: var(--on-pastel-muted); font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.month-target-goal { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--on-pastel); }
.month-target-goal .icon { width: 14px; height: 14px; }
.hero .month-target-progress { margin: 0; color: var(--on-pastel); font-size: 0.88rem; font-weight: 600; }
.month-forecast[data-status="reached"] .month-forecast-eyebrow { background: var(--sticker-success-muted); }
.month-forecast[data-status="reached"] .month-target-fill { background: var(--orange); }
@media (min-width: 640px) {
  .month-forecast { margin: var(--space-1) var(--space-6) var(--space-6) 0; padding: var(--space-5) var(--space-6) var(--space-6); }
}
@media (min-width: 720px) {
  .month-forecast[data-kind="target"] { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3) var(--space-7); }
}
@media (prefers-reduced-motion: no-preference) {
  .month-forecast-figure strong.is-changed { animation: number-pop 0.32s var(--ease-out); }
}

/* How it's going: the progress story's card, with the month's own chip. */
.month-story .story-head > .icon-tile { grid-row: span 3; }
.month-chip { background: var(--yellow-soft); }
.month-chip[data-tone="success"] { background: var(--success-muted); color: var(--success); }
.month-fresh { display: grid; gap: var(--space-2); justify-items: start; }
.month-fresh .hint { font-size: 0.84rem; }
.month-fresh .button[data-variant="secondary"] { background: var(--surface-raised); }
@media (hover: hover) and (pointer: fine) {
  .month-fresh .button[data-variant="secondary"]:hover { background: var(--surface-muted); }
}

/* Minutes practised (ink), on course for (a dashed stretch: planned), and the plan by today (a mark). */
.month-meter { display: grid; gap: var(--space-2); }
.month-meter-track { position: relative; display: block; height: 12px; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.month-meter[data-size="sm"] .month-meter-track { height: 6px; margin: 2px 0; }
.month-meter-course, .month-meter-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--share)); }
.month-meter-course { border: 1.5px dashed var(--muted-foreground); }
.month-meter[data-size="sm"] .month-meter-course { border-width: 1px; }
.month-meter-fill { background: var(--ink); }
.month-meter-mark { position: absolute; top: -3px; bottom: -3px; left: calc(var(--at) * 100%); width: 4px; margin-left: -2px; border-radius: 2px; background: var(--meter-mark); box-shadow: 0 0 0 2px var(--surface); }
.month-meter-labels { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); margin: 0; color: var(--muted-foreground); font-size: 0.86rem; font-weight: 600; }
.month-meter-labels strong { color: var(--foreground); font: 800 1.15rem var(--font-num); letter-spacing: -0.02em; }
.month-meter-keys { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.month-meter-key { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.month-meter-key::before { content: ""; flex: none; }
.month-meter-key[data-kind="mark"]::before { width: 4px; height: 12px; border-radius: 2px; background: var(--meter-mark); }
.month-meter-key[data-kind="course"]::before { width: 16px; height: 8px; border-radius: var(--radius-pill); border: 1.5px dashed var(--muted-foreground); }
@media (prefers-reduced-motion: no-preference) {
  .month-meter-fill, .month-meter-course { animation: month-grow 0.9s var(--ease-out) both; }
  .month-meter-course { animation-delay: 0.15s; }
}
@keyframes month-grow { from { transform: scaleX(0); } }

/* Day by day: two panels on one row of days, on the grey of Progress's charts. Solid hairlines are the grid; dashes are only ever "planned". */
.month-days-caption { margin-top: calc(-1 * var(--space-2)); font-size: 0.86rem; }
.month-chart { padding: var(--space-4) var(--space-3) var(--space-3); }
.month-legend { list-style: none; margin: 0 0 var(--space-2); padding: 0 var(--space-1); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--muted-foreground); font-size: 0.8rem; font-weight: 600; }
.month-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.month-legend-item::before { content: ""; flex: none; display: inline-block; }
.month-legend-item[data-kind="usual"]::before { width: 16px; height: 2px; border-radius: 2px; background: var(--series-1); }
.month-legend-item[data-kind="reading"]::before { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); }
.month-legend-item[data-kind="band"]::before { width: 16px; height: 10px; border-radius: 3px; background: var(--forecast-band); box-shadow: inset 0 0 0 1px var(--forecast-edge); }
.month-legend-item[data-kind="bar"]::before { width: 8px; height: 12px; border-radius: 2px 2px 0 0; background: var(--chart-bar); }
.month-legend-item[data-kind="goal"]::before { width: 16px; height: 0; border-top: 2px dashed var(--muted-foreground); }
.month-chart-note { margin: 0 var(--space-1) var(--space-2); color: var(--muted-foreground); font-size: 0.84rem; }
.month-grid line { stroke: var(--grid); stroke-width: 1; stroke-dasharray: none; }
.month-grid .month-baseline { stroke: var(--surface-sunken); }
.month-grid .month-panel-label { font-family: var(--font-ui); }
.month-future { fill: var(--surface-muted); }
.month-band { fill: var(--forecast-band); }
.month-band-edge { fill: none; stroke: var(--forecast-edge); stroke-width: 1; }
.month-band-mid { fill: none; stroke: var(--forecast-edge); stroke-width: 1.5; stroke-dasharray: 4 4; }
.month-band-label, .month-goal-label { fill: var(--muted-foreground); font: 600 10.5px var(--font-ui); font-variant-numeric: tabular-nums; }
.month-usual { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.month-usual-label { fill: var(--foreground); font: 800 12px var(--font-num); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.month-reading { fill: var(--muted-foreground); stroke: var(--surface); stroke-width: 2; }
.month-usual-end { fill: var(--orange); stroke: var(--series-1); stroke-width: 2; }
.month-bar { fill: var(--chart-bar); }
.month-bar[data-before] { fill: var(--muted-foreground); opacity: 0.5; }
.month-goal { stroke: var(--muted-foreground); stroke-width: 1.5; stroke-dasharray: 4 4; }
.month-goal[data-past] { opacity: 0.45; }
.month-today line { stroke: var(--today-line); stroke-width: 1.5; }
.month-today text { fill: var(--foreground); font: 700 11px var(--font-ui); }
.month-days text { fill: var(--muted-foreground); font: 500 11px var(--font-num); font-variant-numeric: tabular-nums; }
.month-tooltip { min-width: 152px; max-width: 180px; }
.month-tooltip-row { color: var(--foreground); font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.month-table { margin-top: var(--space-2); padding: 0 var(--space-1); font-size: 0.86rem; }
.month-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.month-table th, .month-table td { padding: var(--space-2); text-align: left; border-bottom: 1px solid var(--grid); }
.month-table thead th { color: var(--muted-foreground); font-size: 0.78rem; font-weight: 700; }
.month-table tbody th { font-weight: 700; }

/* A quiet action: underlined words with a full-size tap target. */
.text-action { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-1); border: 0; border-radius: var(--radius-input); background: none; color: var(--foreground); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.text-action:active { color: var(--muted-foreground); }
@media (hover: hover) and (pointer: fine) {
  .text-action:hover { text-decoration-thickness: 2px; }
}

/* The rhythm: two choices, what they mean, and Use this rhythm only while something is being tried. */
.rhythm-card { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-container); background: var(--surface); }
.rhythm-card .segmented { --pill: var(--surface-raised); }
.rhythm-field { display: grid; gap: var(--space-2); }
.rhythm-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); padding: var(--space-2) var(--space-3) var(--space-1); border-radius: var(--radius-input); background: var(--surface-raised); font-size: 0.88rem; font-weight: 500; }
.rhythm-suggest .icon { width: 18px; height: 18px; color: var(--orange-deep); }
.rhythm-suggest > span { flex: 1 1 12rem; padding-block: var(--space-1); }
.rhythm-preview { font-weight: 600; font-variant-numeric: tabular-nums; }
.rhythm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.rhythm-undo { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); font-size: 0.9rem; font-weight: 600; }
.rhythm-card .hint { font-size: 0.84rem; }

/* Still to come: what the month holds, by date, as a list rather than a stack of cards. */
.month-focus { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; }
.month-focus .icon-tile { width: 40px; height: 40px; flex: none; }
.month-agenda { list-style: none; margin: 0; padding: 0; display: grid; }
.month-agenda-item { display: grid; grid-template-columns: 48px auto minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--grid); }
.month-agenda-item:last-child { border-bottom: 0; }
.month-agenda-item .icon-tile { width: 44px; height: 44px; }
.month-agenda-date { display: grid; justify-items: center; gap: 0; padding: var(--space-1) 0; border-radius: var(--radius-input); background: var(--surface); }
.month-agenda-weekday { color: var(--muted-foreground); font-size: 0.7rem; font-weight: 700; }
.month-agenda-date strong { font: 800 1.25rem/1.1 var(--font-num); font-variant-numeric: tabular-nums; }
.month-agenda-text { display: grid; gap: 2px; min-width: 0; }
.month-agenda-text strong { font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.month-agenda-text span { color: var(--muted-foreground); font-size: 0.84rem; font-weight: 600; }
.month-agenda-empty { color: var(--muted-foreground); font-size: 0.9rem; }

/* Last month, checked against its own forecast. */
.month-review { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-container); border: 1.5px dashed var(--surface-sunken); }
.month-review h2 { font-size: 1.05rem; }
.month-review-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: 0.9rem; }
.month-review-lines li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); }
.month-review-lines .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--success); }

@media (max-width: 479px) {
  .month-forecast { padding: var(--space-4) var(--space-4) var(--space-5); }
  .rhythm-card { padding: var(--space-4); }
  .month-chart { padding: var(--space-3) var(--space-1) var(--space-2); }
}

/* What each daily time buys: the target each one makes, as rows on the rhythm card; the one shown is ink. */
.rhythm-buys { display: grid; gap: var(--space-2); }
.rhythm-buys-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rhythm-buy { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 3rem; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: 6px var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--foreground); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.rhythm-buy:hover { background: var(--surface-muted); }
.rhythm-buy[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.rhythm-buy:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.rhythm-buy-name { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
.rhythm-buy-yours { padding: 1px 7px; border-radius: var(--radius-pill); background: var(--yellow); color: var(--on-pastel); font-size: 0.68rem; font-weight: 800; }
.rhythm-buy-bar { position: relative; height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-muted); }
.rhythm-buy-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--yellow); transform: scaleX(var(--share)); transform-origin: left; }
.rhythm-buy[aria-pressed="true"] .rhythm-buy-bar { background: color-mix(in srgb, var(--on-ink) 18%, var(--ink)); }
.rhythm-buy-value { font: 800 1rem/1 var(--font-num); text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .rhythm-buy-bar::after { transition: transform 0.4s var(--ease-out); }
  .month-target-fill { animation: month-target-grow 0.9s var(--ease-out); }
}
@keyframes month-target-grow { from { transform: scaleX(0); } }
/* The target on the month chart: where the expected path ends. */
.month-target-mark { fill: var(--orange); stroke: var(--surface); stroke-width: 2; }
.month-target-label { fill: var(--foreground); font: 800 0.72rem var(--font-num); }

/* Skill targets on the month plan: a grey row per drill skill, the drill one tap away. */
.month-skills { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.month-skill { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4); border-radius: var(--radius-container); background: var(--surface); color: var(--foreground); text-decoration: none; transition: background-color 0.2s var(--ease-out); }
.month-skill:hover { background: var(--surface-muted); }
.month-skill:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.month-skill > .icon { width: 20px; height: 20px; color: var(--muted-foreground); }
.month-skill-text { display: grid; gap: var(--space-1); min-width: 0; }
.month-skill-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); }
.month-skill-name { font-size: 0.92rem; font-weight: 700; }
.month-skill-chip { padding: 2px 9px; border-radius: var(--radius-pill); background: var(--periwinkle); color: var(--on-pastel); font-size: 0.7rem; font-weight: 800; }
.month-skill-chip[data-kind="reached"] { background: var(--success-muted); color: var(--success); }
.month-skill-figure { font: 800 1.15rem/1.25 var(--font-num); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.month-skill-condition { color: var(--muted-foreground); font: 600 0.82rem/1.25 var(--font-ui); letter-spacing: 0; }
.month-skill-bar { position: relative; max-width: 280px; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-raised); }
.month-skill-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--periwinkle); transform: scaleX(var(--share)); transform-origin: left; }
.month-skill[data-status="reached"] .month-skill-bar::after { background: var(--orange); }
.month-skill-detail { color: var(--muted-foreground); font-size: 0.84rem; }
.month-skill[data-status="measure"] .month-skill-figure { color: var(--muted-foreground); font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .month-skill-bar::after { animation: month-target-grow 0.9s var(--ease-out); }
}

/* The finish line's last page (#start/plan): two choices on a white sticker (minutes a day, and when), what they add up
 * to and a daily calendar reminder, then tomorrow at that time as one sticker of rows. The targets live on the month plan. */
.tour-rhythm { display: grid; gap: var(--space-3); padding: var(--space-5); }
.tour-rhythm-title { font-size: 1rem; font-weight: 800; }
.tour-rhythm .rhythm-field { display: grid; gap: var(--space-2); }
/* Even pills: every choice the same width and 44px tall, so a row of numbers never wraps, even at 320px. */
.segmented[data-even] { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; }
.segmented[data-even] .segmented-option span { display: grid; place-items: center; min-height: 44px; padding: 0 4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tour-rhythm-sum { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.tour-rhythm-sum p { margin: 0; color: var(--muted-foreground); font-size: 0.92rem; line-height: 1.45; }
.tour-rhythm-sum .tour-plan-total { display: block; width: fit-content; margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3); border: 1.5px dashed var(--on-pastel); border-radius: var(--radius-input); background: var(--yellow); color: var(--on-pastel); font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tour-rhythm #tour-reminder { justify-self: start; min-height: 44px; white-space: normal; }
.tour-day { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-4); }
.tour-day-steps { list-style: none; display: grid; margin: 0; padding: 0; }
.tour-day-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.tour-day-step + .tour-day-step { border-top: 1px solid var(--border); }
.tour-day-step .icon-tile { width: 40px; height: 40px; }
.tour-day-text { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.tour-day-text strong { font-weight: 700; line-height: 1.3; }
.tour-day-minutes { flex-direction: column; align-items: center; gap: 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius-input); background: var(--yellow); color: var(--on-pastel); }
.tour-day-minutes .tour-value-number { font-size: 1.4rem; }
.tour-day-minutes .tour-value-unit { font-size: 0.8125rem; }
.tour-day-estimate { margin: 0 0 var(--space-4); color: var(--on-scene-muted); font-size: 1rem; line-height: 1.5; }
.tour-day-rounds { color: var(--muted-foreground); font-size: 0.8rem; }
.tour-day-note { margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 0.84rem; line-height: 1.45; }
.tour-plan-note { max-width: 56ch; margin: 0; color: var(--on-scene-muted); font-size: 0.88rem; }
/* A visitor's plan: what joining keeps, on a white sticker next to the plan it starts. Join now is the page's main button. */
.tour-join { display: grid; gap: var(--space-3); padding: var(--space-5); }
.tour-join-title { font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.tour-join-lead { margin: 0; color: var(--muted-foreground); font-size: 1rem; line-height: 1.5; }
.tour-join-gains { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tour-join-gains li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: var(--space-3); font-size: 0.94rem; line-height: 1.45; }
.tour-join-gains .icon { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--yellow); color: var(--on-pastel); }
.tour-join-small { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.5; }
.tour-join-small .text-link { display: inline-block; margin: -12px 0; padding: 12px 0; color: var(--on-pastel); font-weight: 700; }

/* A target beside where you are: now (smaller, muted) → target (green: the better number you're heading for).
 * The green follows what it sits on: --success on the page's greys, --sticker-success on white stickers, --success-on-ink on the ink card. */
.target-pair { --target-green: var(--success); display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.18em; }
.target-from { color: var(--muted-foreground); font-size: 0.6em; font-weight: 700; }
.target-arrow { align-self: center; width: max(0.42em, 12px); height: max(0.42em, 12px); opacity: 0.6; }
.target-to { color: var(--target-green); }
.tour-headline .target-pair { --target-green: var(--success-on-ink); }
.tour-headline .target-from { color: var(--on-ink-muted); }
:is(.month-forecast, .tour-result) .target-pair { --target-green: var(--sticker-success); }
.month-forecast .target-from { color: var(--on-pastel-muted); }
.tour-result .target-pair .target-from, .month-skill .target-pair .target-from { font-size: 0.9em; }
.better-hint { display: inline-flex; align-items: center; gap: 3px; }
.better-hint .icon { width: 13px; height: 13px; }

/* Policy links stay available in Settings, including on small screens. */
.legal-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }

/* Books use Read's lilac, the existing reading preferences and native controls. */
.books-panel { display: grid; gap: 20px; min-width: 0; }
.book-card { display: grid; grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.2fr); gap: 24px; align-items: center; padding: 24px; background: var(--surface); border-radius: 24px; }
.book-cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; aspect-ratio: 2 / 3; padding: 20px 16px 20px 22px; background: var(--lilac); color: var(--on-pastel); border-radius: 4px; overflow: hidden; }
.book-cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.has-cover > :not(img) { visibility: hidden; }
.book-tile-cover { position: relative; display: grid; place-items: center; width: 100%; max-width: 144px; aspect-ratio: 2 / 3; align-self: center; background: var(--lilac); color: var(--on-pastel); border-radius: 3px; overflow: hidden; }
.book-cover-fallback { padding: 12px; font-family: var(--font-read); font-size: 14px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.book-cover > span { font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.book-cover > strong { font-family: var(--read-font, var(--font-read)); font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.book-cover > small { font-size: 11px; line-height: 1.5; }
.book-card-body { display: grid; gap: 10px; min-width: 0; }
.book-card-body h2 { font-size: 24px; line-height: 1.3; overflow-wrap: anywhere; }
.book-card-body p { margin: 0; }
.book-bookmark { font-weight: 700; }
.book-options, .book-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 16px; }
.book-options .inline-check { align-self: center; }
.book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 20px 0; }
.book-grid li { min-width: 0; }
.book-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; height: 100%; min-height: 176px; padding: 20px; border: 2px solid transparent; border-radius: 18px; background: var(--surface); color: var(--foreground); text-align: start; cursor: pointer; font: inherit; }
.book-tile:hover { background: var(--surface-muted); }
.book-tile[aria-pressed="true"] { border-color: var(--foreground); }
.book-tile strong { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.book-tile-category { color: var(--muted-foreground); font-size: 11px; font-weight: 700; }
.book-tile-state { margin-top: auto; font-size: 11px; font-weight: 700; }
.book-notebook-list { list-style: none; padding: 0; }
.book-note { padding: 20px 0; border-block-end: 1px solid var(--surface-muted); overflow-wrap: anywhere; }
.book-note blockquote { margin: 12px 0; padding-inline-start: 14px; border-inline-start: 3px solid var(--lilac); font-family: var(--read-font, var(--font-read)); }
.book-session-notes .details { margin-block: 16px; }
.book-session-notes .field { margin-block: 16px; }
.book-session-notes .section-head { flex-wrap: wrap; gap: 16px; }
.book-recall-prompts { padding-inline-start: 22px; line-height: 1.8; }
.book-excerpt { max-height: 360px; overflow: auto; padding: 16px; border-radius: 16px; background: var(--surface); font-family: var(--read-font, var(--font-read)); font-size: var(--read-size, 1.18rem); line-height: var(--read-leading, 1.7); }
.book-excerpt p { white-space: pre-wrap; }
.today-book { padding: 16px 4px; }
.today-book .hint { margin: 6px 0 0; }
.books-panel select { width: 100%; min-width: 0; }
@media (max-width: 540px) {
  .book-card { grid-template-columns: 100px minmax(0, 1fr); gap: 16px; padding: 16px; align-items: start; }
  .book-cover { gap: 16px; padding: 14px 10px; }
  .book-cover > strong { font-size: 13px; }
  .book-cover > small { font-size: 9px; }
  .book-card-body h2 { font-size: 19px; }
  .book-card-body .eyebrow { display: none; }
  .book-options, .book-filters { grid-template-columns: 1fr; }
  .book-tile { padding: 16px; min-height: 190px; }
}