/* theme-light.css — a purpose-built light theme for Apex.
 *
 * The app's dark palette is defined on :root inside each page's own <style>,
 * and several components hardcode dark gradients / near-white text there too.
 * This file redefines the CSS variables AND overrides those specific hardcoded
 * spots when html[data-theme="light"] is set, producing a clean, intentional
 * light mode: warm-paper background, crisp white cards with soft shadows,
 * hairline borders, and deepened accents tuned for contrast on light.
 *
 * Load AFTER the page's own <style> so these rules win the cascade.
 */

/* ---------------------------------------------------------------------------
   1. Palette — redefine the design tokens for light mode
   --------------------------------------------------------------------------- */
html[data-theme="light"]{
  --ink:#f3efe6;            /* deepest "paper" tone */
  --chalk:#f7f4ee;          /* app background */
  --chalk-2:#ffffff;        /* raised surfaces / active states */
  --chalk-line:#e4ddcf;     /* solid warm hairline (not translucent) */
  --mute:#7c8698;           /* secondary text */
  --mute-2:#515c6d;         /* stronger secondary text */
  --accent:#c2521f;         /* terracotta, deepened for light bg */
  --accent-2:#2c7570;       /* teal, deepened */
  --gold:#a07722;           /* gold, deepened */

  --paper-text:#232a33;     /* primary body text on light */
  --paper-head:#161b22;     /* headings, near-black */
  --card-shadow:0 1px 2px rgba(22,27,34,.04), 0 6px 20px rgba(22,27,34,.06);
  --card-shadow-hover:0 2px 6px rgba(22,27,34,.06), 0 12px 32px rgba(22,27,34,.10);
}

/* ---------------------------------------------------------------------------
   2. Base surfaces + text
   --------------------------------------------------------------------------- */
html[data-theme="light"] body{
  background:var(--chalk);
  color:var(--paper-text);
}

/* Sidebar: solid warm panel, dark ink */
html[data-theme="light"] .sidebar{
  background:#efe9dd;
  border-right-color:var(--chalk-line);
}
html[data-theme="light"] .sb-brand,
html[data-theme="light"] .brand,
html[data-theme="light"] .side-link.active,
html[data-theme="light"] .sb-link.active{ color:var(--paper-head); }
/* logo ring + symbol: hardcoded border:1.5px solid #fff (invisible on light).
   Cover both the dashboard's .brand .mark and other pages' .sb-brand .mark. */
html[data-theme="light"] .sb-brand .mark,
html[data-theme="light"] .brand .mark{ color:var(--paper-head); }
html[data-theme="light"] .sb-link:hover,
html[data-theme="light"] .sb-hide:hover,
html[data-theme="light"] .side-link:hover{
  background:rgba(22,27,34,.05); color:var(--paper-head);
}
html[data-theme="light"] .sb-link.active,
html[data-theme="light"] .side-link.active{
  background:#ffffff; border-color:var(--chalk-line);
}
html[data-theme="light"] .side-sep{ background:var(--chalk-line); }

/* Topbar: translucent paper */
html[data-theme="light"] .topbar{
  background:rgba(247,244,238,.85);
  border-bottom-color:var(--chalk-line);
}
html[data-theme="light"] .crumb span[style*="#eef2f6"]{ color:var(--paper-head)!important; }
/* breadcrumb links hover to white in the dark theme (.crumb a:hover{color:#fff}),
   which vanishes on the light background — hover to the terracotta accent instead */
html[data-theme="light"] .crumb a{ color:var(--mute-2); }
html[data-theme="light"] .crumb a:hover{ color:var(--accent); }
html[data-theme="light"] .top-btn:hover,
html[data-theme="light"] .menu-btn{ color:var(--paper-head); }
html[data-theme="light"] .top-btn:hover{ color:var(--paper-head); border-color:var(--paper-head); }

/* ---------------------------------------------------------------------------
   3. Cards — flat white with a soft shadow, replacing the dark gradient
   --------------------------------------------------------------------------- */
