/* Revive Revision — design system
   Light is the approved default (redesign-v3, ported). Dark tokens below are
   dormant — kept in place, not deleted, for a later dark-mode pass. */

/* Geist — the one UI font: headings, body, nav, buttons, chat, questions.
   JetBrains Mono — technical/data only (spec codes, marks, AO labels,
   percentages, metadata). Self-hosted, no CDN. */
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrainsmono-500.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrainsmono-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
/* Inter, self-hosted — dormant, only referenced by the dark tokens below. */
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* dark (default) */
  --bg: #0F1115;
  --surface-1: #181B20;
  --surface-2: #1E2128;
  --border: #2A2F3A;
  --text: #E7EAF0;
  --text-dim: #9AA3B2;
  --text-faint: #6B7484;

  --amber: #F59E0B;
  --amber-deep: #B45309;
  --amber-soft: rgba(245, 158, 11, 0.14);
  --amber-line: rgba(245, 158, 11, 0.35);
  --red: #EF4444;
  --red-soft: rgba(239, 68, 68, 0.14);
  --red-line: rgba(239, 68, 68, 0.35);
  --green: #34D399;
  --green-soft: rgba(52, 211, 153, 0.14);

  --bubble-user: #232833;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* spacing scale 4/8/12/16/24/32/48 */
  --s1: 4px;  --s2: 8px;  --s3: 12px;
  --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  --r-sm: 6px; --r-md: 8px; --r-lg: 12px;

  --container: 100%;
  --sidebar: 244px;
}

html[data-theme="light"] {
  /* redesign-v3 palette, ported: warm near-white page, white cards, one brand
     orange, one separate semantic-warning terracotta (never the same hue). */
  --bg: #FEFBF9;
  --surface-1: #FFFFFF;
  /* Neutral warm-grey, NOT the brand orange — this is the generic muted
     surface (hover states, table heads, badges, code chips). Pale orange is
     a separate, deliberate signal: use --amber-soft for that, never this. */
  --surface-2: #F3F1EC;
  --border: #E7E7E4;
  --text: #17231F;
  --text-dim: #4E5C55;
  --text-faint: #656F64;

  --amber: #FF5A1F;
  --amber-deep: #C2410C;
  --amber-soft: rgba(255, 90, 31, 0.14);
  --amber-line: rgba(255, 90, 31, 0.35);
  --red: #C24A3A;
  --red-soft: rgba(194, 74, 58, 0.12);
  --red-line: rgba(194, 74, 58, 0.35);
  --green: #2E9E5B;
  --green-soft: rgba(46, 158, 91, 0.14);

  --bubble-user: #FDEDE4;
  --shadow: 0 1px 2px rgba(23, 35, 29, 0.04), 0 1px 1px rgba(23, 35, 29, 0.03);
  --shadow-lg: 0 12px 28px -6px rgba(23, 35, 29, 0.12), 0 2px 8px rgba(23, 35, 29, 0.05);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-width: 1180px;
}

/* Technical/data text — spec codes, marks, AO labels, percentages, metadata —
   always the secondary mono face, never the main UI font. */
.code, .mono { font-family: "JetBrains Mono", monospace; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: "Geist", sans-serif; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { margin: 0; }

.icon { width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-lg { width: 20px; height: 20px; }

/* ---------- layout ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  max-width: var(--container);
  min-height: 100vh;
  margin: 0 auto;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.sidebar {
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  box-shadow: 10px 0 32px -6px rgba(23, 35, 29, 0.12);
  z-index: 2;
  padding: 28px var(--s5) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 4px; margin-bottom: var(--s3); }
.brand-logo { height: 36px; width: auto; display: block; }
.brand-sub { display: none; }

.nav-group { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-label { display: none; }
.nav-item {
  display: flex; align-items: center; gap: var(--s4);
  padding: 12px var(--s4);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 16px; font-weight: 500;
  transition: background-color .12s ease, color .12s ease;
}
.nav-item .icon { width: 21px; height: 21px; flex-shrink: 0; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--amber-soft); color: var(--amber-deep); font-weight: 550; }
.nav-item.soon { opacity: 0.55; cursor: default; }
.nav-item.soon:hover { background: transparent; color: var(--text-dim); }
.nav-item .badge { margin-left: auto; }
.nav-item .tag {
  margin-left: auto; font-size: 11px; letter-spacing: 0.04em;
  font-family: "JetBrains Mono", monospace; color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}

.badge {
  font-size: 10.5px; font-weight: 600; padding: 1px 6px;
  border-radius: 999px; background: var(--surface-2); color: var(--text-dim);
  border: 1px solid var(--border);
}
.badge.red { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.badge.amber { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }
.badge.green { background: var(--green-soft); color: var(--green); border-color: transparent; }

.sidebar-foot { display: flex; flex-direction: column; gap: var(--s3); }

.user-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 4px 4px; border-top: 1px solid var(--border);
}
.avatar {
  width: 42px; height: 42px; border-radius: 10px; flex: none;
  background: var(--text); color: var(--surface-1);
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
}
.user-name { font-size: 15px; font-weight: 600; }
.user-plan { font-size: 12.5px; color: var(--text-faint); }
.settings-link {
  margin-left: auto; width: 36px; height: 36px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--text-faint);
}
.settings-link:hover { background: var(--surface-2); color: var(--text); }
.settings-link .icon { width: 20px; height: 20px; }

/* main */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: 60px; flex: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s6);
  position: sticky; top: 0; z-index: 5;
}
.crumbs { display: flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--text-faint); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { opacity: 0.5; }
.crumbs .now { color: var(--text); font-weight: 550; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

.content { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s5); }
.page-head { display: flex; align-items: flex-start; gap: var(--s4); }
.page-head .sub { color: var(--text-dim); font-size: 13px; margin-top: var(--s1); }
.page-head-tight { margin-bottom: calc(var(--s5) * -1 + var(--s3)); }
.page-head .spacer { margin-left: auto; }

/* ---------- primitives ---------- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.card-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border);
}
.card-head .spacer { margin-left: auto; }
.card-body { padding: var(--s5); }
.card-title { font-size: 13.5px; font-weight: 600; }
.card-note { font-size: 12px; color: var(--text-faint); }
.spec-instruction { margin-top: -14px; display: flex; align-items: center; gap: 6px; }
.spec-instruction .info-hint { display: inline-flex; flex: none; cursor: help; color: var(--text-faint); }
.spec-instruction .info-hint:hover { color: var(--text-dim); }
.spec-instruction .info-hint .icon { width: 13px; height: 13px; }

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font-size: 13px; font-weight: 550;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn:hover { border-color: var(--text-faint); }
.btn-primary { background: var(--amber-deep); border-color: var(--amber-deep); color: #FFFCF6; }
.btn-primary:hover { filter: brightness(1.06); border-color: var(--amber); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.btn-sm { padding: 5px var(--s3); font-size: 12.5px; }
.btn-icon { padding: var(--s2); border-radius: var(--r-md); }

.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 2px; gap: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--text-dim);
  padding: 4px var(--s3); border-radius: var(--r-sm); font-size: 12.5px; font-weight: 550;
}
.seg button.on { background: var(--surface-1); color: var(--text); box-shadow: var(--shadow); }
html[data-theme="light"] .seg button.on { background: #fff; }

.grow { flex: 1; min-width: 0; }
.spacer { margin-left: auto; }

.grid { display: grid; gap: var(--s5); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-2-1 { grid-template-columns: 2fr 1fr; align-items: start; }

.stat { padding: var(--s5); }
.stat .label { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: var(--s2); }
.stat .value { font-size: 28px; font-weight: 650; letter-spacing: -0.03em; margin-top: var(--s2); }
.stat .delta { font-size: 12px; color: var(--text-faint); margin-top: var(--s1); }
.stat .delta.up { color: var(--green); }

.bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--amber); border-radius: 999px; }
.bar.red > span { background: var(--red); }
.bar.green > span { background: var(--green); }

.divider { height: 1px; background: var(--border); }

.list { display: flex; flex-direction: column; }
.list > * + * { border-top: 1px solid var(--border); }
.row {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5);
}
.row:hover { background: var(--surface-2); }
.row .grow { min-width: 0; flex: 1; }
.row .title { font-size: 13.5px; font-weight: 550; }
.row .meta { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

.tag {
  font-size: 11px; font-weight: 550; padding: 2px var(--s3);
  border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text-dim);
}
.tag.amber { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
.tag.red { color: var(--red); border-color: var(--red-line); background: var(--red-soft); }
.tag.green { color: var(--green); background: var(--green-soft); border-color: transparent; }
/* Untested repeats a lot down a ten-topic list — it should read as an
   absence of signal, not compete visually with the states that mean
   something (weak / review / secure). */
.tag.quiet {
  font-size: 10.5px; color: var(--text-faint);
  background: color-mix(in srgb, var(--surface-2) 50%, var(--surface-1));
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
}

/* confidence indicator (1-5 dots) */
.conf { display: inline-flex; align-items: center; gap: 3px; }
.conf i { width: 6px; height: 6px; border-radius: 999px; background: var(--border); display: block; }
.conf i.on { background: var(--amber); }
.conf.low i.on { background: var(--red); }
.conf.high i.on { background: var(--green); }
.conf .txt { font-size: 11px; color: var(--text-faint); margin-left: var(--s1); }
.conf.untested .txt { color: var(--text-faint); font-style: italic; }

