/* =========================================================
   REVISORA — Self-hosted fonts
   Zodiak display serif, General Sans body, JetBrains Mono.
   Self-hosted so type never silently degrades to Times when
   a third-party CDN fails. Metric fallbacks keep CLS near 0.
   ========================================================= */

@font-face {
  font-family: 'Zodiak';
  src: url('assets/fonts/Zodiak-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('assets/fonts/Zodiak-VariableItalic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('assets/fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('assets/fonts/GeneralSans-VariableItalic.woff2') format('woff2');
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Metric-compatible fallbacks — hold layout while the real files load */
@font-face {
  font-family: 'Zodiak Fallback';
  src: local('Georgia');
  size-adjust: 106%;
  ascent-override: 78%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'General Sans Fallback';
  src: local('Arial');
  size-adjust: 99%;
}

/* =========================================================
   REVISORA — Design tokens
   Warm tan paper, true off-black ink, Zodiak display serif,
   emerald = the single accent, tan = warm neutral pigment.
   Intent lives in DESIGN.md — keep the two in sync.

   :root              = dark theme (opt-in)
   [data-theme=light] = light/tan-paper (canonical default)
   ========================================================= */

:root {
  /* Ground — warm off-black shifted toward the tan family */
  --bg-base: #0c0b09;
  --bg-deep: #080706;
  --bg-surface: #14120e;
  --bg-elevated: #1d1a14;
  --bg-card: #17140f;
  --bg-card-hover: #201c15;
  --bg-input: #100e0a;

  /* Rules — low-alpha hairlines, never heavy */
  --border-subtle: rgba(242, 238, 230, 0.07);
  --border-soft: rgba(242, 238, 230, 0.12);
  --border-strong: rgba(242, 238, 230, 0.2);

  /* Tan — warm neutral pigment (rules, stamps, eyebrow dashes). Not an accent. */
  --tan: #c2ad8c;
  --tan-deep: #a08a66;
  --tan-light: #d6c6ab;
  --tan-glow: rgba(194, 173, 140, 0.1);
  --tan-soft: rgba(194, 173, 140, 0.1);

  /* Emerald — the single accent: success, progress, active state */
  --emerald: #10b981;
  --emerald-deep: #0d9668;
  --emerald-glow: rgba(16, 185, 129, 0.1);
  --emerald-soft: rgba(16, 185, 129, 0.12);

  /* Primary CTA — ink in light, bone in dark. High contrast, no hue. */
  --cta-bg: #ece6d9;
  --cta-bg-hover: #ddd5c4;
  --cta-text: #17140e;

  /* Semantic */
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.14);
  --danger: #f43f5e;
  --danger-soft: rgba(244, 63, 94, 0.14);
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, 0.14);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.14);

  /* Text — never pure white */
  --text-primary: #f2eee6;
  --text-secondary: #c4bcad;
  --text-tertiary: #948b7b;
  --text-muted: #675f52;
  --text-on-ink: #17140e;
  --text-on-emerald: #04241a;

  /* Overlay scrims */
  --scrim: rgba(8, 7, 6, 0.6);
  --scrim-soft: rgba(8, 7, 6, 0.45);

  /* Typography — Zodiak display, General Sans body, JetBrains Mono */
  --font-display: 'Zodiak', 'Zodiak Fallback', Georgia, serif;
  --font-body: 'General Sans', 'General Sans Fallback', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Radius — cards use lg/xl, buttons md or pill */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* Shadows — flat and quiet; borders carry hierarchy, not glows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 420ms;
  --t-tape: 70s;
}

/* =========================================================
   Light theme — warm cream, the canonical default
   ========================================================= */
html[data-theme="light"] {
  --bg-base: #ede8de;
  --bg-deep: #e3dccd;
  --bg-surface: #f4f0e7;
  --bg-elevated: #faf7f0;
  --bg-card: #f8f4eb;
  --bg-card-hover: #f1ebdf;
  --bg-input: #faf7f0;

  --border-subtle: rgba(23, 20, 14, 0.1);
  --border-soft: rgba(23, 20, 14, 0.16);
  --border-strong: rgba(23, 20, 14, 0.28);

  --tan: #8a7a5e;
  --tan-deep: #6b5d45;
  --tan-light: #b3a488;
  --tan-glow: rgba(138, 122, 94, 0.1);
  --tan-soft: rgba(138, 122, 94, 0.1);

  --emerald: #067050;
  --emerald-deep: #056849;
  --emerald-glow: rgba(6, 112, 80, 0.1);
  --emerald-soft: rgba(6, 112, 80, 0.1);

  --cta-bg: #17140e;
  --cta-bg-hover: #2a251b;
  --cta-text: #f7f3ea;

  --success: #067050;
  --success-soft: rgba(6, 112, 80, 0.12);
  --danger: #c42b49;
  --danger-soft: rgba(196, 43, 73, 0.1);
  --warning: #92590a;
  --warning-soft: rgba(146, 89, 10, 0.12);
  --info: #1d5fd6;
  --info-soft: rgba(29, 95, 214, 0.1);

  --text-primary: #17140e;
  --text-secondary: #464033;
  --text-tertiary: #6b6453;
  --text-muted: #98917f;
  --text-on-ink: #f7f3ea;
  --text-on-emerald: #f2faf6;

  --scrim: rgba(50, 42, 28, 0.35);
  --scrim-soft: rgba(237, 232, 222, 0.72);

  --shadow-sm: 0 1px 2px rgba(30, 25, 15, 0.08);
  --shadow-md: 0 2px 10px rgba(30, 25, 15, 0.1);
  --shadow-lg: 0 8px 24px rgba(30, 25, 15, 0.12);
  --shadow-xl: 0 16px 40px rgba(30, 25, 15, 0.14);
}

/* =========================================================
   Reset & base
   ========================================================= */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}
input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Selection highlight — emerald wash */
::selection {
  background: var(--emerald-soft);
  color: var(--text-primary);
}

:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.btn:focus-visible, .navlink:focus-visible, .choice-card:focus-visible {
  outline-offset: 3px;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 3px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* =========================================================
   Masthead — logotype, permanent strapline, hairline rule
   ========================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-3) var(--s-8) var(--s-4);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-soft);
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: opacity var(--t-fast);
  min-width: 0;
}
.brand:hover { opacity: 0.85; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.brand-strap {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.topnav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.navlink {
  position: relative;
  padding: var(--s-2) var(--s-3);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t-fast);
}
.navlink::after {
  content: '';
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 2px;
  height: 2px;
  background: var(--text-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease-out);
}
.navlink:hover { color: var(--text-primary); }
.navlink:hover::after { transform: scaleX(1); }
.navlink.active { color: var(--text-primary); }
.navlink.active::after { transform: scaleX(1); background: var(--emerald); }

/* Practice disclosure menu — a ruled index card under the masthead */
.nav-menu { position: relative; }
.nav-menu summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::before {
  content: '';
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 2px;
  height: 2px;
  background: var(--emerald);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease-out);
}
.nav-menu[open] summary { color: var(--text-primary); }
.nav-menu summary.active { color: var(--text-primary); }
.nav-menu summary.active::before { transform: scaleX(1); }
.nav-menu-panel {
  position: absolute;
  top: calc(100% + var(--s-2));
  left: 0;
  min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  padding: var(--s-2) 0;
  z-index: 60;
}
.nav-menu-panel a {
  display: block;
  padding: var(--s-2) var(--s-4);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-menu-panel a:hover {
  color: var(--text-primary);
  background: var(--bg-card-hover);
}
.theme-btn { display: inline-flex; align-items: center; }
.theme-btn svg { display: block; }
.theme-btn::after, .account-btn::after { display: none; }
.account-btn {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 6px var(--s-4);
}
.account-btn:hover { border-color: var(--text-tertiary); }
.account-btn.signed-in { color: var(--emerald); border-color: var(--emerald); }
.reset-btn { font: inherit; }

/* =========================================================
   App shell + view transitions
   ========================================================= */

.app-shell {
  min-height: calc(100vh - 140px);
  padding: var(--s-10) var(--s-8) var(--s-16);
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}

.view { animation: viewIn 480ms var(--ease-out) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Breadcrumb — set like a slug line
   ========================================================= */

.crumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.crumb a { color: var(--text-tertiary); transition: color var(--t-fast); }
.crumb a:hover { color: var(--emerald-deep); }
.crumb .sep { color: var(--text-muted); }
.crumb .cur { color: var(--text-secondary); }

/* =========================================================
   Hero — the front page lead
   ========================================================= */

.hero {
  text-align: left;
  padding: var(--s-12) 0 var(--s-10);
}

/* Dateline / eyebrow — mono slug with a claret dash */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--tan);
}

.hero-dateline {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums;
}
.hero-dateline strong { color: var(--text-primary); font-weight: 500; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 4.8vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-5);
}
.hero h1 .accent {
  font-style: italic;
  color: var(--emerald);
}

.hero-sub {
  max-width: 600px;
  margin: 0 0 var(--s-8);
  font-size: 1.06rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.hero-cta-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.hero-guide-link {
  display: inline-block;
  margin-top: 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-strong);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.hero-guide-link:hover { color: var(--emerald); border-color: var(--emerald); }

.trust-line {
  margin-top: var(--s-3);
  font-size: 0.82rem;
  color: var(--text-tertiary);
}

/* Split hero — asymmetric lead story + live briefing card */
.hero-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-12);
  align-items: center;
  text-align: left;
  max-width: 1080px;
  margin: 0 auto;
}
.hero-split .hero-cta-row { justify-content: flex-start; }
.hero-split .hero-demo .qotd-card { margin: 0; }
@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; text-align: left; gap: var(--s-8); }
  .hero-split .hero-cta-row { justify-content: flex-start; }
}

/* Hero entrance — one quiet fade, landing only */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: heroRise 300ms var(--ease-out) both; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* =========================================================
   Spec ticker tape — 167 spec points quoted like an index
   ========================================================= */