html[data-theme="light"] .card{
  background:linear-gradient(165deg,#ffffff,#faf7f0);
  border-color:var(--chalk-line);
  box-shadow:var(--card-shadow);
  transition:box-shadow .18s ease, transform .18s ease;
}
html[data-theme="light"] .card:hover{ box-shadow:var(--card-shadow-hover); }

html[data-theme="light"] .card.danger{
  background:#fdf6f3;
  border-color:rgba(194,82,31,.28);
}
html[data-theme="light"] .card-head h2{ color:var(--paper-head); }
html[data-theme="light"] .card-desc{ color:var(--mute); }

/* Section heads / titles that hardcode near-white */
html[data-theme="light"] h1.page-title,
html[data-theme="light"] .content h2,
html[data-theme="light"] .content h3,
html[data-theme="light"] h1.lesson-title{ color:var(--paper-head); }
html[data-theme="light"] .page-sub,
html[data-theme="light"] .content p,
html[data-theme="light"] .content ul,
html[data-theme="light"] .content ol,
html[data-theme="light"] .content li{ color:var(--paper-text); }

/* Reference tables inside lesson content (hardcode dark-theme text/bg) */
html[data-theme="light"] .content table{ border-color:var(--chalk-line); }
html[data-theme="light"] .content th,
html[data-theme="light"] .content td{ border-color:var(--chalk-line); }
html[data-theme="light"] .content th{ background:rgba(44,117,112,.08); color:var(--accent-2); }
html[data-theme="light"] .content td{ color:var(--paper-text); }
html[data-theme="light"] .content tr:nth-child(even) td{ background:rgba(22,27,34,.02); }

/* ---------------------------------------------------------------------------
   4. Form fields — light inputs with clear focus
   --------------------------------------------------------------------------- */
html[data-theme="light"] .field input,
html[data-theme="light"] .field select{
  background:#fbfaf7;
  border-color:var(--chalk-line);
  color:var(--paper-text);
}
html[data-theme="light"] .field input::placeholder{ color:#a2abb8; }
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field select:focus{
  border-color:var(--accent-2);
  background:#ffffff;
  box-shadow:0 0 0 3px rgba(44,117,112,.14);
}

/* ---------------------------------------------------------------------------
   5. Study-track chips
   --------------------------------------------------------------------------- */
html[data-theme="light"] .track-chip{
  background:#f7f4ee;
  border-color:var(--chalk-line);
  color:var(--mute-2);
}
html[data-theme="light"] .track-chip:hover{
  border-color:#c9c0af; color:var(--paper-head);
}
html[data-theme="light"] .track-chip.on{
  background:rgba(44,117,112,.10);
  border-color:rgba(44,117,112,.45);
  color:#1f6d68;
}

/* ---------------------------------------------------------------------------
   6. Appearance theme-picker cards
   --------------------------------------------------------------------------- */
html[data-theme="light"] .theme-opt{
  background:#fbfaf7;
  border-color:var(--chalk-line);
}
html[data-theme="light"] .theme-opt:hover{ border-color:#c9c0af; }
html[data-theme="light"] .theme-opt.sel{
  border-color:var(--accent-2);
  background:#ffffff;
  box-shadow:0 0 0 3px rgba(44,117,112,.16);
}
html[data-theme="light"] .theme-opt .t-name{ color:var(--paper-head); }
html[data-theme="light"] .theme-opt .t-desc{ color:var(--mute); }
html[data-theme="light"] .theme-swatch{ border-color:var(--chalk-line); }

/* ---------------------------------------------------------------------------
   7. Read-only rows + status
   --------------------------------------------------------------------------- */
html[data-theme="light"] .read-row{ border-bottom-color:var(--chalk-line); }
html[data-theme="light"] .read-row .v,
html[data-theme="light"] #who-email{ color:var(--paper-head)!important; }
html[data-theme="light"] .status.ok{ color:#1f6d68; }

/* ---------------------------------------------------------------------------
   8. Buttons that relied on white-on-dark
   --------------------------------------------------------------------------- */
html[data-theme="light"] .btn-ghost{
  border-color:var(--chalk-line); color:var(--mute-2);
}
html[data-theme="light"] .btn-ghost:hover{
  color:var(--paper-head);
}

/* ---------------------------------------------------------------------------
   9. Confirm modal
   --------------------------------------------------------------------------- */
html[data-theme="light"] .modal{
  background:#ffffff;
  border-color:var(--chalk-line);
  box-shadow:0 24px 60px rgba(22,27,34,.22);
}
html[data-theme="light"] .modal h3{ color:var(--paper-head); }
html[data-theme="light"] .modal p{ color:var(--mute-2); }

/* ---------------------------------------------------------------------------
   10. Lesson-page components (for when light mode reaches lesson pages)
   --------------------------------------------------------------------------- */
html[data-theme="light"] .content strong,
html[data-theme="light"] .proof-head strong,
html[data-theme="light"] .example-head b,
html[data-theme="light"] .lesson-nav .ttl{ color:var(--paper-head); }
html[data-theme="light"] .pstep .stmt,
html[data-theme="light"] .example-q{ color:var(--paper-text); }

/* Cards: a soft diagonal gradient instead of flat white gives these the same
   "surface catching light" depth the dark-mode navy gradient cards have. */
html[data-theme="light"] .proof,
html[data-theme="light"] .example,
html[data-theme="light"] .lesson-nav a,
html[data-theme="light"] .fig{
  background:linear-gradient(165deg,#ffffff,#faf7f0);
  box-shadow:var(--card-shadow);
}
html[data-theme="light"] .checkpoint{
  background:linear-gradient(165deg,#ffffff,#f6f1e6);
  box-shadow:var(--card-shadow);
}
html[data-theme="light"] .lesson-nav a:hover{ box-shadow:var(--card-shadow-hover); }
/* the always-light diagram plates keep their intended warm-paper tone, not
   the card gradient above (equal specificity, so state this explicitly) */
html[data-theme="light"] .fig.diagram-light{ background:#f6f4ee; box-shadow:none; }

/* Diagram SVG label text: several .fig figures hardcode near-white fills
   (#dbe6f0, #e8825f, #5fb3ad) tuned for the dark navy .fig background above —
   invisible against the light card. Swap in dark-ink / deepened equivalents. */
html[data-theme="light"] .fig .lbl,
html[data-theme="light"] .fig .panel-lbl{ fill:var(--paper-head); }
html[data-theme="light"] .fig .lbl-accent{ fill:var(--accent); }
html[data-theme="light"] .fig .lbl-teal{ fill:var(--accent-2); }
html[data-theme="light"] .fig .grid{ stroke:rgba(22,27,34,.07); }
/* Venn-diagram circle outlines: hardcoded near-white (#eef2f6), tuned for the
   dark navy .fig background -- all but invisible on the light card. */
html[data-theme="light"] .fig svg circle[stroke="#eef2f6"]{ stroke:var(--mute-2); }

/* Note boxes: the dark-mode gradient's second stop is a hardcoded navy
   (rgba(27,50,82,.3)) that reads as a muddy grey wash on a light background —
   replace with a soft tint of the note's own accent colour instead. */
html[data-theme="light"] .note{
  background:linear-gradient(120deg,rgba(44,117,112,.08),rgba(255,255,255,.6));
}
html[data-theme="light"] .note.key{
  background:linear-gradient(120deg,rgba(160,119,34,.10),rgba(255,255,255,.6));
}

/* Panel header bands: rgba(255,255,255,.03) and rgba(214,90,47,.07) were
   tuned to sit on a dark navy panel and read as barely-there on light cards —
   give them the same soft-glow presence here. */
html[data-theme="light"] .proof-head{
  background:linear-gradient(120deg,rgba(194,82,31,.09),rgba(194,82,31,.02));
}
html[data-theme="light"] .example-head{
  background:rgba(22,27,34,.035);
}

/* Step dividers and mark badges: rgba(255,255,255,.05) borders are invisible
   on light paper — swap for a visible hairline / warm tint. */
html[data-theme="light"] .pstep+.pstep{ border-top-color:var(--chalk-line); }
html[data-theme="light"] .qed span{ background:rgba(160,119,34,.08); }

/* Scalar/vector quantity list cards (working-with-vectors.html): same dark
   navy gradient + white-on-navy text problem as the cards above. */
html[data-theme="light"] .qlists{
  background:linear-gradient(165deg,#ffffff,#faf7f0);
  box-shadow:var(--card-shadow);
}
html[data-theme="light"] .qlist .qi{ color:var(--paper-text); }
html[data-theme="light"] .qlist .qi strong{ color:var(--paper-head); }
html[data-theme="light"] .qlist .qi+.qi{ border-top-color:var(--chalk-line); }

html[data-theme="light"] .display-math{ background:#f3efe6; }
html[data-theme="light"] .content em{ color:#8a5e1a; }
html[data-theme="light"] .reveal-btn{ background:var(--paper-head); color:#f7f4ee; }
html[data-theme="light"] .reveal-btn:hover{ background:var(--gold); color:var(--paper-head); }

/* ---------------------------------------------------------------------------
   12. Shared list/topic cards across hub pages (maths-lessons, maths,
       questions, papers). These hardcode a dark navy gradient + near-white
       text in each page's own <style>; flip them to clean light cards.
   --------------------------------------------------------------------------- */
html[data-theme="light"] .topic,
html[data-theme="light"] .rowcard,
html[data-theme="light"] .path{
  background:linear-gradient(165deg,#ffffff,#faf7f0);
  border-color:var(--chalk-line);
  box-shadow:var(--card-shadow);
}
html[data-theme="light"] .rowcard:hover,
html[data-theme="light"] .path:hover{ box-shadow:var(--card-shadow-hover); }
html[data-theme="light"] .topic-head:hover{ background:rgba(22,27,34,.03); }

/* text inside those cards: titles to near-black, subtitles to muted slate */
html[data-theme="light"] .topic-info strong,
html[data-theme="light"] .topic-info b,
html[data-theme="light"] .topic-info .t,
html[data-theme="light"] .rowcard strong,
html[data-theme="light"] .rowcard .t,
html[data-theme="light"] .path strong,
html[data-theme="light"] .path .t,
html[data-theme="light"] .path h3{ color:var(--paper-head); }
html[data-theme="light"] .topic-info span,
html[data-theme="light"] .rowcard span,
html[data-theme="light"] .path span,
html[data-theme="light"] .path p{ color:var(--mute-2); }

/* lesson rows: the row text hardcodes #dbe6f0 (near-white) */
html[data-theme="light"] .lesson-row .lt{ color:var(--paper-text); }
html[data-theme="light"] .lesson-row.done .lt{ color:var(--paper-head); }
html[data-theme="light"] .lesson-row:hover{ background:rgba(22,27,34,.03); }
/* option-module chapter dividers: title hardcodes #eef2f6 (near-white) */
html[data-theme="light"] .chapter-head .ct{ color:var(--paper-head); }
html[data-theme="light"] .chapter-head .cc{ color:var(--mute-2); }
/* completion tick: the dark theme uses a neon green (#5fd48b) that reads poorly
   on cream. In light mode use the terracotta accent — the same colour as the
   Notes buttons — so a completed lesson is unmistakable. The adjacent status
   dot is switched to match, so the row doesn't mix two "complete" colours. */
html[data-theme="light"] .tick{ color:var(--accent); }
html[data-theme="light"] .lesson-row.done .lesson-dot{
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(194,82,31,.18);
}
/* mini buttons — used for lesson Notes/Questions AND the "Solve" buttons on
   the questions/papers pages (inside .rowcard, not .lesson-actions). The base
   ".mini.solid" is background:#fff; color:var(--ink) — and since --ink is a
   light paper tone in light mode, that renders white-on-white (invisible).
   Scope these globally so every .mini button re-themes, wherever it sits. */
html[data-theme="light"] .mini{ color:var(--mute-2); border-color:var(--chalk-line); background:transparent; }
html[data-theme="light"] .mini:hover{ color:var(--paper-head); border-color:var(--paper-head); }
html[data-theme="light"] .mini.solid{ background:var(--accent); color:#fff; border-color:var(--accent); }
html[data-theme="light"] .mini.solid:hover{ background:#a8401d; color:#fff; border-color:#a8401d; }

/* progress bar track: was a dark navy fill */
html[data-theme="light"] .topic-prog .bar,
html[data-theme="light"] .bar{ background:#e8e1d2; }
html[data-theme="light"] .topic-prog .pn{ color:var(--mute-2); }
/* completed states: the dark theme uses a neon green (#5fd48b) for the
   "all done" count and the finished bar — too pale on cream. Deepen to a
   forest/emerald green that reads clearly on the light background. */
html[data-theme="light"] .topic-prog .pn.all-done,
html[data-theme="light"] .pn.all-done{ color:#1f8a5b; }
html[data-theme="light"] .topic-prog .bar span{
  background:linear-gradient(90deg,var(--accent),var(--gold));
}
html[data-theme="light"] .topic-prog .bar.has-done span,
html[data-theme="light"] .bar.has-done span{
  background:linear-gradient(90deg,#1f8a5b,#37b06e);
}

/* the numbered topic badge keeps its terracotta identity but reads on light */
html[data-theme="light"] .topic-num{
  background:rgba(194,82,31,.12);
  border-color:rgba(194,82,31,.32);
  color:#b34a1c;
}

/* section headings: "Year 1 · AS content" (.year-band, hardcoded #fff) and
   "Pure Mathematics" (.sec-band) were near-white; make them readable */
html[data-theme="light"] .year-band{ color:var(--paper-head); }
html[data-theme="light"] .sec-band{ color:var(--accent-2); }

/* stat tiles on the dashboard that hardcode a dark fill */
html[data-theme="light"] .pv-stat{ background:#faf8f3; border-color:var(--chalk-line); }

/* Course preview modal (".pv-*"). Hardcodes a dark navy panel
   (#0f2036 / #16294175) with near-white text and translucent white
   borders/hovers throughout — none of it responds to light mode on its own. */
html[data-theme="light"] .pv-modal{
  background:#ffffff;
  border-color:var(--chalk-line);
  box-shadow:0 24px 60px rgba(22,27,34,.22);
}
html[data-theme="light"] .pv-head{ border-bottom-color:var(--chalk-line); }
html[data-theme="light"] .pv-head::after{
  background:radial-gradient(circle,rgba(194,82,31,.12),transparent 70%); opacity:1;
}
html[data-theme="light"] .pv-chip{ border-color:var(--chalk-line); color:var(--mute-2); }
html[data-theme="light"] .pv-titles h3{ color:var(--paper-head); }
html[data-theme="light"] .pv-titles p{ color:var(--mute-2); }
html[data-theme="light"] .pv-close{
  background:#faf8f3; border-color:var(--chalk-line); color:var(--mute-2);
}
html[data-theme="light"] .pv-close:hover{ background:#f1ece2; color:var(--paper-head); }

html[data-theme="light"] .pv-stat .n{ color:var(--paper-head); }
html[data-theme="light"] .pv-stat .l{ color:var(--mute); }

html[data-theme="light"] .pv-topic{ border-bottom-color:var(--chalk-line); }
html[data-theme="light"] .pv-num{
  background:rgba(44,117,112,.12); border-color:rgba(44,117,112,.35); color:#1f6d68;
}

html[data-theme="light"] .sess-badge{
  background:rgba(44,117,112,.12); border-color:rgba(44,117,112,.35); color:#1f6d68;
}
html[data-theme="light"] .pv-topic .t-main strong{ color:var(--paper-head); }
html[data-theme="light"] .pv-topic .t-main span{ color:var(--mute-2); }

html[data-theme="light"] .pv-foot{ border-top-color:var(--chalk-line); background:#faf8f3; }

/* ---------------------------------------------------------------------------
   13. Dashboard course cards. ".course" uses
       linear-gradient(165deg, var(--chalk-2), #0d1b2a) — the hardcoded #0d1b2a
       stays dark in light mode and causes the murky fade. Flip to a clean
       white card, and fix the near-white text/chips/tabs on top.
   --------------------------------------------------------------------------- */
html[data-theme="light"] .course{
  background:linear-gradient(165deg,#ffffff,#faf7f0);
  border-color:var(--chalk-line);
  box-shadow:var(--card-shadow);
}
html[data-theme="light"] .course:hover{
  border-color:var(--chalk-line);
  box-shadow:var(--card-shadow-hover);
}
html[data-theme="light"] .course-body h3{ color:var(--paper-head); }
html[data-theme="light"] .course-body .desc{ color:var(--mute-2); }
html[data-theme="light"] .chip{ color:var(--mute-2); border-color:var(--chalk-line); background:#faf8f3; }
html[data-theme="light"] .add-line{ color:var(--mute); }

/* progress line inside course cards ("0 / … solved" + %) was near-white */
html[data-theme="light"] .stat-line,
html[data-theme="light"] .course .pct,
html[data-theme="light"] .course-body small{ color:var(--mute-2)!important; }

/* course-card buttons: Continue (solid) + Papers (ghost) */
html[data-theme="light"] .c-primary{ background:var(--accent); color:#fff; }
html[data-theme="light"] .c-primary:hover{ background:#a8401d; color:#fff; }
html[data-theme="light"] .c-ghost{ border-color:var(--chalk-line); color:var(--mute-2); }
html[data-theme="light"] .c-ghost:hover{ color:var(--paper-head); }

/* level filter tabs: ".tab" hardcodes background:#0d1b2a */
html[data-theme="light"] .tab{ background:#ffffff; border-color:var(--chalk-line); color:var(--mute-2); }
html[data-theme="light"] .tab:hover{ color:var(--paper-head); border-color:#c9c0af; }
html[data-theme="light"] .tab.active{ background:var(--paper-head); color:#f7f4ee; border-color:var(--paper-head); }

/* section heading "Choose a course" and any other near-white dashboard heads */
html[data-theme="light"] .courses-head h2,
html[data-theme="light"] .dash-h2{ color:var(--paper-head); }

/* top search bar: ".search input" hardcodes background:#0d1b2a / color:#fff */
html[data-theme="light"] .search input{
  background:#ffffff; border-color:var(--chalk-line); color:var(--paper-text);
}
html[data-theme="light"] .search input:focus{ border-color:var(--accent-2); }
html[data-theme="light"] .search svg{ stroke:var(--mute); }

/* ---------------------------------------------------------------------------
   14. Subject-page hero banners (maths, further-maths, physics + their
       lessons/questions/papers pages). ".hero" uses
       linear-gradient(150deg, var(--chalk-2), #0d1b2a); flip to a warm light
       banner and darken the heading/stat text sitting on it.
   --------------------------------------------------------------------------- */
html[data-theme="light"] .hero{
  background:linear-gradient(150deg,#ffffff,#f1ece2);
  border-color:var(--chalk-line);
  box-shadow:var(--card-shadow);
}
html[data-theme="light"] .hero::after{ color:rgba(194,82,31,.10); }
html[data-theme="light"] .hero h1{ color:var(--paper-head); }
html[data-theme="light"] .hero p{ color:var(--mute-2); }
html[data-theme="light"] .hero .tag{ color:var(--mute-2); border-color:var(--chalk-line); background:#faf8f3; }
html[data-theme="light"] .hero .meta .n{ color:var(--paper-head); }
html[data-theme="light"] .hero .meta .l{ color:var(--mute); }

/* ---------------------------------------------------------------------------
   15. Question bank — two-panel layout (topic picker + question area).
       Watch two traps here: ".snode.sel" uses background:var(--chalk-2), which
       is #ffffff in light mode, and its label is color:#fff — invisible without
       an override. ".ms-btn" is the same background:#fff / color:var(--ink)
       combination that hid the Solve button.
   --------------------------------------------------------------------------- */

/* left panel */
html[data-theme="light"] .qpanel{ border-right-color:var(--chalk-line); background:#faf8f3; }
html[data-theme="light"] .qpanel-head{ border-bottom-color:var(--chalk-line); }
html[data-theme="light"] .qpanel-head h2{ color:var(--paper-head); }
html[data-theme="light"] .panel-toggle{ border-color:var(--chalk-line); background:#ffffff; }
html[data-theme="light"] .panel-toggle:hover{ color:var(--paper-head); }
html[data-theme="light"] .panel-toggle svg{ stroke:var(--mute-2); }
html[data-theme="light"] .viewall{ background:#ffffff; border-color:var(--chalk-line); color:var(--paper-head); }
html[data-theme="light"] .viewall:hover{ border-color:#c9c0af; }
html[data-theme="light"] .yband{ color:var(--mute); }

html[data-theme="light"] .tnode{ background:linear-gradient(165deg,#ffffff,#faf7f0); border-color:var(--chalk-line); box-shadow:var(--card-shadow); }
html[data-theme="light"] .tnode-head:hover{ background:rgba(22,27,34,.03); }
html[data-theme="light"] .tnode-info strong{ color:var(--paper-head); }
html[data-theme="light"] .tnode-info span{ color:var(--mute); }
html[data-theme="light"] .tnode-body{ border-top-color:var(--chalk-line); }
html[data-theme="light"] .tchev{ background:rgba(22,27,34,.05); }
html[data-theme="light"] .tchev svg{ stroke:var(--mute-2); }

/* The subtopic list sits on its own warm surface, so a topic card reads as a
   header with children rather than a flat run of identical white rows. */
html[data-theme="light"] .tnode-body{ background:#f4f1ea; border-top-color:var(--chalk-line); }
html[data-theme="light"] .snode{ border-top-color:#e8e1d2; }
html[data-theme="light"] .snode:hover{ background:#ffffff; }

/* rows that have questions: full-strength text, accent count badge */
html[data-theme="light"] .sname{ color:var(--paper-text); font-weight:500; }
html[data-theme="light"] .sn-count{
  color:#b34a1c; background:rgba(194,82,31,.10); border-color:rgba(194,82,31,.30);
}

/* rows with nothing yet: muted colour rather than opacity. Opacity on cream
   turns text into ghosting and drags the whole panel down with it. */
html[data-theme="light"] .snode.none .sname{ color:#646e7d; font-weight:400; }
html[data-theme="light"] .snode.none .ring{ border-color:#ddd6c8; }

/* selected row: tinted, accent label, accent bar down the left edge */
html[data-theme="light"] .snode.sel{ background:#ffffff; }
html[data-theme="light"] .snode.sel .sname{ color:var(--accent); }
html[data-theme="light"] .snode.sel::before{ background:var(--accent); }

html[data-theme="light"] .ring{ border-color:#c4bba8; }
html[data-theme="light"] .ring.done{ background:var(--accent); border-color:var(--accent); }
html[data-theme="light"] .ring.part{ border-color:var(--accent); background:conic-gradient(var(--accent) calc(var(--pct,50)*1%),transparent 0); }

/* right area */
html[data-theme="light"] .qarea-head h1{ color:var(--paper-head); }
html[data-theme="light"] .qarea-head .sub{ color:var(--mute); }
/* ".arealink:hover" is hardcoded to color:#fff for the dark theme — on a
   light background that's invisible. Force it to the dark ink color here. */
html[data-theme="light"] .arealink:hover{ color:var(--paper-head); }

html[data-theme="light"] .pnum{ border-color:var(--chalk-line); color:var(--mute-2); background:#ffffff; }
html[data-theme="light"] .pnum:hover{ border-color:#c9c0af; color:var(--paper-head); }
html[data-theme="light"] .pnum.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* solved: deep green with a white number — 5.34:1. The bright green used in
   dark mode only reaches 4.3:1 against white here, so it has to darken. */
html[data-theme="light"] .pnum.done{ background:#177a4e; border-color:#177a4e; color:#fff; }
html[data-theme="light"] .pnum.done:hover{ background:#126340; border-color:#126340; color:#fff; }
html[data-theme="light"] .pnum.on.done{ background:#177a4e; border-color:#177a4e; color:#fff; }
html[data-theme="light"] .hardpill{ color:#b34a1c; border-color:rgba(194,82,31,.35); background:rgba(194,82,31,.10); }

html[data-theme="light"] .qcard{ background:linear-gradient(165deg,#ffffff,#faf7f0); border-color:var(--chalk-line); box-shadow:var(--card-shadow); }
html[data-theme="light"] .qcard-top,
html[data-theme="light"] .qcard-foot,
html[data-theme="light"] .selfmark,
html[data-theme="light"] .ms{ border-color:var(--chalk-line); }
html[data-theme="light"] .qnum{ background:#f3efe6; color:var(--mute-2); }
html[data-theme="light"] .qtext{ color:var(--paper-text); }
html[data-theme="light"] .qpart{ border-top-color:var(--chalk-line); }
html[data-theme="light"] .parttext{ color:var(--paper-text); }
html[data-theme="light"] .qdiagram{ background:#fbfaf7; border-color:var(--chalk-line); }
html[data-theme="light"] .ms-step{ border-top-color:var(--chalk-line); }
html[data-theme="light"] .ms-step .t{ color:var(--paper-text); }
html[data-theme="light"] .ms-part + .ms-part{ border-top-color:var(--chalk-line); }
html[data-theme="light"] .ms-total{ border-top-color:var(--chalk-line); color:var(--mute); }
html[data-theme="light"] .ms-mark{ color:#8a5e1a; border-color:rgba(160,119,34,.45); }
html[data-theme="light"] .ms-btn{ background:var(--accent); color:#fff; }
html[data-theme="light"] .ms-btn:hover{ background:#a8401d; color:#fff; }

html[data-theme="light"] .selfmark .lbl2{ color:var(--mute-2); }
html[data-theme="light"] .scorebox{ border-color:var(--chalk-line); background:#fbfaf7; }
html[data-theme="light"] .scorebox input{ color:var(--paper-text); }
html[data-theme="light"] .scorebox .of{ color:var(--mute); }

/* landing state */
html[data-theme="light"] .landing-lead{ color:var(--paper-text); }
html[data-theme="light"] .landing-note{ color:var(--mute); }
html[data-theme="light"] .startcard{
  background:linear-gradient(165deg,#ffffff,#faf7f0); border-color:var(--chalk-line); box-shadow:var(--card-shadow);
}
html[data-theme="light"] .startcard:hover{ border-color:#c9c0af; box-shadow:var(--card-shadow-hover); }
html[data-theme="light"] .sc-top{ color:var(--paper-head); }
html[data-theme="light"] .sc-sub{ color:var(--mute); }

html[data-theme="light"] .empty{ color:var(--mute); }
html[data-theme="light"] .empty strong{ color:var(--paper-head); }

/* ---------------------------------------------------------------------------
   16. TMUA exam simulator (tmua.html, tmua-exam.html, tmua-sit.html)
   --------------------------------------------------------------------------- */

/* -- tmua.html: hub page extras not covered by the generic .hero/.path rules */
html[data-theme="light"] .sec-sub{ color:var(--mute); }
html[data-theme="light"] .path .go{ color:#4452c9; }
html[data-theme="light"] .pr-go{ color:#8a5e1a; }
html[data-theme="light"] .soon-note{ color:var(--mute); border-color:var(--chalk-line); }

/* -- tmua-exam.html: paper list + info box */
html[data-theme="light"] .paper-card,
html[data-theme="light"] .paper-row-soon{
  background:linear-gradient(165deg,#ffffff,#faf7f0); border-color:var(--chalk-line); box-shadow:var(--card-shadow);
}
html[data-theme="light"] .paper-card:hover{ border-color:#c9c0af; box-shadow:var(--card-shadow-hover); }
html[data-theme="light"] .pr-best{ background:#fbfaf7; border-top-color:var(--chalk-line); }
html[data-theme="light"] .pr-best-score{ color:#1f6d68; }
html[data-theme="light"] .pr-best-link{ color:#8a5e1a; }
html[data-theme="light"] .pr-best-link:hover{ color:#6e4a12; }
html[data-theme="light"] .info-box{
  background:#fbfaf7; border-color:var(--chalk-line);
}

/* -- further-maths-papers.html: past-paper card grid -- */
html[data-theme="light"] .paper-card-soon{
  background:linear-gradient(165deg,#ffffff,#faf7f0); border-color:var(--chalk-line); box-shadow:var(--card-shadow);
}
html[data-theme="light"] .pc-score-val{ color:var(--paper-head); }

/* -- further-maths-paper-sit.html: timer setup overlay ---------------------- */
html[data-theme="light"] .timer-setup-card{
  background:linear-gradient(165deg,#ffffff,#faf7f0); border-color:var(--chalk-line); box-shadow:var(--card-shadow);
}
html[data-theme="light"] .timer-setup-card h2{ color:var(--paper-head); }
html[data-theme="light"] .timer-opt{ background:#fbfaf7; }
html[data-theme="light"] .timer-opt:hover{ border-color:var(--gold); }
html[data-theme="light"] .timer-opt .tt strong{ color:var(--paper-head); }

/* -- tmua-sit.html: setup screen -------------------------------------------- */
html[data-theme="light"] .setup-card{
  background:linear-gradient(165deg,#ffffff,#faf7f0); border-color:var(--chalk-line); box-shadow:var(--card-shadow);
}
html[data-theme="light"] .setup-head{ border-bottom-color:var(--chalk-line); }
html[data-theme="light"] .setup-head h1{ color:var(--paper-head); }
html[data-theme="light"] .tradio.checked{ color:var(--paper-head); }
html[data-theme="light"] .mode-card{ background:#fbfaf7; }
html[data-theme="light"] .mode-card:hover{ border-color:#c9c0af; }
html[data-theme="light"] .mode-card.selected{ border-color:var(--accent-2); background:rgba(44,117,112,.10); }
html[data-theme="light"] .mode-card h3{ color:var(--paper-head); }
html[data-theme="light"] .begin-btn{ background:var(--paper-head); color:#f7f4ee; }
html[data-theme="light"] .begin-btn:hover:not(:disabled){ background:var(--accent-2); color:#fff; }

/* -- tmua-sit.html: exam-taking screen (topbar / body / bottombar) ---------- */
html[data-theme="light"] .exam-topbar{
  background:rgba(255,255,255,.92); border-bottom-color:var(--chalk-line);
}
html[data-theme="light"] .et-title{ color:var(--paper-head); }
html[data-theme="light"] .et-btn:hover{ color:var(--paper-head); }
html[data-theme="light"] .et-btn.active{ color:#8a5e1a; }
html[data-theme="light"] .et-btn.active svg{ fill:#8a5e1a; }
html[data-theme="light"] .et-timer{ background:#faf8f3; color:var(--mute-2); }
html[data-theme="light"] .et-timer.low{ color:#b3401d; }

html[data-theme="light"] .help-popover{
  background:#ffffff; border-color:var(--chalk-line); box-shadow:0 16px 40px rgba(22,27,34,.14);
}
html[data-theme="light"] .help-popover strong{ color:var(--paper-head); }

html[data-theme="light"] .eq-stem{ color:var(--paper-text); }
html[data-theme="light"] .choice-row{ background:#ffffff; border-color:var(--chalk-line); color:var(--paper-text); }
html[data-theme="light"] .choice-row:hover{ background:#fbfaf7; border-color:#c9c0af; }
html[data-theme="light"] .choice-row.selected{ border-color:var(--gold); background:rgba(160,119,34,.10); }

html[data-theme="light"] .exam-bottombar{
  background:rgba(255,255,255,.92); border-top-color:var(--chalk-line);
}
html[data-theme="light"] .eb-btn:hover:not(:disabled){ color:var(--paper-head); }
html[data-theme="light"] .eb-btn.eb-end{ color:#b3401d; }
html[data-theme="light"] .eb-btn.eb-end:hover{ color:var(--paper-head); }
html[data-theme="light"] .eb-btn.eb-navigator{ color:#8a5e1a; }

/* -- navigator modal ---------------------------------------------------------- */
html[data-theme="light"] .nav-modal{
  background:#ffffff; border-color:var(--chalk-line); box-shadow:0 24px 60px rgba(22,27,34,.18);
}
html[data-theme="light"] .nav-modal-close:hover{ color:var(--paper-head); }
html[data-theme="light"] .nav-dot{ background:#faf8f3; }
html[data-theme="light"] .nav-dot.answered{ color:#1f6d68; }
html[data-theme="light"] .nav-dot.current{ color:#8a5e1a; }

/* -- results screen ----------------------------------------------------------- */
html[data-theme="light"] .result-summary,
html[data-theme="light"] .review-item{
  background:linear-gradient(165deg,#ffffff,#faf7f0); border-color:var(--chalk-line); box-shadow:var(--card-shadow);
}
html[data-theme="light"] .rs-score{ color:#8a5e1a; }
html[data-theme="light"] .review-badge.ok{ color:#1f6d68; }
html[data-theme="light"] .review-badge.bad{ color:#b3401d; }
html[data-theme="light"] .qrc-tag-ok{ color:#1f6d68; }
html[data-theme="light"] .qrc-tag-bad{ color:#b3401d; }
html[data-theme="light"] .review-flag{ color:#b3401d; }
html[data-theme="light"] .rl-label{ color:var(--paper-head); }

html[data-theme="light"] .mastery-card{
  background:linear-gradient(165deg,rgba(44,117,112,.10),#ffffff); border-color:var(--chalk-line); box-shadow:var(--card-shadow);
}
html[data-theme="light"] .mastery-figure{ color:var(--paper-head); }

html[data-theme="light"] .progress-hero,
html[data-theme="light"] .mastery-hero{
  background:linear-gradient(150deg,rgba(44,117,112,.12),#ffffff);
}
html[data-theme="light"] .mastery-hero .tag{ color:var(--mute-2); border-color:var(--chalk-line); background:#faf8f3; }
html[data-theme="light"] .mastery-hero .figure{ color:var(--paper-head); }
html[data-theme="light"] .mastery-hero .info-link:hover{ color:#1f6d68; }

html[data-theme="light"] .attempt-row{
  background:linear-gradient(165deg,#ffffff,#faf7f0); border-color:var(--chalk-line); box-shadow:var(--card-shadow);
}
html[data-theme="light"] .mode-pill.counts{ color:#1f6d68; }
html[data-theme="light"] .attempt-review-btn:hover{ color:var(--paper-head); }

html[data-theme="light"] .td-panel{
  background:linear-gradient(165deg,#ffffff,#faf7f0); border-color:var(--chalk-line); box-shadow:var(--card-shadow);
}
html[data-theme="light"] .td-panel h3{ color:var(--paper-head); }
html[data-theme="light"] .td-bar{ background:#e8e1d2; }

html[data-theme="light"] .qtable{
  background:linear-gradient(165deg,#ffffff,#faf7f0); border-color:var(--chalk-line); box-shadow:var(--card-shadow);
}
html[data-theme="light"] .qr-your{ color:#1f6d68; }
html[data-theme="light"] .qr-your-bad{ color:#b3401d; }
html[data-theme="light"] .qr-result.ok{ color:#1f6d68; }
html[data-theme="light"] .qr-result.bad{ color:#b3401d; }
html[data-theme="light"] .qr-review-btn:hover{ color:#1f6d68; }
html[data-theme="light"] .qr-choice{ background:#fbfaf7; }

/* ---------------------------------------------------------------------------
   17. further-maths-paper-sit.html: right-hand paper info panel (.paper-side
       / .ps-*). Borders, muted text and the gold/hover accent already ride
       the redefined CSS variables above and need no extra rule here — only
       the hardcoded navy fills and near-white text below need flipping.
   --------------------------------------------------------------------------- */
html[data-theme="light"] .paper-side{ background:var(--chalk); }
html[data-theme="light"] .ps-card{
  background:linear-gradient(165deg,#ffffff,#faf7f0);
  box-shadow:var(--card-shadow);
}
html[data-theme="light"] .ps-stat{ background:#faf8f3; }
html[data-theme="light"] .ps-stat .n{ color:var(--paper-head); }
html[data-theme="light"] .ps-timer-clock{ color:var(--paper-head); }
/* deepened for contrast on cream, matching the same low/done treatment used
   for .et-timer.low and .pnum.done elsewhere in this file */
html[data-theme="light"] .ps-timer-clock.low{ color:#b3401d; }
html[data-theme="light"] .ps-timer-clock.elapsed{ color:#177a4e; }
html[data-theme="light"] .ps-link:hover{ color:var(--paper-head); }
html[data-theme="light"] .ps-reveal-tab{
  background:linear-gradient(165deg,#ffffff,#faf7f0);
  box-shadow:var(--card-shadow);
}

/* "Coming soon" placeholder panel (Past Papers) — swap the dark navy
   gradient for a clean white card so heading/body text stays legible. */
html[data-theme="light"] .coming-soon-panel{
  background:linear-gradient(150deg,#ffffff,#faf7f0);
  box-shadow:var(--card-shadow);
}

/* ---------------------------------------------------------------------------
   11. Smooth theme transition (respecting reduced-motion)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  body{ transition:background-color .25s ease, color .25s ease; }
}