/* Medcue — Cue Stack redesign
   Final compatibility layer for every public and signed-in surface. */

:root {
  --cue-blue: #173CFF;
  --cue-blue-deep: #0D249F;
  --cue-ink: #111A2E;
  --cue-ink-soft: #4D5870;
  --cue-paper: #F4F6FF;
  --cue-white: #FFFFFF;
  --cue-citron: #D9FF57;
  --cue-citron-soft: #F4FFD0;
  --cue-apricot: #FFB45B;
  --cue-apricot-deep: #A8590A; /* text-safe apricot: >=4.5:1 on paper. #FFB45B is fills/large surfaces only. */
  --cue-apricot-soft: #FFF0DD;
  --cue-lavender: #C9D4FF;
  --cue-line: #B7C4F0;
  --cue-line-strong: #7489D2;
  --cue-good: #0C6B53;
  --cue-danger: #9F2F1F;
  --cue-on-danger: #FFFFFF;
  --cue-disabled-bg: #E1E6F7;
  --cue-disabled-ink: #59647B;
  --cue-disabled-line: #8292C0;
  --cue-surface-recessed: #E9EDFF;
  --cue-surface-raised: var(--cue-white);
  --cue-nav-bg: #173CFF;
  --cue-on-nav: #FFFFFF;
  --cue-action-ink: #111A2E;
  --cue-control-bg: var(--cue-white);
  --cue-control-ink: var(--cue-blue-deep);
  --cue-shadow-quiet: 2px 3px 0 rgba(23, 60, 255, 0.11);
  --cue-shadow: 5px 6px 0 rgba(23, 60, 255, 0.15);
  --cue-shadow-feature: 9px 10px 0 rgba(23, 60, 255, 0.22);
  --cue-shadow-small: var(--cue-shadow-quiet);
  --cue-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --cue-body: 'Atkinson Hyperlegible Next', Arial, sans-serif;
  --cue-max: 1240px;
  --cue-gutter: clamp(20px, 4vw, 52px);
  --cue-radius: 16px;
  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Semantic bridges make the redesign native on inherited route families. */
body.vt {
  --ink: var(--cue-paper);
  --panel: var(--cue-surface-raised);
  --panel-2: var(--cue-surface-recessed);
  --line: var(--cue-line);
  --line-2: var(--cue-line-strong);
  --fg: var(--cue-ink);
  --fg-2: var(--cue-ink-soft);
  --fg-3: var(--cue-ink-soft);
  --mint: var(--cue-blue);
  --mint-deep: var(--cue-blue-deep);
  --amber: var(--cue-apricot);
  --amber-deep: var(--cue-ink);
  --ecg: var(--cue-blue);
  --ok: var(--cue-good);
  --warn: var(--cue-apricot);
  --alarm: var(--cue-apricot);
  --pure: var(--cue-white);
  --accent: var(--cue-blue);
  --accent-deep: var(--cue-blue-deep);
  --accent-ink: var(--cue-white);
  --font-display: var(--cue-display);
  --font-body: var(--cue-body);
  --font-mono: var(--cue-body);
}

body.vt.vt-ch-amc {
  --accent: var(--cue-apricot);
  --accent-deep: var(--cue-ink);
  --accent-ink: var(--cue-ink);
}

body.vt.vt-ch-student {
  --accent: var(--cue-blue);
  --accent-deep: var(--cue-blue-deep);
  --accent-ink: var(--cue-white);
}

.vt .vt-ch-student {
  --accent: var(--cue-blue);
  --accent-deep: var(--cue-blue-deep);
  --accent-ink: var(--cue-white);
}

.vt .vt-ch-amc {
  --accent: var(--cue-apricot);
  --accent-deep: var(--cue-ink);
  --accent-ink: var(--cue-ink);
}

body.vd {
  --chalk: var(--cue-paper);
  --chalk-2: var(--cue-surface-recessed);
  --paper: var(--cue-surface-raised);
  --ink: var(--cue-ink);
  --ink-2: var(--cue-ink-soft);
  --hairline: var(--cue-line);
  --slate: var(--cue-ink-soft);
  --theatre: var(--cue-blue);
  --theatre-hover: var(--cue-blue-deep);
  --theatre-tint: var(--cue-lavender);
  --amber: var(--cue-apricot);
  --rule: 2px solid var(--cue-blue);
  --rule-hairline: 1px solid var(--cue-line);
  --font-display: var(--cue-display);
  --font-body: var(--cue-body);
}

html {
  background: var(--cue-paper);
  scroll-behavior: smooth;
}

body,
body.vt,
body.vd,
body.vd.av-app,
body.shell-dark,
body.gx-body,
body.mkt,
body.adm {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, transparent 0 49px, rgba(23, 60, 255, 0.09) 49px 50px, transparent 50px),
    var(--cue-paper) !important;
  color: var(--cue-ink) !important;
  font-family: var(--cue-body) !important;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

/* The hidden attribute always wins: author display rules on components
 * (flex rows, grids) must never resurrect content a controller hid. */
[hidden] { display: none !important; }

::selection {
  background: var(--cue-citron);
  color: var(--cue-ink);
}

img, svg, video { max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body h1, body h2, body h3, body h4,
body .vt-display, body .av-title, body .vd-auth-h,
body .brand-word, body .tnav-word {
  color: var(--cue-ink) !important;
  font-family: var(--cue-display) !important;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

body h1 { font-size: clamp(38px, 5.4vw, 72px); }
body h2 { font-size: clamp(28px, 3.7vw, 48px); }
body h3 { font-size: clamp(21px, 2.3vw, 28px); }
body p, body li { text-wrap: pretty; }

body :is(.home > h1, .av-title, .ac-h1),
body.vd:not(.auth):not(.av-app) h1 {
  font-size: clamp(36px, 4.5vw, 54px) !important;
  max-width: 18ch;
}

/* Application task titles (Today/Practice/Learning/Verdict) stay compact so the
 * task and its primary action keep working room — only marketing heroes get the
 * big scale. Scoped to body.vd.av-app, which the marketing routes never carry. */
body.vd.av-app h1 {
  font-size: clamp(30px, 3.2vw, 42px) !important;
  max-width: 24ch;
}

body :focus-visible {
  outline: 3px solid var(--cue-blue) !important;
  outline-offset: 3px !important;
  border-radius: 5px;
}

body :is(.tnav, .cue-nav, .ix-nav, .pg-nav, .am-nav, .st-nav, .lr-nav) :focus-visible {
  outline-color: var(--cue-citron) !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sr-only:focus-visible {
  position: fixed !important;
  top: 12px;
  left: 12px;
  z-index: 1000;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  background: var(--cue-citron);
  color: var(--cue-ink);
  border: 2px solid var(--cue-ink) !important;
  border-radius: 7px !important;
  font-family: var(--cue-display);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--cue-ink);
}

.vt-wrap,
.home,
.wrap,
.av-main,
.gx-content,
.ac-inner,
.adm-main,
.stat-wrap,
.dash {
  width: min(100%, var(--cue-max)) !important;
  margin-inline: auto !important;
  padding-inline: var(--cue-gutter) !important;
}

.home, .av-main, .gx-content { padding-block: clamp(34px, 6vw, 82px); }

/* Shared navigation: a decisive cobalt strip, not translucent telemetry.
 * The #topnav mount itself must be the sticky element — the bar inside a
 * 66px wrapper can never stick past its parent, which left a scrolling gap
 * above page toolbars that reserve space for it. */
#topnav {
  position: sticky;
  top: 0;
  z-index: 90;
}

.ix-nav, .pg-nav, .am-nav, .st-nav, .lr-nav, .mkt-nav,
#topnav .topbar.tnav, .topbar {
  position: sticky !important;
  top: 0;
  z-index: 80;
  min-height: 66px;
  background: var(--cue-nav-bg) !important;
  border: 0 !important;
  border-bottom: 3px solid var(--cue-ink) !important;
  box-shadow: none !important;
  color: var(--cue-on-nav) !important;
  backdrop-filter: none !important;
}

.ix-nav-inner, .pg-nav__in, .am-nav__inner, .st-nav__inner, .lr-nav__inner,
.mkt-nav-in {
  min-height: 66px !important;
}

:is(.ix-brand, .pg-brand, .am-brand, .st-brand, .lr-brand, .mkt-brand,
.tnav-brand, .adm-brand) {
  color: var(--cue-white) !important;
  font-family: var(--cue-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

:is(.ix-brand, .pg-brand, .am-brand, .st-brand, .lr-brand) svg { display: none !important; }

:is(.ix-brand, .pg-brand, .am-brand, .st-brand, .lr-brand)::before {
  content: '[';
  display: grid;
  place-items: center;
  width: 26px;
  height: 30px;
  border: 2px solid var(--cue-citron);
  border-right: 0;
  color: var(--cue-citron);
  font-family: var(--cue-display);
  font-size: 0;
  transform: skewY(-6deg);
}

.tnav-word { color: var(--cue-on-nav) !important; }

:is(.ix-nav-links, .pg-nav__links, .am-nav__links, .st-nav__links, .lr-nav__links,
.tnav-links) a,
.tnav-link,
.mkt-nav a {
  min-height: 44px;
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--cue-display) !important;
  font-weight: 600 !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}

:is(.ix-nav-links, .pg-nav__links, .am-nav__links, .st-nav__links, .lr-nav__links,
.tnav-links) a:hover,
.tnav-link:hover,
.mkt-nav a:hover { color: var(--cue-white) !important; }

:is(.ix-nav-links, .pg-nav__links, .am-nav__links, .st-nav__links, .lr-nav__links,
.tnav-links) a[aria-current='page'],
.tnav-link[aria-current='page'] {
  color: var(--cue-action-ink) !important;
  background: var(--cue-citron) !important;
  box-shadow: 3px 3px 0 var(--cue-action-ink) !important;
  padding-inline: 13px !important;
}

:is(.ix-signin, .pg-signin, .am-nav__signin, .st-nav__signin, .lr-nav__signin) {
  color: var(--cue-white) !important;
  text-decoration: none;
}

.tnav-right { color: var(--cue-white); }
.tnav-chip, .tnav-days, .tnav-saved {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: var(--cue-white) !important;
  background: transparent !important;
  font-family: var(--cue-body) !important;
}
.tnav-up, .upgradebtn {
  background: var(--cue-citron) !important;
  border: 2px solid var(--cue-ink) !important;
  color: var(--cue-ink) !important;
  box-shadow: 3px 3px 0 var(--cue-ink) !important;
}

/* Exam chrome: the back link and runhead sit on the cobalt strip, so the
 * legacy teal/ink values must resolve to white here or they disappear. */
.topbar .home { color: var(--cue-white) !important; }
.topbar .home:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
.topbar .home:active { background: rgba(255, 255, 255, 0.22) !important; }
.topbar .runhead { color: rgba(255, 255, 255, 0.78) !important; }
.topbar .runhead::after { background: var(--cue-citron) !important; }

/* Review sub-navigation links follow the cue palette, not the retired teal. */
.pagelinks a { color: var(--cue-blue-deep) !important; }
.pagelinks a:hover { color: var(--cue-blue) !important; }

/* Paid-plan banners keep their night-ink field at every theme, so their
 * headline and body must resolve light regardless of route heading bridges. */
.rc-upgrade .rc-up-h,
.gx-lockbanner .lb-body h2 { color: #FFFFFF !important; }
.rc-upgrade .rc-up-p,
.gx-lockbanner .lb-body p { color: rgba(255, 255, 255, 0.8) !important; }

.tnav-resource-link[aria-current='page'] {
  color: var(--cue-action-ink) !important;
  border-color: var(--cue-action-ink) !important;
  box-shadow: 3px 3px 0 var(--cue-action-ink) !important;
}

/* Buttons */
.vt-btn, .vd-btn, .btn, .startbtn, .beginbtn,
.fc-primary, .ac-btn, button[type='submit'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 18px;
  border: 2px solid var(--cue-ink) !important;
  border-radius: 8px 8px 8px 0 !important;
  background: var(--cue-white) !important;
  color: var(--cue-ink) !important;
  font-family: var(--cue-display) !important;
  font-weight: 700 !important;
  line-height: 1.1;
  text-decoration: none !important;
  box-shadow: 3px 3px 0 var(--cue-ink) !important;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.vt-btn:hover, .vd-btn:hover, .btn:hover, .startbtn:hover, .beginbtn:hover,
.fc-primary:hover, .ac-btn:hover, button[type='submit']:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--cue-ink) !important;
}

.vt-btn--primary, .vd-btn-primary, .startbtn, .beginbtn, .fc-primary,
.btn.primary, button[type='submit'] {
  background: var(--cue-citron) !important;
}

.vt-btn--quiet, .vd-btn-quiet, .ghost, .fc-ghost {
  background: transparent !important;
  box-shadow: none !important;
}

button[disabled]:not(.opt):not(.qnav-cell), .is-disabled:not(.opt) {
  /* A disabled control drops to the recessed surface instead of keeping a
   * washed-out citron fill — only live primary actions wear citron. The
   * exam sheet's answered options and navigator cells are excluded: they
   * disable after answering but must keep their resolved-state colours. */
  background: var(--cue-surface-recessed) !important;
  border-color: var(--cue-line-strong) !important;
  color: var(--cue-ink-soft) !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: not-allowed;
  transform: none !important;
}
/* Eyebrows and metadata are plain typographic labels, not chips — pills are
 * reserved for genuine status + filters (design-system rule). Stripping the
 * lavender background/border restores hierarchy on label-dense app screens. */
.vt-eyebrow, .vd-eyebrow, .ac-eyebrow, .gx-kicker, .fc-hint,
.fee__key, .fsec-hd, .vd-meta, .runhead, .mmeta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 0 !important;
  background: transparent !important;
  color: var(--cue-ink-soft) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--cue-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.vt-eyebrow-dot, .vt-led, .am-rm__led, .am-state__led { display: none !important; }

/* "Study by system" not-started value: a quiet placeholder, not a stark dash. */
.led-none { color: var(--cue-ink-soft); font-weight: 400; margin-right: 6px; }

/* Apricot text on the light ground is near-invisible (~1.6:1). Route every
 * amber/apricot TEXT role through the text-safe deep tone, and drop the leftover
 * dark-theme glow. #FFB45B stays for fills/large surfaces (ink-on-apricot 9.9:1). */
.am-once,
.vt .vt-readout__val--amber, .vt .vt-stat__num--amber, .vt .vt-pct--low,
.am-rm__flag, .am-state__flag, .vt-flag--notyet, .vt-flag--amber {
  color: var(--cue-apricot-deep) !important;
  text-shadow: none !important;
}

.vt-lead, .lede, .av-sub, .ac-lede, .vd-auth-sub {
  max-width: 64ch;
  color: var(--cue-ink-soft) !important;
  font-family: var(--cue-body) !important;
  font-size: clamp(18px, 2vw, 21px) !important;
  line-height: 1.48 !important;
}

/* Cue slips: offset paper replaces monitor bezels. */
.vt-panel, .vt-monitor, .vd-card, .vd-board, .av-board, .av-focus,
.bpanel, .mockcard, .paper-card, .fc-panel, .gx-panel, .ac-card,
.authbox, .vd-auth-panel, .pg-bundle, .hub-tier, .fee,
.am-inst, .am-state, .am-stakes__aside, .ix-bay, .ix-tier,
.lr-tier, .st-card, .dp-interface, .dp-mcq, .rc-card {
  position: relative;
  background: var(--cue-white) !important;
  color: var(--cue-ink) !important;
  border: 2px solid var(--cue-blue) !important;
  border-radius: var(--cue-radius) var(--cue-radius) var(--cue-radius) 2px !important;
  box-shadow: var(--cue-shadow-quiet) !important;
}

:is(.vt-monitor, .av-focus, .vd-auth-panel, .bpanel, .ix-cta, .am-cta, .cue-case) {
  box-shadow: var(--cue-shadow-feature) !important;
}

:is(.vt-panel, .vd-card, .fc-panel, .gx-panel, .ac-card) :is(.vt-panel, .vd-card, .fc-panel, .gx-panel, .ac-card) {
  box-shadow: none !important;
}

/* The slip tab marks an object that belongs to a larger stack — the readiness
 * monitor, the Verdict report, a paper in the mock stack. It is deliberately
 * sized to read as a physical index tab; utility panels never carry it. */
:is(.vt-monitor, .vd-card, .mockcard)::after {
  content: '';
  position: absolute;
  right: 22px;
  bottom: -12px;
  width: 88px;
  height: 12px;
  background: var(--cue-citron);
  border: 2px solid var(--cue-blue);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  pointer-events: none;
}

.vt-panel *, .vt-monitor *, .vd-card *, .av-board *, .av-focus *,
.bpanel *, .mockcard *, .fc-panel *, .gx-panel *, .ac-card * {
  --fg: var(--cue-ink);
  --fg-2: var(--cue-ink-soft);
}

.vt-monitor__head, .vt-readouts, .vt-readout,
.am-rm__domains, .am-rm__verdict, .am-rm__ctl {
  background: transparent !important;
  border-color: var(--cue-line) !important;
}

.vt-monitor__title, .vt-readout__label, .vt-readout__val,
.fee__name, .fee__amt, .fee__desc, .hub-tier p,
.am-inst p, .am-state p { color: var(--cue-ink) !important; }

.vt-ecg-stage, .vt-sweep, .ix-cta-ecg, .am-cta__ecg,
.ix-bay-mini, [data-ecg-draw] { display: none !important; }

.vt-live {
  background: var(--cue-citron) !important;
  color: var(--cue-ink) !important;
  border: 1px solid var(--cue-ink) !important;
  box-shadow: none !important;
}

.vt-chip, .bf-chip, .gx-theme, .gx-mode, .timerchip, .fc-mini,
.stat, .vdr-band, .vd-flag {
  border: 1px solid var(--cue-blue) !important;
  border-radius: 999px !important;
  background: var(--cue-paper) !important;
  color: var(--cue-blue-deep) !important;
  font-family: var(--cue-body) !important;
  box-shadow: none !important;
}

.vt-stat__num, .pg-anchor__amt, .fee__amt,
.pvnum, .score, .led-val, .vt-readout__val {
  color: var(--cue-blue) !important;
  font-family: var(--cue-display) !important;
  font-variant-numeric: tabular-nums lining-nums;
}

.vt-stat__label, .vt-stat__sub, .vt-fn,
.pg-anchor__tag, .pg-anchor__cap, .fee__desc, .fee__note,
.fee__vs-label, .fee__vs-val, .fee__per {
  color: var(--cue-ink-soft) !important;
}

/* Pricing is a register of slips, not a wall of cards. */
.pg-sched, .vt-ledger, .pg-qa {
  border-color: var(--cue-blue) !important;
}

.fee {
  margin-bottom: 14px;
  padding: 24px !important;
  border-bottom: 2px solid var(--cue-blue) !important;
}
.fee.is-selected {
  background: var(--cue-lavender) !important;
  box-shadow: var(--cue-shadow-feature) !important;
}
.fee.is-selected .fee__amt { color: var(--cue-blue) !important; }
.pg-anchor__amt { color: var(--cue-blue) !important; }

details { border-color: var(--cue-line-strong) !important; }
summary { color: var(--cue-ink) !important; }
summary:hover { color: var(--cue-blue) !important; }

/* Forms */
.vd-input, .field input, .field select, .field textarea,
input:not([type='checkbox']):not([type='radio']):not([type='range']),
select, textarea, .gx-search, .chipsearch, .fc-cmd-input {
  min-height: 48px;
  border: 2px solid var(--cue-line-strong) !important;
  border-radius: 8px 8px 8px 0 !important;
  background: var(--cue-white) !important;
  color: var(--cue-ink) !important;
  box-shadow: none !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--cue-blue) !important;
}

.vd-label, .field label, .fc-field-lbl, .ac-form label {
  color: var(--cue-ink) !important;
  font-family: var(--cue-display) !important;
  font-weight: 700 !important;
}

.seg, .fc-seg {
  border: 1px solid var(--cue-blue) !important;
  border-radius: 10px !important;
  background: var(--cue-lavender) !important;
  box-shadow: none !important;
}
.segopt, .fc-seg-btn {
  min-height: 44px;
  color: var(--cue-ink) !important;
  background: transparent !important;
  border: 0 !important;
}
.segopt.active, .segopt[aria-checked='true'], .fc-seg-btn.is-active {
  background: var(--cue-citron) !important;
  color: var(--cue-action-ink) !important;
  box-shadow: inset 0 0 0 2px var(--cue-action-ink) !important;
}

.chips button, .chip {
  border-color: var(--cue-blue) !important;
  background: var(--cue-control-bg) !important;
  color: var(--cue-control-ink) !important;
}
.chips button.active, .chip.active, .chip[aria-pressed='true'] {
  background: var(--cue-blue) !important;
  color: var(--cue-white) !important;
}

/* Signed-in app */
body.vd.av-app {
  --chalk: var(--cue-paper);
  --chalk-2: var(--cue-lavender);
  --paper: var(--cue-white);
  --ink: var(--cue-ink);
  --ink-2: var(--cue-ink-soft);
  --hairline: var(--cue-line);
  --slate: var(--cue-ink-soft);
  --theatre: var(--cue-blue);
  --theatre-hover: var(--cue-blue-deep);
  --theatre-tint: var(--cue-lavender);
  --amber: var(--cue-apricot);
  color-scheme: light;
}

.av-head { margin-bottom: 34px; }
.av-title { color: var(--cue-ink) !important; }
.av-signoff { color: var(--cue-blue) !important; }
.av-foot, .foot, .gx-foot, .mkt-foot {
  color: var(--cue-ink-soft) !important;
  border-color: var(--cue-line-strong) !important;
}
.av-foot a, .foot a, .gx-foot a, .mkt-foot a { color: var(--cue-blue-deep) !important; }

.rb-track, .fc-prog {
  background: var(--cue-lavender) !important;
  border-color: var(--cue-blue) !important;
}
.rb-ci, .fc-prog-fill { background: var(--cue-blue) !important; }
.rb-dot { background: var(--cue-citron) !important; border-color: var(--cue-ink) !important; }

/* Legacy practice, exam, recall, gotcha and viva shells. */
body.shell-dark, body.gx-body, body[data-page='recall'] {
  --bg: var(--cue-paper);
  --bg-2: var(--cue-surface-recessed);
  --bg-3: var(--cue-lavender);
  --panel: var(--cue-surface-raised);
  --card: var(--cue-surface-raised);
  --ink: var(--cue-ink);
  --ink-2: var(--cue-ink-soft);
  --muted: var(--cue-ink-soft);
  --line: var(--cue-line);
  --line-2: var(--cue-line-strong);
  --acc: var(--cue-blue);
  --acc-700: var(--cue-blue-deep);
  --acc-tint: var(--cue-lavender);
  --correct: var(--cue-good);
  --correct-bg: var(--cue-citron-soft);
  --wrong: var(--cue-ink);
  --wrong-bg: var(--cue-apricot-soft);
  --wrong-line: var(--cue-apricot);
  --flag: var(--cue-apricot);
  --flag-bg: var(--cue-apricot-soft);
  color-scheme: light !important;
}

.topbar .brand, .topbar .brand-word { color: var(--cue-white) !important; }
.topbar a, .topbar button { color: var(--cue-white); }
.home > h1, .gx-tagline, .fc-brand { color: var(--cue-ink) !important; }

.paper, .sheet, .qcard, .exam-card, .fc-stage, .rc, .viva-card,
.discwrap, .brtools, .fc-browser-bar, .fc-toolbar, .gx-side {
  background: var(--cue-white) !important;
  color: var(--cue-ink) !important;
  border-color: var(--cue-blue) !important;
  box-shadow: var(--cue-shadow-small) !important;
}

.gx-layout { border-color: var(--cue-blue) !important; }
.gx-side { background: var(--cue-nav-bg) !important; color: var(--cue-on-nav) !important; }
.gx-brand, .gx-side a, .gx-side button { color: var(--cue-white) !important; }
.gx-revise, .gx-theme, .gx-mode { color: var(--cue-ink) !important; }

/* On the cobalt rail every legacy grey must lighten, and the active module
 * reads as a lit citron slip — never white-on-white or ink-on-cobalt. */
.gx-side .gx-navnote { color: rgba(255, 255, 255, 0.75) !important; }
.gx-side .gx-navgroup h3 { color: rgba(255, 255, 255, 0.85) !important; }
.gx-side .gx-navgroup h3::after { background: rgba(255, 255, 255, 0.32) !important; }
.gx-side .gx-modlink:hover { background: rgba(255, 255, 255, 0.14) !important; }
.gx-side .gx-modlink .ct {
  background: rgba(255, 255, 255, 0.18) !important;
  color: var(--cue-white) !important;
}
.gx-side .gx-modlink.active {
  background: var(--cue-citron) !important;
  border-color: var(--cue-ink) !important;
  color: #111A2E !important;
}
.gx-side .gx-modlink.active .ct {
  background: rgba(255, 255, 255, 0.66) !important;
  color: #111A2E !important;
}
.gx-side .gx-modlink.is-locked { color: rgba(255, 255, 255, 0.55) !important; }

/* Authentication and legal copy. */
body.auth, body.vd.auth {
  /* Clean two-panel: paper form (subhead stays legible) + a cobalt feature
   * panel on the right. The old 135deg cobalt diagonal ran under the form and
   * left the dark subhead cobalt-on-cobalt (invisible). */
  background: var(--cue-paper) !important;
}
.vd-auth { min-height: 100vh; }
.vd-auth-inner { width: min(100% - 40px, 540px) !important; }
/* Right column is a cobalt feature panel (not an empty white card); the report
 * slip sits white on cobalt so it reads as a real object, not floating space. */
.vd-auth-panel {
  padding: clamp(28px, 6vw, 52px) !important;
  background: var(--cue-blue) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.vd-auth-panel .vd-report {
  width: 100%;
  max-width: 420px;
  background: var(--cue-white) !important;
  color: var(--cue-ink) !important;
  border: 2px solid var(--cue-ink) !important;
  border-radius: var(--cue-radius) var(--cue-radius) var(--cue-radius) 2px !important;
  box-shadow: 9px 10px 0 var(--cue-citron) !important;
}
.vd-auth-panel .vd-auth-signoff { display: none !important; }
.vd-auth-h { font-size: clamp(34px, 7vw, 54px) !important; }
.vd-wordmark, .vd-auth-signoff { color: var(--cue-blue) !important; }
.vd-auth-foot, .vd-auth-note, .vd-hint { color: var(--cue-ink-soft) !important; }

body.vd:not(.auth):not(.av-app) > main,
body.vd:not(.auth):not(.av-app) .legal {
  width: min(100% - 40px, 820px);
  margin-inline: auto;
}

/* Admin stays dense but belongs to the same system. */
.adm-shell { background: var(--cue-paper) !important; }
.adm-rail { background: var(--cue-ink) !important; color: var(--cue-white) !important; }
.adm-rail button, .adm-rail a { color: var(--cue-white) !important; }
/* The rail's section list is a vertical index on ink — the current section
 * lights citron like every other selection in the system. */
.adm-rail .adm-nav { background: transparent !important; position: static !important; border: 0 !important; min-height: 0 !important; }
.adm-rail .adm-nav button[aria-current='true'] {
  background: var(--cue-citron) !important;
  color: #111A2E !important;
}
.adm-view, .adm-card, .adm-gate {
  background: var(--cue-white) !important;
  color: var(--cue-ink) !important;
  border-color: var(--cue-blue) !important;
}

/* Route rhythm and shared feedback states. */
.vt-band, .vd-band, .ix-band, .am-band, .st-band, .lr-band {
  background: var(--cue-surface-recessed) !important;
  border-block: 1px solid var(--cue-line) !important;
}

:is(.ix-cta, .am-cta, .pg-close, .st-cta, .lr-cta) {
  background: var(--cue-surface-raised) !important;
  color: var(--cue-ink) !important;
  border-color: var(--cue-blue) !important;
}

:is(.av-loading, .av-empty, .autherr, .authok, .err, .loading, .gx-empty,
.fc-warn, .upsell, .ac-msg) {
  padding: 15px 17px !important;
  background: var(--cue-surface-recessed) !important;
  color: var(--cue-ink) !important;
  border: 0 !important;
  border-left: 5px solid var(--cue-blue) !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: none !important;
}

:is(.autherr, .err, .fc-warn, .upsell, .ac-msg.err) {
  background: var(--cue-apricot-soft) !important;
  border-left-color: var(--cue-apricot) !important;
}

:is(.authok, .ac-msg.ok) {
  background: var(--cue-citron-soft) !important;
  border-left-color: var(--cue-good) !important;
}

/* A status note with no message is not a note: the padded field must never
 * render as an empty box beside its trigger (selector-reskin lesson). */
:is(.av-loading, .av-empty, .autherr, .authok, .err, .loading, .gx-empty,
.fc-warn, .upsell, .ac-msg):empty {
  display: none !important;
}

/* Home — the signature cue stack. */
.cue-home { background: var(--cue-paper) !important; }
.cue-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--cue-blue);
  color: var(--cue-white);
  border-bottom: 3px solid var(--cue-ink);
}
.cue-nav__inner {
  width: min(100%, var(--cue-max));
  min-height: 70px;
  margin-inline: auto;
  padding-inline: var(--cue-gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}
.cue-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cue-white);
  font-family: var(--cue-display);
  font-size: 23px;
  font-weight: 700;
  text-decoration: none;
}
.cue-logo__mark {
  position: relative;
  width: 27px;
  height: 30px;
  border: 2px solid var(--cue-citron);
  border-right: 0;
  transform: skewY(-6deg);
}
.cue-logo__mark::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 4px;
  width: 7px;
  height: 7px;
  background: var(--cue-citron);
  border-radius: 50%;
}
.cue-nav__links { display: flex; align-items: center; gap: 4px; }
.cue-nav__links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--cue-display);
  font-weight: 600;
  text-decoration: none;
}
.cue-nav__links a:hover { color: var(--cue-white); }
.cue-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cue-nav__signin { color: var(--cue-white); font-weight: 700; text-decoration: none; }
/* Drawer-only Sign in: the bar's Sign in hides on compact screens, so the
 * drawer must carry the account entry point instead. */
