/* ═══════════════════════════════════════════════════════════════════════════
   CabPass Study Desk — editorial design system for logged-in user pages
   Used by: exams.php, practice.php, mock.php, review.php, history.php,
            settings.php, exam_result.php
   Re-skins JS-rendered classes (.q-card, .q-text, .q-options, .q-option,
   .feedback, .note-block, .bookmark-btn, .tts-btn, .flag-btn, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --sd-ink: #111;
  --sd-ink-2: #2a2622;
  --sd-paper: #f4ede0;
  --sd-paper-2: #ebe2d0;
  --sd-paper-3: #ffffff;
  --sd-vermillion: #b8362c;
  --sd-vermillion-soft: rgba(184,54,44,0.06);
  --sd-saffron: #e9b500;
  --sd-green: #1b6a35;
  --sd-green-soft: rgba(27,106,53,0.08);
  --sd-rule: rgba(17,17,17,0.18);
  --sd-rule-soft: rgba(17,17,17,0.08);
  --sd-rule-faint: rgba(17,17,17,0.04);
  --sd-muted: #6b6557;
  --sd-shadow: 0 1px 0 rgba(17,17,17,0.04), 0 8px 24px -16px rgba(17,17,17,0.18);
}

/* Body class set when in study mode — overrides default site background */
body.study-desk {
  background: var(--sd-paper);
  color: var(--sd-ink);
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
body.study-desk::before {
  /* Re-define paper grain at slightly lower opacity for app feel */
  opacity: 0.045;
}

/* ──────────────── APP SHELL (the slim, sticky black bar) ──────────────── */
.app-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--sd-ink); color: var(--sd-paper);
  border-bottom: 2px solid var(--sd-ink);
}
.app-bar-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 0 28px;
  display: grid; grid-template-columns: 220px 1fr auto;
  align-items: center;
  height: 56px;
  gap: 16px;
}
.app-brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--sd-paper) !important;
  font-family: 'Fraunces', serif;
  font-weight: 600; font-size: 20px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.app-brand .mark {
  width: 30px; height: 30px;
  background: var(--sd-saffron);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sd-ink);
  font-family: 'Fraunces', serif;
  font-weight: 900; font-size: 14px;
  transform: rotate(-8deg);
  flex-shrink: 0;
}
.app-brand .mark.bee {
  /* Native emoji — slightly larger, no font weight, no Fraunces */
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 17px;
  line-height: 1;
  font-weight: 400;
}
.app-brand .desk {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244,237,224,0.55);
  margin-left: 6px; padding-left: 10px;
  border-left: 1px solid rgba(244,237,224,0.18);
  font-weight: 400;
}
.app-tabs {
  display: flex; gap: 4px; justify-content: center;
}
.app-tab {
  padding: 0 16px; height: 56px;
  display: flex; align-items: center; gap: 8px;
  color: rgba(244,237,224,0.65) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  text-decoration: none;
  transition: color .15s;
}
.app-tab:hover { color: var(--sd-paper) !important; }
.app-tab.current {
  color: var(--sd-saffron) !important;
  border-bottom-color: var(--sd-saffron);
}
.app-tab .ico {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 15px; font-weight: 500;
}
.app-right {
  display: flex; align-items: center; gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: rgba(244,237,224,0.7);
  letter-spacing: 0.08em;
}
.app-right .streak {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(233,181,0,0.14);
  color: var(--sd-saffron);
  padding: 5px 10px; border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}
.app-right .reader-chip {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--sd-paper); padding-left: 14px;
  border-left: 1px solid rgba(244,237,224,0.18);
  text-decoration: none;
}
.app-right .reader-chip .av {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sd-vermillion); color: var(--sd-paper);
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.app-right .sign-out {
  color: rgba(244,237,224,0.5); text-decoration: none;
  padding-left: 12px; border-left: 1px solid rgba(244,237,224,0.18);
  display: inline-flex; align-items: center; gap: 6px;
}
.app-right .sign-out .so-icon { display: none; }
.app-right .sign-out:hover { color: var(--sd-paper); }

/* Sub-bar: breadcrumb + date */
.sub-bar {
  background: var(--sd-paper);
  border-bottom: 1px solid var(--sd-rule);
}
.sub-bar-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 16px 28px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-muted);
}
.crumb a { color: var(--sd-muted); text-decoration: none; }
.crumb a:hover { color: var(--sd-ink); }
.crumb .now { color: var(--sd-ink); }
.crumb .sep { margin: 0 8px; color: var(--sd-rule); }
.sub-bar .date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-muted);
}

/* Page wrap */
.sd-wrap {
  max-width: 1320px; margin: 0 auto;
  padding: 32px 28px 64px;
  position: relative; z-index: 1;
}
.sd-wrap.narrow { max-width: 920px; }

/* Impersonation banner override — keep at top, less garish */
body.study-desk > div[style*="background:#fef3c7"] {
  position: relative; z-index: 60;
}

/* ──────────────── DASHBOARD LAYOUT ──────────────── */
.desk-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
}

.welcome {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--sd-rule);
}
.welcome .greet {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 52px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--sd-ink);
  font-variation-settings: "opsz" 144;
}
.welcome .greet em {
  font-style: italic; color: var(--sd-vermillion); font-weight: 400;
}
.welcome .deck {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  color: var(--sd-muted); font-size: 18px; margin-top: 10px;
  max-width: 620px; line-height: 1.45;
}

/* Today strip — horizontal stat ledger */
.today-strip {
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule);
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 32px;
  box-shadow: var(--sd-shadow);
}
.today-cell {
  padding: 16px 18px;
  border-right: 1px solid var(--sd-rule-soft);
  text-decoration: none;
  color: inherit;
}
.today-cell:last-child { border-right: none; }
.today-cell .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sd-muted);
  margin-bottom: 8px;
}
.today-cell .v {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-size: 36px; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sd-ink);
}
.today-cell .v .pct { font-size: 18px; color: var(--sd-vermillion); vertical-align: top; margin-left: 2px; }
.today-cell .v .of  { font-size: 18px; color: var(--sd-muted); font-weight: 400; }
.today-cell .v .u   { font-size: 16px; color: var(--sd-muted); font-weight: 400; margin-left: 4px; vertical-align: baseline; }
.today-cell .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--sd-muted); margin-top: 6px;
  letter-spacing: 0.04em;
}
.today-cell .sub .up { color: var(--sd-green); }
.today-cell .sub .dn { color: var(--sd-vermillion); }
.today-cell.cta {
  background: var(--sd-ink); color: var(--sd-paper);
  display: flex; flex-direction: column; justify-content: center;
  text-decoration: none;
  transition: background .2s;
}
.today-cell.cta:hover { background: var(--sd-vermillion); }
.today-cell.cta .k { color: var(--sd-saffron); }
.today-cell.cta .v {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: 19px; line-height: 1.15;
  color: var(--sd-paper);
}
.today-cell.cta .arrow {
  font-family: 'Fraunces', serif; font-size: 28px; line-height: 1;
  margin-top: 6px; color: var(--sd-saffron);
}

/* Section heads (worksheet rule) */
.sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 28px 0 14px;
  margin-top: 16px;
  border-bottom: 2px solid var(--sd-ink);
}
.sec-head .title {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: 28px; letter-spacing: -0.015em; color: var(--sd-ink);
}
.sec-head .title strong {
  font-style: normal; font-weight: 500; color: var(--sd-vermillion);
  margin-right: 10px;
}
.sec-head .extra {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted);
}
.sec-head .extra a { color: var(--sd-ink); border-bottom: 1.5px solid var(--sd-ink); padding-bottom: 1px; text-decoration: none; }

/* Chapter rows (compact, expandable) */
.chapter-row {
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule);
  border-top: none;
  box-shadow: var(--sd-shadow);
}
.chapter-row:first-of-type { border-top: 1px solid var(--sd-rule); border-radius: 4px 4px 0 0; }
.chapter-row:last-of-type  { border-radius: 0 0 4px 4px; }

.chapter-head {
  display: grid;
  grid-template-columns: 64px 1.5fr 1fr 1.2fr auto;
  align-items: center; gap: 20px;
  padding: 20px 22px;
}
.chapter-row.has-expand .chapter-head { border-bottom: 1px solid var(--sd-rule-soft); }
.chapter-head .roman {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: 56px; line-height: 1;
  color: var(--sd-vermillion);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.ch-title {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 22px; line-height: 1.1; color: var(--sd-ink);
  letter-spacing: -0.015em;
}
.ch-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sd-muted); margin-top: 4px;
}
.ch-mastery { display: flex; align-items: baseline; gap: 8px; }
.ch-mastery .pct {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 36px; line-height: 1; color: var(--sd-ink);
  letter-spacing: -0.02em;
}
.ch-mastery .pct .sym { color: var(--sd-vermillion); font-size: 18px; vertical-align: top; }
.ch-mastery .pct.dim { color: var(--sd-muted); }
.ch-mastery .label {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sd-muted);
}
.ch-bar { height: 2px; background: var(--sd-rule-soft); margin-top: 6px; width: 100%; }
.ch-bar > i { display: block; height: 100%; background: var(--sd-vermillion); }
.ch-status-col { display: flex; flex-direction: column; gap: 6px; }
.ch-pill {
  align-self: flex-start;
  display: inline-block; padding: 3px 10px;
  border: 1px solid var(--sd-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent; color: var(--sd-ink);
}
.ch-pill.ready { background: var(--sd-ink); color: var(--sd-paper); }
.ch-pill.close { background: var(--sd-saffron); border-color: var(--sd-saffron); color: var(--sd-ink); }
.ch-pill.practicing { color: var(--sd-muted); border-color: var(--sd-rule); border-style: dashed; }
.ch-pill.unknown { color: var(--sd-muted); border-color: var(--sd-rule); border-style: dashed; }
.ch-last {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--sd-muted); letter-spacing: 0.04em;
}
.ch-last.passed { color: var(--sd-green); }
.ch-last.failed, .ch-last.expired { color: var(--sd-vermillion); }
.ch-actions { display: flex; gap: 8px; align-items: center; }

/* Buttons (Study Desk shared) */
.sd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--sd-ink); background: transparent; color: var(--sd-ink);
  border-radius: 2px; text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sd-btn:hover { background: var(--sd-ink); color: var(--sd-paper); }
.sd-btn.primary { background: var(--sd-ink); color: var(--sd-paper); }
.sd-btn.primary:hover { background: var(--sd-vermillion); border-color: var(--sd-vermillion); }
.sd-btn.ghost { border-color: var(--sd-rule); color: var(--sd-muted); }
.sd-btn.ghost:hover { background: transparent; border-color: var(--sd-ink); color: var(--sd-ink); }
.sd-btn.tiny { padding: 5px 9px; font-size: 10px; letter-spacing: 0.1em; }
.sd-btn.disabled, .sd-btn[disabled] {
  border-color: var(--sd-rule); color: var(--sd-muted); cursor: not-allowed; pointer-events: none;
}
.sd-btn .arr { font-family: 'Fraunces', serif; font-size: 16px; line-height: 1; color: var(--sd-vermillion); }
.sd-btn.primary .arr { color: var(--sd-saffron); }

