@import url('fonts.css');

:root {
  --page-bg:      #10152A;
  --surface:      #191F3D;
  --panel-2:      #212952;
  --ink:          #F2EFE6;
  --ink-secondary:#C7CCE6;
  --ink-muted:    #9BA3C9;
  --border:       #2A3363;
  --border-strong:#3D4780;
  --accent:       #E7B34B;
  --accent-dark:  #C99A3D;
  --accent-ink:   #1A1200;
  --accent-wash:  rgba(231,179,75,0.14);
  --good:         #52D999;
  --good-wash:    rgba(82,217,153,0.14);
  --good-text:    #52D999;
  --warning:      #E7B34B;
  --warning-wash: rgba(231,179,75,0.14);
  --warning-text: #E7B34B;
  --critical:     #E7676B;
  --critical-wash:rgba(231,103,107,0.14);
  --critical-text:#E7676B;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -16px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Sora', 'Inter', sans-serif; line-height: 1.25; margin: 0 0 4px; }
p { line-height: 1.55; }
a { color: var(--accent); }

/* Topbar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.topbar-nav { display: flex; align-items: center; gap: 24px; }
.topbar-nav a { font-size: 14px; }
.logout-link { font-size: 14px; color: var(--ink-secondary); text-decoration: none; }
.logout-link:hover { color: var(--ink); text-decoration: underline; }

.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Buttons */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.05s ease, box-shadow 0.15s ease, filter 0.12s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--ink-muted); }
.btn-large { padding: 14px 28px; font-size: 16px; white-space: nowrap; }

/* Gate + admin login + student auth */
.gate-body, .auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #171D3D 0%, var(--page-bg) 320px);
  padding: 24px;
}
.gate-card, .auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 36px 32px;
  width: 360px;
  text-align: center;
}
.auth-brand {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
/* Larger here on purpose: pre-login there is no other context, so the mark
   carries the introduction rather than sitting quietly in persistent chrome. */
.auth-brand img { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; display: block; }
.gate-card h1, .auth-card h1 { font-size: 22px; }
.auth-sub, .gate-card p { color: var(--ink-secondary); font-size: 14px; margin-top: 6px; }
.gate-card input, .auth-card input {
  width: 100%;
  padding: 11px 14px;
  margin: 8px 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--page-bg);
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
}
.gate-card input::placeholder, .auth-card input::placeholder { color: var(--ink-muted); }
.gate-card input:focus, .auth-card input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.auth-card label { display: block; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-secondary); margin-top: 4px; }
.gate-card button, .auth-card button {
  width: 100%;
  padding: 11px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
}
.gate-card button:hover, .auth-card button:hover { filter: brightness(1.08); }
.auth-switch { margin-top: 20px; font-size: 14px; color: var(--ink-secondary); }
.error { color: var(--critical-text); font-size: 14px; background: var(--critical-wash); padding: 8px 12px; border-radius: var(--radius-sm); }
.success { color: var(--good-text); font-size: 14px; background: var(--good-wash); padding: 8px 12px; border-radius: var(--radius-sm); }

/* Brand mark in the topbar */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}
/* Size lives here, not in the 12 templates that embed the mark — the topbar
   height is derived from it, so a stray value makes the header jump on nav. */