.spec-tape {
  overflow: hidden;
  margin-top: var(--s-6);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 3px double var(--border-strong);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tape-track {
  display: flex;
  gap: var(--s-10);
  width: max-content;
  animation: tapeDrift var(--t-tape) linear infinite;
}
.spec-tape:hover .tape-track { animation-play-state: paused; }
@keyframes tapeDrift { to { transform: translateX(-50%); } }

.tick {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  white-space: nowrap;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.tick b { font-weight: 600; color: var(--text-primary); }
.tick .t-up { color: var(--emerald); font-weight: 500; }
.tick .t-down { color: var(--tan-deep); font-weight: 500; }
.tick .t-flat { color: var(--text-tertiary); }

/* =========================================================
   Proof strip — the market summary
   ========================================================= */

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 880px;
  margin: var(--s-10) auto 0;
  padding: var(--s-5) 0;
  border-top: 2px solid var(--text-primary);
  border-bottom: 1px solid var(--border-soft);
}
.proof-item {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--s-4);
}
.proof-item + .proof-item { border-left: 1px solid var(--border-soft); }
.proof-num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--text-primary);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.proof-label {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  line-height: 1.4;
}
@media (max-width: 640px) {
  .proof-strip { grid-template-columns: 1fr; gap: var(--s-4); }
  .proof-item + .proof-item { border-left: none; border-top: 1px solid var(--border-subtle); padding-top: var(--s-4); }
  .proof-num { font-size: 1.5rem; }
}

/* =========================================================
   Question of the day — the live briefing card
   ========================================================= */

.qotd-card {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-6);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--text-primary);
  border-radius: var(--r-md);
}
.qotd-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
}
.qotd-stem {
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: var(--s-5);
}
.qotd-note { color: var(--text-tertiary); font-size: 0.9rem; margin-bottom: var(--s-5); }
.qotd-opts { display: flex; flex-direction: column; gap: var(--s-2); }
.qotd-opt {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.qotd-opt:hover:not(:disabled) {
  border-color: var(--text-primary);
  color: var(--text-primary);
  transform: translateX(2px);
}
.qotd-opt:disabled { cursor: default; opacity: 0.7; }
.qotd-opt.correct {
  border-color: var(--emerald);
  background: var(--emerald-soft);
  color: var(--text-primary);
  opacity: 1;
  animation: tradeFillUp 320ms var(--ease-out);
}
.qotd-opt.wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--text-primary);
  opacity: 1;
  animation: tradeFillDown 320ms var(--ease-out);
}
/* the executed trade — one flash, then a steady position */
@keyframes tradeFillUp {
  0% { background: var(--emerald-glow); }
  100% { background: var(--emerald-soft); }
}
@keyframes tradeFillDown {
  0% { background: var(--tan-glow); }
  100% { background: var(--tan-soft); }
}
.qotd-expl {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-soft);
  border-left: none;
  border-right: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.65;
}
.qotd-expl strong { color: var(--text-primary); }
.qotd-cta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 10px var(--s-6);
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast),
    border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-ink {
  background: var(--cta-bg);
  color: var(--cta-text);
  border-color: var(--cta-bg);
  box-shadow: var(--shadow-sm);
}
.btn-ink:hover:not(:disabled) { background: var(--cta-bg-hover); border-color: var(--cta-bg-hover); color: var(--cta-text); }

.btn-primary {
  background: var(--emerald);
  color: var(--text-on-emerald);
  border-color: var(--emerald-deep);
}
.btn-primary:hover:not(:disabled) { background: var(--emerald-deep); }

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-card-hover);
  border-color: var(--text-tertiary);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-strong);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

/* Guide path — the emerald "read first" alternative on the year/subject
   flow. Emerald = progress, so the reading route wears it; tan stays
   exclusive to the practice CTA. Hairline border, neutral lift on hover —
   the ink CTA carries emphasis. */
.btn-guide {
  background: transparent;
  color: var(--emerald);
  border-color: var(--emerald);
}
.btn-guide:hover:not(:disabled) {
  background: var(--emerald-soft);
  color: var(--emerald);
  border-color: var(--emerald);
  box-shadow: var(--shadow-lg);
}
.btn-guide svg { width: 16px; height: 16px; flex-shrink: 0; }

.guide-path {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-8);
}
.guide-path-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.btn:active:not(:disabled) { transform: translateY(1px); }

.btn-lg { padding: 13px var(--s-8); font-size: 1rem; }
.btn-sm { padding: 6px var(--s-4); font-size: 0.84rem; }

.btn-row {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-4);
}

/* =========================================================
   Pills — square mono lots, not capsules
   ========================================================= */

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  margin: var(--s-6) 0;
}
.pill {
  padding: 5px var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast);
  font-variant-numeric: tabular-nums;
}
.pill:hover { color: var(--text-primary); border-color: var(--text-primary); }
.pill.active {
  background: var(--text-primary);
  color: var(--bg-base);
  border-color: var(--text-primary);
}
/* "MCQ only" toggle on count pickers + counts a theme's MCQ bank can't fill */
button.pill.mcq-toggle { appearance: none; }
.pill-row.start.mcq-toggle-row { margin-bottom: var(--s-3); }
.pill.pill-disabled { opacity: 0.4; pointer-events: none; }

/* =========================================================
   Choice grid — briefings, not cards
   ========================================================= */

.choice-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 720px) { .choice-grid { grid-template-columns: 1fr; } }
.choice-grid.duo {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 980px;
  margin: 0 auto;
}
.choice-grid.duo .choice-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--s-2) var(--s-8) var(--s-2) 0;
}
.choice-grid.duo .choice-card + .choice-card {
  border-left: 1px solid var(--border-strong);
  padding-left: var(--s-8);
  padding-right: 0;
}
.choice-grid.duo .choice-card:hover { background: var(--bg-surface); }
@media (max-width: 860px) {
  .choice-grid.duo { grid-template-columns: 1fr; }
  .choice-grid.duo .choice-card { padding: var(--s-5) 0; }
  .choice-grid.duo .choice-card + .choice-card {
    border-left: none;
    border-top: 1px solid var(--border-strong);
    padding-left: 0;
  }
}

.choice-grid.three { max-width: 1080px; }
.choice-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-grid.four  { max-width: 1180px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .choice-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .choice-grid.three { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .choice-grid.four { grid-template-columns: 1fr; } }

.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--s-6) var(--s-6) var(--s-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--emerald);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.choice-card:hover { background: var(--bg-elevated); border-color: var(--border-strong); border-top-color: var(--emerald); }
.choice-card:hover .arrow { transform: translateX(4px); color: var(--emerald); }
.choice-card.tan { border-top-color: var(--tan-deep); }
.choice-card.tan:hover { border-top-color: var(--tan-deep); }
.choice-card.tan:hover .arrow { color: var(--emerald); }

.cc-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tan-deep);
  margin-bottom: var(--s-3);
}
.choice-card.emerald-tag .cc-tag { color: var(--emerald); }

.cc-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: var(--s-3);
  color: var(--text-primary);
}

.cc-desc {
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.55;
  margin-bottom: var(--s-5);
  flex: 1;
}

.cc-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  list-style: none;
}
.cc-bullets li {
  font-size: 0.86rem;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}
.cc-bullets li::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-top: 7px;
  background: var(--tan);
  flex-shrink: 0;
}
.choice-card.emerald-tag .cc-bullets li::before { background: var(--emerald); }
.choice-card .cc-bullets { margin-top: var(--s-3); }

.cc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.arrow {
  display: inline-flex;
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast);
  color: var(--text-tertiary);
}
.arrow svg { display: block; }

.choice-card.compact { padding: var(--s-5); }
.choice-card.compact .cc-title { font-size: 1.3rem; }
.choice-card.compact .cc-desc { font-size: 0.88rem; }

/* =========================================================
   Sections — rubric heads set flush left like a front sheet
   ========================================================= */

.section { margin-top: var(--s-12); }

.section-head {
  text-align: left;
  margin-bottom: var(--s-8);
  padding-top: var(--s-5);
  border-top: 2px solid var(--text-primary);
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-bottom: var(--s-3);
  letter-spacing: -0.01em;
}
.section-head h2 em { color: inherit; font-style: italic; }
.section-head p {
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0;
}

.section-head.rubric { text-align: left; }
.section-head.rubric p { margin: 0; }
.section-head .kicker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s-4);
}
.section-head .kicker b { font-weight: 600; color: var(--tan-deep); }
.section-head .kicker::after {
  content: '';
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: var(--border-strong);
}

/* =========================================================
   Ledger — one wide proof panel + a ruled index of tools
   ========================================================= */

.ledger {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-10);
  align-items: start;
  max-width: 1080px;
}
.ledger-feature {
  padding: var(--s-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--text-primary);
  border-radius: var(--r-md);
}
.ledger-feature h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.ledger-feature p { color: var(--text-secondary); font-size: 0.94rem; }
.ledger-rows { display: grid; border-top: 2px solid var(--text-primary); }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(170px, 2fr) 3fr;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-2);
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--t-fast);
}
.ledger-row:hover { background: var(--bg-surface); }
.lr-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--text-primary);
}
.ledger-row:hover .lr-title { text-decoration: underline; text-underline-offset: 3px; }
.lr-desc { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }
@media (max-width: 860px) {
  .ledger { grid-template-columns: 1fr; gap: var(--s-6); }
  .ledger-row { grid-template-columns: 1fr; gap: var(--s-1); }
}
.ao-mini { margin-top: var(--s-4); display: grid; gap: var(--s-2); max-width: 420px; }
.ao-mini-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-tertiary);
}
.ao-mini-bar {
  display: block;
  height: 5px;
  background: var(--border-subtle);
  overflow: hidden;
}
.ao-mini-bar span {
  display: block;
  height: 100%;
  background: var(--emerald);
}

/* =========================================================
   Quiz — the answer sheet
   ========================================================= */