/* Expand toggle (the little ▾ on a chapter row) */
.ch-expand-toggle {
  background: transparent;
  border: 1px solid var(--sd-rule);
  color: var(--sd-muted);
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-family: 'Fraunces', serif;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ch-expand-toggle:hover { background: var(--sd-paper-2); color: var(--sd-ink); border-color: var(--sd-ink); }
.chapter-row.expanded .ch-expand-toggle { background: var(--sd-ink); color: var(--sd-paper); border-color: var(--sd-ink); }

/* Sub-category table (inside ch-expand) */
.ch-expand {
  padding: 20px 22px 24px;
  background: var(--sd-paper-2);
  border-top: 1px dashed var(--sd-rule);
  display: none;
}
.chapter-row.expanded .ch-expand { display: block; }
.subcat-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
}
.subcat-table th {
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sd-muted); font-weight: 500;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--sd-rule);
}
.subcat-table td {
  padding: 12px;
  border-bottom: 1px solid var(--sd-rule-soft);
  vertical-align: middle;
}
.subcat-table tr:last-child td { border-bottom: none; }
.subcat-table td.cat {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 15px; color: var(--sd-ink);
}
.subcat-table td.cat .area {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-muted); margin-left: 8px;
}
.subcat-table td.num {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--sd-ink); white-space: nowrap;
}
.subcat-table td.num.muted { color: var(--sd-muted); }
.subcat-table td.acc { width: 180px; }
.acc-bar { height: 4px; background: var(--sd-rule-soft); position: relative; border-radius: 2px; flex: 1; }
.acc-bar > i { position: absolute; left:0; top:0; height: 100%; border-radius: 2px; }
.acc-bar.good > i { background: var(--sd-green); }
.acc-bar.mid  > i { background: var(--sd-saffron); }
.acc-bar.bad  > i { background: var(--sd-vermillion); }
.acc-row { display: flex; align-items: center; gap: 10px; }
.acc-row .v { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; width: 38px; }
.acc-row.good .v { color: var(--sd-green); }
.acc-row.mid  .v { color: var(--sd-saffron); }
.acc-row.bad  .v { color: var(--sd-vermillion); }
.acc-row.unk  .v { color: var(--sd-muted); }
.subcat-table td.act { text-align: right; }
.subcat-table .last {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--sd-muted);
  letter-spacing: 0.04em;
}
.subcat-empty {
  padding: 20px; text-align: center;
  font-family: 'Fraunces', serif; font-style: italic; color: var(--sd-muted);
  font-size: 15px;
}

/* Mock log ledger */
.ledger {
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--sd-shadow);
}
.ledger table { width: 100%; border-collapse: collapse; }
.ledger thead th {
  background: var(--sd-paper-2);
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sd-muted); font-weight: 500;
  padding: 12px 18px;
  border-bottom: 1px solid var(--sd-rule);
}
.ledger tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--sd-rule-soft);
  font-family: 'Inter Tight', sans-serif; font-size: 14px;
  color: var(--sd-ink);
  vertical-align: middle;
}
.ledger tbody tr:last-child td { border-bottom: none; }
.ledger tbody tr:hover td { background: var(--sd-rule-faint); }
.ledger .when {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--sd-muted);
  letter-spacing: 0.04em; white-space: nowrap;
}
.ledger .when strong { font-weight: 500; color: var(--sd-ink); }
.ledger .exam-cell {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 16px; color: var(--sd-ink);
}
.ledger .exam-cell .roman {
  font-family: 'Fraunces', serif; font-style: italic;
  color: var(--sd-vermillion); font-weight: 400; margin-right: 6px;
}
.ledger .score {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--sd-ink);
}
.ledger .score strong { font-weight: 500; }
.ledger .verdict {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.ledger .verdict.pass { color: var(--sd-green); }
.ledger .verdict.fail { color: var(--sd-vermillion); }
.ledger .verdict.expired { color: var(--sd-muted); }
.ledger .mins {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--sd-muted);
}
.ledger .row-actions { text-align: right; white-space: nowrap; }
.ledger .row-actions .sd-btn + .sd-btn { margin-left: 6px; }
.ledger-empty {
  padding: 60px 20px; text-align: center;
  font-family: 'Fraunces', serif; font-style: italic; color: var(--sd-muted);
  font-size: 18px;
}

/* Errata + Daybook panels */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  margin-top: 32px;
}
.panel {
  background: var(--sd-paper-3); border: 1px solid var(--sd-rule); border-radius: 4px;
  padding: 22px 24px;
  box-shadow: var(--sd-shadow);
}
.panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--sd-rule);
}
.panel-head .nm {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: 22px; color: var(--sd-ink);
}
.panel-head .tg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sd-vermillion);
}
.weak-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dotted var(--sd-rule);
}
.weak-row:last-child { border-bottom: none; }
.weak-row .cat-line {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 17px;
  color: var(--sd-ink);
}
.weak-row .ms {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--sd-muted);
  letter-spacing: 0.04em; margin-top: 4px;
}
.weak-row .ms strong { color: var(--sd-vermillion); font-weight: 500; }
.activity-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px dotted var(--sd-rule);
}
.activity-row:last-child { border-bottom: none; }
.activity-row .mk {
  font-family: 'Fraunces', serif; font-style: italic; font-size: 20px;
  width: 18px; line-height: 1; flex-shrink: 0;
}
.activity-row .mk.ok { color: var(--sd-ink); }
.activity-row .mk.no { color: var(--sd-vermillion); }
.activity-row .q-text {
  /* override generic .q-text inside daybook to be smaller */
  font-family: 'Fraunces', serif; font-weight: 400; font-size: 14.5px;
  line-height: 1.35; color: var(--sd-ink); margin: 0;
  white-space: normal;
}
.activity-row .q-text::first-letter { font-size: inherit; float: none; margin: 0; color: inherit; font-style: inherit; }
.activity-row .meta-line {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--sd-muted);
  letter-spacing: 0.04em; margin-top: 4px;
}
.activity-row .meta-line em { color: var(--sd-vermillion); font-style: normal; }
.panel-empty {
  padding: 16px 0; text-align: center;
  font-family: 'Fraunces', serif; font-style: italic; color: var(--sd-muted);
  font-size: 14px;
}

/* Right rail (study companion) */
.study-rail {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 18px;
}
.rail-card {
  background: var(--sd-paper-3); border: 1px solid var(--sd-rule);
  border-radius: 4px; padding: 18px;
  box-shadow: var(--sd-shadow);
}
.rail-card .head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.rail-card .head .lbl {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sd-muted);
}
.rail-card .head .pip {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--sd-vermillion);
  letter-spacing: 0.06em;
}
.rail-streak { text-align: center; padding: 8px 0 4px; }
.rail-streak .n {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 64px; line-height: 0.9;
  color: var(--sd-vermillion); letter-spacing: -0.03em;
}
.rail-streak .u {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sd-muted);
  margin-top: 4px;
}
.rail-streak .week { display: flex; gap: 4px; justify-content: center; margin-top: 14px; }
.rail-streak .day {
  width: 18px; height: 18px;
  border: 1px solid var(--sd-rule); border-radius: 50%;
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sd-muted);
}
.rail-streak .day.done { background: var(--sd-vermillion); color: var(--sd-paper); border-color: var(--sd-vermillion); }
.rail-streak .day.today { border-color: var(--sd-ink); color: var(--sd-ink); font-weight: 500; }
.rail-goal .head .pip { color: var(--sd-green); }
.rail-goal .nums {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 32px; line-height: 1;
}
.rail-goal .nums .muted { color: var(--sd-muted); font-weight: 400; }
.rail-goal .bar { height: 4px; background: var(--sd-rule-soft); margin: 12px 0 8px; }
.rail-goal .bar > i { display:block; height:100%; background: var(--sd-ink); }
.rail-goal .sub {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--sd-muted);
  letter-spacing: 0.04em;
}
.rail-exam .date {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: 28px; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--sd-ink);
}
.rail-exam .dl { display: flex; gap: 14px; margin-top: 8px; align-items: baseline; }
.rail-exam .dl .n {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 36px; line-height: 1;
  color: var(--sd-vermillion);
}
.rail-exam .dl .l {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted);
}
.rail-exam .none {
  font-family: 'Fraunces', serif; font-style: italic; color: var(--sd-muted);
  font-size: 15px;
}
.rail-exam .set-link {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-vermillion); border-bottom: 1px solid var(--sd-vermillion);
  padding-bottom: 1px; text-decoration: none;
}
.quick-links { display: flex; flex-direction: column; }
.quick-links a {
  padding: 11px 0;
  border-bottom: 1px solid var(--sd-rule-soft);
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Inter Tight', sans-serif; font-size: 14px;
  color: var(--sd-ink); text-decoration: none;
}
.quick-links a:last-child { border-bottom: none; }
.quick-links a:hover { color: var(--sd-vermillion); }
.quick-links a .arr { font-family: 'Fraunces', serif; font-style: italic; color: var(--sd-muted); }
.quick-links a:hover .arr { color: var(--sd-vermillion); }

/* Announcement banner (admin-controlled) */
.dash-banner {
  background: var(--sd-saffron);
  border: 1px solid var(--sd-saffron);
  padding: 14px 22px;
  margin-bottom: 24px;
  border-radius: 4px;
  font-family: 'Inter Tight', sans-serif; font-size: 14px; color: var(--sd-ink);
  display: flex; align-items: flex-start; gap: 12px;
}
.dash-banner-icon {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: 18px; color: var(--sd-vermillion);
}

/* ─────────────────── PRACTICE / MOCK ─────────────────── */
.study-page {
  display: grid; grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
}
.study-page.solo { grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; }

/* Scene-break section divider */
.scene-break {
  margin: 28px 0;
  padding: 24px 0;
  text-align: center;
  border-top: 1px solid var(--sd-rule);
  border-bottom: 1px solid var(--sd-rule);
  background: var(--sd-paper-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--sd-muted);
}
.scene-break .v { color: var(--sd-vermillion); margin: 0 14px; }

/* Mock mode sticky timer banner */
.mock-banner {
  position: sticky; top: 56px; z-index: 30;
  background: var(--sd-ink); color: var(--sd-paper);
  padding: 12px 18px;
  border-radius: 4px;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  gap: 16px;
  flex-wrap: wrap;
}
.mock-banner .timer-big {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 26px; letter-spacing: 0.04em; color: var(--sd-saffron);
}
.mock-banner .timer-big.danger { color: var(--sd-vermillion); animation: pulse-danger 1s ease-in-out infinite; }
@keyframes pulse-danger { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.mock-banner .left { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.mock-banner .pill {
  background: rgba(244,237,224,0.14); padding: 4px 10px; border-radius: 999px;
}

/* Part banner — rendered by exam.js between mock parts */
.part-banner {
  text-align: center;
  padding: 28px 0 18px;
  margin-bottom: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--sd-muted);
  border-bottom: 1px solid var(--sd-rule);
  position: relative;
}
.part-banner::before {
  content: '✦';
  display: block;
  color: var(--sd-vermillion);
  font-family: 'Fraunces', serif;
  font-size: 14px;
  margin-bottom: 10px;
}

/* Q card — re-skinned for editorial use */
.q-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}
.q-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sd-rule);
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}
.q-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sd-muted);
  margin-bottom: 0;
}
.q-meta-tools {
  display: flex; align-items: center; gap: 4px;
}

/* Per-question tool buttons (TTS, flag, bookmark) — editorial chip style */
.bookmark-btn, .tts-btn, .flag-btn {
  background: transparent;
  border: 1px solid var(--sd-rule);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 16px; line-height: 1;
  color: var(--sd-muted);
  cursor: pointer;
  padding: 0;
  transition: all .15s;
}
.bookmark-btn:hover, .tts-btn:hover, .flag-btn:hover {
  background: var(--sd-paper-2); border-color: var(--sd-ink); color: var(--sd-ink);
}
.bookmark-btn.starred {
  background: var(--sd-saffron); border-color: var(--sd-saffron); color: var(--sd-ink);
  text-shadow: none;
}
.tts-btn.speaking {
  background: var(--sd-vermillion); border-color: var(--sd-vermillion); color: var(--sd-paper);
  animation: tts-pulse 1.2s ease-in-out infinite;
}
@keyframes tts-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.flag-btn.flagged {
  background: var(--sd-vermillion); border-color: var(--sd-vermillion); color: var(--sd-paper);
}

