/* ============================================================
   Skin system — ported from Teaching OS. Interface skins only;
   the course content and exam papers keep their own meaning.

   The DEFAULT look (no data-theme, or data-theme="indigo") is the
   platform's original indigo palette, defined in each page's own
   :root. The rules below override those tokens when a skin is
   chosen from the Theme picker. Selector specificity
   (html[data-theme=…] = 0,1,1) beats :root (0,1,0), so order with
   the page's inline <style> does not matter.
   ============================================================ */

/* ---- Warm Sand ---- */
html[data-theme="sand"]{
  --bg:#fdfaf3; --surface:#ffffff; --ink:#1a1a1a; --ink-soft:#44403a; --muted:#6b6b6b; --line:#e8e2d4;
  --brand:#b9763d; --brand-dark:#9e6231; --accent:#f4a261; --accent-deep:#b9763d;
}
/* ---- Baroque Wine ---- */
html[data-theme="wine"]{
  --bg:#faf6ee; --surface:#fffdf9; --ink:#271a1d; --ink-soft:#4a3a3d; --muted:#6e5a5e; --line:#e8ddcf;
  --brand:#6b1f2f; --brand-dark:#511620; --accent:#a8842f; --accent-deep:#6b1f2f;
}
/* ---- Powder Blue ---- */
html[data-theme="blue"]{
  --bg:#f3f6f9; --surface:#ffffff; --ink:#1c2733; --ink-soft:#3a4654; --muted:#5b6975; --line:#dde4ea;
  --brand:#2c5f7c; --brand-dark:#234d63; --accent:#7ba7c9; --accent-deep:#2c5f7c;
}
/* ---- Forest Green ---- */
html[data-theme="forest"]{
  --bg:#f4efe2; --surface:#fffdf6; --ink:#1f2417; --ink-soft:#3c443a; --muted:#5e665a; --line:#e2dcc8;
  --brand:#2d4a37; --brand-dark:#213829; --accent:#6f9a72; --accent-deep:#2d4a37;
}
/* ---- Plum ---- */
html[data-theme="plum"]{
  --bg:#f7f3f5; --surface:#fffdfe; --ink:#241a22; --ink-soft:#46393f; --muted:#6a5d65; --line:#e7dde3;
  --brand:#5a2348; --brand-dark:#431534; --accent:#9a6a8e; --accent-deep:#5a2348;
}
/* ---- Dark — warm charcoal, scholarly bronze accents ---- */
html[data-theme="dark"]{
  --bg:#1b1916; --surface:#262320; --ink:#ece6da; --ink-soft:#c8c1b2; --muted:#a59e8e; --line:#3a352e;
  --brand:#c4762f; --brand-dark:#a8631f; --accent:#e89a5f; --accent-deep:#f0a368;
  --good:#74b277; --bad:#dd8074; --warn:#d8ab43;
  --card-shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.45);
}

/* ============================================================
   Dark-mode structural fixes for colours that were hardcoded in
   the pages' own CSS (and so don't follow the tokens).
   ============================================================ */
/* Header has a hardcoded light gradient + the active pill hardcodes
   white text on an --ink background (which is cream in Dark). */
html[data-theme="dark"] header.site-header{
  background:linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
}
html[data-theme="dark"] nav.header-nav a.active{ color:var(--bg); }
html[data-theme="dark"] nav.header-nav a:hover{ background:rgba(255,255,255,.06); }

/* ============================================================
   Notation stays on light "manuscript paper" in EVERY theme, so
   black noteheads and score images never disappear on a dark
   background. Scores belong on paper.
   ============================================================ */