.brand img { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; display: block; }
.brand span {
  font-family: 'Sora', sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Mark + page title together, so pages that need context (a chapter name)
   still carry the brand and a way home. */
.topbar-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.topbar-left h1 { margin: 0; }

.container-wide { max-width: 1120px; }

/* Narrow screens: the logo mark alone carries the brand so the nav fits */
@media (max-width: 620px) {
  .topbar { padding: 12px 16px; gap: 10px; }
  .brand span { display: none; }
  .topbar-nav { gap: 14px; }
  .topbar-nav a { font-size: 13px; }
}

/* Dashboard hero — artwork sits behind a scrim so the copy stays readable */
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 20px;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(231,179,75,0.16), transparent 55%),
    linear-gradient(135deg, rgba(82,217,153,0.08), transparent 60%),
    var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 34px 36px;
  margin-bottom: 30px;
}
.hero-copy { position: relative; z-index: 2; }
.hero-eyebrow {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); margin: 0 0 8px;
}
.hero h2 { font-size: 30px; letter-spacing: -0.02em; margin-bottom: 8px; }
.hero-sub { color: var(--ink-secondary); font-size: 14.5px; max-width: 440px; margin: 0 0 20px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chip {
  font-size: 12px; color: var(--ink-secondary);
  background: rgba(16,21,42,0.55); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px;
}
.chip b { color: var(--accent); font-family: 'JetBrains Mono', monospace; }

.hero-art { position: relative; z-index: 1; align-self: stretch; }
.hero-art img {
  position: absolute;
  inset: -34px -36px -34px 0;
  width: calc(100% + 36px);
  height: calc(100% + 68px);
  object-fit: cover;
  object-position: center;
  opacity: 0.5;
  /* fade the artwork into the panel instead of ending in a hard bright edge */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 55%);
  mask-image: linear-gradient(to right, transparent, #000 55%);
}
@media (max-width: 780px) {
  .hero { grid-template-columns: 1fr; padding: 26px 22px; }
  .hero h2 { font-size: 24px; }
  .hero-art { display: none; }
}

.section-head { margin: 0 0 14px; }
.section-head h2 { font-size: 17px; }
.section-head .panel-sub { margin-bottom: 0; }
.panel-icon { margin-right: 6px; }

/* Learning-aid quest cards */
.quest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}
.quest-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.08s ease, background 0.15s ease;
}
.quest-card:hover {
  border-color: var(--accent);
  background: var(--panel-2);
  transform: translateY(-2px);
}
.quest-card.is-won { border-color: rgba(82,217,153,0.5); }
.quest-icon {
  font-size: 22px; line-height: 1;
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-wash);
  border: 1px solid var(--border);
}
.quest-card.is-won .quest-icon { background: var(--good-wash); }
.quest-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.quest-name { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; }
.quest-chapter { font-size: 12.5px; color: var(--accent); font-weight: 600; }
.quest-blurb { font-size: 12.5px; color: var(--ink-muted); line-height: 1.45; margin-top: 4px; }
.quest-foot { display: flex; flex-direction: column; gap: 7px; }
.quest-bar { height: 4px; border-radius: 999px; background: var(--border-strong); overflow: hidden; }
.quest-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.quest-card.is-won .quest-bar-fill { background: var(--good); }
.quest-meta { font-size: 11.5px; color: var(--ink-muted); font-family: 'JetBrains Mono', monospace; }
.quest-badge { font-size: 11.5px; color: var(--good-text); font-weight: 700; }

