/* GENERATED by scripts/build.mjs from css/main.css. Do not edit; edit the layer files. */

/* ---- base/fonts.css ---- */
/* Self-hosted web fonts (latin subset), so text renders without contacting another server.
   Instrument Sans (body), Lilita One (headings), IBM Plex Mono (code), Press Start 2P (labels).
   All are licensed under the SIL Open Font License. */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lilita-one-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/press-start-2p-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- base/tokens.css ---- */
/* Design tokens: colours, fonts, shadows. Light values on :root; the night (dark) theme redefines them.
   Change the look of the whole site here. */

/* ==========================================================
   AI Foundation: one stylesheet for the whole site.
   1. Tokens (colours, type): change these to re-theme everything
   2. Base + layout
   3. Home page (hero, roadmap)
   4. Lesson page (typography, quiz, footer)
   5. Shared demo widgets (buttons, sliders, stats)
   6. Lesson-specific demos
   ========================================================== */
/* ---------- 1. Tokens ----------
   Look: a bright retro-game world. Sunny yellow pages, sky-blue panels,
   coin-yellow buttons, ink outlines with hard "pixel" shadows.
   Dark mode is the night level. */
:root {
  --bg: #fff6cf;          /* sunny page */
  --surface: #ffffff;
  --surface-2: #fbefc0;
  --text: #1b1530;        /* ink */
  --muted: #5f5873;
  --border: #1b1530;
  --card-border: #1b1530; /* comic ink outlines */
  --outline: #1b1530;
  --accent: #0b6fc2;      /* sky blue: links, focus, attention */
  --accent-ink: #ffffff;
  --accent-soft: #dcefff;
  --good: #1f8a3a;
  --good-soft: #ddf5e1;
  --bad: #d62418;
  --bad-soft: #ffe2de;
  --compute: #f08a00;     /* "work being done" in demos */
  /* Status colours dark enough for small text on their soft backgrounds (4.5:1). */
  --good-text: #17692c;
  --bad-text: #b3190f;
  --warn-text: #8a5200;
  --info-text: #0a5aa8;
  --cache: #2da44e;       /* "stored / reused" in demos */
  --on-fill: #1b1530;     /* text on orange/green fills */
  --coin: #fbd000;        /* buttons, highlights */
  --coin-ink: #1b1530;
  --coin-soft: #fff0a8;
  --brand-red: #c81d19;
  --banner-red: #c81d19;   /* banner fill behind white text; the same in both themes */
  --sky: #8ccbff;
  --on-sky: #1b1530;
  --cloud: #ffffff;
  --grass: #43b047;
  --brick: #c8622b;
  --glow: rgb(11 111 194 / 0.15);
  --shadow: 4px 4px 0 #1b1530;
  --shadow-lift: 6px 6px 0 #1b1530;

  --font-display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pixel: "Press Start 2P", "IBM Plex Mono", ui-monospace, monospace;

  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0b;          /* night level: near-black */
    --surface: #151517;
    --surface-2: #1f1f22;
    --text: #f4f1e8;
    --muted: #a8a49b;
    --border: #34343a;
    --card-border: #34343a;
    --outline: #000000;
    --accent: #6cc6ff;
    --accent-ink: #0a0a0b;
    --accent-soft: #14232f;
    --good: #5ed46f;
    --good-soft: #12261a;
    --bad: #ff6b5e;
    --bad-soft: #2e1414;
    --compute: #ffa62b;
    --good-text: var(--good); --bad-text: var(--bad); --warn-text: var(--compute); --info-text: var(--accent);
    --cache: #4cd46b;
    --on-fill: #0a0a0b;
    --coin: #fbd000;
    --coin-ink: #1b1530;
    --coin-soft: #2a2512;
    --brand-red: #ff5246;
    --sky: #121214;
    --on-sky: #f4f1e8;
    --cloud: #2c2c31;
    --grass: #2f8f3a;
    --brick: #9c4a22;
    --glow: rgb(108 198 255 / 0.15);
    --shadow: 4px 4px 0 #000000;
    --shadow-lift: 6px 6px 0 #000000;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0a0a0b;          /* night level: near-black */
  --surface: #151517;
  --surface-2: #1f1f22;
  --text: #f4f1e8;
  --muted: #a8a49b;
  --border: #34343a;
  --card-border: #34343a;
  --outline: #000000;
  --accent: #6cc6ff;
  --accent-ink: #0a0a0b;
  --accent-soft: #14232f;
  --good: #5ed46f;
  --good-soft: #12261a;
  --bad: #ff6b5e;
  --bad-soft: #2e1414;
  --compute: #ffa62b;
  --good-text: var(--good); --bad-text: var(--bad); --warn-text: var(--compute); --info-text: var(--accent);
  --cache: #4cd46b;
  --on-fill: #0a0a0b;
  --coin: #fbd000;
  --coin-ink: #1b1530;
  --coin-soft: #2a2512;
  --brand-red: #ff5246;
  --sky: #121214;
  --on-sky: #f4f1e8;
  --cloud: #2c2c31;
  --grass: #2f8f3a;
  --brick: #9c4a22;
  --glow: rgb(108 198 255 / 0.15);
  --shadow: 4px 4px 0 #000000;
  --shadow-lift: 6px 6px 0 #000000;
  color-scheme: dark;
}

/* ---- base/base.css ---- */
/* Base: reset, typography, page container, site header and footer. */

/* ---------- 2. Base + layout ---------- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16.5px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

a { color: var(--accent); text-underline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; text-wrap: balance; }

.muted { color: var(--muted); }

.container {
  max-width: 880px;
  margin: 0 auto;
  padding-inline: 16px;
}

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 58px;
}

.header-inner nav { display: flex; align-items: center; gap: 14px; }

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--coin);
  color: var(--coin-ink);
  font: 0.6rem var(--pixel);
  padding-left: 1px;
}

.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 10px 0;
  border-radius: 8px;
  transition: color 0.2s;
}

/* Wider click targets where the header has room for them. */
@media (min-width: 700px) {
  .site-header nav a { padding-inline: 8px; }
}

.site-header nav a:hover { color: var(--text); }
.account-btn:hover:not(:disabled) { filter: brightness(1.08); }
.site-footer a:hover, .brand:hover { opacity: 0.8; }

.theme-toggle {
  font: 500 0.85rem var(--font);
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.theme-toggle:hover { color: var(--text); border-color: var(--accent); }

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 72px;
  padding-block: 28px;
  color: var(--muted);
  font-size: 0.9rem;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font: 600 0.75rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lede { font-size: 1.15rem; color: var(--muted); max-width: 62ch; }

/* Gentle entrance: content starts visible and only slides a few pixels. */
main > * { animation: rise 0.6s var(--ease) both; }

main > *:nth-child(2) { animation-delay: 0.06s; }

main > *:nth-child(3) { animation-delay: 0.12s; }

@keyframes rise { from { transform: translateY(8px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
}

.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; }
.footer-inner p { margin: 0; }
.site-footer a { color: var(--text); font-weight: 600; }

.theme-toggle { display: inline-flex; align-items: center; gap: 6px; }

/* Keyboard users can jump straight past the header */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--coin);
  color: var(--coin-ink);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }

@media (max-width: 560px) {
  .theme-label { display: none; }
  .theme-toggle { padding: 5px 10px; }
  .header-inner nav { gap: 12px; }
}

.install-btn { padding: 4px 12px; font-size: 0.82rem; margin-left: 8px; }
/* "Save all lessons offline" (features/shell.js), next to the install button in the footer */
.offline-slot { display: inline-block; margin: 6px 0 0 8px; }
.offline-btn { margin-left: 0; }
.offline-btn:disabled { opacity: 0.6; cursor: wait; transform: none; box-shadow: none; }

/* Account: sign-in button and menu (features/account.js) */
.account-slot { display: inline-flex; }
.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 4px;
  border: 2px solid var(--card-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: 600 0.85rem var(--font);
  cursor: pointer;
  list-style: none;
}
.account-btn::-webkit-details-marker { display: none; }
.account-btn:disabled { opacity: 0.6; cursor: wait; }
.g-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--coin);
  color: var(--coin-ink);
  font: 800 0.8rem var(--font);
}
.account-menu { position: relative; }
.account-menu .account-btn { padding: 2px; }
.account-btn img, .avatar { width: 26px; height: 26px; border-radius: 50%; }
.avatar { display: grid; place-items: center; background: var(--coin); color: var(--coin-ink); font-weight: 800; }
.account-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  display: grid;
  gap: 4px;
  min-width: 220px;
  padding: 14px;
  border: 2px solid var(--card-border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.account-pop small { color: var(--muted); overflow-wrap: anywhere; }
.account-status { color: var(--good) !important; }
.account-pop .btn { margin-top: 8px; justify-content: center; }
@media (max-width: 560px) {
  .account-label { display: none; }
  .account-btn { padding: 0 4px; }
}

/* Small phones (360px): tighten the header so it never pushes the page sideways. */
@media (max-width: 400px) {
  .header-inner { gap: 6px; }
  .header-inner nav { gap: 6px; }
  .brand { font-size: 1rem; gap: 5px; }
  .brand-mark { width: 26px; height: 26px; }
  .account-btn, .theme-toggle { min-width: 40px; }
  .site-header nav a { font-size: 0.88rem; }
}
.account-slot { min-width: 40px; min-height: 36px; }

/* Header search button */
.search-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: 500 0.85rem var(--font);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.search-btn:hover { color: var(--text); border-color: var(--accent); }
.search-btn > span:first-child { font-size: 1.15rem; line-height: 1; }

/* Search panel */
.search-dialog {
  width: min(640px, calc(100vw - 24px));
  max-height: min(80vh, 640px);
  margin: 10vh auto auto;
  padding: 16px;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
}
.search-dialog::backdrop { background: rgb(0 0 0 / 0.55); }
.search-dialog .search { margin-bottom: 10px; }
.search-dialog .search-results { position: static; margin-top: 8px; max-height: 50vh; box-shadow: none; }
.search-dialog [data-close] { display: flex; margin-left: auto; }

@media (max-width: 760px) {
  .search-btn { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  .search-btn-label { display: none; }
  /* The logo already goes home, so small screens drop the Roadmap link to make room. */
  .nav-roadmap { display: none; }
}
@media (max-width: 400px) { .search-btn { min-width: 40px; } }

/* Header menu: page links and the theme switch live inside the account menu. */
.account-btn { list-style: none; }
.account-caret { font-size: 0.8rem; color: var(--muted); }
.account-menu .account-btn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; }
.account-pop .btn { justify-content: center; }
.account-extras { display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--border); }
.account-extras a, .account-extras .theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--text);
  font: 600 0.95rem var(--font);
  text-decoration: none;
}
.account-extras a:hover { background: var(--coin-soft); }
.account-extras .theme-toggle { width: 100%; justify-content: flex-start; background: none; border: 0; cursor: pointer; }
.account-extras .theme-toggle:hover { background: var(--coin-soft); }
.account-extras .theme-toggle::before { content: "Theme:"; color: var(--muted); font-weight: 500; }
.account-extras .theme-label { display: inline; }
.account-extras .nav-roadmap { display: flex; }
@media (max-width: 760px) { .account-menu .account-btn { min-height: 44px; } }
.site-header nav .account-extras a { color: var(--text); padding: 0 10px; }