.quiz-topbar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}
.qt-progress {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.qt-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border-subtle);
  overflow: hidden;
}
.qt-progress-fill {
  height: 100%;
  background: var(--text-primary);
  transition: width 480ms var(--ease-out);
}
.qt-progress-text {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.qt-meta {
  display: flex;
  gap: var(--s-4);
  font-size: 0.84rem;
  color: var(--text-secondary);
  align-items: center;
}
.qt-meta .item { display: flex; align-items: center; gap: var(--s-2); }
.qt-meta .item .v {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Quiz topbar micro-labels (Elapsed / Time left) */
.qt-meta .item > span:first-child {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.timer-danger { color: var(--danger) !important; font-weight: 600; }

.q-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--text-primary);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-8) var(--s-6);
  animation: cardIn 340ms var(--ease-out) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.q-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
.tag.theme { color: var(--tan-deep); border-color: var(--tan-deep); }
.tag.type-mcq { color: var(--info); border-color: var(--info); }
.tag.type-short { color: var(--emerald); border-color: var(--emerald); }
.tag.type-data { color: var(--warning); border-color: var(--warning); }
.tag.type-essay { color: var(--tan-light); border-color: var(--tan-light); }
.tag.marks { color: var(--text-primary); border-color: var(--border-strong); font-variant-numeric: tabular-nums; }
.tag.diff-easy { color: var(--emerald); }
.tag.diff-med { color: var(--warning); }
.tag.diff-hard { color: var(--tan-deep); }

.q-subtheme {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-tertiary);
  margin-bottom: var(--s-3);
  letter-spacing: 0.04em;
}

.q-stem {
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: var(--s-5);
  font-weight: 400;
}

/* Extract — case material ruled top and bottom, like FT source matter */
.q-context {
  background: var(--bg-input);
  border-top: 2px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-4) 0 var(--s-5);
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.65;
}
.q-context strong { color: var(--text-primary); font-weight: 600; font-style: normal; }

/* MCQ options */
.options {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.opt {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  position: relative;
}
.opt:hover:not(.locked) {
  border-color: var(--text-primary);
  transform: translateX(2px);
}
.opt.selected {
  border-color: var(--text-primary);
  background: var(--bg-card-hover);
}
.opt.locked { cursor: default; }
.opt.correct {
  border-color: var(--success);
  background: var(--success-soft);
  animation: tradeFillUp 320ms var(--ease-out);
}
.opt.wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
  animation: tradeFillDown 320ms var(--ease-out);
}

.opt-letter {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: all var(--t-fast);
}
.opt.selected .opt-letter {
  background: var(--text-primary);
  color: var(--bg-base);
  border-color: var(--text-primary);
}
.opt.correct .opt-letter {
  background: var(--success);
  color: var(--text-on-emerald);
  border-color: var(--success);
}
.opt.wrong .opt-letter {
  background: var(--danger);
  color: var(--bg-base);
  border-color: var(--danger);
}

.opt-text {
  flex: 1;
  font-size: 0.96rem;
  color: var(--text-primary);
  line-height: 1.55;
}

/* Written answer */
.answer-input {
  width: 100%;
  min-height: 180px;
  padding: var(--s-4) var(--s-5);
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.65;
  resize: vertical;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.answer-input:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-soft);
}
.answer-input::placeholder { color: var(--text-muted); }

.answer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-2);
  font-size: 0.78rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Feedback panel */
.feedback {
  margin-top: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  animation: feedbackIn 420ms var(--ease-out) both;
}
@keyframes feedbackIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.feedback.correct { border-top: 3px solid var(--success); }
.feedback.wrong { border-top: 3px solid var(--danger); }
.feedback.neutral { border-top: 3px solid var(--text-primary); }

.feedback-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.feedback-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1rem;
}
.feedback.correct .feedback-icon { background: var(--success); color: var(--text-on-emerald); }
.feedback.wrong .feedback-icon { background: var(--danger); color: var(--bg-base); }
.feedback.neutral .feedback-icon { background: transparent; color: var(--tan-deep); border: 1px solid var(--border-strong); }
.feedback.neutral .feedback-icon svg { width: 16px; height: 16px; }

.feedback-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
}
.feedback.correct .feedback-title { color: var(--success); }
.feedback.wrong .feedback-title { color: var(--danger); }

.feedback-body {
  color: var(--text-secondary);
  font-size: 0.97rem;
  line-height: 1.7;
}
.feedback-body strong { color: var(--text-primary); font-weight: 600; }

.feedback-section {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
}
.feedback-section h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--tan-deep);
  margin-bottom: var(--s-2);
}

/* AO bars — earnings line items: label, run, right-aligned figure */
.ao-grid {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.ao-row {
  display: grid;
  grid-template-columns: 110px 1fr 56px;
  align-items: center;
  gap: var(--s-3);
  font-size: 0.88rem;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
}
.ao-row:last-child { border-bottom: none; }
.ao-label { color: var(--text-secondary); font-weight: 500; }
.ao-bar {
  height: 5px;
  background: var(--border-subtle);
  overflow: hidden;
}
.ao-bar-fill {
  height: 100%;
  background: var(--emerald);
  transition: width 600ms var(--ease-out);
}
.ao-val {
  font-family: var(--font-mono);
  text-align: right;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

/* Model answer */
.model {
  background: var(--bg-input);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s-5);
  margin-top: var(--s-4);
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.model p { margin-bottom: var(--s-3); }
.model p:last-child { margin-bottom: 0; }
.model strong { color: var(--text-primary); font-weight: 600; }
.model .ao-marker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--tan-deep);
  border: 1px solid var(--tan);
  padding: 1px 7px;
  border-radius: var(--r-sm);
  margin-right: var(--s-2);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Callouts — rubric-titled hairline frames */
.callout {
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
}
.callout-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tan-deep);
  margin-bottom: var(--s-2);
}
.callout-body { color: var(--text-secondary); line-height: 1.6; }
.callout-body strong { color: var(--text-primary); }

.q-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-6);
  gap: var(--s-3);
  flex-wrap: wrap;
}
.q-controls-right { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* Level descriptors */
.level-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.level-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
}
.level-row.active {
  border-color: var(--emerald);
  background: var(--emerald-soft);
}
.level-band {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--tan-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid var(--border-soft);
  padding-right: var(--s-3);
  font-variant-numeric: tabular-nums;
}
.level-row.active .level-band { color: var(--emerald); }
.level-band .range {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-top: 2px;
}
.level-row.active .level-band .range { color: var(--emerald); }
.level-content { display: flex; flex-direction: column; gap: 4px; }
.level-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
}
.level-criteria {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Length meter */
.length-meter { margin: var(--s-2) 0; }
.length-bar {
  height: 4px;
  background: var(--border-subtle);
  overflow: hidden;
}
.length-fill {
  height: 100%;
  transition: width 540ms var(--ease-out);
}
.length-fill.low { background: var(--warning); }
.length-fill.good { background: var(--success); }
.length-fill.high { background: var(--warning); }
.length-text {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-tertiary);
  margin-top: var(--s-1);
  font-variant-numeric: tabular-nums;
}
.length-hint { font-size: 0.84rem; margin-top: var(--s-2); }
.length-hint.low { color: var(--warning); }
.length-hint.good { color: var(--success); }
.length-hint.high { color: var(--warning); }

/* Self-mark — award the position */
.self-mark-block {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.self-mark-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-3);
}
/* Rubric headers inside marking blocks — match .feedback-section h4 */
.ai-mark-head strong,
.self-mark-head strong {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--tan-deep);
}
.self-mark-current {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--tan-deep);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.self-mark-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border-strong);
  outline: none;
  cursor: pointer;
  margin: var(--s-2) 0 var(--s-3);
}
.self-mark-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  background: var(--tan);
  cursor: pointer;
  border: 2px solid var(--bg-base);
}
.self-mark-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  background: var(--tan);
  cursor: pointer;
  border: 2px solid var(--bg-base);
}
.self-mark-band {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  padding: var(--s-2);
  border-top: 1px solid var(--border-subtle);
  min-height: 30px;
}
.self-mark-band strong { color: var(--emerald); }

/* legacy self-mark inline variant */
.self-mark {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-input);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.self-mark label { font-size: 0.88rem; color: var(--text-secondary); font-weight: 500; }
.self-mark input {
  width: 70px;
  padding: var(--s-2) var(--s-3);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: center;
}
.self-mark input:focus { outline: none; border-color: var(--emerald); }
.self-mark .max { color: var(--text-tertiary); font-family: var(--font-mono); }

/* =========================================================
   Results — the earnings report
   ========================================================= */