.empty-state { text-align: center; color: var(--ink-secondary); padding: 40px 24px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-icon { font-size: 17px; margin-bottom: 2px; }
.stat-value { font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-label { font-size: 13px; color: var(--ink-muted); }

/* auto-fit so a lone panel fills the row instead of leaving dead space beside it */
.dashboard-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  align-items: start;
}
@media (max-width: 720px) { .dashboard-columns { grid-template-columns: 1fr; } }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.panel h2 { font-size: 16px; }
.panel-sub { color: var(--ink-muted); font-size: 13px; margin: 4px 0 16px; }

.history-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.history-table th {
  text-align: left; font-size: 12px; color: var(--ink-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.history-table td { padding: 10px 4px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.history-table tr:last-child td { border-bottom: none; }

/* Areas-of-improvement list (shared by dashboard + results) */
.improvement-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.improvement-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  padding: 8px;
  border-radius: var(--radius-sm);
}
.improvement-item:hover { background: var(--accent-wash); }
.improvement-bar-track { height: 6px; border-radius: 999px; background: var(--border-strong); overflow: hidden; }
.improvement-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.improvement-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.improvement-topic { font-size: 14px; font-weight: 600; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.improvement-chapter { font-size: 12px; color: var(--ink-muted); }
.improvement-pct { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-secondary); }
.improvement-item-static:hover { background: none; }
.timer-bar { background: var(--warning); }
.timeout-notice {
  font-size: 13px; font-weight: 600; color: var(--warning-text); background: var(--warning-wash);
  padding: 8px 14px; border-radius: var(--radius-sm); margin: -8px 0 20px; display: inline-block;
}

/* Adaptive quiz meta / progress */
.adaptive-meta { margin-bottom: 16px; }
.adaptive-progress-track { height: 6px; border-radius: 999px; background: var(--border-strong); overflow: hidden; margin-bottom: 10px; }
.adaptive-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.25s ease; }
.adaptive-meta-row { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }

.chapter-tag { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: capitalize; margin-bottom: 10px; }

/* Countdown timer */
.timer-wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.timer-track { flex: 1; height: 10px; border-radius: 999px; background: var(--border-strong); overflow: hidden; }
.timer-fill { height: 100%; border-radius: 999px; background: var(--good); width: 100%; transition: width 1s linear, background-color 0.4s ease; }
.timer-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 68px;
  text-align: right;
  color: var(--ink);
  transition: color 0.4s ease;
}
.timer-wrap.timer-warning .timer-fill { background: var(--warning); }
.timer-wrap.timer-warning .timer-text { color: var(--warning-text); }
.timer-wrap.timer-critical .timer-fill { background: var(--critical); }
.timer-wrap.timer-critical .timer-text { color: var(--critical); animation: timer-pulse 0.9s ease-in-out infinite; }
@keyframes timer-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* Exam paper mode — one overall timer for the whole paper */
.exam-timer-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.exam-timer-label { font-size: 13px; font-weight: 600; color: var(--ink-secondary); white-space: nowrap; }
.exam-timer-track { flex: 1; }
.exam-timer-text { font-size: 28px; min-width: 84px; }
.exam-timer-wrap.timer-warning .exam-timer-text { color: var(--warning-text); }
.exam-timer-wrap.timer-critical .exam-timer-text { color: var(--critical); animation: timer-pulse 0.9s ease-in-out infinite; }
.exam-timer-wrap.timer-warning .timer-fill { background: var(--warning); }
.exam-timer-wrap.timer-critical .timer-fill { background: var(--critical); }

.exam-palette { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.exam-palette-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.exam-palette-btn:hover { border-color: var(--accent); color: var(--accent); }
.exam-palette-btn.answered { background: var(--good-wash); border-color: var(--good); color: var(--good-text); }
.exam-palette-btn.current { outline: 2px solid var(--accent); outline-offset: 2px; }

.option-btn.selected { border-color: var(--accent); background: var(--accent-wash); }

.exam-paper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
}
.exam-paper-row:hover { background: var(--accent-wash); }
.exam-paper-row-name { font-weight: 600; font-size: 14px; }
.exam-paper-row-meta { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.exam-nav button { flex: 0 0 auto; }

/* ---------------------------------------------------------------
   Practice screen — persistent chapter sidebar + question detail pane.
   Chapters switch in place, so browsing never costs a level of depth.
   --------------------------------------------------------------- */
.practice-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 36px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 24px 72px;
  align-items: start;
}

.practice-sidebar {
  position: sticky;
  top: 81px;
  max-height: calc(100vh - 105px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.practice-search input {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
}
.practice-search input::placeholder { color: var(--ink-muted); }
.practice-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.chapter-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  padding-right: 4px;
}
.chapter-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  text-decoration: none;
  color: var(--ink-secondary);
  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.chapter-nav-item:hover { background: var(--surface); color: var(--ink); }
.chapter-nav-item.is-selected {
  background: var(--accent-wash);
  color: var(--ink);
  font-weight: 600;
}
.chapter-nav-item.is-empty { opacity: 0.35; }
.chapter-nav-name { min-width: 0; }
.chapter-nav-count {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.chapter-nav-item.is-selected .chapter-nav-count { color: var(--accent); }

.practice-pane { min-width: 0; }
.practice-pane.is-loading { opacity: 0.45; }

.pane-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.pane-heading h2 { font-size: 24px; letter-spacing: -0.02em; }
.pane-meta { color: var(--ink-muted); font-size: 13px; margin: 5px 0 0; }
.pane-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pane-actions .btn-primary,
.pane-actions .btn-secondary { padding: 9px 18px; font-size: 14px; }
.pane-empty { color: var(--ink-muted); margin-top: 28px; }

.subskill-section { margin-top: 26px; }
.subskill-header {
  position: sticky;
  top: 57px;
  z-index: 4;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
}
.subskill-header h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
}
.subskill-practice {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
.subskill-practice:hover { color: var(--accent); }

.question-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 12px 13px 10px;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink-secondary);
  transition: background 0.12s ease, color 0.12s ease;
}
.question-row:last-child { border-bottom: none; }
.question-row:hover { background: var(--surface); color: var(--ink); }
.question-row-num {
  flex: 0 0 auto;
  width: 20px;
  padding-top: 1px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.question-row-text { font-size: 14px; line-height: 1.55; min-width: 0; }
/* Figures read as their own block — inline images leave text wrapping around
   the diagram in a column too narrow to follow. */
.question-row-text img {
  display: block;
  max-width: min(100%, 340px);
  height: auto;
  margin: 4px 0 8px;
  border-radius: 6px;
}
.question-row-tag {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 860px) {
  .practice-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 16px 16px 56px;
  }
  .practice-sidebar {
    position: static;
    max-height: none;
  }
  .chapter-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
  }
  .chapter-nav-item {
    flex: 0 0 auto;
    border: 1px solid var(--border);
  }
  .subskill-header { top: 0; }
  .pane-heading h2 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-nav-item, .question-row { transition: none; }
}