.noscript-note {
  margin: 20px 0;
  padding: 14px 18px;
  background: var(--accent-soft);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
}
.account-pop .account-admin { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; color: var(--text); font: 600 0.95rem var(--font); text-decoration: none; }
.account-pop .account-admin:hover { background: var(--coin-soft); }

/* ---- pages/home.css ---- */
/* Home page: hero, roadmap phases, topic cards, featured track. */

/* ---------- 3. Home page ---------- */
.hero { padding-block: 64px 36px; position: relative; }

.hero::before {
  content: "";
  position: absolute;
  inset: -40px 0 auto auto;
  width: min(420px, 100%);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--glow), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  letter-spacing: -0.035em;
  font-weight: 700;
  max-width: 18ch;
  text-wrap: balance;
}

.hero .lede { margin-top: 16px; }

.hero-note { margin: 12px 0 0; font-size: 0.9rem; color: var(--on-sky, var(--muted)); opacity: 0.9; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}

/* The hero gives one clear action. Hidden parts must stay hidden even where a class sets display. */
.hero [hidden], .progress-panel[hidden], .first-step[hidden], .roadmap[hidden] { display: none; }

.hero .btn { min-height: 44px; }

/* Signed out, but this device still holds progress (a sign-out that could not save): one line under the button. */
.hero-resume { margin: 14px 0 0; font-weight: 600; color: var(--on-sky, var(--text)); }

.hero-calm { margin: 14px 0 0; max-width: 46ch; font-size: 1rem; color: var(--on-sky, var(--muted)); opacity: 0.9; }

.hero-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  color: var(--on-sky, var(--text));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hero-link:hover { text-decoration-thickness: 2px; }

/* A learner with progress: where they are in their track, above the Continue button. */
.hero.returning { padding-top: 40px; }

.hero.returning h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); max-width: 24ch; }

.hero-track { display: grid; gap: 8px; max-width: 420px; margin-top: 18px; }

.hero-track-text { margin: 0; font: 400 1.5rem/1.2 var(--font-display); color: var(--on-sky, var(--text)); }

.hero-bar { display: block; height: 14px; border: 2px solid var(--card-border); border-radius: 999px; background: var(--surface); overflow: hidden; }

.hero-bar i { display: block; height: 100%; border-radius: 999px; background: var(--good); transition: width 0.6s var(--ease); }

.roadmap { display: grid; gap: 18px; padding-bottom: 16px; }

.phase {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 20px 14px;
  scroll-margin-top: 80px;
}

.phase-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}

.phase-head h2 { font-size: 1.3rem; letter-spacing: -0.015em; }

.phase-head p { margin: 4px 0 0; color: var(--muted); font-size: 0.95rem; }

.phase-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font: 600 0.95rem var(--mono);
}

.phase-progress {
  font: 0.8rem var(--mono);
  color: var(--muted);
  padding-top: 8px;
}

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

.topic {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.topic:hover { background: var(--surface-2); transform: translateX(3px); }

.topic-text { display: grid; min-width: 0; }

.topic-title { font-weight: 600; }

.topic-summary { color: var(--muted); font-size: 0.9rem; }

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border);
  transition: transform 0.25s var(--ease);
}

.topic:hover .dot { transform: scale(1.25); }

.topic.ready .dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.topic.done .dot { border-color: var(--good); background: var(--good); }

.badge {
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
}

.topic.ready .badge { background: var(--accent); color: var(--accent-ink); }

.topic.done .badge { background: var(--good-soft); color: var(--good-text); }

.topic.soon .topic-title { color: var(--muted); font-weight: 500; }

/* Featured track */
.phase.featured {
  border-width: 3px;
  box-shadow: var(--shadow-lift);
  padding-top: 0;
  overflow: hidden;
}

.feature-tag {
  margin: 0 -20px 16px;
  padding: 10px 20px;
  background: var(--banner-red);
  color: #ffffff;
  font: 0.68rem/1.6 var(--pixel);
  letter-spacing: 0.05em;
  border-bottom: 3px solid var(--card-border);
}

.phase-bar {
  position: relative;
  height: 14px;
  border: 2px solid var(--card-border);
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.phase-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; transition: width 0.6s var(--ease); }

/* Lessons that are live but not done yet stay a faint tint, so an untouched track looks empty. */
.phase-bar i.live { background: var(--coin-soft); }

.phase-bar i.done { background: var(--good); }

.phase-bar-label { margin: 6px 0 16px; font: 0.78rem var(--mono); color: var(--muted); }

.phase:not(.featured) { opacity: 0.92; }

.later-divider { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--muted); font: 0.66rem/1.6 var(--pixel); letter-spacing: 0.05em; }

.later-divider::before, .later-divider::after { content: ""; flex: 1; height: 2px; background: var(--card-border); opacity: 0.4; }

@media (max-width: 560px) {
  .phase { padding: 18px 12px 10px; }
  .feature-tag { margin-inline: -12px; padding-inline: 12px; }
  .phase-head { grid-template-columns: auto 1fr; }
  .phase-progress { display: none; }
  .topic { grid-template-columns: auto 1fr; }
  .topic .badge { display: none; }
  /* Phone: topic name on its own line, then bar, score and Review in one row. */
  .topic-scores li { grid-template-columns: minmax(0, 1fr) 44px auto; gap: 4px 10px; padding-block: 6px; }
  .topic-scores li > :first-child { grid-column: 1 / -1; font-weight: 600; }
}

/* "Your first step": track 1 only, a few lessons, and the way to the rest */
.first-step {
  display: grid;
  gap: 14px;
  margin-block: 24px 8px;
  padding: 22px 20px;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.step-title { font-size: 1.5rem; letter-spacing: -0.015em; }

.step-sub { margin: -6px 0 0; color: var(--muted); }

.fold-btn { justify-content: center; justify-self: start; min-height: 44px; }

/* The goal question is added after the first paint. While it loads, its box keeps the room it will fill
   (about the height of the real question card or the "Your path" line), so the page below does not move. */
#goal-slot:empty:not([data-reserve]) { display: none; }
#goal-slot[data-reserve="question"] { min-height: 480px; }
#goal-slot[data-reserve="line"] { min-height: 143px; }
@media (min-width: 430px) {
  #goal-slot[data-reserve="question"] { min-height: 440px; }
  #goal-slot[data-reserve="line"] { min-height: 117px; }
}
@media (min-width: 560px) {
  #goal-slot[data-reserve="question"] { min-height: 405px; }
  #goal-slot[data-reserve="line"] { min-height: 70px; }
}
@media (min-width: 700px) { #goal-slot[data-reserve="question"] { min-height: 257px; } }
@media (min-width: 1000px) { #goal-slot[data-reserve="line"] { min-height: 60px; } }

/* "Choose your goal": a small link for a learner who is past track 1 and has no goal */
.goal-open[hidden] { display: none; }

/* A learner with saved progress (theme-early.js sets "has-progress" before the first paint): the hero,
   the progress panel and the first-step box wait, hidden but in place, until home.js has built the
   "Welcome back" view (it adds "home-ready"). So the new-visitor view never shows first and jumps. */
.has-progress:not(.home-ready) #hero,
.has-progress:not(.home-ready) #progress-panel,
.has-progress:not(.home-ready) #first-step { visibility: hidden; }

/* The first-step box before home.js fills it: a plain placeholder with about the height of the real
   content (without the goal question), so the footer does not jump. No animation; hidden from screen readers. */
.first-step.is-pending { align-content: start; min-height: 815px; }
.skel { display: grid; gap: 14px; }
.skel-bar, .skel-tile { display: block; background: var(--surface-2); border-radius: 8px; }
.skel-title { width: min(13rem, 60%); height: 1.8rem; }
.skel-sub { width: min(30rem, 90%); height: 1.1rem; }
.skel-tile { height: 112px; border-radius: var(--radius); }
@media (min-width: 560px) { .first-step.is-pending { min-height: 690px; } }
@media (min-width: 900px) { .first-step.is-pending { min-height: 510px; } }

.step-after { display: grid; justify-items: start; gap: 10px; padding-top: 14px; border-top: 2px dashed var(--card-border); }

.after-line { margin: 0; color: var(--muted); }
.after-line[data-pending] { visibility: hidden; }

/* The one lesson we suggest now */
.topic.next { background: var(--coin-soft); border-color: var(--outline, var(--card-border)); box-shadow: var(--shadow); }

.next-tag { margin-bottom: 4px; font: 0.6rem/1.6 var(--pixel); color: var(--brand-red); }

.roadmap { margin-top: 18px; scroll-margin-top: 76px; }

@media (max-width: 560px) {
  .first-step { padding: 16px 12px; }
  .fold-btn { justify-self: stretch; }
}

/* Your progress panel */
.progress-panel {
  display: grid;
  gap: 14px;
  margin-block: 20px;
  padding: 18px;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.pp-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 10px; }
.pp-stat {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 12px;
  background: var(--coin-soft);
  text-align: center;
}
.pp-stat strong { font: 400 1.6rem/1 var(--font-display); }
.pp-stat span { font-size: 0.78rem; color: var(--muted); }
.pp-coin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--coin);
  border: 2px solid var(--outline);
  box-shadow: inset -3px -3px 0 rgb(0 0 0 / 0.15);
  animation: spin-coin 3s ease-in-out infinite;
}
@keyframes spin-coin { 0%, 70%, 100% { transform: scaleX(1); } 85% { transform: scaleX(0.2); } }
.pp-badges summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; }
.pp-badges summary small { font: 0.78rem var(--mono); color: var(--muted); margin-left: 4px; }
.pp-badges ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 8px; }
.pp-badges li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: var(--bg); opacity: 0.55; }
.pp-badges li.has { opacity: 1; background: var(--coin-soft); }
.pp-badges li strong { display: block; font-size: 0.9rem; }
.pp-badges li small { color: var(--muted); font-size: 0.78rem; }
.pp-badge-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--card-border);
  background: var(--surface-2);
  font: 0.75rem var(--pixel);
}
.pp-badges li.has .pp-badge-icon { background: var(--coin); color: var(--coin-ink); border-color: var(--outline); box-shadow: 2px 2px 0 var(--brick); }
@media (max-width: 560px) {
  .progress-panel { padding: 14px 12px; }
}