.results-hero {
  text-align: center;
  padding: var(--s-8) 0 var(--s-6);
}
.results-score {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 8vw, 5.8rem);
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.results-pct { font-size: 0.45em; color: var(--tan-deep); }
/* Mono meta slug under the score — set like every other data slug */
.results-meta {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
/* Question-of-the-day verdict — word score + mono subline */
.results-score.daily { font-size: clamp(2.4rem, 6vw, 3.2rem); }
/* Word verdicts ("Deck cleared.") — shared word-sized score modifier */
.results-score--word { font-size: clamp(2.6rem, 7vw, 3.4rem); }
.daily-verdict-sub {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* Centred action row under a hero/verdict (shared) */
.view-actions { display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap; }
.results-grade {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--text-secondary);
  margin-top: var(--s-4);
}
/* the grade — an examiner's stamp, not a gradient pill */
.results-grade-tag {
  font-family: var(--font-mono);
  font-style: normal;
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  color: var(--tan-deep);
  border: 2px solid currentColor;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 1.15rem;
  margin-left: var(--s-3);
  letter-spacing: 0.06em;
  transform: rotate(-2deg);
}

/* One ruled ledger strip, not four identical cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: var(--s-8) 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-surface);
}
.stat-card {
  padding: var(--s-4) var(--s-5);
  text-align: left;
  border-left: 1px solid var(--border-subtle);
}
.stat-card:first-child { border-left: none; }
.stat-num {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.stat-num.emerald { color: var(--emerald); }
.stat-num.tan { color: var(--tan-deep); }
.stat-num.danger { color: var(--danger); }
.stat-label {
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: var(--s-1);
}
a.stat-card-link {
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast) var(--ease-out);
}
a.stat-card-link:hover { background: var(--bg-card-hover); }

.dashboard-block {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6) var(--s-5);
  margin-top: var(--s-5);
}
.dashboard-block h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: var(--s-4);
}

/* Standard intro line inside a dashboard block / rubric section */
.block-note {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: var(--s-4);
}
.block-note.muted { color: var(--text-tertiary); margin-bottom: 0; }

.topic-bar-row {
  display: grid;
  grid-template-columns: 1fr 200px 70px;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.topic-bar-row:last-child { border-bottom: none; }
.topic-bar-row .name { font-size: 0.94rem; color: var(--text-primary); }
.topic-bar-row .name .sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-tertiary);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.topic-bar-row .bar {
  height: 5px;
  background: var(--border-subtle);
  overflow: hidden;
}
.topic-bar-row .bar-fill { height: 100%; transition: width 800ms var(--ease-out); }
.topic-bar-row .bar-fill.high { background: var(--emerald); }
.topic-bar-row .bar-fill.mid { background: var(--warning); }
.topic-bar-row .bar-fill.low { background: var(--danger); }
.topic-bar-row .pct {
  font-family: var(--font-mono);
  text-align: right;
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Review item — the examiner's margin survives the redesign */
.review-item {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-5) var(--s-4) 58px;
  margin-bottom: var(--s-2);
}
.review-item::before {
  content: '–';
  position: absolute;
  left: 0;
  top: 14px;
  width: 42px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
}
.review-item::after {
  content: '';
  position: absolute;
  left: 42px;
  top: var(--s-2);
  bottom: var(--s-2);
  width: 1px;
  background: var(--border-soft);
}
.review-item.correct::before { content: '✓'; color: var(--success); }
.review-item.partial::before { content: '½'; color: var(--warning); }
.review-item.wrong::before { content: '✗'; color: var(--danger); }
.review-item summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 500;
  list-style: none;
  font-size: 0.94rem;
}
.review-item summary::-webkit-details-marker { display: none; }
.review-item summary .review-title { flex: 1; }
.review-item .tag.marks { font-size: 0.62rem; }
/* Status word — colour driven by the parent state class */
.review-status {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
}
.review-item.correct .review-status { color: var(--success); }
.review-item.partial .review-status { color: var(--warning); }
.review-item.wrong .review-status { color: var(--danger); }
.review-item summary::before {
  content: '▸';
  color: var(--text-tertiary);
  transition: transform var(--t-fast);
}
.review-item[open] summary::before { transform: rotate(90deg); }
.review-item .review-body {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
.review-item .review-body .your-answer {
  background: var(--bg-input);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  margin-top: var(--s-2);
  white-space: pre-wrap;
  font-size: 0.88rem;
}

/* =========================================================
   Toast
   ========================================================= */

.toast {
  position: fixed;
  bottom: var(--s-6);
  right: var(--s-6);
  padding: var(--s-3) var(--s-5);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 0.9rem;
  box-shadow: var(--shadow-lg);
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
  transition: all var(--t-med) var(--ease-out);
  z-index: 100;
  max-width: 360px;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger); }

/* =========================================================
   Footer — the colophon
   ========================================================= */

.footer {
  padding: var(--s-8) var(--s-8);
  border-top: 1px solid var(--border-soft);
  position: relative;
  margin-top: var(--s-16);
  background: var(--bg-deep);
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: left;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-bottom: var(--s-2);
  font-size: 0.78rem;
}
.footer-links a {
  color: var(--text-tertiary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
.footer-links a:hover { color: var(--text-secondary); }
.footer-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}
.footer-meta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s-2);
}
.footer-fine {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* =========================================================
   Revision guide — broadsheet reading measure
   ========================================================= */

/* Subtopic contents — ruled editorial groups, like an exam front sheet */
.guide-group { margin-top: var(--s-8); }
.guide-group-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-strong);
}
.guide-group-head .ggh-id {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--tan-deep);
  font-variant-numeric: tabular-nums;
}
.guide-group-head h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
}
.guide-topic-list { display: grid; gap: var(--s-2); }

.guide-topic-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  transition: background var(--t-fast), transform var(--t-fast);
  text-decoration: none;
  color: var(--text-primary);
}
.guide-topic-row:last-child { border-bottom: none; }
.guide-topic-row:hover { background: var(--bg-card-hover); transform: translateX(3px); }
.guide-topic-row:hover .arrow { color: var(--emerald); }

.guide-topic-id {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--tan-deep);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.guide-topic-title {
  font-size: 0.98rem;
  color: var(--text-primary);
  line-height: 1.45;
}
.guide-topic-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-tertiary);
  font-size: 0.78rem;
  font-family: var(--font-mono);
}

.guide-article { max-width: 760px; margin: 0 auto; }

.guide-article-head {
  text-align: left;
  margin-bottom: var(--s-10);
  padding-bottom: var(--s-5);
  border-bottom: 3px double var(--border-strong);
}
.guide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s-3);
}
.guide-eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--tan);
}
.guide-article-head h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin-bottom: var(--s-3);
}
.guide-meta {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.guide-body {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-secondary);
}
.guide-body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--text-primary);
  margin: var(--s-10) 0 var(--s-4);
  letter-spacing: -0.01em;
}
.guide-body h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin: var(--s-6) 0 var(--s-3);
}
.guide-body h4 {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-primary);
  margin: var(--s-5) 0 var(--s-2);
}
.guide-body p { margin-bottom: var(--s-4); }
.guide-body p:last-child { margin-bottom: 0; }
.guide-body ul, .guide-body ol { margin: 0 0 var(--s-4) var(--s-5); padding: 0; }
.guide-body li { margin-bottom: var(--s-2); line-height: 1.65; }
.guide-body li::marker { color: var(--tan-deep); }
.guide-body strong { color: var(--text-primary); font-weight: 600; }
.guide-body em { color: inherit; font-style: italic; }
.guide-body code {
  font-family: var(--font-mono);
  background: var(--bg-input);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-size: 0.9em;
  color: var(--info);
}
.guide-body a {
  color: var(--info);
  text-decoration: underline;
  text-decoration-color: var(--info-soft);
  text-underline-offset: 3px;
}
.guide-body a:hover { text-decoration-color: var(--info); }

/* Guide callouts — rubric-titled frames, extracts ruled like case studies */
.guide-body .def-box {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: var(--s-5);
  margin: var(--s-5) 0;
}
.guide-body .def-box .def-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tan-deep);
  margin-bottom: var(--s-2);
}
.guide-body .def-box .def-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}

.guide-body .example-box {
  background: var(--emerald-soft);
  border: none;
  border-top: 2px solid var(--emerald);
  border-bottom: 2px solid var(--emerald);
  border-radius: 0;
  padding: var(--s-5);
  margin: var(--s-5) 0;
}
.guide-body .example-box .ex-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: var(--s-2);
}

.guide-body .warn-box {
  background: var(--warning-soft);
  border: none;
  border-top: 2px solid var(--warning);
  border-bottom: 2px solid var(--warning);
  border-radius: 0;
  padding: var(--s-5);
  margin: var(--s-5) 0;
}
.guide-body .warn-box .warn-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warning);
  margin-bottom: var(--s-2);
}

.guide-body .formula {
  display: block;
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-4) 0;
  font-family: var(--font-mono);
  font-size: 0.98rem;
  color: var(--info);
  text-align: center;
  letter-spacing: 0.02em;
}
.guide-body .formula .lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s-2);
}

.guide-body .compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-4) 0;
  font-size: 0.94rem;
  background: var(--bg-card);
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-top: 2px solid var(--text-primary);
}
.guide-body .compare-table th,
.guide-body .compare-table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.guide-body .compare-table th {
  background: var(--bg-input);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}
.guide-body .compare-table tr:last-child td { border-bottom: none; }
.guide-body .compare-table td strong { color: var(--text-primary); }

.guide-body .diagram-box {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  text-align: center;
}
.guide-body .diagram-box svg { max-width: 100%; height: auto; }
.guide-body .diagram-caption {
  font-size: 0.82rem;
  color: var(--text-tertiary);
  margin-top: var(--s-3);
  font-style: italic;
}

/* Diagrams hardcode the old palette's greys/mint — remap into this one */
.diagram-box svg [stroke="#a1a8b3"] { stroke: var(--text-tertiary); }
.diagram-box svg [fill="#a1a8b3"] { fill: var(--text-tertiary); }
.diagram-box svg [stroke="#7c828d"] { stroke: var(--text-muted); }
.diagram-box svg [fill="#7c828d"] { fill: var(--text-muted); }
.diagram-box svg [fill="#f5f6f8"] { fill: var(--text-primary); }
.diagram-box svg [stroke="#34d399"] { stroke: var(--emerald); }
.diagram-box svg [fill="#34d399"] { fill: var(--emerald); }
.diagram-box svg [stroke="#10b981"] { stroke: var(--emerald); }
.diagram-box svg [fill="#10b981"] { fill: var(--emerald); }
.diagram-box svg [stroke="#d4a574"] { stroke: var(--tan); }
.diagram-box svg [fill="#d4a574"] { fill: var(--tan); }

.def-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.def-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-5);
}
.def-card .def-term {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}
.def-card .def-body {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Exam tips — examiner's margin notes: neutral ruled margin, mono tan marks */
.tip-list {
  list-style: none;
  margin: var(--s-3) 0 0;
  counter-reset: tip;
}
.tip-list li {
  position: relative;
  margin: 0;
  padding: var(--s-3) 0 var(--s-3) var(--s-10);
  border-left: 1px solid var(--border-soft);
  line-height: 1.65;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.tip-list li::before {
  counter-increment: tip;
  content: counter(tip, decimal-leading-zero);
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.65rem;
  color: var(--tan-deep);
}

.guide-section {
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-soft);
}
.guide-section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: var(--s-4);
}

