/* =========================================================================
   MongoDB Node.js Visual Guide — Refined-technical theme
   Token-driven light/dark system. Per-chapter accent via --accent override.
   ========================================================================= */

:root {
  /* Type */
  --font-display: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, ui-monospace, monospace;

  /* Fluid type scale (display surfaces) */
  --fs-display: clamp(2.4rem, 1.2rem + 4.5vw, 4.4rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  --fs-h3: 1.18rem;
  --fs-kicker: .78rem;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 28px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 96px;

  /* Brand (fixed) + accent (per-chapter, defaults to brand) */
  --brand: #00834d;
  --brand-strong: #00603a;
  --accent: var(--brand);
  --accent-strong: var(--brand-strong);

  /* Light palette */
  --bg: #f5f7f3;
  --bg-grad-a: #eef3ea;
  --bg-grad-b: #f8faf6;
  --surface: #ffffff;
  --surface-2: #f4f8f3;
  --surface-3: #e9efe7;
  --sidebar-bg: #fbfdfa;
  --border: #dfe7dc;
  --border-strong: #c3d1c2;
  --text: #101b14;
  --text-2: #4f6156;
  --text-3: #7e8f83;
  --on-accent: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --accent-tint: color-mix(in srgb, var(--accent) 8%, var(--surface));

  --blue: #2563eb;     --blue-soft: #dbeafe;   --blue-ink: #1e3a8a;
  --amber: #d97706;    --amber-soft: #fef3c7;  --amber-ink: #7c4a03;
  --red: #dc2626;      --red-soft: #fee2e2;    --red-ink: #7f1d1d;

  --shadow-1: 0 1px 2px rgba(13, 27, 18, .05), 0 8px 24px -6px rgba(13, 27, 18, .08);
  --shadow-2: 0 18px 50px -12px rgba(13, 27, 18, .18);
  --shadow-3: 0 24px 70px -18px rgba(10, 24, 16, .25);
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
                 0 8px 40px -8px color-mix(in srgb, var(--accent) 30%, transparent);
  --ring: color-mix(in srgb, var(--accent) 55%, transparent);

  /* Diagram tokens */
  --dgm-bg: #f7faf6;
  --dgm-node: #ffffff;
  --dgm-stroke: color-mix(in srgb, var(--accent) 45%, #9bc7a7);
  --dgm-line: var(--text);
  --dgm-text: var(--text);

  /* Density scale (overridden by data-density) */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --pad-card: 18px;
  --gap: 14px;
  --gap-sm: 10px;
  --fs-body: 1rem;

  --topbar-h: 64px;

  color-scheme: light;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
}

/* System dark when user has NOT pinned a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

/* ---- Dark palette (system or explicit) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0f0c;
    --bg-grad-a: #0d1510;
    --bg-grad-b: #070b09;
    --surface: #111a14;
    --surface-2: #16221a;
    --surface-3: #1d2e22;
    --sidebar-bg: #0d140f;
    --border: #1f2f24;
    --border-strong: #2e4636;
    --text: #ecf5ee;
    --text-2: #a3b8aa;
    --text-3: #6e8276;
    --on-accent: #04130a;
    --accent: #21de7e;
    --accent-strong: #6cf0ab;
    --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--surface));
    --accent-tint: color-mix(in srgb, var(--accent) 12%, var(--surface));

    --blue: #60a5fa; --blue-soft: #16294a; --blue-ink: #bfdbfe;
    --amber: #fbbf24; --amber-soft: #3a2c0c; --amber-ink: #fde68a;
    --red: #f87171; --red-soft: #3a1717; --red-ink: #fecaca;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -6px rgba(0, 0, 0, .45);
    --shadow-2: 0 22px 60px -10px rgba(0, 0, 0, .6);
    --shadow-3: 0 30px 90px -20px rgba(0, 0, 0, .7);
    --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
                   0 8px 48px -8px color-mix(in srgb, var(--accent) 38%, transparent);

    --dgm-bg: #0d1812;
    --dgm-node: #142219;
    --dgm-stroke: color-mix(in srgb, var(--accent) 50%, #2e4636);
    --dgm-line: var(--accent);
    --dgm-text: var(--text);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0f0c;
  --bg-grad-a: #0d1510;
  --bg-grad-b: #070b09;
  --surface: #111a14;
  --surface-2: #16221a;
  --surface-3: #1d2e22;
  --sidebar-bg: #0d140f;
  --border: #1f2f24;
  --border-strong: #2e4636;
  --text: #ecf5ee;
  --text-2: #a3b8aa;
  --text-3: #6e8276;
  --on-accent: #04130a;
  --accent: #21de7e;
  --accent-strong: #6cf0ab;
  --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--surface));
  --accent-tint: color-mix(in srgb, var(--accent) 12%, var(--surface));

  --blue: #60a5fa; --blue-soft: #16294a; --blue-ink: #bfdbfe;
  --amber: #fbbf24; --amber-soft: #3a2c0c; --amber-ink: #fde68a;
  --red: #f87171; --red-soft: #3a1717; --red-ink: #fecaca;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -6px rgba(0, 0, 0, .45);
  --shadow-2: 0 22px 60px -10px rgba(0, 0, 0, .6);
  --shadow-3: 0 30px 90px -20px rgba(0, 0, 0, .7);
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
                 0 8px 48px -8px color-mix(in srgb, var(--accent) 38%, transparent);

  --dgm-bg: #0d1812;
  --dgm-node: #142219;
  --dgm-stroke: color-mix(in srgb, var(--accent) 50%, #2e4636);
  --dgm-line: var(--accent);
  --dgm-text: var(--text);
}

/* ---- Density ---- */
[data-density="compact"] {
  --r-sm: 7px;
  --r: 10px;
  --r-lg: 12px;
  --pad-card: 12px;
  --gap: 10px;
  --gap-sm: 7px;
  --fs-body: .94rem;
}

/* =========================================================================
   Base
   ========================================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 88% -8%, var(--accent-tint), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--accent-tint), transparent 65%),
    linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b));
  background-attachment: fixed;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; opacity: .5; }
code, pre { font-family: var(--font-mono); }
a { color: var(--accent-strong); font-weight: 700; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; }
h1 { margin-bottom: 2px; font-size: 1.05rem; line-height: 1.18; font-weight: 700; }
p { line-height: 1.6; }
.small { color: var(--text-2); font-size: .84rem; line-height: 1.45; }

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* =========================================================================
   Buttons (shared)
   ========================================================================= */
.primary, .secondary, .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  transition: background .15s ease, border-color .15s ease, transform .08s ease, color .15s ease;
}
.primary:active, .secondary:active, .ghost:active, .icon-btn:active { transform: translateY(1px); }
.primary { color: var(--on-accent); background: var(--accent); }
.primary:hover { background: var(--accent-strong); }
.secondary { color: var(--text); background: var(--surface); border: 1px solid var(--border); }
.secondary:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ghost { color: var(--text-2); }
.ghost:hover { color: var(--text); background: var(--surface-2); }
.danger { color: var(--red); }
.secondary.danger:hover { border-color: var(--red); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.icon-btn.danger:hover { color: var(--red); border-color: var(--red); }
.icon-btn svg, .ui-icon { width: 19px; height: 19px; }

/* Segmented control */
.seg, .segmented {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.seg button, .segmented button {
  min-height: 32px;
  padding: 5px 11px;
  border-radius: 7px;
  color: var(--text-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  text-transform: capitalize;
  transition: background .15s ease, color .15s ease;
}
.seg button[aria-pressed="true"], .segmented button.active {
  color: var(--on-accent);
  background: var(--accent);
}
.seg button:hover:not([aria-pressed="true"]),
.segmented button:hover:not(.active) { color: var(--text); }

/* Chips */
.badge, .tag, .difficulty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 23px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.badge { color: var(--blue-ink); background: var(--blue-soft); }
.tag { color: var(--accent-strong); background: var(--accent-soft); }
.difficulty { color: var(--amber-ink); background: var(--amber-soft); }
.badges, .tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* =========================================================================
   App shell
   ========================================================================= */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(272px, 312px) 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow: auto;
  padding: 20px 16px 28px;
  border-right: 1px solid var(--border);
  background: var(--sidebar-bg);
  scrollbar-width: thin;
}

.brand {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
}
.leaf {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--on-accent);
  background: linear-gradient(150deg, var(--accent), var(--accent-strong));
  box-shadow: var(--glow-accent);
}
.leaf svg { width: 26px; height: 26px; fill: currentColor; }
.sidebar-close { display: none; }

.overall {
  margin: 18px 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.overall-head { display: flex; align-items: baseline; justify-content: space-between; }
.overall-head strong { font-family: var(--font-display); font-size: .95rem; }
.bar {
  height: 9px;
  overflow: hidden;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--surface-3);
}
.bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #2dd4bf));
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 13px;
}
.stat {
  padding: 9px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.stat strong { display: block; font-family: var(--font-display); font-size: 1.12rem; }
.badges { margin-top: 11px; }

/* Chapter nav */
.nav { display: grid; gap: 6px; }
.nav-empty { padding: 14px; color: var(--text-2); font-size: .88rem; text-align: center; }
.nav button {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text);
  text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.nav button:hover { background: var(--surface-2); border-color: var(--border); }
.nav button.active {
  background: var(--accent-tint);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
              0 6px 24px -8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.nav button.active .nav-icon { color: var(--on-accent); background: var(--accent); }
.nav strong { display: block; font-family: var(--font-display); font-size: .87rem; font-weight: 600; line-height: 1.22; }
.nav small { display: block; margin-top: 2px; color: var(--text-2); font-size: .72rem; }
.nav-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  transition: background .15s ease, color .15s ease;
}
.nav button.complete .nav-icon { color: var(--on-accent); background: var(--accent); }
.score-chip {
  min-width: 42px;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--text-2);
  background: var(--surface-3);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  text-align: center;
}
.nav button.complete .score-chip { color: var(--accent-strong); background: var(--accent-soft); }

/* =========================================================================
   Main + topbar
   ========================================================================= */
.main {
  min-width: 0;
  max-width: 100vw;
  overflow-x: hidden;
  padding: 18px clamp(16px, 3.5vw, 40px) 60px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  gap: 10px;
  align-items: center;
  margin: -18px clamp(-16px, -3.5vw, -40px) 14px;
  padding: 11px clamp(16px, 3.5vw, 40px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-toggle { display: none; flex: 0 0 auto; }

.search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 12px;
  width: 17px;
  height: 17px;
  color: var(--text-3);
  pointer-events: none;
}
.search input {
  width: 100%;
  min-height: 40px;
  padding: 8px 38px 8px 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .92rem;
}
.search input::placeholder { color: var(--text-3); }
.search input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.search-clear {
  position: absolute;
  right: 4px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
}
.search-clear:hover { background: var(--surface-2); }

.topbar-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }

.exam-note {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--text-2);
  background: var(--surface);
  font-size: .86rem;
  line-height: 1.5;
}