/* Collapsible phases */
.phase-summary { display: block; list-style: none; cursor: pointer; }
.phase-summary::-webkit-details-marker { display: none; }
.phase-summary h2 { display: block; }
.phase-summary p { display: block; }
.phase:not([open]) .phase-head { margin-bottom: 0; }
.phase:not([open]) { padding-bottom: 20px; }
.phase-progress { display: inline-flex; align-items: center; gap: 8px; }
.phase-chevron { display: inline-block; font-size: 1rem; color: var(--text); transition: transform 0.25s var(--ease); }
.phase:not([open]) .phase-chevron { transform: rotate(-90deg); }
.phase-summary:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.phase-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.phase .topics { animation: rise 0.3s var(--ease); }
@media (max-width: 560px) {
  .phase-progress { display: inline-flex; }
  .phase-progress { font-size: 0; gap: 0; }
  .phase-chevron { font-size: 1rem; }
  .phase-head { grid-template-columns: auto 1fr auto; }
}

/* Module groups inside a phase */
.module + .module { margin-top: 14px; }
.module-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 4px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--coin-soft);
  font: 0.66rem/1.6 var(--pixel);
  color: var(--brand-red);
}
.module-head small { font: 0.78rem var(--mono); color: var(--muted); }

/* ---- Level map: track cards on top, lessons as numbered level tiles ---- */
.track-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.track-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 14px;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.track-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--outline, var(--card-border)); }
.track-card:active { transform: translate(2px, 2px); box-shadow: none; }

.track-num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--card-border);
  border-radius: 10px;
  background: var(--coin);
  color: var(--coin-ink);
  font: 1.3rem var(--font-display);
}
.track-card.done .track-num { background: var(--good-text); color: var(--surface); }
.track-card.soon .track-num { background: var(--surface-2); color: var(--muted); }
.track-title { font-weight: 700; line-height: 1.25; }
.track-meta { font: 0.74rem var(--mono); color: var(--muted); }
.track-bar { grid-column: 1 / -1; height: 8px; margin-top: 6px; border: 2px solid var(--card-border); border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.track-bar i { display: block; height: 100%; background: var(--good); }
.track-card.soon { box-shadow: none; opacity: 0.8; }

.phase { scroll-margin-top: 76px; }

.topics { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

.topic {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 10px 12px;
  align-items: start;
  height: 100%;
  padding: 14px;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.2s;
}
.topic:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }

.level {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  border: 2px solid var(--card-border);
  border-radius: 10px;
  background: var(--coin);
  color: var(--coin-ink);
  font: 0.62rem var(--pixel);
}
.topic.done .level { background: var(--good-text); color: var(--surface); font: 1.2rem var(--font); }
.topic.soon { border-style: dashed; background: transparent; }
.topic.soon .level { background: var(--surface-2); color: var(--muted); }

.topic .badge { grid-column: 1 / -1; justify-self: start; }

@media (max-width: 560px) {
  .track-map { grid-template-columns: 1fr 1fr; gap: 8px; }
  .track-card { grid-template-columns: 1fr; padding: 10px; }
  .track-num { grid-row: auto; width: 36px; height: 36px; font-size: 1.05rem; }
  .track-title { font-size: 0.92rem; }
  .topics { grid-template-columns: 1fr; gap: 8px; }
  .topic { grid-template-rows: auto; }
}

/* ---- Search ---- */
/* Above the cards below it, so the results list opens over them. */
.search { position: relative; z-index: 30; margin-bottom: 18px; }
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  min-height: 52px;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.search-box:focus-within { border-color: var(--accent); }
.search-icon { font-size: 1.4rem; line-height: 1; color: var(--muted); }
.search-box input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 1rem; padding: 12px 0; outline: none; }
.search-box input::-webkit-search-cancel-button { cursor: pointer; }
.search-key { padding: 2px 8px; border: 2px solid var(--card-border); border-radius: 6px; font: 0.8rem var(--mono); color: var(--muted); }
.search-results {
  position: absolute;
  z-index: 20;
  inset: 58px 0 auto 0;
  max-height: min(60vh, 440px);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.search-results a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.search-results a:hover, .search-results a.active { background: var(--coin-soft); }
.search-title { font-weight: 700; }
.search-results a.soon .search-title { color: var(--muted); font-weight: 600; }
.search-meta { font-size: 0.85rem; color: var(--muted); }
.search-status { margin: 6px 2px 0; min-height: 1.2em; font: 0.78rem var(--mono); color: var(--muted); }
@media (max-width: 560px) { .search-key { display: none; } }

.tile-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile-min { font: 0.74rem var(--mono); color: var(--muted); }
@media (max-width: 560px) { .topic .tile-foot { justify-content: flex-end; } }

/* ---------- Completion card ---------- */
.track-item { display: grid; align-content: start; gap: 8px; min-width: 0; }
.track-item .track-card { height: 100%; }
.card-btn { justify-content: center; min-height: 44px; background: var(--coin); color: var(--coin-ink); border: 2px solid var(--card-border); box-shadow: 3px 3px 0 var(--outline, var(--card-border)); }
.phase-summary > .card-btn { margin: 0 0 12px 56px; }

.card-dialog {
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 3px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lift);
  overflow: auto;
}
.card-dialog::backdrop { background: rgb(27 21 48 / 0.6); }
.card-body { display: grid; gap: 14px; padding: 16px; }
.card-body h2 { margin: 0; font-size: 1.3rem; }
.card-body canvas { width: 100%; height: auto; aspect-ratio: 1200 / 630; border: 2px solid var(--card-border); border-radius: 10px; display: block; }
.card-name { display: grid; gap: 6px; font-weight: 600; }
.card-name input { min-height: 44px; padding: 8px 12px; font: 1rem var(--font); color: var(--text); background: var(--surface); border: 2px solid var(--card-border); border-radius: 10px; }
.card-name input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.card-actions .btn { min-height: 44px; justify-content: center; flex: 1 1 120px; }
.card-actions [hidden] { display: none; }

/* ---- pages/lesson.css ---- */
/* Lesson page: header, sections, code, callouts, tables, listen bar, reading list, pager. */

/* ---------- 4. Lesson page ---------- */
.lesson { padding-top: 24px; }

/* Space is reserved for the breadcrumb and the lesson, so nothing jumps while they load. */
.crumbs { font-size: 0.88rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-height: 1.6rem; }
.lesson > article { min-height: 100vh; }
@media (max-width: 760px) { .crumbs { min-height: 44px; } }

.crumbs a { color: var(--muted); text-decoration: none; transition: color 0.2s; }

.crumbs a:hover { color: var(--text); }

.lesson-head { padding-block: 28px 8px; }

.lesson-head h1 { font-size: clamp(2.2rem, 6vw, 3rem); letter-spacing: -0.03em; }

.lesson-head .lede { margin: 14px 0 8px; }

/* New words in this lesson */
.new-words {
  max-width: 68ch;
  margin-block: 4px 28px;
  padding: 14px 18px;
  background: var(--coin-soft);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
}
.new-words-title { margin: 0 0 10px; font-weight: 700; }
.new-words dl { display: grid; gap: 8px; margin: 0; }
.new-words dl > div { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 2px 14px; }
.new-words dt { font-weight: 700; }
.new-words dd { margin: 0; }
@media (max-width: 520px) {
  .new-words dl > div { grid-template-columns: 1fr; }
}

.meta { color: var(--muted); font: 0.8rem var(--mono); margin: 0; }

/* Listen-to-lesson bar and the highlight on the paragraph being read */
.listen-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; }