/* Q text — drop cap */
.q-text {
  font-family: 'Fraunces', serif; font-weight: 400; font-size: 30px;
  line-height: 1.3; letter-spacing: -0.015em; color: var(--sd-ink);
  margin: 0 0 28px;
  white-space: pre-wrap;
  max-width: 720px;
}
.q-text::first-letter {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 84px;
  line-height: 0.85; float: left; margin: 8px 14px 0 0;
  color: var(--sd-vermillion); font-style: italic;
}
.q-card img, .q-image {
  display: block;
  max-width: 100%;
  max-height: 280px;
  width: auto; height: auto;
  margin: 0 auto 18px;
  border-radius: 4px;
  border: 1px solid var(--sd-rule);
  background: var(--sd-paper);
  padding: 6px;
  object-fit: contain;
}
.calc-notice {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--sd-vermillion);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  letter-spacing: 0;
  text-transform: none;
}
.calc-notice::before {
  content: '✦';
  color: var(--sd-vermillion);
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: 12px;
  flex-shrink: 0;
  position: relative; top: -1px;
}

/* Options — ruled list */
.q-options {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--sd-rule);
  gap: 0;
}
.q-option {
  display: flex; align-items: flex-start; gap: 22px;
  padding: 18px 12px;
  border-bottom: 1px solid var(--sd-rule);
  cursor: pointer;
  transition: padding-left .2s, background .2s;
  background: transparent;
  text-align: left;
  font: inherit; color: var(--sd-ink);
  width: 100%;
  border-left: none; border-right: none; border-top: none;
  border-radius: 0;
}
.q-option::before {
  /* Letter prefix derived from position via counter */
  counter-increment: opt;
  content: counter(opt, upper-alpha) ".";
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: 24px; color: var(--sd-vermillion);
  width: 28px; flex-shrink: 0; line-height: 1.1;
}
.q-options { counter-reset: opt; }
.q-option > * { font-family: 'Fraunces', serif; font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--sd-ink); flex: 1; }
.q-option:hover:not(:disabled) { padding-left: 22px; background: var(--sd-paper-2); }
.q-option:disabled { cursor: default; }
.q-option.chosen { background: var(--sd-paper-2); }
.q-option.correct { background: var(--sd-green-soft); }
.q-option.correct::before { color: var(--sd-green); }
.q-option.wrong { background: var(--sd-vermillion-soft); }
.q-option.wrong::before { color: var(--sd-vermillion); }

/* Feedback line */
.feedback {
  margin: 18px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 14px;
}
.feedback.correct {
  background: var(--sd-green-soft); color: var(--sd-green);
  border-left: 3px solid var(--sd-green);
}
.feedback.wrong {
  background: var(--sd-vermillion-soft); color: var(--sd-vermillion);
  border-left: 3px solid var(--sd-vermillion);
}

/* Note block (per-question) */
.note-block {
  margin-top: 18px;
  border-top: 1px solid var(--sd-rule);
  padding-top: 14px;
}
.note-block summary {
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-muted);
  list-style: none;
  outline: none; user-select: none;
}
.note-block summary::-webkit-details-marker { display: none; }
.note-block summary::before { content: '✦  '; color: var(--sd-vermillion); }
.note-block[open] summary { color: var(--sd-ink); margin-bottom: 10px; }
.note-block textarea {
  width: 100%; box-sizing: border-box;
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 15.5px; line-height: 1.5;
  padding: 12px 14px;
  border: 1px solid var(--sd-rule); border-radius: 2px;
  background: var(--sd-paper-3); color: var(--sd-ink);
  resize: vertical;
  min-height: 90px; outline: none;
}
.note-block textarea:focus { border-color: var(--sd-ink); }
.btn-note-save {
  margin-top: 8px; padding: 8px 14px;
  background: var(--sd-ink); color: var(--sd-paper);
  border: none; border-radius: 2px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.note-msg {
  margin-left: 10px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sd-muted);
}

/* Practice run actions row */
.run-actions {
  display: flex; gap: 10px; margin-top: 24px;
  padding-top: 18px;
  border-top: 2px solid var(--sd-ink);
  justify-content: space-between; align-items: center;
}
.btn-next {
  padding: 14px 22px;
  background: var(--sd-ink); color: var(--sd-paper);
  border: none; border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
  display: inline-flex; align-items: center; gap: 12px;
}
.btn-next::after { content: '→'; font-family: 'Fraunces', serif; font-size: 20px; color: var(--sd-saffron); }
.btn-next:hover { background: var(--sd-vermillion); }
.btn-next:hover::after { color: var(--sd-paper); }
.btn-quit {
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--sd-rule);
  color: var(--sd-muted);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
}
.btn-quit:hover { border-color: var(--sd-ink); color: var(--sd-ink); }
.btn-start, .btn-begin {
  padding: 14px 24px;
  background: var(--sd-ink); color: var(--sd-paper);
  border: none; border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.btn-start::after, .btn-begin::after { content: '→'; font-family: 'Fraunces', serif; font-size: 20px; color: var(--sd-saffron); }
.btn-start:hover, .btn-begin:hover { background: var(--sd-vermillion); }

/* ── Practice setup pane (topic + count chips + cat grid) ── */
.practice-eyebrow {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sd-rule);
  margin-bottom: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sd-muted);
}
.practice-eyebrow .chap { color: var(--sd-vermillion); font-weight: 500; }

.practice-headline {
  font-family: 'Fraunces', serif;
  font-weight: 400; font-style: italic;
  font-size: clamp(36px, 4vw, 48px); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--sd-ink);
  margin: 0 0 12px;
}
.practice-headline em { font-style: normal; color: var(--sd-vermillion); }
.practice-deck {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  color: var(--sd-muted); font-size: 17px; line-height: 1.5;
  margin: 0 0 28px; max-width: 580px;
}

.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.topic-chip {
  padding: 8px 16px;
  border: 1px solid var(--sd-rule);
  background: var(--sd-paper-3);
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 14.5px;
  cursor: pointer; color: var(--sd-ink);
  border-radius: 2px;
  transition: all .12s;
}
.topic-chip:hover { border-color: var(--sd-ink); }
.topic-chip.active {
  background: var(--sd-ink); color: var(--sd-paper); border-color: var(--sd-ink);
}

/* Mode picker — big cards (no auto-select), step 1 of practice setup */
.mode-pick { margin-bottom: 28px; }
.mode-pick .topic-pick-head { border-bottom: 2px solid var(--sd-ink); }
.mode-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.mode-card {
  text-align: left;
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule);
  border-radius: 4px;
  padding: 20px 22px 22px;
  cursor: pointer;
  color: var(--sd-ink);
  display: flex; flex-direction: column; gap: 8px;
  transition: all .15s;
  position: relative;
  font-family: 'Inter Tight', sans-serif;
}
.mode-card:hover {
  background: var(--sd-paper-2);
  border-color: var(--sd-ink);
  transform: translateY(-1px);
}
.mode-card::after {
  content: '→';
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Fraunces', serif;
  font-size: 22px; color: var(--sd-vermillion);
  opacity: 0; transition: opacity .15s, transform .15s;
}
.mode-card:hover::after { opacity: 1; transform: translateY(-50%) translateX(4px); }
.mode-card-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--sd-saffron);
  color: var(--sd-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: 18px; line-height: 1;
  transform: rotate(-6deg);
}
.mode-card[data-mode="card"]  .mode-card-icon { background: var(--sd-vermillion); color: var(--sd-paper); }
.mode-card[data-mode="audio"] .mode-card-icon { background: var(--sd-ink);        color: var(--sd-saffron); }
.mode-card-name {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 22px; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--sd-ink); margin-top: 4px;
}
.mode-card-desc {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 14.5px; line-height: 1.45;
  color: var(--sd-muted);
  max-width: 90%;
}

/* The old mode-chips remain in the DOM as hidden state but get no visible style.
   When forced visible (debug / fallback), keep them as a minimal flat strip. */
.mode-chips {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule); border-radius: 2px;
}
.mode-chip {
  padding: 8px 14px;
  border: 1px solid var(--sd-rule);
  background: transparent;
  font-family: 'Inter Tight', sans-serif; font-weight: 500;
  font-size: 13.5px;
  cursor: pointer; color: var(--sd-ink);
  border-radius: 2px;
  transition: all .12s;
  display: inline-flex; align-items: center; gap: 8px;
}
.mode-chip .mode-icon {
  font-family: 'Fraunces', serif; font-style: italic;
  color: var(--sd-vermillion); font-size: 16px; line-height: 1;
}
.mode-chip:hover { border-color: var(--sd-ink); }
.mode-chip.active {
  background: var(--sd-ink); color: var(--sd-paper); border-color: var(--sd-ink);
}
.mode-chip.active .mode-icon { color: var(--sd-saffron); }

.count-chips {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 28px; flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule); border-radius: 2px;
}
.count-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sd-muted); margin-right: 8px;
}
.count-chip {
  padding: 6px 14px;
  border: 1px solid var(--sd-rule);
  background: transparent;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
  cursor: pointer; color: var(--sd-ink);
  border-radius: 2px;
  transition: all .12s;
}
.count-chip:hover { border-color: var(--sd-ink); }
.count-chip.active {
  background: var(--sd-vermillion); border-color: var(--sd-vermillion); color: var(--sd-paper);
}

/* Topic picker (multi-part exams — appears before sub-categories) */
.topic-pick { margin-bottom: 28px; }
.topic-pick-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 2px solid var(--sd-ink);
}
.topic-pick-label {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: 24px; color: var(--sd-ink); letter-spacing: -0.015em;
}
.topic-pick-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sd-muted);
}
.topic-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.topic-card {
  text-align: left;
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule);
  border-radius: 4px;
  padding: 22px 22px;
  cursor: pointer;
  color: var(--sd-ink);
  display: flex; flex-direction: column; gap: 8px;
  transition: all .15s;
  position: relative;
  font-family: 'Inter Tight', sans-serif;
}
.topic-card:hover:not(:disabled):not(.is-empty) {
  background: var(--sd-paper-2);
  border-color: var(--sd-ink);
  transform: translateY(-1px);
}
.topic-card::after {
  content: '→';
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Fraunces', serif;
  font-size: 22px; color: var(--sd-vermillion);
  opacity: 0; transition: opacity .15s, transform .15s;
}
.topic-card:hover::after { opacity: 1; transform: translateY(-50%) translateX(4px); }
.topic-card-name {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 22px; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--sd-ink);
}
.topic-card-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sd-muted);
}
.topic-card.is-empty {
  cursor: not-allowed;
  background: transparent;
  border-style: dashed;
  opacity: 0.65;
}
.topic-card.is-empty .topic-card-name { color: var(--sd-muted); font-style: italic; font-weight: 400; }
.topic-card.is-empty .topic-card-count { color: var(--sd-vermillion); }
.topic-card.is-empty::after { display: none; }

/* Back to topics — appears above the sub-cat grid */
.cat-back {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--sd-rule);
  flex-wrap: wrap; gap: 8px;
}
.cat-back a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-vermillion);
  text-decoration: none;
  border-bottom: 1.5px solid var(--sd-vermillion);
  padding-bottom: 1px;
}
.cat-back a:hover { color: var(--sd-ink); border-color: var(--sd-ink); }
.cat-back-current {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 17px; color: var(--sd-ink);
  letter-spacing: -0.01em;
}