/* =========================================================================
   Card surface mixin (applied to many blocks)
   ========================================================================= */
.hero-copy, .hero-visual, .panel, .quiz-panel, .flash-panel,
.learning-unit, .flashcard, .metric, .reference-strip, .search-results {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

/* Hero */
.module-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  gap: var(--gap);
  align-items: stretch;
  margin-bottom: 18px;
}
.module-hero > *, .tabbar > *, .unit-elements > *, .reference-grid > *, .results-grid > * { min-width: 0; }
.hero-copy, .hero-visual { min-width: 0; }
.hero-copy { padding: clamp(18px, 2.8vw, 30px); }
.kicker {
  display: inline-block;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-copy h2 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 10px 0 12px;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1.05;
}
.hero-copy > p { max-width: 70ch; color: var(--text-2); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  background: var(--surface-2);
  font-size: .8rem;
  font-weight: 600;
}
.hero-meta span strong { color: var(--text); font-family: var(--font-display); }
.title-icon { width: 40px; height: 40px; color: var(--accent); flex: 0 0 auto; }
.hero-visual { padding: 14px; display: grid; place-items: center; min-height: 280px; overflow: hidden; }

/* Tabs */
.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 18px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.tabbar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-family: var(--font-display);
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.tabbar button:hover { color: var(--text); background: var(--surface-2); }
.tabbar button[aria-selected="true"] { color: var(--on-accent); background: var(--accent); }
.tab-count {
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  font-size: .72rem;
  font-family: var(--font-mono);
}

/* =========================================================================
   Study tab
   ========================================================================= */
.study-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap);
}
.study-toolbar .progress-line { color: var(--text-2); font-size: .88rem; }
.study-toolbar .progress-line strong { color: var(--text); font-family: var(--font-display); }

.study-list { display: grid; gap: var(--gap); }