.listen-rate { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--muted); }

.listen-rate select { width: auto; max-width: 210px; padding: 6px 8px; }

.speaking {
  background: var(--accent-soft);
  border-radius: 6px;
  box-shadow: 0 0 0 6px var(--accent-soft);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.lesson-section { margin-top: 48px; min-width: 0; }

.lesson-section h2 { font-size: 1.5rem; margin-bottom: 14px; letter-spacing: -0.02em; }

.lesson-section p, .lesson-section li { max-width: 68ch; }

.lesson-section li + li { margin-top: 8px; }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 5px;
}

pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.6;
}

pre code { background: none; padding: 0; font-size: inherit; }

.callout {
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-block: 20px;
  max-width: 68ch;
}

.callout p { margin: 0; }

.table-wrap { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 0.93rem; margin-block: 12px; }

th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }

th { font-weight: 600; background: var(--surface-2); }

.takeaways { padding-left: 1.2em; }

.takeaways li::marker { color: var(--accent); }

/* Go deeper: external reading links */
.reading-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

.reading-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.2s, transform 0.3s var(--ease);
}

.reading-list a:hover { border-color: var(--accent); transform: translateX(3px); }

.reading-list li, .reading-list a { min-width: 0; }
.reading-list a { overflow-wrap: anywhere; }
.reading-list span { color: var(--muted); font: 400 0.75rem var(--mono); white-space: nowrap; }

.reading-list li + li { margin-top: 0; }

/* Footer: complete + prev/next */
.lesson-footer { margin-top: 56px; display: grid; gap: 20px; }

.complete-btn { justify-self: start; }

.complete-btn.is-done { background: var(--good-soft); color: var(--good); border-color: var(--good); }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pager-link {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.2s, transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pager-link span { color: var(--muted); font: 500 0.78rem var(--mono); }

.pager-link:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.pager-link.next { text-align: right; grid-column: 2; }

@media (max-width: 560px) {
  .pager { grid-template-columns: 1fr; }
  .pager-link.next { grid-column: 1; }
}

/* End-of-lesson quiz card (the quiz itself lives on quiz.html#<topic-id>) */
.quiz-card {
  padding: 22px 20px;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--coin-soft);
  box-shadow: var(--shadow);
}
.quiz-card p { margin-top: 0; }
.quiz-card-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; }

/* Section menu */
.lesson-section > h2 { scroll-margin-top: 80px; }
.toc { margin-top: 16px; border: 2px solid var(--card-border); border-radius: 12px; background: var(--surface); max-width: 560px; }
.toc summary { cursor: pointer; padding: 10px 14px; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform 0.2s var(--ease); }
.toc[open] summary::after { transform: rotate(180deg); }
.toc summary small { font: 0.75rem var(--mono); color: var(--muted); }
.toc-list { list-style: none; margin: 0; padding: 0 6px 8px; display: grid; gap: 2px; }
.toc-list button {
  width: 100%;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}
.toc-list button:hover { background: var(--coin-soft); }
.toc-num { font: 0.66rem var(--pixel); color: var(--muted); }

/* Reading progress: a thin bar under the sticky header */
.read-progress {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 58px);
  left: 0;
  right: 0;
  height: 4px;
  z-index: 11;
  pointer-events: none;
}
.read-progress i { display: block; height: 100%; width: 0; background: var(--brand-red); }

/* Phone dock */
.lesson-dock { display: none; }
@media (max-width: 760px) {
  body.has-dock { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .lesson-dock {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    padding: 6px;
    border: 2px solid var(--card-border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .lesson-dock > a, .lesson-dock > button {
    display: grid;
    place-items: center;
    gap: 0;
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--text);
    font: 700 1.2rem/1 var(--font);
    text-decoration: none;
    cursor: pointer;
  }
  .lesson-dock small { font: 600 0.64rem var(--font); color: var(--muted); margin-top: 2px; }
  .lesson-dock .active { background: var(--coin); color: var(--coin-ink); }
  .lesson-dock .active small { color: var(--coin-ink); }
}
.toc-sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgb(0 0 0 / 0.45);
  display: flex;
  align-items: flex-end;
}
.toc-sheet-panel {
  width: 100%;
  max-height: 70vh;
  overflow: auto;
  padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 3px solid var(--card-border);
  border-radius: 20px 20px 0 0;
  animation: rise 0.3s var(--ease);
}
.toc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.toc-sheet-head .toc-sheet-title { margin: 0 8px; }
.toc-sheet-title { margin: 0 8px 8px; font: 0.68rem var(--pixel); color: var(--brand-red); }

/* Sign-in gate (features/account.js signInCard) */
.signin-gate {
  display: grid;
  justify-items: start;
  gap: 10px;
  margin-top: 32px;
  padding: 24px 22px;
  border: 3px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--coin-soft);
  box-shadow: var(--shadow-lift);
}
.signin-gate h2 { font-size: 1.5rem; }
.signin-gate p { margin: 0; max-width: 56ch; }
.signin-gate small { color: var(--muted); }
.signin-gate .brand-mark { width: 44px; height: 44px; font-size: 0.8rem; }
.signin-gate-btn { font-size: 1rem; padding: 10px 18px 10px 10px; }
.signin-gate-btn .g-mark { background: var(--surface); color: var(--text); }
.preview-outline ol { padding-left: 2em; color: var(--muted); }
.preview-outline li { color: var(--text); }

/* Phones held sideways: a slimmer dock without captions, so more of the lesson shows. */
@media (max-height: 450px) and (max-width: 950px) {
  body.has-dock { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  .lesson-dock { left: auto; right: 10px; width: min(360px, 60vw); padding: 2px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .lesson-dock small { display: none; }
}

/* One reading width on wide screens: text, callouts, code, Python cells, demos and tables
   share the same left and right edges (about 75 characters per line). */
@media (min-width: 900px) {
  :root { --measure: 46.5rem; }
  .lesson-section, .new-words, .lesson-section p, .lesson-section li, .callout { max-width: var(--measure); }
}

/* ---- components/quiz.css ---- */
/* Scored multiple-choice quiz (lesson pages and the Test yourself page). */

/* Quiz */
.quiz-q {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 12px;
}

.quiz-prompt { margin: 0 0 12px; font-weight: 600; }

.quiz-opts { display: grid; gap: 8px; }

.quiz-opt {
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.3s var(--ease), transform 0.2s var(--ease);
}

.quiz-opt:hover:not(:disabled) { border-color: var(--accent); transform: translateX(2px); }

.quiz-opt:disabled { cursor: default; opacity: 0.6; }

.quiz-opt.correct { opacity: 1; border-color: var(--good); background: var(--good-soft); }

.quiz-opt.wrong { opacity: 1; border-color: var(--bad); background: var(--bad-soft); }

.quiz-why { margin: 12px 0 0; color: var(--muted); }

/* Scored quiz */
.quiz-intro { color: var(--muted); }

.quiz-intro strong { color: var(--text); }

.quiz-status {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 58px);
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-inline: -4px;
  padding: 10px 6px 8px;
  border-bottom: 2px solid var(--border);
  background: var(--bg);
  font: 500 0.82rem var(--mono);
  color: var(--muted);
}

.quiz-track { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 14px; }

.quiz-track span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 0.4s var(--ease); }

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

.quiz-q { margin-bottom: 0; border-left: 4px solid var(--border); transition: border-color 0.3s var(--ease); }

.quiz-q.is-right { border-left-color: var(--good); }

.quiz-q.is-wrong { border-left-color: var(--bad); }

.quiz-topic { margin: 0 0 6px; font: 600 0.72rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

.quiz-result {
  margin-top: 18px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  display: grid;
  gap: 10px;
  justify-items: start;
  animation: rise 0.5s var(--ease);
}

.quiz-result p { margin: 0; }

.quiz-final { display: flex; align-items: baseline; gap: 12px; }

.quiz-final strong { font: 700 2.2rem var(--font-display); letter-spacing: -0.02em; }

.quiz-final span { font: 600 1rem var(--mono); color: var(--accent); }

.quiz-extra { width: 100%; }

.quiz-extra h3 { font-size: 1rem; margin: 6px 0 8px; }

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

.topic-scores li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 160px) 44px 84px; align-items: center; gap: 10px; font-size: 0.9rem; }
.topic-scores a { display: inline-flex; align-items: center; min-height: 44px; }

.ts-bar { height: 8px; border-radius: 999px; background: var(--surface); overflow: hidden; }

.ts-bar i { display: block; height: 100%; border-radius: 999px; }

.ts-bar i.good { background: var(--good); }

.ts-bar i.ok { background: var(--compute); }

.ts-bar i.low { background: var(--bad); }

.ts-num { font: 600 0.85rem var(--mono); text-align: right; }

.ts-ok { color: var(--good); font-weight: 700; }

.quiz-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.quiz-practice { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--accent-soft); font-size: 0.92rem; }

/* ---- components/goal-path.css ---- */
/* "What is your goal?" start question (js/features/goal-path.js).
   Radio chips + a compact "Your path" line. Class names start with "goal-". Colours come from tokens only, so both themes work. */

.goal-host { min-width: 0; }
.goal-host[hidden] { display: none; }