/* Category card grid (drill picker) */
.cat-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.cat-card {
  text-align: left;
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule);
  border-radius: 2px;
  padding: 18px 18px;
  cursor: pointer;
  font-family: 'Inter Tight', sans-serif;
  color: var(--sd-ink);
  display: flex; flex-direction: column; gap: 10px;
  transition: all .15s;
  position: relative;
}
.cat-card:hover {
  background: var(--sd-paper-2);
  border-color: var(--sd-ink);
  transform: translateY(-1px);
}
.cat-card .cat-card-title {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 18px; line-height: 1.2;
}
.cat-card .cat-card-count {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--sd-muted); letter-spacing: 0.12em; text-transform: uppercase;
}
.cat-card-all {
  background: var(--sd-ink); color: var(--sd-paper); border-color: var(--sd-ink);
}
.cat-card-all:hover { background: var(--sd-vermillion); border-color: var(--sd-vermillion); }
.cat-card-all .cat-card-count { color: rgba(244,237,224,0.6); }
.cat-card-all .cat-card-title { font-style: italic; }

.cat-empty {
  text-align: center; padding: 60px 20px;
  background: var(--sd-paper-3);
  border: 1px dashed var(--sd-rule); border-radius: 2px;
  font-family: 'Fraunces', serif; font-style: italic;
  color: var(--sd-muted); font-size: 16px;
}

/* ── Tools rail (sticky, right of practice/mock content) ── */
.tools-rail {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 14px;
}
.tool-card {
  background: var(--sd-paper-3); border: 1px solid var(--sd-rule);
  border-radius: 4px; padding: 14px 16px;
  box-shadow: var(--sd-shadow);
}
.tool-card .h {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.tool-card .h .l {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sd-muted);
}
.tool-card .h .pip {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--sd-vermillion);
  letter-spacing: 0.06em;
}

/* Set progress (inside tools rail) */
.set-prog .bar {
  height: 4px; background: var(--sd-rule-soft); position: relative; margin-bottom: 10px;
}
.set-prog .bar .fl { position: absolute; left:0; top:0; height:100%; background: var(--sd-ink); }
.set-prog .nums {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 24px; line-height: 1;
}
.set-prog .nums .of { color: var(--sd-muted); font-weight: 400; }
.set-prog .sub {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--sd-muted);
  margin-top: 4px; letter-spacing: 0.04em;
}
.set-prog .sub .ok { color: var(--sd-green); }
.set-prog .sub .no { color: var(--sd-vermillion); }

/* Tool list rows */
.tool-list { display: flex; flex-direction: column; }
.tool-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--sd-rule);
  text-decoration: none; color: var(--sd-ink);
  font-family: 'Inter Tight', sans-serif; font-size: 13.5px;
  background: transparent; border-left: none; border-right: none; border-top: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.tool-row:last-child { border-bottom: none; }
.tool-row:hover { color: var(--sd-vermillion); }
.tool-row .ico {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--sd-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; color: var(--sd-ink);
  font-family: 'Fraunces', serif; font-weight: 500;
}
.tool-row.on .ico { background: var(--sd-ink); color: var(--sd-paper); }
.tool-row .ico.star-on { background: var(--sd-saffron); border-color: var(--sd-saffron); color: var(--sd-ink); }
.tool-row .label { flex: 1; }
.tool-row .state {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--sd-muted); letter-spacing: 0.08em; text-transform: uppercase;
}
.tool-row.on .state { color: var(--sd-green); }

/* Text size segmented control */
.ts-seg {
  display: flex; border: 1px solid var(--sd-rule); border-radius: 999px; overflow: hidden;
  margin-top: 4px;
}
.ts-seg button {
  flex: 1; padding: 6px 0; background: transparent; border: none;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.1em; color: var(--sd-muted); cursor: pointer;
  transition: all .15s;
}
.ts-seg button.on { background: var(--sd-ink); color: var(--sd-paper); }
.ts-seg button:hover:not(.on) { background: var(--sd-paper-2); color: var(--sd-ink); }

/* Calc strip in tools rail (Exam I only) */
.calc-strip {
  border-top: 1px dotted var(--sd-rule);
  margin-top: 10px; padding-top: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--sd-muted); letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}
.calc-strip a {
  color: var(--sd-vermillion); border-bottom: 1px solid var(--sd-vermillion);
  padding-bottom: 1px; text-decoration: none;
}

/* Footnote */
.sd-footnote {
  background: var(--sd-paper-3); border: 1px solid var(--sd-rule); border-radius: 4px;
  padding: 14px 16px;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 13.5px; line-height: 1.5; color: var(--sd-muted);
}
.sd-footnote sup { color: var(--sd-vermillion); font-weight: 500; margin-right: 4px; }
.sd-footnote a { color: var(--sd-vermillion); border-bottom: 1px solid var(--sd-vermillion); padding-bottom: 1px; text-decoration: none; }

/* ─────────────────── EXAM RESULT (report card) ─────────────────── */
.result-shell {
  max-width: 760px; margin: 24px auto 0; padding: 0 28px 80px;
}
.result-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sd-muted);
  margin-bottom: 16px;
  display: flex; gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sd-rule);
}
.result-eyebrow .roman { color: var(--sd-vermillion); }
.result-headline {
  font-family: 'Fraunces', serif; font-weight: 400;
  font-size: clamp(56px, 8vw, 96px); line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 12px 0 4px;
}
.result-headline em { font-style: italic; }
.result-headline.pass { color: var(--sd-ink); }
.result-headline.pass em { color: var(--sd-green); }
.result-headline.fail { color: var(--sd-ink); }
.result-headline.fail em { color: var(--sd-vermillion); }
.result-sub {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 20px; color: var(--sd-muted);
  margin-bottom: 36px;
}
.result-parts {
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule); border-radius: 4px;
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: var(--sd-shadow);
}
.result-part-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--sd-rule-soft);
}
.result-part-row:last-child { border-bottom: none; }
.result-part-row .part-name {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 19px; color: var(--sd-ink);
}
.result-part-row .part-need {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--sd-muted); margin-left: 10px;
  letter-spacing: 0.04em;
}
.result-part-row .score {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 26px; color: var(--sd-ink);
  letter-spacing: -0.02em;
}
.result-part-row .score .check { margin-left: 10px; font-size: 18px; }
.result-part-row .score .check.ok { color: var(--sd-green); }
.result-part-row .score .check.no { color: var(--sd-vermillion); }
/* Per-question breakdown */
.result-q-section { margin: 24px 0 32px; }
.result-q-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 2px solid var(--sd-ink);
}
.result-q-section-title {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: 28px; color: var(--sd-ink); letter-spacing: -0.015em;
  margin: 0;
}
.result-q-section-title em { font-style: normal; color: var(--sd-vermillion); }
.result-q-section-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.result-q-filter-btn {
  padding: 6px 12px;
  border: 1px solid var(--sd-rule);
  background: var(--sd-paper-3);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-muted);
  cursor: pointer;
  transition: all .12s;
}
.result-q-filter-btn:hover { color: var(--sd-ink); border-color: var(--sd-ink); }
.result-q-filter-btn.active {
  background: var(--sd-ink); color: var(--sd-paper); border-color: var(--sd-ink);
}

.result-q-group { margin-bottom: 24px; }
.result-q-group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--sd-rule);
}
.result-q-group-name {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: 20px; color: var(--sd-ink);
}
.result-q-group-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sd-muted);
}
.result-q-group-count .skipped { color: var(--sd-vermillion); }

.result-q-card {
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule);
  border-radius: 4px;
  border-left-width: 3px;
  padding: 18px 20px;
  margin-bottom: 10px;
  box-shadow: var(--sd-shadow);
}
.result-q-card.is-correct { border-left-color: var(--sd-green); }
.result-q-card.is-wrong   { border-left-color: var(--sd-vermillion); }

.result-q-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-muted);
  flex-wrap: wrap;
}
.result-q-meta .result-q-num { color: var(--sd-vermillion); font-weight: 500; }
.result-q-meta .result-q-cat { color: var(--sd-ink); }
.result-q-meta .result-q-verdict { margin-left: auto; padding: 3px 10px; border-radius: 2px; font-size: 10px; }
.result-q-meta .result-q-verdict.ok { background: var(--sd-green-soft); color: var(--sd-green); }
.result-q-meta .result-q-verdict.no { background: var(--sd-vermillion-soft); color: var(--sd-vermillion); }

.result-q-image {
  max-width: 240px; max-height: 200px;
  display: block;
  border: 1px solid var(--sd-rule); border-radius: 4px;
  padding: 6px; background: var(--sd-paper);
  margin-bottom: 14px;
}
.result-q-text {
  font-family: 'Fraunces', serif; font-weight: 400;
  font-size: 18px; line-height: 1.4; color: var(--sd-ink);
  margin: 0 0 16px;
}

.result-q-options {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.result-q-options .opt {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--sd-rule); border-radius: 2px;
  background: var(--sd-paper-3);
  font-family: 'Fraunces', serif; font-weight: 400;
  font-size: 15.5px; line-height: 1.35;
  color: var(--sd-ink);
}
.result-q-options .opt-mark {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 18px; line-height: 1;
  width: 22px; flex-shrink: 0; color: var(--sd-rule);
  text-align: center;
}
.result-q-options .opt-text { flex: 1; }
.result-q-options .opt-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-muted);
  white-space: nowrap;
}
.result-q-options .opt.is-correct {
  background: var(--sd-green-soft); border-color: var(--sd-green);
}
.result-q-options .opt.is-correct .opt-mark,
.result-q-options .opt.is-correct .opt-tag { color: var(--sd-green); }
.result-q-options .opt.is-wrong {
  background: var(--sd-vermillion-soft); border-color: var(--sd-vermillion);
}
.result-q-options .opt.is-wrong .opt-mark,
.result-q-options .opt.is-wrong .opt-tag { color: var(--sd-vermillion); }
.result-q-options .opt.is-chosen { font-weight: 500; }

.result-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.result-actions a { text-decoration: none; }

/* ─────────────────── REVIEW (corrections department) ─────────────────── */
.review-shell {
  max-width: 920px; margin: 24px auto 0; padding: 0 28px 80px;
}
.review-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sd-muted);
  padding-bottom: 14px; border-bottom: 1px solid var(--sd-rule);
  margin-bottom: 16px;
}
.review-eyebrow .vm { color: var(--sd-vermillion); }
.review-shell h1 {
  font-family: 'Fraunces', serif; font-weight: 400; font-style: italic;
  font-size: clamp(40px, 5vw, 64px); line-height: 1;
  letter-spacing: -0.025em; color: var(--sd-ink);
  margin: 0 0 12px;
}
.review-shell h1 em { font-style: normal; color: var(--sd-vermillion); }
.review-sub {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 18px; color: var(--sd-muted); line-height: 1.5;
  max-width: 620px; margin: 0 0 32px;
}
.review-tabs {
  display: flex; gap: 0; margin-bottom: 4px;
  border-bottom: 2px solid var(--sd-ink);
  flex-wrap: wrap;
}
.review-tab {
  padding: 14px 22px;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-muted);
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: -2px;
  transition: color .15s;
}
.review-tab:hover { color: var(--sd-ink); }
.review-tab.active { color: var(--sd-ink); border-bottom-color: var(--sd-vermillion); }
.review-tab .badge {
  background: var(--sd-rule-soft);
  color: var(--sd-ink);
  padding: 2px 8px; border-radius: 2px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
}
.review-tab.active .badge { background: var(--sd-vermillion); color: var(--sd-paper); }
.review-filter {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 24px 0 32px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--sd-muted);
}
.review-filter label { margin-right: 6px; }
.review-filter .chip {
  padding: 6px 12px; border-radius: 2px;
  text-decoration: none;
  color: var(--sd-ink);
  background: var(--sd-paper-3); border: 1px solid var(--sd-rule);
  font-size: 11px; letter-spacing: 0.08em; text-transform: none;
  font-family: 'Inter Tight', sans-serif; font-weight: 500;
}
.review-filter .chip:hover { border-color: var(--sd-ink); }
.review-filter .chip.active {
  background: var(--sd-ink); color: var(--sd-paper); border-color: var(--sd-ink);
}
.review-cta-block {
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule); border-radius: 4px;
  padding: 32px 36px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  box-shadow: var(--sd-shadow);
}
.review-cta-num {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 88px; line-height: 1;
  color: var(--sd-ink); letter-spacing: -0.03em;
}
.review-cta-lbl {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sd-muted);
  margin-top: 4px;
}
.review-cta-text { display: flex; flex-direction: column; }
.review-cta-text .vm-line {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: 18px; color: var(--sd-vermillion); margin-top: 8px;
}
.review-cta-block .review-cta-go {
  background: var(--sd-ink); color: var(--sd-paper);
  padding: 18px 24px;
  border-radius: 2px;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; gap: 14px; align-items: center;
  transition: background .15s;
}
.review-cta-block .review-cta-go:hover { background: var(--sd-vermillion); }
.review-cta-block .review-cta-go .arr { font-family: 'Fraunces', serif; font-size: 22px; color: var(--sd-saffron); }