.reference-strip { overflow: hidden; }
.reference-strip > header,
.learning-unit > header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: center;
  padding: var(--pad-card);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.unit-foot {
  display: flex;
  justify-content: flex-end;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.learning-unit.complete .unit-foot { background: var(--accent-tint); }
.reference-strip h3 { margin: 5px 0 0; font-size: 1.05rem; }
.source-links { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.source-links span {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: .76rem;
  color: var(--accent-strong);
  font-weight: 600;
}
.reference-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: var(--pad-card);
}
.reference-grid section {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.reference-grid h4 { margin-bottom: 8px; color: var(--accent-strong); font-size: .9rem; }
.reference-grid dl, .reference-grid ul { display: grid; gap: 8px; margin: 0; padding: 0; }
.reference-grid ul { padding-left: 18px; }
.reference-grid div { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.reference-grid div:last-child { padding-bottom: 0; border-bottom: 0; }
.reference-grid dt { color: var(--text); font-weight: 700; }
.reference-grid dd { margin: 3px 0 0; color: var(--text-2); line-height: 1.45; }
.reference-grid li { color: var(--text-2); line-height: 1.45; }

.learning-unit { overflow: hidden; scroll-margin-top: calc(var(--topbar-h) + 12px); }
.learning-unit.complete { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.learning-unit.complete > header { background: var(--accent-tint); }
.learning-unit > header { align-items: start; }
.unit-head-text { min-width: 0; }
.learning-unit h3 { margin: 5px 0 8px; font-size: 1.1rem; }
.unit-index {
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
}
.complete-unit.is-complete { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.unit-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding: var(--pad-card);
}
.unit-copy h4 { margin-bottom: 4px; color: var(--accent-strong); font-size: .88rem; }
.unit-copy p { color: var(--text-2); }
.unit-elements {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.study-element {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.study-element strong { display: block; margin-bottom: 7px; color: var(--text); font-family: var(--font-display); }
.study-element p, .study-element li { margin: 0; color: var(--text-2); line-height: 1.5; }
.visual-block { grid-column: 1 / -1; background: var(--surface); }
.decision ul, .checklist ul { display: grid; gap: 7px; margin: 0; padding-left: 18px; }
.checklist li::marker { color: var(--accent); }
.compare-block { grid-column: span 2; overflow: auto; }
.compare-block table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .9rem; }
.compare-block th, .compare-block td {
  padding: 9px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.compare-block th { color: var(--accent-strong); background: var(--surface-3); font-family: var(--font-display); }
.compare-block td:first-child, .compare-block td:nth-child(2) { font-weight: 600; color: var(--text); }
.lab-block { border-color: color-mix(in srgb, var(--blue) 40%, var(--border)); background: var(--blue-soft); }
.lab-block strong, .lab-block p { color: var(--blue-ink); }
.trap-callout { border-color: color-mix(in srgb, var(--amber) 45%, var(--border)); background: var(--amber-soft); }
.trap-callout strong, .trap-callout p { color: var(--amber-ink); }
.checkpoint {
  grid-column: 1 / -1;
  padding: 13px;
  border-radius: var(--r-sm);
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--text);
  background: var(--accent-tint);
}
.checkpoint strong { font-family: var(--font-display); color: var(--accent-strong); }
.checkpoint p { margin: 4px 0 0; color: var(--text-2); }

/* Focus mode */
.focus-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.focus-bar .focus-pos { color: var(--text-2); font-size: .9rem; }
.focus-bar .focus-pos strong { color: var(--text); font-family: var(--font-display); }
.focus-pager { display: flex; gap: 8px; align-items: center; }
.study-list.is-focus { gap: 0; }

pre {
  margin: 9px 0 0;
  padding: 13px;
  overflow: auto;
  border-radius: var(--r-sm);
  color: #d7fbe4;
  background: #0c1611;
  border: 1px solid #1c3326;
  line-height: 1.5;
  font-size: .85rem;
}

/* =========================================================================
   Tool head (quiz/flash controls)
   ========================================================================= */
.tool-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap);
}
.tool-head .tool-title { min-width: 220px; flex: 1 1 240px; }
.tool-head h3 { margin-bottom: 4px; }
.tool-head p { margin: 0; color: var(--text-2); font-size: .86rem; line-height: 1.45; }
.tool-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.quiz-panel, .flash-panel { padding: var(--pad-card); }

/* =========================================================================
   Flashcards
   ========================================================================= */
.flash-meter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--gap); }
.flash-meter .pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .82rem;
  color: var(--text-2);
}
.flash-meter .pill strong { color: var(--text); font-family: var(--font-display); }