.goal-card {
  display: grid; gap: 12px; min-width: 0; padding: 14px 16px;
  background: var(--surface); border: 2px solid var(--card-border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* The question */
.goal-fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.goal-title { padding: 0; font: 1.3rem/1.2 var(--font-display); }
.goal-sub { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.goal-options { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin-top: 4px; }
@media (min-width: 700px) { .goal-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Three big radio chips. The real input covers the chip, so the whole chip is the tap target. */
.goal-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.goal-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.goal-chip {
  position: relative; display: grid; align-content: start; gap: 2px; height: 100%; min-height: 56px;
  padding: 10px 12px 10px 44px; background: var(--surface); border: 2px solid var(--card-border);
  border-radius: var(--radius); overflow-wrap: anywhere; transition: background 0.15s, border-color 0.15s;
}
.goal-chip::before {
  content: ""; position: absolute; left: 12px; top: 12px; width: 20px; height: 20px;
  background: var(--surface); border: 2px solid var(--card-border); border-radius: 50%;
}
.goal-chip-name { font-weight: 700; }
.goal-chip-hint { color: var(--muted); font-size: 0.86rem; line-height: 1.4; }
.goal-opt:hover .goal-chip { border-color: var(--accent); }
.goal-input:checked + .goal-chip { background: var(--accent-soft); border-color: var(--accent); }
.goal-input:checked + .goal-chip::before {
  border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 42%, var(--surface) 46%);
}
.goal-input:focus-visible + .goal-chip { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Small text buttons: Skip for now, Cancel, Remove my goal */
.goal-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.goal-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  border: 0; background: none; color: var(--info-text); font: 600 0.92rem var(--font);
  text-decoration: underline; cursor: pointer;
}
.goal-btn:hover { color: var(--text); }

/* The chosen path: one compact line. Wide: "Your path:", the steps, then Change.
   Narrow: "Your path:" and Change on the first row, the steps on the second. */
.goal-card-line {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label change" "steps steps";
  align-items: center; gap: 0 12px; padding: 6px 8px 10px 16px;
}
.goal-line { display: contents; }
.goal-line-label { grid-area: label; font-weight: 700; white-space: nowrap; }
.goal-change { grid-area: change; }
.goal-steps {
  grid-area: steps; display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; padding: 0 8px 0 0;
  list-style: none; min-width: 0;
}
.goal-step { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.goal-arrow { color: var(--accent); font-weight: 700; }
.goal-change {
  min-width: 44px; min-height: 44px; padding: 0 16px; color: var(--text); font: 600 0.9rem var(--font);
  background: var(--surface); border: 2px solid var(--card-border); border-radius: 999px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.goal-change:hover { border-color: var(--accent); background: var(--accent-soft); }
@media (min-width: 560px) {
  .goal-card-line {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "label steps change";
    gap: 0 10px; padding: 6px 8px 6px 16px;
  }
  .goal-steps { padding-right: 0; }
}

/* Read by screen readers only */
.goal-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.goal-host { position: relative; }

/* ---- pages/quiz.css ---- */
/* Quiz page: single-topic quiz header and the mixed-quiz topic picker. */

/* Test page: topic chips */
.test-setup { margin-top: 28px; }

.test-setup h2 { font-size: 1.2rem; margin-bottom: 12px; }

.test-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.test-head h2 { margin: 0; }
.test-bulk { display: inline-flex; gap: 8px; }

.chip-group { margin: 0 0 16px; padding: 12px 14px 14px; border: 2px solid var(--card-border); border-radius: var(--radius); min-width: 0; }
.chip-group legend { padding: 0 6px; font-weight: 700; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.chip { cursor: pointer; }

.chip input { position: absolute; opacity: 0; pointer-events: none; }

.chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.chip span small { font: 0.72rem var(--mono); color: var(--muted); }

.chip:hover span { border-color: var(--accent); }

.chip input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.test-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }

.topic-quiz { font: 0.72rem var(--mono); color: var(--good-text); }

.quiz-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin: 0; }
.quiz-links span { color: var(--muted); }
.quiz-links strong { color: var(--text); }

/* ---- pages/tree.css ---- */
/* Roadmap tree page: a trunk of tracks, module branches and lesson leaves. */

.tree-page .lesson-head { padding-bottom: 4px; }

.tree-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.tree-wrap { --trunk: 4px; --line: var(--card-border); position: relative; margin-block: 24px 48px; }

.tree-root {
  position: relative;
  z-index: 1;
  width: max-content;
  margin-inline: auto;
  padding: 8px 18px;
  border: 2px solid var(--card-border);
  border-radius: 999px;
  background: var(--coin);
  color: var(--coin-ink);
  font: 0.7rem/1.6 var(--pixel);
}
.tree-root.end { background: var(--good); color: var(--surface); }

.tree { position: relative; list-style: none; margin: 0; padding: 28px 0; display: grid; gap: 36px; }

/* The trunk */
.tree::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: var(--trunk);
  margin-left: calc(var(--trunk) / -2);
  background: var(--line);
  border-radius: 999px;
}

.tree-track { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; column-gap: 28px; }

/* A stop on the trunk: one track */
.tree-stop {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 168px;
  padding: 12px 10px;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s var(--ease);
}
.tree-stop:hover { transform: translate(-2px, -2px); }
.tree-stop-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--card-border);
  border-radius: 12px;
  background: var(--coin);
  color: var(--coin-ink);
  font: 1.3rem var(--font-display);
}
.tree-track.done .tree-stop-num { background: var(--good); color: var(--surface); }
.tree-track.soon .tree-stop-num { background: var(--surface-2); color: var(--muted); }
.tree-track.soon .tree-stop { box-shadow: none; border-style: dashed; }
.tree-stop-text { display: grid; gap: 2px; }
.tree-stop-text strong { line-height: 1.2; }
.tree-stop-text small { font: 0.72rem var(--mono); color: var(--muted); }

/* Branches: the modules of a track, on alternating sides */
.tree-branches { grid-row: 1; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tree-track.left .tree-branches { grid-column: 1; justify-items: end; }
.tree-track.right .tree-branches { grid-column: 3; justify-items: start; }

.tree-branch {
  position: relative;
  width: min(100%, 420px);
  padding: 12px 14px;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface);
}
/* The twig from the trunk side to each branch */
.tree-branch::before { content: ""; position: absolute; top: 26px; width: 28px; height: 3px; background: var(--line); }
.tree-track.left .tree-branch::before { left: 100%; margin-left: 2px; }
.tree-track.right .tree-branch::before { right: 100%; margin-right: 2px; }
/* The stem joining one branch's twig to the next one's */
.tree-branch:not(:last-child)::after { content: ""; position: absolute; top: 26px; width: 3px; height: calc(100% + 16px); background: var(--line); }
.tree-track.left .tree-branch::after { left: calc(100% + 29px); }
.tree-track.right .tree-branch::after { right: calc(100% + 29px); }
.tree-track.soon .tree-branch { border-style: dashed; background: transparent; }

.tree-branch-name { margin: 0 0 8px; font: 0.62rem/1.7 var(--pixel); color: var(--brand-red); }
.tree-leaves { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tree-track.left .tree-leaves { justify-content: flex-end; }

/* A leaf: one lesson */
.leaf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 10px 4px 4px;
  border: 2px solid var(--card-border);
  border-radius: 999px;
  background: var(--coin-soft);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s var(--ease), background 0.2s;
}
a.leaf:hover { transform: translateY(-2px); background: var(--coin); color: var(--coin-ink); }
.leaf-num {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 26px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--coin);
  color: var(--coin-ink);
  font: 0.5rem var(--pixel);
  white-space: nowrap;
  flex: none;
}
.leaf.done { background: var(--good-soft); border-color: var(--good); }
.leaf.done .leaf-num { background: var(--good); color: var(--surface); font: 0.9rem var(--font); }
.leaf.soon { background: transparent; border-style: dashed; color: var(--muted); font-weight: 500; }
.leaf.soon .leaf-num { background: var(--surface-2); color: var(--muted); }

/* Phones and small tablets: the trunk moves to the left and every branch hangs to its right. */
@media (max-width: 860px) {
  .tree-root { margin-inline: 0; }
  .tree { gap: 28px; padding-block: 22px; }
  .tree::before { inset: 0 auto 0 22px; }
  .tree-track { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .tree-stop { grid-column: 1; grid-row: auto; width: auto; grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 12px; padding: 8px 12px 8px 0; margin-left: 0; text-align: left; border: 0; background: none; box-shadow: none; }
  .tree-track.soon .tree-stop { border: 0; }
  .tree-stop:hover { transform: none; }
  .tree-track.left .tree-branches, .tree-track.right .tree-branches { grid-column: 1; grid-row: auto; justify-items: stretch; margin-left: 46px; }
  .tree-branch { width: auto; }
  .tree-track.left .tree-branch::before, .tree-track.right .tree-branch::before { left: auto; right: 100%; margin: 0 2px 0 0; width: 22px; }
  .tree-branch:not(:last-child)::after { display: none; }
  .tree-track.left .tree-leaves { justify-content: flex-start; }
  .leaf { min-height: 44px; }
}

/* ---- pages/glossary.css ---- */
/* Glossary page and the tap-to-define terms inside lessons. */

.gl-filter { display: block; margin-top: 16px; }
.gl-filter input {
  width: 100%; max-width: 480px; padding: 10px 14px; font: inherit;
  color: var(--text); background: var(--surface); border: 2px solid var(--card-border); border-radius: var(--radius);
}
.gl-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.gl-letters a {
  min-width: 34px; padding: 6px 8px; text-align: center; font-weight: 700; text-decoration: none;
  color: var(--text); background: var(--surface); border: 2px solid var(--card-border); border-radius: 10px;
}
.gl-letters a:hover { background: var(--coin-soft); }
.gl-group { margin-block: 24px; scroll-margin-top: 80px; }
.gl-group h2 { font: 1.4rem/1.2 var(--font-display); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--card-border); scroll-margin-top: 80px; }
.gl-group dl { margin: 0; display: grid; gap: 10px; }
.gl-entry { padding: 12px 14px; background: var(--surface); border: 2px solid var(--card-border); border-radius: var(--radius); overflow-wrap: anywhere; }
.gl-entry dt { font-weight: 700; }
.gl-entry dd { margin: 4px 0 0; color: var(--muted); }
.gl-learn { display: inline-block; margin-top: 6px; font-size: 0.9rem; color: var(--accent); }