/* ---------- dashboard ---------- */
.focus {
  border: 1px solid var(--amber-line);
  background: var(--surface-1);
}
.focus .why { font-size: 12.5px; color: var(--text-dim); }
.focus h2 { font-size: 19px; }
.kicker {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--amber); font-weight: 650;
}
.streak-dots { display: flex; gap: var(--s1); }
.streak-dots span {
  width: 22px; height: 26px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 10px; color: var(--text-faint);
}
.streak-dots span.hit { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }
.streak-dots span.today { outline: 2px solid var(--amber); outline-offset: 1px; }

.overdue-row { border-left: 2px solid var(--red); }

/* ---------- dashboard: recommend / ledger / topics / recent-marked / weak-subtopics ---------- */
.grid-main { display: grid; grid-template-columns: 1.62fr 1fr; gap: var(--s6); align-items: start; }
.main-col { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.side-col { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }

.recommend { border: 1px solid var(--amber-line); }
.recommend-content { display: flex; gap: var(--s6); align-items: flex-start; }
.recommend-main { flex: 1; min-width: 0; }
.recommend-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--amber-deep);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--s3);
}
.recommend-label .icon { width: 14px; height: 14px; }
.recommend h2.rtitle {
  font-family: "Geist", sans-serif; font-weight: 650;
  font-size: 28px; line-height: 1.15; letter-spacing: -0.015em;
  margin: 0 0 6px; color: var(--text);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.recommend h2.rtitle .code {
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500;
  color: var(--amber-deep); background: var(--amber-soft);
  padding: 3px 10px; border-radius: 999px; letter-spacing: 0;
}
.recommend .evidence { font-size: 14.5px; line-height: 1.55; color: var(--text-dim); max-width: 62ch; margin: var(--s3) 0 var(--s4); }
.recommend .evidence b { color: var(--text); font-weight: 600; }
.recommend .evidence .num { font-family: "JetBrains Mono", monospace; font-weight: 700; color: var(--red); }

/* Supporting evidence, not a second card — a plain inline diagnostic that
   sits quietly beside the main call to action instead of competing with it. */
.ao-panel { width: 190px; flex-shrink: 0; padding: 0 0 0 var(--s5); border-left: 1px solid var(--border); }
.ao-panel h3 { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin: 0 0 var(--s3); }
.ao-panel h3 span { font-weight: 500; text-transform: none; letter-spacing: 0; }
.ao-row + .ao-row { margin-top: var(--s3); }
.ao-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 8px; }
.ao-label { font-size: 12px; color: var(--text-dim); font-family: "JetBrains Mono", monospace; }
.ao-label b { color: var(--text); font-weight: 600; font-family: "Geist", sans-serif; }
.ao-frac { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.ao-panel .bar { height: 4px; }

.ledger-row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s3) 0; border-top: 1px solid var(--border); }
.ledger-row:first-of-type { border-top: none; }
.ledger-row .label { font-size: 14px; color: var(--text-dim); }
.ledger-row .value { font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 700; color: var(--text); }
.ledger-row .value.accent { color: var(--red); }
.streak-row { padding-bottom: 6px; }
.streak-row .label b { font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 700; color: var(--text); margin-left: 6px; }

.streak-dots-row { display: flex; justify-content: space-between; padding: 4px 0 var(--s4); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.streak-dots-row .sd { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.streak-dots-row i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.streak-dots-row i.on { background: var(--green); }
.streak-dots-row i.today { box-shadow: 0 0 0 3px var(--amber-soft); background: var(--amber); }
.streak-dots-row span { font-size: 10px; color: var(--text-faint); }

.topics-head { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s5); }
.topics-head h2 { margin: 0 0 2px; }
.topics-head .sub { margin: 0; }
.topics-pct { font-size: 13px; color: var(--text-dim); margin: 0 0 1px; }
.topics-pct b { font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 700; color: var(--amber-deep); }
.progress-ring { position: relative; width: 62px; height: 62px; flex-shrink: 0; }
.progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 7; }
.progress-ring .ring-bg { stroke: var(--border); }
.progress-ring .ring-fill { stroke: var(--amber); stroke-linecap: round; transition: stroke-dasharray .3s ease; }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-label b { font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.1; }
.ring-label span { font-size: 8px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; }

.topic-row { padding: 9px 0; border-top: 1px solid var(--border); }
.topic-row:first-of-type { border-top: none; }
.topic-row .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 10px; }
.topic-row .name { font-size: 13.5px; color: var(--text); font-weight: 500; }
.topic-row .name .code { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--text-faint); margin-right: 6px; }
.topic-row .frac { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--text-faint); white-space: nowrap; flex-shrink: 0; }

.rm-row, .weak-row {
  display: grid; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4); margin: 0 calc(-1 * var(--s4));
  border-top: 1px solid var(--border); border-radius: var(--r-sm);
  transition: background-color .12s ease;
}
.rm-row { grid-template-columns: 70px 1fr auto auto; }
.weak-row { grid-template-columns: 1fr auto auto; }
.rm-row:first-of-type, .weak-row:first-of-type { border-top: none; }
.rm-row:hover, .weak-row:hover { background: var(--surface-2); }
.rm-row .rm-date { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--text-faint); }
.rm-topic, .weak-topic { font-size: 13.5px; color: var(--text); display: inline-flex; align-items: center; gap: 9px; }
.rm-topic .code, .weak-topic .code { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--text-faint); margin-right: 2px; }
.rm-mark { font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 750; color: var(--text); white-space: nowrap; text-align: right; }
.rm-mark.low { color: var(--red); }
.rm-mark.high { color: var(--green); }
.rm-link { font-size: 12px; font-weight: 600; color: var(--text-dim); text-decoration: none; white-space: nowrap; }
.rm-link:hover { color: var(--text); text-decoration: underline; }
.weak-avg { font-family: "JetBrains Mono", monospace; font-weight: 700; color: var(--red); white-space: nowrap; }
.rm-dot, .weak-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--green); }
.rm-dot.low, .weak-dot { background: var(--red); }

/* Secondary to the hero card — real content, but a quieter frame so the
   recommendation stays the obvious place to start. */
.recent-marked, .weak-subtopics {
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--r-md); box-shadow: none;
}
.recent-marked h2, .weak-subtopics h2 { font-size: 18px; margin: 0 0 4px; }
.recent-marked .sub, .weak-subtopics .sub, .topics .sub, .ledger .sub {
  font-size: 13px; color: var(--text-faint); margin: 0 0 var(--s3);
}
.ledger h2, .topics h2 { font-size: 16px; margin: 0 0 var(--s4); }

@media (max-width: 980px) {
  .grid-main { grid-template-columns: 1fr; }
  .recommend-content { flex-direction: column; }
  .ao-panel { width: 100%; padding: var(--s4) 0 0; border-left: 0; border-top: 1px solid var(--border); }
}