.badge {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.badge-easy { background: var(--good-wash); color: var(--good-text); }
.badge-medium { background: var(--warning-wash); color: var(--warning-text); }
.badge-hard { background: var(--critical-wash); color: var(--critical-text); }

/* Quiz */
.quiz-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
  margin-bottom: 16px;
}
#qtext { font-size: 17px; line-height: 1.5; margin-bottom: 18px; }
#qtext img, .opt-text img, .katex-preview img { max-width: 320px; width: 100%; height: auto; display: block; margin: 4px 0 10px; border-radius: 8px; }
.opt-text img, .katex-preview li img { display: inline-block; max-width: 160px; margin: 0 6px -6px 0; vertical-align: middle; }
#options { display: flex; flex-direction: column; gap: 8px; }
.option-btn {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.1s ease, background 0.1s ease;
}
.option-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-wash); }
.option-btn:disabled { cursor: default; opacity: 1; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.option-btn:disabled .katex { color: var(--ink); }
.option-btn.correct { border-color: var(--good); background: var(--good-wash); }
.option-btn.incorrect { border-color: var(--critical); background: var(--critical-wash); }
.opt-letter { font-weight: 700; color: var(--ink-muted); min-width: 18px; }

#feedback, .feedback-correct, .feedback-incorrect {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
}
.feedback-correct { color: var(--good-text); }
.feedback-incorrect { color: var(--critical-text); }