/* Tap-to-define terms in lessons */
button.term {
  display: inline; margin: 0; padding: 0; font: inherit; color: inherit; text-align: inherit;
  background: none; border: 0; border-bottom: 2px dotted var(--accent); border-radius: 0; cursor: help;
}
button.term:hover, button.term[aria-expanded="true"] { background: var(--accent-soft); }
.term-pop {
  position: absolute; z-index: 60; width: min(320px, calc(100vw - 24px)); padding: 12px 14px;
  background: var(--surface); color: var(--text); border: 2px solid var(--card-border); border-radius: var(--radius);
  box-shadow: var(--shadow); font-size: 0.95rem; line-height: 1.5;
}
.term-pop strong { display: block; margin-bottom: 4px; }
.term-pop p { margin: 0; }
.term-pop a { display: inline-block; margin-top: 6px; font-size: 0.9rem; color: var(--accent); }

/* ---- pages/admin.css ---- */
/* Admin page (admin.html): a simple list of users, and a detail view for one user.
   Class names avoid an "ad-" prefix, because ad blockers hide elements whose class starts with it. */

.admin-page { padding-bottom: 48px; }
.admin-view { min-width: 0; }
.admin-summary { margin: 16px 0 8px; font-size: 0.92rem; }

/* Search, sort and refresh */
.admin-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.admin-tools input, .admin-tools select {
  min-width: 0; padding: 10px 14px; font: inherit; color: var(--text);
  background: var(--surface); border: 2px solid var(--card-border); border-radius: var(--radius);
}
.admin-tools input { flex: 1 1 200px; }
.admin-tools select { width: auto; flex: 0 0 auto; }
.admin-tools .btn { width: auto; flex: 0 0 auto; }

/* The list: one full-width button per user */
.admin-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.admin-list li { min-width: 0; }
.admin-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  width: 100%; min-height: 56px; padding: 8px 12px; margin: 0;
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
  background: var(--surface); border: 2px solid var(--card-border); border-radius: var(--radius);
}
.admin-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.admin-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.admin-avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--coin); color: var(--coin-ink); border: 2px solid var(--outline);
  font: 1.1rem/1 var(--font-display);
}
.admin-who { display: grid; min-width: 0; }
.admin-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-name.is-missing { color: var(--muted); font-weight: 600; }
.admin-mail { color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-meta { display: grid; justify-items: end; gap: 0; color: var(--muted); font-size: 0.82rem; text-align: right; white-space: nowrap; }

/* Phones: the last active line moves under the name so a long name keeps its room. */
@media (max-width: 520px) {
  .admin-row { grid-template-columns: auto minmax(0, 1fr); }
  .admin-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0 12px; justify-items: start; text-align: left; white-space: normal; }
}

/* One user */
.admin-back { margin: 16px 0 12px; width: auto; }
.admin-detail { min-width: 0; padding: 16px; background: var(--surface); border: 2px solid var(--card-border); border-radius: var(--radius); overflow-wrap: anywhere; }
.admin-detail h2 { margin: 0; font: 1.4rem/1.25 var(--font-display); }
.admin-detail h2.is-missing { color: var(--muted); }
.admin-detail h2:focus { outline: none; }
.admin-detail h2:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.admin-detail .admin-mail { margin: 2px 0 14px; white-space: normal; overflow: visible; font-size: 0.92rem; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 12px; margin: 0; }
.admin-stats div { min-width: 0; }
.admin-stats dt { color: var(--muted); font-size: 0.78rem; }
.admin-stats dd { margin: 0; font-weight: 700; }
.admin-section { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--border); }
.admin-section h3 { margin: 0 0 8px; font-size: 1.05rem; }
.admin-tracks, .admin-done { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 0.92rem; }
.admin-tracks li { display: flex; justify-content: space-between; gap: 10px; }
.admin-done li { padding-left: 1.2em; text-indent: -1.2em; }
.admin-done li::before { content: "\2713\00a0"; color: var(--good-text); font-weight: 700; }
.admin-last { margin: 8px 0 0; color: var(--muted); font-size: 0.88rem; }

.admin-error { padding: 14px; border: 2px solid var(--bad); background: var(--bad-soft); border-radius: var(--radius); overflow-wrap: anywhere; }

/* Tabs: Users | Requests */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.admin-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 18px;
  font-weight: 700; color: var(--text); text-decoration: none;
  background: var(--surface); border: 2px solid var(--card-border); border-radius: 999px;
}
.admin-tab:hover { border-color: var(--accent); background: var(--accent-soft); }
.admin-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.admin-tab[aria-current="page"] { background: var(--coin); color: var(--coin-ink); border-color: var(--outline); box-shadow: 2px 2px 0 var(--outline); }
.admin-badge {
  display: inline-block; min-width: 1.6em; padding: 0 7px; border-radius: 999px; text-align: center;
  font-size: 0.78rem; line-height: 1.6; background: var(--accent); color: var(--accent-ink);
}
.admin-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Request type and status chips */
.admin-pill, .admin-status {
  display: inline-block; padding: 1px 10px; border: 2px solid currentColor; border-radius: 999px;
  font-size: 0.76rem; font-weight: 700; line-height: 1.5; white-space: nowrap; text-align: center;
}
.admin-pill { min-width: 5.8rem; align-self: start; }
.admin-pill.is-bug { color: var(--bad-text); background: var(--bad-soft); }
.admin-pill.is-feature { color: var(--info-text); background: var(--accent-soft); }
.admin-pill.is-new-topic { color: var(--good-text); background: var(--good-soft); }
.admin-pill.is-content-fix { color: var(--warn-text); background: var(--coin-soft); }
.admin-pill.is-other, .admin-status.is-closed { color: var(--muted); background: var(--surface-2); }
.admin-status.is-waiting { color: var(--warn-text); background: var(--coin-soft); }
.admin-status.is-filed { color: var(--info-text); background: var(--accent-soft); }
.admin-status.is-done { color: var(--good-text); background: var(--good-soft); }

/* The requests list reuses the user row: a type chip instead of the initial. */
.admin-req-row { grid-template-columns: 5.8rem minmax(0, 1fr) auto; align-items: start; }
.admin-req-row .admin-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.admin-req-row .admin-meta { justify-items: end; gap: 2px; }
@media (max-width: 520px) {
  .admin-req-row { grid-template-columns: 5.8rem minmax(0, 1fr); }
  .admin-req-row .admin-meta { grid-column: 2; align-items: center; }
}

/* One request */
.admin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.admin-stats code { font: 0.85rem var(--mono); overflow-wrap: anywhere; }
.admin-text {
  padding: 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5;
  background: var(--surface-2); border: 2px solid var(--border); border-radius: 10px;
}

/* ---- pages/feedback.css ---- */
/* Suggest or report page (feedback.html): a form with four big choices, matching requests and
   "My requests". Class names start with "feedback-" (ad blockers hide some short prefixes). */

.feedback-page { padding-bottom: 48px; }
.feedback-form { display: grid; gap: 22px; max-width: 680px; margin-top: 16px; min-width: 0; }

