/* gayib — IB History HL study tool */

/* Honour the `hidden` attribute even on flex/grid containers.
   Authored display rules outrank the UA stylesheet, so [hidden] needs an
   explicit override or the element stays visible. */
[hidden] { display: none !important; }

:root {
  --bg: #0e0e11;
  --bg-2: #15161b;
  --bg-3: #1d1f26;
  --line: #2a2d36;
  --line-2: #3a3e49;
  --ink: #ebe8df;
  --ink-dim: #a6a49c;
  --ink-faint: #6e6c65;
  --accent: #c9a555;
  --accent-warm: #e6c06e;
  --correct: #6fbf7b;
  --wrong: #d87676;
  --radius: 10px;
  --radius-lg: 16px;
  --maxw: 1180px;
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* TikZ-compiled econ-diagram palette.  Each is referenced from
     post-processed SVGs as var(--econ-x, #hexFallback).  Dark is the
     default; future [data-theme="light"] block flips these. */
  --econ-bg:      #15161B;
  --econ-ink:     #EBE8DF;
  --econ-muted:   #A6A49C;
  --econ-faint:   #6E6C65;
  --econ-grid:    #2A2D36;
  --econ-blue:    #7AA6E0;
  --econ-blue-dk: #4A78B5;
  --econ-blue-lt: #B4D0F2;
  --econ-gold:    #D9A85A;
  --econ-gold-dk: #8C6F30;
  --econ-gold-lt: #F2D08A;
  --econ-accent:  #C9A555;
  --econ-red:     #D87676;
  --econ-green:   #8AB874;
  --econ-purple:  #B689C6;
  --econ-teal:    #6FB5A8;
}

[data-theme="light"] {
  --econ-bg:      #FFFFFF;
  --econ-ink:     #1E1F25;
  --econ-muted:   #5A5750;
  --econ-faint:   #8C8779;
  --econ-grid:    #E2DED2;
  --econ-blue:    #3870BF;
  --econ-blue-dk: #234C90;
  --econ-blue-lt: #C1D5EF;
  --econ-gold:    #B6862F;
  --econ-gold-dk: #7A5F26;
  --econ-gold-lt: #F0D89E;
  --econ-accent:  #A87E32;
  --econ-red:     #B14A4A;
  --econ-green:   #4F8C3F;
  --econ-purple:  #7A4C8C;
  --econ-teal:    #2F8478;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-warm); }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; }
h3 { font-size: 1.15rem; line-height: 1.3; }

kbd {
  font-family: var(--mono);
  font-size: 0.72rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink-dim);
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(14, 14, 17, 0.9);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: var(--ink);
}
.brand-mark {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.brand-sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.topnav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.topnav .nav-link, .topnav .nav-cta {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-dim);
}
.topnav .nav-link:hover { color: var(--ink); background: var(--bg-2); }
.topnav .nav-cta {
  background: var(--accent);
  color: #1a1400;
  font-weight: 600;
}
.topnav .nav-cta:hover { background: var(--accent-warm); color: #1a1400; }
.topnav a.active { color: var(--ink); }

@media (max-width: 720px) {
  .topbar { padding: 10px 14px; gap: 8px; }
  .brand-sub { display: none; }
  .topnav { gap: 2px; }
  .topnav .nav-link, .topnav .nav-cta { padding: 6px 9px; font-size: 0.86rem; }
  .topnav .nav-tech { display: none; }
}
@media (max-width: 460px) {
  .topbar { flex-wrap: wrap; }
  .brand-mark { font-size: 1.18rem; }
  .topnav .nav-link { padding: 6px 7px; font-size: 0.82rem; }
}
/* "Exam Technique" hidden on narrow screens — reachable from Home tile + Notes nav. */

/* ---------- App ---------- */
.app { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 60px; }
.view { animation: fadein 0.18s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Home hero (centered headline + 2 CTAs) ---------- */
.hero {
  min-height: calc(100svh - 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 32px;
  padding: 24px 16px;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 7vw, 4.4rem);
  line-height: 1.05;
  margin: 0;
  max-width: 18ch;
  letter-spacing: -0.01em;
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
@media (max-width: 520px) {
  .hero { gap: 24px; padding: 20px 12px; min-height: calc(100svh - 180px); }
  .hero h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
}
@media (max-width: 380px) {
  .hero-cta-row { flex-direction: column; align-items: stretch; width: min(100%, 220px); }
  .hero-cta-row .btn { width: 100%; }
}

/* ---------- Cheat-sheet documents ---------- */
.sheets { margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--line); }
.sheets-head { text-align: center; margin-bottom: 48px; }
.sheets-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 12px;
}
.sheets-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin: 0;
  line-height: 1.15;
}
.sheets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 12px;
}
@media (max-width: 820px) {
  .sheets-grid { grid-template-columns: 1fr; gap: 48px; max-width: 360px; }
}
.doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.25s ease;
}
a.doc:hover { transform: translateY(-6px); }
a.doc:hover .doc-page { box-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 24px 48px rgba(0,0,0,0.55); }
a.doc:hover .doc-num { color: var(--accent); }
.doc-page {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.414;
  background: #f6f3ec;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 14px 32px rgba(0,0,0,0.4);
  transition: box-shadow 0.25s ease;
}
.doc-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.doc-page::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(225deg, var(--bg) 0 50%, rgba(0,0,0,0.18) 50% 56%, rgba(255,255,255,0.7) 56%);
  border-bottom-left-radius: 2px;
  pointer-events: none;
}
.doc-meta { text-align: center; margin-top: 20px; }
.doc-num {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  transition: color 0.2s;
}
.doc-meta h3 {
  font-family: var(--serif);
  font-size: 1.08rem;
  margin: 0 0 6px;
  line-height: 1.25;
}
.doc-pages {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
@media (max-width: 520px) {
  .sheets { margin-top: 48px; padding-top: 32px; }
  .sheets-head { margin-bottom: 32px; }
}
body.watch-mode .sheets { display: none; }

/* Tile grid (used by notes per-paper index) */
.hero-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 520px) { .hero-grid { grid-template-columns: 1fr; } }
.tile {
  display: block;
  padding: 18px 18px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.tile:hover {
  border-color: var(--line-2);
  background: var(--bg-3);
  transform: translateY(-1px);
}
.tile-kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 8px;
}
.tile h3 { margin-bottom: 6px; font-family: var(--serif); }
.tile p { color: var(--ink-dim); font-size: 0.9rem; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  color: #1a1400;
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-warm); color: #1a1400; }
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--line-2); background: var(--bg-2); }
.btn-lg { padding: 14px 22px; font-size: 1rem; border-radius: 12px; }
.btn-sm { padding: 7px 14px; font-size: 0.84rem; border-radius: 8px; opacity: 0.78; }
.btn-sm:hover { opacity: 1; }

.hero-cta-secondary { margin-top: -14px; }

/* ---------- Psychology HL quiz ---------- */
.psych-shell { /* inherits from .quiz-shell */ }
.psych-topics {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 260px; overflow-y: auto;
  padding-right: 4px;
}
.psych-stage .q-tier { background: rgba(180, 140, 230, 0.14); color: #c8a9ee; border-color: rgba(180, 140, 230, 0.3); }

.psych-flash {
  display: flex; justify-content: center;
  margin: 24px 0 18px;
}
.psych-flash .btn {
  min-width: 200px;
}

.psych-answer {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: #1a1d24;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.psych-answer.got { border-left-color: var(--correct); background: rgba(111, 191, 123, 0.06); }
.psych-answer.missed { border-left-color: var(--wrong); background: rgba(220, 110, 110, 0.06); }
.psych-answer-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.psych-answer-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
}
.psych-variants {
  margin-top: 8px;
  font-size: 0.84rem;
  color: var(--ink-dim);
  font-family: var(--mono);
}

.psych-grade {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: #15171c;
}
.psych-grade-label {
  font-size: 0.86rem;
  color: var(--ink-2);
  text-align: center;
}
.psych-grade-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.btn-grade-missed,
.btn-grade-got { min-width: 140px; }
.btn-grade-missed { color: var(--wrong); border-color: rgba(220, 110, 110, 0.4); }
.btn-grade-missed:hover { border-color: var(--wrong); background: rgba(220, 110, 110, 0.08); }

@media (max-width: 720px) {
  .psych-topics { max-height: 180px; }
  .psych-grade-buttons { flex-direction: column-reverse; }
  .btn-grade-missed, .btn-grade-got { min-width: 0; width: 100%; }
}

/* Editor panel (in-place over question) */
.psych-edit {
  background: #15171c;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.psych-edit-row { display: flex; flex-direction: column; gap: 6px; }
.psych-edit-row label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.psych-edit-row input,
.psych-edit-row textarea,
.psych-edit-row select {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.45;
  outline: none;
  resize: vertical;
}
.psych-edit-row input:focus,
.psych-edit-row textarea:focus,
.psych-edit-row select:focus { border-color: var(--accent); }
.psych-edit-grid { flex-direction: row; gap: 12px; }
.psych-edit-grid > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.psych-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.psych-edit-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* Tool buttons: keep edit/delete subtle but visible */
.psych-stage .tool-btn { font-size: 0.95rem; }

/* Override section in sidebar */
.psych-overrides-section { margin-top: 14px; }
.psych-overrides-row {
  display: flex;
  gap: 14px;
  font-size: 0.84rem;
  color: var(--ink-2);
  margin: 4px 0 8px;
}
.psych-overrides-row .label { color: var(--ink-faint); margin-right: 4px; }
.psych-overrides-row strong { color: var(--accent); font-family: var(--mono); }
.psych-overrides-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.psych-overrides-actions .btn-sm { flex: 1; min-width: 0; }

@media (max-width: 720px) {
  .psych-edit-grid { flex-direction: column; }
}

/* ---------- Satisfying mode effects ---------- */
.confetti-layer {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 9999;
}
.confetti-piece {
  position: absolute;
  left: 0; top: 0;
  width: 7px; height: 7px;
  border-radius: 2px;
  pointer-events: none;
  will-change: transform, opacity;
  animation: confettiFly 1s ease-out forwards;
}
@keyframes confettiFly {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(var(--dx) - 50%), calc(var(--dy) - 50%)) rotate(var(--rot)); opacity: 0; }
}