/* ---------- subjects ---------- */
.subject-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
.subject-list { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.topic {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
  border-left: 3px solid transparent;
}
/* The open topic reads as "currently active" — a touch of the accent
   colour and a bolder title, not a different background. Kept quiet: enough
   cues already say this card is active without a loud outline. */
.topic.open {
  border-left-color: var(--amber);
  border-color: color-mix(in srgb, var(--amber-line) 55%, var(--border));
}
.topic-head {
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: calc(var(--s5) - 6px) var(--s5); width: 100%;
  background: transparent; border: 0; text-align: left;
}
.topic.open .topic-head { padding-top: calc(var(--s5) - 4px); padding-bottom: calc(var(--s5) - 4px); }
.topic-head:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.topic-head .chev { margin-top: 3px; }
.topic-code {
  font-size: 12px; font-weight: 650; color: var(--amber);
  background: var(--amber-soft); border: 1px solid var(--amber-line);
  padding: 2px var(--s2); border-radius: var(--r-sm); flex: none;
}
/* Plain colour, no pill — a filled box on every single topic row read as a
   persistent "highlight" rather than a label. Matches the approved design,
   which never boxes this code; topic.html's standalone header badge (same
   class, different context) keeps the pill treatment. */
.topic-head .topic-code {
  background: none; border: none; padding: 0; margin-top: 3px;
  color: var(--text-faint); width: 34px; font-size: 13px;
}
.topic-name { font-size: 16px; font-weight: 650; }
.topic.open .topic-name { font-weight: 750; color: var(--text); }
.topic-progress { width: 150px; flex: none; margin-top: 2px; }
.topic-progress .num { font-size: 12px; color: var(--text-dim); font-weight: 600; margin-bottom: var(--s1); }
.topic-head > .tag { margin-top: 2px; }
.chev { transition: transform 140ms ease; color: var(--text-faint); }
.topic.open .chev { transform: rotate(90deg); }
/* Untouched content stays white — peach is reserved for the group the
   student currently has open, never a general container background. */
.subtopics { display: none; background: var(--surface-1); border-top: 1px solid var(--border); }
.topic.open .subtopics { display: block; }

@media (max-width: 980px) {
  .subject-columns { grid-template-columns: 1fr; }
}
.check {
  width: 18px; height: 18px; border-radius: 5px; flex: none;
  border: 1.5px solid var(--text-dim); display: grid; place-items: center;
  background: var(--surface-1);
}
.check.done { background: var(--green); border-color: var(--green); color: #06231A; }
html[data-theme="light"] .check.done { color: #fff; }
.check .icon { width: 12px; height: 12px; stroke-width: 3; }
.check:not(.done) .icon { display: none; }

/* ---------- subtopic-groups (2nd tier) + atomic items (3rd tier), inline in Subjects ---------- */
.subtopic-group { border-top: 1px solid var(--border); border-left: 3px solid transparent; }
.subtopic-group:first-child { border-top: none; }
.subtopic-group-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5) var(--s4) 39px; cursor: pointer;
  font-size: 13.5px; font-weight: 600;
}
.subtopic-group-head:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
/* Open = "this is the one the student is looking at right now" — the one
   deliberate use of the peach highlight in this whole tree. */
.subtopic-group.open .subtopic-group-head {
  background: color-mix(in srgb, var(--amber-soft) 40%, var(--surface-1));
  border-left-color: var(--amber);
}
/* Weak / needs-review get a quiet left accent, not a filled background —
   noticeable without competing with the peach "currently open" state. */
.subtopic-group.weak { border-left-color: var(--amber-line); }
.subtopic-group.review { border-left-color: var(--amber); }
.subtopic-group .chev { width: 16px; height: 16px; }
.subtopic-group.open .chev { transform: rotate(90deg); }
.subtopic-progress { display: flex; align-items: center; gap: var(--s2); width: 120px; flex: none; }
.subtopic-progress .num { font-size: 12px; color: var(--text-dim); font-weight: 600; white-space: nowrap; width: 38px; text-align: right; }
.subtopic-progress .bar { flex: 1; }
.subtopic-group-body { display: none; padding: var(--s2) var(--s5) var(--s4) 65px; background: var(--surface-1); }
.subtopic-group.open .subtopic-group-body { display: block; }
.atom-row {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2);
  margin: 0 calc(var(--s2) * -1); border-radius: var(--r-sm); cursor: pointer;
}
.atom-row:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.atom-row .atom-text { font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.atom-row.done .atom-text { color: var(--text); }

/* ---------- exam questions browse ---------- */
.section-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); font-size: 14px; font-weight: 600; }
/* This page reuses .topic/.subtopics from Subjects, but the beige (surface-2)
   subtopics region reads as noise here — every subtopic gets it regardless
   of state, so it stops meaning anything. Flatten it to the topic's own
   background; only individual rows use amber, and only on hover/expand. */
[data-page="exam-questions"] .subtopics { background: var(--surface-1); }

.subtopic-eq { padding: var(--s2) var(--s5) var(--s2) 42px; border-top: 1px solid var(--border); }
.subtopic-eq.subtopic-eq-empty {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s5) var(--s2) 42px; font-size: 12.5px; color: var(--text-faint);
}
.subtopic-eq-head { display: flex; align-items: center; gap: var(--s3); font-size: 13px; font-weight: 550; }
.eq-list-inner { display: flex; flex-direction: column; margin-top: var(--s2); }
.eq-row {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 36px; padding: 6px var(--s3);
  background: none; border: 0; border-top: 1px solid var(--border);
  font-size: 13px; text-align: left; width: 100%; cursor: pointer;
}
.eq-row:first-child { border-top: 0; }
.eq-row:hover { background: var(--amber-soft); }
.eq-row .chev { width: 14px; height: 14px; transform: rotate(90deg); color: var(--text-faint); flex: none; }
.eq-marks {
  flex: none; width: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2px 0; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700;
  line-height: 1.1; color: var(--text-dim); background: var(--surface-2); border-radius: var(--r-sm);
}
.eq-marks-unit {
  font-family: inherit; font-size: 7.5px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--text-faint);
}
.eq-marks.big { color: var(--amber); background: var(--amber-soft); }
.eq-marks.big .eq-marks-unit { color: var(--amber); opacity: .8; }
.eq-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.eq-stem {
  font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.eq-meta { font-size: 11.5px; color: var(--text-faint); }

.eq-filters { display: flex; gap: var(--s2); }
.eq-filter {
  padding: 5px var(--s3); border-radius: 999px; border: 1px solid var(--border);
  background: none; font-size: 12px; color: var(--text-dim);
}
.eq-filter:hover { background: var(--surface-2); }
.eq-filter.on { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); font-weight: 600; }

.eq-subject { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; }
.eq-subject-select { display: flex; flex-direction: column; gap: 3px; margin-left: var(--s3); }
.eq-subject-select .kicker { font-size: 10px; }
.eq-subject-select select { min-width: 0; padding: 5px var(--s3); font-size: 12.5px; }

.eq-modal { width: min(680px, 100%); max-height: 88vh; overflow-y: auto; }
.eq-question { font-size: 14px; line-height: 1.65; color: var(--text); }
.eq-question > * + * { margin-top: var(--s4); }

.eq-list { display: flex; flex-direction: column; gap: var(--s3); list-style: none; }
.eq-list li { display: flex; align-items: flex-start; gap: var(--s3); }
.eq-list-mcq .eq-list-marker {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-2);
  display: grid; place-items: center; font-size: 12px; font-weight: 650; color: var(--text-dim);
}
.eq-list:not(.eq-list-mcq) li::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  margin-top: 9px; background: var(--amber);
}
.eq-context {
  margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
}
.eq-context-body {
  font-size: 13px; line-height: 1.6; color: var(--text-dim);
  max-height: 160px; overflow-y: auto; transition: max-height 160ms ease;
}
.eq-context.expanded .eq-context-body { max-height: 60vh; }
.eq-context-body p + p { margin-top: var(--s2); }
/* .onb-card .btn is width:100% for the onboarding modal's single full-width
   button; this modal reuses .onb-card as a base but has a close icon-button
   and a secondary "enlarge" button that must NOT stretch full-width. */
.onb-card.eq-modal .btn { width: auto; }
.onb-card.eq-modal .btn-primary { width: 100%; }

/* ---------- exam question modal: split layout (screenshot | text+meta) ---------- */
.onb-card.eq-modal-split {
  width: min(1080px, 96vw); height: min(760px, 88vh); max-height: 88vh; padding: 0; display: flex;
}
.eq-modal-split .eq-left {
  flex: 0 0 52%; min-width: 0; background: var(--surface-1); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto; padding: var(--s3);
}
.eq-modal-split .eq-right {
  flex: 1 1 48%; min-width: 0; min-height: 0; display: flex; flex-direction: column;
}
.eq-right-head { flex: none; padding: var(--s5) var(--s5) 0; }
.eq-right-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s4) var(--s5); }
.eq-right-foot { flex: none; padding: var(--s4) var(--s5); border-top: 1px solid var(--border); }
.eq-shot-wrap {
  display: block; width: 100%; border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface-1); cursor: zoom-in;
}
.eq-shot-wrap img { display: block; width: 100%; height: auto; }
.eq-shot-hint { font-size: 11px; color: var(--text-faint); margin-top: var(--s2); text-align: center; }
.eq-shot-missing {
  font-size: 12.5px; color: var(--text-faint); padding: var(--s5); text-align: center;
  border: 1px dashed var(--border); border-radius: var(--r-md);
}
.eq-shot-block + .eq-shot-block { margin-top: var(--s4); }
.eq-shot-label { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); margin-bottom: var(--s2); }

.eq-tabs { display: flex; gap: var(--s4); border-bottom: 1px solid var(--border); margin-top: var(--s4); }
.eq-tab {
  padding: var(--s2) 0; margin-bottom: -1px; border-bottom: 2px solid transparent;
  background: none; border-top: 0; border-left: 0; border-right: 0; font-size: 13px; font-weight: 500;
  color: var(--text-faint); opacity: .75;
}
.eq-tab.on { color: var(--text); font-weight: 650; opacity: 1; border-bottom-color: var(--amber); }
.eq-tab-panel { display: none; }
.eq-tab-panel.on { display: block; }
.eq-scheme-gate {
  text-align: center; padding: var(--s5); border: 1px dashed var(--border); border-radius: var(--r-md);
}

/* structured mark scheme */
.eq-scheme-section + .eq-scheme-section { margin-top: var(--s5); }
.eq-scheme-h {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); margin-bottom: var(--s2);
}
.eq-ao-chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.eq-ao-chip {
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 600; color: var(--text-dim);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 4px 10px; display: inline-flex; gap: 5px;
}
.eq-ao-chip b { color: var(--amber); }
.eq-scheme-grid { margin-top: var(--s5); font-size: 12.5px; color: var(--text-dim); }
.eq-scheme-grid summary {
  cursor: pointer; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint);
}
.eq-scheme-grid .eq-question { margin-top: var(--s3); }

/* real tables inside case-study / mark-scheme prose */
.eq-table-wrap { overflow-x: auto; }
.eq-table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.eq-table th, .eq-table td {
  padding: 6px var(--s3); border: 1px solid var(--border); text-align: right; white-space: nowrap;
}
.eq-table th:first-child, .eq-table td:first-child { text-align: left; white-space: normal; }
.eq-table th { background: var(--surface-2); font-weight: 650; color: var(--text-dim); }