.review-empty {
  text-align: center; padding: 80px 20px;
  background: var(--sd-paper-3); border: 1px solid var(--sd-rule); border-radius: 4px;
}
.review-empty p {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 32px; color: var(--sd-ink); margin: 0 0 12px;
  font-weight: 400;
}
.review-empty .deck {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 17px; color: var(--sd-muted);
  margin: 0 0 24px; max-width: 460px; margin-left: auto; margin-right: auto;
}

/* ── Redo queue (review.php lists + the drill's Don't redo button) ── */
.review-filter .chip .n {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--sd-muted); margin-left: 6px;
}
.review-filter .chip.active .n { color: var(--sd-saffron); }
.redo-list {
  list-style: none; margin: 0; padding: 0;
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule); border-radius: 4px;
  box-shadow: var(--sd-shadow);
}
.redo-list:empty { display: none; }
.redo-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sd-rule-soft);
}
.redo-row:last-child { border-bottom: none; }
.redo-row .body { flex: 1 1 auto; min-width: 0; }
.redo-row .q {
  font-family: 'Fraunces', serif; font-size: 17px; line-height: 1.3;
  color: var(--sd-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.redo-row .meta {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sd-muted); margin-top: 4px;
}
.redo-row.is-cleared .q { color: var(--sd-muted); }
.btn-redo-clear, .redo-row button {
  flex: 0 0 auto;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--sd-rule);
  color: var(--sd-ink);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.btn-redo-clear:hover, .redo-row button:hover { border-color: var(--sd-vermillion); color: var(--sd-vermillion); }
.btn-redo-clear[disabled], .redo-row button[disabled] { opacity: .55; cursor: default; }
.btn-redo-clear.is-cleared {
  color: var(--sd-muted); border-style: dashed;
}
.btn-redo-clear.is-cleared:hover { color: var(--sd-ink); border-color: var(--sd-ink); }
.q-redo-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sd-muted); margin: 4px 0 8px;
}
.rate-btn.chosen { outline: 2px solid var(--sd-ink); outline-offset: 2px; }
.rate-btn[disabled]:not(.chosen) { opacity: .5; cursor: default; }
@media (max-width: 560px) {
  .redo-row { flex-wrap: wrap; }
  .redo-row .q { white-space: normal; }
  .redo-row button { margin-left: auto; }
}

/* ─────────────────── HISTORY (the archive) ─────────────────── */
.history-shell {
  max-width: 1080px; margin: 24px auto 0; padding: 0 28px 80px;
}
.history-shell h1 {
  font-family: 'Fraunces', serif; font-weight: 400; font-style: italic;
  font-size: clamp(36px, 4.5vw, 56px); line-height: 1;
  letter-spacing: -0.025em; margin: 0 0 8px;
}
.history-shell h1 em { font-style: normal; color: var(--sd-vermillion); }
.history-shell .sub {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-muted);
  margin-bottom: 28px;
}
.history-shell .sub a { color: var(--sd-ink); border-bottom: 1px solid var(--sd-rule); padding-bottom: 1px; text-decoration: none; }
.history-shell .sub a:hover { border-color: var(--sd-ink); }
.history-empty {
  text-align: center; padding: 80px 20px;
  background: var(--sd-paper-3); border: 1px solid var(--sd-rule); border-radius: 4px;
  font-family: 'Fraunces', serif; font-style: italic; color: var(--sd-muted);
  font-size: 18px;
}
.history-empty a { color: var(--sd-vermillion); border-bottom: 1px solid var(--sd-vermillion); padding-bottom: 2px; text-decoration: none; }

/* ─────────────────── SETTINGS (preferences) ─────────────────── */
.settings-shell {
  max-width: 720px; margin: 24px auto 0; padding: 0 28px 80px;
}
.settings-shell h1 {
  font-family: 'Fraunces', serif; font-weight: 400; font-style: italic;
  font-size: clamp(36px, 4.5vw, 56px); line-height: 1;
  letter-spacing: -0.025em; margin: 0 0 8px;
}
.settings-shell h1 em { font-style: normal; color: var(--sd-vermillion); }
.settings-shell .deck {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 18px; color: var(--sd-muted); margin-bottom: 32px;
  line-height: 1.5; max-width: 540px;
}
.settings-card {
  background: var(--sd-paper-3); border: 1px solid var(--sd-rule); border-radius: 4px;
  padding: 28px 32px;
  box-shadow: var(--sd-shadow);
}
.settings-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--sd-rule-soft);
}
.settings-section:first-child { padding-top: 0; }
.settings-section:last-of-type { border-bottom: none; }
.settings-section .ssec-head {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sd-vermillion); margin-bottom: 14px;
}
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block;
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 16px; color: var(--sd-ink);
  margin-bottom: 4px;
}
.field .hint {
  display: block;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 14px; color: var(--sd-muted);
  margin-bottom: 8px; line-height: 1.4;
}
.field input, .field select {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--sd-rule); border-radius: 2px;
  background: var(--sd-paper-3); color: var(--sd-ink);
  font-family: 'Inter Tight', sans-serif; font-size: 15px;
  transition: border-color .15s;
}
.field input:focus, .field select:focus {
  border-color: var(--sd-ink); outline: none;
}
.field input:disabled {
  background: var(--sd-paper-2); color: var(--sd-muted); cursor: not-allowed;
}
.settings-actions {
  margin-top: 24px;
  display: flex; gap: 14px; align-items: center;
}
#settings-msg {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  min-height: 16px;
}
#settings-msg.ok { color: var(--sd-green); }
#settings-msg.err { color: var(--sd-vermillion); }

/* Settings two-col on wider screens */
@media (min-width: 760px) {
  .settings-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .settings-2col .field { margin-bottom: 0; }
}

/* ─────────────────── FLAG MODAL (kept, re-skinned) ─────────────────── */
.flag-modal {
  position: fixed; inset: 0; background: rgba(17,17,17,0.55); z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.flag-modal-card {
  background: var(--sd-paper-3); border: 1px solid var(--sd-rule);
  border-radius: 4px; padding: 28px; max-width: 480px; width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}
.flag-modal-card h3 {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: 26px; margin: 0 0 8px; color: var(--sd-ink);
  letter-spacing: -0.02em;
}
.flag-modal-card p {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 15px; color: var(--sd-muted); margin: 0 0 16px;
  line-height: 1.5;
}
.flag-modal-card textarea {
  width: 100%; box-sizing: border-box; min-height: 100px;
  padding: 12px 14px; border: 1px solid var(--sd-rule); border-radius: 2px;
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 14.5px; line-height: 1.5;
  color: var(--sd-ink); background: var(--sd-paper);
  outline: none; resize: vertical;
}
.flag-modal-card textarea:focus { border-color: var(--sd-ink); }
.flag-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px;
}

/* ─────────────────── FLASHCARD MODE ─────────────────── */
.flash-shell { max-width: 720px; margin: 0 auto; }
.flash-loading {
  text-align: center; padding: 80px 20px;
  font-family: 'Fraunces', serif; font-style: italic; color: var(--sd-muted);
  font-size: 18px;
}
.flash-eyebrow {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--sd-rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-muted);
}
.flash-eyebrow .flash-pos { color: var(--sd-vermillion); font-weight: 500; }
.flash-eyebrow .flash-cat { color: var(--sd-ink); flex: 1; }
.flash-tools { display: inline-flex; gap: 4px; }

/* The card itself — 3D flip */
.flashcard {
  position: relative;
  min-height: 360px;
  margin-bottom: 18px;
  perspective: 1200px;
  cursor: pointer;
  outline: none;
}
.flash-inner {
  position: relative; width: 100%; height: 100%; min-height: inherit;
  transition: transform .55s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform-style: preserve-3d;
}
.flashcard[data-flipped="true"] .flash-inner { transform: rotateY(180deg); }

.flash-face {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  min-height: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule);
  border-radius: 4px;
  box-shadow: var(--sd-shadow);
  padding: 32px 28px 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.flash-back { transform: rotateY(180deg); background: var(--sd-paper-2); }
.flashcard .flash-corner {
  position: absolute; top: 14px; left: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sd-vermillion);
}
.flashcard .flash-back .flash-corner {
  color: var(--sd-vermillion);
}
.flash-image {
  max-width: 240px; max-height: 200px;
  border-radius: 4px; margin-bottom: 18px;
  border: 1px solid var(--sd-rule);
}
.flash-q-text {
  font-family: 'Fraunces', serif; font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.25; letter-spacing: -0.015em;
  color: var(--sd-ink);
  max-width: 560px;
}
.flash-a-text {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2; letter-spacing: -0.02em;
  color: var(--sd-vermillion);
  max-width: 560px;
  margin-bottom: 24px;
}
.flash-hint {
  position: absolute; bottom: 18px; left: 0; right: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sd-muted);
  text-align: center;
}
.flashcard[data-flipped="true"] .flash-front .flash-hint,
.flashcard[data-flipped="false"] .flash-back .flash-hint { opacity: 0; }

/* Self-rate buttons — shared between flashcard back face + audio mode */
.flash-rate, .audio-rate {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin-top: 14px;
  width: 100%; max-width: 460px;
}
.rate-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px;
  border: 1px solid var(--sd-rule);
  background: var(--sd-paper-3);
  border-radius: 2px;
  cursor: pointer;
  transition: all .12s;
  font-family: 'JetBrains Mono', monospace;
}
.rate-btn:hover { transform: translateY(-1px); }
.rate-glyph {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 22px; line-height: 1;
}
.rate-label {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-ink);
}
.rate-btn.rate-wrong { border-color: var(--sd-vermillion); }
.rate-btn.rate-wrong .rate-glyph { color: var(--sd-vermillion); }
.rate-btn.rate-wrong:hover { background: var(--sd-vermillion); }
.rate-btn.rate-wrong:hover .rate-glyph,
.rate-btn.rate-wrong:hover .rate-label { color: var(--sd-paper); }
.rate-btn.rate-hard { border-color: var(--sd-saffron); }
.rate-btn.rate-hard .rate-glyph { color: var(--sd-saffron); }
.rate-btn.rate-hard:hover { background: var(--sd-saffron); }
.rate-btn.rate-hard:hover .rate-label { color: var(--sd-ink); }
.rate-btn.rate-easy { border-color: var(--sd-green); }
.rate-btn.rate-easy .rate-glyph { color: var(--sd-green); }
.rate-btn.rate-easy:hover { background: var(--sd-green); }
.rate-btn.rate-easy:hover .rate-glyph,
.rate-btn.rate-easy:hover .rate-label { color: var(--sd-paper); }