.flash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}
.flashcard {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
  outline: none;
}
.flashcard:focus-visible { box-shadow: 0 0 0 3px var(--ring), var(--shadow-1); }
.flip {
  position: relative;
  min-height: 184px;
  padding: 0;
  cursor: pointer;
  perspective: 1100px;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 184px;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  transform-style: preserve-3d;
}
.flashcard.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-back { transform: rotateY(180deg); background: var(--surface-2); }
.flip-face .difficulty { align-self: flex-start; }
.flip-face h4 { margin: 4px 0; font-size: 1.02rem; line-height: 1.32; }
.flip-face .hint { color: var(--text-3); font-size: .85rem; }
.flip-face .answer { color: var(--text); font-weight: 500; }
.flip-face .face-label {
  margin-top: auto;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.flip-back .face-label { color: var(--accent-strong); }
.card-foot {
  display: grid;
  gap: 9px;
  padding: 13px 15px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.card-state { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-2); font-size: .76rem; font-weight: 600; }
.card-state .conf-track {
  flex: 1 1 90px;
  height: 6px;
  align-self: center;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.card-state .conf-track > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.card-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.card-actions button { min-height: 36px; padding: 7px 8px; font-size: .85rem; }

/* =========================================================================
   Quiz
   ========================================================================= */
.scorebox {
  display: none;
  margin-bottom: var(--gap);
  padding: 15px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.scorebox.show { display: block; }
.scorebox .score-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.scorebox strong { font-family: var(--font-display); font-size: 1.3rem; }
.scorebox .score-pct { font-family: var(--font-mono); color: var(--accent-strong); }
.scorebox p { margin: 7px 0 0; color: var(--text-2); }
.score-breakdown { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.score-breakdown .brk {
  display: inline-flex;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--text-2);
}
.score-breakdown .brk.good { background: var(--accent-soft); color: var(--accent-strong); }
.score-breakdown .brk.bad { background: var(--red-soft); color: var(--red-ink); }

.question {
  margin: 0 0 12px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.question legend { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 0; margin-bottom: 9px; }
.question legend span, .question legend strong, .question legend em {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-style: normal;
  font-weight: 700;
}
.question legend span { color: var(--on-accent); background: var(--accent); }
.question legend strong { color: var(--blue-ink); background: var(--blue-soft); }
.question legend em { color: var(--amber-ink); background: var(--amber-soft); }
.question h4 { margin: 0 0 8px; font-size: 1rem; line-height: 1.45; font-family: var(--font-body); font-weight: 600; }
.question h4 small { color: var(--text-2); font-weight: 500; }
.option {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 9px;
  align-items: start;
  margin-top: 5px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.option:hover { background: var(--surface); border-color: var(--border); }
.option input { margin-top: 2px; accent-color: var(--accent); }
.review .option { cursor: default; }
.correct { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-tint); }
.wrong { border-color: color-mix(in srgb, var(--red) 45%, transparent); background: var(--red-soft); }
.option .mark { margin-left: auto; font-weight: 800; }
.correct .mark { color: var(--accent-strong); }
.wrong .mark { color: var(--red); }
.explain {
  display: none;
  margin-top: 11px;
  padding: 11px;
  border-radius: var(--r-sm);
  color: var(--text);
  background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  line-height: 1.5;
}
.review .explain { display: block; }
.footer-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* =========================================================================
   Results
   ========================================================================= */
.results-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.metric { grid-column: span 3; padding: 16px; }
.metric strong { display: block; font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--accent-strong); }
.metric span { color: var(--text-2); font-weight: 600; font-size: .85rem; }
.panel { padding: 16px; }
.panel h3 { margin-bottom: 11px; font-size: 1.02rem; }
.span-6 { grid-column: span 6; }
.span-12 { grid-column: span 12; }
.ranked-tags, .recommendations { display: flex; flex-wrap: wrap; gap: 8px; }
.ranked-tags span {
  display: inline-flex; gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--red-ink);
  background: var(--red-soft);
  font-weight: 600;
  font-size: .82rem;
}
.ranked-tags.strong span { color: var(--accent-strong); background: var(--accent-soft); }
.ranked-tags strong { font-family: var(--font-mono); }
.recommendation {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  background: var(--surface-2);
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.recommendation:hover { border-color: var(--border-strong); background: var(--surface-3); }
.recommendation strong { font-family: var(--font-display); }

/* =========================================================================
   Global search results
   ========================================================================= */
.search-results { padding: var(--pad-card); }
.search-results > header { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.search-results h2 { font-size: 1.25rem; }
.search-results .count { color: var(--text-2); font-size: .88rem; }
.result-group { margin-bottom: 18px; }
.result-group > h3 {
  margin-bottom: 9px;
  color: var(--text-2);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.result-list { display: grid; gap: 8px; }
.result-item {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.result-item:hover { border-color: var(--border-strong); background: var(--surface-3); }
.result-item .ri-title { font-family: var(--font-display); font-weight: 600; }
.result-item .ri-sub { color: var(--text-2); font-size: .82rem; }
.result-item mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.search-empty { padding: 30px; text-align: center; color: var(--text-2); }

/* =========================================================================
   Diagrams (theme-aware)
   ========================================================================= */
.study-svg {
  width: 100%;
  min-height: 260px;
  aspect-ratio: 720 / 340;
}
.study-svg .svg-bg { fill: var(--dgm-bg); stroke: var(--border); }
.study-svg rect:not(.svg-bg), .study-svg circle {
  fill: var(--dgm-node);
  stroke: var(--dgm-stroke);
  stroke-width: 2;
}
.study-svg path.flow-line, .study-svg line, .study-svg .flow-line {
  stroke: var(--dgm-line);
  stroke-width: 2;
  stroke-dasharray: 5 7;
  fill: none;
  animation: dash-flow 2.4s linear infinite;
}
.study-svg .abort-line { stroke: var(--red); stroke-width: 2; stroke-dasharray: 5 7; animation: dash-flow 1.8s linear infinite; }
.study-svg marker path { fill: var(--dgm-line); stroke: none; }
.study-svg text { text-anchor: middle; font-family: var(--font-display); font-size: 12px; font-weight: 650; fill: var(--dgm-text); }
.study-svg tspan { dominant-baseline: middle; }
.study-svg .svg-title { text-anchor: start; font-size: 13px; font-weight: 600; fill: var(--text-2); }
.flow-node, .replica-node, .decision-node, .matrix-cell, .field-row, .planner-step, .txn-node {
  transform-origin: center;
}
.replica-node:first-child circle { fill: var(--accent-soft); stroke: var(--accent); }
.doc-paper { fill: var(--dgm-node); stroke: var(--dgm-stroke); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .14)); }
.field-row rect { fill: var(--accent-soft); stroke: var(--dgm-stroke); }
.planner-step rect { fill: var(--blue-soft); stroke: color-mix(in srgb, var(--blue) 40%, var(--border)); }
.pipeline-stages .flow-node rect { fill: var(--amber-soft); stroke: color-mix(in srgb, var(--amber) 45%, var(--border)); }
.transaction-flow .txn-node:nth-child(4) rect { fill: var(--red-soft); stroke: color-mix(in srgb, var(--red) 45%, var(--border)); }

@keyframes dash-flow { to { stroke-dashoffset: -24; } }
@keyframes node-pop {
  0%, 100% { opacity: .9; transform: translateY(0) scale(1); }
  45% { opacity: 1; transform: translateY(-3px) scale(1.012); }
}
.reveal { animation: fade-up .4s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   App shell — on desktop each column owns its own scroll, so the sidebar
   stays fixed at full viewport height while the study content scrolls
   inside the right column (rather than the whole page scrolling).
   ========================================================================= */
@media (min-width: 761px) {
  html, body { height: 100%; }
  body { overflow: hidden; }
  .app { height: 100vh; min-height: 0; overflow: hidden; }
  .sidebar { height: 100vh; }
  .main { height: 100vh; overflow-y: auto; overflow-x: hidden; }
}

/* Themed scrollbars (replace the default browser chrome) — colours follow
   the active light/dark theme via --text-3 / --accent. */
html, .sidebar, .main {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-3) 55%, transparent) transparent;
}
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-3) 50%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 70%, var(--text-3));
  background-clip: content-box;
  border: 3px solid transparent;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1080px) and (min-width: 761px) {
  .app { grid-template-columns: minmax(250px, 286px) 1fr; }
  .sidebar { padding-inline: 12px; }
  .nav button { grid-template-columns: 32px 1fr; gap: 9px; }
  .score-chip { display: none; }
  .nav-toggle, .sidebar-close { display: none; }
  .module-hero { grid-template-columns: 1fr; }
  .unit-body, .unit-elements { grid-template-columns: 1fr; }
  .compare-block { grid-column: auto; }
  .reference-grid { grid-template-columns: 1fr; }
  .metric { grid-column: span 6; }
  .span-6 { grid-column: span 12; }
}

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-grid; }
  .nav-toggle, .sidebar-close { touch-action: manipulation; }
  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 90;
    width: 100%;
    max-height: 72vh;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    box-shadow: 0 -24px 60px rgba(0, 0, 0, .16);
    background: var(--sidebar-bg);
    transform: translateY(100%);
    transition: transform .28s ease, box-shadow .28s ease;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 28px;
  }
  .app.nav-open .sidebar {
    transform: translateY(0);
  }
  .sidebar-close { display: inline-grid; }
  .sidebar .brand { gap: 10px; }
  .sidebar .brand-text { max-width: calc(100% - 64px); }
  .sidebar .brand-text h1 { font-size: 1rem; }
  .sidebar .brand-text .small { font-size: .78rem; }
  .scrim {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0, 0, 0, .42);
    backdrop-filter: blur(1px);
  }
  .main { padding-bottom: 92px; }
  .module-hero { grid-template-columns: 1fr; }
  .unit-body, .unit-elements { grid-template-columns: 1fr; }
  .compare-block { grid-column: auto; }
  .reference-grid { grid-template-columns: 1fr; }
  .metric { grid-column: span 6; }
  .span-6 { grid-column: span 12; }
}