.eq-lightbox {
  position: fixed; inset: 0; z-index: 80; background: rgba(8, 10, 14, 0.9);
  display: flex; flex-direction: column;
}
.eq-lightbox-bar {
  flex: none; display: flex; gap: var(--s2); justify-content: flex-end;
  padding: var(--s3) var(--s4); background: rgba(8, 10, 14, 0.6);
}
.eq-lightbox-bar .btn {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #fff;
}
.eq-lightbox-bar .btn:hover { background: rgba(255, 255, 255, 0.16); }
.eq-lightbox-scroll { flex: 1; min-height: 0; overflow: auto; padding: var(--s5); }
.eq-lightbox-inner { max-width: 1100px; margin: 0 auto; }
.eq-lightbox-inner img { display: block; width: 100%; border-radius: var(--r-md); transition: width 120ms ease; }

/* ---------- session (merged) ---------- */
.session-wrap {
  display: grid; grid-template-columns: 1fr;
  gap: 0; flex: 1; min-height: 0; overflow: hidden;
}
/* The info panel (subtopic context, credits, sourcing note) isn't part of the
   approved Chat design — full-width chat only, matching redesign-v3/chat.html.
   Kept in the DOM rather than deleted: session.js reads several of its ids
   (q-now, side-topic, smode-tag, ...) without null-guards, so removing the
   nodes would throw. Hidden is enough to match the design. */
.session-side { display: none; }
.side-block { display: flex; flex-direction: column; gap: var(--s3); }
.side-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint);
}
.mini-check { display: flex; align-items: center; gap: var(--s3); font-size: 12.5px; color: var(--text-dim); }
.mini-check.current { color: var(--text); font-weight: 550; }
.mini-check.current .dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--border); flex: none; }
.dot.done { background: var(--green); }

.chat-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Not part of the approved design — Chat/Practice, question format and
   session length are now taken from the student's real Settings defaults
   at session start (see initSession()) rather than toggled manually here.
   Kept in the DOM (session.js binds click listeners to these ids without
   null-guards) but hidden, same treatment as .session-side above. */
.chat-bar { display: none; }
.chat-bar .lbl { font-size: 13px; color: var(--text-faint); }

/* persistent compact header once a scoped session is running */
.session-topic-bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s6); border-bottom: 1px solid var(--border);
  background: var(--bg); font-size: 13px;
}
.session-topic-bar .stb-code {
  font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--text-faint);
}
.session-topic-bar .stb-name { font-weight: 600; color: var(--text); }
.session-topic-bar .stb-mode { margin-left: auto; }

/* centre the working conversation area instead of stretching it edge to edge */
.chat-center {
  display: flex; flex-direction: column; min-height: 0; flex: 1;
  width: 100%; max-width: 900px; margin: 0 auto;
}
.chat-scroll {
  flex: 1; min-height: 0; overflow-y: auto; padding: var(--s6) 0;
  display: flex; flex-direction: column; gap: calc(var(--s5) * 0.8);
}
.msg { display: flex; gap: var(--s3); max-width: 100%; }
.msg .who {
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  display: grid; place-items: center; margin-top: 2px;
  background: var(--surface-1); border: 1px solid var(--border);
}
.msg .who img { width: 11px; height: auto; display: block; }
/* AI turns: no card, just avatar + label + text sitting on the page */
.bubble {
  font-size: 15px; line-height: 1.65; color: var(--text); padding-top: 2px; max-width: 760px;
}
.msg .who-label {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); margin-bottom: 4px;
}
/* Student turns: compact bubble, right-aligned, no avatar (position + colour
   already say who this is) */
.msg.user { align-self: flex-end; max-width: 58%; }
.msg.user .who { display: none; }
.msg.user .bubble {
  background: color-mix(in srgb, var(--amber-soft) 55%, var(--surface-1));
  border: 1px solid var(--amber-line);
  border-radius: var(--r-lg); padding: var(--s3) var(--s4); max-width: none;
}
.bubble p + p { margin-top: var(--s3); }
.bubble .q-label {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--amber); font-weight: 650; margin-bottom: var(--s2);
}
.mcq { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.mcq button {
  text-align: left; border: 1px solid var(--border); background: var(--surface-2);
  border-radius: var(--r-md); padding: var(--s2) var(--s3); font-size: 13px;
}
.mcq button:hover { border-color: var(--amber-line); }
.mcq button.picked { border-color: var(--amber); background: var(--amber-soft); }

.turn-actions { display: flex; gap: var(--s2); margin-top: var(--s2); justify-content: flex-end; }

/* quick contextual actions — inserted into the chat flow directly beneath the
   tutor turn they follow, real sendMessage() calls, shown only when they're
   actually relevant to what just happened */
.quick-actions {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  margin-left: calc(26px + var(--s3));
}
.quick-actions button {
  padding: 6px var(--s3); border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-1); font-size: 12.5px; color: var(--text-dim);
}
.quick-actions button:hover { border-color: var(--amber-line); color: var(--amber-deep); }

/* ---------- revision session setup screen ---------- */
.session-setup { flex: 1; min-height: 0; overflow-y: auto; display: flex; justify-content: center; padding: var(--s7) var(--s6); }
.setup-card { width: 100%; max-width: 760px; }
.setup-card h1 { font-size: 24px; }
.setup-card > .card-note { margin-top: var(--s2); font-size: 13.5px; }
.setup-field { margin-top: var(--s6); }
.setup-label {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); margin-bottom: var(--s3);
}
.setup-subject {
  display: inline-flex; align-items: center; padding: var(--s3) var(--s4);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
  font-size: 14px; font-weight: 600; color: var(--text);
}
.setup-back {
  background: none; border: 0; padding: 0; margin-bottom: var(--s3);
  font-size: 12.5px; color: var(--text-dim);
}
.setup-back:hover { color: var(--text); }
.setup-topic-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.setup-topic-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: var(--s3) var(--s4); border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-1); text-align: left;
}
.setup-topic-row:hover { border-color: var(--amber-line); }
.setup-topic-row.on {
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber-soft) 60%, var(--surface-1));
}
.str-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); width: 100%; }
.setup-topic-row .str-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.setup-topic-row .str-title .code {
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500;
  color: var(--text-faint); margin-right: var(--s2);
}
.setup-topic-row .str-frac { font-size: 11.5px; color: var(--text-faint); }
.setup-topic-row.on .str-frac::after {
  content: " \2713"; color: var(--amber-deep); font-weight: 700;
}
.setup-topic-row .str-rec {
  flex: none; font-size: 9.5px; font-weight: 700; margin-top: 1px;
  text-transform: uppercase; letter-spacing: .03em; color: #FFFCF6; background: var(--amber-deep);
  padding: 2px 7px; border-radius: 999px;
}
.setup-actions { margin-top: var(--s6); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.setup-actions .btn-primary { width: 100%; max-width: 280px; justify-content: center; padding: var(--s3) var(--s5); font-size: 14px; }
.setup-skip {
  background: none; border: 0; padding: 0; font-size: 12.5px; color: var(--text-faint);
}
.setup-skip:hover { color: var(--text-dim); text-decoration: underline; }
.setup-goal {
  margin-top: var(--s5); padding: var(--s3) var(--s4); border: 1px dashed var(--border);
  border-radius: var(--r-md); font-size: 13px; color: var(--text-dim);
  display: flex; align-items: flex-start; gap: var(--s2);
}
.setup-goal svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--amber-deep); }
.setup-goal b { color: var(--text); font-weight: 650; }

@media (max-width: 640px) {
  .setup-topic-list { grid-template-columns: 1fr; }
}

.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface-1);
  font-size: 14.5px; font-weight: 600; color: var(--text);
  transition: border-color .12s ease, color .12s ease;
}
.chip:hover { border-color: var(--amber-line); color: var(--amber-deep); }
.chip .code { font-size: 12.5px; color: var(--text-faint); }
.chip .chip-frac { font-size: 13px; font-weight: 700; color: var(--text-faint); }
.chip.skip { border-style: dashed; color: var(--text-faint); font-weight: 500; }

.mark-panel {
  align-self: flex-end; width: 100%; max-width: 820px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--amber-soft), transparent 60%), var(--surface-1);
  overflow: hidden;
}

/* dedicated practice-question card — stands apart from ordinary tutor text */
.practice-q-panel {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-1); overflow: hidden;
}
.pq-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.pq-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint);
  margin-right: var(--s2);
}
.pq-body { padding: var(--s4); font-size: 15px; line-height: 1.65; color: var(--text); }
.pq-foot {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border); background: var(--surface-2);
}
.pq-foot .card-note { flex: 1; }
.mark-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border);
}
.mark-score { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.mark-body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.ao { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); padding: var(--s3); }
.ao .ao-h { font-size: 12.5px; font-weight: 650; margin-bottom: var(--s1); }
.ao .ao-h .hit { color: var(--green); }
.ao .ao-h .miss { color: var(--red); }
.ao p { font-size: 12.5px; color: var(--text-dim); }