.guide-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 3px double var(--border-strong);
}
.guide-nav-link {
  padding: var(--s-4) var(--s-5);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.guide-nav-link:hover { border-color: var(--emerald); }
.guide-nav-link.next { text-align: right; }
.guide-nav-link .lbl {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tan-deep);
  font-weight: 600;
}
.guide-nav-link .ttl { color: var(--text-primary); font-size: 0.96rem; }

/* =========================================================
   AI marking
   ========================================================= */

.ai-mark-block {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.ai-mark-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.ai-mode-badge {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  color: var(--text-tertiary);
}
.ai-mode-badge.live { color: var(--success); border-color: var(--success); }
.ai-mode-badge.mock { color: var(--warning); border-color: var(--warning); }

.ai-mark-sub { color: var(--text-secondary); font-size: 0.86rem; margin-bottom: var(--s-4); }
.ai-mark-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.ai-settings {
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
}
.ai-settings label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: var(--s-2);
}
.ai-settings input {
  width: 100%;
  padding: var(--s-3);
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin-bottom: var(--s-3);
}
.ai-settings input:focus { outline: none; border-color: var(--emerald); }
.ai-settings-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ai-settings-hint { margin-top: var(--s-3); font-size: 0.78rem; color: var(--text-tertiary); }
.ai-settings-hint code {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--tan-deep);
}

.ai-loading {
  margin-top: var(--s-4);
  padding: var(--s-4);
  color: var(--text-secondary);
  font-size: 0.88rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
}
.ai-dots::after {
  content: '';
  animation: aiDots 1.2s steps(4, end) infinite;
}
@keyframes aiDots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

.ai-error {
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--tan-soft);
  border: 1px solid var(--tan);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: 0.88rem;
}
.ai-error-hint { margin-top: var(--s-2); color: var(--text-secondary); font-size: 0.8rem; }

.ai-result {
  margin-top: var(--s-4);
  padding: var(--s-5);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--text-primary);
  border-radius: var(--r-sm);
}
.ai-result-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.ai-score {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--tan-deep);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ai-score span { font-size: 1.1rem; color: var(--text-tertiary); }
.ai-score-meta { flex: 1; min-width: 140px; }
.ai-score-pct { font-weight: 600; font-size: 0.92rem; }
.ai-score-src { color: var(--text-tertiary); font-size: 0.74rem; font-family: var(--font-mono); }

.ai-list { margin-top: var(--s-4); }
.ai-list h5 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.ai-list.good h5 { color: var(--success); }
.ai-list.fix h5 { color: var(--warning); }
.ai-list.missed h5 { color: var(--danger); }
.ai-list ul { list-style: none; display: grid; gap: var(--s-2); }
.ai-list li {
  font-size: 0.88rem;
  color: var(--text-secondary);
  padding-left: var(--s-4);
  position: relative;
}
.ai-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--text-tertiary);
}
.ai-list.good li::before { content: '✓'; color: var(--success); }
.ai-list.fix li::before { content: '→'; color: var(--warning); }

.ai-summary {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: 0.8rem;
  font-style: italic;
}

.ai-quota {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--tan-deep);
  border: 1px solid var(--tan);
  padding: 2px 9px;
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ai-exhausted { border-color: var(--border-strong); }
.ai-exhausted .btn { margin-top: var(--s-2); }

.ai-followup { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border-subtle); }
.ai-followup label { display: block; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: var(--s-2); }
.ai-fu-row { display: flex; gap: var(--s-2); }
.ai-fu-row input {
  flex: 1;
  padding: 0.55rem 0.8rem;
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9rem;
}
.ai-fu-row input:focus { outline: none; border-color: var(--emerald); }
.ai-fu-exchange { font-size: 0.9rem; }
.ai-fu-q { color: var(--text-tertiary); font-style: italic; margin-bottom: var(--s-2); }
.ai-fu-a {
  color: var(--text-secondary);
  line-height: 1.65;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-input);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.ai-fu-note { margin-top: var(--s-2); font-size: 0.72rem; color: var(--text-muted); }

/* =========================================================
   Auth modal — a short official form
   ========================================================= */

.auth-overlay[hidden] { display: none !important; }
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: var(--scrim);
}

.auth-card {
  position: relative;
  width: min(420px, 100%);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  box-shadow: var(--shadow-xl);
}
.auth-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: var(--s-2);
}
.auth-sub {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: var(--s-6);
}
.auth-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-4);
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.auth-close:hover { color: var(--text-primary); }
.auth-wide { width: 100%; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

.auth-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--s-2);
}

#authEmail {
  width: 100%;
  padding: 0.7rem 0.9rem;
  margin-bottom: var(--s-3);
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font: inherit;
}
#authEmail:focus { outline: none; border-color: var(--emerald); }

.auth-hint {
  min-height: 1.2em;
  margin-top: var(--s-3);
  font-size: 0.85rem;
  color: var(--text-tertiary);
}
.auth-hint.error { color: var(--danger); }
.auth-hint.success { color: var(--success); }

/* =========================================================
   My Hub — the holdings desk
   ========================================================= */

.hub-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--s-8);
  margin-bottom: var(--s-8);
  flex-wrap: wrap;
}
.hub-head h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: var(--s-2) 0 var(--s-3);
}
.hub-head h1 .accent { font-style: italic; color: var(--emerald); }
.hub-head .hero-sub { margin: 0; max-width: 560px; }

/* Inline accent text link — mid-sentence links to pricing/upsell */
.link-accent { color: var(--emerald-deep); }
.link-accent:hover { text-decoration: underline; text-underline-offset: 2px; }

/* The lead story — pinned under a double claret rule */
.hub-jump {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
  min-width: 260px;
  padding: var(--s-5) var(--s-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  position: relative;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.hub-jump::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-top: 3px solid var(--tan);
  border-bottom: 1px solid var(--tan);
}
.hub-jump:hover { background: var(--bg-elevated); border-color: var(--border-strong); }
.hub-jump .hj-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tan-deep);
  font-weight: 600;
}
.hub-jump .hj-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
}
.hub-jump .hj-cta { font-size: 0.86rem; color: var(--text-secondary); }

.hub-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  font-size: 0.9rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.free-nudge { border-color: var(--tan-deep); margin-bottom: var(--s-8); }
.trial-nudge { border-color: var(--emerald); margin-bottom: var(--s-8); }
.hub-mistakes { border-color: var(--warning); }

.hub-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: start;
}
.hub-two-col .dashboard-block { margin-bottom: var(--s-6); }

.hub-block-hint {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  text-transform: none;
  margin-left: var(--s-2);
}

.hub-empty-line { color: var(--text-tertiary); font-size: 0.9rem; }

.hub-sub-grid { display: flex; flex-direction: column; gap: var(--s-3); }

.hub-sub-card {
  padding: var(--s-4) var(--s-5);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "pct name" "pct meta" "pct actions";
  column-gap: var(--s-5);
  row-gap: var(--s-1);
  align-items: center;
}
.hub-sub-pct {
  grid-area: pct;
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 600;
  min-width: 74px;
  text-align: center;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border-soft);
  padding-right: var(--s-4);
  font-variant-numeric: tabular-nums;
}
.hub-sub-pct span { font-size: 0.55em; color: var(--text-tertiary); }
.hub-sub-card.low .hub-sub-pct { color: var(--danger); }
.hub-sub-card.high .hub-sub-pct { color: var(--emerald); }
.hub-sub-name { grid-area: name; font-weight: 600; font-size: 0.95rem; }
.hub-sub-meta {
  grid-area: meta;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.hub-sub-actions { grid-area: actions; display: flex; gap: var(--s-2); margin-top: var(--s-2); }

.hub-mastery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
}
.hub-mastery-col h4,
.hub-papers-col h4 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--text-primary);
  color: var(--text-primary);
}
.hub-theme-row { cursor: pointer; transition: background var(--t-fast); }
.hub-theme-row:hover { background: var(--bg-card-hover); }

/* Papers — predicted grade as a mono mark in a ruled margin,
   like the front sheet of a marked script */
.paper-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.hub-papers-col .paper-row:last-child { border-bottom: none; }
.pr-grade {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--border-soft);
  color: var(--text-tertiary);
}
.pr-grade.tan { color: var(--tan-deep); }
.pr-grade.emerald { color: var(--emerald); }
.pr-grade.danger { color: var(--danger); }
.pr-name { font-weight: 600; font-size: 0.92rem; }
.pr-meta { font-size: 0.78rem; color: var(--text-tertiary); }

/* The clinic — AO diagnosis line (hub) and delta lead (results) */
.clinic-line {
  font-size: 1.02rem;
  color: var(--text-secondary);
  margin-bottom: var(--s-4);
  max-width: 62ch;
}
.clinic-delta {
  font-size: 1.02rem;
  color: var(--text-secondary);
  margin: var(--s-2) auto var(--s-3);
  max-width: 56ch;
}
.clinic-delta strong { color: var(--text-primary); font-family: var(--font-mono); }

/* Essay-plan marking — toggle + rubric note on the AI result */
.plan-toggle.on { color: var(--emerald); border-color: var(--emerald); }
.ai-plan-note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tan-deep);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
}

.hub-advice {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--tan-soft);
  border: none;
  border-top: 2px solid var(--tan);
  border-bottom: 2px solid var(--tan);
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* Revise next — the daily queue, ranked weakness × staleness */
.rn-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
}
.rn-list .rn-row:last-child { border-bottom: none; }
.rn-rank {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}
.rn-name { font-weight: 600; font-size: 0.92rem; color: var(--text-primary); }
.rn-meta { font-size: 0.78rem; color: var(--text-tertiary); }
.rn-pct {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  color: var(--text-secondary);
  min-width: 44px;
  text-align: right;
}
.rn-pct.low { color: var(--danger); }
.rn-pct.mid { color: var(--warning); }
.rn-pct.high { color: var(--success); }
.rn-locked { margin-top: var(--s-1); }