@media (max-width: 720px) {
  .main { padding: 14px 13px 44px; }
  #moduleView, .exam-note, .module-hero, .tabbar, .study-list, .reference-strip, .learning-unit, .hero-copy, .hero-visual {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .main h2, .main h3, .main p, .exam-note, .hero-copy > p, .tabbar button {
    overflow-wrap: anywhere;
  }
  .topbar { margin: -14px -13px 14px; padding: 10px 13px; flex-wrap: wrap; }
  .search { order: 3; flex-basis: 100%; }
  .density-seg { display: none; }
  .module-hero { gap: 14px; }
  .hero-copy, .hero-visual { width: 100%; }
  .hero-copy { padding: 18px; }
  .hero-copy h2 { font-size: 1.65rem; line-height: 1.12; }
  .hero-copy > p { max-width: 100%; }
  .hero-visual { min-height: 0; padding: 10px; }
  .hero-visual .diagram-figure.is-hero .diagram-img { max-height: none; }
  .diagram-frame { padding: 8px; }
  .diagram-expand span { display: none; }
  .diagram-expand { padding: 7px; }
  .learning-unit > header, .reference-strip > header { grid-template-columns: 1fr; }
  .source-links { justify-content: flex-start; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .results-grid { grid-template-columns: 1fr; }
  .metric, .span-6, .span-12 { grid-column: auto; }
  .tabbar button { flex: 1 1 calc(50% - 7px); min-width: 0; padding-inline: 10px; }
  .tabbar button span:not(.tab-count) { min-width: 0; overflow-wrap: anywhere; }
  .footer-actions button { flex: 1 1 100%; }
  .card-actions { grid-template-columns: 1fr; }
}

/* =========================================================================
   Authored diagrams (draw.io export) + expand lightbox
   ========================================================================= */
.diagram-figure { min-width: 0; max-width: 100%; margin: 0; display: grid; gap: 8px; }
.diagram-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #ffffff;
  padding: 10px;
  overflow: hidden;
}
.diagram-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
}
.diagram-expand {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-2);
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(3px);
}
.diagram-expand:hover { color: var(--accent-strong); border-color: var(--accent); }
.diagram-expand .ui-icon { width: 14px; height: 14px; }
.diagram-figure figcaption { color: var(--text-2); font-size: .88rem; line-height: 1.45; }
.hero-visual .diagram-figure.is-hero { width: 100%; }
.hero-visual .diagram-figure.is-hero .diagram-img { max-height: 260px; }
.visual-expandable { position: relative; }
.visual-expandable > .diagram-expand { z-index: 4; }
.concept-illu.lightbox-content,
.study-svg.lightbox-content,
.diagram-figure.lightbox-content {
  width: min(1040px, 100%);
  max-height: calc(92vh - 120px);
}
.study-svg.lightbox-content {
  height: auto;
  min-height: min(560px, calc(92vh - 140px));
}
.concept-illu.lightbox-content {
  margin: 0;
  overflow: auto;
}
.concept-illu.lightbox-content .illu-svg {
  min-width: min(900px, 100%);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 40px);
  background: rgba(8, 16, 12, .62);
  backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }
.lightbox-inner {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  width: min(1100px, 96vw);
  max-height: 92vh;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lightbox-title { font-weight: 700; color: var(--text); }
.lightbox-stage {
  overflow: auto;
  display: grid;
  place-items: center;
  background: var(--dgm-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px;
}
.lightbox-img,
.lightbox-stage svg {
  width: 100%;
  height: auto;
  max-width: 100%;
}
body.lightbox-open { overflow: hidden; }

/* =========================================================================
   Motion & interaction layer (revamp)
   Theme-preserving choreography: navigation-triggered entrances, tactile
   hover/press micro-interactions, and lively-but-calm diagram motion.
   Everything here is overridden by the reduced-motion block below.
   ========================================================================= */
:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.5, .64, 1);
  --motion: .42s;
  --motion-fast: .2s;
}