.composer {
  border-top: 1px solid var(--border); padding: var(--s4) var(--s6);
  background: var(--bg); display: flex; flex-direction: column; gap: var(--s2);
}
.composer-box {
  display: flex; align-items: flex-end; gap: var(--s3);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-1); padding: var(--s3);
}
.composer-box:focus-within { border-color: var(--amber-line); }
.composer textarea {
  flex: 1; resize: none; border: 0; outline: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 15px; min-height: 64px; max-height: 160px;
}
.composer textarea::placeholder { color: var(--text-faint); }
.composer-hint { font-size: 12px; color: var(--text-faint); }

/* confidence prompt */
.conf-prompt {
  align-self: center; width: 520px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--r-lg);
  background: var(--surface-1); padding: var(--s4);
}
.conf-prompt h3 { font-size: 13.5px; }
.conf-prompt p { font-size: 12.5px; color: var(--text-dim); margin-top: var(--s1); }
.conf-scale { display: flex; gap: var(--s2); justify-content: center; margin-top: var(--s4); }
.conf-scale button {
  width: 40px; height: 36px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-2); font-weight: 600;
}
.conf-scale button:hover { border-color: var(--amber); color: var(--amber); }
.conf-scale button.on { background: var(--amber-deep); border-color: var(--amber-deep); color: #FFFCF6; }
.conf-legend { display: flex; justify-content: space-between; width: 232px; margin: var(--s2) auto 0;
  font-size: 10.5px; color: var(--text-faint); }

/* ---------- mistakes ---------- */
.log-item { padding: var(--s4) var(--s5); display: flex; gap: var(--s4); align-items: flex-start; }
.log-item + .log-item { border-top: 1px solid var(--border); }
.log-item.overdue { border-left: 2px solid var(--red); background: var(--red-soft); }
.log-item .q { font-size: 13.5px; font-weight: 550; }
.log-item .a { font-size: 12.5px; color: var(--text-dim); margin-top: var(--s2); }
.log-item .a b { color: var(--text); font-weight: 600; }
.log-meta { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s3); flex-wrap: wrap; }
.log-actions { margin-left: auto; display: flex; flex-direction: column; gap: var(--s2); align-items: flex-end; flex: none; }

/* ---------- review hub (mistakes.html) ---------- */
.review-strip {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s5); background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); margin-bottom: var(--s5); font-size: 12.5px; color: var(--text-faint);
}
.review-strip b { color: var(--text); font-weight: 700; font-size: 15px; }
.review-strip .sep { color: var(--text-faint); }

.module { border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-1);
  overflow: hidden; margin-bottom: var(--s5); }
.module-mistakes { border-left: 3px solid var(--red); }
.module-scores { border-left: 3px solid var(--green); }
.module-head {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border);
}
.module-subhead { padding: var(--s3) var(--s5); border-bottom: 1px solid var(--border); }
.field-sm { min-width: 0; font-size: 12.5px; padding: 5px var(--s3); }

/* grouped mistake sections */
.mistake-group + .mistake-group { border-top: 1px solid var(--border); }
.mistake-group-head {
  padding: 5px var(--s5); font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); background: var(--surface-2);
}

.mistake-row { display: flex; gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); border-left: 2px solid transparent; }
.mistake-row + .mistake-row { border-top: 1px solid var(--border); }
.mistake-row.is-overdue { border-left-color: var(--red); }
.mistake-row .title { font-size: 14px; font-weight: 600; color: var(--text); }
.mistake-row .detail { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.mistake-row .detail b { color: var(--text); font-weight: 600; }
.mistake-row .sub-line { font-size: 12px; color: var(--text-faint); margin-top: 5px; }
.mistake-row .meta-line { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.mistake-row .meta-line .warn { color: var(--red); font-weight: 700; font-size: 12px; }
.mistake-row .meta-line .due-today-text { color: var(--amber); font-weight: 700; font-size: 12px; }
.mistake-row .row-actions { margin-left: auto; display: flex; gap: var(--s1); flex: none; }
.mistake-row .row-actions .btn-ghost {
  background: none; border-color: transparent; color: var(--text-dim); font-weight: 500;
}
.mistake-row .row-actions .btn-ghost:hover { color: var(--text); text-decoration: underline; }

/* compact scannable score rows */
.score-row { padding: var(--s3) var(--s5); cursor: pointer; }
.score-row + .score-row { border-top: 1px solid var(--border); }
.score-row:hover { background: var(--surface-2); }
.score-row-line { display: flex; align-items: baseline; gap: var(--s3); font-size: 13px; flex-wrap: wrap; }
.score-row-line .q { color: var(--text); font-weight: 550; flex: 1 1 260px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-row-line .stat { font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.score-row-line .stat b { color: var(--text); }
.score-row-line .stat.weak { color: var(--red); }
.score-row-line .stat.strong { color: var(--green); }
.score-row-detail { display: none; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--border);
  font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.score-row.open .score-row-detail { display: block; }
.score-row-detail .full-q { color: var(--text); margin-bottom: var(--s3); }
.score-row-detail .ao-line { margin-bottom: 2px; }

/* ---------- progress ---------- */
.pg-quickstats {
  display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
  font-size: 13px; color: var(--text-faint);
}
.pg-quickstats b { color: var(--text); font-weight: 800; font-size: 16px; }
.pg-quickstats .lbl { font-style: normal; color: var(--text-faint); font-size: 11.5px; margin-left: 3px; }
.pg-quickstats .sep { color: var(--text-faint); }

/* the hero card — specification coverage is the most Speclab-specific
   metric on the page, so it gets the amber accent and a bigger ring */
.pg-hero { border-left: 3px solid var(--amber); margin-top: -10px; }
.pg-hero-ring { width: 96px; height: 96px; }
.pg-hero-ring .ring-label b { font-size: 20px; }
.pg-hero-ring .ring-label span { font-size: 9px; }
.pg-hero .topics-head h2 { font-size: 22px; }

/* second-most-important once there's real marking data to show */
.pg-perf-active { border-left: 2px solid var(--amber-line); }

.pg-coverage-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s6); margin-top: var(--s5); }
.pg-coverage-cols > div { min-width: 0; }

.pg-state {
  flex: none; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 7px; border-radius: 999px;
}
.pg-state-secure { color: var(--green); background: var(--green-soft); }
.pg-state-developing { color: var(--amber); background: var(--amber-soft); }
.pg-state-weak { color: var(--red); background: var(--red-soft); }
.pg-state-untested { color: var(--text-faint); background: var(--surface-2); }

.pg-coverage-cols .bar { height: 9px; background: var(--border); }
.pg-bar-secure > span { background: var(--green); }
.pg-bar-developing > span { background: var(--amber-deep); }
.pg-bar-weak > span { background: var(--red); }
.pg-bar-untested > span { background: var(--border); }

.pg-insight {
  display: none; gap: var(--s6); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border);
}
.pg-insight-topic { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 2px; }

.pg-conf-strip {
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-faint);
}
.pg-conf-strip b { color: var(--text); font-weight: 600; }
.pg-conf-strip .conf { margin-left: var(--s2); vertical-align: middle; }

/* marking performance */
.pg-perf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.pg-perf-avg .value { font-size: 32px; }
.pg-perf-trend { font-size: 12.5px; color: var(--text-dim); }
.pg-perf-trend .up { color: var(--green); font-weight: 600; }
.pg-perf-trend .down { color: var(--red); font-weight: 600; }
.pg-ao-label {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-faint); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border);
}

/* mistakes summary */
.pg-mistake-stats { display: flex; gap: var(--s6); }
.pg-mistake-stats .value { font-size: 22px; font-weight: 700; color: var(--text); }
.pg-mistake-minor { font-size: 18px !important; font-weight: 600 !important; color: var(--text-dim) !important; }
.pg-mistake-open { font-size: 26px !important; color: var(--red) !important; }

#pg-trend b { color: var(--text); font-weight: 650; }
#pg-trend .up { color: var(--green); font-weight: 650; }
#pg-trend .down { color: var(--red); font-weight: 650; }

.spark { display: flex; align-items: flex-end; gap: 5px; height: 96px; }
.spark div {
  flex: 1; background: var(--amber-soft); border: 1px solid var(--amber-line);
  border-radius: var(--r-sm) var(--r-sm) 0 0; min-height: 3px;
}
.spark-x { display: flex; gap: 5px; margin-top: var(--s2); }
.spark-x span { flex: 1; text-align: center; font-size: 10.5px; color: var(--text-faint); }
.heat { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.heat i { aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); display: block; }
.heat i.l1 { background: rgba(255,90,31,0.25); border-color: transparent; }
.heat i.l2 { background: rgba(255,90,31,0.5); border-color: transparent; }
.heat i.l3 { background: rgba(255,90,31,0.8); border-color: transparent; }

/* ---------- settings ---------- */
.set-row {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s4) var(--s5);
}
.set-row + .set-row { border-top: 1px solid var(--border); }
.set-row .grow { flex: 1; }
.set-row .name { font-size: 13.5px; font-weight: 550; }
.set-row .desc { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }
.field {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s2) var(--s3);
  color: var(--text); font: inherit; font-size: 13px; min-width: 220px;
}
.plan-box { border: 1px solid var(--amber-line); border-radius: var(--r-lg);
  background: var(--amber-soft); padding: var(--s5); }
.meter-row { display: flex; align-items: center; gap: var(--s3); font-size: 12.5px; color: var(--text-dim); }