.quiz-container { padding-bottom: 96px; }
.quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 880px;
  margin: 0 auto;
  padding: 16px 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.quiz-nav button {
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.quiz-nav button:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.quiz-nav .btn-primary, .quiz-nav .btn-primary:not(:disabled):hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.quiz-nav .btn-primary:not(:disabled):hover { filter: brightness(1.08); }
.quiz-nav button:disabled { opacity: 0.4; cursor: default; }

/* Results page */
.results-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.results-score-ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 6px solid var(--border-strong);
}
.results-score-num { font-family: 'JetBrains Mono', monospace; font-size: 30px; font-weight: 800; line-height: 1; }
.results-score-label { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.results-score-ring.status-good { border-color: var(--good); }
.results-score-ring.status-warning { border-color: var(--warning); }
.results-score-ring.status-critical { border-color: var(--critical); }
.results-band { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.status-text-good { color: var(--good-text); }
.status-text-warning { color: var(--warning-text); }
.status-text-critical { color: var(--critical-text); }
.results-sub { color: var(--ink-secondary); font-size: 14px; max-width: 480px; }
.results-actions { display: flex; gap: 12px; margin-top: 8px; }

/* Admin */
textarea {
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
  font-size: 13px;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.error-box { background: var(--critical-wash); border: 1px solid var(--critical); padding: 12px 16px; border-radius: var(--radius-sm); margin: 16px 0; }

/* Admin nav */
.topbar-nav a.is-active { color: var(--ink); font-weight: 600; }

select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
}
select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* Leaderboards */
.history-table tr.is-you { background: var(--accent-wash); }
.history-table tr.is-you td { font-weight: 700; }

/* Landing page */
.quest-card.is-static { cursor: default; }
.quest-card.is-static:hover { border-color: var(--border); background: var(--surface); transform: none; }

.landing-final-cta {
  text-align: center;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  margin: 20px 0 40px;
}
.landing-final-cta h2 { font-size: 24px; }
.landing-final-cta p { color: var(--ink-secondary); margin: 6px 0 20px; }
.landing-final-cta .hero-actions { justify-content: center; }

/* ===========================================================================
   Consent, legal documents and data-rights pages
   =========================================================================== */

.auth-card-wide { max-width: 640px; }

/* Grouped consent controls. Nothing here is ever pre-ticked — consent has to
   be a deliberate act, so the styling makes an unticked box obvious. */
.consent-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 18px 0;
  background: var(--page-bg);
}
.consent-block legend {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 6px;
}
.check-row, .radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-secondary);
  cursor: pointer;
}
.check-row input, .radio-row input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
}
.check-row a { text-decoration: underline; }
.consent-note {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 10px 0 0;
}
.optional { color: var(--ink-muted); font-weight: 400; }

/* Legal documents render the stored text verbatim — what a visitor reads and
   what the consent record hashes are the same bytes. */
.legal-doc h1 { font-size: 24px; margin-bottom: 4px; }
.legal-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-secondary);
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin-top: 16px;
  max-height: 60vh;
  overflow-y: auto;
}
.legal-inline { margin: 16px 0; }
.legal-inline summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 10px 0;
}
.legal-inline .legal-text { max-height: 320px; font-size: 12px; }

.copy-row { display: flex; gap: 8px; margin: 12px 0; }
.copy-row input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-family: ui-monospace, monospace;
}
.copy-row button { flex: 0 0 auto; white-space: nowrap; }
.inline-form { display: inline-block; margin: 0; }

.flash-info {
  background: var(--accent-wash);
  border: 1px solid var(--border-strong);
  color: var(--ink-secondary);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
}

/* Consent state list on privacy/consents.php */
.consent-list { list-style: none; margin: 12px 0 0; padding: 0; }
.consent-item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.consent-item-body { flex: 1 1 240px; min-width: 0; }
.consent-item-name { display: block; font-weight: 600; font-size: 14px; }
.consent-item-meta { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 3px; }
.consent-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.consent-pill.is-granted  { background: var(--good-wash); color: var(--good-text); }
.consent-pill.is-withdrawn{ background: var(--critical-wash); color: var(--critical-text); }
.consent-pill.is-required { background: var(--accent-wash); color: var(--accent); }

.data-section { margin-top: 28px; }
.data-section h3 { font-size: 15px; margin-bottom: 8px; }
.danger-zone { border-color: var(--critical); }
.btn-danger {
  background: var(--critical);
  color: #fff;
  border: 1px solid var(--critical);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-danger:hover { filter: brightness(1.08); }

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 48px;
  padding: 24px 0 40px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
}
.site-footer a { color: var(--ink-muted); margin: 0 10px; text-decoration: underline; }
.site-footer a:hover { color: var(--ink); }

/* The safeguarding report link. Given weight the other footer links don't get
   because it is the one link on the site that has to be findable by someone
   who is upset and not looking carefully. */