/* ---- Keyframes ---- */
@keyframes enter-up {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes enter-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(.9); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes svg-pop {
  from { opacity: 0; transform: translateY(7px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes bar-shimmer {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
@keyframes hint-breathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* =========================================================================
   Entrance choreography — only while #moduleView carries .view-enter
   (set by render() on navigation renders, cleared on in-place updates).
   The default .reveal animation is neutralized and re-driven here so it no
   longer replays on every keystroke / rating.
   ========================================================================= */
.reveal { animation: none; }

#moduleView.view-enter .module-hero {
  animation: enter-up var(--motion) var(--ease-out) both;
}
#moduleView.view-enter #tabContent {
  animation: enter-fade .34s ease both;
  animation-delay: .06s;
}

/* Staggered children inside the active tab. Container fades, items rise —
   no double-translate because #tabContent itself only fades. */
#moduleView.view-enter .study-list > *,
#moduleView.view-enter .flash-grid > *,
#moduleView.view-enter #quizForm > *,
#moduleView.view-enter .results-grid > *,
#moduleView.view-enter .reference-grid > *,
#moduleView.view-enter .search-results .result-group {
  animation: enter-up var(--motion) var(--ease-out) both;
}
/* Shared stagger ramp (first 8 siblings; later ones share the last step). */
#moduleView.view-enter .study-list > *:nth-child(1),
#moduleView.view-enter .flash-grid > *:nth-child(1),
#moduleView.view-enter #quizForm > *:nth-child(1),
#moduleView.view-enter .results-grid > *:nth-child(1),
#moduleView.view-enter .reference-grid > *:nth-child(1),
#moduleView.view-enter .search-results .result-group:nth-child(1) { animation-delay: .02s; }
#moduleView.view-enter .study-list > *:nth-child(2),
#moduleView.view-enter .flash-grid > *:nth-child(2),
#moduleView.view-enter #quizForm > *:nth-child(2),
#moduleView.view-enter .results-grid > *:nth-child(2),
#moduleView.view-enter .reference-grid > *:nth-child(2),
#moduleView.view-enter .search-results .result-group:nth-child(2) { animation-delay: .07s; }
#moduleView.view-enter .study-list > *:nth-child(3),
#moduleView.view-enter .flash-grid > *:nth-child(3),
#moduleView.view-enter #quizForm > *:nth-child(3),
#moduleView.view-enter .results-grid > *:nth-child(3),
#moduleView.view-enter .reference-grid > *:nth-child(3),
#moduleView.view-enter .search-results .result-group:nth-child(3) { animation-delay: .12s; }
#moduleView.view-enter .study-list > *:nth-child(4),
#moduleView.view-enter .flash-grid > *:nth-child(4),
#moduleView.view-enter #quizForm > *:nth-child(4),
#moduleView.view-enter .results-grid > *:nth-child(4),
#moduleView.view-enter .reference-grid > *:nth-child(4),
#moduleView.view-enter .search-results .result-group:nth-child(4) { animation-delay: .17s; }
#moduleView.view-enter .study-list > *:nth-child(5),
#moduleView.view-enter .flash-grid > *:nth-child(5),
#moduleView.view-enter #quizForm > *:nth-child(5),
#moduleView.view-enter .results-grid > *:nth-child(5) { animation-delay: .22s; }
#moduleView.view-enter .study-list > *:nth-child(6),
#moduleView.view-enter .flash-grid > *:nth-child(6),
#moduleView.view-enter #quizForm > *:nth-child(6),
#moduleView.view-enter .results-grid > *:nth-child(6) { animation-delay: .27s; }
#moduleView.view-enter .study-list > *:nth-child(n+7),
#moduleView.view-enter .flash-grid > *:nth-child(n+7),
#moduleView.view-enter #quizForm > *:nth-child(n+7),
#moduleView.view-enter .results-grid > *:nth-child(n+7) { animation-delay: .31s; }

/* Hero metadata chips ride in just behind the heading. */
#moduleView.view-enter .hero-meta span {
  animation: pop-in .4s var(--ease-spring) both;
}
#moduleView.view-enter .hero-meta span:nth-child(1) { animation-delay: .14s; }
#moduleView.view-enter .hero-meta span:nth-child(2) { animation-delay: .2s; }
#moduleView.view-enter .hero-meta span:nth-child(3) { animation-delay: .26s; }
#moduleView.view-enter .hero-meta span:nth-child(4) { animation-delay: .32s; }

/* Diagram nodes pop in on a per-node stagger (uses the inline --i index). */
#moduleView.view-enter .study-svg .svg-nodes > g {
  animation: svg-pop .5s var(--ease-out) both;
  animation-delay: calc(.18s + var(--i, 0) * .09s);
}

/* =========================================================================
   Tactile micro-interactions (render-independent — always live)
   ========================================================================= */
/* Card surfaces gain a lift + accent-tinted shadow on hover. */
.learning-unit, .flashcard, .metric, .panel,
.reference-strip, .recommendation, .result-item, .quiz-panel, .flash-panel {
  transition:
    transform .24s var(--ease-out),
    box-shadow .24s var(--ease-out),
    border-color .2s ease,
    background .2s ease;
}
.learning-unit:hover, .reference-strip:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}
.flashcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.metric:hover, .panel:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.recommendation:hover, .result-item:hover { transform: translateX(3px); }

/* Flashcard flip: depth while turning + a gently breathing reveal hint. */
.flip-inner { box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: transform .55s var(--ease-out); }
.flashcard:hover .flip-front .face-label { animation: hint-breathe 1.8s ease-in-out infinite; }

/* Nav rows: accent rail grows in on hover, persists when active. */
.nav button { position: relative; transition: background .15s ease, border-color .15s ease; }
.nav button::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  height: 0; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height .22s var(--ease-out);
}
.nav button:hover::before { height: 42%; }
.nav button.active::before { height: 64%; }
.nav button:hover .nav-icon { transform: scale(1.08); }
.nav-icon { transition: background .15s ease, color .15s ease, transform .2s var(--ease-spring); }

/* Tabs + segmented controls: ease the active/hover transition and lift. */
.tabbar button { transition: background .18s ease, color .18s ease, transform .18s var(--ease-out); }
.tabbar button:hover:not([aria-selected="true"]) { transform: translateY(-2px); }
.tabbar button[aria-selected="true"] { box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 32%, transparent); }
.seg button, .segmented button { transition: background .18s ease, color .18s ease, transform .12s var(--ease-out); }
.seg button[aria-pressed="true"], .segmented button.active { transform: translateY(-1px); }

/* Primary/secondary lift on hover (transform is already in their transition). */
.primary:hover { transform: translateY(-1px); box-shadow: var(--glow-accent); }
.secondary:hover { transform: translateY(-1px); }

/* Quiz options nudge on hover; scored options pop once. */
.option { transition: background .14s ease, border-color .14s ease, transform .14s var(--ease-out); }
.option:hover { transform: translateX(3px); }
.review .option.correct, .review .option.wrong { animation: pop-in .4s var(--ease-spring) both; }

/* Scorebox & explanations slide in when revealed (one-shot, not on render). */
.scorebox.show { animation: enter-up .42s var(--ease-out) both; }
.review .explain { animation: enter-fade .35s ease both; }

/* Diagram expand affordance. */
.diagram-expand { transition: color .15s ease, border-color .15s ease, transform .18s var(--ease-spring), background .15s ease; }
.diagram-expand:hover { transform: scale(1.06); }

/* Sidebar drawer scrim fades rather than snapping. */
.scrim { animation: enter-fade .26s ease both; }

/* Progress bar gets a slow travelling sheen. */
.bar > span { position: relative; overflow: hidden; }
.bar > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--on-accent) 55%, transparent), transparent);
  transform: translateX(-120%);
  animation: bar-shimmer 3.4s ease-in-out infinite;
}

/* Lightbox grows in. */
.lightbox { animation: enter-fade .2s ease both; }
.lightbox-inner { animation: pop-in .32s var(--ease-out) both; }

/* =========================================================================
   Responsive refinements
   ========================================================================= */
/* Tablet band: ease hero typography and tighten the diagram before stacking. */
@media (max-width: 1080px) {
  .hero-copy h2 { font-size: clamp(1.55rem, 4.6vw, 2.2rem); }
  .hero-visual { min-height: 240px; }
  .tool-head { align-items: flex-start; }
}

/* Small tablets / large phones: let toolbars breathe across full width. */
@media (max-width: 760px) {
  .tool-head { flex-direction: column; align-items: stretch; }
  .tool-controls { width: 100%; justify-content: flex-start; }
  .tool-controls .segmented { flex: 1 1 auto; }
  .tool-controls .segmented button { flex: 1 1 auto; }
  .flash-meter { gap: 6px; }
  .flash-meter .pill { flex: 1 1 calc(50% - 6px); justify-content: center; }
}