.toast {
  position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  padding: var(--s3) var(--s4); border-radius: var(--r-md); font-size: 13px;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.proto-note {
  font-size: 11.5px; color: var(--text-faint);
  border: 1px dashed var(--border); border-radius: var(--r-md);
  padding: var(--s2) var(--s3);
}

/* ==========================================================================
   PUBLIC / MARKETING PAGES  (index, pricing, terms, privacy)
   Same tokens as the app. More air, bigger type, real atmosphere.
   ========================================================================== */

body.public {
  min-width: 0;
  /* the "study OS at night" field: one warm light source, one cool one */
  background:
    radial-gradient(1100px 620px at 76% -8%, var(--glow-warm), transparent 62%),
    radial-gradient(900px 560px at 4% 6%, var(--glow-cool), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

:root {
  --glow-warm: rgba(245, 158, 11, 0.16);
  --glow-cool: rgba(99, 132, 255, 0.10);
  --hairline: rgba(255, 255, 255, 0.045);
  --glass: rgba(24, 27, 32, 0.72);
}
html[data-theme="light"] {
  --glow-warm: rgba(255, 90, 31, 0.16);
  --glow-cool: rgba(255, 90, 31, 0.06);
  --hairline: rgba(23, 35, 29, 0.05);
  --glass: rgba(255, 255, 255, 0.78);
}

.wrap { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.wrap-narrow { width: min(760px, calc(100% - 64px)); margin: 0 auto; }

/* ---------- public nav ---------- */
.pub-nav {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px) saturate(1.3);
  background: linear-gradient(180deg, var(--bg) 20%, transparent);
  transition: border-color 200ms ease, background 200ms ease;
}
.pub-nav.stuck { border-bottom-color: var(--border); background: var(--glass); }
.pub-nav .wrap { display: flex; align-items: center; gap: var(--s5); height: 72px; }

.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-img { height: 46px; width: auto; display: block; }

.pub-links { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.pub-link {
  font-size: 14.5px; color: var(--text-dim); font-weight: 550;
  padding: var(--s2) var(--s3); border-radius: var(--r-md);
}
.pub-link:hover { color: var(--text); background: var(--surface-2); }
.pub-link.on { color: var(--text); }

/* ---------- marketing type scale ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-soft); border: 1px solid var(--amber-line);
  padding: 5px 12px; border-radius: 999px;
}
.eyebrow.plain { color: var(--text-faint); background: var(--surface-2); border-color: var(--border); }

.display {
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.03;
  letter-spacing: -0.038em;
  font-weight: 680;
  margin: 0;
}
.display em { font-style: normal; color: var(--amber); }
.lede { font-size: 17px; line-height: 1.62; color: var(--text-dim); }

.sec-title {
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.12; letter-spacing: -0.03em; font-weight: 660; margin: 0;
}
.sec-sub { font-size: 15.5px; color: var(--text-dim); line-height: 1.6; margin-top: var(--s3); }

.btn-lg { padding: 12px 22px; font-size: 14.5px; border-radius: 10px; }
.btn-lg.btn-primary { box-shadow: 0 8px 26px -10px rgba(255, 90, 31, 0.55); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 5.5vw, 80px); }
/* faint ruled grid, faded out toward the edges — texture, not decoration */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
.hero-copy .lede { max-width: 46ch; }
.hero-cta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.hero-proof {
  display: flex; gap: var(--s5); flex-wrap: wrap;
  margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--border);
}
.hero-proof div { font-size: 12.5px; color: var(--text-faint); display: flex; align-items: center; gap: 7px; }
.hero-proof .icon { width: 14px; height: 14px; color: var(--amber); }

/* ---------- the visual moment: layered session mockup ---------- */
.mock-stage { position: relative; perspective: 1600px; }
.mock-stage::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -6%; height: 40px;
  background: radial-gradient(60% 100% at 50% 50%, rgba(0,0,0,0.42), transparent 70%);
  filter: blur(10px); z-index: 0;
}
html[data-theme="light"] .mock-stage::after { background: radial-gradient(60% 100% at 50% 50%, rgba(16,20,28,0.16), transparent 70%); }

.mock {
  position: relative; z-index: 1;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 40px 80px -32px rgba(0,0,0,0.72), 0 0 0 1px var(--hairline) inset;
  transform: rotateY(-7deg) rotateX(2.5deg) translateZ(0);
  transform-origin: right center;
  overflow: hidden;
}
html[data-theme="light"] .mock { box-shadow: 0 40px 80px -34px rgba(16,20,28,0.34); }

.mock-chrome {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s4); border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.mock-dots { display: flex; gap: 6px; }
.mock-dots i { width: 9px; height: 9px; border-radius: 999px; background: var(--border); display: block; }
.mock-chrome .where { font-size: 11.5px; color: var(--text-faint); }
.mock-body { padding: var(--s4) var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s3); }

.mock-msg { display: flex; gap: 10px; max-width: 92%; }
.mock-msg .who {
  width: 22px; height: 22px; border-radius: 999px; flex: none;
  display: grid; place-items: center; font-size: 9px; font-weight: 700;
  background: var(--amber-deep); color: #FFFCF6;
}
.mock-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.mock-msg.me .who { background: var(--bubble-user); color: var(--text-dim); border: 1px solid var(--border); }
.mock-bubble {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 11px; padding: 9px 13px; font-size: 12.5px; line-height: 1.55;
}
.mock-msg.me .mock-bubble { background: var(--bubble-user); }
.mock-bubble .q-label {
  display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--amber); font-weight: 700; margin-bottom: 5px;
}

/* the marked-answer panel, deliberately overlapping the card edge */
.mock-mark {
  position: absolute; z-index: 2;
  right: -34px; bottom: -38px; width: 328px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--amber-line);
  background: linear-gradient(180deg, var(--amber-soft), transparent 62%), var(--surface-1);
  box-shadow: 0 26px 54px -20px rgba(0,0,0,0.7);
}
html[data-theme="light"] .mock-mark { box-shadow: 0 26px 54px -22px rgba(16,20,28,0.3); }
.mock-mark .mh {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: 11px var(--s4); border-bottom: 1px solid var(--border);
}
.mock-mark .mh b { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.mock-mark .mh span { font-size: 11px; color: var(--text-faint); }
.mock-ao { padding: 9px var(--s4); font-size: 11.5px; display: flex; gap: var(--s2); align-items: flex-start; }
.mock-ao + .mock-ao { border-top: 1px solid var(--border); }
.mock-ao .k { font-weight: 650; flex: none; }
.mock-ao .k.hit { color: var(--green); }
.mock-ao .k.miss { color: var(--red); }
.mock-ao .t { color: var(--text-dim); line-height: 1.45; }

/* the retest chip floating off the other corner */
.mock-chip {
  position: absolute; z-index: 3; left: -30px; bottom: -7%; width: 220px;
  border-radius: 11px; padding: 11px var(--s3);
  border: 1px solid var(--red-line); border-left: 2px solid var(--red);
  background: var(--surface-1);
  box-shadow: 0 20px 44px -18px rgba(0,0,0,0.68);
}
html[data-theme="light"] .mock-chip { box-shadow: 0 20px 44px -20px rgba(16,20,28,0.26); }
.mock-chip .lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--red); font-weight: 700; }
.mock-chip .txt { font-size: 12px; font-weight: 550; margin-top: 5px; line-height: 1.4; }
.mock-chip .sub { font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }

/* ---------- generic public sections ---------- */
.sec { padding: clamp(56px, 7vw, 96px) 0; position: relative; }
.sec.ruled { border-top: 1px solid var(--border); }
.sec-head { max-width: 620px; margin-bottom: var(--s7); }

/* features: asymmetric — one lead panel, then a stacked column */
.feat-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: var(--s5); align-items: stretch; }
.feat-col { display: flex; flex-direction: column; gap: var(--s4); }
.feat-col .feat { flex: 1; }
.feat {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  transition: border-color 160ms ease, transform 160ms ease;
}
.feat:hover { border-color: var(--amber-line); transform: translateY(-2px); }
.feat-ico {
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--amber);
}
.feat-ico .icon { width: 18px; height: 18px; }
.feat h3 { font-size: 16px; letter-spacing: -0.015em; }
.feat p { font-size: 14px; color: var(--text-dim); line-height: 1.68; }
.feat.lead h3 { font-size: 21px; }
.feat.lead p { font-size: 15px; line-height: 1.65; max-width: 44ch; }
.feat.lead .demo {
  margin-top: var(--s2);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
}

/* how it works: numbered rail with connecting arrows */
.steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--s4); align-items: start; counter-reset: step; }
.step { position: relative; padding-top: var(--s5); border-top: 2px solid var(--border); }
.step.on { border-top-color: var(--amber); }
.step .n {
  font-size: 26px; font-weight: 750; color: var(--amber);
  letter-spacing: -0.02em; line-height: 1;
}
.step h3 { font-size: 17px; margin-top: var(--s3); letter-spacing: -0.02em; }
.step p { font-size: 14px; color: var(--text-dim); line-height: 1.62; margin-top: var(--s2); }
.step-arrow {
  display: flex; align-items: center; justify-content: center;
  padding-top: var(--s5); color: var(--text-faint);
}
.step-arrow .icon { width: 16px; height: 16px; }