.cue-nav__links .cue-nav__link--auth { display: none; }
.cue-nav__menu {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--cue-white) !important;
  background: transparent !important;
  color: var(--cue-white) !important;
  box-shadow: none !important;
}
.cue-nav__menu span, .cue-nav__menu::before, .cue-nav__menu::after {
  content: '';
  width: 19px;
  height: 2px;
  background: currentColor;
  display: block;
  margin: 4px auto;
}

.cue-hero {
  width: min(100%, var(--cue-max));
  margin-inline: auto;
  padding: clamp(64px, 9vw, 122px) var(--cue-gutter) clamp(76px, 10vw, 138px);
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  gap: clamp(48px, 7vw, 94px);
  align-items: center;
}
.cue-hero__kicker {
  margin: 0 0 18px;
  color: var(--cue-blue-deep);
  font-family: var(--cue-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cue-hero h1 {
  max-width: 10.5ch;
  margin: 0;
  font-size: clamp(50px, 7.2vw, 92px);
  line-height: 0.94;
}
.cue-hero h1 em {
  display: inline-block;
  color: var(--cue-blue) !important;
  font-style: normal;
  transform: rotate(-1.5deg);
}
.cue-hero__lead { margin: 25px 0 0; max-width: 52ch; color: var(--cue-ink-soft); font-size: 20px; }
.cue-hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.cue-proofline { margin: 20px 0 0; color: var(--cue-ink-soft); font-size: 14px; }

.cue-stack {
  position: relative;
  min-height: 570px;
  isolation: isolate;
}
.cue-stack__layer {
  position: absolute;
  inset: 0;
  border: 2px solid var(--cue-ink);
  border-radius: 18px 18px 18px 2px;
}
.cue-stack__layer--viva { background: var(--cue-apricot); transform: translate(34px, -30px) rotate(2deg); z-index: -3; }
.cue-stack__layer--recall { background: var(--cue-lavender); transform: translate(17px, -15px) rotate(-1deg); z-index: -2; }
.cue-stack__tab {
  position: absolute;
  right: 24px;
  top: -33px;
  padding: 8px 14px 10px;
  border: 2px solid var(--cue-ink);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: var(--cue-ink);
  font-family: var(--cue-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.cue-stack__layer--recall .cue-stack__tab { right: 122px; }

.cue-case {
  position: relative;
  min-height: 570px;
  padding: clamp(24px, 4vw, 42px);
  background: var(--cue-white);
  border: 2px solid var(--cue-ink);
  border-radius: 18px 18px 18px 2px;
  box-shadow: var(--cue-shadow-feature);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  z-index: 2;
}
.cue-case__head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cue-line-strong);
  color: var(--cue-ink-soft);
  font-family: var(--cue-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.cue-case__status { color: var(--cue-blue); }
.cue-case h2 { margin: 25px 0 11px; font-size: clamp(24px, 3vw, 34px); }
.cue-case__stem { margin: 0 0 22px; max-width: 58ch; font-size: 17px; line-height: 1.48; }
.cue-case__options { display: grid; gap: 9px; }
.cue-case__option {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 49px;
  padding: 9px 13px;
  border: 1px solid var(--cue-line-strong) !important;
  border-radius: 7px !important;
  background: var(--cue-paper) !important;
  color: var(--cue-ink) !important;
  font-family: var(--cue-body) !important;
  font-weight: 400 !important;
  text-align: left;
  box-shadow: none !important;
}
.cue-case__option:hover { border-color: var(--cue-blue) !important; transform: none; box-shadow: none !important; }
.cue-case__option span:first-child {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid var(--cue-blue);
  border-radius: 50%;
  color: var(--cue-blue);
  font-weight: 700;
}
.cue-case__option.is-correct { background: var(--cue-citron) !important; border: 2px solid var(--cue-ink) !important; }
.cue-case__option.is-correct span:first-child { border-color: var(--cue-ink); color: var(--cue-ink); }
/* The learner's own wrong pick reads as a decision, not just a dimmed row:
 * apricot-deep border + badge, so it stands apart from the citron-correct option. */
.cue-case__option.is-wrong { border: 2px solid var(--cue-apricot-deep) !important; opacity: 1; }
.cue-case__option.is-wrong span:first-child { border-color: var(--cue-apricot-deep); color: var(--cue-apricot-deep); }
.cue-case__option.is-muted { opacity: 0.52; }
.cue-case__teaching:focus-visible { outline: 2px solid var(--cue-blue); outline-offset: 3px; }
.cue-case__teaching {
  margin: 20px 0 0;
  padding: 16px 18px;
  background: var(--cue-lavender);
  border-left: 5px solid var(--cue-blue);
  color: var(--cue-ink);
  font-size: 15px;
}
.cue-case__teaching[hidden] { display: none; }

.cue-case.is-resolved {
  border-color: var(--cue-blue);
  box-shadow: 9px 10px 0 var(--cue-citron) !important;
  transform: translate(-2px, -2px);
}

.cue-case.is-resolved .cue-case__status {
  margin: -5px -7px -5px 0;
  padding: 5px 7px;
  background: var(--cue-citron);
  border: 1px solid var(--cue-ink);
  color: var(--cue-ink);
}

.cue-case.is-resolved .cue-case__teaching {
  animation: cue-note-in 180ms ease-out both;
}

@keyframes cue-note-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.cue-section {
  padding: clamp(76px, 10vw, 132px) var(--cue-gutter);
}
.cue-section__inner { width: min(100%, var(--cue-max)); margin-inline: auto; }
.cue-section--blue { background: var(--cue-blue); color: var(--cue-white); border-block: 3px solid var(--cue-ink); }
.cue-section--blue h2, .cue-section--blue h3 { color: var(--cue-white) !important; }
.cue-section__head { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.cue-section__head p { margin: 0; max-width: 58ch; color: var(--cue-ink-soft); font-size: 19px; }
.cue-section--blue .cue-section__head p { color: rgba(255, 255, 255, 0.76); }
.cue-section__label {
  margin: 0 0 13px;
  font-family: var(--cue-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cue-modes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.cue-mode {
  min-height: 310px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  background: var(--cue-white);
  color: var(--cue-ink);
  border: 2px solid var(--cue-ink);
  border-radius: 14px 14px 14px 1px;
  box-shadow: 6px 7px 0 var(--cue-citron);
}
.cue-mode:nth-child(1) { grid-column: span 5; }
.cue-mode:nth-child(2) { grid-column: span 7; }
.cue-mode:nth-child(3) { grid-column: span 7; }
.cue-mode:nth-child(4) { grid-column: span 5; }
.cue-mode:nth-child(2) { box-shadow: 6px 7px 0 var(--cue-apricot); }
.cue-mode:nth-child(3) { box-shadow: 6px 7px 0 var(--cue-lavender); }
.cue-mode:nth-child(4) { box-shadow: 6px 7px 0 var(--cue-citron); }
.cue-mode__key { color: var(--cue-blue); font-family: var(--cue-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cue-mode h3 { margin: 38px 0 10px; color: var(--cue-ink) !important; }
.cue-mode p { margin: 0; color: var(--cue-ink-soft); font-size: 15px; }
.cue-mode a { margin-top: auto; padding-top: 24px; color: var(--cue-blue-deep); font-weight: 700; }

.cue-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cue-path {
  padding: clamp(28px, 5vw, 52px);
  border: 2px solid var(--cue-blue);
  border-radius: 18px 18px 18px 2px;
  background: var(--cue-white);
  box-shadow: var(--cue-shadow);
}
.cue-path--amc { background: #FFF1DF; box-shadow: 7px 8px 0 var(--cue-apricot); }
.cue-path h3 { margin: 20px 0 12px; }
.cue-path p { max-width: 55ch; color: var(--cue-ink-soft); }
.cue-path ul { padding-left: 1.15em; }
.cue-path a { display: inline-flex; margin-top: 14px; color: var(--cue-blue-deep); font-weight: 700; }

.cue-loop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: loop; }
.cue-loop__step {
  position: relative;
  min-height: 220px;
  padding: 28px 26px;
  border: 2px solid var(--cue-ink);
  border-right: 0;
  background: var(--cue-white);
  color: var(--cue-ink);
  counter-increment: loop;
}
.cue-loop__step:last-child { border-right: 2px solid var(--cue-ink); }
.cue-loop__step::before {
  content: counter(loop, decimal-leading-zero);
  color: var(--cue-blue);
  font-family: var(--cue-display);
  font-size: 13px;
  font-weight: 700;
}
.cue-loop__step h3 { margin: 38px 0 9px; color: var(--cue-ink) !important; }
.cue-loop__step p { margin: 0; color: var(--cue-ink-soft); font-size: 15px; }

.cue-close { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.cue-close h2 { max-width: 13ch; margin: 0; }
.cue-close p { max-width: 56ch; color: var(--cue-ink-soft); }
.cue-close__actions { display: flex; gap: 13px; flex-wrap: wrap; }

.cue-footer {
  padding: 58px var(--cue-gutter) 42px;
  background: var(--cue-ink);
  color: var(--cue-white);
}
.cue-footer__inner { width: min(100%, var(--cue-max)); margin-inline: auto; }
.cue-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.cue-footer h2, .cue-footer h3 { color: var(--cue-white) !important; }
.cue-footer h2 { font-size: 28px; }
.cue-footer h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.cue-footer a { color: rgba(255, 255, 255, 0.8); }
.cue-footer ul { margin: 0; padding: 0; list-style: none; }
.cue-footer li { margin: 8px 0; }
.cue-footer__legal { margin-top: 42px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.67); font-size: 13px; max-width: 96ch; }

@media (max-width: 980px) {
  .cue-hero { grid-template-columns: 1fr; }
  .cue-hero__copy { max-width: 720px; }
  .cue-stack { margin-top: 30px; }
  .cue-modes { grid-template-columns: 1fr 1fr; }
  .cue-mode:nth-child(n) { grid-column: auto; }
  .cue-loop { grid-template-columns: 1fr 1fr; }
  .cue-loop__step:nth-child(2) { border-right: 2px solid var(--cue-ink); }
  .cue-loop__step:nth-child(-n+2) { border-bottom: 0; }
  .cue-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .cue-footer__grid > :last-child { grid-column: 2; }
  .cue-section__head { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body, body.vt, body.vd, body.vd.av-app, body.shell-dark, body.gx-body, body.mkt, body.adm {
    background: var(--cue-paper) !important;
  }
  .cue-nav__links { display: none; position: absolute; left: 0; right: 0; top: 70px; padding: 14px var(--cue-gutter) 20px; background: var(--cue-blue); border-bottom: 3px solid var(--cue-ink); }
  .cue-nav__links.is-open { display: grid; }
  .cue-nav__links a { border-bottom: 1px solid rgba(255,255,255,.25); }
  .cue-nav__menu { display: block; }
  .cue-nav__signin { display: none; }
  .cue-nav__links .cue-nav__link--auth { display: block; }
  .cue-stack { min-height: auto; }
  .cue-stack__layer { display: none; }
  .cue-case { min-height: auto; box-shadow: 7px 8px 0 var(--cue-blue); }
  .cue-paths { grid-template-columns: 1fr; }
  .cue-close { grid-template-columns: 1fr; }
  .cue-footer__grid { grid-template-columns: 1fr 1fr; }
  .cue-footer__grid > :last-child { grid-column: auto; }
  .tnav-chip, .tnav-days, .tnav-saved { display: none !important; }
  #topnav .topbar.tnav { padding-inline: 16px !important; }
}

@media (max-width: 520px) {
  :root { --cue-gutter: 18px; }
  body { font-size: 16px; }
  .cue-hero { padding-top: 48px; }
  .cue-hero h1 { font-size: clamp(46px, 15vw, 66px); }
  .cue-case { padding: 21px; }
  .cue-case__head { font-size: 10px; }
  .cue-modes, .cue-loop { grid-template-columns: 1fr; }
  .cue-loop__step, .cue-loop__step:nth-child(2) { border-right: 2px solid var(--cue-ink); border-bottom: 0; }
  .cue-loop__step:last-child { border-bottom: 2px solid var(--cue-ink); }
  .cue-footer__grid { grid-template-columns: 1fr; }
  .cue-nav__actions .vt-btn { padding-inline: 12px; }
  .ix-nav-links { display: none !important; }
  .fee { padding: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cue-hero h1 em, .cue-stack__layer, .cue-case.is-resolved { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Durable account display preferences

   shell.js resolves `auto` against prefers-color-scheme and writes the result
   to data-theme. These rules intentionally come after route compatibility and
   responsive rules so an explicit preference wins over an OS-only dark query.
   The printed exam sheet is re-pinned to its light palette below.
   ----------------------------------------------------------------------- */
html[data-theme='light'] {
  --cue-blue: #173CFF;
  --cue-blue-deep: #0D249F;
  --cue-ink: #111A2E;
  --cue-ink-soft: #4D5870;
  --cue-paper: #F4F6FF;
  --cue-surface-recessed: #E9EDFF;
  --cue-surface-raised: #FFFFFF;
  --cue-lavender: #C9D4FF;
  --cue-line: #B7C4F0;
  --cue-line-strong: #7489D2;
  color-scheme: light;
}

html[data-theme='dark'] {
  --cue-blue: #FF8C68;
  --cue-blue-deep: #FFD1BF;
  --cue-ink: #FFF5ED;
  --cue-ink-soft: #E4CEC0;
  --cue-paper: #2F211B;
  --cue-surface-recessed: #473127;
  --cue-surface-raised: #3B2A22;
  --cue-lavender: #65483A;
  --cue-line: #65483A;
  --cue-line-strong: #9C7662;
  --cue-good: #79DDBA;
  --cue-danger: #FF9B86;
  --cue-on-danger: #2F211B;
  --cue-disabled-bg: #473127;
  --cue-disabled-ink: #E4CEC0;
  --cue-disabled-line: #9C7662;
  --cue-citron-soft: #344A39;
  --cue-apricot-soft: #573B26;
  --cue-nav-bg: #FF8C68;
  --cue-on-nav: #2F211B;
  --cue-action-ink: #2F211B;
  --cue-control-bg: var(--cue-surface-raised);
  --cue-control-ink: var(--cue-ink);
  --cue-shadow-quiet: 2px 3px 0 rgba(0, 0, 0, 0.34);
  --cue-shadow: 5px 6px 0 rgba(0, 0, 0, 0.42);
  --cue-shadow-feature: 9px 10px 0 rgba(0, 0, 0, 0.48);
  background: var(--cue-paper);
  color-scheme: dark;
}

html[data-theme='dark'] body,
html[data-theme='dark'] body.vt,
html[data-theme='dark'] body.vd,
html[data-theme='dark'] body.vd.av-app,
html[data-theme='dark'] body.shell-dark,
html[data-theme='dark'] body.gx-body,
html[data-theme='dark'] body.mkt,
html[data-theme='dark'] body.adm {
  background:
    linear-gradient(90deg, transparent 0 49px, rgba(255, 140, 104, 0.12) 49px 50px, transparent 50px),
    var(--cue-paper) !important;
  color: var(--cue-ink) !important;
  color-scheme: dark !important;
}

html[data-theme='dark'] body.mkt {
  --bone: var(--cue-paper);
  --paperwhite: var(--cue-surface-raised);
  --ink: var(--cue-ink);
  --ink-2: var(--cue-ink-soft);
  --line: var(--cue-line);
}

html[data-theme='dark'] .tnav-app-shell {
  --tn-resource-bg: var(--cue-paper);
  --tn-resource-surface: var(--cue-surface-raised);
  --tn-resource-ink: var(--cue-ink);
  --tn-resource-muted: var(--cue-ink-soft);
  --tn-resource-line: var(--cue-line-strong);
  --tn-resource-blue: var(--cue-blue-deep);
}

html[data-theme='dark'] :is(
  .vt-panel, .vt-monitor, .vd-card, .vd-board, .av-board, .av-focus,
  .bpanel, .mockcard, .paper-card, .fc-panel, .gx-panel, .ac-card,
  .acctcard, .passcard, .devcard, .collection-dialog, dialog,
  .gx-modal, .fc-modal, .fc-cmd,
  .authbox, .vd-auth-panel, .pg-bundle, .hub-tier, .fee, .am-inst,
  .am-state, .am-stakes__aside, .ix-bay, .ix-tier, .lr-tier, .st-card,
  .dp-interface, .dp-mcq, .rc-card, .cue-case, .cue-mode, .cue-path,
  .cue-loop__step, .adm-view, .adm-card, .adm-gate
) {
  background: var(--cue-surface-raised) !important;
  color: var(--cue-ink) !important;
}

/* Legacy route families shipped their own light surfaces. These are app
   chrome, so they follow the selected theme; only the exam sheet below stays
   deliberately white. */
html[data-theme='dark'] :is(
  .discwrap, .stat, .browse, .brtools, .mockcard,
  .fc-stage, .fc-browser-bar, .fc-toolbar
) {
  background: var(--cue-surface-raised) !important;
  color: var(--cue-ink) !important;
  border-color: var(--cue-line-strong) !important;
}

/* Recall's original theme switch uses html.fc-dark. The app shell uses the
   shared data-theme contract, so bridge its local paper/ink variables here. */
html[data-theme='dark'] .rc {
  --bone: var(--cue-paper);
  --paper: var(--cue-surface-raised);
  --ink: var(--cue-ink);
  --ink-2: var(--cue-ink-soft);
  --ink-3: var(--cue-ink-soft);
  --line: var(--cue-line-strong);
  --line-2: var(--cue-surface-recessed);
  background: var(--cue-paper) !important;
  color: var(--cue-ink) !important;
}
html[data-theme='dark'] .rc .fc-card {
  background: var(--cue-surface-raised) !important;
  color: var(--cue-ink) !important;
  border-color: var(--cue-line-strong) !important;
}

/* Compound controls must inherit one coherent dark surface. Leaving their
   nested defaults white created pale-blue-on-white chips and broken selected
   states even though the surrounding panel was correctly themed. */
html[data-theme='dark'] :is(.system-group, .system-topic, .pvbar) {
  background: var(--cue-surface-raised) !important;
  color: var(--cue-ink) !important;
}
html[data-theme='dark'] :is(.system-topics, .chips.scroll, .seg) {
  background: var(--cue-surface-recessed) !important;
  color: var(--cue-ink) !important;
}
html[data-theme='dark'] .segopt.active,
html[data-theme='dark'] .segopt[aria-checked='true'] {
  background: var(--cue-citron) !important;
  color: var(--cue-action-ink) !important;
}
html[data-theme='dark'] .segopt.active small,
html[data-theme='dark'] .segopt[aria-checked='true'] small {
  color: var(--cue-action-ink) !important;
  opacity: .78;
}

html[data-theme='dark'] :is(
  .chips button.active, .chip.active, .chip[aria-pressed='true'],
  .collection-tab[aria-selected='true'], .sub-badge.active
) {
  background: var(--cue-nav-bg) !important;
  border-color: var(--cue-nav-bg) !important;
  color: var(--cue-on-nav) !important;
}
html[data-theme='dark'] :is(.pill.done, .brchip.correct) {
  background: var(--cue-citron-soft) !important;
  border-color: var(--cue-good) !important;
  color: var(--cue-good) !important;
}
html[data-theme='dark'] .fc-chip {
  background: var(--cue-nav-bg) !important;
  color: var(--cue-on-nav) !important;
}
html[data-theme='dark'] .gv-num {
  color: var(--cue-good) !important;
}

/* The Gotchas rail is navigation, not content. Keep the stable cobalt/on-nav
   pair in both themes and use a dark translucent count capsule. */
.gx-side :is(.gx-navgroup h3, .gx-modlink, .gx-modlink.active, .gx-navnote) {
  color: var(--cue-on-nav) !important;
}
.gx-side .gx-modlink:is(:hover, .active) {
  background: rgba(0, 0, 0, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}
.gx-side .gx-modlink .ct,
.gx-side .gx-modlink.active .ct {
  background: rgba(0, 0, 0, 0.34) !important;
  color: var(--cue-on-nav) !important;
}

html[data-theme='dark'] :is(
  .vd-input, .field input, .field select, .field textarea,
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  select, textarea, .gx-search, .chipsearch, .fc-cmd-input,
  .vt-btn, .vd-btn, .btn
) {
  background: var(--cue-surface-raised) !important;
  color: var(--cue-ink) !important;
}

html[data-theme='dark'] :is(
  .vt-btn--primary, .vd-btn-primary, .startbtn, .beginbtn, .fc-primary,
  .btn.primary, .tnav-up, .upgradebtn
) {
  color: #2F211B !important;
}

/* Account actions use semantic light-on-dark pairs. Keep these explicit and
   after the broad legacy bridge so submit type alone can never erase danger
   or primary action contrast. */
html[data-theme='dark'] .ac-btn {
  background: var(--cue-ink) !important;
  border-color: var(--cue-ink) !important;
  color: var(--cue-paper) !important;
}
html[data-theme='dark'] .ac-btn.ghost {
  background: transparent !important;
  border-color: var(--cue-ink) !important;
  color: var(--cue-ink) !important;
}
html[data-theme='dark'] .ac-btn.hot {
  background: var(--cue-danger) !important;
  border-color: var(--cue-danger) !important;
  color: var(--cue-on-danger) !important;
}
html[data-theme='dark'] .ac-dangerbtn {
  background: transparent !important;
  border-color: var(--cue-danger) !important;
  color: var(--cue-danger) !important;
}

html[data-theme='dark'] body.av-app :is(
  .sub-badge.active, .up-seg button[aria-selected='true'], .up-save, .up-choose
) {
  background: var(--cue-nav-bg) !important;
  color: var(--cue-on-nav) !important;
}
html[data-theme='dark'] body.av-app .up-card.pop {
  background: var(--cue-nav-bg) !important;
  border-color: var(--cue-on-nav) !important;
  color: var(--cue-on-nav) !important;
}
html[data-theme='dark'] body.av-app .up-card.pop :is(.up-for, .up-per, .up-list, .up-billed) {
  color: var(--cue-on-nav) !important;
}
html[data-theme='dark'] body.av-app .up-card.pop .up-choose {
  background: var(--cue-citron) !important;
  color: var(--cue-action-ink) !important;
}

/* Printed Verdict artefacts deliberately stay light in dark app chrome. Their
   local ink tokens must win over the shared dark heading rules. */
html[data-theme='dark'] :is(.vd-auth-panel .vd-report, body.vd.av-app .vd-report) {
  --paper: #FFFFFF;
  --ink: #201F1A;
  --ink-2: #5A574E;
  --hairline: #CFCBC0;
  --rule: 1.5px solid var(--ink);
  --rule-hairline: 1px solid var(--hairline);
  background: #FFFFFF !important;
  border-color: #201F1A !important;
  color: #201F1A !important;
  color-scheme: light !important;
}
html[data-theme='dark'] :is(.vd-auth-panel .vd-report, body.vd.av-app .vd-report) :is(h1, h2, h3, h4) {
  color: #201F1A !important;
}
html[data-theme='dark'] :is(.vd-auth-panel .vd-report, body.vd.av-app .vd-report) .vdr-band {
  background: #FFFFFF !important;
  border-color: #201F1A !important;
  color: #201F1A !important;
}
html[data-theme='dark'] :is(.vd-auth-panel .vd-report, body.vd.av-app .vd-report) .vdr-band .vdr-no {
  color: #5A574E !important;
}

/* Disabled controls remain legible without relying on opacity, which blends
   foregrounds and boundaries into whichever route surface sits underneath. */
:is(button, input, select, textarea)[disabled]:not(.opt):not(.qnav-cell),
.is-disabled:not(.opt):not(.qnav-cell) {
  opacity: 1 !important;
  background: var(--cue-disabled-bg) !important;
  color: var(--cue-disabled-ink) !important;
  border-color: var(--cue-disabled-line) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

html[data-theme='dark'] :is(.ac-wrap, .adm-shell, .cue-home) {
  background: var(--cue-paper) !important;
}
html[data-theme='dark'] :is(.sub-meta .pm, .meter, .up-seg) {
  background: var(--cue-surface-recessed) !important;
}
html[data-theme='dark'] .mkt-foot {
  background: #2F211B !important;
  color: var(--cue-ink-soft) !important;
}

/* The question sheet is an exam artefact, not app chrome: always black on
   white even when the surrounding workspace is explicitly dark. */
html[data-theme='dark'] .sheet {
  --cue-ink: #111A2E;
  --cue-ink-soft: #4D5870;
  --cue-blue: #173CFF;
  --cue-blue-deep: #0D249F;
  --cue-lavender: #C9D4FF;
  --cue-line: #B7C4F0;
  --cue-line-strong: #7890DF;
  --cue-good: #0C6B53;
  --cue-citron-soft: #F4FFD0;
  --cue-apricot-soft: #FFF0DD;
  /* Answer-state tokens compute on <body> in dark and inherit as values, so
   * the light sheet must re-declare them, not just their source colours. */
  --correct: #0C6B53;
  --correct-bg: #F4FFD0;
  --wrong: #111A2E;
  --wrong-bg: #FFF0DD;
  --wrong-line: #FFB45B;
  --flag: #FFB45B;
  --flag-bg: #FFF0DD;
  --acc: #173CFF;
  --acc-700: #0D249F;
  --acc-tint: #C9D4FF;
  --paper: #FFFFFF;
  --ink: #15171C;
  --ink-2: #3B414D;
  --muted: #697184;
  --line: #D7DAE1;
  --line-2: #C2C6CF;
  background: #FFFFFF !important;
  color: #000000 !important;
  color-scheme: light !important;
}
html[data-theme='dark'] .sheet :is(h1, h2, h3, h4, p, li, label) {
  color: #000000 !important;
}

/* Dark workspace chrome that must keep its authored identity: the resource
 * rail re-themes to raised surfaces, citron selections keep ink text, and
 * the principal action never loses its citron fill. */
html[data-theme='dark'] .tnav-app-shell {
  --tn-resource-surface: var(--cue-surface-raised);
  --tn-resource-bg: var(--cue-surface-recessed);
}
html[data-theme='dark'] .tnav-resources {
  border-right-color: var(--cue-line) !important;
}
html[data-theme='dark'] .tnav-resource-link[aria-current='page'],
html[data-theme='dark'] .tnav-link[aria-current='page'],
html[data-theme='dark'] :is(.ix-nav-links, .pg-nav__links, .am-nav__links,
.st-nav__links, .lr-nav__links, .tnav-links) a[aria-current='page'] {
  color: #111A2E !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5) !important;
}
/* The :not() chain lifts specificity above the broad dark input bridge and
 * correctly leaves disabled primaries to the muted disabled treatment. */
html[data-theme='dark'] :is(
  .vt-btn--primary:not([disabled]):not(.ghost):not([hidden]),
  .vd-btn-primary:not([disabled]):not(.ghost):not([hidden]),
  .startbtn:not([disabled]):not(.ghost):not([hidden]),
  .beginbtn:not([disabled]):not(.ghost):not([hidden]),
  .fc-primary:not([disabled]):not(.ghost):not([hidden]),
  .btn.primary:not([disabled]):not([hidden]),
  button[type='submit']:not(.ac-btn):not([disabled]):not([hidden])
) {
  background: var(--cue-citron) !important;
  border-color: #0A0F1C !important;
  color: #111A2E !important;
}

html[data-text-scale='small'] { --medcue-user-font-size: 15px; }
html[data-text-scale='default'] { --medcue-user-font-size: 17px; }
html[data-text-scale='large'] { --medcue-user-font-size: 19px; }
html[data-text-scale='larger'] { --medcue-user-font-size: 21px; }

html[data-text-scale] body,
html[data-text-scale] body.vt,
html[data-text-scale] body.vd,
html[data-text-scale] body.vd.av-app,
html[data-text-scale] body.shell-dark,
html[data-text-scale] body.gx-body,
html[data-text-scale] body.mkt,
html[data-text-scale] body.adm {
  font-size: var(--medcue-user-font-size) !important;
}

/* Key Account and Today components previously used fixed px sizes, which
   insulated them from the inherited preference. Express their existing
   default proportions in em so all four body scales have a material effect
   without flattening the component hierarchy. */
html[data-text-scale] .ac-lede { font-size: 1em !important; }
html[data-text-scale] :is(.ac-eyebrow, .ac-sec-h, .ac-form label, .meterlabel) {
  font-size: .706em !important;
}
html[data-text-scale] :is(.ac-hint, .up-note) { font-size: .676em !important; }
html[data-text-scale] :is(.ac-msg, .ac-loading) { font-size: .765em !important; }

/* Navigation chrome scales with the preference too: the top bar, the resource
   rail, and mono ledger labels were fixed-px and ignored large text. */
html[data-text-scale] :is(.tnav-link, .tnav-menu-item) { font-size: .882em !important; }
html[data-text-scale] :is(.tnav-chip, .tnav-days, .tnav-saved) { font-size: .706em !important; }
html[data-text-scale] .tnav-resource-link { font-size: .882em !important; }
html[data-text-scale] .tnav-resource-heading { font-size: .706em !important; }
html[data-text-scale] .led-fig { font-size: .735em !important; }
html[data-text-scale] .led-desc { font-size: .912em !important; }
html[data-text-scale] .ac-cardnote { font-size: .824em !important; }
html[data-text-scale] :is(.sub-note, .ac-btn, .ac-dangerbtn) { font-size: .882em !important; }
html[data-text-scale] .ac-form input,
html[data-text-scale] .ac-form select { font-size: .941em !important; }

html[data-text-scale] .av-sec-head h2 { font-size: 1.294em !important; }
html[data-text-scale] .led-name { font-size: 1.235em !important; }
html[data-text-scale] .led-desc { font-size: .912em !important; }
html[data-text-scale] .led-val { font-size: .882em !important; }
html[data-text-scale] .led-fig { font-size: 1.235em !important; }
html[data-text-scale] .vd-meta { font-size: .735em !important; }
html[data-text-scale] .av-current-link { font-size: .853em !important; }
html[data-text-scale] .av-log .led-name { font-size: 1em !important; }
html[data-text-scale] .av-sys .led-name { font-size: 1.059em !important; }

@media (max-width: 760px) {
  html[data-theme='dark'] body,
  html[data-theme='dark'] body.vt,
  html[data-theme='dark'] body.vd,
  html[data-theme='dark'] body.vd.av-app,
  html[data-theme='dark'] body.shell-dark,
  html[data-theme='dark'] body.gx-body,
  html[data-theme='dark'] body.mkt,
  html[data-theme='dark'] body.adm {
    background: var(--cue-paper) !important;
  }
}

@media print {
  body, body.vt, body.vd, body.shell-dark { background: #FFFFFF !important; color: #111A2E !important; }
  .cue-nav, .ix-nav, .pg-nav, .am-nav, #topnav, .cue-footer { display: none !important; }
  .cue-case, .vt-panel, .vd-card, .bpanel { box-shadow: none !important; }
}

/* ---------- passage highlighting (shared by pool, papers and the Arena) ---------- */

.mc-highlightable { cursor: text; }

mark.mc-highlight {
  background: #FFE9A8;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
  box-shadow: 0 1px 0 #EFCF74;
  cursor: pointer;
}

mark.mc-highlight:hover { background: #FFD866; }

html[data-theme='dark'] mark.mc-highlight {
  background: #7A5B12;
  color: #FFF5ED;
  box-shadow: 0 1px 0 #5C440D;
}

.pool-highlight-clear {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 10px 0 0;
  padding: 9px 16px;
  border: 2px solid var(--cue-line-strong, #EAD7C2);
  border-radius: 999px;
  background: var(--cc-surface, #fff);
  color: var(--cc-ink-secondary, #6B4F3F);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.pool-highlight-clear:hover { border-color: var(--cc-primary, #C22F14); }