.site-footer a.footer-report { color: var(--critical-text); font-weight: 600; }

/* ===========================================================================
   Tutor console + admin vetting
   =========================================================================== */

.topbar-who {
  font-size: 13px;
  color: var(--ink-muted);
  padding-left: 4px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
}

.nav-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  vertical-align: 1px;
}

/* An open safeguarding incident should not read like four unreviewed tutor
   applications. Same shape, louder colour, deliberately. */
.nav-badge.is-urgent { background: var(--critical); color: #fff; }

.tab-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tab-row a {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-row a:hover { color: var(--ink); }
.tab-row a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* A disabled approve button is load-bearing here — it's the vetting gate, so
   it has to read as blocked rather than merely inactive. */
button[disabled], .btn-primary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}
button[disabled]:hover { filter: none; }

.dashboard-columns h3 { font-size: 15px; margin: 20px 0 8px; }
.dashboard-columns h3:first-child { margin-top: 0; }

/* ===========================================================================
   Tutoring — slots, booking, session cards
   =========================================================================== */

/* Day headings turn a flat list of times into something that reads like a
   diary, which is how people actually think about booking. */
.day-group {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.slot-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.slot-card h4 { margin: 2px 0 0; font-size: 16px; }
.slot-card-time {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.slot-card-dur { font-size: 12px; font-weight: 400; color: var(--ink-muted); margin-left: 6px; }
.slot-card-meta { margin: 0; font-size: 13px; color: var(--ink-secondary); }
.slot-card-desc { margin: 4px 0; font-size: 13px; color: var(--ink-secondary); }
.slot-card-seats { margin: 4px 0 0; font-size: 13px; color: var(--ink-muted); }
.slot-card-note { font-size: 13px; margin-top: 6px; }
.slot-card-note textarea { font-size: 13px; }
.slot-card form { margin: 0; }
.slot-card .btn-primary, .slot-card .btn-secondary { width: 100%; margin-top: 8px; }

.badge-mode {
  display: inline-block;
  padding: 1px 8px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}

.filter-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin: 0; }
.filter-row label { flex: 1 1 200px; margin: 0; }

/* ===========================================================================
   Doubts
   =========================================================================== */

/* Deliberately quiet. This sits next to work a student is trying to do, and a
   loud "STUCK? GET HELP!" beside every wrong answer reads as a taunt. */
.help-cta {
  display: inline-block;
  margin: 6px 0 2px;
  font-size: 12.5px;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--border-strong);
}
.help-cta:hover { color: var(--accent); border-bottom-color: var(--accent); }

.help-cta-panel { border-style: dashed; }

.doubt-card { margin-bottom: 14px; }
.doubt-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.doubt-meta { font-size: 12.5px; color: var(--ink-muted); }
.doubt-body { white-space: pre-wrap; margin: 0 0 10px; }

.doubt-context {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 10px 0;
}
.doubt-context-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.doubt-context-body { font-size: 13.5px; color: var(--ink-secondary); }

/* The answer is the payoff — give it the accent edge so it reads as arrival
   rather than as one more block of text. */
.doubt-answer {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 14px;
  margin: 12px 0;
}
.doubt-answer p { margin: 0; white-space: pre-wrap; }
.doubt-answer-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 6px;
}

/* ===========================================================================
   Instant sessions
   =========================================================================== */

/* The one place a pulsing dot earns its keep: "online" is a claim about right
   now, and a static dot reads as a label rather than a live state. */
.online-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--good);
  margin-right: 7px;
  vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(82,217,153,0.6);
  animation: online-pulse 2.2s ease-out infinite;
}
@keyframes online-pulse {
  70%  { box-shadow: 0 0 0 7px rgba(82,217,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(82,217,153,0); }
}
/* Anyone who has asked not to see motion gets a plain dot. */
@media (prefers-reduced-motion: reduce) {
  .online-dot { animation: none; }
}

.live-banner { border-color: var(--good); background: var(--good-wash); }
.live-banner h2 { display: flex; align-items: center; }