/* Landing — weakest-topic pointer under the question of the day */
.qotd-weakline {
  margin-top: var(--s-3);
  font-size: 0.88rem;
  text-align: left;
}

/* Recent sessions — the ledger */
.hub-session-row {
  display: grid;
  grid-template-columns: 84px 1fr auto 36px 52px;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.86rem;
}
.hub-session-row:last-child { border-bottom: none; }
.hs-when { color: var(--text-tertiary); font-size: 0.76rem; font-family: var(--font-mono); }
.hs-what span { color: var(--text-tertiary); }
.hs-score { font-family: var(--font-mono); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hs-grade {
  text-align: center;
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  border-radius: var(--r-sm);
  border: 1px solid currentColor;
  padding: 1px 0;
}
.hs-grade.tan { color: var(--tan-deep); }
.hs-grade.emerald { color: var(--emerald); }
.hs-grade.danger { color: var(--danger); opacity: 0.75; }
.hs-time { text-align: right; font-family: var(--font-mono); color: var(--text-tertiary); font-size: 0.76rem; }

/* Grade trajectory — your position, plotted */
.traj-chart {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 130;
  display: block;
  margin-top: var(--s-2);
  overflow: visible;
}
.traj-grid { stroke: var(--border-soft); stroke-width: 1; stroke-dasharray: 3 4; }
.traj-grid-label { fill: var(--text-muted); font-size: 9px; font-family: var(--font-mono); }
.traj-line { fill: none; stroke: var(--emerald); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.traj-area { fill: var(--emerald-soft); }
.traj-dot { fill: var(--emerald); stroke: var(--bg-surface); stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .traj-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: drawLine 1100ms var(--ease-out) 150ms forwards;
  }
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.traj-delta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: var(--s-2);
  text-transform: none;
}
.traj-delta.up { color: var(--emerald); }
.traj-delta.down { color: var(--danger); }
.traj-delta.flat { color: var(--text-tertiary); }

.hub-quick { display: flex; gap: var(--s-3); margin: var(--s-6) 0; flex-wrap: wrap; }

/* Exam countdown */
.hub-exam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
@media (max-width: 900px) { .hub-exam-grid { grid-template-columns: 1fr; } }
.he-days {
  font-family: var(--font-mono);
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.he-days span { font-size: 0.42em; color: var(--text-tertiary); font-weight: 400; }
.he-label { font-size: 0.85rem; color: var(--text-secondary); margin: var(--s-2) 0 var(--s-3); }
.he-change {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.he-change:hover { color: var(--text-secondary); }
.he-pace { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; }
.he-pace strong { color: var(--text-primary); }
.he-set-row { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-2); flex-wrap: wrap; }
.he-input {
  padding: 0.5rem 0.7rem;
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font: inherit;
  color-scheme: dark;
}
html[data-theme="light"] .he-input { color-scheme: light; }

.he-papers { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-3) 0; }
.he-paper {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  font-size: 0.82rem;
}
.he-paper.next { border-color: var(--emerald); background: var(--emerald-soft); }
.he-paper.sat { opacity: 0.45; }
.hp-name { color: var(--text-secondary); }
.hp-date { color: var(--text-tertiary); font-size: 0.74rem; white-space: nowrap; font-family: var(--font-mono); }
.hp-days {
  font-family: var(--font-mono);
  color: var(--tan-deep);
  font-size: 0.78rem;
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Milestones — earned stamps */
.ms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s-4);
}
.ms-card {
  padding: var(--s-4);
  text-align: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
}
.ms-card.unlocked { border: 1.5px solid var(--emerald); }
.ms-card.locked { opacity: 0.45; }
.ms-mark {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--tan-deep);
  line-height: 1;
  margin-bottom: var(--s-2);
}
.ms-card.locked .ms-mark { color: var(--text-muted); }
.ms-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.ms-sub {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-tertiary);
  margin-top: var(--s-1);
}
.ms-new {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-ink);
  background: var(--tan-deep);
  border-radius: var(--r-sm);
  vertical-align: middle;
}

@media (max-width: 900px) {
  .hub-two-col, .hub-mastery-grid { grid-template-columns: 1fr; }
  .hub-jump { width: 100%; }
}

/* =========================================================
   Flashcards — index cards from the desk
   ========================================================= */

/* Deck picker — ruled rows in the examiner's margin, not uniform buttons */
/* Due-today deck — the Leitner schedule's front door */
.flash-due {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.flash-due .fd-info { flex: 1 1 340px; }
.flash-due .fd-info .block-note { margin-bottom: 0; }

.flash-deck-list { display: flex; flex-direction: column; margin-bottom: var(--s-4); }
.flash-deck-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: background var(--t-fast);
}
.flash-deck-row:first-child { border-top: 1px solid var(--border-subtle); }
a.flash-deck-row:hover { background: var(--bg-elevated); }
.fdr-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tan-deep);
}
.fdr-name { flex: 1; font-size: 0.94rem; }
.flash-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin-left: var(--s-2);
}
.flash-deck-row .flash-count { margin-left: auto; }
.flash-deck-row.is-empty { opacity: 0.45; }
.flash-all { width: 100%; }

.flash-stage {
  perspective: 1400px;
  max-width: 640px;
  margin: var(--s-10) auto var(--s-6);
}
.flash-card {
  position: relative;
  display: grid; /* faces stack in one cell so the taller face sets the height */
  width: 100%;
  min-height: 320px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform var(--t-slow) var(--ease-out);
}
.flash-card.flipped { transform: rotateY(180deg); }
.flash-face {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-8);
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--text-primary);
  border-radius: var(--r-md);
  /* a ruled top line, like an index card */
  background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px);
  background-size: 100% 56px;
  background-position: 0 72px;
}
.flash-face.back { transform: rotateY(180deg); border-top-color: var(--tan-deep); }
.flash-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tan-deep);
  font-weight: 600;
}
.flash-term {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
}
.flash-def {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 480px;
}
.flash-hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
/* Mono meta slug on the deck-cleared verdict */
.flash-done-meta {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.flash-actions { display: flex; justify-content: center; gap: var(--s-4); }
.flash-actions .btn { min-width: 150px; }
.flash-actions .btn:disabled { opacity: 0.35; cursor: default; }
.key-hint {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-tertiary);
}
/* Touch devices: keyboard affordances are noise */
@media (hover: none) and (pointer: coarse) {
  .key-hint { display: none; }
}

/* =========================================================
   Pricing — set like a rate card
   ========================================================= */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  max-width: 1080px;
  margin: var(--s-8) auto 0;
  align-items: stretch;
}
@media (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; }
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-6) var(--s-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--border-strong);
  border-radius: var(--r-md);
}
.plan-card.hero-plan { border-color: var(--border-strong); border-top-color: var(--emerald); }

/* Ink stamp — pressed on the pass */
.pp-badge {
  position: absolute;
  top: -14px;
  right: var(--s-6);
  transform: rotate(-3deg);
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tan-deep);
  background: var(--bg-base);
  border: 1.5px solid currentColor;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.pp-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.pp-price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 2rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-5);
  line-height: 1.15;
}
.plan-card.hero-plan .pp-price { color: var(--emerald-deep); }
.pp-price span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin-top: var(--s-1);
}

.pp-pitch {
  font-size: 0.92rem;
  color: var(--text-secondary);
  font-style: italic;
  margin: calc(var(--s-3) * -1) 0 var(--s-4);
}
.pp-note {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  list-style: none;
  margin-top: var(--s-2);
}

.pp-urgency {
  margin: calc(var(--s-4) * -1) 0 var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tan-deep);
}

.pp-feats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  flex: 1;
}
.pp-feats li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
/* Each row's text lives in ONE flex child. Without the wrapper the
   flex li promotes <strong> and the trailing text node to separate
   flex items, which render as two side-by-side wrapping columns
   with a gap — the bad-break bug. min-width:0 lets long lines wrap
   inside the full remaining column width. */
.pp-feats li > span {
  flex: 1;
  min-width: 0;
}
.pt-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--emerald);
}
.pt-cross { color: var(--text-muted); }
/* The cross is a <span>, so the text-wrapper rule above would give it
   flex:1 and stretch it across the row, shoving the label right. Pin it
   to the same fixed icon column as .pt-check so dash rows align. */
.pp-feats li > .pt-cross {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
}

.pp-current {
  text-align: center;
  padding: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emerald);
  border: 1px solid var(--emerald);
  border-radius: var(--r-sm);
}

.pp-manage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: left;
}

.plan-table-wrap {
  overflow-x: auto;
  max-width: 1080px;
  margin: 0 auto;
  border: 1px solid var(--border-soft);
  border-top: 2px solid var(--text-primary);
  border-radius: var(--r-sm);
}
.plan-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.plan-table th, .plan-table td {
  padding: var(--s-4) var(--s-5);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.plan-table thead th {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-elevated);
  white-space: nowrap;
}
.plan-table tbody th { font-weight: 500; color: var(--text-primary); width: 30%; }
.plan-table td { color: var(--text-secondary); }
.plan-table tr:last-child th, .plan-table tr:last-child td { border-bottom: none; }
.plan-table .pt-check { margin: 0 4px 0 0; vertical-align: -2px; }

/* =========================================================
   About — editorial list + spec coverage set like a front sheet
   ========================================================= */

.about-prose {
  max-width: 640px;
}
.about-prose p {
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: var(--s-4);
}
.about-prose p:last-child { margin-bottom: 0; }

.about-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 640px;
}
.about-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.about-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-top: 0.55em;
  background: var(--tan);
  flex-shrink: 0;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
.spec-card {
  padding: var(--s-5) var(--s-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
.spec-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.spec-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.spec-row:last-child { border-bottom: none; }
.spec-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--tan-deep);
  flex-shrink: 0;
}