html[data-theme="dark"] .score-block,
html[data-theme="dark"] .embedded-score-render,
html[data-theme="dark"] .mmc-render,
html[data-theme="dark"] .score-img,
html[data-theme="dark"] .insert-panel-body img{
  background:#fbf7ee !important;
  color:#1a1a1a;
  border-radius:10px;
}
/* Verovio renders with currentColor; keep its ink dark on the paper. */
html[data-theme="dark"] .score-block svg,
html[data-theme="dark"] .embedded-score-render svg,
html[data-theme="dark"] .insert-panel-body svg,
html[data-theme="dark"] .mmc-render svg{ color:#1a1a1a; background:#fbf7ee; border-radius:8px; }

/* Reframe the notation CARDS in Dark: the OUTER card goes dark surface so the
   manuscript-paper render area (light, above) reads as a sheet resting on the
   card — instead of the whole block being one big light slab. */
html[data-theme="dark"] .embedded-score{ background: var(--surface) !important; }
html[data-theme="dark"] .mmc-option{ background: var(--surface) !important; }
html[data-theme="dark"] .mmc-option:hover{ background: color-mix(in srgb, var(--accent) 10%, var(--surface)) !important; }
html[data-theme="dark"] .mmc-option:has(input[type=radio]:checked){
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}
html[data-theme="dark"] .insert-panel-body{ background: var(--bg) !important; }

/* Course search modal: category badges hardcode dark light-mode text (too dark
   on the dark modal); the section chip + kbd + borders hardcode light surfaces. */
html[data-theme="dark"] .search-result .sr-kind.lesson{ color: var(--accent) !important; }
html[data-theme="dark"] .search-result .sr-kind.term{ color: #9aa6ff !important; }
html[data-theme="dark"] .search-result .sr-kind.quiz{ color: #6ee7b7 !important; }
html[data-theme="dark"] .search-result .sr-kind.section{ background: var(--bg) !important; color: var(--muted) !important; }
html[data-theme="dark"] .search-modal input.search-input{ background: var(--bg) !important; }
html[data-theme="dark"] .search-result{ border-bottom-color: var(--line) !important; }
html[data-theme="dark"] .search-hint{ border-top-color: var(--line) !important; }
html[data-theme="dark"] .search-hint kbd{ background: var(--bg) !important; }
/* Full Access nav pill: in Dark the accent text on the accent-tinted fill is too
   low-contrast; use the light ink colour (the accent stays in the border + tint). */
html[data-theme="dark"] .fa-nav-pill{ color: var(--ink) !important; }

/* ============================================================
   Dark-mode component fixes — pages that hardcode light surfaces
   for cards/inputs instead of using the tokens. Scoped to dark
   only, so light skins are untouched. !important is safe here
   because it can never leak outside data-theme="dark".
   ============================================================ */
html[data-theme="dark"] .question,
html[data-theme="dark"] .intro,
html[data-theme="dark"] .audio-block,
html[data-theme="dark"] .option,
html[data-theme="dark"] .mode-description,
html[data-theme="dark"] .instructions,
html[data-theme="dark"] .insert-panel-header,
html[data-theme="dark"] .insert-panel-audio,
html[data-theme="dark"] .insert-panel-controls{
  background: var(--surface) !important;
  color: var(--ink);
}
/* Paper intro screen: the Free Play / Exam Conditions toggle track is light */
html[data-theme="dark"] .mode-toggle{ background: var(--bg) !important; }

/* Exam RESULTS / review cards — were styled light-only (cards #fafaf6, answer
   boxes #f1f3ff/#fffaf0); in Dark the cream text washed out on them. */
html[data-theme="dark"] .review{ background: var(--surface) !important; }
html[data-theme="dark"] .review .your-answer,
html[data-theme="dark"] .review .model-answer{ background: var(--bg) !important; }
html[data-theme="dark"] .review .badge.pending{ background: var(--bg) !important; color: var(--ink-soft) !important; }
html[data-theme="dark"] .review .sg-btn{ background: var(--bg) !important; border-color: var(--line) !important; color: var(--ink) !important; }
html[data-theme="dark"] .review .sg-btn:hover{ background: var(--line) !important; }
/* drop the generic .label background box inside results; restore semantic colours */
html[data-theme="dark"] .review .label,
html[data-theme="dark"] .overall-comment .label{ background: transparent !important; }
html[data-theme="dark"] .ai-points.met .label{ color: var(--good) !important; }
html[data-theme="dark"] .ai-points.missed .label{ color: var(--warn) !important; }
html[data-theme="dark"] .option:hover{ background:#322e28 !important; border-color:var(--brand); }
html[data-theme="dark"] .insert-panel-controls button:hover{ background:#322e28 !important; color:var(--ink); }
html[data-theme="dark"] .qinput,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background: var(--bg) !important; color: var(--ink); border-color: var(--line);
}
/* Course page (course_player) components that hardcode light surfaces */
html[data-theme="dark"] .video-card,
html[data-theme="dark"] .resource-item-video,
html[data-theme="dark"] .criterion,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .focus-works,
html[data-theme="dark"] .warn-box,
html[data-theme="dark"] .letter,
html[data-theme="dark"] .lesson-footer{
  background: var(--surface) !important;
  color: var(--ink);
}
html[data-theme="dark"] .kbd,
html[data-theme="dark"] .shortcut,
html[data-theme="dark"] kbd,
html[data-theme="dark"] code,
html[data-theme="dark"] .code{
  background: var(--bg) !important; color: var(--ink); border-color: var(--line);
}
/* Cards/headers that use a hardcoded light GRADIENT (background-image) */
html[data-theme="dark"] .lesson-block-card,
html[data-theme="dark"] .lesson-header{
  background: var(--surface) !important;
  color: var(--ink);
}
html[data-theme="dark"] .lbc-time{ color: var(--accent); }
/* Kicker labels hardcode the light-mode deep accent as text — too dark on charcoal */
html[data-theme="dark"] .eyebrow{ color: var(--accent); }
/* Badges built on --ink (cream in Dark) hardcode white text — flip to dark text */
html[data-theme="dark"] .aos-num{ color: var(--bg); }
/* PDF modal header hardcodes a near-white bar */
html[data-theme="dark"] .pdf-modal-header{ background: var(--surface) !important; color: var(--ink); }
/* About page: solid "ink" badges (cream in Dark) + hardcoded-light surfaces */
html[data-theme="dark"] .area-num,
html[data-theme="dark"] .pill{ background: var(--ink) !important; color: var(--bg) !important; }
html[data-theme="dark"] .label,
html[data-theme="dark"] .closing-cta{ background: var(--surface) !important; color: var(--ink) !important; }
/* Dashboard: ink-badge number + hardcoded-light progress track + white-gradient CTA card */
html[data-theme="dark"] .num{ background: var(--ink) !important; color: var(--bg) !important; }
html[data-theme="dark"] .progress-bar{ background: var(--line) !important; }
html[data-theme="dark"] .continue-card{ background: var(--surface) !important; color: var(--ink); }
/* Course page: the "AREA OF STUDY N" eyebrow is plain text, not a dashboard
   badge — undo the generic .num band so it isn't a full-width light strip. */
html[data-theme="dark"] .aos-header .num{ background: transparent !important; color: var(--accent) !important; border: none !important; }
/* Course page: the active AoS pill keeps its light fill, but the base rule
   hardcodes white text → unreadable in Dark. Flip the text to dark. */
html[data-theme="dark"] nav.aos-nav button.active{ color: var(--bg) !important; }
/* Glossary: the A–Z / By Area toggle's selected button hardcodes white text on
   the --ink fill (cream in Dark) → invisible. Flip the text to the dark page colour. */
html[data-theme="dark"] .view-toggle button.active{ color: var(--bg) !important; }
/* Glossary: the small area badges are orange (--accent) with white text → low
   contrast in Dark. Dark text reads far better on the light-orange fill. */
html[data-theme="dark"] .area-tag{ color: var(--bg) !important; }
/* ---- Soften the bright cream (--ink) fills in Dark ----
   Number badges + selected pills used a near-white --ink fill that reads too
   bright on charcoal. Replace with a warm, accent-tinted dark chip: legible,
   on-brand, properly "dark mode native". (The course eyebrow .aos-header .num is
   more specific above, so it stays plain text — not caught here.) */
html[data-theme="dark"] .num,
html[data-theme="dark"] .area-num,
html[data-theme="dark"] .aos-num,
html[data-theme="dark"] .pill{
  background: color-mix(in srgb, var(--accent) 20%, var(--surface)) !important;
  color: var(--accent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent) !important;
}
/* Selected nav / toggle pills: a warm tint with light text reads as "selected"
   without the bright cream fill. */
html[data-theme="dark"] nav.header-nav a.active,
html[data-theme="dark"] .view-toggle button.active,
html[data-theme="dark"] nav.aos-nav button.active{
  background: color-mix(in srgb, var(--accent) 24%, var(--surface)) !important;
  color: var(--ink) !important;
}

/* ---- Exam tab (Dark): hardcoded light surfaces + low-contrast badges ----
   The exam-conditions play banner, the score-history box on paper cards, and the
   results "Marking points / Why" panels all hardcode a light fill. Their inner
   text already uses --ink/--muted, so darkening the surface is enough. */
html[data-theme="dark"] .exam-audio-block,
html[data-theme="dark"] .exam-audio-block.exhausted,
html[data-theme="dark"] .paper-card .history,
html[data-theme="dark"] .review .marking-points{
  background: var(--surface) !important;
}
/* Orange/gold status badges hardcode white text → too low on the lighter Dark
   accent. Dark text reads cleanly on them. */
html[data-theme="dark"] span.aos,
html[data-theme="dark"] span.marks,
html[data-theme="dark"] span.mode-badge{ color: var(--bg) !important; }
/* Timer pill: soften the bright cream fill (warning/danger keep their colours). */
html[data-theme="dark"] .timer:not(.warning):not(.danger){
  background: color-mix(in srgb, var(--accent) 22%, var(--surface)) !important;
  color: var(--ink) !important;
}
/* ---- Listening Routine (listening_routine.html) ----
   The mnemonic-spine letter badges + the blind-toggle "on" state build on the
   --ink fill (cream in Dark) with hardcoded white text → white-on-cream. Selected
   chips and the reveal box hardcode a light peach (#fff3e6) → cream text vanishes.
   The AoS tag hardcodes a light-mode indigo tint; the "wrong" mark hardcodes a
   dark red. Retint all of them for Dark, matching the accent-chip pattern above. */
html[data-theme="dark"] .spine-step .b,
html[data-theme="dark"] .btn.on{
  background: color-mix(in srgb, var(--accent) 22%, var(--surface)) !important;
  color: var(--ink) !important; border-color: var(--accent) !important;
}
html[data-theme="dark"] .chip.sel{
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)) !important;
  border-color: var(--accent) !important;
}
html[data-theme="dark"] .reveal-out{
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important;
  border-color: var(--accent) !important;
}
html[data-theme="dark"] .reveal-out .no{ color: var(--bad) !important; }
html[data-theme="dark"] .aos-tag{
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important;
  color: var(--accent) !important;
}
html[data-theme="dark"] .verdict-aos .btn.sel{ color: var(--bg) !important; }

/* Native controls (the free-play <audio> player, scrollbars, the audio scrubber)
   should render in their dark variant rather than the default light widget. */
html[data-theme="dark"]{ color-scheme: dark; }

/* ============================================================
   Theme picker — lives at the end of the nav row.
   ============================================================ */
.theme-wrap{ position:relative; display:inline-flex; align-items:center; }
.theme-toggle{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  padding:5px 11px; border-radius:999px; font:inherit; font-size:12px; font-weight:600;
  line-height:1; cursor:pointer; transition:border-color .12s ease, color .12s ease;
}
.theme-toggle:hover{ border-color:var(--brand); color:var(--ink); }
.theme-toggle .tg-sw{
  width:13px; height:13px; border-radius:50%; flex:none;
  border:1px solid rgba(0,0,0,.18);
  background:linear-gradient(135deg, var(--_p,#f7f5f0) 0 50%, var(--_a,#5b6cff) 50% 100%);
}
.theme-pop{
  position:absolute; top:calc(100% + 8px); right:0; z-index:200;
  min-width:208px; padding:7px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--card-shadow);
  display:none;
}
.theme-pop.open{ display:block; }
.theme-pop .tp-title{
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:700; padding:5px 8px 7px;
}
.theme-chip{
  display:flex; align-items:center; gap:10px; width:100%;
  border:none; background:none; color:var(--ink);
  padding:8px; border-radius:9px; font:inherit; font-size:13.5px; text-align:left; cursor:pointer;
}
.theme-chip:hover{ background:var(--bg); }
.theme-chip[aria-checked="true"]{ background:var(--bg); font-weight:600; }
.theme-chip .sw{
  width:18px; height:18px; border-radius:50%; flex:none;
  border:1px solid rgba(0,0,0,.2);
  background:linear-gradient(135deg, var(--p) 0 50%, var(--a) 50% 100%);
}
.theme-chip .tick{ margin-left:auto; color:var(--brand); font-weight:800; opacity:0; }
.theme-chip[aria-checked="true"] .tick{ opacity:1; }