.flash-progress {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; color: var(--sd-ink);
}
.flash-progress .ok { color: var(--sd-green); font-weight: 600; }
.flash-progress .muted { color: var(--sd-muted); }

/* ─────────────────── AUDIO / HANDS-FREE MODE ─────────────────── */
.audio-shell { max-width: 640px; margin: 0 auto; }
.audio-card {
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule);
  border-radius: 4px;
  box-shadow: var(--sd-shadow);
  padding: 36px 28px 32px;
  text-align: center;
  min-height: 380px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 18px;
}
.audio-phase {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sd-muted);
}
.audio-orb {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--sd-ink);
  color: var(--sd-paper);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 18px 40px -16px rgba(184,54,44,0.4),
              0 1px 0 rgba(17,17,17,0.04);
  transition: all .2s ease;
  position: relative;
}
.audio-orb:hover {
  transform: translateY(-2px);
  background: var(--sd-vermillion);
}
.audio-orb::before {
  content: ''; position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(184,54,44,0.18);
  pointer-events: none;
}
.audio-orb-glyph {
  font-family: 'Fraunces', serif;
  font-size: 56px; line-height: 1;
  color: var(--sd-saffron);
}
.audio-orb:hover .audio-orb-glyph { color: var(--sd-paper); }

.audio-image {
  max-width: 220px;
  max-height: 180px;
  width: auto; height: auto;
  display: block;
  margin: 4px auto 0;
  border: 1px solid var(--sd-rule);
  border-radius: 4px;
  background: var(--sd-paper);
  padding: 6px;
}
.audio-q-text {
  font-family: 'Fraunces', serif; font-weight: 400;
  font-size: clamp(18px, 2.5vw, 24px);
  line-height: 1.3;
  color: var(--sd-ink);
  max-width: 520px;
  padding-top: 8px;
}
.audio-a-text {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.25;
  color: var(--sd-vermillion);
  max-width: 520px;
  padding-top: 6px;
}
.audio-a-label {
  display: block;
  font-family: 'JetBrains Mono', monospace; font-style: normal;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sd-muted); margin-bottom: 6px;
}
.audio-controls {
  display: flex; gap: 10px; justify-content: center; margin-top: 4px;
}
.audio-ctrl {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--sd-rule);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sd-ink);
  cursor: pointer;
  transition: all .12s;
}
.audio-ctrl:hover:not(:disabled) { background: var(--sd-paper-2); border-color: var(--sd-ink); }
.audio-ctrl:disabled { opacity: 0.4; cursor: not-allowed; }

.audio-hint {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 13.5px; line-height: 1.5;
  color: var(--sd-muted);
  max-width: 460px;
  padding-top: 10px;
}

/* ─────────────────── MOCK — nav + review pane ─────────────────── */
.q-part-progress {
  color: var(--sd-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: none;
  margin-left: 6px;
}

/* Bottom nav row (Previous / Review / Next) on each mock question */
.mock-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 2px solid var(--sd-ink);
}
.mock-nav .sd-btn { padding: 11px 16px; }
.mock-nav .sd-btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Review pane */
.mock-review {
  max-width: 720px; margin: 0 auto;
}
.mock-review-head {
  padding-bottom: 18px; margin-bottom: 24px;
  border-bottom: 2px solid var(--sd-ink);
}
.mock-review-head h2 {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: clamp(32px, 5vw, 48px); line-height: 1; letter-spacing: -0.025em;
  margin: 0 0 8px; color: var(--sd-ink);
}
.mock-review-head h2 em { font-style: normal; color: var(--sd-vermillion); }
.mock-review-head p {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 17px; color: var(--sd-muted); line-height: 1.5;
}
.mock-review-head p strong { color: var(--sd-vermillion); font-style: normal; }

.review-group {
  background: var(--sd-paper-3);
  border: 1px solid var(--sd-rule);
  border-radius: 4px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--sd-shadow);
}
.review-group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--sd-rule);
}
.review-group-label {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: 20px; color: var(--sd-ink);
}
.review-group-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sd-muted);
}

.review-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}
.review-tile {
  background: var(--sd-paper);
  border: 1px solid var(--sd-rule);
  border-radius: 2px;
  padding: 12px 6px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: all .12s;
}
.review-tile:hover { transform: translateY(-1px); border-color: var(--sd-ink); }
.review-tile .rt-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; color: var(--sd-muted);
}
.review-tile .rt-mark {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 22px; line-height: 1; color: var(--sd-rule);
}
.review-tile.is-answered {
  background: var(--sd-green-soft);
  border-color: var(--sd-green);
}
.review-tile.is-answered .rt-num { color: var(--sd-ink); }
.review-tile.is-answered .rt-mark { color: var(--sd-green); }
.review-tile.is-empty {
  border-style: dashed;
}
.review-tile.is-empty .rt-mark { color: var(--sd-vermillion); }