/* Landing pricing teaser — three quotes off the rate card */
.price-teaser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  max-width: 920px;
  margin: 0 auto;
}
.pt-cell {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-top: 2px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.pt-cell:hover { background: var(--bg-elevated); border-color: var(--border-strong); }
.pt-cell.pt-hero { border-top-color: var(--emerald); border-color: var(--emerald); }
.pt-tier {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tan-deep);
}
.pt-amount {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.pt-desc { font-size: 0.82rem; color: var(--text-tertiary); line-height: 1.45; }

/* Trial status */
.trial-status {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--s-8);
  align-items: center;
  max-width: 860px;
  margin: 0 auto var(--s-8);
  padding: var(--s-5) var(--s-8);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--emerald);
  border-radius: var(--r-md);
}
.ts-cell { display: flex; flex-direction: column; gap: var(--s-1); }
.ts-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tan-deep);
}
.ts-big {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}
.ts-dim { color: var(--text-tertiary); font-size: 0.9em; font-weight: 400; }
.ts-dots { display: inline-flex; gap: 5px; margin-top: 4px; }
.ts-dot { width: 8px; height: 8px; border-radius: 1px; background: var(--border-strong); }
.ts-dot.on { background: var(--emerald); }
.ts-bar {
  display: block;
  width: 120px;
  height: 4px;
  margin-top: 7px;
  background: var(--border-subtle);
  overflow: hidden;
}
.ts-fill { display: block; height: 100%; background: var(--emerald); }
.ts-note p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.ts-note strong { color: var(--text-primary); }
@media (max-width: 720px) {
  .trial-status { grid-template-columns: 1fr 1fr; }
  .ts-note { grid-column: 1 / -1; }
}

.trial-hello { text-align: center; }
.trial-hello .ts-eyebrow { display: block; margin-bottom: var(--s-3); }
.trial-hello h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.trial-hello-dots { justify-content: center; margin: 0 0 var(--s-5); display: flex; }

/* =========================================================
   Locked features
   ========================================================= */

.locked-blur {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
}
.locked-blur > .locked-content {
  filter: blur(7px) saturate(0.8);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.locked-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: linear-gradient(180deg, transparent, var(--scrim-soft));
  z-index: 2;
}
.locked-msg { text-align: center; max-width: 340px; }
.locked-icon {
  display: inline-grid;
  place-items: center;
  margin-bottom: var(--s-3);
  color: var(--tan-deep);
}
.locked-icon svg { width: 22px; height: 22px; }
.locked-msg strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.locked-msg p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: var(--s-4);
}
.btn .mini-lock { display: inline-flex; margin-left: 6px; opacity: 0.7; }
.btn .mini-lock svg { width: 12px; height: 12px; }

.quota-wall {
  border-top: 3px solid var(--tan);
  text-align: center;
  max-width: 560px;
  margin: var(--s-12) auto;
}
.quota-wall h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.quota-wall .locked-icon {
  display: grid;
  width: 40px;
  height: 40px;
  margin: 0 auto var(--s-3);
}

/* =========================================================
   Quiz builder + mocks
   ========================================================= */

.qb-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.qb-row.qb-wrap { max-height: 220px; overflow-y: auto; padding-right: var(--s-2); }
.qb-chip {
  padding: 5px var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.qb-chip:hover { border-color: var(--text-primary); color: var(--text-primary); }
.qb-chip.on {
  color: var(--bg-base);
  background: var(--text-primary);
  border-color: var(--text-primary);
  font-weight: 600;
}
.qb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 3px double var(--border-strong);
}
.qb-count {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--tan-deep);
  font-variant-numeric: tabular-nums;
}

/* Zero-results state — the count leaves the CTA role when empty */
.qb-count.none { color: var(--text-tertiary); }
.qb-hint { font-size: 0.85rem; color: var(--text-tertiary); margin: 0; }

/* Mono rubric label for filter/count groups — examiner's dash, not a serif heading */
.qb-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: var(--s-6) 0 var(--s-3);
}
.qb-label::before {
  content: '';
  width: 18px;
  height: 1.5px;
  background: var(--tan);
  flex-shrink: 0;
}
.qb-label:first-child { margin-top: 0; }

/* Shared row list used by the mocks + notes pickers */
.mock-list { display: grid; gap: var(--s-3); margin-top: var(--s-4); }

/* Left-set pill rows inside panels and rubric sections */
.pill-row.start { justify-content: flex-start; margin: 0; }

/* Year 12 question-count panels */
.count-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.count-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

/* Locked-preview ghost height (shared by builder / mocks / notes) */
.locked-ghost { min-height: 280px; }

.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.mock-row:hover { border-color: var(--text-primary); transform: translateX(2px); }

/* Predicted papers — uncurated rows sit inert, stamped, no hover lift */
.mock-row.is-curating { cursor: default; opacity: 0.75; }
.mock-row.is-curating:hover { border-color: var(--border-soft); transform: none; }
.curating-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tan-deep);
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-2);
  transform: rotate(-2deg);
  white-space: nowrap;
}
.mock-name { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; }
.mock-meta {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-tertiary);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Printable condensed notes
   ========================================================= */

.pn-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-8);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.pn-head { text-align: center; margin-bottom: var(--s-10); padding-bottom: var(--s-5); border-bottom: 3px double var(--border-strong); }
.pn-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}
.pn-head h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.8rem;
  margin-bottom: var(--s-2);
}
.pn-head p {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pn-topic { margin-bottom: var(--s-8); }
.pn-topic h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-4);
}
.pn-id {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--tan-deep);
  margin-right: var(--s-2);
}
.pn-terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-3); }
.pn-term dt { font-weight: 600; color: var(--text-primary); font-size: 0.9rem; }
.pn-term dd { color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5; }
.pn-tips { margin-top: var(--s-4); padding-left: var(--s-5); }
.pn-tips li { color: var(--text-secondary); font-size: 0.86rem; line-height: 1.6; margin-bottom: var(--s-1); }
.pn-foot {
  margin-top: var(--s-10);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Print styles live in the dedicated @media print block at the END of
   this file, so they always win the cascade (the old block here sat
   before the responsive rules and could be overridden). */

/* =========================================================
   Closing CTA + FAQ
   ========================================================= */

.closing-cta {
  text-align: left;
  margin-top: var(--s-20);
  padding: var(--s-10) 0 0;
  border-top: 3px double var(--border-strong);
}
.closing-cta-inner { max-width: 640px; }
.closing-cta h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-3);
  text-wrap: balance;
}
.closing-cta h2 em { color: inherit; font-style: italic; }
.closing-cta p { color: var(--text-secondary); margin-bottom: var(--s-8); }

.faq-section {
  display: grid;
  grid-template-columns: minmax(200px, 5fr) 7fr;
  gap: var(--s-10);
  align-items: start;
  border-top: 2px solid var(--text-primary);
  padding-top: var(--s-6);
}
.faq-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-3);
}
.faq-head p { color: var(--text-secondary); font-size: 0.94rem; }
@media (max-width: 860px) {
  .faq-section { grid-template-columns: 1fr; gap: var(--s-5); }
}
.faq-list { max-width: 720px; margin: 0; display: grid; gap: 0; }
.faq-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  overflow: hidden;
}
.faq-item summary {
  padding: var(--s-4) var(--s-8) var(--s-4) var(--s-2);
  font-weight: 600;
  font-size: 0.96rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color var(--t-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: var(--s-3);
  color: var(--tan-deep);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1.4;
  transition: transform var(--t-med) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--emerald-deep); }
.faq-item p {
  padding: 0 var(--s-8) var(--s-5) var(--s-2);
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* =========================================================
   Utilities
   ========================================================= */

.text-center { text-align: center; }
.text-emerald { color: var(--emerald); }
.text-tan { color: var(--tan-deep); }
.text-danger { color: var(--danger); }
.text-muted { color: var(--text-tertiary); }
.italic { font-style: italic; }
.serif { font-family: var(--font-display); }
.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }

.hero h1, .section-head h2, .cc-title { text-wrap: balance; }
.stat-num, .he-days, .hp-days, .hs-grade, .proof-num { font-variant-numeric: tabular-nums; }

/* Scroll reveal — landing compositions only; app views stay static */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .choice-grid.duo > *,
    .ledger-rows > * {
      animation: revealUp both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; row-gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-3); }
  .brand-name { font-size: 1.4rem; }
  .brand-strap { font-size: 0.54rem; }
  .topnav {
    order: 2;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding-bottom: 2px;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .navlink { white-space: nowrap; padding: 10px 12px; font-size: 0.84rem; }
  /* The Practice panel escapes the scroll row: full-width sheet under the bar */
  .nav-menu-panel {
    position: fixed;
    left: var(--s-3);
    right: var(--s-3);
    top: var(--panel-top, 96px);
    min-width: 0;
  }
  .app-shell { padding: var(--s-6) var(--s-4) var(--s-12); }
  .hero { padding: var(--s-8) 0 var(--s-6); }
  .q-card { padding: var(--s-5); }
  .q-stem { font-size: 1.02rem; }
  .opt { padding: var(--s-3) var(--s-4); }
  .topic-bar-row { grid-template-columns: 1fr 110px 50px; gap: var(--s-2); }
  .topic-bar-row .pct { font-size: 0.8rem; }
  .ao-row { grid-template-columns: 90px 1fr 46px; font-size: 0.82rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card { border-top: 1px solid var(--border-subtle); }
  .stat-card:nth-child(-n+2) { border-top: none; }
  .stat-card:nth-child(odd) { border-left: none; }
  .results-grade-tag { display: block; margin: var(--s-3) auto 0; max-width: 180px; transform: rotate(-1deg); }
  .tick { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .tape-track { animation: none; transform: none; }
  .traj-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

/* =========================================================
   Terms & Conditions — #/terms
   Legal text: plain body face, generous line-height, numbered
   clauses with the rubric-kicker convention. Sticky ToC on
   desktop only.
   ========================================================= */
.t-updated {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin-top: var(--s-2);
}
.terms-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-10);
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
  padding-top: var(--s-6);
}
/* Policy pages without a contents rail: one centred reading column */
.terms-layout.single { grid-template-columns: minmax(0, 1fr); }
.terms-layout.single .terms-body { margin: 0 auto; }
.terms-toc {
  position: sticky;
  top: var(--s-8);
}
.t-toc-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s-3);
}
.terms-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  border-left: 1px solid var(--border-subtle);
}
.terms-toc li { counter-increment: toc; }
.terms-toc a {
  display: block;
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: none;
  line-height: 1.4;
}
.terms-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--tan-deep);
  margin-right: var(--s-2);
}
.terms-toc a:hover { color: var(--text-primary); }
.terms-body {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 720px;
}
.t-clause { margin-bottom: var(--s-10); scroll-margin-top: var(--s-10); }
.t-clause-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
}
.t-clause-head .t-kicker b {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tan-deep);
  letter-spacing: 0.08em;
}
.t-clause-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.t-clause p { margin-bottom: var(--s-3); }
.t-clause p.t-sub { margin-left: var(--s-5); }
.t-clause strong { color: var(--text-primary); font-weight: 600; }
.t-confirm, .t-placeholder {
  font-family: var(--font-mono);
  font-size: 0.78em;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: transparent;
}
.t-confirm { color: var(--warning); border: 1px dashed var(--warning); }
.t-placeholder { color: var(--tan-deep); border: 1px dashed var(--tan); }