/* ---------- pricing ---------- */
.notice {
  display: flex; gap: var(--s3); align-items: flex-start;
  border: 1px solid var(--amber-line); border-left: 3px solid var(--amber);
  background: var(--amber-soft); color: var(--text);
  border-radius: var(--r-md); padding: var(--s4) var(--s5);
  font-size: 13.5px; line-height: 1.55;
}
.notice .icon { color: var(--amber); margin-top: 2px; }
.notice b { font-weight: 650; }
.notice.draft { border-color: var(--border); border-left-color: var(--text-faint); background: var(--surface-2); }
.notice.draft .icon { color: var(--text-faint); }

.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; }
.tier .push { margin-top: auto; }
.tier {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 14px; padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4);
}
.tier.featured {
  border-color: var(--amber-line);
  background: linear-gradient(180deg, var(--amber-soft), transparent 34%), var(--surface-1);
  box-shadow: 0 24px 60px -34px rgba(255, 90, 31, 0.5);
  position: relative;
}
.tier-name { display: flex; align-items: center; gap: var(--s3); }
.tier-name h3 { font-size: 17px; letter-spacing: -0.02em; }
.price { display: flex; align-items: baseline; gap: 6px; }
.price .amt { font-size: 44px; font-weight: 680; letter-spacing: -0.04em; line-height: 1; }
.price .per { font-size: 13.5px; color: var(--text-faint); }
.tier .blurb { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
.tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.tier li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.tier li .icon { width: 15px; height: 15px; margin-top: 3px; flex: none; color: var(--green); }
.tier li.off { color: var(--text-faint); }
.tier li.off .icon { color: var(--text-faint); }
.tier li b { font-weight: 620; }

/* faq */
.faq { display: flex; flex-direction: column; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s4) 0;
  font-size: 15px; font-weight: 570; display: flex; align-items: center; gap: var(--s4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { margin-left: auto; color: var(--text-faint); transition: transform 160ms ease; }
.faq details[open] summary .icon { transform: rotate(90deg); color: var(--amber); }
.faq .ans { padding: 0 0 var(--s5); font-size: 13.5px; color: var(--text-dim); line-height: 1.68; max-width: 74ch; }
.faq .ans p + p { margin-top: var(--s3); }

/* ---------- closing CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  border: 1px solid var(--amber-line); border-radius: 16px;
  background: linear-gradient(160deg, var(--amber-soft) 0%, transparent 42%), var(--surface-1);
  padding: clamp(36px, 5vw, 64px);
  display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.45;
  background: radial-gradient(520px 260px at 92% 120%, var(--glow-warm), transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band .grow { min-width: 300px; }

/* ---------- legal / document pages ---------- */
.doc { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); }
.doc-head { margin-bottom: var(--s6); }
.doc-head .display { font-size: clamp(32px, 3.4vw, 44px); }
.doc-meta { font-size: 12.5px; color: var(--text-faint); margin-top: var(--s3); }
.doc-toc {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-1); padding: var(--s4) var(--s5); margin: var(--s5) 0 var(--s6);
}
.doc-toc .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.doc-toc ol { margin: var(--s3) 0 0; padding-left: var(--s5); columns: 2; column-gap: var(--s6); font-size: 13px; }
.doc-toc li { margin-bottom: 5px; color: var(--text-dim); break-inside: avoid; }
.doc-toc a:hover { color: var(--amber); }

.doc-body { font-size: 14.5px; line-height: 1.72; color: var(--text-dim); }
.doc-body h2 {
  font-size: 19px; letter-spacing: -0.02em; color: var(--text);
  margin: var(--s7) 0 var(--s3); scroll-margin-top: 88px;
}
.doc-body h2 .num { color: var(--amber); font-variant-numeric: tabular-nums; margin-right: 10px; }
.doc-body h3 { font-size: 14.5px; color: var(--text); margin: var(--s5) 0 var(--s2); }
.doc-body p + p { margin-top: var(--s3); }
.doc-body ul { margin: var(--s3) 0; padding-left: var(--s5); }
.doc-body li { margin-bottom: var(--s2); }
.doc-body strong { color: var(--text); font-weight: 620; }
.doc-body a.inline { color: var(--amber); border-bottom: 1px solid var(--amber-line); }
.doc-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
}
.doc-body em { font-style: italic; color: var(--text); }
.doc-body .callout {
  border: 1px solid var(--border); border-left: 3px solid var(--amber);
  background: var(--surface-1); border-radius: var(--r-md);
  padding: var(--s4) var(--s5); margin: var(--s4) 0; font-size: 13.5px;
}

/* ---------- footer ---------- */
.pub-foot { border-top: 1px solid var(--border); padding: var(--s7) 0 var(--s6); margin-top: var(--s6); }
.foot-grid { display: flex; gap: var(--s7); align-items: flex-start; flex-wrap: wrap; }
.foot-brand { max-width: 300px; display: flex; flex-direction: column; gap: var(--s3); }
.foot-brand p { font-size: 12.5px; color: var(--text-faint); line-height: 1.6; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col .h { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.foot-col a { font-size: 13px; color: var(--text-dim); }
.foot-col a:hover { color: var(--amber); }
.foot-base {
  margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  font-size: 12px; color: var(--text-faint);
}

/* ---------- one directed load sequence ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes riseMock {
  from { opacity: 0; transform: rotateY(-7deg) rotateX(2.5deg) translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: rotateY(-7deg) rotateX(2.5deg) translateY(0) scale(1); }
}
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }

.hero [data-rise] { opacity: 0; animation: rise 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.hero [data-rise="1"] { animation-delay: 60ms; }
.hero [data-rise="2"] { animation-delay: 140ms; }
.hero [data-rise="3"] { animation-delay: 220ms; }
.hero [data-rise="4"] { animation-delay: 300ms; }
.hero .mock { opacity: 0; animation: riseMock 820ms cubic-bezier(0.22, 1, 0.36, 1) 260ms forwards; }
.hero .mock-chip { opacity: 0; animation: pop 520ms cubic-bezier(0.22, 1, 0.36, 1) 760ms forwards; }
.hero .mock-mark { opacity: 0; animation: pop 560ms cubic-bezier(0.22, 1, 0.36, 1) 900ms forwards; }

/* scroll reveal for the rest of the page (js adds .in) */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }

/* Settings > Appearance > Reduce motion. "on" forces it regardless of the OS;
   "off" overrides the OS media query the other way; "auto" (no attribute)
   just defers to prefers-reduced-motion below. */
html[data-motion="on"] * { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="off"]) * { transition: none !important; animation: none !important; }
  .hero [data-rise], .hero .mock, .hero .mock-chip, .hero .mock-mark { animation: none; opacity: 1; }
  .hero .mock { transform: rotateY(-7deg) rotateX(2.5deg); }
  .reveal { opacity: 1; transform: none; transition: none; }
  .feat:hover { transform: none; }
}

/* ---------- narrower desktop / tablet fallbacks ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .mock { transform: none; }
  .hero .mock { animation-name: rise; }
  .mock-chip { display: none; }
  .mock-mark { right: -12px; bottom: -22px; }
  .feat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .wrap, .wrap-narrow { width: calc(100% - 40px); }
  .steps { grid-template-columns: 1fr; }
  .step-arrow { display: none; }
  .tiers { grid-template-columns: 1fr; }
  .doc-toc ol { columns: 1; }
  .mock-mark { position: static; width: auto; margin-top: var(--s4); }
}

/* ==========================================================================
   AUTH PAGES (login / signup) — same tokens, same public-page atmosphere
   ========================================================================== */
.auth-page {
  min-height: calc(100vh - 68px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(28px, 7vh, 72px) var(--s5) var(--s7);
}
.auth-card {
  width: min(420px, 100%);
  background: var(--surface-1); border: 1px solid rgba(23, 35, 29, 0.14);
  border-radius: var(--r-lg); padding: var(--s6);
  box-shadow: 0 6px 20px -10px rgba(23, 35, 29, 0.14);
}
.auth-card h1 { font-size: 24px; letter-spacing: -0.01em; }
.auth-sub { font-size: 13.5px; color: var(--text-dim); margin-top: var(--s2); }
.auth-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  font-size: 12.5px; font-weight: 550;
  color: var(--text-dim); margin: var(--s4) 0 var(--s2);
}
.auth-label .opt { color: var(--text-faint); font-weight: 400; }
.auth-label-link { font-size: 12px; font-weight: 550; color: var(--amber); }
.auth-label-link:hover { text-decoration: underline; }
.auth-input {
  width: 100%; min-width: 0; padding: 10px var(--s3); font-size: 14px;
  background: #FDFBF7; border: 1px solid rgba(23, 35, 29, 0.18); color: var(--text);
}
.auth-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.auth-hint { font-size: 11.5px; color: var(--text-faint); margin-top: var(--s2); }
.auth-pw-field { position: relative; }
.auth-pw-field .auth-input { padding-right: 40px; }
.auth-pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--text-faint);
}
.auth-pw-toggle:hover { color: var(--text-dim); background: var(--surface-2); }
.auth-pw-toggle .icon { width: 16px; height: 16px; }
.auth-pw-toggle .icon.off { display: none; }
.auth-pw-toggle.on .icon.on { display: none; }
.auth-pw-toggle.on .icon.off { display: block; }
.auth-submit {
  width: 100%; justify-content: center; margin-top: var(--s5);
  box-shadow: 0 6px 18px -10px rgba(255, 90, 31, 0.45);
}
.auth-submit:disabled { opacity: 0.6; cursor: default; }
.auth-msg {
  margin-top: var(--s4); font-size: 12.5px; border-radius: var(--r-md);
  padding: var(--s2) var(--s3);
  background: var(--red-soft); border: 1px solid var(--red-line); color: var(--red);
}
.auth-msg.ok { background: var(--green-soft); border-color: transparent; color: var(--green); }
.auth-alt { margin-top: var(--s5); font-size: 13px; color: var(--text-dim); text-align: center; }
.auth-alt a, .auth-fine a { color: var(--amber); font-weight: 600; }
.auth-fine {
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-faint); line-height: 1.55;
}
.auth-done h2 { font-size: 17px; margin-bottom: var(--s2); }
.auth-done p { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }

/* ---------- Google sign-in ---------- */
.btn-google {
  width: 100%; justify-content: center; gap: var(--s3);
  padding: 12px 22px; font-size: 14.5px; font-weight: 600;
  background: #FFFFFF; border: 1px solid rgba(23, 35, 29, 0.22); border-radius: var(--r-md);
}
.btn-google:hover { border-color: rgba(23, 35, 29, 0.34); }
.btn-google:disabled { opacity: 0.6; cursor: default; }
.btn-google .g-mark { display: inline-flex; align-items: center; flex: 0 0 auto; }

.auth-or {
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s5) 0 var(--s1); color: var(--text-faint); font-size: 11px;
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border); opacity: 0.7;
}

/* ---------- roomier signup card ----------
   Same tokens, just stepped up the spacing scale: 420 -> 560 wide, s6 -> s7
   padding, and every field/label given the next size up. */
.auth-card-lg { width: min(560px, 100%); padding: var(--s7); }
.auth-card-lg h1 { font-size: 30px; }
.auth-card-lg .auth-sub { font-size: 15px; margin-top: var(--s3); }
.auth-card-lg .auth-label { font-size: 13px; margin: var(--s5) 0 var(--s2); }
.auth-card-lg .auth-input { padding: 13px var(--s4); font-size: 15px; border-radius: var(--r-lg); }
.auth-card-lg .btn-google { padding: 14px var(--s4); font-size: 15px; border-radius: var(--r-lg); }
.auth-card-lg .auth-or { margin: var(--s6) 0 var(--s2); }
.auth-card-lg .auth-submit { margin-top: var(--s6); padding: 14px 22px; font-size: 15.5px; }
.auth-card-lg .auth-alt { margin-top: var(--s6); font-size: 13.5px; }
.auth-card-lg .auth-fine { margin-top: var(--s5); padding-top: var(--s5); }
.auth-card-lg .auth-msg { margin-top: var(--s5); padding: var(--s3) var(--s4); font-size: 13px; }

/* The card's heading can be followed directly by the Google button now that the
   sub-line is gone — keep the gap the sub-line used to provide. */
.auth-card h1 + .btn-google,
.auth-card .auth-sub + .btn-google { margin-top: var(--s5); }
.auth-card-lg h1 + .btn-google,
.auth-card-lg .auth-sub + .btn-google { margin-top: var(--s6); }

/* Login centres its heading block; the labelled form fields underneath stay
   left-aligned, because centred field labels are harder to scan. */
.auth-card-centred h1,
.auth-card-centred .auth-sub { text-align: center; }
.auth-card-centred .auth-alt { text-align: center; }

/* The cross-link under the form ("New here? / Sign up for free!").
   The prefix and the link sit on separate lines on purpose: on one line the
   prefix pushes the link off the card's centre axis, which reads as broken
   even though the line as a whole is centred. */
.auth-alt-cta {
  display: inline-block; margin-top: var(--s1);
  font-size: 14px; font-weight: 600;
}
.auth-alt-cta:hover { text-decoration: underline; }

/* ==========================================================================
   FIRST-RUN ONBOARDING
   ==========================================================================
   Shown once per browser, gated on the rr-onboarded flag in localStorage. It
   is plain explanation, not a product tour: a brand-new student has no idea
   what a "subtopic" or a "retest date" is, and every list on every page is
   empty until they run their first session. Built from existing tokens only —
   this is a comprehension fix, not a visual redesign. */
.onb-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 10, 14, 0.66);
  display: flex; align-items: center; justify-content: center; padding: var(--s4);
}
.onb-card {
  width: min(520px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--s5);
}
.onb-card h2 { font-size: 18px; letter-spacing: -0.01em; }
.onb-card > p { font-size: 13.5px; color: var(--text-dim); margin-top: var(--s2); line-height: 1.6; }
.onb-list { display: flex; flex-direction: column; gap: var(--s3); margin: var(--s5) 0; }
.onb-item { display: flex; gap: var(--s3); align-items: flex-start; }
.onb-item b {
  flex: 0 0 auto; min-width: 22px; height: 22px; border-radius: var(--r-sm);
  background: var(--amber-soft); color: var(--amber);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
}
.onb-item div { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.onb-item div strong { color: var(--text); font-weight: 600; }
.onb-card .btn { width: 100%; justify-content: center; }

/* ---------- planner ---------- */
[data-page="planner"] .page-head .sub { font-size: 12.5px; color: var(--text-faint); }
[data-page="planner"] .content { gap: var(--s3); }
.module-plan { border-left: 3px solid var(--border); }
.module-plan.tier-now { border-left-color: var(--red); }
.module-plan.tier-soon { border-left-color: var(--amber); }
.module-plan.tier-later { border-left-color: var(--border); }

/* compact summary line — not a card, sits right under the page-head */
.plan-summary {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; position: relative;
}
.plan-stats { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.plan-stat b { font-weight: 800; color: var(--text); }
.plan-stat .lbl { color: var(--text-faint); font-weight: 400; margin-left: 3px; }
.plan-stat.s-primary { font-size: 15px; }
.plan-stat.s-primary b { font-size: 17px; }
.plan-stat.s-secondary { font-size: 13px; }
.plan-stat.s-secondary b { font-size: 14px; }
.plan-stat.s-quiet { font-size: 12px; }
.plan-stat.s-quiet b { font-size: 12.5px; color: var(--text-dim); }
.plan-why-btn {
  margin-left: auto; background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-faint);
}
.plan-why-btn:hover { color: var(--text-dim); }
.plan-why-btn .icon { width: 13px; height: 13px; }
.plan-why-body {
  display: none; flex-basis: 100%; font-size: 12px; color: var(--text-faint); margin-top: -2px;
}
.plan-why-body.open { display: block; }

/* Today — the one hero module */
.plan-hero { padding: var(--s4) var(--s5) var(--s3); }
.plan-hero + .plan-hero { border-top: 1px solid var(--border); }
.plan-hero-code {
  font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 600; color: var(--text-faint);
}
.plan-hero-title { font-size: 20px; font-weight: 700; color: var(--text); margin-top: 1px; }
.plan-hero-stat {
  display: flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 600; color: var(--red); margin-top: var(--s2);
}
.plan-hero-stat-icon { width: 15px; height: 15px; }
.plan-hero-list { margin-top: var(--s2); display: flex; flex-direction: column; max-width: 640px; }
.plan-hero-item {
  display: flex; justify-content: space-between; gap: var(--s3);
  font-size: 13.5px; color: var(--text-dim); padding: 7px 0; border-top: 1px solid var(--surface-2);
}
.plan-hero-item:first-child { border-top: 0; padding-top: 0; }
.plan-hero-item b { color: var(--text); font-weight: 550; }
.plan-hero-item span { flex: none; color: var(--red); font-weight: 600; white-space: nowrap; }
.plan-hero-more { font-size: 12px; color: var(--text-faint); }
.plan-hero-cta { margin-top: var(--s2); justify-content: center; max-width: 260px; }

/* This week / Later — compact, one line, whole row is the link */
.plan-compact {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5); border-left: 2px solid transparent;
  color: inherit; text-decoration: none;
}
.plan-compact + .plan-compact { border-top: 1px solid var(--border); }
.plan-compact:hover { background: var(--surface-2); }
.plan-compact:hover .pc-arrow { opacity: 1; transform: translateX(2px); }
.plan-compact.is-urgent { border-left-color: var(--red); }
.pc-code {
  flex: none; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500;
  color: var(--text-faint); width: 46px;
}
.pc-title { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-status { flex: none; }
.pc-status .tag { font-size: 10px; padding: 1px 7px; background: none; color: var(--text-faint); }
.pc-meta { flex: none; width: 100px; text-align: right; font-size: 12px; color: var(--text-faint); }
.pc-arrow { flex: none; color: var(--amber); opacity: 0; transition: transform 120ms ease, opacity 120ms ease; }

.plan-foot {
  display: block; padding: var(--s3) var(--s5); border-top: 1px solid var(--border);
  background: none; font-size: 11.5px; color: var(--text-faint); text-decoration: none;
}
.plan-foot:hover { color: var(--text-dim); text-decoration: underline; }

@media (max-width: 720px) {
  .plan-compact { flex-wrap: wrap; }
  .pc-title { flex-basis: 100%; order: -1; }
  .pc-arrow { opacity: 1; }
}