/* The four kinds of request: big radio chips, one column on phones */
.feedback-types { margin: 0; padding: 0; border: 0; min-width: 0; }
.feedback-types legend { padding: 0; margin-bottom: 10px; font-weight: 700; }
.feedback-type-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .feedback-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feedback-type { position: relative; display: block; min-width: 0; cursor: pointer; }
.feedback-type input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.feedback-type-body {
  position: relative; display: grid; gap: 2px; min-height: 64px; padding: 12px 14px 12px 46px;
  background: var(--surface); border: 2px solid var(--card-border); border-radius: var(--radius);
  overflow-wrap: anywhere; transition: background 0.15s, border-color 0.15s;
}
.feedback-type-body::before {
  content: ""; position: absolute; left: 14px; top: 16px; width: 20px; height: 20px;
  background: var(--surface); border: 2px solid var(--card-border); border-radius: 50%;
}
.feedback-type-name { font-weight: 700; }
.feedback-type-help { color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.feedback-type:hover .feedback-type-body { border-color: var(--accent); }
.feedback-type input:checked + .feedback-type-body {
  background: var(--accent-soft); border-color: var(--accent); box-shadow: var(--shadow);
}
.feedback-type input:checked + .feedback-type-body::before {
  border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 42%, var(--surface) 46%);
}
.feedback-type input:focus-visible + .feedback-type-body { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Fields */
.feedback-field { display: grid; gap: 6px; min-width: 0; }
.feedback-field label { font-weight: 700; }
.feedback-optional { font-weight: 400; color: var(--muted); }
.feedback-label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.feedback-count { color: var(--muted); font: 600 0.82rem var(--mono); }
.feedback-field input, .feedback-field textarea, .feedback-field select {
  display: block; width: 100%; min-width: 0; min-height: 44px; padding: 10px 14px; font: inherit;
  color: var(--text); background: var(--surface); border: 2px solid var(--card-border); border-radius: var(--radius);
}
.feedback-field textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.feedback-field [aria-invalid="true"] { border-color: var(--bad); }
.feedback-hint { margin: 0; color: var(--muted); font-size: 0.88rem; }
.feedback-err { margin: 0; color: var(--bad-text); font-weight: 600; font-size: 0.9rem; }
.feedback-types .feedback-err { margin-top: 8px; }

/* "Is it one of these?" */
.feedback-matches {
  display: grid; gap: 8px; min-width: 0; padding: 14px;
  background: var(--accent-soft); border: 2px solid var(--card-border); border-radius: var(--radius);
}
.feedback-matches-title { font: 1.15rem/1.2 var(--font-display); }
.feedback-match-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.feedback-match {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px;
  padding: 10px 12px; background: var(--surface); border: 2px solid var(--card-border); border-radius: 10px;
}
.feedback-match-main { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.feedback-match-title { font-weight: 600; overflow-wrap: anywhere; }
.feedback-metoo { min-height: 44px; padding: 8px 18px; justify-content: center; }
.feedback-voted { color: var(--good-text); font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
@media (max-width: 480px) { .feedback-match { grid-template-columns: minmax(0, 1fr); } }

/* Privacy notice, the send button and the answer */
.feedback-notice {
  margin: 0; padding: 12px 14px; font-size: 0.92rem;
  background: var(--coin-soft); border: 2px solid var(--card-border); border-radius: var(--radius);
}
.feedback-send { justify-self: start; justify-content: center; min-height: 48px; padding-inline: 32px; font-size: 1rem; }
.feedback-send:disabled, .feedback-metoo:disabled { opacity: 0.6; cursor: wait; }
.feedback-send:disabled:hover, .feedback-metoo:disabled:hover { transform: none; box-shadow: 3px 3px 0 var(--outline); }
.feedback-msg { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.feedback-msg:empty { display: none; }
.feedback-msg.is-ok, .feedback-msg.is-error { padding: 10px 14px; border: 2px solid currentColor; border-radius: var(--radius); }
.feedback-msg.is-ok { color: var(--good-text); background: var(--good-soft); }
.feedback-msg.is-error { color: var(--bad-text); background: var(--bad-soft); }

/* My requests */
.feedback-mine { max-width: 680px; margin-top: 44px; min-width: 0; }
.feedback-mine h2 { margin-bottom: 12px; font: 1.4rem/1.2 var(--font-display); }
.feedback-req-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.feedback-req {
  display: grid; justify-items: start; gap: 4px; min-width: 0; padding: 12px 14px; overflow-wrap: anywhere;
  background: var(--surface); border: 2px solid var(--card-border); border-radius: var(--radius);
}
.feedback-req p { margin: 0; }
.feedback-req-title { font-weight: 700; }
.feedback-req-meta { color: var(--muted); font-size: 0.88rem; }

/* The "Tell us" line at the end of a lesson */
.lesson-report { margin-top: 28px; color: var(--muted); font-size: 0.92rem; }

/* ---- pages/learn.css ---- */
/* Static lesson pages for search engines (public/learn/*.html, generated by scripts/build.mjs). */
.learn-page { padding-top: 24px; }
.learn-page .lesson-head h1 { overflow-wrap: anywhere; }
.learn-outline { max-width: 68ch; margin-block: 0 24px; }
.learn-outline h2, .learn-track h2 { font-size: 1.4rem; margin-bottom: 10px; }
.learn-outline ol { margin: 0 0 12px; padding-left: 1.4em; display: grid; gap: 6px; }
.learn-cta { margin-block: 20px 12px; }
.learn-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block: 28px 16px; }
.learn-pager > * { min-width: 0; }
.learn-nav-link {
  display: block; padding: 12px 14px; color: var(--text); text-decoration: none; font-weight: 600;
  background: var(--surface); border: 2px solid var(--card-border); border-radius: var(--radius); overflow-wrap: anywhere;
}
.learn-nav-link:hover { background: var(--coin-soft); }
@media (max-width: 520px) { .learn-pager { grid-template-columns: 1fr; } }
.learn-track { margin-block: 28px; }
.learn-track p { margin: 0 0 10px; }
.learn-track ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.learn-track li { padding: 10px 14px; background: var(--surface); border: 2px solid var(--card-border); border-radius: var(--radius); overflow-wrap: anywhere; }
.learn-track li a { font-weight: 700; }
@media (max-width: 520px) { .learn-nav a:nth-child(-n+2) { display: none; } }  /* keep the header inside 360px */

/* ---- components/controls.css ---- */
/* Controls shared by every page: buttons, form fields, demo container, stats. */

/* ---------- 5. Shared demo widgets ---------- */
.demo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-block: 20px 12px;
  min-width: 0;
}

.demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.demo-status {
  flex: 1 1 260px;
  color: var(--muted);
  font-size: 0.92rem;
  min-height: 2.6em;
  display: flex;
  align-items: center;
}

.demo-note { color: var(--muted); font-size: 0.93rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 0.95rem var(--font);
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease), background 0.2s;
}

.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--glow); }

.btn:active { transform: translateY(0) scale(0.98); }

.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }

.btn.ghost:hover { border-color: var(--accent); }

/* One visible keyboard focus ring for every control, in both themes. */
:where(a, button, summary, select, input, textarea, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field { display: grid; gap: 6px; font-size: 0.92rem; color: var(--muted); min-width: 0; }

.field output { color: var(--text); font-weight: 600; font-family: var(--mono); }

select {
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 10px;
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

input[type="range"] { width: 100%; accent-color: var(--accent); }

.stat { display: grid; gap: 2px; }

.stat .label { color: var(--muted); font-size: 0.8rem; }

.stat .value { font: 600 1.6rem var(--mono); letter-spacing: -0.02em; }

@media (max-width: 560px) {
  .demo { padding: 14px 12px; }
}

/* Toasts (features/toast.js) */
.toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 40;
  display: grid;
  gap: 8px;
  width: min(460px, calc(100vw - 24px));
}
@media (min-width: 761px) { .toast-region { bottom: 24px; } }
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 16px;
  border: 2px solid var(--outline);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 0.92rem;
  animation: rise 0.3s var(--ease);
}
.toast.coin { background: var(--coin); color: var(--coin-ink); }
.toast-msg { flex: 1; min-width: 0; }
.toast .btn { padding: 6px 12px; font-size: 0.85rem; }
.toast-close { border: 0; background: none; color: inherit; font-size: 1.3rem; cursor: pointer; padding: 0 6px; }
.toast.leaving { opacity: 0; transform: translateY(8px); transition: 0.25s; }

/* Update notice (features/shell.js): sits above the phone dock like the toasts */
.update-bar {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 41;
  box-sizing: border-box;
  width: min(460px, calc(100vw - 24px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px 10px 16px;
  border: 2px solid var(--outline);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 0.92rem;
  animation: rise 0.3s var(--ease);
}
@media (min-width: 761px) { .update-bar { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } }
.update-msg { flex: 1 1 180px; min-width: 0; }
.update-actions { display: flex; gap: 8px; }
.update-actions .btn { min-height: 44px; justify-content: center; padding: 6px 16px; font-size: 0.9rem; }

/* Runnable Python cells (features/python.js) */
.py-cell {
  margin-block: 16px;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
}
.py-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 2px solid var(--card-border);
  background: var(--coin-soft);
}
.py-label { flex: 1; min-width: 0; font: 0.62rem/1.6 var(--pixel); color: var(--text); }
.py-bar .btn { padding: 6px 12px; font-size: 0.85rem; }
.py-code {
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 14px 16px;
  border: 0;
  background: var(--surface);
  color: var(--text);
  font: 0.86rem/1.6 var(--mono);
  resize: none;
  overflow: hidden;
  white-space: pre;
  overflow-x: auto;
  tab-size: 4;
}
.py-code:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.py-out { border-top: 2px dashed var(--card-border); padding: 12px 16px; background: var(--bg); }
.py-out pre { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; font-size: 0.84rem; white-space: pre-wrap; word-break: break-word; }
.py-out.error pre:last-child { color: var(--bad); }
.py-out img { display: block; max-width: 100%; margin-top: 8px; border-radius: 8px; background: #ffffff; }
.py-status { color: var(--muted); font-size: 0.88rem; }

select, summary, label.chip { cursor: pointer; }

.btn.small { padding: 6px 12px; font-size: 0.85rem; }

.link-btn {
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--info-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--text); }

/* Phones and tablets: finger-sized controls, and 16px form text so iOS does not zoom in. */
@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
  select, .py-bar .btn, .btn.small { min-height: 44px; }
  input[type="range"] { min-height: 44px; touch-action: pan-y; }
  .crumbs a, .site-footer a, .link-btn { display: inline-flex; align-items: center; min-height: 44px; }
  .toc-list button { min-height: 44px; }
  .toc-list li + li { margin-top: 6px; }
  .account-btn, .theme-toggle { min-width: 44px; min-height: 44px; justify-content: center; }
  .eyebrow, .py-label, .toc-num, .pp-label, .feature-tag { font-size: 0.72rem; }
  .pill, .meta, .phase-num, small { font-size: 0.82rem; }
}

/* ---- components/demo-kit.css ---- */
/* Building blocks for lesson demos: legends, flows, token chips, bars, pills, chat bubbles,
   ranked lists, panels. Use these before writing lesson-specific CSS. */

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 0.84rem; color: var(--muted); }

.legend span { display: inline-flex; align-items: center; gap: 6px; }

.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.sw.compute { background: var(--compute); }

.sw.cache { background: var(--cache); }

.sw.attn { background: var(--accent); }

/* KV cache: memory calculator */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }

.calc-result { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-block: 18px 12px; }

.meter { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }

.meter-fill { height: 100%; background: var(--cache); border-radius: 999px; transition: width 0.5s var(--ease), background 0.3s; }

.meter-fill.over { background: var(--bad); }

.formula {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 12px;
  overflow-x: auto;
  white-space: nowrap;
}

.check { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; cursor: pointer; padding: 8px 0; }

.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

.stat .value.good { color: var(--good); }

.stat .value.bad { color: var(--bad); }

/* Flow diagram used in lessons */
.flow { display: grid; gap: 8px; margin-block: 18px; max-width: 640px; }

.flow-step, .flow-branch {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.93rem;
  position: relative;
}