.plan-terms-note {
  text-align: left;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: var(--s-4) 0 var(--s-10);
}
.plan-terms-note a, .footer-fine a, .auth-terms a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plan-terms-note a:hover, .footer-fine a:hover, .auth-terms a:hover { color: var(--text-secondary); }
.auth-terms {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--s-3);
}

@media (max-width: 820px) {
  .terms-layout { grid-template-columns: 1fr; gap: var(--s-6); }
  .terms-toc { position: static; }
}

/* =========================================================
   PRINT — revision-guide topics + condensed notes
   Kept at the END of the file so it always wins the cascade.
   No @page size (the user's portrait/landscape choice rules)
   and no fixed px widths anywhere — content reflows to the
   printable width in either orientation.
   Margins are belt-and-braces: @page sets the outer page
   margin, and the top-level print containers keep a small
   inner padding of their own — because the browser print
   dialog's Margins setting (None/Minimum/Custom) OVERRIDES
   css @page, and with zero container padding that puts ink
   at the physical paper edge.
   ========================================================= */
@page { margin: 2.5cm; }

@media print {
  /* -- Ink-safe tokens for BOTH themes ---------------------
     Every printed colour in the app resolves through these
     variables (including the remapped diagram SVGs), so one
     override makes dark- and light-theme printing identical:
     near-black ink on white, hairline grey rules. */
  :root, :root[data-theme="light"] {
    --bg-base: #fff;
    --bg-deep: #fff;
    --bg-surface: #fff;
    --bg-elevated: #fff;
    --bg-card: #fff;
    --bg-card-hover: #fff;
    --bg-input: #fff;
    --text-primary: #111;
    --text-secondary: #333;
    --text-tertiary: #555;
    --text-muted: #777;
    --border-subtle: #ddd;
    --border-soft: #ccc;
    --border-strong: #bbb;
    --emerald: #1e6b50;
    --emerald-soft: transparent;
    --tan: #8a6226;
    --tan-soft: transparent;
    --success: #1e6b50;
    --danger: #8f2f42;
    --warning: #7a5a10;
    --danger-soft: transparent;
    --warning-soft: transparent;
    --success-soft: transparent;
    --info-soft: transparent;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }

  /* -- App chrome and decoration off the page -------------- */
  .topbar, .footer, #toast, .auth-overlay,
  .crumb, .no-print, .btn, .theme-btn, .account-btn,
  .locked-blur, .locked-overlay, .hub-nudge, .guide-nav, .btn-row {
    display: none !important;
  }

  /* -- Reflow: nothing may exceed the printable width ------
     body's screen overflow-x:hidden is what amputates over-
     wide content at the right page edge; visible overflow
     lets the print engine reflow/shrink instead. */
  html, body {
    overflow: visible !important;
    width: auto !important;
    min-height: 0 !important;
    background: #fff !important;
  }
  .app-shell {
    max-width: none !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .view { animation: none !important; transform: none !important; }
  .guide-article, .print-notes, .guide-body {
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Inner safety margin on the top-level print container of
     each view (notes root + topic root). Children — .pn-head,
     .pn-topic, .guide-article-head, .guide-section — all sit
     inside it, so header and sections share the same inset.
     Survives even when the print dialog zeroes @page. */
  .guide-article, .print-notes {
    padding: 0.75cm !important;
  }
  * { box-shadow: none !important; text-shadow: none !important; }

  /* Multi-column grids collapse to one flowing column */
  .pn-terms, .def-grid { display: block !important; }
  .pn-term, .def-card { margin-bottom: var(--s-3); }

  /* Tables: full width, never clipped — cells wrap instead of
     forcing intrinsic overflow; rows hold together but the
     table itself may break across pages */
  .guide-body .compare-table, .plan-table {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    break-inside: auto;
  }
  .plan-table-wrap { overflow: visible !important; max-width: none !important; }
  .guide-body .compare-table th, .guide-body .compare-table td,
  .plan-table th, .plan-table td { overflow-wrap: break-word; }
  .guide-body .compare-table tr, .plan-table tr { break-inside: avoid; }

  /* Diagrams and images scale to the page, never past it */
  .guide-body svg, .diagram-box svg, img { max-width: 100% !important; height: auto !important; }

  /* -- Margins & rhythm ------------------------------------
     Distance to the page edge is controlled ONLY by @page —
     wrappers contribute none (.app-shell and the print views
     are zeroed above). Inside the page, one vertical rhythm
     for BOTH print views (guide topic + condensed notes):
     --s-6 between sections and around callout boxes, --s-4
     inside them — replacing the larger screen-only spacing
     that printed as uneven gaps. */
  .guide-article-head, .pn-head { margin: 0 0 var(--s-6); padding: 0 0 var(--s-4); }
  .guide-body h2 { margin: var(--s-6) 0 var(--s-3); }
  .guide-body h3 { margin: var(--s-5) 0 var(--s-2); }
  .guide-section { margin-top: var(--s-6); padding-top: var(--s-4); }
  .pn-topic { margin-bottom: var(--s-6); }
  .guide-body .def-box, .guide-body .example-box,
  .guide-body .warn-box, .guide-body .diagram-box {
    margin: var(--s-6);
    padding: var(--s-4);
  }
  .def-card { padding: var(--s-4); }

  /* -- Pagination ------------------------------------------
     Boxes never split across pages; headings keep their first
     following block. No forced break-before anywhere — a box
     ending near the page bottom is fine, a half-empty page is
     not. break-before:avoid on section headings stops a
     section's top rule stranding alone at the page bottom
     while its pushed heading starts the next page. */
  .def-box, .example-box, .warn-box, .def-card, .pn-term,
  .diagram-box, .q-context, .formula { break-inside: avoid; }
  h1, h2, h3, h4, .guide-group-head, .pn-topic h2, .guide-section h2 { break-after: avoid; }
  .guide-section h2, .pn-topic h2 { break-before: avoid; }
  /* Topics flow naturally — a long topic may span pages */
  .pn-topic { break-inside: auto; }

  /* -- Typography ------------------------------------------ */
  body, .guide-body, .pn-term dd, .pn-tips li {
    font-size: 11pt;
    line-height: 1.45;
  }
  a, a:visited { color: inherit !important; text-decoration: none !important; }
  /* The one retained ink accent: claret front-sheet marks on the notes */
  .pn-brand, .pn-id { color: #93203c !important; }

  /* Collapsed sections that carry content open for print
     (belt-and-braces — app.js also opens <details> on
     beforeprint, since CSS alone can't reveal closed ones) */
  details > summary { list-style: none; }
}

/* =========================================================
   Hoisted layout utilities + bar-width carriers
   (replaced the former inline style="" attributes in app.js;
   keep these at the end of the file so they win ties)
   ========================================================= */

.u-mt-2 { margin-top: var(--s-2); }
.u-mt-3 { margin-top: var(--s-3); }
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-5 { margin-top: var(--s-5); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-8 { margin-top: var(--s-8); }
.u-mt-10 { margin-top: var(--s-10); }
.u-mb-2 { margin-bottom: var(--s-2); }
.u-mb-3 { margin-bottom: var(--s-3); }
.u-mb-4 { margin-bottom: var(--s-4); }

.btn-row.center { justify-content: center; }
.btn-block { width: 100%; }
.block-center { text-align: center; }

/* Page-hero padding variants (hoisted; recomposed per view later) */
.hero.hero-compact { padding: var(--s-8) 0 var(--s-6); }
.hero.hero-flat { padding: var(--s-8) 0 var(--s-4); }
.hero.hero-roomy { padding: var(--s-10) 0 var(--s-6); }

/* Prose notes */
.fine-note { color: var(--text-tertiary); font-size: 0.86rem; }
.note-muted { color: var(--text-tertiary); }
.note-empty { color: var(--text-secondary); margin: var(--s-3) 0; }
.note-gate { color: var(--text-secondary); margin: var(--s-3) 0 var(--s-5); }
.demo-question { color: var(--text-primary); font-weight: 600; margin-bottom: var(--s-4); }
.cc-bullets.cc-tight { gap: var(--s-3); margin-bottom: var(--s-5); }

/* Progress fills read their width from the --w carrier set in markup */
.ao-mini-bar span,
.qt-progress-fill,
.length-fill,
.ao-bar-fill,
.bar-fill { width: var(--w, 0%); }

/* Declared mobile collapses for the fixed-count functional grids */
@media (max-width: 860px) {
  .def-grid, .spec-grid, .count-grid { grid-template-columns: 1fr; }
  .price-teaser { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}