/* Phones: trim the chrome, keep targets comfortable. */
@media (max-width: 600px) {
  .leaf { width: 40px; height: 40px; }
  .brand { grid-template-columns: 40px 1fr; }
  .hero-meta span { font-size: .76rem; padding: 5px 9px; }
  .topbar-actions { gap: 6px; }
  .study-toolbar { gap: 8px; }
  .focus-bar { flex-direction: column; align-items: stretch; }
  .focus-pager { justify-content: space-between; }
  .focus-pager .secondary { flex: 1 1 auto; }
  .scorebox .score-head { gap: 6px; }
}

/* Very small phones: single-column flashcards, comfortable taps. */
@media (max-width: 420px) {
  .flash-grid { grid-template-columns: 1fr; }
  .hero-copy h2 { font-size: 1.45rem; }
  .icon-btn { width: 38px; height: 38px; }
}

/* Ultra-wide: cap the reading measure so content stays legible. */
@media (min-width: 1500px) {
  .exam-note, #moduleView { max-width: 1240px; margin-inline: auto; }
}

/* =========================================================================
   Animated concept illustrations  (illustrations.js)
   -------------------------------------------------------------------------
   Resting state is always the final, fully-visible picture, so if the
   IntersectionObserver never fires (or motion is reduced) the concept is
   still fully readable. Hidden "before reveal" states and looping motion
   live inside @media (prefers-reduced-motion: no-preference) only.
   ========================================================================= */
.concept-illu {
  margin: 0;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, var(--accent-tint), var(--surface));
  border: 1px solid var(--border);
  border-radius: 16px;
}
.concept-illu .illu-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 6px;
}
.concept-illu .illu-caption {
  margin-top: 8px;
  color: var(--text-2);
  font-size: .92rem;
  line-height: 1.45;
}
.illu-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- shared SVG element styling --- */
.illu-svg .illu-card { fill: var(--dgm-node); stroke: var(--dgm-stroke); stroke-width: 1.5; }
.illu-svg .illu-label { fill: var(--dgm-text); font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.illu-svg .illu-head { fill: var(--text); font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.illu-svg .illu-foot { fill: var(--text-2); font-size: 12px; font-weight: 500; }
.illu-svg .illu-foot.dim { fill: var(--text-3); }
.illu-svg .illu-code { fill: var(--text); font-family: var(--font-mono, monospace); font-size: 12.5px; font-weight: 600; }
.illu-svg .illu-chip-text { fill: var(--accent-strong); font-family: var(--font-mono, monospace); font-size: 14px; font-weight: 700; }
.illu-svg .illu-letter { fill: var(--text); font-family: var(--font-mono, monospace); font-size: 22px; font-weight: 700; }
.illu-svg .illu-step { fill: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 800; }
.illu-svg .illu-flow {
  fill: none;
  color: var(--accent);                 /* arrow marker inherits via currentColor */
  stroke: color-mix(in srgb, var(--accent) 62%, var(--border));
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
}

/* --- semantic card colours --- */
.illu-svg .client     { fill: var(--surface-2); }
.illu-svg .gate-net   { fill: var(--blue-soft); stroke: color-mix(in srgb, var(--blue) 45%, var(--border)); }
.illu-svg .gate-user  { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.illu-svg .cluster    { fill: var(--accent-strong); stroke: none; }
.illu-svg .stage      { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.illu-svg .dns        { fill: var(--amber-soft); stroke: color-mix(in srgb, var(--amber) 45%, var(--border)); }
.illu-svg .host       { fill: var(--surface-2); }
.illu-svg .panel      { fill: var(--surface-2); }
.illu-svg .panel.find { fill: var(--blue-soft); stroke: color-mix(in srgb, var(--blue) 35%, var(--border)); }
.illu-svg .panel.agg  { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.illu-svg .panel.project { fill: var(--accent-tint); stroke: var(--border-strong); stroke-dasharray: 5 5; }
.illu-svg .panel.owns-atlas { fill: var(--blue-soft); stroke: color-mix(in srgb, var(--blue) 35%, var(--border)); }
.illu-svg .panel.owns-you   { fill: var(--amber-soft); stroke: color-mix(in srgb, var(--amber) 40%, var(--border)); }
.illu-svg .row        { fill: var(--surface); stroke: var(--border); }
.illu-svg .code       { fill: var(--surface-3); stroke: var(--border); }
.illu-svg .letter     { fill: var(--surface); stroke: var(--border-strong); }
.illu-svg .chip       { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.illu-svg .track      { fill: var(--surface-3); stroke: var(--border); }
.illu-svg .illu-fill.shared    { fill: color-mix(in srgb, var(--amber) 70%, var(--surface)); stroke: none; }
.illu-svg .illu-fill.dedicated { fill: var(--accent-strong); stroke: none; }
.illu-svg .illu-token         { fill: var(--accent-strong); stroke: none; }
.illu-svg .illu-token.doc     { fill: var(--amber); stroke: none; }
.illu-svg .score rect, .illu-svg .illu-fill-bar { fill: var(--accent-strong); stroke: none; }
.illu-svg .vec   { fill: var(--accent-strong); stroke: none; }
.illu-svg .lock  { fill: var(--accent-strong); stroke: none; }
.illu-svg .node  { fill: var(--accent-soft); stroke: var(--dgm-stroke); stroke-width: 1.5; }
.illu-svg .divider { stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 4 6; color: var(--border-strong); }
.illu-svg .swap circle { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.illu-svg .good { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.illu-svg .trap { fill: var(--red-soft); stroke: color-mix(in srgb, var(--red) 45%, var(--border)); }
.illu-svg .mark-ok { fill: var(--accent-strong); font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.illu-svg .mark-bad { fill: var(--red); font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.illu-svg .illu-flow.blocked { color: var(--red); stroke: color-mix(in srgb, var(--red) 60%, var(--border)); stroke-dasharray: 4 7; }
.illu-svg .illu-flow.restore { color: var(--accent); stroke: var(--accent); stroke-dasharray: 5 6; }
.illu-svg .strike { text-decoration: line-through; fill: var(--red); }
.illu-svg .sweep { opacity: .55; stroke-dasharray: 2 10; }

/* --- keyframes --- */
@keyframes illu-pop  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes illu-rise { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: none; } }
@keyframes illu-stream { to { stroke-dashoffset: -28; } }
@keyframes illu-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes illu-fillw { from { width: 0; } }
@keyframes illu-growbar { from { transform: scaleY(0); } }
@keyframes illu-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes illu-travel {
  0%   { transform: translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  68%  { transform: translateX(var(--travel, 200px)); opacity: 1; }
  84%, 100% { transform: translateX(var(--travel, 200px)); opacity: 0; }
}

/* --- motion only when the user allows it --- */
@media (prefers-reduced-motion: no-preference) {
  /* hidden-before-reveal states */
  .concept-illu:not(.in-view) .illu-node,
  .concept-illu:not(.in-view) .illu-grow { opacity: 0; }
  .concept-illu:not(.in-view) .illu-fill { width: 0; }
  .concept-illu:not(.in-view) .illu-fill-bar { transform: scaleY(0); }
  .concept-illu:not(.in-view) .illu-token { opacity: 0; }

  /* entrance choreography */
  .concept-illu.in-view .illu-node  { animation: illu-pop  var(--motion) var(--ease-out) both; animation-delay: calc(var(--i, 0) * .09s); }
  .concept-illu.in-view .illu-grow  { animation: illu-rise .42s var(--ease-out) both;          animation-delay: calc(.1s + var(--i, 0) * .12s); }
  .concept-illu.in-view .illu-fill  { animation: illu-fillw .7s var(--ease-out) both;           animation-delay: calc(.2s + var(--i, 0) * .15s); }
  .concept-illu.in-view .illu-fill-bar {
    transform-box: fill-box; transform-origin: bottom;
    animation: illu-growbar .55s var(--ease-out) both; animation-delay: calc(.2s + var(--i, 0) * .08s);
  }

  /* continuous life once revealed */
  .concept-illu.in-view .illu-flow  { animation: illu-stream 1.6s linear infinite; }
  .concept-illu.in-view .illu-pulse { animation: illu-breathe 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .25s); }
  .concept-illu.in-view .illu-token { animation: illu-travel 3.4s var(--ease-out) infinite; animation-delay: calc(.3s + var(--i, 0) * .4s); }
  .concept-illu.in-view .vec        { animation: illu-twinkle 1.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .22s); }
}

@media (prefers-reduced-motion: reduce) {
  .illu-svg .illu-token { display: none; }   /* travelling dots only read while moving */
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .flip-inner { transition: none; }
}

/* =========================================================================
   Home view — hero + chapter map
   ========================================================================= */
.sidebar .brand { cursor: pointer; }
body.is-home .exam-note { display: none; }

.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--topbar-h) - 120px);
  padding: var(--space-7) 0 var(--space-6);
}
.hero-inner { max-width: 880px; }
.hero-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--space-3);
}
.hero-title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line-inner { display: inline-block; will-change: transform; }
.hero-title .accent .line-inner {
  background: linear-gradient(92deg, var(--accent), var(--accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-sub {
  max-width: 560px;
  margin-bottom: var(--space-5);
  color: var(--text-2);
  font-size: 1.08rem;
  line-height: 1.65;
}
.hero-stats {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.hstat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hstat span { color: var(--text-3); font-size: .82rem; }
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-cta .primary { min-height: 48px; padding: 12px 22px; font-size: 1rem; box-shadow: var(--glow-accent); }
.hero-cta .secondary { min-height: 48px; padding: 12px 22px; font-size: 1rem; }

/* Chapter map */
.chapter-map { padding-bottom: var(--space-8); }
.map-head { margin-bottom: var(--space-5); }
.map-head h3 { font-size: var(--fs-h2); margin: 0; }
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.chapter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  text-align: left;
  box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s ease;
}
.chapter-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--glow-accent), var(--shadow-2);
}
.cc-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
.cc-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--accent-strong);
  background: var(--accent-tint);
}
.cc-icon svg { width: 24px; height: 24px; }
.cc-ring { position: relative; width: 44px; height: 44px; }
.cc-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.cc-ring .ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 4; }
.cc-ring .ring-val { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease-out); }
.cc-ring-num {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 700;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.cc-num {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--text-3);
}
.cc-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.cc-quest { color: var(--text-2); font-size: .84rem; line-height: 1.5; }
.cc-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: var(--space-2); }
.cc-chip {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: .7rem;
  font-weight: 600;
}
.cc-score { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-tint); }
.chapter-card.complete .cc-ring-num { color: var(--accent-strong); }