.streak-burst {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent-warm, #f6c560);
  text-shadow: 0 0 12px rgba(246, 197, 96, 0.6);
  z-index: 9999;
  animation: streakBurst 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes streakBurst {
  0%   { transform: translate(-50%, -30%) scale(0.6); opacity: 0; }
  18%  { transform: translate(-50%, -65%) scale(1.25); opacity: 1; }
  60%  { transform: translate(-50%, -110%) scale(1.0); opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(0.85); opacity: 0; }
}

.sat-slide {
  animation: satSlide 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes satSlide {
  0%   { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Punchier streak indicator pulse when satisfying mode is on. */
body.sat-on .q-streak.bump,
body.sat-on .q-streak.hot {
  text-shadow: 0 0 14px rgba(246, 197, 96, 0.55);
}
body.sat-on .q-options li.correct {
  animation: satCorrectFlash 0.5s ease-out;
}
@keyframes satCorrectFlash {
  0%   { box-shadow: 0 0 0 0 rgba(111, 191, 123, 0); }
  35%  { box-shadow: 0 0 0 6px rgba(111, 191, 123, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(111, 191, 123, 0); }
}
body.sat-on .q-options li.wrong {
  animation: satWrongShake 0.36s ease-out;
}
@keyframes satWrongShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* XP widget — persistent bottom-right level/XP indicator. */
.sat-xp-widget {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 196px;
  padding: 10px 12px;
  background: rgba(20, 20, 24, 0.92);
  border: 1px solid rgba(201, 165, 85, 0.28);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink, #e8e6df);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 998;
}
.sat-xp-widget.sat-visible { opacity: 1; transform: translateY(0); }
.sat-xp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sat-xp-row + .sat-xp-row { margin-top: 6px; }
.sat-xp-row .lvl {
  color: var(--accent-warm, #f6c560);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sat-xp-row .xp { margin-left: auto; color: var(--ink-faint, #9a948a); }
.sat-xp-bar {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.sat-xp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #c9a555, #f6c560);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(246, 197, 96, 0.5);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.sat-xp-row-best { font-size: 0.72rem; color: var(--ink-faint, #9a948a); }
.sat-xp-row-best .best { letter-spacing: 0.04em; }
.sat-xp-row-best [data-best] { color: var(--accent-warm, #f6c560); font-weight: 700; }
@keyframes xpBump {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(0) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}
.sat-xp-widget.bump { animation: xpBump 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes xpLevelUp {
  0%   { transform: scale(1); box-shadow: 0 6px 26px rgba(0,0,0,0.45); }
  20%  { transform: scale(1.14); box-shadow: 0 0 36px rgba(246, 197, 96, 0.85), 0 6px 26px rgba(0,0,0,0.45); }
  100% { transform: scale(1); box-shadow: 0 6px 26px rgba(0,0,0,0.45); }
}
.sat-xp-widget.level-up { animation: xpLevelUp 0.8s cubic-bezier(0.22, 1, 0.36, 1); border-color: rgba(246, 197, 96, 0.7); }

/* XP floater — drifts up from answered button. */
.sat-xp-floater {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: #f6c560;
  text-shadow: 0 0 12px rgba(246, 197, 96, 0.65);
  z-index: 9999;
  animation: xpFloat 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sat-xp-floater.sat-xp-bonus {
  color: #b8e8ff;
  text-shadow: 0 0 14px rgba(184, 232, 255, 0.85);
}
@keyframes xpFloat {
  0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
  18%  { transform: translate(-50%, -110%) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, -220%) scale(0.95); opacity: 0; }
}

/* Milestone banner — center-screen punch. */
.sat-milestone {
  position: fixed;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  font-family: var(--display, "DM Serif Display"), serif;
  font-size: clamp(2.2rem, 8vw, 4.6rem);
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow:
    0 0 18px rgba(246, 197, 96, 0.85),
    0 0 38px rgba(201, 165, 85, 0.6),
    0 0 60px rgba(255, 138, 107, 0.45);
  pointer-events: none;
  z-index: 10000;
  animation: milestonePop 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  white-space: nowrap;
}
.sat-milestone.sat-mega {
  font-size: clamp(3rem, 11vw, 6.4rem);
  text-shadow:
    0 0 24px rgba(246, 197, 96, 1),
    0 0 60px rgba(255, 138, 107, 0.85),
    0 0 110px rgba(201, 165, 85, 0.65);
}
@keyframes milestonePop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); filter: blur(10px); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12); filter: blur(0); }
  35%  { transform: translate(-50%, -50%) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(1.04); filter: blur(2px); }
}

/* Screen shake on big moments. */
@keyframes satShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3px, 1px); }
  25% { transform: translate(2px, -2px); }
  40% { transform: translate(-2px, 2px); }
  55% { transform: translate(3px, 1px); }
  70% { transform: translate(-1px, -2px); }
  85% { transform: translate(2px, 1px); }
}
@keyframes satShakeBig {
  0%, 100% { transform: translate(0, 0); }
  8%  { transform: translate(-7px, 2px); }
  20% { transform: translate(6px, -5px); }
  32% { transform: translate(-5px, 5px); }
  44% { transform: translate(7px, 2px); }
  56% { transform: translate(-4px, -4px); }
  68% { transform: translate(5px, 3px); }
  80% { transform: translate(-3px, -2px); }
}
body.sat-shake { animation: satShake 0.5s cubic-bezier(0.4, 0, 0.6, 1); }
body.sat-shake-big { animation: satShakeBig 0.6s cubic-bezier(0.4, 0, 0.6, 1); }

/* Wrong-answer red flash overlay. */
body.sat-flash-wrong::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  background: radial-gradient(circle at 50% 40%, rgba(255, 80, 80, 0.18), transparent 60%);
  animation: satFlashWrong 0.4s ease-out forwards;
}
@keyframes satFlashWrong {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Hot/Blazing streak — progressive ambient glow on the streak indicator and prompt. */
body.sat-on.sat-hot .q-streak {
  color: var(--accent-warm, #f6c560);
  text-shadow: 0 0 12px rgba(246, 197, 96, 0.55);
  animation: hotPulse 1.6s ease-in-out infinite;
}
body.sat-on.sat-blazing .q-streak {
  color: #ff8a6b;
  text-shadow: 0 0 18px rgba(255, 138, 107, 0.85), 0 0 36px rgba(255, 138, 107, 0.5);
  animation: blazingPulse 1.1s ease-in-out infinite;
  font-weight: 700;
}
@keyframes hotPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(246, 197, 96, 0.5); }
  50%      { text-shadow: 0 0 18px rgba(246, 197, 96, 0.85); }
}
@keyframes blazingPulse {
  0%, 100% { text-shadow: 0 0 16px rgba(255, 138, 107, 0.75), 0 0 32px rgba(255, 138, 107, 0.45); transform: scale(1); }
  50%      { text-shadow: 0 0 26px rgba(255, 138, 107, 1), 0 0 52px rgba(255, 138, 107, 0.7);  transform: scale(1.06); }
}
body.sat-on.sat-blazing .q-prompt {
  text-shadow: 0 0 18px rgba(255, 138, 107, 0.18);
}

/* ---------- Sprint mode ---------- */
.sprint-launcher {
  display: none; /* shown only when satisfying mode is on */
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(246, 197, 96, 0.08), rgba(255, 138, 107, 0.06));
  border: 1px solid rgba(246, 197, 96, 0.3);
  border-radius: 12px;
}
body.sat-on .sprint-launcher { display: flex; }
.sprint-launcher .sprint-title {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sprint-launcher-btns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.sprint-btn {
  appearance: none;
  border: 1px solid rgba(246, 197, 96, 0.4);
  background: rgba(20, 20, 24, 0.7);
  color: var(--accent-warm, #f6c560);
  border-radius: 8px;
  padding: 8px 6px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.sprint-btn:hover {
  background: rgba(246, 197, 96, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(246, 197, 96, 0.32);
}
.sprint-btn .n { font-size: 1.08rem; display: block; line-height: 1; }
.sprint-btn .lbl { font-size: 0.66rem; color: var(--ink-faint); display: block; margin-top: 2px; letter-spacing: 0.04em; }

.sprint-progress {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
body.sat-on .sprint-progress.active { display: flex; }
.sprint-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.25s ease;
}
.sprint-dot.correct { background: #6fbf7b; border-color: #6fbf7b; box-shadow: 0 0 10px rgba(111, 191, 123, 0.6); }
.sprint-dot.wrong   { background: #e85a5a; border-color: #e85a5a; }
.sprint-dot.current {
  background: var(--accent-warm, #f6c560);
  border-color: var(--accent-warm, #f6c560);
  animation: sprintDotPulse 1.2s ease-in-out infinite;
}
@keyframes sprintDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246, 197, 96, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(246, 197, 96, 0); }
}
.sprint-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  margin-left: auto;
}

.sprint-complete {
  background: linear-gradient(135deg, rgba(246, 197, 96, 0.1), rgba(125, 175, 255, 0.06));
  border: 1px solid rgba(246, 197, 96, 0.4);
  border-radius: 14px;
  padding: 22px 20px;
  text-align: center;
}
.sprint-complete h2 {
  font-family: var(--display, "DM Serif Display"), serif;
  font-size: 2rem;
  margin: 0 0 12px;
  color: var(--accent-warm, #f6c560);
}
.sprint-complete .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}
.sprint-complete .stat {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 10px 8px;
}
.sprint-complete .stat .v { font-family: var(--mono); font-size: 1.4rem; color: #fff; font-weight: 700; }
.sprint-complete .stat .l { font-size: 0.72rem; color: var(--ink-faint); margin-top: 2px; letter-spacing: 0.04em; }
.sprint-complete .actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- Confidence rating ---------- */
.q-confidence-pre {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  background: rgba(125, 175, 255, 0.06);
  border: 1px solid rgba(125, 175, 255, 0.22);
  border-radius: 10px;
}
.q-confidence-pre .lbl {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.q-conf-row { display: flex; gap: 6px; flex-wrap: wrap; }
.q-conf-btn {
  appearance: none;
  flex: 1 1 110px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink, #e8e6df);
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.84rem;
  cursor: pointer;
  transition: transform 0.12s, background 0.18s, border-color 0.18s;
}
.q-conf-btn:hover { transform: translateY(-1px); background: rgba(125, 175, 255, 0.12); }
.q-conf-btn[data-conf="0"] { color: #d99c9c; }
.q-conf-btn[data-conf="1"] { color: #d9c39c; }
.q-conf-btn[data-conf="2"] { color: #b8d99c; }
.q-conf-btn[data-conf="3"] { color: #9cd9bf; }
.q-conf-btn .k {
  display: inline-block;
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
  color: var(--ink-faint);
}

/* ---------- Bucket / revenge / trap pills inside feedback ---------- */
.q-pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.q-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.q-pill.revenge { color: #f6c560; }
.q-pill.revenge.destroyed { color: #6fbf7b; }
.q-pill.trap    { color: #ff8a6b; }
.q-pill.bucket-new      { color: #9a948a; }
.q-pill.bucket-weak     { color: #e85a5a; }
.q-pill.bucket-stable   { color: #7dafff; }
.q-pill.bucket-mastered { color: #6fbf7b; }
.q-pill.due { color: var(--ink-faint); border-color: rgba(255,255,255,0.18); }
.q-pill.bonus { color: #b8e8ff; box-shadow: 0 0 12px rgba(184, 232, 255, 0.4); }
.q-pill.misconception { color: #ff8a6b; border-color: rgba(255,138,107,0.5); }
.q-pill.shaky { color: #f6c560; border-color: rgba(246,197,96,0.4); }
.q-pill.fast  { color: #6fbf7b; border-color: rgba(111,191,123,0.35); }

/* Top-of-question revenge banner. */
.q-revenge-banner {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(246, 197, 96, 0.1), rgba(255, 138, 107, 0.08));
  border: 1px solid rgba(246, 197, 96, 0.4);
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--accent-warm, #f6c560);
}
body.sat-on .q-revenge-banner.active { display: flex; }
.q-revenge-banner .icon { font-size: 1rem; }

/* Double-XP banner (variable reward). */
.q-bonus-banner {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(184, 232, 255, 0.1), rgba(125, 175, 255, 0.08));
  border: 1px solid rgba(184, 232, 255, 0.4);
  font-family: var(--mono);
  font-size: 0.84rem;
  color: #b8e8ff;
  animation: bonusPulse 1.6s ease-in-out infinite;
}
body.sat-on .q-bonus-banner.active { display: flex; }
@keyframes bonusPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(184, 232, 255, 0.18); }
  50%      { box-shadow: 0 0 20px rgba(184, 232, 255, 0.45); }
}

/* ---------- Exam-readiness bar ---------- */
.readiness-card {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: rgba(20, 20, 24, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
body.sat-on .readiness-card { display: flex; }
.readiness-row { display: flex; align-items: center; justify-content: space-between; }
.readiness-row .ttl {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.readiness-row .pct {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-warm, #f6c560);
}
.readiness-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.readiness-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #c9a555, #f6c560 50%, #6fbf7b);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 8px rgba(246, 197, 96, 0.45);
}
.readiness-trajectory {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}
.readiness-trajectory strong { color: var(--accent-warm, #f6c560); }
.readiness-topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.readiness-topic {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}
.readiness-topic .t-row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.72rem; }
.readiness-topic .t-name { color: var(--ink); }
.readiness-topic .t-pct { color: var(--accent-warm, #f6c560); }
.readiness-topic .t-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.readiness-topic .t-fill { height: 100%; background: linear-gradient(90deg, #c9a555, #6fbf7b); transition: width 0.5s; }

/* Smart streaks panel additions. */
.smart-streaks {
  display: none;
  margin-top: 8px;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
}
body.sat-on .smart-streaks { display: flex; }
.smart-streaks .ss-row { display: flex; justify-content: space-between; }
.smart-streaks .ss-row .v { color: var(--accent-warm, #f6c560); font-weight: 700; }

/* ---------- Mistake museum ---------- */
.museum-btn {
  display: none;
  appearance: none;
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(232, 90, 90, 0.08);
  border: 1px solid rgba(232, 90, 90, 0.32);
  color: #e85a5a;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}
body.sat-on .museum-btn { display: block; }
.museum-btn:hover { background: rgba(232, 90, 90, 0.18); transform: translateY(-1px); }

.museum-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.museum-modal {
  width: min(820px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: #14141a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}
.museum-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.museum-head h2 {
  margin: 0;
  font-family: var(--display, "DM Serif Display"), serif;
  font-size: 1.4rem;
  color: var(--accent-warm, #f6c560);
}
.museum-head .sub { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }
.museum-close {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--ink);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--mono);
}
.museum-list {
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.museum-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid #e85a5a;
  border-radius: 10px;
  padding: 12px 14px;
}
.museum-card.bucket-stable { border-left-color: #7dafff; }
.museum-card.bucket-mastered { border-left-color: #6fbf7b; }
.museum-card .q {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.museum-card .meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.museum-card .meta .t { color: var(--accent-warm, #f6c560); }
.museum-card .ans { font-family: var(--mono); font-size: 0.78rem; color: #6fbf7b; }
.museum-card .ans .lbl { color: var(--ink-faint); margin-right: 4px; }
.museum-card .why { font-size: 0.82rem; color: var(--ink-faint); margin-top: 6px; line-height: 1.4; }
.museum-empty {
  text-align: center;
  padding: 36px 18px;
  color: var(--ink-faint);
  font-family: var(--mono);
}

/* Reduced-motion: kill all the new animations. */
@media (prefers-reduced-motion: reduce) {
  .confetti-piece, .streak-burst, .sat-slide,
  .sat-xp-floater, .sat-milestone, .sat-xp-widget.bump, .sat-xp-widget.level-up,
  body.sat-on .q-options li.correct,
  body.sat-on .q-options li.wrong,
  body.sat-shake, body.sat-shake-big,
  body.sat-on.sat-hot .q-streak,
  body.sat-on.sat-blazing .q-streak,
  .q-bonus-banner, .sprint-dot.current,
  body.sat-flash-wrong::before {
    animation: none !important;
  }
  .sat-xp-bar-fill, .readiness-bar-fill, .readiness-topic .t-fill {
    transition: none !important;
  }
}

/* ---------- Quiz ---------- */
.quiz-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 820px) {
  .quiz-shell { grid-template-columns: 1fr; }
  /* On mobile the quiz stage matters more than the picker — show it first. */
  .quiz-shell .quiz-stage { order: 1; }
  .quiz-shell .quiz-side  { order: 2; }
}

.quiz-side {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  position: sticky;
  top: 82px;
}
@media (max-width: 820px) { .quiz-side { position: static; } }
.side-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin-bottom: 12px;
}
.filter-group { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.12s;
  font-family: var(--sans);
}
.chip:hover { color: var(--ink); border-color: var(--line-2); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  color: #1a1400;
  border-color: var(--accent);
  font-weight: 600;
}
.chip[aria-pressed="true"] span { color: #1a1400; }
.chip span { color: var(--ink-faint); font-family: var(--mono); font-size: 0.76rem; margin-left: 4px; }

.topic-filter {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-bottom: 14px;
}
.topic-filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.topic-filter-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.topic-clear {
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.74rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.topic-clear:hover { color: var(--ink); }
.topic-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  margin-bottom: 6px;
}
.chip-topic { font-size: 0.78rem; padding: 5px 10px; }
.chip-all {
  border-color: rgba(201, 165, 85, 0.45);
  color: var(--accent);
  font-weight: 600;
}
.chip-all[aria-pressed="true"] {
  background: var(--accent);
  color: #1a1408;
  border-color: var(--accent);
}
.chip-all[aria-pressed="true"] span {
  color: #1a1408;
  opacity: 0.75;
}
.topic-group-head {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-top: 4px;
}
.topic-group-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.topic-hint {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.side-stats {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  line-height: 1.8;
}
.side-stats .label { color: var(--ink-faint); }
.side-stats .val { color: var(--accent); }
.side-stats .weak { display: block; margin-top: 6px; color: var(--ink); font-family: var(--sans); font-size: 0.82rem; }
.side-actions { margin-top: 14px; }

.quiz-stage {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 520px) { .quiz-stage { padding: 20px; } }

.quiz-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.q-num { color: var(--accent); }
.q-tier {
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--ink-dim);
}
.q-topic { color: var(--ink-dim); }
.q-streak { margin-left: auto; color: var(--ink-dim); transition: color 0.2s; }
.q-streak.hot { color: var(--accent-warm); font-weight: 600; }
.q-streak.bump { animation: streakBump 0.45s ease-out; }
@keyframes streakBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); color: var(--correct); }
  100% { transform: scale(1); }
}

.q-prompt {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  line-height: 1.3;
  margin-bottom: 22px;
  color: var(--ink);
}
.q-options {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.q-options li {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  font-size: 0.98rem;
  user-select: none;
}
.q-options li:hover:not(.disabled) { border-color: var(--line-2); background: #22252e; }
.q-options li:active:not(.disabled) { transform: scale(0.998); }
.q-options .key {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 1px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}
.q-options li.correct {
  background: rgba(111, 191, 123, 0.14);
  border-color: var(--correct);
  color: var(--ink);
  animation: pulseCorrect 0.6s ease-out;
}
.q-options li.correct .key { border-color: var(--correct); color: var(--correct); background: rgba(111, 191, 123, 0.16); }
.q-options li.correct::after {
  content: "✓";
  margin-left: auto;
  color: var(--correct);
  font-weight: 700;
  font-size: 1.1rem;
  animation: pingIn 0.35s ease-out both;
}
.q-options li.wrong {
  background: rgba(216, 118, 118, 0.12);
  border-color: var(--wrong);
  animation: shake 0.42s cubic-bezier(.36,.07,.19,.97);
}
.q-options li.wrong .key { border-color: var(--wrong); color: var(--wrong); }
.q-options li.wrong::after {
  content: "✕";
  margin-left: auto;
  color: var(--wrong);
  font-weight: 700;
  font-size: 1.05rem;
  opacity: 0.85;
}
.q-options li.disabled { cursor: default; }
.q-options li.disabled:not(.correct):not(.wrong) { opacity: 0.38; }

@keyframes pulseCorrect {
  0%   { box-shadow: 0 0 0 0 rgba(111, 191, 123, 0.55); transform: scale(1); }
  40%  { box-shadow: 0 0 0 10px rgba(111, 191, 123, 0); transform: scale(1.015); }
  100% { box-shadow: 0 0 0 0 rgba(111, 191, 123, 0); transform: scale(1); }
}
@keyframes pingIn {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.q-feedback {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: auto;
}
.q-explain {
  color: var(--ink-dim);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.q-explain strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 6px;
  letter-spacing: 0;
  text-transform: none;
}
.q-explain.correct strong { color: var(--correct); }
.q-explain.wrong strong { color: var(--wrong); }
.q-tip {
  color: var(--ink-dim);
  font-size: 0.88rem;
  font-style: italic;
  margin: 14px 0 0;
}
.q-tip::before { content: none; }
.q-context-wrap { margin: 0; padding: 0; border: none; }
.q-context-wrap > summary { display: none; }
.q-context-body {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 62ch;
}
.q-context-body p { margin: 0 0 14px; }
.q-context-body p:last-child { margin-bottom: 0; }
.q-context-body strong { color: var(--ink); font-weight: 600; }
.q-context-body em { color: var(--ink-dim); font-style: italic; }

#qNext { margin-top: 24px; }
#qNext.locked { opacity: 0.35; cursor: not-allowed; }

/* When answered, the question fades back so feedback leads the eye. */
#quizStage.answered .q-prompt { opacity: 0.5; transition: opacity 0.3s ease; }
#quizStage.answered .q-footer { display: none; }

.q-prompt, #qOptions { animation: qFadeIn 0.28s ease-out both; }
.q-feedback:not([hidden]) { animation: qFadeIn 0.4s ease-out both; }
@keyframes qFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.q-footer {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  color: var(--ink-faint);
}
.hint kbd { margin-right: 4px; }

/* ---------- Notes ---------- */
.notes-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 820px) { .notes-shell { grid-template-columns: 1fr; } }

.notes-nav {
  position: sticky;
  top: 82px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 10px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
@media (max-width: 820px) { .notes-nav { position: static; max-height: none; } }
.notes-nav .paper-group { margin-bottom: 14px; }
.notes-nav .paper-title {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  padding: 4px 10px 8px;
}
.notes-nav a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--ink-dim);
  font-size: 0.9rem;
}
.notes-nav a:hover { color: var(--ink); background: var(--bg-3); }
.notes-nav a.active {
  color: var(--accent);
  background: rgba(201, 165, 85, 0.08);
}

.notes-body { min-width: 0; }
.note-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.note-title { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 8px; }
.note-blurb { color: var(--ink-dim); font-size: 1.05rem; margin-bottom: 24px; max-width: 60ch; }

.callout {
  background: rgba(201, 165, 85, 0.06);
  border: 1px solid rgba(201, 165, 85, 0.28);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 20px 0;
}
.callout .label {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 4px;
}
.callout p { margin: 0; color: var(--ink); font-size: 0.95rem; }

.timeline {
  border-left: 1px solid var(--line);
  padding: 4px 0 4px 18px;
  margin: 24px 0;
}
.timeline .row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.timeline .row:last-child { border-bottom: none; }
.timeline .date {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--accent);
}
.timeline .event { font-weight: 500; }
.timeline .detail { color: var(--ink-dim); font-size: 0.9rem; display: block; margin-top: 2px; }

.section {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.section summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.section summary::-webkit-details-marker { display: none; }
.section summary::after {
  content: "+";
  margin-left: auto;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 1.2rem;
  line-height: 1;
}
.section[open] summary::after { content: "−"; }
.section summary:hover { background: var(--bg-3); }
.section .heading { font-family: var(--serif); font-size: 1.15rem; margin-bottom: 4px; }
.section .skim { color: var(--ink-dim); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.section .detail {
  padding: 4px 22px 20px 22px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.65;
}
.section .detail p { margin: 10px 0; }
.section .detail h4 { margin: 18px 0 8px; font-family: var(--serif); font-size: 1.05rem; color: var(--accent); }
.section .detail ul, .section .detail ol { padding-left: 22px; margin: 10px 0; }
.section .detail li { margin: 4px 0; }
.section .detail code { font-family: var(--mono); font-size: 0.88em; background: var(--bg-3); padding: 1px 5px; border-radius: 3px; }
.section .detail strong { color: var(--accent-warm); font-weight: 600; }

.subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
@media (max-width: 640px) { .subgrid { grid-template-columns: 1fr; } }
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.card h4 {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 8px;
}
.card .item { margin: 8px 0; font-size: 0.92rem; }
.card .item .name { font-weight: 600; color: var(--ink); }
.card .item .role, .card .item .view { color: var(--ink-dim); font-size: 0.88rem; display: block; }

.essay-plan {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 12px 0;
}
.essay-plan .q {
  font-family: var(--serif);
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--ink);
}
.essay-plan .thesis { color: var(--accent-warm); font-size: 0.92rem; margin-bottom: 8px; font-style: italic; }
.essay-plan ul { padding-left: 20px; margin: 4px 0 0; }
.essay-plan li { font-size: 0.92rem; color: var(--ink-dim); margin: 3px 0; }

/* ---------- Era + Timeline strips (quiz context) ---------- */
.context-block {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.context-block > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  padding: 2px 0;
}
.context-block > summary::-webkit-details-marker { display: none; }
.context-block > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s;
}
.context-block[open] > summary::before { content: "▾ "; }
.context-block[open] > summary { margin-bottom: 10px; }
.context-block .label {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  display: block;
  margin: 8px 0 6px;
}
.era-strip {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.era-chip {
  flex: 0 0 auto;
  min-width: 120px;
  max-width: 180px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-dim);
  transition: border-color 0.15s, background 0.15s;
}
.era-chip .range {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  display: block;
}
.era-chip .lbl { color: var(--ink); font-weight: 600; display: block; margin: 2px 0 2px; }
.era-chip .desc { color: var(--ink-faint); font-size: 0.75rem; }
.era-chip.here {
  background: rgba(201, 165, 85, 0.08);
  border-color: var(--accent);
}
.era-chip.here .lbl { color: var(--accent-warm); }

.timeline-strip {
  position: relative;
  padding: 6px 0 6px;
}
.timeline-strip .line {
  position: absolute;
  top: 16px;
  left: 8px;
  right: 8px;
  height: 1px;
  background: var(--line);
}
.timeline-strip .markers {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  position: relative;
}
.timeline-strip .tm {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--ink-faint);
  padding-top: 18px;
  position: relative;
  cursor: default;
}
.timeline-strip .tm::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  background: var(--line-2);
  border-radius: 50%;
}
.timeline-strip .tm .date {
  font-family: var(--mono);
  color: var(--ink-dim);
  font-size: 0.7rem;
  display: block;
}
.timeline-strip .tm .evt {
  color: var(--ink-faint);
  font-size: 0.72rem;
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.timeline-strip .tm.here::before {
  background: var(--accent);
  width: 11px;
  height: 11px;
  top: 11px;
  box-shadow: 0 0 0 3px rgba(201, 165, 85, 0.18);
}
.timeline-strip .tm.here .date { color: var(--accent); }
.timeline-strip .tm.here .evt { color: var(--ink); font-weight: 500; }

/* ---------- Order-type question ---------- */
.order-stage { margin-bottom: 20px; }
.order-instruction {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.order-picks {
  min-height: 52px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  background: var(--bg-3);
}
.order-pick {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.order-pick .n {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
}
.order-pick:hover { border-color: var(--accent); }
.order-empty {
  color: var(--ink-faint);
  font-size: 0.85rem;
  align-self: center;
}
.order-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.order-item {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.12s, background 0.12s;
  flex: 1 1 calc(50% - 8px);
  min-width: 140px;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.order-item:hover:not(:disabled) { border-color: var(--line-2); background: #22252e; }
.order-item:disabled { opacity: 0.3; cursor: not-allowed; }
.order-review {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.order-review .row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  gap: 10px;
  align-items: center;
  font-size: 0.88rem;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
}
.order-review .row.right { border-color: var(--correct); background: rgba(111, 191, 123, 0.06); }
.order-review .row.wrong { border-color: var(--wrong); background: rgba(216, 118, 118, 0.06); }
.order-review .slot { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); }
.order-review .yours { color: var(--ink); }
.order-review .truth { color: var(--accent); font-family: var(--mono); font-size: 0.82rem; }

/* ---------- Technique ---------- */
.technique-body { max-width: 900px; margin: 0 auto; }
.technique-body h2 { margin: 28px 0 10px; }
.technique-body h3 { margin: 20px 0 6px; color: var(--accent-warm); }
.technique-body p { color: var(--ink-dim); }
.technique-body ul { color: var(--ink-dim); padding-left: 22px; }
.technique-body li { margin: 4px 0; }

/* ---------- Footer ---------- */
.footer {
  max-width: var(--maxw);
  margin: 40px auto 24px;
  padding: 0 20px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-align: center;
}

/* ---------- Study mode ---------- */
.study-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 820px) { .study-shell { grid-template-columns: 1fr; } }

.study-nav {
  position: sticky;
  top: 82px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 10px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.study-nav-h {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  padding: 10px 10px 6px;
  margin: 0;
}
.study-nav-list { list-style: none; padding: 0; margin: 0 0 10px; }
.study-nav-a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink-dim);
  text-decoration: none;
  position: relative;
}
.study-nav-a:hover { color: var(--ink); background: var(--bg-3); }
.study-nav-a.active {
  color: var(--accent);
  background: rgba(201, 165, 85, 0.08);
}
.study-nav-a .lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.study-nav-a .ttl { display: block; font-size: 0.88rem; line-height: 1.35; }
.study-nav-a.done .ttl { color: var(--ink); }
.study-nav-a .study-badge {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(111, 191, 123, 0.12);
  border: 1px solid var(--correct);
  color: var(--correct);
}

.study-body { min-width: 0; }

.study-intro { margin-bottom: 28px; }
.study-intro h1 { font-family: var(--serif); font-size: 2rem; margin: 0 0 8px; }
.study-lead { font-size: 1.05rem; color: var(--ink); margin: 0 0 10px; }
.study-help { color: var(--ink-dim); font-size: 0.92rem; margin: 0; }

.study-section { margin: 24px 0; }
.study-section h2 {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 12px;
}
.study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.study-card {
  display: block;
  padding: 16px 18px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.study-card:hover {
  border-color: var(--accent);
  background: var(--bg-3);
  transform: translateY(-1px);
}
.study-card .kicker {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.study-card h3 { font-family: var(--serif); font-size: 1.15rem; margin: 6px 0 6px; }
.study-card p { font-size: 0.9rem; color: var(--ink-dim); margin: 0 0 10px; }
.study-card .card-cta { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); }
.study-card .card-badge {
  font-family: var(--mono);
  font-size: 0.74rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(111, 191, 123, 0.12);
  border: 1px solid var(--correct);
  color: var(--correct);
}
.study-card.done { border-color: rgba(111, 191, 123, 0.4); }

.study-head { margin-bottom: 20px; }
.study-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.study-head h1 { font-family: var(--serif); font-size: 2rem; line-height: 1.15; margin: 6px 0 8px; }
.study-blurb { color: var(--ink-dim); font-size: 1rem; margin: 0 0 12px; }
.study-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.study-meta-item {
  position: relative;
  padding-left: 14px;
}
.study-meta-item::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--accent);
}
.study-meta-item:first-child { padding-left: 0; }
.study-meta-item:first-child::before { content: ""; }

.study-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 32px;
  align-items: start;
}
.study-main { min-width: 0; }
@media (max-width: 960px) {
  .study-layout { grid-template-columns: 1fr; }
  .study-toc { display: none; }
}

.study-toc {
  position: sticky;
  top: 84px;
  font-family: var(--mono);
  font-size: 0.82rem;
  border-left: 1px solid var(--line);
  padding-left: 16px;
}
.study-toc-head {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 10px;
}
.study-toc-list { list-style: none; padding: 0; margin: 0 0 14px; }
.study-toc-list li { margin: 0; }
.study-toc-list a {
  display: block;
  padding: 6px 0;
  color: var(--ink-dim);
  text-decoration: none;
  line-height: 1.35;
  border-left: 2px solid transparent;
  padding-left: 10px;
  margin-left: -12px;
  transition: color 0.12s, border-color 0.12s;
}
.study-toc-list a:hover { color: var(--ink); }
.study-toc-list a.active {
  color: var(--accent);
  border-left-color: var(--accent);
}
.study-toc-jump {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  width: 100%;
}
.study-toc-jump:hover { color: var(--accent-warm); }

.study-qs-gate {
  background: var(--bg-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  text-align: center;
  margin-top: 24px;
}
.study-qs-gate .study-qs-help { margin-top: 12px; }

.study-passage {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  max-width: 72ch;
}
@media (max-width: 640px) {
  .study-passage { padding: 20px 18px; }
}
.study-passage p {
  font-size: 1.02rem;
  line-height: 1.68;
  margin: 0 0 1em;
  color: var(--ink);
}
.study-passage p:last-child { margin-bottom: 0; }
.study-passage strong { color: var(--accent-warm); font-weight: 600; }
.study-passage em { color: var(--ink); font-style: italic; }
.study-passage h2 {
  font-family: var(--serif);
  font-size: 1.45rem;
  margin: 1.6em 0 0.55em;
  padding-top: 0.4em;
  color: var(--ink);
  border-top: 1px solid var(--line);
  scroll-margin-top: 80px;
}
.study-passage h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.study-passage h3 {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 1.2em 0 0.4em;
}
.study-passage ul { margin: 0 0 1em 1.2em; padding: 0; }
.study-passage li { margin: 0.2em 0; line-height: 1.6; }

.study-qs { margin-top: 28px; }
.study-qs h2 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 6px; }
.study-qs-help { color: var(--ink-dim); font-size: 0.92rem; margin: 0 0 16px; }

.study-qlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.study-q {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.study-q-prompt { font-family: var(--serif); font-size: 1.1rem; line-height: 1.4; margin: 0 0 12px; }
.study-q-opts { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.study-q-opt {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: border-color 0.12s, background 0.12s;
}
.study-q-opt:hover:not(.locked) { border-color: var(--line-2); background: var(--bg-2); }
.study-q-opt .key {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-dim);
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 1px 7px;
  border-radius: 4px;
  margin-top: 2px;
  flex-shrink: 0;
}
.study-q-opt.locked { cursor: default; opacity: 0.85; }
.study-q-opt.correct {
  border-color: var(--correct);
  background: rgba(111, 191, 123, 0.08);
  opacity: 1;
}
.study-q-opt.correct .key { color: var(--correct); border-color: var(--correct); }
.study-q-opt.wrong {
  border-color: var(--wrong);
  background: rgba(216, 118, 118, 0.08);
  opacity: 1;
}
.study-q-opt.wrong .key { color: var(--wrong); border-color: var(--wrong); }

.study-q-explain {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.94rem;
  line-height: 1.55;
}
.study-q-explain p { margin: 0 0 8px; }
.study-q-explain p:last-child { margin: 0; }
.study-q-tip { color: var(--ink-dim); font-size: 0.88rem; }
.study-q-ref { color: var(--ink-faint); font-size: 0.86rem; font-style: italic; }

.study-foot { margin-top: 28px; }
.study-summary {
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.study-summary h2 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 6px; color: var(--accent); }
.study-summary p { margin: 0 0 8px; }
.study-followup { color: var(--ink-dim); }
.study-summary-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Scrollbar (webkit) ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-2); }

/* ---------- Quiz tools (settings + focus buttons) ---------- */
.quiz-tools {
  margin-left: 8px;
  display: inline-flex;
  gap: 6px;
}
.tool-btn {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tool-btn:hover { color: var(--ink); border-color: var(--line-2); background: #22252e; }
.tool-btn[aria-pressed="true"],
.tool-btn[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- Settings panel ---------- */
.quiz-settings {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 18px 0;
  animation: settingsIn 0.2s ease-out;
}
@keyframes settingsIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.settings-row { margin-bottom: 12px; }
.settings-row:last-child { margin-bottom: 0; }
.settings-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.settings-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.settings-opts .opt {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.82rem;
  cursor: pointer;
  min-height: 36px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.settings-opts .opt:hover { color: var(--ink); border-color: var(--line-2); }
.settings-opts .opt[aria-pressed="true"] {
  background: var(--accent);
  color: #1a1400;
  border-color: var(--accent);
}
.settings-hint {
  color: var(--ink-faint);
  font-size: 0.78rem;
  margin: 8px 0 0 0;
}
.settings-hint.inline { margin: 0 0 0 8px; display: inline; }
.settings-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  cursor: pointer;
  color: var(--ink-dim);
}
.settings-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.settings-toggle .lbl { color: var(--ink); font-weight: 500; }

.voice-picker {
  margin-top: 8px;
  padding-left: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.voice-picker .settings-label { margin: 0; color: var(--ink-dim); }
.voice-select {
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
  cursor: pointer;
  max-width: 260px;
}
.voice-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Deep-mode passage ---------- */
.q-deep-passage {
  background: var(--bg-3);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 12px 16px;
  margin: 0 0 16px 0;
  color: var(--ink-dim);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  font-style: italic;
}
.q-deep-passage .kicker {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

/* ---------- Focus mode ---------- */
body.focus-mode .topbar,
body.focus-mode .quiz-side,
body.focus-mode .footer {
  display: none !important;
}
body.focus-mode .app { padding-top: 0; }
body.focus-mode .quiz-shell {
  grid-template-columns: 1fr;
  max-width: 780px;
  margin: 0 auto;
}
body.focus-mode .quiz-stage {
  min-height: 100vh;
  min-height: 100dvh;
  border: none;
  border-radius: 0;
  padding: 40px 28px;
  justify-content: flex-start;
}
@media (max-width: 520px) {
  body.focus-mode .quiz-stage { padding: 20px 16px; }
}

/* ---------- Mobile tweaks for tools + settings ---------- */
@media (max-width: 520px) {
  .quiz-tools { margin-left: auto; }
  .quiz-meta { gap: 8px; }
  .tool-btn { width: 38px; height: 38px; }
  .settings-opts .opt { flex: 1 1 auto; min-width: 56px; padding: 10px 12px; min-height: 40px; }
  /* Bigger, more thumb-friendly answer buttons. */
  .q-options { gap: 8px; }
  .q-options li { padding: 14px 14px; font-size: 0.96rem; min-height: 52px; }
  /* Full-width Next button so it's easy to hit one-handed. */
  #qNext { width: 100%; padding: 14px 16px; font-size: 1rem; min-height: 48px; }
  /* Shaky toggle taller for thumbs. */
  .q-shaky-btn { padding: 8px 14px; font-size: 0.82rem; min-height: 36px; }
  /* Mode + topic chips: 44px target. */
  .filter-group .chip { padding: 9px 14px; font-size: 0.86rem; min-height: 40px; }
  .chip-topic { padding: 9px 12px; font-size: 0.84rem; min-height: 38px; }
  /* Picker rows: bigger tap targets for the row toggle and caret. */
  .paper-toggle { padding: 14px 14px; font-size: 0.92rem; min-height: 52px; }
  .paper-expand { min-width: 48px; min-height: 48px; }
  .paper-expand .caret { font-size: 1rem; }
  .missed-pill { padding: 10px 14px; font-size: 0.84rem; min-height: 40px; }
  .side-quick .btn { padding: 13px 16px; font-size: 0.95rem; min-height: 46px; }
  /* Sidebar gets breathing room above the footer. */
  .quiz-side { padding: 16px; margin-top: 16px; }
  /* Respect iPhone home-indicator. */
  .app { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* ---------- Watch mode (#quiz?watch=1 or ultra-narrow) ----------
   Strips the quiz down to prompt + 4 buttons + feedback so it fits
   on ~150–250px wide surfaces (Apple Watch via 3rd-party browser,
   iPhone Slide Over, narrow PWA). Auto-applies to <320px viewports. */
body.watch-mode { font-size: 14px; }
body.watch-mode .topbar,
body.watch-mode .footer,
body.watch-mode .quiz-side,
body.watch-mode .quiz-meta,
body.watch-mode .quiz-tools,
body.watch-mode .quiz-settings,
body.watch-mode .q-footer,
body.watch-mode .q-deep-passage,
body.watch-mode .q-context-wrap,
body.watch-mode .q-confidence,
body.watch-mode .q-tip { display: none !important; }
body.watch-mode .app { padding: 0 !important; }
body.watch-mode .quiz-shell {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
body.watch-mode .quiz-stage {
  background: var(--bg);
  border: none;
  border-radius: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 8px 8px 12px;
  gap: 0;
}
body.watch-mode .q-prompt {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.25;
  font-weight: 600;
  margin: 4px 0 8px;
  letter-spacing: 0;
}
body.watch-mode .q-options { gap: 6px; margin: 0 0 8px; }
body.watch-mode .q-options li {
  padding: 10px 10px;
  font-size: 0.9rem;
  border-radius: 8px;
  min-height: 44px;
  align-items: center;
}
body.watch-mode .q-options .key {
  font-size: 0.7rem;
  padding: 1px 5px;
  margin: 0;
}
body.watch-mode .q-feedback { margin-top: 4px; }
body.watch-mode .q-explain {
  font-size: 0.82rem;
  line-height: 1.4;
  margin-bottom: 8px;
}
body.watch-mode .q-explain strong {
  font-family: var(--sans);
  font-size: 0.9rem;
  margin-bottom: 4px;
}
/* Home hero on watch: no chrome, full viewport, stacked CTAs. */
body.watch-mode .hero {
  min-height: 100svh;
  padding: 8px;
  gap: 14px;
}
body.watch-mode .hero h1 {
  font-size: 1.15rem;
  line-height: 1.1;
  max-width: 16ch;
}
body.watch-mode .hero-cta-row {
  flex-direction: column;
  width: 100%;
  gap: 6px;
}
body.watch-mode .hero-cta-row .btn {
  width: 100%;
  padding: 9px 8px;
  font-size: 0.82rem;
  border-radius: 8px;
}
body.watch-mode #qNext {
  width: 100%;
  padding: 12px;
  font-size: 0.95rem;
  min-height: 44px;
}

@media (max-width: 320px) {
  body:not(.watch-mode) .quiz-meta { font-size: 0.7rem; gap: 6px; }
  body:not(.watch-mode) .q-prompt { font-size: 1.05rem; }
  body:not(.watch-mode) .quiz-stage { padding: 12px; }
}

/* ---------- Essay drill view ---------- */
.essay-body { max-width: 920px; margin: 0 auto; padding: 36px 20px 80px; }
.essay-head { margin-bottom: 32px; }
.essay-headline h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 10px; }
.essay-help { color: var(--ink-dim); font-size: 0.95rem; max-width: 70ch; margin-bottom: 18px; }
.essay-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.essay-paper { margin-bottom: 36px; }
.essay-paper-h {
  font-size: 1.4rem; color: var(--accent);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px; margin-bottom: 18px;
}
.essay-block { margin-bottom: 28px; }
.essay-topic-h {
  font-family: var(--sans); font-weight: 600;
  font-size: 1rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-dim);
  margin-bottom: 12px;
}
.essay-count {
  font-family: var(--mono); font-size: 0.7rem;
  background: var(--bg-3); border: 1px solid var(--line);
  padding: 1px 8px; border-radius: 999px;
  color: var(--ink-faint); margin-left: 6px;
}
.essay-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.essay-item details {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 18px;
  transition: border-color 0.12s ease;
}
.essay-item details[open] { border-color: var(--line-2); }
.essay-item summary {
  cursor: pointer; list-style: none;
  font-size: 1rem; line-height: 1.45;
  padding: 0; margin: 0;
}
.essay-item summary::-webkit-details-marker { display: none; }
.essay-item summary::before {
  content: "▸"; color: var(--accent); margin-right: 8px;
  font-size: 0.85em; display: inline-block;
  transition: transform 0.15s ease;
}
.essay-item details[open] summary::before { transform: rotate(90deg); }
.essay-num { font-family: var(--mono); color: var(--ink-faint); margin-right: 6px; font-size: 0.85em; }
.essay-q { color: var(--ink); }
.essay-plan {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.essay-thesis, .essay-eval { font-size: 0.95rem; line-height: 1.55; color: var(--ink); }
.essay-thesis .lbl, .essay-eval .lbl, .essay-tip .lbl {
  display: inline-block;
  font-family: var(--mono); font-size: 0.7rem;
  color: var(--accent); text-transform: uppercase;
  letter-spacing: 0.08em; margin-right: 8px;
}
.essay-thesis strong, .essay-eval strong, .essay-points strong { color: var(--accent); }
.essay-points { margin: 0; padding-left: 1.5em; display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.essay-points li { line-height: 1.5; font-size: 0.93rem; }
.essay-eval { color: var(--ink-dim); font-style: italic; }

.essay-drill { display: flex; flex-direction: column; gap: 18px; }
.essay-drill-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.essay-tag { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.essay-drill-q { font-family: var(--serif); font-size: clamp(1.5rem, 3.5vw, 2.2rem); line-height: 1.25; }
.essay-timer {
  font-family: var(--mono); font-size: 2.4rem; color: var(--accent);
  text-align: center; padding: 18px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  letter-spacing: 0.06em;
}
.essay-timer.done { color: var(--wrong); }

@media (max-width: 720px) {
  .essay-body { padding: 24px 14px 64px; }
  .essay-item details { padding: 12px 14px; }
}

/* ---------- Confidence (shaky) toggle on quiz answer ---------- */
.q-confidence {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-family: var(--mono); font-size: 0.78rem;
  color: var(--ink-faint);
}
.q-confidence .lbl { text-transform: uppercase; letter-spacing: 0.08em; }
.q-shaky-btn {
  cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 4px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 0.78rem;
  transition: all 0.15s ease;
}
.q-shaky-btn:hover { color: var(--ink); border-color: var(--line-2); }
.q-shaky-btn.on {
  color: #d39a48; border-color: rgba(211, 154, 72, 0.5);
  background: rgba(211, 154, 72, 0.08);
}

/* ---------- Quiz picker (cleaner side-panel layout) ---------- */
.picker-section { margin-bottom: 14px; }
.picker-label {
  display: block;
  font-family: var(--mono); font-size: 0.7rem;
  color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.side-quick {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.side-quick .btn { width: 100%; }
.side-quick .quick-hint {
  font-family: var(--mono); font-size: 0.7rem;
  color: var(--ink-faint);
  margin: 0;
  line-height: 1.4;
}

/* ---------- Paper picker rows (multi-select papers + expandable topics) ---------- */
.paper-rows {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.paper-row {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.paper-head {
  display: flex; align-items: stretch;
}
.paper-toggle {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  background: transparent;
  border: none;
  color: var(--ink-dim);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.86rem;
  transition: color 0.12s, background 0.12s;
}
.paper-toggle:hover { color: var(--ink); background: rgba(255,255,255,0.02); }
.paper-check {
  width: 14px; height: 14px;
  border: 1.5px solid var(--line-2);
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
  transition: all 0.12s;
}
.paper-toggle[aria-pressed="true"] {
  color: var(--ink);
  background: rgba(201, 165, 85, 0.06);
}
.paper-toggle[aria-pressed="true"] .paper-check {
  background: var(--accent);
  border-color: var(--accent);
}
.paper-toggle[aria-pressed="true"] .paper-check::after {
  content: ""; position: absolute;
  left: 3px; top: -1px;
  width: 4px; height: 9px;
  border: solid #1a1400;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.paper-title { flex: 1; line-height: 1.25; }
.paper-count {
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.paper-toggle[aria-pressed="true"] .paper-count { color: var(--ink-dim); }
.paper-expand {
  background: transparent;
  border: none;
  border-left: 1px solid var(--line);
  color: var(--ink-faint);
  padding: 0 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.12s;
}
.paper-expand:hover { color: var(--ink); }
.paper-expand .caret { display: inline-block; transition: transform 0.16s; font-size: 0.85rem; }
.paper-expand[aria-expanded="true"] .caret { transform: rotate(180deg); }
.paper-topics {
  display: flex; flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
}
.paper-topics-empty {
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--ink-faint);
}

/* Missed pill — appears under the picker only when there's something to drill */
.missed-pill {
  margin-top: 10px;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--accent);
  border: 1px dashed rgba(201, 165, 85, 0.45);
  border-radius: 999px;
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.12s;
}
.missed-pill:hover {
  background: rgba(201, 165, 85, 0.08);
  border-color: rgba(201, 165, 85, 0.7);
  color: var(--ink);
}
.missed-pill span { color: var(--ink-dim); font-family: var(--mono); }

/* ---------- Hard isolation: satisfying mode must not leak into normal mode ---------- */
.q-pill-row:empty { display: none; margin: 0; }
body:not(.sat-on) .sprint-launcher,
body:not(.sat-on) .sprint-progress,
body:not(.sat-on) .sprint-complete,
body:not(.sat-on) .q-confidence-pre,
body:not(.sat-on) .q-revenge-banner,
body:not(.sat-on) .q-bonus-banner,
body:not(.sat-on) .q-pill-row,
body:not(.sat-on) .readiness-card,
body:not(.sat-on) .smart-streaks,
body:not(.sat-on) .museum-btn,
body:not(.sat-on) .museum-overlay,
body:not(.sat-on) #satXpWidget,
body:not(.sat-on) .sat-xp-floater,
body:not(.sat-on) .sat-milestone {
  display: none !important;
}

/* ============================================================
   English HL — notes/text/technique/comparative renderer styles
   ============================================================ */

.nav-english { color: var(--ink, #e8e6dc); }

/* Concerns list at top of text page */
.concerns-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1.5rem;
}
.concerns-list li {
  padding: 0.4rem 0.7rem;
  margin: 0.25rem 0;
  border-left: 2px solid var(--accent, #c9a555);
  background: rgba(201, 165, 85, 0.04);
  color: var(--ink, #e8e6dc);
  font-size: 0.95rem;
}

/* Character cards */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.8rem;
  margin: 1rem 0 1.5rem;
}
.char-card {
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 6px;
  padding: 0.8rem;
  background: rgba(255,255,255,0.02);
}
.char-name {
  font-family: var(--serif, "DM Serif Display", serif);
  font-size: 1.1rem;
  color: var(--accent, #c9a555);
  margin-bottom: 0.2rem;
}
.char-role {
  font-size: 0.85rem;
  color: var(--ink-dim, #a8a59a);
  margin-bottom: 0.5rem;
  font-style: italic;
}
.char-values, .char-arc {
  font-size: 0.9rem;
  margin: 0.3rem 0;
}
.char-values .lbl, .char-arc .lbl, .char-quote .lbl, .quote-ctx .lbl, .quote-use .lbl {
  color: var(--accent, #c9a555);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.3rem;
}
.char-quote {
  margin: 0.5rem 0;
  padding: 0.4rem 0.6rem;
  border-left: 2px solid var(--accent, #c9a555);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink, #e8e6dc);
}
.char-note {
  font-size: 0.88rem;
  color: var(--ink-dim, #a8a59a);
  margin-top: 0.4rem;
  line-height: 1.5;
}

/* Technique table */
.tech-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.92rem;
}
.tech-table th {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--accent, #c9a555);
  color: var(--accent, #c9a555);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tech-table td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.05));
  vertical-align: top;
}
.tech-table tbody tr:hover { background: rgba(201, 165, 85, 0.03); }
.tech-table td:first-child { width: 22%; }
.tech-table td:nth-child(2) { width: 33%; color: var(--ink-dim, #a8a59a); }

/* Quote cards (recall list) */
.quote-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.7rem;
  margin: 1rem 0 1.5rem;
}
.quote-card {
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 6px;
  padding: 0.7rem 0.8rem;
  background: rgba(255,255,255,0.02);
}
.quote-meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.78rem;
  align-items: baseline;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
.quote-n {
  font-family: var(--mono, "JetBrains Mono", monospace);
  color: var(--accent, #c9a555);
  font-weight: 600;
}
.quote-speaker {
  color: var(--ink, #e8e6dc);
  font-weight: 600;
}
.quote-where {
  color: var(--ink-faint, #6e6c63);
  font-style: italic;
}
.quote-text {
  font-family: var(--serif, "DM Serif Display", serif);
  font-size: 1rem;
  color: var(--ink, #e8e6dc);
  line-height: 1.4;
  margin: 0.3rem 0 0.5rem;
}
.quote-ctx, .quote-use {
  font-size: 0.85rem;
  margin: 0.2rem 0;
  color: var(--ink-dim, #a8a59a);
}

/* Comparative angles */
.comp-angles {
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0 1.5rem;
}
.comp-angle {
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-left: 3px solid var(--accent, #c9a555);
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  background: rgba(255,255,255,0.02);
}
.comp-with {
  font-size: 0.82rem;
  color: var(--accent, #c9a555);
  margin-bottom: 0.3rem;
  text-transform: capitalize;
}
.comp-with a { color: inherit; text-decoration: none; border-bottom: 1px dotted; }
.comp-text { color: var(--ink, #e8e6dc); font-size: 0.93rem; line-height: 1.5; }

/* Intro formula (technique pages) */
.intro-formula {
  margin: 1rem 0 1.5rem;
  padding-left: 1.5rem;
}
.intro-formula li {
  margin-bottom: 0.7rem;
  line-height: 1.5;
}
.intro-formula .ex {
  margin-top: 0.3rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--line, rgba(255,255,255,0.1));
  color: var(--ink-dim, #a8a59a);
  font-size: 0.9rem;
}

/* Sample question lists */
.sample-q {
  margin: 0.5rem 0 1.2rem;
  padding-left: 1.4rem;
}
.sample-q li {
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Comparative pairings: blockquote inside thesis starters */
.notes-body blockquote {
  margin: 0.5rem 0;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--accent, #c9a555);
  background: rgba(201, 165, 85, 0.04);
  font-style: italic;
  font-size: 0.93rem;
  color: var(--ink, #e8e6dc);
}

/* Mobile: tighter grids */
@media (max-width: 640px) {
  .char-grid { grid-template-columns: 1fr; }
  .quote-list { grid-template-columns: 1fr; }
  .tech-table td:first-child,
  .tech-table td:nth-child(2),
  .tech-table td:nth-child(3) { width: auto; }
  .tech-table { font-size: 0.85rem; }
}

/* ============================================================
   English text-page redesign — tabs, collapsible cards, breathing room
   ============================================================ */

.text-page { max-width: 920px; margin: 0 auto; padding: 0 1rem; }

/* Header */
.text-header {
  padding: 1.5rem 0 1.25rem;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.08));
  margin-bottom: 1rem;
}
.text-kicker {
  color: var(--ink-faint, #6e6c63);
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.text-title {
  font-family: var(--serif, "DM Serif Display", serif);
  font-size: 2rem;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--ink, #e8e6dc);
}
.text-blurb {
  color: var(--ink-dim, #b8b4a8);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 0.85rem;
  max-width: 65ch;
}
.text-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.text-tag {
  background: rgba(201, 165, 85, 0.08);
  color: var(--accent, #c9a555);
  border: 1px solid rgba(201, 165, 85, 0.2);
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  font-size: 0.78rem;
  font-family: var(--mono, "JetBrains Mono", monospace);
}

/* Tabs */
.text-tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.08));
  margin-bottom: 1.5rem;
  padding-bottom: 0.1rem;
}
.text-tabs::-webkit-scrollbar { height: 0; }
.text-tab {
  background: transparent;
  border: none;
  color: var(--ink-dim, #a8a59a);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.7rem 0.9rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.text-tab:hover { color: var(--ink, #e8e6dc); }
.text-tab.active {
  color: var(--ink, #e8e6dc);
  border-bottom-color: var(--accent, #c9a555);
}

/* Panels */
.text-panel {
  animation: panel-fade 0.18s ease;
  padding-bottom: 3rem;
}
@keyframes panel-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.text-panel h2 {
  font-family: var(--serif, "DM Serif Display", serif);
  font-size: 1.35rem;
  font-weight: 400;
  margin: 1.6rem 0 0.7rem;
  color: var(--ink, #e8e6dc);
  letter-spacing: -0.01em;
}
.text-panel h2:first-child { margin-top: 0.4rem; }

.panel-hint {
  color: var(--ink-faint, #6e6c63);
  font-size: 0.85rem;
  margin: 0 0 1rem;
  font-style: italic;
}

/* Five-to-know quote strip on Overview */
.quote-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
.qs-card {
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-left: 3px solid var(--accent, #c9a555);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.015);
}
.qs-card blockquote {
  margin: 0;
  font-family: var(--serif, "DM Serif Display", serif);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink, #e8e6dc);
  border: none;
  padding: 0;
  background: transparent;
}
.qs-card blockquote::before { content: '"'; }
.qs-card blockquote::after  { content: '"'; }
.qs-attr {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--accent, #c9a555);
  font-family: var(--mono, "JetBrains Mono", monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (min-width: 720px) {
  .quote-strip { grid-template-columns: 1fr 1fr; }
}

/* Compact character list on Overview */
.char-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.45rem;
}
.char-list li {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 4px;
  background: rgba(255,255,255,0.015);
  font-size: 0.95rem;
}
.char-list strong { color: var(--ink, #e8e6dc); margin-right: 0.5rem; }
.char-values-inline { color: var(--ink-dim, #a8a59a); font-size: 0.88rem; }

.see-more {
  margin-top: 0.6rem;
  font-size: 0.88rem;
}
.see-more a {
  color: var(--accent, #c9a555);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent, #c9a555);
}
.see-more a:hover { border-bottom-style: solid; }

/* Pairs-with pills on Overview */
.comp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.comp-pill {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line, rgba(255,255,255,0.1));
  color: var(--ink, #e8e6dc);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.comp-pill:hover {
  border-color: var(--accent, #c9a555);
  background: rgba(201, 165, 85, 0.05);
}

/* Collapsible cards (characters, motifs, critics, essays) */
.card-stack {
  display: grid;
  gap: 0.45rem;
}
.card-collapse {
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 4px;
  background: rgba(255,255,255,0.015);
  overflow: hidden;
}
.card-collapse > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0.95rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  user-select: none;
  transition: background 0.15s ease;
}
.card-collapse > summary::-webkit-details-marker { display: none; }
.card-collapse > summary::before {
  content: "▸";
  color: var(--ink-faint, #6e6c63);
  font-size: 0.7rem;
  margin-right: 0.4rem;
  transition: transform 0.18s ease;
  display: inline-block;
}
.card-collapse[open] > summary::before { transform: rotate(90deg); }
.card-collapse > summary:hover { background: rgba(255,255,255,0.02); }
.cc-name {
  color: var(--ink, #e8e6dc);
  font-weight: 600;
  font-size: 0.98rem;
}
.cc-role {
  color: var(--ink-dim, #a8a59a);
  font-size: 0.85rem;
  font-style: italic;
}
.cc-values {
  color: var(--accent, #c9a555);
  font-size: 0.82rem;
  font-family: var(--mono, "JetBrains Mono", monospace);
  margin-left: auto;
}
.cc-body {
  padding: 0 0.95rem 0.85rem;
  border-top: 1px dashed var(--line, rgba(255,255,255,0.08));
  padding-top: 0.7rem;
  display: grid;
  gap: 0.55rem;
}
.cc-row { color: var(--ink-dim, #b8b4a8); font-size: 0.92rem; }
.cc-row .lbl, .cc-note .lbl, .cc-quote .lbl {
  color: var(--accent, #c9a555);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-right: 0.3rem;
}
.cc-quote {
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: rgba(201, 165, 85, 0.04);
  border-left: 2px solid var(--accent, #c9a555);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink, #e8e6dc);
  border-radius: 0 3px 3px 0;
}
.cc-note { color: var(--ink-dim, #b8b4a8); font-size: 0.92rem; line-height: 1.55; }
.cc-examples blockquote {
  margin: 0.35rem 0;
  padding: 0.4rem 0.7rem;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid var(--line, rgba(255,255,255,0.15));
  border-radius: 0 3px 3px 0;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-dim, #b8b4a8);
}
.cc-examples blockquote::before { content: '"'; }
.cc-examples blockquote::after  { content: '"'; }

/* Essay-plan card styling */
.essay-collapse > summary .cc-name {
  font-weight: 500;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.4;
}
.essay-points {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.3rem;
}
.essay-points li { color: var(--ink-dim, #b8b4a8); font-size: 0.9rem; line-height: 1.5; }

/* Quotes panel — compact list */
.quote-list-tight {
  display: grid;
  gap: 0.3rem;
}
.quote-row {
  border: 1px solid var(--line, rgba(255,255,255,0.06));
  border-radius: 3px;
  background: rgba(255,255,255,0.012);
}
.quote-row > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.6rem 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  align-items: baseline;
}
.quote-row > summary::-webkit-details-marker { display: none; }
.qr-text {
  flex: 1 1 60%;
  font-family: var(--serif, "DM Serif Display", serif);
  color: var(--ink, #e8e6dc);
  font-size: 0.96rem;
  line-height: 1.4;
}
.qr-text::before { content: '"'; }
.qr-text::after  { content: '"'; }
.qr-meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.78rem;
  align-items: baseline;
  flex-shrink: 0;
}
.qr-speaker { color: var(--accent, #c9a555); font-weight: 600; font-family: var(--mono, "JetBrains Mono", monospace); }
.qr-where   { color: var(--ink-faint, #6e6c63); font-style: italic; }
.qr-body {
  padding: 0.55rem 0.95rem 0.75rem;
  border-top: 1px dashed var(--line, rgba(255,255,255,0.06));
  display: grid;
  gap: 0.4rem;
}
.qr-ctx, .qr-use { font-size: 0.88rem; color: var(--ink-dim, #b8b4a8); }
.qr-ctx .lbl, .qr-use .lbl {
  color: var(--accent, #c9a555);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  display: inline-block;
  margin-right: 0.3rem;
}

/* Make tech-table responsive */
.tech-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .text-title { font-size: 1.6rem; }
  .text-blurb { font-size: 0.98rem; }
  .text-tab { font-size: 0.86rem; padding: 0.6rem 0.7rem; }
  .qs-card blockquote { font-size: 1rem; }
  .cc-values { margin-left: 0; flex-basis: 100%; }
  .qr-text { flex-basis: 100%; }
  .qr-meta { flex-basis: 100%; }
}

/* ============================================================
   Polish: increase card presence (was too faint), and add
   technique/comparative-specific styles
   ============================================================ */

/* Bump card visibility — readable on dark bg */
.card-collapse {
  background: rgba(255, 255, 255, 0.028);
  border-color: rgba(255, 255, 255, 0.10);
}
.card-collapse:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
.card-collapse[open] {
  border-color: rgba(201, 165, 85, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

/* Tag variants */
.text-tag.tag-strong {
  background: rgba(201, 165, 85, 0.14);
  border-color: rgba(201, 165, 85, 0.35);
  color: var(--ink, #e8e6dc);
  font-weight: 500;
}
.text-tag.tag-faint {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--ink-faint, #6e6c63);
}

/* "Exam at a glance" format strip */
.format-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin: 0.4rem 0 1rem;
}
.format-strip .fact {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line, rgba(255,255,255,0.10));
  border-radius: 5px;
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.format-strip .fact .lbl {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint, #6e6c63);
}
.format-strip .fact .val {
  color: var(--ink, #e8e6dc);
  font-size: 1.05rem;
  font-weight: 600;
}
.format-structure {
  color: var(--ink-dim, #b8b4a8);
  font-size: 0.93rem;
  line-height: 1.55;
  margin: 0.3rem 0 0;
}

/* Past frequency blocks */
.freq-block { margin: 0.85rem 0; }
.freq-block h3 {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint, #6e6c63);
  margin: 0 0 0.4rem;
  font-weight: 500;
}

/* Timing list (paper 1 + paper 2) */
.timing-list {
  display: grid;
  gap: 0.4rem;
  margin: 0.5rem 0;
}
.timing-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0.85rem;
  align-items: baseline;
  padding: 0.6rem 0.85rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 4px;
}
.timing-row .t-mins {
  font-family: var(--mono, "JetBrains Mono", monospace);
  color: var(--accent, #c9a555);
  font-weight: 600;
  font-size: 0.9rem;
}
.timing-row .t-phase {
  color: var(--ink, #e8e6dc);
  font-size: 0.95rem;
}

/* Comparative blocks inside collapsed pairing card */
.comp-block { margin: 0.7rem 0; }
.comp-block h4 {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent, #c9a555);
  margin: 0 0 0.4rem;
  font-weight: 600;
}
.comp-block ul {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.25rem;
}
.comp-block li {
  color: var(--ink-dim, #b8b4a8);
  font-size: 0.9rem;
  line-height: 1.5;
}
.comp-block blockquote {
  margin: 0.4rem 0;
  padding: 0.55rem 0.8rem;
  background: rgba(201, 165, 85, 0.05);
  border-left: 2px solid var(--accent, #c9a555);
  font-style: italic;
  color: var(--ink, #e8e6dc);
  font-size: 0.92rem;
  line-height: 1.5;
  border-radius: 0 3px 3px 0;
}

/* Comparative rapid-lookup list */
.lookup-list {
  display: grid;
  gap: 0.3rem;
  margin: 0.4rem 0;
}
.lookup-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 4px;
  align-items: baseline;
}
.lookup-row:hover { background: rgba(255, 255, 255, 0.04); }
.lk-theme { color: var(--ink, #e8e6dc); font-size: 0.95rem; }
.lk-texts {
  color: var(--accent, #c9a555);
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.82rem;
}

/* Opening moves list */
.opening-moves {
  margin: 0.5rem 0 1rem;
  padding-left: 1.4rem;
  display: grid;
  gap: 0.45rem;
}
.opening-moves li {
  color: var(--ink-dim, #b8b4a8);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Strength list (model response) */
.strength-list {
  margin: 0.5rem 0;
  padding-left: 1.4rem;
  display: grid;
  gap: 0.4rem;
}
.strength-list li {
  color: var(--ink-dim, #b8b4a8);
  font-size: 0.94rem;
  line-height: 1.5;
}

/* Error name styling */
.err-name { color: var(--ink, #e8e6dc); }
.card-collapse .err-name::before { content: ""; }

/* Tighter notes-shell so content has more breathing room */
.notes-shell {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  padding: 1rem 1.5rem;
}
.notes-nav {
  position: sticky;
  top: 1rem;
  align-self: start;
  font-size: 0.92rem;
}
.notes-body { min-width: 0; }

@media (max-width: 860px) {
  .notes-shell {
    grid-template-columns: 1fr;
    padding: 0.75rem 1rem;
  }
  .notes-nav {
    position: static;
    margin-bottom: 1rem;
  }
}

/* ============================================================
   English landing — proper hub design
   ============================================================ */

.english-home { padding-bottom: 4rem; }

/* Primary CTA: "Start the quiz" */
.english-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(201,165,85,0.16), rgba(201,165,85,0.04));
  border: 1px solid rgba(201, 165, 85, 0.3);
  border-radius: 8px;
  padding: 1.1rem 1.4rem;
  margin: 1.2rem 0 2rem;
  text-decoration: none;
  color: var(--ink, #e8e6dc);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.english-cta:hover {
  border-color: var(--accent, #c9a555);
  background: linear-gradient(135deg, rgba(201,165,85,0.22), rgba(201,165,85,0.06));
  transform: translateY(-1px);
}
.cta-title {
  font-family: var(--serif, "DM Serif Display", serif);
  font-size: 1.35rem;
  margin-bottom: 0.2rem;
}
.cta-sub {
  color: var(--ink-dim, #b8b4a8);
  font-size: 0.9rem;
}
.cta-arrow {
  font-size: 1.6rem;
  color: var(--accent, #c9a555);
  font-weight: 300;
  flex-shrink: 0;
}

/* Set-text cards */
.text-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.8rem;
  margin: 0.5rem 0 2rem;
}
.text-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.text-card:hover {
  border-color: rgba(201, 165, 85, 0.4);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}
.text-card .tc-meta {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint, #6e6c63);
}
.text-card .tc-title {
  font-family: var(--serif, "DM Serif Display", serif);
  font-size: 1.3rem;
  color: var(--ink, #e8e6dc);
  line-height: 1.2;
}
.text-card .tc-blurb {
  color: var(--ink-dim, #b8b4a8);
  font-size: 0.9rem;
  line-height: 1.5;
  flex: 1;
}
.text-card .tc-arrow {
  margin-top: 0.4rem;
  color: var(--accent, #c9a555);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Method cards (comparative + paper 1 + paper 2) */
.method-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.7rem;
  margin: 0.5rem 0 2rem;
}
.method-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.method-card:hover {
  border-color: rgba(201, 165, 85, 0.3);
  background: rgba(255, 255, 255, 0.035);
}
.method-card .mc-tag {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent, #c9a555);
}
.method-card .mc-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink, #e8e6dc);
}
.method-card .mc-blurb {
  font-size: 0.85rem;
  color: var(--ink-dim, #b8b4a8);
  line-height: 1.5;
}

/* Bank strip at bottom of English landing */
.bank-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 1rem;
}
.bank-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
}
.bank-chip .bc-name { color: var(--ink, #e8e6dc); }
.bank-chip .bc-count {
  color: var(--accent, #c9a555);
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.78rem;
  font-weight: 600;
}

/* ============================================================
   Home page — subjects section
   ============================================================ */

.subjects {
  margin: 3rem 0 2.5rem;
}
.subjects-head {
  margin-bottom: 1.4rem;
}
.subjects-eyebrow {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint, #6e6c63);
  display: block;
  margin-bottom: 0.4rem;
}
.subjects-head h2 {
  font-family: var(--serif, "DM Serif Display", serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--ink, #e8e6dc);
  margin: 0;
  letter-spacing: -0.01em;
}

.subjects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
}

.subject-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  text-decoration: none;
  color: var(--ink, #e8e6dc);
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
  position: relative;
}
.subject-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.subject-card:hover {
  border-color: rgba(201, 165, 85, 0.4);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}
.subject-card:hover::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(201, 165, 85, 0.04), transparent 60%);
}

.sc-tag {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint, #6e6c63);
}
.sc-title {
  font-family: var(--serif, "DM Serif Display", serif);
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--ink, #e8e6dc);
}
.sc-meta {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.78rem;
  color: var(--accent, #c9a555);
  letter-spacing: 0.04em;
}
.sc-blurb {
  font-size: 0.93rem;
  color: var(--ink-dim, #b8b4a8);
  line-height: 1.5;
  flex: 1;
}
.sc-cta {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--accent, #c9a555);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Subject-specific accent bars (subtle) */
.subject-history { border-left: 3px solid rgba(201, 165, 85, 0.4); }
.subject-english { border-left: 3px solid rgba(150, 200, 255, 0.35); }
.subject-psych   { border-left: 3px solid rgba(200, 150, 220, 0.3); }

/* Soften sheets section heading on home (to balance with subjects) */
.sheets-eyebrow {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint, #6e6c63);
}

/* ============================================================
   Clean home — gayib wordmark + cycling quotes + subjects
   ============================================================ */

/* Hide topbar/footer on the clean home so the page reads minimal. */
body.is-home .topbar,
body.is-home .footer { display: none; }
body.is-home .app { padding: 0; max-width: none; }

.view-home-clean {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.home-stage {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 56px;
}

.home-mark {
  font-family: var(--serif);
  font-size: clamp(5.5rem, 18vw, 10rem);
  line-height: 0.85;
  letter-spacing: -0.055em;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
  text-rendering: geometricPrecision;
}

.home-quote {
  min-height: 4.4em;
  max-width: 54ch;
  opacity: 0;
  transition: opacity 0.55s ease;
  margin-top: -16px;
}
.home-quote.show { opacity: 1; }
.home-quote .quote-text {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0 0 0.55rem;
  font-style: italic;
}
.home-quote .quote-attr {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

.home-subjects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  max-width: 480px;
}
.home-subject {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  column-gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  text-decoration: none;
  color: var(--ink);
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.home-subject:hover {
  border-color: var(--accent);
  background: rgba(201, 165, 85, 0.04);
  color: var(--ink);
}
.home-subject:hover .hs-arrow { transform: translateX(4px); }
.home-subject .hs-title {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.home-subject .hs-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.home-subject .hs-arrow {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 1.05rem;
  transition: transform 0.18s ease;
  align-self: center;
}

/* English is the headline subject — give it visual weight */
.home-subject.is-primary {
  border-color: var(--accent);
  background: rgba(201, 165, 85, 0.06);
  padding: 26px 22px;
}
.home-subject.is-primary .hs-title { font-size: 1.95rem; }
.home-subject.is-primary .hs-meta { color: var(--accent); }
.home-subject.is-primary:hover {
  background: rgba(201, 165, 85, 0.1);
}

/* "Other subjects" disclosure under the primary tile.
   Small, dim, low-friction toggle; expands a stack of secondary tiles. */
.home-subjects-toggle {
  margin-top: 4px;
  align-self: center;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.18s ease;
}
.home-subjects-toggle:hover { color: var(--ink-dim); }
.home-subjects-toggle .hst-chev {
  display: inline-block;
  transform: rotate(90deg);
  transition: transform 0.22s ease;
  font-size: 0.85rem;
  line-height: 1;
}
.home-subjects-toggle[aria-expanded="true"] .hst-chev {
  transform: rotate(-90deg);
}
.home-subjects-other {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
  animation: hsOtherFadeIn 0.22s ease;
}
.home-subjects-other[hidden] { display: none; }

/* In-progress subjects — dimmer card + small label chip in place of the arrow */
.home-subject.is-wip {
  opacity: 0.62;
  cursor: default;
}
.home-subject.is-wip:hover {
  border-color: var(--line);
  background: transparent;
  opacity: 0.78;
}
.home-subject.is-wip .hs-wip {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 999px;
  align-self: center;
  white-space: nowrap;
}
@keyframes hsOtherFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .home-stage { gap: 40px; }
  .home-subject { padding: 16px 18px; }
  .home-subject.is-primary { padding: 20px 18px; }
  .home-subject .hs-title { font-size: 1.35rem; }
  .home-subject.is-primary .hs-title { font-size: 1.65rem; }
  .home-quote { min-height: 6em; }
}
@media (max-width: 420px) {
  .home-mark { font-size: clamp(4rem, 22vw, 6rem); letter-spacing: -0.045em; }
  .home-stage { gap: 32px; }
}

/* ============================================================
   Subject landing (Psychology) — clean intro card
   ============================================================ */

.subject-landing {
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 24px 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-height: calc(100svh - 220px);
  justify-content: center;
}
.subject-landing .sl-back {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-decoration: none;
}
.subject-landing .sl-back:hover { color: var(--ink-dim); }
.subject-landing .sl-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.subject-landing .sl-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
.subject-landing .sl-blurb {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 52ch;
  margin: 0;
}
.subject-landing .sl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.subject-landing .sl-section {
  width: 100%;
  margin-top: 28px;
}
.subject-landing .sl-section-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.subject-landing .sl-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.subject-landing .sl-tile {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.subject-landing .sl-tile:hover {
  border-color: var(--accent);
  background: rgba(201, 165, 85, 0.05);
  transform: translateY(-2px);
}
.subject-landing .sl-tile .slt-meta {
  grid-row: 1;
  grid-column: 1;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.subject-landing .sl-tile .slt-arrow {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--mono);
  color: var(--accent);
  transition: transform 0.18s ease;
}
.subject-landing .sl-tile:hover .slt-arrow { transform: translateX(3px); }
.subject-landing .sl-tile .slt-title {
  grid-row: 2;
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 4px;
}

/* English landing — hide sidebar, expand body to full width */
#view-english.english-landing-mode .notes-shell {
  display: block;
}
#view-english.english-landing-mode .notes-nav {
  display: none;
}
#view-english.english-landing-mode .notes-body {
  max-width: none;
  padding: 0;
  border: none;
  background: transparent;
}

/* ============================================================
   English landing — minimal tile menu
   ============================================================ */
.eh { max-width: 560px; margin: 0 auto; padding: 32px 20px 80px; }
.eh-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.eh-back {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-decoration: none;
  align-self: flex-start;
}
.eh-back:hover { color: var(--ink-dim); }
.eh-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: -0.025em;
  margin: 0;
  font-weight: 400;
  color: var(--ink);
}
.eh-tiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eh-tile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.eh-tile:hover {
  border-color: var(--ink-dim);
  background: rgba(255,255,255,0.015);
  color: var(--ink);
}
.eh-tile.is-primary {
  border-color: var(--accent);
}
.eh-tile.is-primary .ehn { color: var(--accent); }
.eh-tile.is-primary:hover { background: rgba(201,165,85,0.04); }
.eh-tile-sm { padding: 16px 22px; }
.ehn {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--ink);
}
.eh-tile-sm .ehn { font-size: 1.1rem; }
.ehm {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.eh-section { margin-top: 32px; }
.eh-section-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

/* English landing — cheat sheet section uses the History .sheets / .doc styling
   already defined above, but with a 1-column grid since there's only Paper 1. */
.eh-sheets { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; }
.eh-sheets .sheets-head { text-align: center; margin-bottom: 24px; }
.eh-sheets .sheets-eyebrow { color: var(--accent); }
.eh-sheets .sheets-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.3vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 6px 0 0;
  color: var(--ink);
}
.eh-sheets .sheets-grid-1 {
  grid-template-columns: 1fr;
  max-width: 320px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .eh-sheets .sheets-grid-1 { max-width: 100%; }
}
.eh-sheets .eh-sheets-grid {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1100px;
  margin: 0 auto;
  gap: 28px;
}
@media (max-width: 1000px) {
  .eh-sheets .eh-sheets-grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; gap: 36px; }
}
@media (max-width: 540px) {
  .eh-sheets .eh-sheets-grid { grid-template-columns: 1fr; max-width: 320px; gap: 40px; }
}

/* ============================================================
   (legacy) English landing v2 — flagship subject layout
   ============================================================ */

.english-landing-v2 {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 8px 80px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.english-landing-v2 a { color: inherit; }

/* Hero */
.elv-hero { display: flex; flex-direction: column; gap: 14px; padding: 48px 0 8px; }
.elv-back {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  align-self: flex-start;
  transition: color 0.15s ease;
}
.elv-back::before { content: "← "; }
.elv-back:hover { color: var(--accent); }
.elv-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 18px;
}
.elv-title {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 9vw, 5.6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}
.elv-title-mark { color: var(--accent); }
.elv-tagline {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 56ch;
  margin: 6px 0 0;
}

/* Big primary quiz CTA */
.elv-quiz-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, rgba(201,165,85,0.18), rgba(201,165,85,0.04));
  border: 1px solid rgba(201,165,85,0.35);
  border-radius: 8px;
  padding: 26px 28px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.elv-quiz-cta:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(201,165,85,0.26), rgba(201,165,85,0.08));
  transform: translateY(-2px);
  color: var(--ink);
}
.elv-quiz-cta .ecq-body { display: flex; flex-direction: column; gap: 4px; }
.elv-quiz-cta .ecq-eyebrow {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.elv-quiz-cta .ecq-title {
  font-family: var(--serif);
  font-size: 1.65rem;
  line-height: 1.05;
  color: var(--ink);
  margin-top: 2px;
}
.elv-quiz-cta .ecq-sub {
  font-size: 0.92rem;
  color: var(--ink-dim);
  margin-top: 4px;
}
.elv-quiz-cta .ecq-arrow {
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--accent);
  line-height: 1;
  transition: transform 0.18s ease;
}
.elv-quiz-cta:hover .ecq-arrow { transform: translateX(6px); }

/* Section heading */
.elv-section { display: flex; flex-direction: column; gap: 14px; }
.elv-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.elv-section-label {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.elv-section-hint {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* Set-text cards */
.elv-text-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.elv-text-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,0.015);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.elv-text-card:hover {
  border-color: var(--accent);
  background: rgba(201,165,85,0.05);
  transform: translateY(-2px);
  color: var(--ink);
}
.elv-text-card .etc-meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.elv-text-card .etc-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--ink);
}
.elv-text-card .etc-blurb {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-dim);
  flex: 1;
}
.elv-text-card .etc-arrow {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* Method cards */
.elv-method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.elv-method-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,0.012);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.elv-method-card:hover {
  border-color: var(--accent);
  background: rgba(201,165,85,0.04);
  color: var(--ink);
}
.elv-method-card .emc-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.elv-method-card .emc-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--ink);
}
.elv-method-card .emc-blurb {
  font-size: 0.85rem;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* Bank chips */
.elv-bank-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.elv-bank {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
}
.elv-bank .eb-name {
  font-size: 0.85rem;
  color: var(--ink);
}
.elv-bank .eb-count {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}

/* Two-column CTA row (Learn + Quiz) */
.elv-cta-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.elv-cta-row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) {
  .elv-cta-row-3 { grid-template-columns: 1fr; }
}
.elv-cta-devices {
  background: rgba(150,200,255,0.05);
  border-color: rgba(150,200,255,0.3);
}
.elv-cta-devices:hover {
  border-color: rgba(150,200,255,0.6);
  background: rgba(150,200,255,0.08);
}
.elv-cta-devices .ecq-eyebrow,
.elv-cta-devices .ecq-arrow { color: #9bc8ff; }
.elv-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 26px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.elv-cta:hover { transform: translateY(-2px); color: var(--ink); }
.elv-cta .ecq-body { display: flex; flex-direction: column; gap: 4px; }
.elv-cta .ecq-eyebrow {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.elv-cta .ecq-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.05;
  margin-top: 2px;
}
.elv-cta .ecq-sub {
  font-size: 0.88rem;
  color: var(--ink-dim);
  margin-top: 4px;
}
.elv-cta .ecq-arrow {
  font-family: var(--serif);
  font-size: 2.2rem;
  line-height: 1;
  transition: transform 0.18s ease;
}
.elv-cta:hover .ecq-arrow { transform: translateX(6px); }

.elv-cta-learn {
  background: linear-gradient(135deg, rgba(201,165,85,0.22), rgba(201,165,85,0.06));
  border-color: rgba(201,165,85,0.45);
}
.elv-cta-learn:hover { border-color: var(--accent); background: linear-gradient(135deg, rgba(201,165,85,0.3), rgba(201,165,85,0.1)); }
.elv-cta-learn .ecq-eyebrow,
.elv-cta-learn .ecq-arrow { color: var(--accent); }

.elv-cta-quiz {
  background: rgba(255,255,255,0.02);
}
.elv-cta-quiz:hover { border-color: var(--accent); background: rgba(201,165,85,0.04); }
.elv-cta-quiz .ecq-eyebrow,
.elv-cta-quiz .ecq-arrow { color: var(--accent); }

@media (max-width: 720px) {
  .english-landing-v2 { padding: 16px 4px 60px; gap: 28px; }
  .elv-hero { padding: 24px 0 4px; }
  .elv-cta-row { grid-template-columns: 1fr; }
  .elv-cta { padding: 20px 22px; }
  .elv-cta .ecq-title { font-size: 1.3rem; }
  .elv-text-grid { grid-template-columns: 1fr; }
  .elv-method-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Learn — curriculum index + lesson player
   ============================================================ */

#view-english-learn { padding-top: 0; }
.learn-index, .learn-lesson {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 8px 80px;
}

.learn-back {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}
.learn-back::before { content: "← "; }
.learn-back:hover { color: var(--accent); }

/* Curriculum index */
.learn-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px 0 8px;
}
.learn-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 12px;
}
.learn-title {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.learn-tagline {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink-dim);
  max-width: 60ch;
  margin: 4px 0 0;
}

.learn-track {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lt-head {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 24px;
  align-items: end;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.lt-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.lt-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lt-blurb {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 8px 0 0;
  max-width: 56ch;
}
.lt-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.lt-pct {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--accent);
  line-height: 1;
}
.lt-pct-bar {
  width: 180px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.lt-pct-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}
.lt-pct-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.lt-modules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lt-modules .lm a {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,0.012);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.lt-modules .lm a:hover {
  border-color: var(--accent);
  background: rgba(201,165,85,0.04);
  transform: translateX(2px);
  color: var(--ink);
}
.lt-modules .lm-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  width: 1.6em;
}
.lt-modules .lm-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
}
.lt-modules .lm-status {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lt-modules .lm.mastered .lm-status { color: var(--correct); }
.lt-modules .lm.in-progress .lm-status { color: var(--accent); }
.lt-modules .lm.review-due .lm-status { color: var(--accent-warm); font-weight: 600; }
.lt-modules .lm.review-due a {
  border-left: 3px solid var(--accent-warm);
  background: rgba(230, 192, 110, 0.06);
}

/* ============================================================
   Cram path — headline cards on curriculum index
   ============================================================ */
.cram-path { margin-top: 36px; }
.cp-head { margin-bottom: 16px; }
.cp-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}
.cp-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--ink);
}
.cp-blurb {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0;
  max-width: 64ch;
}
.cp-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.cp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(201,165,85,0.10), rgba(201,165,85,0.03));
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s ease, background 0.18s ease;
}
.cp-card:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(201,165,85,0.16), rgba(201,165,85,0.06));
  color: var(--ink);
}
.cp-card.cp-mastered { border-color: var(--correct); background: linear-gradient(135deg, rgba(111,191,123,0.10), rgba(111,191,123,0.03)); }
.cp-card-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.cp-card-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cp-card-blurb {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 4px 0 0;
  flex: 1;
}
.cp-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.cp-card-status {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.cp-card-arrow {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 500;
}
@media (max-width: 720px) {
  .cp-cards { grid-template-columns: 1fr; }
  .cp-card { padding: 18px 20px; }
}

/* Spaced-review banner at the top of the curriculum index */
.review-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px solid rgba(230, 192, 110, 0.4);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(230, 192, 110, 0.12), rgba(230, 192, 110, 0.04));
}
.review-banner .rb-body { display: flex; flex-direction: column; gap: 4px; }
.review-banner .rb-eyebrow {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm);
}
.review-banner .rb-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.review-banner .rb-sub {
  font-size: 0.92rem;
  color: var(--ink-dim);
  line-height: 1.5;
  max-width: 56ch;
}
@media (max-width: 720px) {
  .review-banner { grid-template-columns: 1fr; padding: 16px 18px; }
}
.lt-modules .lm-arrow {
  font-family: var(--mono);
  color: var(--accent);
  transition: transform 0.15s ease;
}
.lt-modules .lm a:hover .lm-arrow { transform: translateX(3px); }
.lt-modules .lm.mastered a {
  border-left: 3px solid var(--correct);
}
.lt-modules .lm.in-progress a {
  border-left: 3px solid var(--accent);
}
.lt-modules .lm-divider {
  list-style: none;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 14px 0 6px;
  border-top: 1px dashed var(--line);
  margin-top: 8px;
}
.lt-modules .lm-divider:first-child { border-top: none; padding-top: 0; }

@media (max-width: 720px) {
  .lt-head { grid-template-columns: 1fr; gap: 12px; }
  .lt-progress { align-items: flex-start; }
  .lt-pct-bar { width: 100%; max-width: 280px; }
  .lt-modules .lm a { grid-template-columns: auto 1fr auto; }
  .lt-modules .lm-status { display: none; }
}

/* ----- Lesson player ----- */
.lesson-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px 0 16px;
  border-bottom: 1px solid var(--line);
}
.lesson-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 16px;
}
.lesson-kicker .lk-track { color: var(--accent); }
.lesson-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.lesson-subtitle {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 60ch;
  margin: 0;
  font-style: italic;
}

.lesson-blocks {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px 0;
}

.block-read p,
.block-read ul {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 14px;
}
.block-read p:last-child,
.block-read ul:last-child { margin-bottom: 0; }
.block-read strong { color: var(--ink); font-weight: 600; }
.block-read em { color: var(--accent-warm); font-style: italic; }
.block-read blockquote {
  margin: 14px 0;
  padding: 12px 18px;
  border-left: 3px solid var(--accent);
  background: rgba(201,165,85,0.04);
  font-style: italic;
  color: var(--ink-dim);
  font-size: 0.98rem;
}
.block-read .block-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.block-read code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 1px 6px;
  background: var(--bg-3);
  border-radius: 3px;
}

.block-concept {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: rgba(201,165,85,0.03);
  padding: 16px 20px;
}
.block-concept .bc-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.block-concept .bc-expand {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 4px 0 12px;
}
.block-concept .bc-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.block-concept .bc-lbl {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 4px;
}
.block-concept .bc-val { color: var(--ink-dim); }
.block-concept .bc-val em { color: var(--accent-warm); }
.block-concept .bc-val strong { color: var(--ink); }
.block-concept .bc-val p { margin: 0; }

.block-character {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: rgba(255,255,255,0.015);
  padding: 18px 22px;
}
.block-character .ch-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin-bottom: 12px; }
.block-character .ch-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.block-character .ch-role {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.block-character .ch-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.block-character .ch-lbl {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 4px;
}
.block-character .ch-val { color: var(--ink-dim); }
.block-character .ch-val strong { color: var(--ink); }
.block-character .ch-val em { color: var(--accent-warm); }
.block-character .ch-val p { margin: 0; }
.block-character .ch-quote {
  margin: 14px 0 8px;
  padding: 12px 18px;
  border-left: 3px solid var(--accent);
  background: rgba(201,165,85,0.06);
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.45;
}

.block-check {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,0.012);
  padding: 18px 22px;
}
.block-check .ck-prompt {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 14px;
}
.block-check .ck-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(201,165,85,0.1);
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 10px;
  vertical-align: middle;
}
.block-check .ck-options {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.block-check .ck-options li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,0.012);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.block-check .ck-options li:hover {
  border-color: var(--accent);
  background: rgba(201,165,85,0.04);
}
.block-check .ck-options li .key {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  width: 1.4em;
}
.block-check .ck-options li .text {
  color: var(--ink);
  line-height: 1.5;
}
.block-check .ck-options li.disabled { cursor: default; }
.block-check .ck-options li.disabled:hover { border-color: var(--line); background: rgba(255,255,255,0.012); }
.block-check .ck-options li.correct {
  border-color: var(--correct);
  background: rgba(111,191,123,0.1);
}
.block-check .ck-options li.wrong {
  border-color: var(--wrong);
  background: rgba(216,118,118,0.08);
}
.block-check .ck-feedback {
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-dim);
}
.block-check .ck-feedback.correct {
  background: rgba(111,191,123,0.08);
  border-left: 3px solid var(--correct);
}
.block-check .ck-feedback.wrong {
  background: rgba(216,118,118,0.08);
  border-left: 3px solid var(--wrong);
}
.block-check .ck-feedback p { margin: 0; }
.block-check .ck-feedback strong { color: var(--ink); }
.block-check .ck-feedback em { color: var(--accent-warm); }
.block-check .ck-prior {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* Quote block (top-quotes lessons) */
.block-quote {
  border-left: 3px solid var(--accent);
  padding: 14px 18px 14px 20px;
  background: rgba(201,165,85,0.04);
  border-radius: 0 6px 6px 0;
}
.block-quote .bq-text {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--ink);
}
.block-quote .bq-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.block-quote .bq-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.92rem;
  line-height: 1.55;
}
.block-quote .bq-lbl {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.block-quote .bq-val { color: var(--ink-dim); }
.block-quote .bq-val em { color: var(--accent-warm); }
.block-quote .bq-val strong { color: var(--ink); }
.block-quote .bq-val p { margin: 0; }

/* Think-about-it block (end-of-lesson generative prompts) */
.block-think {
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 6px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.012);
}
.block-think .bt-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 12px;
}
.block-think .bt-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(201,165,85,0.1);
  padding: 3px 10px;
  border-radius: 999px;
}
.block-think .bt-hint {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-faint);
}
.block-think .bt-list {
  list-style-position: outside;
  padding-left: 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.block-think .bt-list li {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  padding-left: 6px;
}
.block-think .bt-list li::marker {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.85em;
}
.block-think .bt-list strong { color: var(--ink); font-weight: 600; }
.block-think .bt-list em { color: var(--accent-warm); }

/* Lesson footer */
.lesson-foot {
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lesson-progress { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lesson-progress .lp-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lesson-progress .lp-count {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--ink);
}
.lesson-progress .lp-bar {
  flex: 1;
  min-width: 180px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.lesson-progress .lp-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}
.lesson-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lesson-prev {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.lesson-prev:hover { color: var(--accent); }

@media (max-width: 720px) {
  .lesson-head { padding: 18px 0 12px; }
  .lesson-blocks { padding: 22px 0; gap: 22px; }
  .block-concept .bc-row,
  .block-character .ch-row { grid-template-columns: 1fr; gap: 4px; }
  .block-concept .bc-lbl,
  .block-character .ch-lbl { padding-top: 0; }
}

/* ============================================================
   Cram lesson player — stage-gated, anti-skip
   ============================================================ */

.cram-lesson {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 8px 80px;
}
.cram-head { padding: 28px 0 12px; display: flex; flex-direction: column; gap: 8px; }
.cram-kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 12px;
}
.cram-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.cram-subtitle {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 4px 0 0;
  max-width: 64ch;
  font-style: italic;
}

/* Stage strip — top progress + dots */
.cram-stage-strip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 28px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.012);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(6px);
}
.css-progress { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.css-count {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.css-done {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--correct);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.css-bar {
  flex: 1;
  min-width: 200px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.css-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}
.css-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.css-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.css-dot:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.css-dot.done { border-color: var(--correct); color: var(--correct); background: rgba(111,191,123,0.08); }
.css-dot.current { border-color: var(--accent); color: var(--accent); background: rgba(201,165,85,0.1); font-weight: 700; }
.css-dot:disabled { opacity: 0.4; cursor: not-allowed; }

/* Stage card — main content for current stage */
.stage-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.012);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.stage-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.stage-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.stage-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--ink);
  flex: 1;
}
.stage-time {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}
.stage-objective {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-dim);
  font-size: 1rem;
  line-height: 1.6;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: rgba(201,165,85,0.04);
  border-radius: 0 6px 6px 0;
}
.stage-objective p { margin: 0; }

/* Gates — each is a numbered, locked-or-open section */
.gate {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.008);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gate.locked { opacity: 0.5; pointer-events: none; }
.gate.locked .gate-tag::after {
  content: " · LOCKED";
  color: var(--ink-faint);
}
.gate.open {
  border-left: 3px solid var(--correct);
  background: rgba(111,191,123,0.04);
}
.gate.seen {
  border-left: 3px solid var(--correct);
}
.gate-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.gate.open .gate-tag { color: var(--correct); }
.gate-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-faint);
  margin: 0;
  line-height: 1.5;
}
.gate-prompt {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink);
}
.gate-prompt p { margin: 0 0 8px; }
.gate-prompt p:last-child { margin: 0; }
.gate-prompt strong { font-weight: 600; }
.gate-prompt em { color: var(--accent-warm); font-style: italic; }
.gate-locked-msg {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* Read body — the prose content */
.gate-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}
.gate-body p { margin: 0 0 12px; }
.gate-body p:last-child { margin: 0; }
.gate-body strong { color: var(--ink); font-weight: 600; }
.gate-body em { color: var(--accent-warm); font-style: italic; }
.gate-body ul {
  margin: 0 0 12px;
  padding-left: 22px;
}
.gate-body li { margin-bottom: 6px; line-height: 1.6; }
.gate-body code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 3px;
}
.gate-body blockquote {
  margin: 12px 0;
  padding: 12px 18px;
  border-left: 3px solid var(--accent);
  background: rgba(201,165,85,0.04);
  font-style: italic;
  color: var(--ink-dim);
}

/* Options (used by preQ and recall) */
.gate-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gate-options li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,0.012);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gate-options li:hover:not(.disabled) {
  border-color: var(--accent);
  background: rgba(201,165,85,0.04);
}
.gate-options li .key {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  width: 1.4em;
}
.gate-options li .text {
  color: var(--ink);
  line-height: 1.5;
}
.gate-options li.disabled { cursor: default; }
.gate-options li.correct {
  border-color: var(--correct);
  background: rgba(111,191,123,0.1);
}
.gate-options li.wrong {
  border-color: var(--wrong);
  background: rgba(216,118,118,0.08);
}

.gate-feedback {
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  background: rgba(201,165,85,0.06);
  border-left: 3px solid var(--accent);
}
.gate-feedback.correct {
  background: rgba(111,191,123,0.08);
  border-left-color: var(--correct);
}
.gate-feedback.wrong {
  background: rgba(216,118,118,0.08);
  border-left-color: var(--wrong);
}
.gate-feedback p { margin: 0 0 6px; }
.gate-feedback p:last-child { margin: 0; }
.gate-feedback strong { color: var(--ink); }
.gate-feedback em { color: var(--accent-warm); }
.gate-retry {
  font-family: var(--serif);
  font-style: italic;
  color: var(--wrong);
  margin-top: 6px !important;
}

/* Self-explain + apply textareas */
.gate-textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.15s ease;
}
.gate-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.gate-meter {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-top: -4px;
}

.gate-example {
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.008);
}
.gate-example summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.gate-example[open] summary { margin-bottom: 12px; }
.gate-example-body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-dim);
}
.gate-example-body p { margin: 0 0 10px; }
.gate-example-body em { color: var(--accent-warm); font-style: italic; }
.gate-example-body strong { color: var(--ink); }
.gate-example-body blockquote {
  margin: 8px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--accent);
  background: rgba(201,165,85,0.04);
  font-style: italic;
}

/* Stage footer — Next / Previous */
.stage-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.stage-status {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--correct);
  letter-spacing: 0.06em;
  margin-left: auto;
}

@media (max-width: 720px) {
  .stage-card { padding: 18px 20px; gap: 18px; }
  .gate { padding: 14px 16px; }
  .css-dot { width: 28px; height: 28px; font-size: 0.72rem; }
  .cram-stage-strip { position: relative; }
}

.cram-complete {
  margin-top: 32px;
  padding: 60px 32px;
  border: 1px solid var(--correct);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(111,191,123,0.10), rgba(111,191,123,0.02));
  text-align: center;
}
.cc-eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--correct);
  margin-bottom: 14px;
}
.cc-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 18px;
  color: var(--ink);
}
.cc-blurb {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 60ch;
  margin: 0 auto 14px;
}
.cc-blurb em { color: var(--accent-warm); font-style: italic; }
.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}

/* ============================================================
   Cheat sheet — screen + print
   ============================================================ */
.cs-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}
.cs-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.cs-back {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-decoration: none;
  align-self: flex-start;
}
.cs-back:hover { color: var(--ink-dim); }
.cs-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  letter-spacing: -0.02em;
  margin: 8px 0 0;
  color: var(--ink);
  font-weight: 400;
}
.cs-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-dim);
  margin: 0;
}
.cs-print-hint {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-top: 6px;
}
.cs-print-hint kbd {
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.7rem;
}

.cs-page {
  margin-top: 32px;
  padding: 36px 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,0.012);
}
.cs-page-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cs-page-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  margin: 4px 0 24px;
  color: var(--ink);
  font-weight: 400;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.cs-page-body { display: flex; flex-direction: column; gap: 22px; }

.cs-section { display: flex; flex-direction: column; gap: 8px; }
.cs-h {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 4px;
}
.cs-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin: 0 0 6px;
}
.cs-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-dim);
  margin: 0;
}

/* Format strip */
.cs-format {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,0.012);
}
.cs-format-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.cs-fk {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  padding-top: 2px;
}
.cs-fv { color: var(--ink); }

/* Marking criteria */
.cs-crit-grid { display: flex; flex-direction: column; gap: 10px; }
.cs-crit {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,0.008);
}
.cs-crit-letter {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--accent);
  font-weight: 500;
  line-height: 1;
}
.cs-crit-body { display: flex; flex-direction: column; gap: 4px; }
.cs-crit-name {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
}
.cs-crit-marks {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-left: 6px;
}
.cs-crit-band {
  font-size: 0.88rem;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* Generic key:value rows */
.cs-rows { display: flex; flex-direction: column; gap: 6px; }
.cs-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 4px 0;
}
.cs-rk { font-family: var(--mono); font-size: 0.78rem; color: var(--ink); letter-spacing: 0.02em; }
.cs-rv { color: var(--ink-dim); }

/* Framework rows (TAPAC etc.) */
.cs-fw { display: flex; flex-direction: column; gap: 4px; }
.cs-fw-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}
.cs-fw-row:last-child { border-bottom: none; }
.cs-fw-k {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 500;
  line-height: 1.2;
}
.cs-fw-v { color: var(--ink); }

/* Ordered (intro steps, PEEL) */
.cs-ord { display: flex; flex-direction: column; gap: 6px; }
.cs-ord-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
  padding: 6px 0;
}
.cs-ord-n {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--accent);
  font-weight: 500;
  line-height: 1.2;
}
.cs-ord-body { display: flex; flex-direction: column; gap: 2px; }
.cs-ord-name { font-family: var(--serif); font-size: 1rem; color: var(--ink); }
.cs-ord-guide { font-size: 0.9rem; color: var(--ink-dim); line-height: 1.5; }

/* Devices reference — categories */
.cs-cat { margin-top: 10px; }
.cs-cat-name {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.cs-cat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-dev {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}
.cs-dev:last-child { border-bottom: none; }
.cs-dev-name {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 500;
  grid-row: 1 / 3;
  grid-column: 1;
}
.cs-dev-def { color: var(--ink); grid-column: 2; }
.cs-dev-ask {
  color: var(--ink-dim);
  font-style: italic;
  grid-column: 2;
  font-size: 0.84rem;
}

/* Page 2 device list — render in two columns to fit the page */
.cs-page[data-page-id="devices"] .cs-page-body {
  column-count: 2;
  column-gap: 32px;
}
.cs-page[data-page-id="devices"] .cs-page-body > * {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.cs-page[data-page-id="devices"] .cs-intro {
  column-span: all;
  -webkit-column-span: all;
}
.cs-page[data-page-id="devices"] .cs-reminders {
  column-span: all;
  -webkit-column-span: all;
}

@media (max-width: 720px) {
  .cs-page { padding: 22px 18px; }
  .cs-row { grid-template-columns: 1fr; gap: 2px; }
  .cs-dev { grid-template-columns: 1fr; gap: 2px; }
  .cs-dev-name { grid-row: auto; grid-column: auto; }
  .cs-page[data-page-id="devices"] .cs-page-body { column-count: 1; }
}

/* Reminders sidebar at bottom of page 2 */
.cs-reminders {
  margin-top: 12px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: rgba(201,165,85,0.04);
  border-radius: 0 4px 4px 0;
}
.cs-rem-rows { display: flex; flex-direction: column; gap: 4px; }
.cs-rem-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.cs-rem-k { font-family: var(--mono); font-size: 0.74rem; color: var(--ink); letter-spacing: 0.02em; }
.cs-rem-v { color: var(--ink-dim); }

/* ---- Print mode: black on white, 2 pages, page-break enforced ---- */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .topbar, .footer, .cs-back, .cs-print-hint { display: none !important; }
  .cs-shell { max-width: none; padding: 0; margin: 0; }
  .cs-head { margin-bottom: 8px; }
  .cs-title, .cs-page-title, .cs-h, .cs-cat-name, .cs-page-tag,
  .cs-fk, .cs-rk, .cs-rem-k, .cs-fw-k, .cs-ord-n, .cs-crit-letter,
  .cs-fv, .cs-rv, .cs-rem-v, .cs-fw-v, .cs-ord-name, .cs-ord-guide,
  .cs-crit-name, .cs-crit-band, .cs-dev-name, .cs-dev-def, .cs-dev-ask,
  .cs-intro, .cs-sub, .cs-subtitle, .cs-crit-marks {
    color: #000 !important;
  }
  .cs-h, .cs-cat-name, .cs-fw-k, .cs-ord-n, .cs-crit-letter {
    color: #6b4f1d !important;
  }
  .cs-page {
    border: 1px solid #ccc !important;
    background: #fff !important;
    page-break-after: always;
    break-after: page;
    padding: 16mm 14mm;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .cs-page:last-child {
    page-break-after: auto;
    break-after: auto;
  }
  .cs-format, .cs-crit, .cs-reminders, .cs-row, .cs-fw-row, .cs-ord-row, .cs-dev {
    background: transparent !important;
    border-color: #ccc !important;
  }
  .cs-reminders {
    border-left: 3px solid #6b4f1d !important;
  }
  .cs-page-body { gap: 14px; }
  .cs-page[data-page-id="devices"] .cs-page-body { column-gap: 18px; }
  .cs-section, .cs-cat { gap: 6px; }
  /* Slightly smaller for fit */
  .cs-page-title { font-size: 1.4rem; }
  .cs-h, .cs-cat-name { font-size: 0.7rem; }
  .cs-format-row, .cs-fw-row, .cs-row, .cs-ord-row, .cs-dev, .cs-rem-row {
    font-size: 0.78rem;
  }
  .cs-dev-def, .cs-dev-ask, .cs-crit-band, .cs-rv, .cs-fw-v, .cs-ord-guide, .cs-rem-v {
    font-size: 0.78rem;
  }
  @page { size: A4; margin: 0; }
}

/* ============================================================
   Device drill — minimal aesthetic
   ============================================================ */

.dx-shell { max-width: 640px; margin: 0 auto; padding: 32px 20px 80px; }
.dx-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.dx-back {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-decoration: none;
  align-self: flex-start;
}
.dx-back:hover { color: var(--ink-dim); }
.dx-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  font-weight: 400;
}

/* Three plain tiles, evenly spaced */
.dx-tiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dx-tile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
  width: 100%;
}
.dx-tile:hover:not(:disabled) {
  border-color: var(--ink-dim);
  background: rgba(255,255,255,0.015);
}
.dx-tile:disabled { opacity: 0.35; cursor: not-allowed; }
.dx-tile.is-recommended { border-color: var(--accent); }
.dx-tile.is-recommended .dxt-name { color: var(--accent); }
.dxt-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink);
  font-weight: 400;
}
.dxt-meta {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.dx-reset-link {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 32px;
  cursor: pointer;
  letter-spacing: 0.04em;
  display: block;
}
.dx-reset-link:hover { color: var(--wrong); }

/* Flashcard — radically simplified */
.fc-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 8px;
}
.fc-exit {
  position: absolute;
  top: -16px;
  right: -8px;
  font-size: 1.6rem;
  color: var(--ink-faint);
  text-decoration: none;
  line-height: 1;
  padding: 8px 12px;
  z-index: 2;
}
.fc-exit:hover { color: var(--ink); }

.fc-card {
  width: 100%;
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 56px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
  background: transparent;
  transition: border-color 0.15s ease;
  animation: fc-in 0.2s ease-out;
}
.fc-card:hover { border-color: var(--ink-dim); }
@keyframes fc-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fc-cue {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 44ch;
  margin: 0;
}
.fc-cue.is-example { font-style: italic; }
.fc-cue strong { font-weight: 500; }
.fc-cue em { font-style: italic; color: var(--ink); }

.fc-answer {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  letter-spacing: -0.025em;
  color: var(--ink);
  text-transform: capitalize;
  line-height: 1;
}

.fc-tap {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}
.fc-tap kbd {
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.72rem;
}

.fc-rate {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.fc-rate-btn {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.fc-rate-btn:hover { color: var(--ink); }
.fc-rate-btn.fc-bad:hover { border-color: var(--wrong); color: var(--wrong); }
.fc-rate-btn.fc-mid:hover { border-color: var(--accent); color: var(--accent); }
.fc-rate-btn.fc-good:hover { border-color: var(--correct); color: var(--correct); }

/* Stage container (still used by quiz / identify) */
.dx-stage {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.dx-stage-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.dx-stage-back {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  text-decoration: none;
}
.dx-stage-back:hover { color: var(--ink); }
.dx-stage-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.dx-stage-foot { display: none; }
@media (max-width: 720px) {
  .flashcard-face { padding: 24px 22px; }
  .flashcard-row { grid-template-columns: 1fr; gap: 4px; }
  .flashcard-row .fr-lbl { padding-top: 0; }
}

/* Quiz card */
.qz-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.012);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.qz-prompt {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.qz-prompt strong {
  color: var(--ink);
  font-weight: 500;
  font-style: italic;
}
.qz-prompt em { color: var(--accent-warm); font-style: italic; }
.qz-input {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.4rem;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
}
.qz-input:focus {
  outline: none;
  border-color: var(--accent);
}
.qz-hint {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.qz-hint em { color: var(--accent); font-style: italic; }
.qz-hint kbd {
  font-family: var(--mono);
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 3px;
}
.qz-actions { display: flex; gap: 10px; }

.qz-feedback {
  margin-top: 4px;
  padding: 18px 22px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qz-feedback.correct {
  border: 1px solid var(--correct);
  background: rgba(111,191,123,0.06);
}
.qz-feedback.wrong {
  border: 1px solid var(--wrong);
  background: rgba(216,118,118,0.06);
}
.qzf-tag {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.qz-feedback.correct .qzf-tag { color: var(--correct); }
.qz-feedback.wrong .qzf-tag { color: var(--wrong); }
.qzf-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  text-transform: capitalize;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.qzf-name strong { color: var(--accent-warm); }
.qzf-said {
  font-size: 0.92rem;
  color: var(--ink-dim);
  font-style: italic;
}
.qzf-said strong { color: var(--ink); text-transform: capitalize; }
.qzf-effect, .qzf-analyse {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.qzf-effect strong, .qzf-analyse strong { color: var(--ink); }
.qzf-effect em, .qzf-analyse em { color: var(--accent-warm); font-style: italic; }
.qzf-actions { margin-top: 4px; }

/* Done state */
.dx-done {
  text-align: center;
  padding: 48px 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.012);
  margin-top: 28px;
}
.dx-done h2 {
  font-family: var(--serif);
  margin: 0 0 8px;
  color: var(--ink);
}
.dx-done p {
  color: var(--ink-dim);
  margin: 0 0 20px;
  font-size: 0.95rem;
}
.dx-done strong { color: var(--ink); }
.dx-done button { margin: 0 4px; }

/* Older v1 device-shell rules (still used by passage layout below) */
.devices-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}
.devices-head { padding: 24px 0 8px; display: flex; flex-direction: column; gap: 6px; }
.devices-back {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}
.devices-back::before { content: "← "; }
.devices-back:hover { color: var(--accent); }
.devices-kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 12px;
}
.devices-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3rem);
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  line-height: 1;
}
.devices-tagline {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-dim);
  font-style: italic;
  margin: 4px 0 0;
  max-width: 70ch;
}

.devices-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  margin-top: 28px;
}
@media (max-width: 920px) {
  .devices-layout { grid-template-columns: 1fr; }
}

/* Sidebar */
.devices-side { display: flex; flex-direction: column; gap: 18px; }
.ds-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.012);
}
.ds-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 10px;
}
.ds-stat-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-dim);
  padding: 4px 0;
}
.ds-stat-row strong { color: var(--ink); font-weight: 600; }
.ds-stat-row.ds-weak strong { color: var(--accent); }
.ds-stat-row.ds-mastered strong { color: var(--correct); }
.ds-stat-bar {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}
.ds-stat-bar span {
  display: block;
  height: 100%;
  background: var(--correct);
  transition: width 0.3s ease;
}
.ds-stat-foot {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-top: 8px;
}

.ds-library summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.ds-library[open] summary { margin-bottom: 12px; }
.ds-library-body { display: flex; flex-direction: column; gap: 14px; }
.ds-cat h4 {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.ds-cat ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-cat li {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.ds-cat li strong { color: var(--ink); text-transform: capitalize; }

/* Main passage panel */
.devices-main { min-width: 0; }
.dp-passage {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.012);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.dp-type { color: var(--accent); }
.dp-difficulty { color: var(--ink-faint); }
.dp-level { padding: 2px 8px; border-radius: 999px; }
.dp-level.ds-level-0 { background: rgba(255,255,255,0.04); color: var(--ink-faint); }
.dp-level.ds-level-1 { background: rgba(216,118,118,0.14); color: var(--wrong); }
.dp-level.ds-level-2 { background: rgba(201,165,85,0.14); color: var(--accent); }
.dp-level.ds-level-3 { background: rgba(111,191,123,0.14); color: var(--correct); }
.dp-source {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.dp-text {
  margin: 0;
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  background: rgba(201,165,85,0.04);
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink);
  border-radius: 0 6px 6px 0;
  white-space: pre-wrap;
}

.dp-input-block { display: flex; flex-direction: column; gap: 10px; }
.dp-label {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink-dim);
  line-height: 1.5;
}
.dp-label em { color: var(--accent); font-style: italic; }
.dp-input {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  resize: vertical;
  min-height: 60px;
}
.dp-input:focus {
  outline: none;
  border-color: var(--accent);
}
.dp-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Feedback */
.dp-feedback {
  margin-top: 18px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.012);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dp-feedback.all-correct {
  border-color: var(--correct);
  background: rgba(111,191,123,0.06);
}
.dp-feedback.partial {
  border-color: var(--accent);
  background: rgba(201,165,85,0.04);
}
.dpf-tag {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dp-feedback.all-correct .dpf-tag { color: var(--correct); }
.dp-feedback.partial .dpf-tag { color: var(--accent); }

.dpf-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dpf-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.dpf-item.ok {
  border-color: var(--correct);
  background: rgba(111,191,123,0.05);
}
.dpf-item.missed {
  border-color: var(--wrong);
  background: rgba(216,118,118,0.05);
}
.dpf-mark {
  font-family: var(--mono);
  font-size: 1.2rem;
  line-height: 1;
  align-self: center;
}
.dpf-item.ok .dpf-mark { color: var(--correct); }
.dpf-item.missed .dpf-mark { color: var(--wrong); }
.dpf-name {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  text-transform: capitalize;
}
.dpf-name em { color: var(--accent); font-style: normal; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.dpf-blurb {
  font-size: 0.92rem;
  color: var(--ink-dim);
  margin-top: 4px;
  line-height: 1.5;
}

.dpf-extras {
  padding: 12px 16px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  border-left: 3px solid var(--accent);
}
.dpf-sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 6px;
}
.dpf-extras ul {
  list-style: disc inside;
  margin: 0;
  padding-left: 8px;
  font-size: 0.92rem;
  color: var(--ink-dim);
}
.dpf-extras li strong { color: var(--ink); text-transform: capitalize; }
.dpf-extras-note {
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin: 8px 0 0;
}

.dpf-explain {
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: rgba(201,165,85,0.04);
  border-radius: 0 6px 6px 0;
}
.dpf-explain p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 8px;
}
.dpf-explain p:last-child { margin: 0; }
.dpf-explain strong { color: var(--ink); }
.dpf-explain em { color: var(--accent-warm); font-style: italic; }

.dpf-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.dp-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--ink-dim);
}
.dp-empty h2 {
  font-family: var(--serif);
  margin: 0 0 12px;
}

@media (max-width: 720px) {
  .dp-passage { padding: 18px 20px; }
}

/* ============================================================
   Device glossary — categorised expandable cards
   ============================================================ */

.device-glossary {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px;
}
.dg-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dg-cat {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.dg-cards { display: flex; flex-direction: column; gap: 6px; }
.dg-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,0.012);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dg-card[open] {
  border-color: var(--accent);
  background: rgba(201,165,85,0.04);
}
.dg-card summary {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}
.dg-card summary::-webkit-details-marker { display: none; }
.dg-card summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--ink-faint);
  font-size: 1.1rem;
  align-self: center;
  justify-self: end;
  grid-column: 2;
}
.dg-card[open] summary::after { content: "−"; color: var(--accent); }
.dg-card .dg-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.dg-card .dg-def {
  font-size: 0.92rem;
  color: var(--ink-dim);
  line-height: 1.5;
}
.dg-card .dg-body {
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dg-card .dg-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.dg-card .dg-lbl {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 2px;
}
.dg-card .dg-val { color: var(--ink-dim); }
.dg-card .dg-val em { color: var(--accent-warm); font-style: italic; }
.dg-card .dg-val strong { color: var(--ink); }
.dg-card .dg-val code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
}

@media (max-width: 720px) {
  .dg-card summary { grid-template-columns: 1fr; gap: 4px; }
  .dg-card summary::after { grid-column: 1; justify-self: end; margin-top: -22px; }
  .dg-card .dg-row { grid-template-columns: 1fr; gap: 4px; }
  .dg-card .dg-lbl { padding-top: 0; }
}

/* ============================================================
   ECONOMICS — landing + chapter view
   ============================================================ */

/* Home subject card colour for economics */
.home-subject-econ:hover { border-color: var(--accent-warm); }

/* Home subject card colour for Helix Jump — small sub-tile to the primary
   Economics tile. Reduced padding + font size, dashed border, low-key hover.
   Reads as "for fun, not for marks". Opens an external playable host in a new
   tab; doesn't touch any gayib state. */
.home-subject-helix {
  padding: 10px 16px;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.12);
  grid-template-columns: auto 1fr;
  align-items: center;
  margin-top: -4px;
}
.home-subject-helix .hs-title {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--ink-dim, var(--ink));
  text-transform: none;
}
.home-subject-helix .hs-meta {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-align: right;
  text-transform: lowercase;
  color: var(--ink-faint);
}
.home-subject-helix:hover {
  border-style: dashed;
  border-color: rgba(232, 138, 166, 0.45);
  background: rgba(232, 138, 166, 0.04);
}

/* ============================================================
   HELIX JUMP — embedded game view
   ============================================================ */
.view-helix {
  background: #0e0e10;
  min-height: 100vh;
}
.helix-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 16px 32px;
}
.helix-back {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-decoration: none;
  margin-bottom: 12px;
}
.helix-back:hover { color: var(--accent); }
.helix-frame {
  position: relative;
  width: 100%;
  /* 9:16 portrait-ish aspect — Helix Jump is a tall game. Capped by viewport. */
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 80px);
  margin: 0 auto;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
.helix-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (min-width: 720px) {
  /* On desktop, give it more breathing room and a wider-but-still-tall frame */
  .helix-frame { aspect-ratio: 10 / 16; max-width: 520px; }
}

/* Landing */
.econ {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
}
.econ-head { margin-bottom: 56px; }
.econ-back {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-decoration: none;
  margin-bottom: 24px;
}
.econ-back:hover { color: var(--accent); }
.econ-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.econ-title {
  font-family: "DM Serif Display", serif;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  line-height: 1;
}
.econ-blurb {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 56ch;
  margin: 0;
}

/* Unit blocks */
.econ-unit { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.econ-unit:first-of-type { border-top: none; padding-top: 0; }
.econ-unit-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 20px;
}
.econ-unit-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}
.econ-unit-title {
  font-family: "DM Serif Display", serif;
  font-size: 1.55rem;
  margin: 0 0 4px;
  line-height: 1.1;
  color: var(--ink);
}
.econ-unit-blurb { color: var(--ink-dim); font-size: 0.92rem; margin: 0; max-width: 60ch; }
.econ-unit-progress {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Chapter list */
.econ-chapters { display: flex; flex-direction: column; gap: 1px; background: var(--line); border-radius: 6px; overflow: hidden; }
.econ-chapter {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-2);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s;
}
.econ-chapter.is-ready { cursor: pointer; }
.econ-chapter.is-ready:hover { background: var(--bg-3); }
.econ-chapter.is-pending { opacity: 0.45; cursor: not-allowed; }
.econ-chapter .ec-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.84rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.econ-chapter .ec-title {
  font-size: 0.96rem;
  line-height: 1.35;
  color: var(--ink);
}
.econ-chapter .ec-status {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.econ-chapter.is-ready .ec-status { color: var(--accent); }
.econ-chapter.is-ready:hover .ec-status { color: var(--accent-warm); }

/* Chapter view */
.econ-chapter-view {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
}
.ecv-head { margin: 24px 0 40px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.ecv-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}
.ecv-title {
  font-family: "DM Serif Display", serif;
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.05;
}

/* Pending chapter */
.econ-ch-pending { padding: 64px 0; text-align: center; }
.econ-ch-pending h1 {
  font-family: "DM Serif Display", serif;
  font-size: 2rem;
  margin: 12px 0;
}
.ecv-pending-msg { color: var(--ink-faint); margin-top: 24px; }

/* Body — typography for rendered markdown content */
.ecv-body { font-size: 1.02rem; line-height: 1.7; color: var(--ink); }
.ecv-body h1 {
  font-family: "DM Serif Display", serif;
  font-size: 2rem;
  margin: 56px 0 16px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ecv-body h2 {
  font-family: "DM Serif Display", serif;
  font-size: 1.5rem;
  margin: 48px 0 14px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.ecv-body h3 {
  font-family: "DM Serif Display", serif;
  font-size: 1.2rem;
  margin: 32px 0 12px;
  line-height: 1.25;
  color: var(--ink);
}
.ecv-body h4 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 28px 0 10px;
}
.ecv-body p { margin: 0 0 16px; }
.ecv-body p:has(> img:only-child) {
  display: block;
  margin: 28px 0;
  padding: 20px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}
.ecv-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.ecv-body strong { color: var(--ink); font-weight: 600; }
.ecv-body em { color: var(--accent-warm); }
.ecv-body code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.86em;
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--ink);
}
.ecv-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(201, 165, 85, 0.4);
  text-underline-offset: 3px;
}
.ecv-body a:hover { color: var(--accent-warm); }

/* Lists */
.ecv-body ul, .ecv-body ol { margin: 0 0 18px; padding-left: 24px; }
.ecv-body ul { list-style-type: square; }
.ecv-body li { margin: 4px 0; line-height: 1.6; }
.ecv-body li::marker { color: var(--accent); }

/* Blockquote */
.ecv-body blockquote {
  margin: 18px 0;
  padding: 14px 20px;
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  color: var(--ink-dim);
  font-size: 0.96rem;
}
.ecv-body blockquote p:last-child { margin-bottom: 0; }
.ecv-body blockquote strong { color: var(--ink); }

/* Code blocks (used for ASCII diagrams) */
.ecv-body pre {
  margin: 20px 0;
  padding: 18px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.ecv-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* Tables */
/* Wrapper allows wide tables to scroll horizontally on narrow screens
   instead of pushing the whole chapter body wider than the viewport. */
.ecv-body .ecv-table-wrap {
  width: 100%;
  max-width: 100%;
  margin: 20px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ecv-body .ecv-table-wrap > table { margin: 0; }
.ecv-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.93rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.ecv-body table th, .ecv-body table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.ecv-body table th {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg-3);
  font-weight: 600;
}
.ecv-body table tr:last-child td { border-bottom: none; }

/* Economics diagrams — declarative SVG via js/econ-diagrams.js.
   Diagrams are inserted as <figure class="econ-diagram"><svg…/><figcaption/></figure>.
   We frame them in a card that matches blockquotes in tone but is a touch warmer,
   so a diagram reads as a *content* moment, not a quoted aside. */
.ecv-body .econ-diagram {
  margin: 28px 0;
  padding: 18px 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ecv-body .econ-diagram svg {
  width: 100%;
  height: auto;
  max-width: 640px;
  display: block;
}
.ecv-body .econ-diagram-cap {
  font-family: "Inter", sans-serif;
  font-size: 0.86rem;
  color: var(--ink-dim);
  text-align: center;
  line-height: 1.45;
  max-width: 560px;
  margin: 0;
}
.ecv-body .econ-diagram-error {
  margin: 28px 0;
  padding: 14px 18px;
  background: #2b1414;
  border: 1px solid #5a2828;
  color: #d87676;
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
}
@media (max-width: 600px) {
  .ecv-body .econ-diagram { padding: 12px 4px 10px; }
}

/* econ-fig — for image-based figures (textbook lifts + my caption).
   Same site framing as econ-diagram but accepts a raster <img> inside. */
.ecv-body .econ-fig {
  margin: 28px 0;
  padding: 18px 12px 14px;
  background: #FAF8F2;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ecv-body .econ-fig img {
  width: 100%;
  height: auto;
  max-width: 640px;
  display: block;
  border-radius: 4px;
}
.ecv-body .econ-fig figcaption {
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-size: 0.92rem;
  color: #333;
  text-align: left;
  line-height: 1.5;
  max-width: 600px;
  margin: 0;
  padding: 0 6px;
}
.ecv-body .econ-fig figcaption em {
  font-style: italic;
}
@media (max-width: 600px) {
  .ecv-body .econ-fig { padding: 12px 4px 10px; }
  .ecv-body .econ-fig figcaption { font-size: 0.86rem; }
}

/* Chapter nav (prev / next at bottom) */
.ecv-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.ecn-link {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
}
.ecn-link:hover { border-color: var(--accent); background: var(--bg-3); }
.ecn-prev { text-align: left; }
.ecn-next { text-align: right; }
.ecn-arrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: 4px;
}
.ecn-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.ecn-title { font-size: 0.92rem; line-height: 1.35; color: var(--ink); }

/* Recap collapse — wraps `## Recap` and everything after in a <details>.
   Default closed. Smooth max-height transition on open. */
/* Recap container — sits like a clear call-out card at the end of the
   chapter, not a quiet inline heading. The whole summary row is a tappable
   surface with a soft accent background so the reader notices "there is a
   summary to expand here" without scanning for it. */
/* Recap — looks like a regular chapter H2 (so it doesn't read as a bolted
   widget) but visibly interactive on hover. Underline below the heading
   when closed, none when open so expanded content reads as continuous
   chapter prose. The chevron is the only "this is a button" cue. */
.ecv-body details.ecv-recap {
  margin: 56px 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
}
.ecv-body details.ecv-recap > summary.ecv-recap-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  user-select: none;
  transition: border-color 0.18s ease;
}
.ecv-body details.ecv-recap[open] > summary.ecv-recap-summary {
  border-bottom-color: transparent;
}
.ecv-body details.ecv-recap > summary.ecv-recap-summary::-webkit-details-marker { display: none; }
.ecv-body details.ecv-recap > summary.ecv-recap-summary::marker { content: ""; }
.ecv-body .ecv-recap-h {
  font-family: "DM Serif Display", serif;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  transition: color 0.18s ease;
}
/* Chevron sits in a small bordered pill so it visibly reads as a button at
   rest — not loud, but unmistakably interactive. The whole summary row is
   the click target; the pill is the affordance cue. */
.ecv-body .ecv-recap-chev {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--accent);
  background: transparent;
  border: 1px solid rgba(201,165,85,0.45);
  border-radius: 999px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition: transform 0.22s ease, background 0.18s ease, border-color 0.18s ease;
}
.ecv-body details.ecv-recap[open] > summary.ecv-recap-summary .ecv-recap-chev {
  transform: rotate(90deg);
  background: rgba(201,165,85,0.12);
  border-color: rgba(201,165,85,0.7);
}
.ecv-body details.ecv-recap > summary.ecv-recap-summary:hover .ecv-recap-h {
  color: var(--accent);
}
.ecv-body details.ecv-recap > summary.ecv-recap-summary:hover .ecv-recap-chev {
  background: rgba(201,165,85,0.14);
  border-color: var(--accent);
}
.ecv-body .ecv-recap-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.32s ease, opacity 0.2s ease, margin-top 0.2s ease;
  margin-top: 0;
}
.ecv-body details.ecv-recap[open] > .ecv-recap-body {
  max-height: 4000px;
  opacity: 1;
  margin-top: 14px;
}
/* The wrapped content keeps its own margins, so the first heading inside
   shouldn't add the original h2 top-gap. */
.ecv-body .ecv-recap-body > h2:first-child,
.ecv-body .ecv-recap-body > h3:first-child,
.ecv-body .ecv-recap-body > p:first-child { margin-top: 0; }

/* Scroll progress bar — fixed across top of viewport while reading a chapter. */
.ecv-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.04);
  z-index: 80;
  pointer-events: none;
}
.ecv-scroll-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 80ms linear;
  will-change: width;
}

@media (max-width: 600px) {
  .econ-unit-head { flex-direction: column; gap: 8px; }
  .econ-chapter { grid-template-columns: 32px 1fr auto; gap: 10px; padding: 12px 14px; }
  /* Keep the status cell — it now holds the mastery pill, which we want
     visible on mobile. Hide the wordy text inside the pill though, so we
     don't crowd the row. */
  .econ-chapter .ec-pill .ec-pill-txt { display: none; }
  .ecv-nav { grid-template-columns: 1fr; }
  .ecn-next { text-align: left; }
  .ecv-body table { font-size: 0.85rem; }
  .ecv-body table th, .ecv-body table td { padding: 8px 10px; }
  .econ-progress-flag { display: none; }
  .ecv-body .ecv-recap-h { font-size: 1.4rem; }
  /* Popover: clamp width so it doesn't overflow on small screens. */
  .econ-prefs-popover { left: 12px; right: 12px; min-width: 0; }
  /* Hide reading-time text on cards at narrow widths so the title keeps room. */
  .econ-chapter .ec-status { gap: 6px; }
}

/* ---------- Mastery progress (econ landing) ---------- */
.econ-progress {
  margin: 28px 0 8px;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  position: relative; /* anchor for the prefs popover */
}
.econ-progress-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.econ-progress-num { color: var(--ink); }
.econ-progress-meta { display: inline-flex; align-items: center; gap: 12px; }
.econ-progress-flag {
  color: var(--accent);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Slim progress banner — single-line strip with inline bar.
   Replaces the larger card variant; used as the default banner now. */
.econ-progress.econ-progress-slim {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  padding: 8px 14px;
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.econ-progress.econ-progress-slim .econ-progress-num {
  color: var(--ink);
  font-weight: 600;
  font-feature-settings: "tnum";
  flex: 0 0 auto;
}
.econ-progress.econ-progress-slim .econ-progress-label {
  color: var(--ink-faint);
  text-transform: uppercase;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  flex: 0 0 auto;
}
.econ-progress.econ-progress-slim .econ-progress-bar.econ-progress-bar-inline {
  flex: 1 1 auto;
  height: 4px;
  margin: 0;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
}
.econ-progress.econ-progress-slim .econ-progress-flag {
  flex: 0 0 auto;
  font-size: 0.62rem;
  color: var(--accent);
}
.econ-progress.econ-progress-slim .econ-prefs-gear {
  width: 24px; height: 24px;
  flex: 0 0 auto;
}
@media (max-width: 600px) {
  .econ-progress.econ-progress-slim {
    flex-wrap: wrap;
    padding: 8px 12px;
  }
  .econ-progress.econ-progress-slim .econ-progress-bar.econ-progress-bar-inline {
    flex-basis: 100%;
    order: 99;
  }
}

/* Gear button — small, dim by default, picks up the accent on hover/active. */
.econ-prefs-gear {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  padding: 0;
  width: 28px; height: 28px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.econ-prefs-gear:hover,
.econ-prefs-gear[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(201,165,85,0.08);
}
.econ-prefs-gear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Popover — anchored under the gear, right-aligned to the progress section. */
.econ-prefs-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 12px;
  z-index: 30;
  min-width: 240px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  padding: 8px 4px;
  font-family: "Inter", system-ui, sans-serif;
}
.econ-prefs-head {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 6px 14px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.econ-prefs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 6px;
}
.econ-prefs-row:hover { background: var(--bg-3); }
.econ-prefs-label {
  font-size: 0.88rem;
  color: var(--ink);
}
.econ-prefs-switch {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 32px; height: 18px;
}
.econ-prefs-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0; cursor: pointer;
  z-index: 2;
}
.econ-prefs-switch input:focus-visible + .econ-prefs-track {
  box-shadow: 0 0 0 2px var(--accent);
}
.econ-prefs-track {
  position: absolute;
  inset: 0;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s;
}
.econ-prefs-thumb {
  position: absolute;
  top: 1px; left: 1px;
  width: 14px; height: 14px;
  background: var(--ink-faint);
  border-radius: 999px;
  transition: left 0.15s, background 0.15s;
}
.econ-prefs-switch.is-on .econ-prefs-track {
  background: rgba(201,165,85,0.2);
  border-color: var(--accent);
}
.econ-prefs-switch.is-on .econ-prefs-thumb {
  left: 15px;
  background: var(--accent);
}
.econ-progress-bar {
  height: 6px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
}
.econ-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #9bb87a, #c9a555);
  transition: width 0.25s ease-out;
}

/* ---------- Chapter status pills (landing list) ---------- */
.ec-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--ink-faint);
  white-space: nowrap;
  line-height: 1;
  min-height: 22px;
}
.ec-pill .ec-pill-dot { font-size: 0.74rem; line-height: 1; }
.ec-pill.is-passed {
  color: #b9d49a;
  background: rgba(155,184,122,0.1);
  border-color: rgba(155,184,122,0.35);
}
.ec-pill.is-passed .ec-pill-dot { color: #9bb87a; font-weight: 700; }
.ec-pill.is-progress {
  color: #e2c089;
  background: rgba(217,168,90,0.08);
  border-color: rgba(217,168,90,0.3);
}
.ec-pill.is-progress .ec-pill-dot { color: #d9a85a; }
.ec-pill.is-empty {
  color: var(--ink-faint);
  background: transparent;
  border-color: var(--line);
  /* Subtle — no-text variant just shows a dot. */
  padding: 4px 8px;
}

/* "Dot-only" pill: no text, no border, just a coloured circle. The pill's
   colour comes from each state's own block (.is-passed solid green,
   .is-progress solid yellow, .is-empty hollow grey). The aria-label is set
   on the element itself in pillHtml() so screen readers still announce the
   chapter status. */
.ec-pill.is-dot-only {
  width: 12px;
  height: 12px;
  min-height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  flex: 0 0 auto;
  background: transparent;
}
.ec-pill.is-passed.is-dot-only {
  background: #9bb87a;
  border-color: #9bb87a;
  box-shadow: 0 0 0 3px rgba(155, 184, 122, 0.15);
}
.ec-pill.is-progress.is-dot-only {
  background: #d9a85a;
  border-color: #d9a85a;
  box-shadow: 0 0 0 3px rgba(217, 168, 90, 0.12);
}
.ec-pill.is-empty.is-dot-only {
  background: transparent;
  border-color: var(--line-2);
}
.ec-pill.is-no-quiz {
  color: var(--ink-faint);
  font-style: italic;
  background: transparent;
  border-style: dashed;
}
.ec-pill.is-locked {
  color: var(--ink-dim);
  background: var(--bg-3);
  border-color: var(--line-2);
}
/* HL-only pill — distinct blue accent, always visible (not behind a toggle). */
.ec-pill.is-hl {
  color: #8fb8d6;
  background: rgba(120,170,210,0.10);
  border-color: rgba(120,170,210,0.35);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Reading-time chip — text-only, dim, sits next to mastery pill on cards. */
.ec-readtime {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  white-space: nowrap;
  line-height: 1;
}
.ec-readtime .ec-readtime-tilde { opacity: 0.7; margin-right: 1px; }

/* Status cell on the chapter card may now hold up to 3 chips. */
.econ-chapter .ec-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Eyebrow pill on the chapter view (HL marker). Sits to the right of the
   eyebrow text on the same line. */
.ecv-eyebrow-pill {
  margin-left: 8px;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0.08em;
}

/* Locked chapter row — visually distinct from regular rows but not loud. */
.econ-chapter.is-locked {
  cursor: not-allowed;
  color: var(--ink-faint);
}
.econ-chapter.is-locked .ec-title { color: var(--ink-faint); }
.econ-chapter.is-locked:hover { background: var(--bg-2); }

/* ---------- Locked chapter notice (chapter view) ---------- */
.econ-ch-locked {
  padding: 56px 0 64px;
  max-width: 56ch;
  margin: 0 auto;
  text-align: left;
}
.econ-ch-locked h1 {
  font-family: "DM Serif Display", serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0 0 18px;
  line-height: 1.1;
  color: var(--ink);
}
.ecl-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--ink-dim);
  margin-bottom: 18px;
}
.ecl-icon { font-size: 0.85rem; }
.ecl-msg { color: var(--ink-dim); font-size: 1rem; line-height: 1.55; margin: 0 0 24px; }
.ecl-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Profile menu hint (under the gating toggle) ---------- */
.pm-hint {
  font-size: 0.76rem;
  color: var(--ink-faint);
  line-height: 1.4;
  margin: -2px 0 4px;
  padding: 0 2px;
}

/* ---------- Chapter check (chapter view banner) ---------- */
.ecv-mastery {
  margin-top: 56px;
  padding: 24px 24px 22px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(201,165,85,0.06), rgba(201,165,85,0.02));
}
.ecv-mastery-head {
  display: flex; justify-content: space-between; gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.ecv-mastery-eyebrow {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.ecv-mastery-h { font-size: 1.4rem; line-height: 1.2; margin: 0 0 8px; color: var(--ink); }
.ecv-mastery-blurb { color: var(--ink-dim); font-size: 0.95rem; line-height: 1.55; margin: 0; max-width: 60ch; }
.ecv-mastery-pill {
  flex-shrink: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ecv-mastery-pill.is-passed { color: var(--correct); border-color: rgba(111,191,123,0.4); background: rgba(111,191,123,0.08); }
.ecv-mastery-pill.is-failed { color: var(--wrong); border-color: rgba(216,118,118,0.35); background: rgba(216,118,118,0.06); }

/* ---------- Assessment shell ---------- */
.ecv-assessment-host { margin-top: 12px; }
.amx { color: var(--ink); }
.amx-shell { max-width: 760px; margin: 0 auto; padding: 8px 0 80px; }
.amx-head {
  display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px; margin-bottom: 22px;
}
.amx-close {
  align-self: flex-start;
  background: none; border: none; cursor: pointer;
  color: var(--ink-dim); font-size: 0.92rem; padding: 4px 0;
}
.amx-close:hover { color: var(--accent); }
.amx-title-block { display: flex; flex-direction: column; gap: 4px; }
.amx-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.amx-title { font-size: 1.5rem; line-height: 1.15; margin: 0; }
.amx-sub { color: var(--ink-dim); margin: 4px 0 0; font-size: 0.95rem; line-height: 1.5; }

.amx-form { display: flex; flex-direction: column; gap: 16px; }
.amx-q {
  margin: 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
}
.amx-q-num {
  /* <legend> sits on the fieldset border by default and clips through the
     rounded corner — float it back into normal flow so it lives inside the
     padding box. */
  float: left;
  width: 100%;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0; margin: 0 0 10px;
  box-sizing: border-box;
}
.amx-q-prompt::before {
  /* Clear the floated legend so the prompt starts on its own line. */
  content: ""; display: block; clear: both;
}
.amx-q-prompt { color: var(--ink); line-height: 1.55; margin: 0 0 14px; font-weight: 500; }

.amx-opts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.amx-opt {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  line-height: 1.5;
  transition: border-color 0.15s, background 0.15s;
}
.amx-opt:hover { border-color: var(--line-2); }
.amx-opt input { margin-top: 4px; accent-color: var(--accent); }
.amx-opt.is-picked { border-color: var(--accent); background: rgba(201,165,85,0.05); }
.amx-opt input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.amx-opt.is-correct { border-color: rgba(111,191,123,0.55); background: rgba(111,191,123,0.06); }
.amx-opt.is-chosen-wrong { border-color: rgba(216,118,118,0.55); background: rgba(216,118,118,0.06); }
.amx-q.is-right { border-left: 3px solid var(--correct); }
.amx-q.is-wrong { border-left: 3px solid var(--wrong); }

.amx-q-feedback {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 0.9rem; line-height: 1.55;
  color: var(--ink-dim);
  display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;
}
.amx-feedback-text { flex: 1 1 240px; }

.amx-actions { display: flex; justify-content: flex-end; margin-top: 22px; }

.amx-err {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(216,118,118,0.4);
  background: rgba(216,118,118,0.06);
  color: var(--wrong);
  border-radius: 6px;
  font-size: 0.9rem;
}
.amx-err.is-flash { animation: amxShake 0.3s; }
@keyframes amxShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* ---------- Results ---------- */
.amx-results { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.amx-result-headline {
  display: flex; gap: 22px; align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}
.amx-result-headline.is-passed { border-color: rgba(111,191,123,0.45); background: rgba(111,191,123,0.05); }
.amx-result-headline.is-failed { border-color: rgba(216,118,118,0.4); background: rgba(216,118,118,0.05); }
.amx-score {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
}
.amx-result-headline.is-passed .amx-score { color: var(--correct); }
.amx-result-headline.is-failed .amx-score { color: var(--wrong); }
.amx-result-headline h3 { margin: 0 0 4px; font-size: 1.2rem; }
.amx-result-headline p { margin: 0; color: var(--ink-dim); line-height: 1.5; }

.amx-pill {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.amx-pill.is-right { color: var(--correct); background: rgba(111,191,123,0.1); border: 1px solid rgba(111,191,123,0.3); }
.amx-pill.is-wrong { color: var(--wrong); background: rgba(216,118,118,0.1); border: 1px solid rgba(216,118,118,0.3); }

.amx-results-actions { display: flex; gap: 12px; justify-content: flex-end; }
.amx-error {
  padding: 14px 16px;
  border: 1px solid rgba(216,118,118,0.4);
  background: rgba(216,118,118,0.06);
  color: var(--wrong);
  border-radius: 8px;
}

@media (max-width: 600px) {
  .ecv-mastery { padding: 18px 16px; }
  .ecv-mastery-head { flex-direction: column; align-items: flex-start; }
  .amx-shell { padding: 4px 0 60px; }
  .amx-q { padding: 14px 14px 12px; }
  .amx-result-headline { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; }
  .amx-score { font-size: 2.2rem; }
  .amx-results-actions { flex-direction: column; }
  .amx-results-actions .btn { width: 100%; }
  .amx-actions .btn { width: 100%; }
}

/* ===========================================================================
   Account UI: profile button, profile menu, settings gear, settings sheet,
   and admin dashboard.
   =========================================================================== */

/* ----- Topbar end / profile button ----- */
.topbar-end {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 500;
  transition: background 0.12s, border-color 0.12s;
}
.profile-btn:hover { background: var(--bg-3); border-color: var(--line-2); }
.profile-btn .profile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  width: 20px;
  height: 20px;
}
.profile-btn .profile-label { white-space: nowrap; }
@media (max-width: 460px) {
  .profile-btn { padding: 6px 10px 6px 8px; font-size: 0.8rem; }
  .profile-btn .profile-label { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
}

/* ----- Settings gear (bottom-left) ----- */
.settings-gear {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 25;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(14, 14, 17, 0.85);
  backdrop-filter: blur(8px);
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  opacity: 0.55;
}
.settings-gear:hover { color: var(--accent); border-color: var(--line-2); background: var(--bg-2); opacity: 1; }
body.focus-mode .settings-gear,
body.watch-mode .settings-gear { display: none; }
@media print {
  .settings-gear { display: none !important; }
}

/* ----- Profile menu ----- */
.profile-menu {
  z-index: 60;
  width: min(340px, calc(100vw - 16px));
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
  padding: 16px;
  font-size: 0.92rem;
  animation: pmFade 0.14s ease-out;
}
@keyframes pmFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.pm-panel { display: flex; flex-direction: column; gap: 10px; }
.pm-title { font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; }
.pm-blurb { color: var(--ink-dim); font-size: 0.84rem; line-height: 1.45; }
.pm-input {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  outline: none;
}
.pm-input:focus { border-color: var(--accent); }
.pm-submit { width: 100%; }
.pm-error {
  color: var(--wrong);
  font-size: 0.82rem;
  background: rgba(216, 118, 118, 0.06);
  border: 1px solid rgba(216, 118, 118, 0.3);
  padding: 8px 10px;
  border-radius: 8px;
}

/* Level prompt */
.pm-level-row { display: flex; gap: 8px; }
.pm-level-row .btn { flex: 1; }
.pm-link {
  background: transparent;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  font-size: 0.82rem;
  padding: 6px 0 0;
}
.pm-link:hover { color: var(--ink-dim); }

/* Account panel */
.pm-head { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.pm-name { font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.pm-level-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(201, 165, 85, 0.15);
  color: var(--accent);
  border: 1px solid rgba(201, 165, 85, 0.35);
}
.pm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
}
.pm-row-lbl { color: var(--ink-dim); font-size: 0.86rem; }
.pm-level-pick { display: inline-flex; gap: 4px; }
.pm-chip {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 4px 10px;
  font-size: 0.78rem;
  border-radius: 999px;
  cursor: pointer;
}
.pm-chip:hover { color: var(--ink); border-color: var(--line-2); }
.pm-chip.on { background: var(--accent); color: #1a1400; border-color: var(--accent); font-weight: 600; }

/* Toggle */
.pm-toggle { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; }
.pm-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.pm-toggle-track {
  position: absolute; inset: 0;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background 0.12s, border-color 0.12s;
}
.pm-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--ink-dim);
  border-radius: 50%;
  transition: left 0.12s, background 0.12s;
}
.pm-toggle input:checked + .pm-toggle-track { background: var(--accent); border-color: var(--accent); }
.pm-toggle input:checked + .pm-toggle-track::after { left: 18px; background: #1a1400; }

.pm-action {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-dim);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
}
.pm-action:hover { background: var(--bg-3); color: var(--ink); }
.pm-action.pm-danger { color: var(--wrong); }
.pm-action.pm-danger:hover { background: rgba(216, 118, 118, 0.08); color: var(--wrong); }

/* ----- Settings sheet ----- */
.settings-sheet-overlay {
  position: fixed; inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: ssOverlay 0.14s ease-out;
}
@keyframes ssOverlay { from { opacity: 0; } to { opacity: 1; } }
.settings-sheet {
  width: min(560px, 100%);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 22px 22px 28px;
  position: relative;
  animation: ssSheet 0.18s cubic-bezier(.2,.8,.2,1);
}
@keyframes ssSheet { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 720px) {
  .settings-sheet-overlay { align-items: center; }
  .settings-sheet { border-radius: 18px; }
}
.ss-close {
  position: absolute; top: 10px; right: 14px;
  width: 28px; height: 28px;
  background: transparent; border: none;
  color: var(--ink-dim);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.ss-close:hover { background: var(--bg-3); color: var(--ink); }
.ss-title { font-family: var(--serif); margin-bottom: 6px; }
.ss-blurb { color: var(--ink-dim); font-size: 0.9rem; margin: 0 0 14px; }
.ss-action {
  display: block;
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  margin-bottom: 8px;
  font-weight: 500;
}
.ss-action:hover { border-color: var(--accent); }
.ss-foot {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ----- Admin dashboard ----- */
.admin-back {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.admin-back:hover { color: var(--ink); }
.admin-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 22px; gap: 12px;
}
.admin-title { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.6rem); }
.admin-blurb { color: var(--ink-dim); font-size: 0.92rem; max-width: 56ch; margin-bottom: 16px; }

.admin-login {
  max-width: 360px;
  margin: 60px auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.admin-login .admin-title { text-align: center; }
.admin-input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 14px;
  font: inherit;
  border-radius: 10px;
  outline: none;
}
.admin-input:focus { border-color: var(--accent); }
.admin-error {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(216, 118, 118, 0.06);
  border: 1px solid rgba(216, 118, 118, 0.3);
  border-radius: 8px;
  color: var(--wrong);
  font-size: 0.86rem;
}
.admin-warn {
  margin: 18px 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(216, 118, 118, 0.4);
  background: rgba(216, 118, 118, 0.07);
  color: var(--wrong);
  font-size: 0.88rem;
}
.admin-attrib {
  margin: 36px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft, #888);
  font-size: 0.78rem;
  text-align: center;
}
.admin-attrib a { color: inherit; text-decoration: underline; }
.admin-attrib a:hover { color: var(--ink); }

.admin-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}
.admin-tile {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}
.admin-tile-num {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--accent);
}
.admin-tile-lbl {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  font-size: 0.7rem;
  margin-top: 6px;
}

.admin-section { margin: 28px 0; }
.admin-section h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.admin-table th, .admin-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.admin-table th {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  background: var(--bg-3);
  font-weight: 500;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table-compact td, .admin-table-compact th { padding: 6px 10px; font-size: 0.82rem; }

.admin-country-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
}
.admin-country-row {
  display: flex; justify-content: space-between;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.86rem;
}
.admin-country-row .cc { font-weight: 600; }
.admin-country-row .n { color: var(--ink-dim); }

@media (max-width: 600px) {
  .admin-table { font-size: 0.78rem; }
  .admin-table th, .admin-table td { padding: 6px 8px; }
}

/* ----- Dashboard v2: headline strip, 2x2 panels, charts, visitor list ----- */

/* Headline numbers — 4 tiles in a row, narrow on small screens. */
.admin-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 8px 0 22px;
}
.admin-strip-tile {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.admin-strip-num {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.05;
  color: var(--ink);
}
.admin-strip-lbl {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-size: 0.66rem;
  margin-top: 6px;
}
@media (max-width: 720px) {
  .admin-strip { grid-template-columns: repeat(2, 1fr); }
  .admin-strip-num { font-size: 1.4rem; }
}

/* 2x2 chart grid */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 12px 0 22px;
}
@media (max-width: 880px) {
  .admin-grid { grid-template-columns: 1fr; }
}

.admin-panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.admin-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.admin-panel-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.admin-panel-sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Charts */
.admin-chart {
  width: 100%;
  display: block;
}
.admin-chart-line svg {
  width: 100%;
  height: auto;
  display: block;
}
.admin-chart-empty {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.85rem;
  padding: 30px 0;
  font-family: var(--mono);
}

/* Bar chart rows */
.admin-bar-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-bar-row {
  display: grid;
  grid-template-columns: 96px 1fr 38px;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  padding: 4px 0;
  border-radius: 4px;
  cursor: default;
  transition: background-color 0.12s;
}
.admin-bar-row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.admin-bar-label {
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-bar-trough {
  background: var(--bg-3);
  border-radius: 4px;
  height: 14px;
  overflow: hidden;
}
.admin-bar-fill {
  height: 100%;
  background: var(--accent);
  opacity: 0.85;
  border-radius: 4px;
  transition: width 0.4s ease-out;
}
.admin-bar-num {
  text-align: right;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
}

/* Compact user table inside panel */
.admin-users { width: 100%; overflow-x: auto; }
.admin-users .admin-table {
  background: transparent;
  border: none;
  border-radius: 0;
}
.admin-users .admin-table th {
  background: transparent;
  font-size: 0.66rem;
  border-bottom: 1px solid var(--line);
  padding: 6px 8px;
}
.admin-users .admin-table td {
  border-bottom: 1px solid var(--line);
  padding: 7px 8px;
  font-size: 0.82rem;
}
.admin-users .admin-table tr:last-child td { border-bottom: none; }
.admin-users .admin-table .r { text-align: right; }
.admin-users .admin-table th.r { text-align: right; }

/* PIN cell in the admin user table — small, monospace, copy-pasteable. */
.admin-users .admin-pin,
.admin-pin {
  font-family: var(--mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--ink);
  user-select: all;
}

/* PIN row inside the profile panel — divider above it puts visual space
   between the toggle stack (Level, Sync, Sequential mastery, Competitive)
   and the read-only PIN display. */
.pm-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}
.pm-pin-row .pm-pin-value {
  font-family: var(--mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 10px;
  color: var(--ink);
  user-select: all;
}
.pm-input-pin {
  letter-spacing: 0.25em;
  text-align: center;
  font-family: var(--mono), ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Tooltip — single shared element positioned absolutely */
.admin-tt {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.12s ease-out;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Visitors panel — collapsed-by-default rows */
.admin-visitors { margin-top: 32px; }
.admin-visitors-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 10px;
}
.admin-visitors-head h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
}
.admin-visitors-hint {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.admin-visitors-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.admin-visitors-loading {
  padding: 18px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.85rem;
  text-align: center;
}
.admin-visitor {
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.admin-visitor:last-child { border-bottom: none; }
.admin-visitor-head {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.admin-visitor-head:focus-visible {
  background: var(--bg-3);
}
.admin-visitor-head:hover {
  background: rgba(255, 255, 255, 0.025);
}
.admin-visitor-chev {
  color: var(--ink-faint);
  font-size: 0.85rem;
  transition: transform 0.12s;
}
.admin-visitor.is-open .admin-visitor-chev {
  color: var(--accent);
}
.admin-visitor-main { min-width: 0; }
.admin-visitor-top {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 2px;
}
.admin-visitor-name {
  font-weight: 500;
  color: var(--ink);
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-visitor-country, .admin-visitor-ua {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.admin-visitor-meta {
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.admin-visitor-count {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-align: right;
  min-width: 28px;
}
.admin-visitor-detail {
  padding: 4px 14px 14px 44px;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid var(--line);
}
.admin-visitor-trail {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-visitor-step {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  padding: 4px 0;
  font-size: 0.82rem;
  border-bottom: 1px dashed transparent;
}
.admin-visitor-when {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.admin-visitor-path {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .admin-bar-row { grid-template-columns: 80px 1fr 32px; font-size: 0.78rem; }
  .admin-visitor-head { padding: 8px 10px; grid-template-columns: 14px 1fr auto; gap: 8px; }
  .admin-visitor-detail { padding-left: 28px; }
  .admin-visitor-step { grid-template-columns: 86px 1fr; gap: 8px; }
  .admin-panel { min-height: 240px; padding: 14px; }
}

/* ----- Stealth password popover (gear button) ----- */
/* A small bare password input. No labels, no headings, no helper text. */
.stealth-pop {
  z-index: 70;
  padding: 0;
  background: transparent;
  border: none;
}
.stealth-input {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.9rem;
  outline: none;
  width: 200px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.stealth-input:focus { border-color: var(--line-2); }
.stealth-input.stealth-bad {
  border-color: rgba(216, 118, 118, 0.7);
  animation: stealthFlash 0.45s ease-out;
}
@keyframes stealthFlash {
  0%   { border-color: rgba(216, 118, 118, 0.85); box-shadow: 0 0 0 2px rgba(216, 118, 118, 0.18); }
  100% { border-color: var(--line); box-shadow: none; }
}

/* Page-mode (when someone visits #admin directly with no session) */
.stealth-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stealth-input-page {
  width: min(260px, 80vw);
}

/* ================================================================
   Economics syllabus quiz (.eqv-* namespace + .econ-quiz-tile)
   Cool-toned, sans-serif flashcard look — distinct from chapter notes.
   ================================================================ */

:root {
  --eqv-cool: #7aa6e0;        /* primary cool accent */
  --eqv-cool-soft: rgba(122, 166, 224, 0.16);
  --eqv-cool-edge: rgba(122, 166, 224, 0.42);
  --eqv-card-bg: #1a1c23;
  --eqv-card-bg-2: #20232c;
  --eqv-good: #6fbf7b;
  --eqv-bad: #d87676;
}

/* ---- Quiz tile on the econ landing page ---- */
.econ-quiz-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  margin: 28px 0 8px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(122, 166, 224, 0.12) 0%, rgba(122, 166, 224, 0.05) 100%);
  border: 1px solid var(--eqv-cool-edge);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.econ-quiz-tile:hover {
  border-color: var(--eqv-cool);
  background: linear-gradient(135deg, rgba(122, 166, 224, 0.18) 0%, rgba(122, 166, 224, 0.08) 100%);
  transform: translateY(-1px);
  color: var(--ink);
}
.econ-quiz-tile .eqt-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.econ-quiz-tile .eqt-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--eqv-cool);
}
.econ-quiz-tile .eqt-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.econ-quiz-tile .eqt-sub {
  color: var(--ink-dim);
  font-size: 0.92rem;
  line-height: 1.4;
  max-width: 60ch;
}
.econ-quiz-tile .eqt-arrow {
  font-size: 1.4rem;
  color: var(--eqv-cool);
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .econ-quiz-tile { padding: 16px; gap: 10px; }
  .econ-quiz-tile .eqt-title { font-size: 1.05rem; }
  .econ-quiz-tile .eqt-sub { font-size: 0.88rem; }
}

/* ---- Action tiles on the econ landing page ----
   Two compact tiles side by side: Quiz (cool blue) and Papers (warm rose).
   On narrow widths they stack. The tile structure mirrors the existing
   .econ-quiz-tile but uses a tighter eyebrow + title + arrow layout. */
:root {
  --epp-rose: #d68a8a;
  --epp-rose-soft: rgba(214, 138, 138, 0.14);
  --epp-rose-edge: rgba(214, 138, 138, 0.42);
}
.econ-action-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0 8px;
}
.econ-action-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  min-width: 0;
}
.econ-action-tile .eat-eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  flex-shrink: 0;
}
.econ-action-tile .eat-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  letter-spacing: -0.005em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.econ-action-tile .eat-arrow {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.econ-action-tile.is-quiz {
  background: linear-gradient(135deg, rgba(122, 166, 224, 0.12) 0%, rgba(122, 166, 224, 0.05) 100%);
  border: 1px solid var(--eqv-cool-edge);
}
.econ-action-tile.is-quiz:hover {
  border-color: var(--eqv-cool);
  background: linear-gradient(135deg, rgba(122, 166, 224, 0.18) 0%, rgba(122, 166, 224, 0.08) 100%);
  transform: translateY(-1px);
  color: var(--ink);
}
.econ-action-tile.is-quiz .eat-eyebrow { color: var(--eqv-cool); }
.econ-action-tile.is-quiz .eat-arrow { color: var(--eqv-cool); }

.econ-action-tile.is-papers {
  background: linear-gradient(135deg, rgba(214, 138, 138, 0.12) 0%, rgba(214, 138, 138, 0.04) 100%);
  border: 1px solid var(--epp-rose-edge);
}
.econ-action-tile.is-papers:hover {
  border-color: var(--epp-rose);
  background: linear-gradient(135deg, rgba(214, 138, 138, 0.18) 0%, rgba(214, 138, 138, 0.07) 100%);
  transform: translateY(-1px);
  color: var(--ink);
}
.econ-action-tile.is-papers .eat-eyebrow { color: var(--epp-rose); }
.econ-action-tile.is-papers .eat-arrow { color: var(--epp-rose); }

@media (max-width: 560px) {
  .econ-action-tiles { grid-template-columns: 1fr; gap: 10px; }
  .econ-action-tile { padding: 13px 14px; }
  .econ-action-tile .eat-title { font-size: 0.94rem; }
}

/* ---- Paper prep view (per-paper pages and overview) ----
   Lives inside the .econ-chapter-view shell so it inherits typography. We
   only override what should differ — eyebrow accent colour to match the tile,
   and a subtle accent on the back link. */
.econ-papers-view .ecv-eyebrow { color: var(--epp-rose); }
.econ-papers-view .econ-back { color: var(--epp-rose); }
.econ-papers-view .econ-back:hover { color: var(--epp-rose); opacity: 0.85; }

/* Tables in the paper-prep pages can be wide (5-6 columns of mark-scheme
   bands). Wrap them in a horizontal-scroll container so narrow viewports
   don't overflow the layout. The wrapper inherits the table's rounded
   corners + border so the visual remains a single unit. */
.epp-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.epp-table-wrap table {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 100%;
  width: max-content;
}
.epp-table-wrap table th,
.epp-table-wrap table td {
  white-space: normal;
}
@media (max-width: 560px) {
  .epp-table-wrap table { font-size: 0.85rem; }
}

/* ---- Prefs popover: select-row variant (for Forced read delay) ---- */
.econ-prefs-row-select { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.econ-prefs-row-select .econ-prefs-label { display: flex; flex-direction: column; gap: 2px; }
.econ-prefs-sublabel {
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-weight: 400;
  line-height: 1.3;
  max-width: 28ch;
}
.econ-prefs-select {
  background: var(--bg-3);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 8px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.econ-prefs-select:focus { border-color: var(--eqv-cool); outline: none; }

/* ---- Quiz view shell (.eqv) ---- */
.eqv {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 80px;
  font-family: var(--sans);
  color: var(--ink);
}
.eqv-back {
  display: inline-block;
  color: var(--ink-dim);
  font-size: 0.88rem;
  margin-bottom: 18px;
  text-decoration: none;
}
.eqv-back:hover { color: var(--eqv-cool); }
.eqv-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eqv-cool);
  display: inline-block;
}
.eqv-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: -0.015em;
  margin: 8px 0 12px;
  color: var(--ink);
}
.eqv-blurb {
  color: var(--ink-dim);
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 56ch;
}

/* ---- Mode picker ---- */
.eqv-mode-head { margin-bottom: 28px; }
.eqv-modes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.eqv-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px;
  background: var(--eqv-card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.1s ease, border-color 0.1s ease, background 0.1s ease;
}
.eqv-mode:not(.is-empty):hover {
  border-color: var(--eqv-cool-edge);
  background: var(--eqv-card-bg-2);
  transform: translateY(-1px);
  color: var(--ink);
}
.eqv-mode.is-empty { opacity: 0.45; cursor: default; }
.eqv-mode-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.eqv-mode-eyebrow { font-weight: 700; font-size: 1.02rem; color: var(--ink); letter-spacing: -0.01em; }
.eqv-mode-sub { color: var(--ink-dim); font-size: 0.86rem; line-height: 1.4; }
.eqv-mode-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.eqv-mode-count { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }
.eqv-mode:not(.is-empty):hover .eqv-mode-count { color: var(--eqv-cool); }
.eqv-mode-arrow { color: var(--eqv-cool); font-size: 1.2rem; }

.eqv-prefs {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-wrap: wrap;
}
.eqv-prefs-label { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.eqv-prefs-hint { color: var(--ink-faint); font-size: 0.78rem; flex: 1; line-height: 1.35; min-width: 100%; }
.eqv-select {
  background: var(--bg-3);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 8px;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.eqv-select:focus { border-color: var(--eqv-cool); outline: none; }

/* ---- Session shell ---- */
.eqv-session { padding-top: 16px; }
.eqv-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.eqv-top .eqv-back { margin: 0; }
.eqv-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.eqv-meta-num { color: var(--ink); font-weight: 600; }
.eqv-meta-acc { color: var(--eqv-cool); }
.eqv-meta-streak { color: var(--ink-faint); }
.eqv-end-btn {
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.eqv-end-btn:hover { color: var(--ink); border-color: var(--line-2); }

/* ---- Progress bar ---- */
.eqv-bar {
  height: 4px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 22px;
}
.eqv-bar-fill {
  height: 100%;
  background: var(--eqv-cool);
  width: 0%;
  transition: width 0.25s ease;
  border-radius: 999px;
}

/* ---- Question card ---- */
.eqv-card-slot { display: block; }
.eqv-card {
  background: var(--eqv-card-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px 20px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.eqv-card-eye {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.eqv-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--ink-dim);
  border: 1px solid var(--line);
}
.eqv-chip-ch { color: var(--eqv-cool); border-color: var(--eqv-cool-edge); background: var(--eqv-cool-soft); }
.eqv-chip-tag { color: var(--ink-dim); }
.eqv-chip-d .eqv-pips { letter-spacing: 0.05em; color: var(--eqv-cool); margin-right: 4px; }
.eqv-chip-d .eqv-d-label { color: var(--ink-faint); }
.eqv-chip-hl { color: var(--accent-warm); border-color: rgba(230, 192, 110, 0.35); background: rgba(230, 192, 110, 0.08); }

.eqv-prompt {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  line-height: 1.4;
  margin: 0 0 18px;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.eqv-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.eqv-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  min-height: 46px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.96rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s, transform 0.05s;
}
.eqv-opt:hover { border-color: var(--eqv-cool-edge); background: var(--eqv-card-bg-2); }
.eqv-opt:active { transform: translateY(1px); }
.eqv-opt-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-3);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.78rem;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1px solid var(--line);
}
.eqv-opt:hover .eqv-opt-num { color: var(--eqv-cool); border-color: var(--eqv-cool-edge); }
.eqv-opt-text { flex: 1; }
.eqv-opt.is-locked { cursor: default; }
.eqv-opt.is-locked:hover { border-color: var(--line); background: var(--bg-2); }
.eqv-opt.is-correct {
  border-color: var(--eqv-good);
  background: rgba(111, 191, 123, 0.08);
}
.eqv-opt.is-correct .eqv-opt-num {
  background: rgba(111, 191, 123, 0.18);
  border-color: var(--eqv-good);
  color: var(--eqv-good);
}
.eqv-opt.is-wrong {
  border-color: var(--eqv-bad);
  background: rgba(216, 118, 118, 0.08);
}
.eqv-opt.is-wrong .eqv-opt-num {
  background: rgba(216, 118, 118, 0.18);
  border-color: var(--eqv-bad);
  color: var(--eqv-bad);
}

/* ---- Reveal panel ---- */
.eqv-reveal { display: none; margin-top: 16px; }
.eqv-reveal.is-shown { display: block; }
.eqv-reveal-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.eqv-reveal-flag {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.eqv-reveal.is-right .eqv-reveal-flag { color: var(--eqv-good); }
.eqv-reveal.is-wrong .eqv-reveal-flag { color: var(--eqv-bad); }
.eqv-reveal-out { font-size: 0.78rem; color: var(--ink-faint); }
.eqv-explain {
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 6px 0 12px;
  color: var(--ink);
}
.eqv-tip {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--eqv-cool-soft);
  border-left: 3px solid var(--eqv-cool);
  border-radius: 6px;
}
.eqv-tip-eye {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--eqv-cool);
}
.eqv-tip-body { color: var(--ink); font-size: 0.9rem; line-height: 1.45; }
.eqv-ctx {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 14px;
  background: var(--bg-2);
}
.eqv-ctx-sum {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  user-select: none;
}
.eqv-ctx-sum::-webkit-details-marker { display: none; }
.eqv-ctx[open] .eqv-ctx-sum { color: var(--eqv-cool); border-bottom: 1px solid var(--line); }
.eqv-ctx-chev { transition: transform 0.15s; }
.eqv-ctx[open] .eqv-ctx-chev { transform: rotate(90deg); }
.eqv-ctx-body {
  margin: 0;
  padding: 10px 14px 12px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-dim);
}

.eqv-next {
  background: var(--eqv-cool);
  color: #0d1622;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 0.96rem;
  font-family: var(--sans);
  cursor: pointer;
  min-height: 44px;
  width: 100%;
  transition: background 0.1s, opacity 0.1s;
}
.eqv-next:hover:not(:disabled) { background: #95b9e8; }
.eqv-next:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Footer hint ---- */
.eqv-foot { margin-top: 22px; text-align: center; }
.eqv-foot-hint { color: var(--ink-faint); font-size: 0.78rem; }
.eqv-foot-hint kbd { margin: 0 1px; }

/* ---- Summary ---- */
.eqv-summary { padding-top: 36px; text-align: left; }
.eqv-summary .eqv-title { font-size: clamp(2.4rem, 6vw, 3.2rem); color: var(--eqv-cool); }
.eqv-sumcard {
  background: var(--eqv-card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px 16px;
  margin: 20px 0;
}
.eqv-sumcard-h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 12px;
}
.eqv-tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.eqv-tag-row { display: flex; justify-content: space-between; padding: 8px 10px; background: var(--bg-2); border-radius: 6px; font-size: 0.9rem; }
.eqv-tag-name { color: var(--ink); text-transform: capitalize; }
.eqv-tag-acc { color: var(--ink-dim); font-family: var(--mono); }
.eqv-cta {
  display: inline-block;
  margin-top: 12px;
  background: var(--eqv-cool);
  color: #0d1622;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  min-height: 40px;
  line-height: 1.2;
}
.eqv-cta:hover { background: #95b9e8; color: #0d1622; }
.eqv-cta-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.eqv-cta-ghost:hover { background: var(--bg-2); color: var(--ink); border-color: var(--eqv-cool-edge); }

.eqv-tempo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.eqv-tempo-col { display: flex; flex-direction: column; gap: 4px; }
.eqv-tempo-eye {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.eqv-tempo-row { display: flex; justify-content: space-between; gap: 8px; font-size: 0.86rem; padding: 4px 0; }
.eqv-tempo-row span:first-child { color: var(--ink); text-transform: capitalize; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eqv-tempo-ms { color: var(--eqv-cool); font-family: var(--mono); flex-shrink: 0; }

.eqv-sum-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ---- Responsive: mobile ---- */
@media (max-width: 560px) {
  .eqv { padding: 18px 14px 80px; }
  .eqv-card { padding: 18px 16px 16px; border-radius: 14px; }
  .eqv-prompt { font-size: 1.04rem; }
  .eqv-opt { font-size: 0.94rem; padding: 12px 12px; min-height: 48px; }
  .eqv-opt-num { width: 24px; height: 24px; }
  .eqv-mode { padding: 16px; }
  .eqv-mode-eyebrow { font-size: 0.98rem; }
  .eqv-mode-sub { font-size: 0.82rem; }
  .eqv-tempo-grid { grid-template-columns: 1fr; }
  .eqv-meta { font-size: 0.74rem; gap: 10px; }
  .eqv-end-btn { padding: 5px 10px; font-size: 0.76rem; }
}
@media (min-width: 1024px) {
  .eqv { max-width: 680px; }
}

.eqv-eyebrow-row { display: block; margin-top: 14px; }

/* ================================================================
   Quiz polish v2 — start screen, micro-feedback, side panel, drawer.
   ================================================================ */

/* ---- Top row (back + leaderboard link spacer) ---- */
.eqv-toprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.eqv-toprow .eqv-back { margin-bottom: 0; }
.eqv-board-link { color: var(--ink-dim); font-size: 0.84rem; text-decoration: none; }
.eqv-board-link:hover { color: var(--eqv-cool); }

/* ---- Start screen multi-unit picker ---- */
.eqv-start { padding-top: 12px; }
.eqv-picker-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 18px 0 10px;
  flex-wrap: wrap;
}
.eqv-picker-label .eqv-eyebrow { margin: 0; }
.eqv-picker-hint { color: var(--ink-faint); font-size: 0.82rem; }

.eqv-mode-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--eqv-card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.05s ease;
}
.eqv-mode-tile:hover:not(.is-empty) {
  border-color: var(--eqv-cool-edge);
  background: var(--eqv-card-bg-2);
}
.eqv-mode-tile:active:not(.is-empty) { transform: translateY(1px); }
.eqv-mode-tile.is-on {
  border-color: var(--eqv-cool);
  background: linear-gradient(135deg, rgba(122, 166, 224, 0.14) 0%, rgba(122, 166, 224, 0.06) 100%);
  box-shadow: inset 0 0 0 1px rgba(122, 166, 224, 0.25);
}
.eqv-mode-tick {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  color: transparent;
  font-size: 0.78rem;
  font-weight: 700;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.eqv-mode-tile.is-on .eqv-mode-tick {
  background: var(--eqv-cool);
  border-color: var(--eqv-cool);
  color: #0d1622;
}

/* ---- Forced-read pref (prominent on start screen) ---- */
.eqv-readpref {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--eqv-card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.eqv-readpref-head {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.eqv-readpref-labelgroup { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eqv-readpref-title { font-weight: 600; font-size: 0.96rem; color: var(--ink); }
.eqv-readpref-sub {
  font-size: 0.8rem;
  color: var(--ink-dim);
  line-height: 1.4;
  max-width: 60ch;
}
.eqv-readpref-slider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  transition: opacity 0.15s, max-height 0.15s;
}
.eqv-readpref-slider.is-hidden { display: none; }
.eqv-readpref-range {
  flex: 1;
  accent-color: var(--eqv-cool);
}
.eqv-readpref-val {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--eqv-cool);
  min-width: 28px;
  text-align: right;
}

/* ---- Toggle switch (eqv-switch) ---- */
.eqv-switch {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  width: 44px;
  height: 26px;
}
.eqv-switch-track {
  display: block;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}
.eqv-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-dim);
  transition: transform 0.18s ease, background 0.15s;
}
.eqv-switch.is-on .eqv-switch-track { background: var(--eqv-cool-soft); border-color: var(--eqv-cool); }
.eqv-switch.is-on .eqv-switch-thumb { transform: translateX(18px); background: var(--eqv-cool); }

/* ---- Start button row ---- */
.eqv-startrow { margin-top: 22px; display: flex; }
.eqv-start-btn {
  width: 100%;
  text-align: center;
  font-size: 1.02rem;
  padding: 14px 22px;
}
.eqv-start-btn:disabled, .eqv-start-btn.is-disabled {
  background: var(--bg-3);
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* ---- Session top: hide progress bar (now infinite). Keep small streak/acc. ---- */
.eqv-meta-streak {
  color: var(--ink-faint);
  font-family: var(--mono);
  display: inline-block;
}
.eqv-streak-pop { animation: eqv-streak-pop 360ms ease; color: var(--eqv-cool); }
@keyframes eqv-streak-pop {
  0%   { transform: scale(1);   color: var(--eqv-cool); }
  50%  { transform: scale(1.18); color: #95b9e8; }
  100% { transform: scale(1);   color: var(--ink-faint); }
}
.eqv-back-btn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--ink-dim);
}
.eqv-back-btn:hover { color: var(--eqv-cool); }

/* ---- Card transitions ---- */
.eqv-card { position: relative; transition: box-shadow 0.18s ease; }
.eqv-card.eqv-card-enter {
  animation: eqv-card-in 220ms cubic-bezier(.2,.7,.2,1);
}
.eqv-card.eqv-card-enter::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--eqv-cool-edge), 0 0 22px var(--eqv-cool-soft);
  animation: eqv-card-glow 600ms ease forwards;
}
@keyframes eqv-card-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes eqv-card-glow {
  0%   { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ---- Option micro-feedback ---- */
.eqv-opt.eqv-pulse-good {
  animation: eqv-pulse-good 280ms ease;
}
@keyframes eqv-pulse-good {
  0%   { box-shadow: 0 0 0 0 rgba(111, 191, 123, 0.0); }
  40%  { box-shadow: 0 0 0 6px rgba(111, 191, 123, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(111, 191, 123, 0.0); }
}
.eqv-opt.eqv-shake { animation: eqv-shake 240ms ease; }
@keyframes eqv-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}
.eqv-opt.is-correct::after {
  content: "✓";
  margin-left: 8px;
  color: var(--eqv-good);
  font-weight: 700;
  animation: eqv-tick-fade 240ms ease 80ms both;
}
@keyframes eqv-tick-fade {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Floating point delta ---- */
.eqv-float-layer {
  position: absolute;
  top: 12px;
  right: 14px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.eqv-float {
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--eqv-card-bg-2);
  border: 1px solid var(--line);
  animation: eqv-float-rise 1100ms ease forwards;
  opacity: 0;
}
.eqv-float.is-good { color: var(--eqv-good); border-color: rgba(111, 191, 123, 0.4); }
.eqv-float.is-bad  { color: var(--eqv-bad);  border-color: rgba(216, 118, 118, 0.4); }
@keyframes eqv-float-rise {
  0%   { opacity: 0; transform: translateY(6px); }
  20%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-18px); }
}

/* ---- Reduced-motion fallbacks ---- */
@media (prefers-reduced-motion: reduce) {
  .eqv-card.eqv-card-enter { animation: none; }
  .eqv-card.eqv-card-enter::after { animation: none; opacity: 0; }
  .eqv-opt.eqv-pulse-good, .eqv-opt.eqv-shake { animation: none; }
  .eqv-streak-pop { animation: none; }
  .eqv-float { animation: none; opacity: 1; }
  .lb-panel { transition: none !important; }
}

/* ================================================================
   Leaderboard side panel (.lb-*) — slim column on desktop, drawer on mobile.
   ================================================================ */

.lb-panel {
  position: fixed;
  top: 64px;
  right: 16px;
  width: 280px;
  max-height: calc(100vh - 96px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  z-index: 40;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.lb-panel[hidden] { display: none; }
.lb-panel-inner {
  padding: 14px 14px 12px;
  overflow-y: auto;
  flex: 1;
}
.lb-loading {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: center;
  padding: 14px 0;
}

.lb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.lb-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--eqv-cool);
}
.lb-close {
  display: none;
  background: transparent;
  border: 0;
  padding: 0 4px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-dim);
  cursor: pointer;
}
.lb-close:hover { color: var(--ink); }

.lb-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.lb-list.is-dim { opacity: 0.6; }
.lb-empty {
  color: var(--ink-faint);
  font-size: 0.82rem;
  text-align: center;
  padding: 18px 6px;
}
.lb-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.86rem;
}
.lb-row:hover { background: var(--bg-3); }
.lb-rank {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lb-name {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-pts {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--eqv-cool);
  font-variant-numeric: tabular-nums;
}
.lb-row.is-me {
  background: rgba(122, 166, 224, 0.10);
  border: 1px solid rgba(122, 166, 224, 0.28);
  padding: 5px 8px;
}
.lb-row.is-me .lb-name { color: var(--eqv-cool); font-weight: 600; }
.lb-row.lb-r1 .lb-rank { color: #e6c06e; font-weight: 700; }
.lb-row.lb-r2 .lb-rank { color: #c2c5cd; font-weight: 700; }
.lb-row.lb-r3 .lb-rank { color: #c08a5b; font-weight: 700; }
.lb-gap { text-align: center; color: var(--ink-faint); font-size: 0.72rem; padding: 2px 0; }

.lb-cta {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lb-cta-msg { color: var(--ink-dim); font-size: 0.84rem; line-height: 1.4; }
.lb-cta-btn {
  background: var(--eqv-cool);
  color: #0d1622;
  border: 0;
  border-radius: 8px;
  padding: 7px 12px;
  font-weight: 600;
  font-size: 0.84rem;
  font-family: var(--sans);
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.1s;
}
.lb-cta-btn:hover { background: #95b9e8; }

.lb-status {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lb-status-msg {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lb-status-pts { color: var(--eqv-cool); font-family: var(--mono); font-size: 0.86rem; font-weight: 600; }

.lb-redirect {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-dim);
}
.lb-redirect p { margin-bottom: 16px; }

/* ---- Mobile handle ---- */
.lb-handle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--eqv-card-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  padding: 10px 8px 10px 10px;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  z-index: 39;
  display: none;
  align-items: center;
  gap: 6px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.25);
}
.lb-handle:hover { background: var(--eqv-card-bg-2); border-color: var(--eqv-cool-edge); color: var(--eqv-cool); }
.lb-handle[hidden] { display: none; }
.lb-handle-mark { display: inline-block; }
.lb-handle-label { font-weight: 600; }

/* ---- Mobile backdrop ---- */
.lb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 49;
  opacity: 0;
  transition: opacity 0.18s ease;
  display: none;
}
.lb-backdrop[hidden] { display: none !important; }
.lb-backdrop:not([hidden]) { display: block; }
.lb-backdrop.is-shown { opacity: 1; }

/* Minimize button — small, square, lives in the panel header on both desktop
   and mobile. Clicking flips the panel to the floating tab handle. */
.lb-min-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.lb-min-btn:hover { background: var(--bg-3); color: var(--ink); border-color: var(--line-2); }

/* ---- Layout: desktop = panel docked right ; mobile = drawer ----
   Desktop top offset clears the topbar (the brand + profile button live
   inside .topbar at ~56px). z-index 40 keeps panel above page content but
   below modal-tier UI (admin login, profile dropdowns, etc.). */
@media (min-width: 1024px) {
  /* When panel is OPEN: push the quiz card left so they don't overlap. */
  body.lb-quiz-active:not(.lb-minimized) #view-economics-quiz {
    padding-right: 312px;
  }
  /* When MINIMIZED: no padding shift; the floating tab is small and slim. */
  body.lb-quiz-active.lb-minimized #view-economics-quiz {
    padding-right: 0;
  }
  /* Default: handle hidden on desktop. We override below when minimized. */
  .lb-handle { display: none; }
  body.lb-quiz-active.lb-minimized .lb-handle {
    display: inline-flex;
    /* Park the tab on the right edge, vertically centred — small and slim. */
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 45;
    writing-mode: vertical-rl;
    transform-origin: center;
    border-radius: 6px 0 0 6px;
    padding: 12px 6px;
  }
  /* Make sure the panel's top offset clears the topbar comfortably */
  .lb-panel { top: 76px; }
}

@media (max-width: 1023px) {
  .lb-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(85vw, 380px);
    height: 100vh;
    max-height: 100vh;
    border-radius: 8px 0 0 8px;
    border-right: 0;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(.2,.7,.2,1);
    z-index: 50;
  }
  .lb-panel.is-open { transform: translateX(0); }
  .lb-handle { display: inline-flex; }
  /* The legacy .lb-close was display:none on desktop and inline-block on
     mobile. We've replaced it conceptually with .lb-min-btn (always shown);
     keeping .lb-close style block intact for back-compat. */
}

/* Echo-back for very wide screens — keep panel visually aligned with content */
@media (min-width: 1280px) {
  .lb-panel {
    right: max(16px, calc((100vw - 1240px) / 2));
  }
}

/* =====================================================================
   Paper-prep rebuild (.ppr-*) — the new component vocabulary.
   Built first on P3 as the calibration page. P1/P2/index re-skin later.
   Voice: chapter-notes (declarative). All components live inside
   .econ-papers-view .ecv-body so they inherit base typography.
   ===================================================================== */
:root {
  --ppr-rose: #d68a8a;
  --ppr-rose-soft: rgba(214, 138, 138, 0.10);
  --ppr-rose-edge: rgba(214, 138, 138, 0.35);
  --ppr-rose-deep: rgba(214, 138, 138, 0.55);
  --ppr-warn: #d97a6c;
  --ppr-warn-soft: rgba(217, 122, 108, 0.10);
  --ppr-warn-edge: rgba(217, 122, 108, 0.45);
  --ppr-good: #8ab48a;
  --ppr-good-soft: rgba(138, 180, 138, 0.10);
  --ppr-good-edge: rgba(138, 180, 138, 0.42);
  --ppr-amber: #d6b06b;
  --ppr-amber-soft: rgba(214, 176, 107, 0.12);
  --ppr-amber-edge: rgba(214, 176, 107, 0.40);
}

/* ---- Opening framing line (one-sentence contract under the title) ---- */
.ppr-opener {
  margin: 4px 0 28px;
  padding: 14px 18px;
  border-left: 3px solid var(--ppr-rose);
  background: var(--ppr-rose-soft);
  border-radius: 0 6px 6px 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
}
.ppr-opener strong { color: var(--ink); font-weight: 600; }

/* ---- Worked-example panel (THE headline component) ----
   Layout: a metadata strip, the verbatim stem with numbered annotation pins,
   a side panel of pin commentary, then the answer-skeleton with bands and a
   top-band delta. */
.ppr-worked {
  margin: 28px 0 36px;
  border: 1px solid var(--ppr-rose-edge);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(214, 138, 138, 0.06) 0%, rgba(214, 138, 138, 0.02) 100%);
  overflow: hidden;
}
.ppr-worked-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--ppr-rose-edge);
  background: rgba(214, 138, 138, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
}
.ppr-worked-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ppr-rose);
}
.ppr-worked-cite {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  margin-left: auto;
}
.ppr-worked-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  width: 100%;
  margin: 2px 0 0;
}
.ppr-worked-body {
  padding: 20px;
}
.ppr-worked-section {
  margin: 0 0 22px;
}
.ppr-worked-section:last-child { margin-bottom: 0; }
.ppr-worked-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

/* The verbatim stem */
.ppr-stem {
  margin: 0;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
}
.ppr-stem .ppr-stem-meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.ppr-pin {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  line-height: 1.35em;
  text-align: center;
  border-radius: 50%;
  background: var(--ppr-rose);
  color: #1a1010;
  font-family: var(--mono);
  font-size: 0.7em;
  font-weight: 700;
  margin: 0 2px;
  vertical-align: 0.05em;
  cursor: default;
}

/* Pin commentary list */
.ppr-pins {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.ppr-pins li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.ppr-pins li strong { color: var(--ink); font-weight: 600; }
.ppr-pins .ppr-pin { align-self: start; margin-top: 1px; }

/* Answer-skeleton: 5 numbered moves the marker actually counts */
.ppr-skeleton {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.ppr-skeleton li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  align-items: baseline;
}
.ppr-skel-step {
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ppr-rose);
  font-weight: 600;
}
.ppr-skel-body {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink);
}
.ppr-skel-body em { color: var(--accent-warm); font-style: italic; }
.ppr-skel-body code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ink-dim);
}
.ppr-skel-marks {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Top-band side panel */
.ppr-topband {
  margin: 18px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--ppr-good-edge);
  background: var(--ppr-good-soft);
  border-radius: 6px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink);
}
.ppr-topband-head {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ppr-good);
  margin-bottom: 8px;
  font-weight: 600;
}
.ppr-topband ul {
  margin: 6px 0 0;
  padding-left: 20px;
  list-style: square;
}
.ppr-topband li::marker { color: var(--ppr-good); }
.ppr-topband li {
  margin: 4px 0;
  color: var(--ink);
  line-height: 1.55;
}

/* ---- Anti-pattern card ----
   Red-tinted box. Each card is a 30-50 word vignette: named failure mode +
   diagnosis + the fix. Cards live in a .ppr-antipatterns grid. */
.ppr-antipatterns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin: 22px 0;
}
.ppr-antipattern {
  padding: 14px 18px;
  border: 1px solid var(--ppr-warn-edge);
  background: var(--ppr-warn-soft);
  border-radius: 8px;
  border-left: 3px solid var(--ppr-warn);
}
.ppr-antipattern-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.ppr-antipattern-name::before {
  content: "—";
  color: var(--ppr-warn);
  margin-right: 6px;
}
.ppr-antipattern-body {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0;
}
.ppr-antipattern-body strong { color: var(--ink); font-weight: 600; }
.ppr-antipattern-fix {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--ppr-warn-edge);
  font-size: 0.9rem;
  color: var(--ink);
}
.ppr-antipattern-fix::before {
  content: "Fix.";
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ppr-warn);
  margin-right: 6px;
  font-weight: 600;
}

/* ---- Rubric-climb delta ----
   Side-by-side L-X vs L-(X+1) cards. Each pair is a single component. */
.ppr-climb {
  margin: 22px 0;
  display: grid;
  gap: 14px;
}
.ppr-climb-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}
.ppr-climb-from,
.ppr-climb-to {
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.ppr-climb-from {
  border-color: var(--ppr-warn-edge);
  background: var(--ppr-warn-soft);
}
.ppr-climb-to {
  border-color: var(--ppr-good-edge);
  background: var(--ppr-good-soft);
}
.ppr-climb-band {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin-bottom: 8px;
}
.ppr-climb-from .ppr-climb-band { color: var(--ppr-warn); }
.ppr-climb-to .ppr-climb-band { color: var(--ppr-good); }
.ppr-climb-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.ppr-climb-text em { color: var(--accent-warm); font-style: italic; }
.ppr-climb-arrow {
  align-self: center;
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--ink-faint);
  padding: 0 4px;
}
.ppr-climb-move {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--ink-dim);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  line-height: 1.55;
}
.ppr-climb-move::before {
  content: "The move:";
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-right: 8px;
  font-weight: 600;
}

/* ---- Heatmap chips for topic frequency ----
   Each topic is a chip. Chip intensity reflects past-paper hit count. */
.ppr-heatmap {
  margin: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ppr-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--ppr-rose-edge);
  background: rgba(214, 138, 138, 0.08);
  font-size: 0.88rem;
  color: var(--ink);
  position: relative;
  cursor: default;
  transition: transform 0.12s ease, background 0.12s ease;
}
.ppr-chip:hover {
  transform: translateY(-1px);
  background: rgba(214, 138, 138, 0.14);
}
.ppr-chip-count {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
/* intensity: 1 = single hit, 5 = dominant theme */
.ppr-chip[data-intensity="1"] { background: rgba(214, 138, 138, 0.06); border-color: rgba(214, 138, 138, 0.20); }
.ppr-chip[data-intensity="2"] { background: rgba(214, 138, 138, 0.12); border-color: rgba(214, 138, 138, 0.32); }
.ppr-chip[data-intensity="3"] { background: rgba(214, 138, 138, 0.20); border-color: rgba(214, 138, 138, 0.45); }
.ppr-chip[data-intensity="4"] { background: rgba(214, 138, 138, 0.30); border-color: rgba(214, 138, 138, 0.62); }
.ppr-chip[data-intensity="5"] { background: rgba(214, 138, 138, 0.42); border-color: rgba(214, 138, 138, 0.78); color: #fff; }
.ppr-chip-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.ppr-chip:hover .ppr-chip-tip,
.ppr-chip:focus-visible .ppr-chip-tip { opacity: 1; }

/* ---- Skills self-check (browser-local) ----
   Checklist persisted in localStorage. Each row: checkbox + skill text.
   Distinctly NOT prose — direct, scannable. */
.ppr-skills {
  margin: 22px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 10px;
}
.ppr-skills-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.ppr-skills-title {
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
}
.ppr-skills-meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.ppr-skills-progress {
  height: 4px;
  background: var(--bg-3);
  border-radius: 2px;
  margin: 10px 0 16px;
  overflow: hidden;
}
.ppr-skills-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0;
  transition: width 0.35s ease;
}
.ppr-skill-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ppr-skill {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ppr-skill:hover { background: var(--bg-3); }
.ppr-skill input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink-faint);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ppr-skill input[type="checkbox"]:hover { border-color: var(--ink-dim); }
.ppr-skill input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.ppr-skill input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid #1a1400;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ppr-skill-text {
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink);
}
.ppr-skill input[type="checkbox"]:checked + .ppr-skill-text {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: var(--ink-faint);
}
.ppr-skill-group {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin: 14px 0 6px;
}
.ppr-skill-group:first-child { margin-top: 0; }

/* ---- "No diagram" callout ----
   Large prominent callout near the recommend-a-policy section. */
.ppr-callout {
  margin: 22px 0;
  padding: 18px 22px;
  border: 1px solid var(--ppr-warn-edge);
  border-left: 4px solid var(--ppr-warn);
  background: var(--ppr-warn-soft);
  border-radius: 0 8px 8px 0;
  display: grid;
  gap: 8px;
}
.ppr-callout-tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ppr-warn);
  font-weight: 700;
}
.ppr-callout-headline {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.ppr-callout-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0;
}
.ppr-callout-body strong { color: var(--ink); font-weight: 600; }
.ppr-callout-cite {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--ppr-warn-edge);
}

/* ---- Compact metadata strip (replaces "At a glance" lists) ---- */
.ppr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 22px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ppr-meta-item {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 4px 16px;
  border-right: 1px solid var(--line);
}
.ppr-meta-item:last-child { border-right: none; }
.ppr-meta-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.ppr-meta-value {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink);
}

/* ---- Time block (replaces big time-allocation table) ---- */
.ppr-time {
  margin: 22px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ppr-time-block {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}
.ppr-time-block-head {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 10px;
  font-weight: 600;
}
.ppr-time-bar {
  display: grid;
  gap: 6px;
}
.ppr-time-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.ppr-time-row strong { color: var(--ink); font-weight: 600; }
.ppr-time-row .ppr-time-len {
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.ppr-time-row .ppr-time-len::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--w, 50%);
  background: var(--accent);
  opacity: 0.55;
  border-radius: 3px;
}
.ppr-time-row .ppr-time-mins {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.ppr-time-row.is-priority .ppr-time-len::after { background: var(--ppr-rose); opacity: 0.85; }
.ppr-time-row.is-priority strong { color: var(--ppr-rose); }

/* ---- Section header for paper-prep (deprioritises filing-cabinet H2s) ---- */
.ecv-body .ppr-section-head {
  margin: 38px 0 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ecv-body .ppr-section-sub {
  margin: 0 0 14px;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .ppr-worked-body { padding: 16px; }
  .ppr-worked-head { padding: 12px 16px; }
  .ppr-worked-cite { margin-left: 0; width: 100%; }
  .ppr-skeleton li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ppr-skel-marks { justify-self: end; }
  .ppr-climb-pair {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ppr-climb-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
  .ppr-time { grid-template-columns: 1fr; }
  .ppr-antipatterns { grid-template-columns: 1fr; }
  .ppr-meta-item { border-right: none; border-bottom: 1px solid var(--line); padding: 8px 12px; }
  .ppr-meta-item:last-child { border-bottom: none; }
  .ppr-pins li { grid-template-columns: 1fr; gap: 4px; }
  .ppr-chip-tip { white-space: normal; max-width: 220px; }
}


/* ====================================================================
   Real-world examples library (.erw-* + .econ-rwe-view)
   --------------------------------------------------------------------
   Visual identity: muted green accent (case-study / field-research feel),
   distinct from chapter notes (gold), quiz (cool blue), paper prep (rose).
   Layout breathes more — wider line-height, more generous margins.
   ==================================================================== */

:root {
  --erw-green: #9bb87a;
  --erw-green-soft: rgba(155, 184, 122, 0.14);
  --erw-green-edge: rgba(155, 184, 122, 0.42);
  --erw-green-deep: #7a9461;
}

/* Three-tile grid on the econ landing — replaces the 2-column layout when
   the .is-three modifier is present. Stacks on narrow screens. */
.econ-action-tiles.is-three {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 760px) {
  .econ-action-tiles.is-three { grid-template-columns: 1fr; gap: 10px; }
}

.econ-action-tile.is-rwe {
  background: linear-gradient(135deg, rgba(155, 184, 122, 0.14) 0%, rgba(155, 184, 122, 0.05) 100%);
  border: 1px solid var(--erw-green-edge);
}
.econ-action-tile.is-rwe:hover {
  border-color: var(--erw-green);
  background: linear-gradient(135deg, rgba(155, 184, 122, 0.20) 0%, rgba(155, 184, 122, 0.08) 100%);
  transform: translateY(-1px);
  color: var(--ink);
}
.econ-action-tile.is-rwe .eat-eyebrow { color: var(--erw-green-deep); }
.econ-action-tile.is-rwe .eat-arrow { color: var(--erw-green-deep); }

/* RWE shell — green eyebrow + back link colour to match. */
.econ-rwe-view .ecv-eyebrow { color: var(--erw-green-deep); }
.econ-rwe-view .econ-back { color: var(--erw-green-deep); }
.econ-rwe-view .econ-back:hover { color: var(--erw-green-deep); opacity: 0.85; }

/* Slightly more breathable typography for the library. */
.erw-body { font-size: 1.04rem; line-height: 1.78; }
.erw-body p { margin: 0 0 18px; }
.erw-body h2 { color: var(--erw-green-deep); }
.erw-body h2:first-of-type { margin-top: 8px; }

.erw-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 28px;
  padding: 14px 18px;
  border-left: 3px solid var(--erw-green);
  background: var(--erw-green-soft);
  border-radius: 0 6px 6px 0;
}

/* Cluster groups — Microeconomics / Macro / Development */
.erw-group { margin: 36px 0 8px; }
.erw-group-title {
  color: var(--erw-green-deep);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.erw-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 760px) {
  .erw-grid { grid-template-columns: 1fr; gap: 10px; }
}

.erw-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.erw-card:hover {
  border-color: var(--erw-green-edge);
  background: var(--erw-green-soft);
  transform: translateY(-1px);
  color: var(--ink);
}
.erw-card-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--erw-green-deep);
}
.erw-card-country { font-weight: 600; }
.erw-card-year { color: var(--ink-faint); }
.erw-card-title {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.erw-card-summary {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink-faint);
  margin: 0;
}
.erw-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.erw-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--erw-green-soft);
  color: var(--erw-green-deep);
}

/* ---------- Paper 1 priority cheat-sheet ---------- */
.erw-p1-block {
  margin: 32px 0 12px;
  padding: 22px 22px 24px;
  border: 1px solid var(--erw-green-edge);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--erw-green-soft) 0%, var(--bg) 75%);
}
.erw-p1-block-head { margin-bottom: 18px; }
.erw-p1-block-title {
  font-family: var(--sans);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--erw-green-deep);
  margin: 0 0 6px;
}
.erw-p1-block-sub {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-faint);
  margin: 0;
}

.erw-p1-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 760px) {
  .erw-p1-grid { grid-template-columns: 1fr; gap: 12px; }
}

.erw-p1-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  border: 1px solid var(--erw-green-edge);
  border-radius: 12px;
  background: var(--bg);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.18s ease;
}
.erw-p1-card:hover {
  border-color: var(--erw-green);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  color: var(--ink);
}

.erw-p1-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.erw-p1-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--erw-green-deep);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.84rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.erw-p1-titleblock { flex: 1; min-width: 0; }
.erw-p1-title {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 2px 0 4px;
  color: var(--ink);
}
.erw-p1-meta {
  display: flex;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--erw-green-deep);
}
.erw-p1-meta .erw-p1-year { color: var(--ink-faint); }

/* The keystone — the one-liner the student should memorise. */
.erw-p1-oneliner {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--erw-green);
  background: var(--erw-green-soft);
  border-radius: 0 8px 8px 0;
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  font-style: normal;
  letter-spacing: -0.005em;
}

.erw-p1-policies {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.erw-p1-policy {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-alt, rgba(0,0,0,0.04));
  color: var(--erw-green-deep);
  border: 1px solid var(--line);
}

/* Per-entry header — adds the summary line + chip row beneath the title. */
.erw-entry-head { padding-bottom: 28px; }
.erw-entry-summary {
  font-size: 1.0rem;
  line-height: 1.6;
  color: var(--ink-faint);
  margin: 8px 0 12px;
}
.erw-entry-body { max-width: 70ch; }
.erw-entry-body h2 {
  font-size: 1.1rem;
  margin-top: 28px;
}

/* Reference appendix — flat browseable list, intentionally less ornate
   than the cards above. */
.erw-appendix { margin: 44px 0 12px; }
.erw-appendix-note {
  color: var(--ink-faint);
  margin: 0 0 16px;
  font-size: 0.95rem;
}
.erw-appendix-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.erw-appendix-row {
  display: grid;
  grid-template-columns: 140px 90px 1fr 200px;
  gap: 12px;
  align-items: baseline;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.5;
}
.erw-appendix-country {
  font-weight: 600;
  color: var(--ink);
  font-family: var(--sans);
}
.erw-appendix-year {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.erw-appendix-summary { color: var(--ink); }
.erw-appendix-topic {
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--erw-green-deep);
  text-align: right;
}
@media (max-width: 760px) {
  .erw-appendix-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 4px;
  }
  .erw-appendix-year { display: inline-block; margin-left: 8px; }
  .erw-appendix-country { display: inline-block; }
  .erw-appendix-country::after { content: " · "; color: var(--ink-faint); font-weight: 400; }
  .erw-appendix-topic { text-align: left; margin-top: 4px; }
}