.mock-review-footer {
  display: flex; gap: 10px; justify-content: space-between;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 2px solid var(--sd-ink);
  flex-wrap: wrap;
}
.mock-review-footer .sd-btn { padding: 13px 18px; }
.mock-review-warn {
  margin-top: 14px;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 14px; color: var(--sd-muted); text-align: center;
}
.mock-review-warn strong {
  color: var(--sd-vermillion); font-style: normal;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ─────────────────── FOCUS MODE — hide chrome during practice/mock ─────────────────── */
body.focus-mode .app-bar,
body.focus-mode .sub-bar,
body.focus-mode footer { display: none !important; }
body.focus-mode .study-rail,
body.focus-mode .tools-rail { display: none !important; }
body.focus-mode .study-page,
body.focus-mode .desk-grid { grid-template-columns: 1fr; }
body.focus-mode .sd-wrap { padding-top: 16px; max-width: 880px; }
body.focus-mode .mock-banner { top: 0; }
/* Higher specificity than focus.js's inline style — keep paper warm in study mode */
body.study-desk.focus-mode { background: var(--sd-paper); }

/* ─────────────────── TEXT-SIZE BODY CLASSES ─────────────────── */
body.text-small .q-text       { font-size: 24px; }
body.text-small .q-text::first-letter { font-size: 68px; }
body.text-small .q-option > *  { font-size: 16px; }
body.text-small .welcome .greet { font-size: clamp(28px, 4vw, 42px); }
body.text-small .ch-title { font-size: 19px; }

body.text-large .q-text       { font-size: 36px; }
body.text-large .q-text::first-letter { font-size: 100px; }
body.text-large .q-option > *  { font-size: 20px; padding: 22px 14px; }
body.text-large .welcome .greet { font-size: clamp(40px, 5vw, 60px); }
body.text-large .ch-title { font-size: 24px; }
body.text-large .feedback { font-size: 14px; }

/* ─────────────────── HAMBURGER (mobile-only) ─────────────────── */
.app-nav-toggle {
  display: none;
  background: transparent; border: none; cursor: pointer;
  padding: 8px 6px;
  width: 36px; height: 36px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.app-nav-toggle .bar {
  display: block;
  width: 22px; height: 2px;
  background: var(--sd-paper);
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.app-nav-toggle.open .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.app-nav-toggle.open .bar:nth-child(2) { opacity: 0; }
.app-nav-toggle.open .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.app-drawer-foot { display: none; }

/* Body class — lock background scroll when drawer is open (mobile only) */
@media (max-width: 760px) {
  body.nav-open { overflow: hidden; }
}

/* ─────────────────── RESPONSIVE ─────────────────── */

/* Tablet — single-column page, but rails still in a strip layout */
@media (max-width: 1100px) {
  .desk-grid { grid-template-columns: 1fr; }
  .study-rail {
    position: static;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    flex-direction: row;
  }
  .study-rail .rail-card { flex: none; }
  .today-strip { grid-template-columns: 1fr 1fr; }
  .today-cell { border-bottom: 1px solid var(--sd-rule-soft); border-right: 1px solid var(--sd-rule-soft); }
  .today-cell:nth-child(2n) { border-right: none; }
  .today-cell.cta { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; padding: 18px 22px; }
  .today-cell.cta .v { font-size: 17px; }
  .today-cell.cta .arrow { margin-top: 0; }
  .study-page { grid-template-columns: 1fr; }
  .tools-rail {
    position: static;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    flex-direction: row;
  }
  .tools-rail .tool-card { flex: none; }
}

/* Small tablet / large phone */
@media (max-width: 760px) {
  /* App bar — show hamburger, hide desktop-only bits */
  .app-bar-inner { grid-template-columns: auto 1fr auto; gap: 8px; padding: 0 14px; }
  .app-brand { gap: 8px; font-size: 18px; }
  .app-brand .desk { display: none; }
  .app-tabs { display: none; }
  .app-right .desktop-only { display: none; }
  .app-right .streak .streak-word { display: none; }
  .app-right .streak { padding: 4px 8px; font-size: 11px; }
  /* Sign out becomes a compact icon on mobile but stays visible */
  .app-right .sign-out {
    padding: 5px 10px;
    border-left: none;
    border: 1px solid rgba(244,237,224,0.28);
    border-radius: 999px;
    color: rgba(244,237,224,0.85);
    font-size: 10px; letter-spacing: 0.04em;
  }
  .app-right .sign-out .so-text { display: none; }
  .app-right .sign-out .so-icon {
    display: inline-block; font-family: 'Fraunces', serif; font-size: 14px; line-height: 1;
  }
  .app-nav-toggle { display: inline-flex; }

  /* Drawer (slides down from below the app-bar) */
  .app-tabs.open {
    display: flex;
    position: fixed;
    top: 56px; left: 0; right: 0; bottom: 0;
    flex-direction: column;
    background: var(--sd-ink);
    z-index: 49;
    padding: 8px 0 24px;
    gap: 0;
    overflow-y: auto;
  }
  .app-tabs.open .app-tab {
    height: auto; width: 100%;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(244,237,224,0.08);
    margin-bottom: 0;
    border-left: 3px solid transparent;
    font-size: 12px;
  }
  .app-tabs.open .app-tab.current {
    color: var(--sd-saffron) !important;
    border-bottom-color: rgba(244,237,224,0.08);
    border-left-color: var(--sd-saffron);
    background: rgba(233,181,0,0.06);
  }
  .app-tabs.open .app-tab .ico { font-size: 18px; margin-right: 4px; }
  .app-tabs.open .app-drawer-foot {
    display: flex; flex-direction: column; gap: 14px;
    margin-top: auto;
    padding: 22px;
    border-top: 1px solid rgba(244,237,224,0.12);
  }
  .app-tabs.open .app-drawer-foot .reader-chip {
    color: var(--sd-paper); padding: 0; border: none;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: 0.1em; display: flex; align-items: center; gap: 10px;
  }
  .app-tabs.open .app-drawer-foot .reader-chip .av {
    width: 32px; height: 32px; font-size: 14px;
  }
  .app-tabs.open .app-drawer-foot .reader-chip .rc-text { word-break: break-all; }
  .app-tabs.open .app-drawer-foot .sign-out {
    color: var(--sd-paper); padding: 10px 0;
    border-bottom: 1px solid var(--sd-saffron); display: inline-block;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    align-self: flex-start;
  }

  .sub-bar-inner { padding: 11px 14px; gap: 8px; }
  .crumb { font-size: 10px; }
  .sub-bar .date { font-size: 10px; }
  .sd-wrap { padding: 22px 14px 48px; }

  /* Welcome — force wrapping for long display names and decks */
  .welcome { min-width: 0; }
  .welcome .greet {
    font-size: clamp(28px, 9vw, 40px);
    overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
    max-width: 100%;
  }
  .welcome .greet em { display: inline; overflow-wrap: anywhere; }
  .welcome .deck { font-size: 16px; overflow-wrap: anywhere; max-width: 100%; }

  /* Today strip — 1 col; CTA stays column with stacked label + value */
  .today-strip { grid-template-columns: 1fr; }
  .today-cell { border-right: none; border-bottom: 1px solid var(--sd-rule-soft); }
  .today-cell:last-child { border-bottom: none; }
  .today-cell.cta {
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 20px;
  }
  .today-cell.cta .k { margin-bottom: 8px; }
  .today-cell.cta .v { font-size: 18px; max-width: 100%; }
  .today-cell.cta .arrow { display: none; }

  /* Section heads — allow wrap */
  .sec-head { flex-wrap: wrap; gap: 8px; min-width: 0; }
  .sec-head .title { font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
  .sec-head .extra { font-size: 10px; }

  /* Any text descendant that could overflow — common safety net */
  .desk-grid > div, .desk-grid > aside { min-width: 0; }
  .study-page > div, .study-page > aside { min-width: 0; }

  /* Chapter head — clean stacking on mobile (use class selectors, avoid nth-of-type) */
  .chapter-row { box-shadow: 0 1px 0 rgba(17,17,17,0.04); }
  .chapter-head {
    grid-template-columns: 52px 1fr;
    grid-template-areas: none;
    grid-template-rows: auto;
    gap: 4px 14px;
    padding: 18px 14px;
    align-items: start;
  }
  .chapter-head > * { min-width: 0; }
  /* Roman: column 1, row 1 only */
  .chapter-head > .roman {
    grid-column: 1; grid-row: 1;
    font-size: 44px; line-height: 1;
  }
  /* Title wrapper and mastery wrapper (the two un-classed divs) flow into column 2 */
  .chapter-head > div:not(.roman):not(.ch-status-col):not(.ch-actions) {
    grid-column: 2;
  }
  /* Status + actions span full width below */
  .chapter-head > .ch-status-col,
  .chapter-head > .ch-actions {
    grid-column: 1 / -1;
  }
  .chapter-head > .ch-status-col { margin-top: 10px; }
  .chapter-head > .ch-actions    { margin-top: 8px; }

  .chapter-head .ch-title { font-size: 19px; line-height: 1.2; }
  .chapter-head .ch-sub {
    font-size: 9.5px; letter-spacing: 0.1em;
    overflow-wrap: anywhere; word-break: break-word;
    margin-top: 4px;
  }
  .chapter-head .ch-mastery { gap: 10px; margin-top: 8px; }
  .chapter-head .ch-mastery .pct { font-size: 30px; }
  .chapter-head .ch-mastery .pct .sym { font-size: 14px; }
  .chapter-head .ch-status-col { gap: 6px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .chapter-head .ch-status-col .ch-pill { font-size: 9px; padding: 3px 8px; }
  .chapter-head .ch-status-col .ch-last { font-size: 10px; line-height: 1.4; word-break: break-word; }
  .chapter-head .ch-actions {
    flex-wrap: wrap; gap: 8px; align-items: center;
    width: 100%;
  }
  .chapter-head .ch-actions .sd-btn {
    padding: 9px 12px; font-size: 10.5px; letter-spacing: 0.12em;
    flex: 1 1 auto; min-width: 0; justify-content: center;
  }
  .chapter-head .ch-actions .ch-expand-toggle {
    flex: 0 0 32px; width: 32px; height: 32px; font-size: 13px;
  }

  /* Sub-cat expand — horizontal scroll */
  .ch-expand { padding: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .subcat-table { font-size: 12.5px; min-width: 540px; }
  .subcat-table th { font-size: 9px; padding: 0 8px 8px; }
  .subcat-table td { padding: 10px 8px; }
  .subcat-table td.cat { font-size: 13px; }
  .subcat-table td.acc { width: 130px; }
  .subcat-table .acc-row { gap: 6px; }
  .subcat-table .acc-row .v { width: 32px; font-size: 11px; }

  /* Ledger — same scroll treatment with cue */
  .ledger { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
  .ledger table { min-width: 640px; }
  .ledger thead th { padding: 10px 12px; font-size: 9.5px; }
  .ledger tbody td { padding: 12px; font-size: 13px; }
  .ledger .when, .ledger .mins { font-size: 11px; white-space: nowrap; }
  .ledger .score { white-space: nowrap; }
  .ledger .verdict { white-space: nowrap; }
  .ledger .exam-cell { font-size: 14px; white-space: nowrap; }
  .ledger .row-actions { white-space: nowrap; }
  .ledger .row-actions .sd-btn { padding: 4px 8px; font-size: 9.5px; }

  /* Errata + Daybook */
  .two-col { grid-template-columns: 1fr; gap: 18px; }
  .panel { padding: 18px 18px; }
  .panel-head .nm { font-size: 20px; }

  /* Right rail — full-width stacked on mobile */
  .study-rail { grid-template-columns: 1fr; gap: 12px; }
  .tools-rail { grid-template-columns: 1fr; gap: 12px; }
  .rail-streak .n { font-size: 52px; }

  /* Practice — question card */
  .q-text { font-size: 22px; line-height: 1.3; }
  .q-text::first-letter { font-size: 52px; margin: 4px 10px 0 0; }
  .q-option { padding: 16px 8px; gap: 14px; }
  .q-option::before { font-size: 22px; width: 24px; }
  .q-option > * { font-size: 16px; line-height: 1.4; }
  .q-meta-row { gap: 8px; }
  .bookmark-btn, .tts-btn, .flag-btn { width: 32px; height: 32px; font-size: 14px; }

  /* Practice setup */
  .practice-headline { font-size: clamp(28px, 7vw, 40px); }
  .practice-deck { font-size: 15.5px; }
  .practice-eyebrow { flex-direction: column; align-items: flex-start; gap: 8px; }
  .topic-chip { font-size: 13px; padding: 7px 14px; }
  .count-chips { padding: 12px; gap: 6px; }
  .count-chip { padding: 5px 11px; font-size: 11px; }
  .count-label { font-size: 9.5px; }
  .cat-grid { grid-template-columns: 1fr; gap: 10px; }
  .cat-card { padding: 16px; }

  /* Mode chips — wrap nicely on mobile */
  .mode-chips { padding: 10px 12px; gap: 6px; }
  .mode-chip { padding: 7px 11px; font-size: 12px; gap: 6px; }
  .mode-chip .mode-icon { font-size: 14px; }

  /* Flashcard mobile */
  .flashcard { min-height: 320px; }
  .flash-face { padding: 26px 16px 70px; }
  .flash-q-text { font-size: 22px; }
  .flash-a-text { font-size: 26px; }
  .flash-image { max-width: 200px; max-height: 160px; }
  .flash-rate, .audio-rate { gap: 6px; }
  .rate-btn { padding: 12px 6px; }
  .rate-glyph { font-size: 20px; }
  .rate-label { font-size: 9.5px; letter-spacing: 0.1em; }

  /* Result — per-question breakdown mobile */
  .result-q-section-title { font-size: 22px; }
  .result-q-filter-btn { font-size: 9.5px; padding: 5px 10px; }
  .result-q-group-name { font-size: 17px; }
  .result-q-card { padding: 14px 14px; }
  .result-q-meta { font-size: 9.5px; gap: 8px; }
  .result-q-meta .result-q-verdict { font-size: 9px; padding: 2px 8px; }
  .result-q-text { font-size: 16px; }
  .result-q-options .opt { padding: 9px 12px; font-size: 14.5px; gap: 10px; }
  .result-q-options .opt-tag { font-size: 9px; }
  .result-q-image { max-width: 200px; max-height: 160px; }

  /* Mock — nav + review pane mobile */
  .mock-nav .sd-btn { padding: 10px 12px; font-size: 10.5px; flex: 1 1 auto; min-width: 0; justify-content: center; }
  .mock-review-head h2 { font-size: clamp(28px, 9vw, 40px); }
  .mock-review-head p { font-size: 15.5px; }
  .review-group { padding: 14px 14px; }
  .review-group-label { font-size: 17px; }
  .review-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
  .review-tile { padding: 10px 4px; }
  .review-tile .rt-num { font-size: 10px; }
  .review-tile .rt-mark { font-size: 18px; }
  .mock-review-footer { flex-direction: column-reverse; }
  .mock-review-footer .sd-btn { width: 100%; justify-content: center; }

  /* Topic / mode picker mobile */
  .topic-pick-head { flex-wrap: wrap; gap: 4px; }
  .topic-pick-label { font-size: 20px; }
  .topic-pick-sub { font-size: 9px; }
  .topic-grid, .mode-grid { grid-template-columns: 1fr; gap: 10px; }
  .topic-card, .mode-card { padding: 18px 16px; }
  .topic-card-name, .mode-card-name { font-size: 19px; }
  .mode-card-desc { font-size: 13.5px; }
  .mode-card-icon { width: 32px; height: 32px; font-size: 16px; }
  .cat-back-current { font-size: 15px; }

  /* Audio mobile */
  .audio-card { padding: 26px 18px 22px; min-height: 340px; gap: 14px; }
  .audio-orb { width: 110px; height: 110px; }
  .audio-orb-glyph { font-size: 44px; }
  .audio-q-text { font-size: 18px; }
  .audio-a-text { font-size: 22px; }
  .audio-hint { font-size: 12.5px; }
  .audio-image { max-width: 180px; max-height: 150px; }

  /* Mock — compact banner */
  .mock-banner { padding: 10px 14px; gap: 10px; flex-wrap: wrap; font-size: 10.5px; }
  .mock-banner .left { gap: 10px; }
  .mock-banner .timer-big { font-size: 22px; }
  .mock-banner .pill { padding: 3px 8px; font-size: 9.5px; }

  /* Mock intro — settings-card a bit tighter */
  .settings-card { padding: 22px 18px; }

  /* Result page */
  .result-shell { padding: 0 14px 60px; }
  .result-eyebrow { flex-wrap: wrap; gap: 8px; font-size: 9.5px; padding-bottom: 12px; }
  .result-headline { font-size: clamp(40px, 11vw, 64px); }
  .result-sub { font-size: 17px; margin-bottom: 28px; }
  .result-part-row { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
  .result-part-row .part-name { font-size: 16px; }
  .result-part-row .score { font-size: 22px; }
  .result-actions { gap: 8px; }
  .result-actions .sd-btn { font-size: 10px; padding: 9px 11px; }

  /* Review */
  .review-shell { padding: 0 14px 60px; }
  .review-shell h1 { font-size: clamp(34px, 9vw, 52px); }
  .review-sub { font-size: 16px; }
  .review-tabs { padding-bottom: 0; }
  .review-tab { padding: 11px 13px; font-size: 10px; }
  .review-tab .badge { font-size: 10px; padding: 1px 6px; }
  .review-filter { gap: 6px; font-size: 9.5px; }
  .review-filter .chip { padding: 5px 10px; font-size: 11px; }
  .review-cta-block { padding: 24px 22px; gap: 18px; flex-direction: column; align-items: flex-start; }
  .review-cta-num { font-size: 64px; }
  .review-cta-block .review-cta-go { width: 100%; justify-content: space-between; padding: 16px 20px; font-size: 11px; }

  /* History */
  .history-shell { padding: 0 14px 60px; }
  .history-shell h1 { font-size: clamp(30px, 8vw, 44px); }
  .history-shell .sub { font-size: 10px; flex-wrap: wrap; gap: 6px; }

  /* Settings */
  .settings-shell { padding: 0 14px 60px; }
  .settings-shell h1 { font-size: clamp(32px, 9vw, 48px); }
  .settings-shell .deck { font-size: 16px; }
  .settings-card { padding: 20px 18px; }
  .settings-actions { flex-wrap: wrap; gap: 10px; }
  .settings-actions .sd-btn { width: 100%; justify-content: center; }
  #settings-msg { width: 100%; text-align: center; }

  /* Announcement banner */
  .dash-banner { padding: 12px 14px; font-size: 13px; }

  /* Marketing footer included on user pages — collapse to single column */
  body.study-desk .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  body.study-desk .footer-grid > * { min-width: 0; }
  body.study-desk .container { padding: 0 14px; }
  body.study-desk .footer-bottom { flex-direction: column; gap: 4px; text-align: left; }
}

/* Very small phones (iPhone SE etc.) */
@media (max-width: 380px) {
  .app-bar-inner { padding: 0 10px; }
  .app-brand { font-size: 16px; }
  .app-brand .mark { width: 26px; height: 26px; font-size: 13px; }
  .app-right .streak { display: none; }
  .sub-bar-inner { padding: 9px 10px; }
  .sub-bar .date { display: none; }
  .crumb { font-size: 9.5px; letter-spacing: 0.1em; }
  .sd-wrap { padding: 18px 10px 40px; }
  .welcome .greet { font-size: clamp(24px, 9vw, 32px); }
  .today-cell { padding: 14px 14px; }
  .today-cell .v { font-size: 30px; }
  .chapter-head { padding: 16px 12px; gap: 4px 12px; }
  .chapter-head .roman { font-size: 38px; }
  .chapter-head .ch-title { font-size: 17px; }
  .chapter-head .ch-actions .sd-btn { padding: 7px 9px; font-size: 9.5px; }
  .sec-head .title { font-size: 19px; }
  .panel-head .nm { font-size: 18px; }
  .q-text { font-size: 20px; }
  .q-text::first-letter { font-size: 44px; }
  .result-headline { font-size: clamp(36px, 12vw, 52px); }
  .result-sub { font-size: 15px; }
  .review-shell h1 { font-size: clamp(28px, 9vw, 42px); }
  .history-shell h1 { font-size: clamp(26px, 8vw, 38px); }
  .settings-shell h1 { font-size: clamp(28px, 9vw, 40px); }
}

/* ─────────────────── LEGACY / SHARED REFERRER STYLES (still used by /refer.php) ─────────────────── */
/* These are kept identical to the old exams.css so refer.php continues to look the same. */

.refer-shell { max-width: 940px; margin: 40px auto 80px; padding: 0 24px; font-family: 'Inter Tight', sans-serif; }
.refer-title { font-family: Fraunces, serif; font-size: 44px; line-height: 1.05; margin: 4px 0 8px; letter-spacing: -.02em; }
.refer-sub { font-size: 16px; color: rgba(0,0,0,.6); margin: 0 0 32px; }
.refer-saved { background:#d8f3dc;color:#1b4332;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:18px;}
.refer-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-bottom: 28px; }
@media (min-width: 760px) { .refer-grid { grid-template-columns: 1.6fr 1fr; } }
.refer-card { background: white; border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 24px; }
.refer-code-label, .refer-qr-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(0,0,0,.55); }
.refer-code { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 36px; letter-spacing: 4px; background: #ffcc00; display: inline-block; padding: 8px 18px; border-radius: 8px; margin: 8px 0 16px; }
.refer-link { display: flex; gap: 8px; align-items: stretch; }
.refer-link input { flex: 1; padding: 10px 12px; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; font-family: 'JetBrains Mono', monospace; font-size: 13px; background: #f9fafb; }
.refer-poster-link { display: inline-block; margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(0,0,0,.6); text-decoration: none; padding: 6px 10px; border: 1px dashed rgba(0,0,0,.18); border-radius: 8px; }
.refer-qr-card { text-align: center; }
.refer-qr { max-width: 220px; width: 100%; height: auto; border-radius: 12px; margin: 10px auto 0; display: block; }
.refer-stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 32px; }
.stat-tile { background: white; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; padding: 18px 16px; text-align: center; }
.stat-tile .num { font-family: Fraunces, serif; font-size: 30px; font-weight: 500; line-height: 1; color: #0d0d0d; }
.stat-tile .lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(0,0,0,.55); margin-top: 6px; }
.stat-highlight { background: linear-gradient(135deg, #fffde0, #ffcc00); border-color: transparent; }
.refer-h2 { font-family: Fraunces, serif; font-size: 26px; font-weight: 500; margin: 8px 0 12px; }
.refer-empty { font-size: 14px; color: rgba(0,0,0,.5); padding: 24px 0; text-align: center; }
.refer-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 32px; }
.refer-row { background: white; border: 1px solid rgba(0,0,0,.06); border-radius: 12px; padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; }
.refer-row-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(0,0,0,.55); margin-top: 2px; }
.refer-row-right { text-align: right; }
.refer-amt { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; }
.refer-status { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.refer-status-pending { color: #b45309; }
.refer-status-releasable { color: #1b4332; }
.refer-status-paid { color: rgba(0,0,0,.5); }
.refer-status-cancelled { color: #b91c1c; }
.refer-payout textarea, .refer-payout select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; font-family: 'Inter Tight', sans-serif; font-size: 14px; background: white; }
.refer-hero { background: linear-gradient(135deg, #0d0d0d 0%, #1f2937 100%); color: #f4f1ea; }
.refer-hero-inner { max-width: 940px; margin: 0 auto; padding: 48px 24px 56px; }
.refer-hero-headline { font-family: Fraunces, serif; font-size: 48px; font-weight: 400; line-height: 1.05; letter-spacing: -.02em; margin: 8px 0 28px; color: #f4f1ea; }
.refer-hero-headline .accent { color: #ffcc00; font-style: italic; font-weight: 500; }
.refer-hero-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.hero-stat-block .hero-stat-amt { font-family: Fraunces, serif; font-size: 36px; font-weight: 500; color: #f4f1ea; letter-spacing: -.02em; line-height: 1; }
.hero-stat-block .hero-stat-lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(244,241,234,.55); margin-top: 8px; }
.refer-saved-inline { display: inline-block; margin-top: 16px; background: rgba(34,197,94,.18); color: #d1fae5; padding: 6px 12px; border-radius: 8px; font-size: 13px; }
.refer-content { max-width: 940px; margin: 32px auto 80px; padding: 0 24px; }
.share-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: white; color: #0d0d0d; border: 1px solid rgba(0,0,0,.1); text-decoration: none; font-family: 'Inter Tight', sans-serif; font-size: 13px; font-weight: 600; }
.share-btn.whatsapp { background: #25d366; color: white; border-color: #25d366; }
.refer-qr-download { display: inline-block; margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(0,0,0,.55); text-decoration: underline; }
.refer-twocol { display: grid; gap: 32px; grid-template-columns: 1fr; margin-bottom: 40px; }
@media (min-width: 820px) { .refer-twocol { grid-template-columns: 1.5fr 1fr; } }
.tips-list { display: flex; flex-direction: column; gap: 16px; }
.tip { background: white; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; font-family: 'Inter Tight', sans-serif; font-size: 14px; line-height: 1.45; color: rgba(0,0,0,.75); }
.tip-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #ffcc00; color: #0d0d0d; font-family: Fraunces, serif; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; }

/* ═══════════ DAY ROUTE SKIN — study header/footer matched to the public site (2026-08-15) ═══════════ */
/* Header: light paper bar + yellow road stripe (was ink-black) */
.app-bar {
  background: #f7f4ec;
  color: var(--sd-ink);
  border-bottom: 2px solid var(--sd-ink);
}
.app-bar::after {
  content: ""; display: block; height: 4px;
  background: repeating-linear-gradient(90deg, #f5c400 0 26px, transparent 26px 52px);
  opacity: .9;
}
.app-brand { color: var(--sd-ink) !important; }
.app-brand .desk { color: rgba(17,17,17,.5); border-left-color: rgba(17,17,17,.2); }
.app-tab { color: rgba(17,17,17,.58) !important; }
.app-tab:hover { color: var(--sd-ink) !important; }
.app-tab.current {
  color: var(--sd-ink) !important;
  border-bottom: 3px solid #f5c400;
  background: rgba(245,196,0,.16);
}
.app-right .streak {
  background: #fff; border: 1.5px solid var(--sd-ink); border-radius: 999px;
  color: var(--sd-ink); padding: 4px 10px;
  box-shadow: 2px 2px 0 rgba(17,17,17,.3);
}
.app-right .reader-chip {
  background: #fff; border: 1.5px solid var(--sd-ink); border-radius: 999px;
  color: var(--sd-ink); box-shadow: 2px 2px 0 rgba(17,17,17,.3);
}
.app-right .reader-chip .av { background: var(--sd-ink); color: #f5c400; }
.app-right .sign-out {
  background: #f5c400; color: var(--sd-ink) !important;
  border: 1.5px solid var(--sd-ink); border-radius: 999px;
  padding: 6px 14px;
  box-shadow: 2px 2px 0 rgba(17,17,17,.55);
  transition: transform .15s, box-shadow .15s;
}
.app-right .sign-out:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 rgba(17,17,17,.55); }
.app-nav-toggle .bar { background: var(--sd-ink); }

/* Mobile drawer: paper, not ink */
@media (max-width: 760px) {
  .app-tabs.open { background: #f7f4ec; border-top: 1px solid rgba(17,17,17,.15); }
  .app-tabs.open .app-tab { color: rgba(17,17,17,.62) !important; border-bottom-color: rgba(17,17,17,.08); }
  .app-tabs.open .app-tab.current {
    color: var(--sd-ink) !important;
    border-left-color: #f5c400;
    background: rgba(245,196,0,.16);
    border-bottom-color: rgba(17,17,17,.08);
  }
  .app-tabs.open .app-drawer-foot { border-top-color: rgba(17,17,17,.14); }
  .app-tabs.open .app-drawer-foot .reader-chip { color: var(--sd-ink); }
  .app-tabs.open .app-drawer-foot .reader-chip .av { background: var(--sd-ink); color: #f5c400; }
  .app-tabs.open .app-drawer-foot .sign-out { color: var(--sd-ink); border-bottom-color: #f5c400; background: transparent; box-shadow: none; border-radius: 0; padding: 10px 0; }
  .app-right .sign-out { border: 1.5px solid var(--sd-ink); color: var(--sd-ink); background: #f5c400; }
}

/* Footer: light Day Route footer (overrides the old dark cabpass.css footer) */
footer {
  background: #f2ecdf;
  border-top: 2px solid var(--sd-ink);
  position: relative;
  color: rgba(17,17,17,.72);
}
footer::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(90deg, #f5c400 0 26px, transparent 26px 52px);
  opacity: .9;
}
footer .logo { color: var(--sd-ink) !important; }
footer .footer-brand p { color: rgba(17,17,17,.62); }
footer .footer-col h4 { color: rgba(17,17,17,.48); }
footer .footer-col a { color: rgba(17,17,17,.72); }
footer .footer-col a:hover { color: var(--sd-ink); }
footer .footer-bottom { border-top: 1px solid rgba(17,17,17,.16); color: rgba(17,17,17,.55); }

/* Mobile app-bar layout fix: with the tabs hidden, the old 3-col grid let the
   right cluster fall into the stretchy middle column and float mid-bar.
   Flex pins brand left, controls hard right. */
@media (max-width: 760px) {
  .app-bar-inner { display: flex; justify-content: space-between; align-items: center; }
  .app-right { margin-left: auto; }
}