.flow-step small, .flow-branch small { display: block; font: 400 0.76rem var(--mono); color: var(--muted); margin-top: 2px; }

.flow-step::after { content: "↓"; position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); color: var(--muted); font-size: 0.85rem; }

.flow > .flow-step { margin-bottom: 6px; }

.flow-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }

.flow-branch { font-weight: 400; }

.flow-branch strong { display: block; font-size: 0.85rem; }

.flow-branch.hit { border-color: var(--cache); }

.flow-branch.hit strong { color: var(--cache); }

.flow-branch.miss { border-color: var(--compute); }

.flow-branch.miss strong { color: var(--compute); }

/* ---------- Shared demo building blocks (used by many lessons) ---------- */
.tok {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  border: 2px solid var(--card-border);
  background: var(--surface);
  font: 500 0.8rem var(--mono);
  white-space: nowrap;
  animation: rise 0.35s var(--ease) both;
}

.tok.ok { background: var(--good-soft); border-color: var(--good); }

.tok.no { background: var(--bad-soft); border-color: var(--bad); text-decoration: line-through; color: var(--muted); }

.tok.fix { background: var(--coin-soft); border-color: var(--compute); }

.tok.draft { background: var(--accent-soft); border-style: dashed; }

.tok.dim { opacity: 0.45; }

.tok-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.hbars { display: grid; gap: 8px; }

.hbar { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: 0.86rem; }

.hbar .track { height: 14px; border-radius: 999px; background: var(--surface-2); border: 2px solid var(--card-border); overflow: hidden; }

.hbar .track i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.5s var(--ease); }

.hbar .track i.good { background: var(--good); }

.hbar .track i.bad { background: var(--bad); }

.hbar .track i.warn { background: var(--compute); }

.hbar .track i.coin { background: var(--coin); }

.hbar .num { text-align: right; font: 600 0.82rem var(--mono); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  border: 2px solid currentColor;
  white-space: nowrap;
}

.pill.good { color: var(--good-text); background: var(--good-soft); }

.pill.bad { color: var(--bad-text); background: var(--bad-soft); }

.pill.warn { color: var(--warn-text); background: var(--coin-soft); }

.pill.info { color: var(--info-text); background: var(--accent-soft); }

.chat { display: grid; gap: 10px; }

.bubble {
  max-width: min(560px, 92%);
  padding: 10px 14px;
  border-radius: 14px;
  border: 2px solid var(--card-border);
  background: var(--surface);
  font-size: 0.9rem;
  animation: rise 0.35s var(--ease) both;
  min-width: 0;
}

.bubble .who { display: block; font: 0.68rem/1.8 var(--pixel); letter-spacing: 0.05em; color: var(--muted); margin-bottom: 2px; }

.bubble.user { justify-self: end; background: var(--accent-soft); }

.bubble.tool { background: var(--coin-soft); font-family: var(--mono); font-size: 0.8rem; }

.bubble.code { font-family: var(--mono); font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; }

.bubble.bad { border-color: var(--bad); background: var(--bad-soft); }

.bubble.good { border-color: var(--good); background: var(--good-soft); }

.seg { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--card-border); border-radius: 12px; overflow: hidden; }

.seg button {
  font: 600 0.85rem var(--font);
  padding: 8px 12px;
  border: 0;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.seg button:hover:not([aria-pressed="true"]) { background: var(--coin-soft); }

.seg button + button { border-left: 2px solid var(--card-border); }

.seg button[aria-pressed="true"] { background: var(--coin); color: var(--coin-ink); }

.demo-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; margin-top: 14px; }

.panel { border: 2px solid var(--card-border); border-radius: 12px; padding: 12px; background: var(--bg); min-width: 0; }

.panel h4 { font-size: 1rem; margin-bottom: 8px; }

.rank { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; counter-reset: r; }

.rank li {
  counter-increment: r;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface);
  border: 2px solid var(--card-border);
  font-size: 0.84rem;
  animation: rise 0.35s var(--ease) both;
}

.rank li::before { content: counter(r); font: 0.66rem var(--pixel); color: var(--muted); }

.rank li.rel { border-color: var(--good); background: var(--good-soft); }

.rank li small { font: 0.74rem var(--mono); color: var(--muted); }

@media (max-width: 560px) {
  .hbar { grid-template-columns: minmax(0, 1fr) 56px; }
  .hbar .track { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- themes/game.css ---- */
/* Theme skin: the retro-game look (ink outlines, block buttons, sky hero).
   Structure lives in the other files; swap or remove this file to restyle. */

/* ---------- 7. Game skin: outlines, block buttons, sky hero ---------- */
::selection { background: var(--coin); color: var(--coin-ink); }

h1, h2, h3, h4 { font-weight: 400; letter-spacing: 0.01em; }

.hero h1, .lesson-head h1 { font-weight: 400; letter-spacing: 0; line-height: 1.05; }

.brand { font-weight: 400; font-size: 1.3rem; letter-spacing: 0.01em; }

.brand-mark { border: 2px solid var(--outline); box-shadow: 2px 2px 0 var(--brick); }
.brand:hover .brand-mark { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--brick); }

.site-header { border-bottom: 2px solid var(--card-border); }

.eyebrow { font: 0.66rem/1.8 var(--pixel); letter-spacing: 0.04em; color: var(--brand-red); }

.meta, .hero-stats { font-family: var(--mono); }

/* Buttons are blocks you press */
.btn {
  background: var(--coin);
  color: var(--coin-ink);
  border: 2px solid var(--outline);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--outline);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.btn:hover { filter: none; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--outline); }

.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--outline); }

.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--card-border); }

.btn.ghost:hover { border-color: var(--card-border); }

.theme-toggle, .search-btn { border: 2px solid var(--card-border); color: var(--text); font-weight: 600; }

/* Cards get ink outlines and hard shadows */
.phase, .demo, .quiz-q, .pager-link, .reading-list a, .qkv > div, pre, .flow-step, .flow-branch, .quiz-result, .callout {
  border: 2px solid var(--card-border);
  box-shadow: var(--shadow);
}

.flow-branch.hit { border-color: var(--cache); }

.flow-branch.miss { border-color: var(--compute); }

.quiz-q { border-left-width: 6px; }

.quiz-q.is-right { border-left-color: var(--good); }

.quiz-q.is-wrong { border-left-color: var(--bad); }

.pager-link:hover, .reading-list a:hover, .qkv > div:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--card-border);
}

.callout { background: var(--coin-soft); border-radius: var(--radius); }

.speaking { background: var(--coin-soft); box-shadow: 0 0 0 6px var(--coin-soft); }

th, td { border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent); }

th { background: var(--coin-soft); }

.table-wrap table { border: 2px solid var(--card-border); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }

.table-wrap tr:last-child td { border-bottom: 0; }

/* Phase numbers are coin blocks */
.phase-num {
  background: var(--coin);
  color: var(--coin-ink);
  border: 2px solid var(--outline);
  box-shadow: 2px 2px 0 var(--brick);
  font: 0.75rem var(--pixel);
  border-radius: 6px;
}

.topic.ready .dot { background: var(--coin); border-color: var(--outline); box-shadow: none; width: 14px; height: 14px; }

.topic.done .dot { width: 14px; height: 14px; }

/* White text needs a red that is dark enough in both themes (--brand-red is lighter at night: 3.2:1). */
.topic.ready .badge { background: var(--banner-red); color: #ffffff; border: 2px solid var(--outline); }

.topic.done .badge { border: 2px solid var(--good); }

.topic:hover { background: var(--coin-soft); }

.chip span { border-width: 2px; border-color: var(--card-border); }

.chip span { color: var(--muted); }
.chip:hover span { background: var(--coin-soft); color: var(--text); }
.chip input:checked + span { background: var(--coin); color: var(--coin-ink); border-color: var(--outline); }
.chip input:checked + span small { color: inherit; opacity: 0.75; }

.quiz-final strong { font-weight: 400; }

.quiz-track, .meter { border: 2px solid var(--card-border); height: 12px; }

.quiz-track span { background: var(--good); }

/* Hero: a sky scene with clouds and a grass + brick ground */
.hero {
  margin-top: 24px;
  padding: 48px 24px 84px;
  background: var(--sky);
  color: var(--on-sky);
  border: 3px solid var(--card-border);
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  isolation: isolate;
}

.hero .lede, .hero .hero-stats { color: var(--on-sky); opacity: 0.85; }

.hero .eyebrow { color: var(--on-sky); }

.hero::before {
  inset: 18px 24px auto auto;
  width: 150px;
  height: 64px;
  aspect-ratio: auto;
  border-radius: 0;
  background:
    radial-gradient(circle at 24% 68%, var(--cloud) 17px, transparent 18px),
    radial-gradient(circle at 46% 42%, var(--cloud) 25px, transparent 26px),
    radial-gradient(circle at 70% 52%, var(--cloud) 20px, transparent 21px),
    radial-gradient(circle at 86% 74%, var(--cloud) 13px, transparent 14px),
    linear-gradient(var(--cloud), var(--cloud)) 22px 44px / 112px 20px no-repeat;
  opacity: 0.95;
  z-index: -1;
  animation: drift 14s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40px;
  border-top: 3px solid var(--card-border);
  background:
    linear-gradient(var(--grass) 0 10px, transparent 10px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgb(0 0 0 / 0.3) 46px 48px),
    repeating-linear-gradient(180deg, transparent 0 14px, rgb(0 0 0 / 0.3) 14px 15px),
    var(--brick);
  z-index: -1;
}

@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-40px); } }

@media (max-width: 560px) {
  .hero { padding: 36px 18px 76px; }
  .hero::before { right: 8px; top: 8px; transform-origin: top right; scale: 0.75; }
}