/* CSS fallback entrance (GSAP takes over when present via html.has-gsap) */
#moduleView.view-enter .home-hero .hero-inner > * {
  animation: enter-up var(--motion) var(--ease-out) both;
}
#moduleView.view-enter .home-hero .hero-inner > *:nth-child(2) { animation-delay: .05s; }
#moduleView.view-enter .home-hero .hero-inner > *:nth-child(3) { animation-delay: .1s; }
#moduleView.view-enter .home-hero .hero-inner > *:nth-child(4) { animation-delay: .15s; }
#moduleView.view-enter .home-hero .hero-inner > *:nth-child(5) { animation-delay: .2s; }
#moduleView.view-enter .chapter-card {
  animation: enter-up var(--motion) var(--ease-out) both;
  animation-delay: calc(.15s + var(--i, 0) * 40ms);
}
html.has-gsap #moduleView.view-enter .home-hero .hero-inner > *,
html.has-gsap #moduleView.view-enter .chapter-card { animation: none; }

/* =========================================================================
   Ambient layer (WebGL canvas + gradient fallback) — home view only
   ========================================================================= */
.main { position: relative; }
.main > .topbar, .main > .exam-note, .main > #moduleView { position: relative; z-index: 1; }
#ambientCanvas, .ambient-fallback {
  position: absolute;
  inset: 0 0 auto 0;
  height: 110vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
body.is-home #ambientCanvas.is-on { opacity: .9; }
body.is-home .ambient-fallback,
body.is-home .ambient-fallback.is-on {
  opacity: 1;
  background:
    radial-gradient(720px 420px at 78% 8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 65%),
    radial-gradient(560px 380px at 12% 38%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
}

/* =========================================================================
   Home view — responsive
   ========================================================================= */
@media (max-width: 1280px) {
  .chapter-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: var(--space-4); }
}
@media (max-width: 1080px) {
  .home-hero { min-height: 0; padding: var(--space-7) 0 var(--space-6); }
  #ambientCanvas, .ambient-fallback { height: 80vh; }
}
@media (max-width: 720px) {
  .home-hero { padding: var(--space-6) 0 var(--space-5); }
  .chapter-grid { grid-template-columns: 1fr; }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-4);
  }
  .hero-cta { width: 100%; }
  .hero-cta .primary, .hero-cta .secondary { flex: 1 1 100%; }
  .home-hero, .chapter-map, .chapter-card { width: 100%; max-width: 100%; min-width: 0; }
  .hero-title, .hero-sub, .cc-title, .cc-quest { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  .hero-title { font-size: 2rem; }
  .hstat strong { font-size: 1.4rem; }
}
@media (min-width: 1500px) {
  body.is-home #moduleView { max-width: 1320px; }
}