@import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');

/* ============================================================
   StudyVault — RESKIN LAB (override layer, loaded AFTER style.css)
   Active skin = body[data-skin="..."].  No attribute -> current look.
   Switch live with design-lab/skin-switcher.js.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Hanken+Grotesk:wght@400..800&family=Literata:ital,opsz,wght@0,7..72,400..600;1,7..72,400..500&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..500&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Andika:ital,wght@0,400;0,700;1,400;1,700&family=Schibsted+Grotesk:wght@400..800&display=swap');

/* =================================================================
   SHARED — applies to ANY active skin. Reads per-skin variables.
   ================================================================= */
body[data-skin]{ font-family:var(--font-ui); color:var(--text-primary); background:var(--bg-body); }

body[data-skin] .study-notes,
body[data-skin] .study-notes p,
body[data-skin] .study-notes li,
body[data-skin] .study-notes blockquote,
body[data-skin] .exam-tip p,
body[data-skin] .conclusion,
body[data-skin] .conclusion p{ font-family:var(--font-read) !important; }

body[data-skin] .study-notes p,
body[data-skin] .study-notes li,
body[data-skin] .exam-tip p,
body[data-skin] .conclusion,
body[data-skin] .conclusion p{
  font-size:var(--read-size); color:var(--text-primary);
  /* --read-space (0–1, set by the Read-your-way panel) loosens line/letter/word
     spacing together — the evidence-based crowding lever for dyslexic readers
     (Zorzi/WCAG). Default 0 = the skin's normal reading rhythm. */
  line-height:calc(var(--read-lh) + var(--read-space, 0) * 0.34);
  letter-spacing:calc(var(--read-space, 0) * 0.11em);
  word-spacing:calc(var(--read-space, 0) * 0.16em);
}
body[data-skin] .study-notes p{ margin-bottom:1.12em; }
body[data-skin] .study-notes li{ margin-bottom:.5em; }

body[data-skin] .lesson-header h1,
body[data-skin] #lesson-title,
body[data-skin] .study-notes h2,
body[data-skin] .study-notes h3,
body[data-skin] .practice-section h2{
  font-family:var(--font-head) !important; color:var(--text-primary);
  letter-spacing:var(--head-ls,-.01em);
}
body[data-skin] .lesson-header h1,
body[data-skin] #lesson-title{ line-height:1.06; font-weight:var(--head-weight,700); }
body[data-skin] .study-notes h2{
  font-size:1.55rem; line-height:1.2; margin:2.3rem 0 .8rem; font-weight:var(--head-weight,700);
}
body[data-skin] .study-notes h3{ font-size:1.18rem; margin:1.8rem 0 .55rem; }

body[data-skin] .study-notes a{
  color:var(--accent); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:2px; text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);
}
body[data-skin] .study-notes a:hover{ text-decoration-color:var(--accent); }

body[data-skin] .lesson-hero-image figcaption{
  font-family:var(--font-read); font-style:italic; font-size:.9rem; color:var(--text-muted); margin-top:.5rem;
}

/* ---- a11y compatibility: the skin's !important font/bg rules must yield ---- */
/* Dyslexia mode: OpenDyslexic wins over the skin faces everywhere it applied */
body[data-skin].dyslexia-font .study-notes,
body[data-skin].dyslexia-font .study-notes p,
body[data-skin].dyslexia-font .study-notes li,
body[data-skin].dyslexia-font .study-notes blockquote,
body[data-skin].dyslexia-font .study-notes h2,
body[data-skin].dyslexia-font .study-notes h3,
body[data-skin].dyslexia-font .exam-tip p,
body[data-skin].dyslexia-font .conclusion,
body[data-skin].dyslexia-font .conclusion p,
body[data-skin].dyslexia-font .key-fact,
body[data-skin].dyslexia-font .key-fact *,
body[data-skin].dyslexia-font .lesson-header h1,
body[data-skin].dyslexia-font #lesson-title,
body[data-skin].dyslexia-font .practice-question-text,
body[data-skin].dyslexia-font .practice-answer-input{
  font-family:'OpenDyslexic',sans-serif !important;
}
/* Irlen overlays: a uniform acetate sheet over the WHOLE page — like the
   physical coloured overlay it simulates. Multiply blending turns whites the
   overlay colour, keeps text dark, lets images read through. By construction
   nothing escapes the tint (cards, toolbar, panel, modals included). */
body[data-skin].overlay-yellow::after,
body[data-skin].overlay-blue::after,
body[data-skin].overlay-pink::after,
body[data-skin].overlay-green::after,
body[data-skin].overlay-peach::after,
body[data-skin].overlay-aqua::after{
  content:""; position:fixed; inset:0; z-index:2147483000;
  pointer-events:none; mix-blend-mode:multiply;
}
body[data-skin].overlay-yellow::after{ background:#fef9c3; }
body[data-skin].overlay-blue::after{   background:#dbeafe; }
body[data-skin].overlay-pink::after{   background:#fce7f3; }
body[data-skin].overlay-green::after{  background:#dcfce7; }
body[data-skin].overlay-peach::after{  background:#fed7aa; }
body[data-skin].overlay-aqua::after{   background:#cffafe; }

/* Revision-tip popups (lightbulbs) live inside .study-notes, so the reading
   size inflated them into scrollboxes — popup text is UI, sized to its box */
body[data-skin] .revision-tip-popup,
body[data-skin] .revision-tip-popup p{
  font-family:var(--font-ui) !important; font-size:.88rem !important; line-height:1.5 !important;
}
body[data-skin] .revision-tip-popup{
  width:17rem; max-height:none; overflow:visible;
  border:1px solid var(--border-light);
}

body[data-skin] .gutter-progress-item{
  background:transparent !important; border:none !important; box-shadow:none !important;
  border-radius:var(--radius-sm) !important; color:var(--text-muted);
}
body[data-skin] .gutter-progress-item:hover{
  background:color-mix(in srgb,var(--accent) 10%,transparent) !important;
  transform:none !important; box-shadow:none !important; color:var(--accent);
}
body[data-skin] .gutter-progress-item.completed{ color:var(--accent); }
body[data-skin] .gutter-progress-item svg,
body[data-skin] .gutter-progress-icon svg{ color:inherit !important; }
body[data-skin] .gutter-progress-title{ font-family:var(--font-ui); letter-spacing:.14em; color:var(--text-muted); }

/* Highlighter was CUT from the redesign (replaced by Focus mode, Round 25), but
   production still builds its triggers — the "Highlight notes" checklist task
   (sidebar progress section + gutter rail, data-task="highlight-mode") and the
   floating .sv-hl-fab-stack. Hide both in the reader skin so highlight mode can't
   be entered; the harness also clears any active mode + sets sv-hl-enabled=0.
   PROD: remove the highlight task + FAB at source when the feature is dropped. */
body[data-skin="reader"] [data-task="highlight-mode"]{ display:none !important; }
body[data-skin="reader"] .sv-hl-fab-stack{ display:none !important; }

/* OLD ONBOARDING (Tom, 14 Jun) — on a fresh/incognito visit the production
   first-visit overlays fire: anon-welcome ("First time at StudyVault?"),
   whats-new ("recently built subjects", bottom-right) and the lesson-tutorial
   tooltips (top-left). They're not part of the reader redesign (it has its own
   sv-tour). The harness strips them, but they FLASHED in for ~1s first; hide
   from first paint too. sv-tour explicitly excluded. */
body[data-skin="reader"] .anon-welcome-overlay,
body[data-skin="reader"] [class*="whats-new"],
body[data-skin="reader"] [class*="tutorial"]:not(.sv-tutorial-spotlight),
body[data-skin="reader"] [class*="coach"],
body[data-skin="reader"] [class*="walkthrough"],
body[data-skin="reader"] [class*="spotlight"]:not([class*="sv-tour"]):not(.sv-tutorial-spotlight),
body[data-skin="reader"] [class*="tour"]:not([class*="sv-tour"]){ display:none !important; }

body[data-skin] .key-fact{
  background:color-mix(in srgb,var(--accent) 8%,var(--bg-card)); border:none;
  border-left:3px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; box-shadow:none;
}
body[data-skin] .key-fact, body[data-skin] .key-fact *{ font-family:var(--font-read) !important; }
body[data-skin] .exam-tip{ border-radius:var(--radius-sm); box-shadow:none; }
/* quiet identity labels on the tip + conclusion boxes (Tom, 16 Aug: neither
   was stated as anything) — the site's small-caps label voice, no pill */
body[data-skin] .sv-box-kicker{
  font-family:var(--font-ui); font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em;
  color:var(--mut, var(--text-secondary, #8a847d)); margin-bottom:.55rem;
}
body[data-skin] blockquote{ border-left:2px solid var(--border-light); padding-left:1.2rem; }
body[data-skin] blockquote p{ font-style:italic; color:var(--text-secondary); }

/* ---------- narration read-along (reader): a progress line that tracks the voice ----------
   Replaces the old gold side-stripe (box-shadow:-4px 0 0 — the AI tell). The active
   chunk sits on a faint accent wash with a thin accent line along its bottom edge that
   FILLS as the narration reads through it — width driven by audio time from main.js
   (--sv-read), brighter and glowing at the leading edge as a playhead, with a faint
   track showing the passage still to come. Reduced-motion shows a static full line. */
body[data-skin="reader"] [data-narration-id].narration-active,
body[data-skin="reader"] .key-fact:has([data-narration-id].narration-active){
  position:relative; box-shadow:none !important;
  background:color-mix(in srgb,var(--accent) 6%,transparent) !important;
  border-radius:var(--radius-sm);
}
/* text chunks: drop the old stripe's 0.75rem indent so nothing nudges sideways */
body[data-skin="reader"] :is(p,h2,h3,h4,li)[data-narration-id].narration-active{ padding-left:0 !important; }
/* the line sits on the actual narrated element (a paragraph, heading, or a key-fact
   that is its own chunk) — not a parent box, since --sv-read inherits downward only.
   faint track: the passage still to be read */
body[data-skin="reader"] [data-narration-id].narration-active::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--border-lighter); z-index:2; pointer-events:none;
}
/* the fill: how far the voice has read through this chunk (0% until playback moves it) */
body[data-skin="reader"] [data-narration-id].narration-active::after{
  content:''; position:absolute; left:0; bottom:0; height:3px;
  width:var(--sv-read,0%); max-width:100%;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 65%,transparent),
    var(--accent) 78%,
    color-mix(in srgb,#fff 55%,var(--accent)));
  box-shadow:0 0 6px color-mix(in srgb,var(--accent) 45%,transparent);
  z-index:3; pointer-events:none; transition:width .25s linear;
}
@media (prefers-reduced-motion:reduce){
  body[data-skin="reader"] [data-narration-id].narration-active::after{ width:100%; box-shadow:none; transition:none; }
}
/* code blocks keep their dark ground in the hover and now-reading states — a ring
   inside the block, not a wash over it, because the wash replaced the dark
   background and left light text on light teal (Tom, 14 Sep 2026). The playhead
   line still fills along the bottom edge. Applies in every skin. */
body[data-skin] #study-notes pre.sv-chunk:hover,
body[data-skin] .lesson-content pre[data-narration-id]:hover,
body[data-skin] .lesson-content pre[data-narration-id].narration-active{
  background:#1e1c1a !important; color:#e8e4df !important;
  box-shadow:inset 0 0 0 2px var(--accent) !important;
}
body[data-skin].dark-mode #study-notes pre.sv-chunk:hover,
body[data-skin].dark-mode .lesson-content pre[data-narration-id]:hover,
body[data-skin].dark-mode .lesson-content pre[data-narration-id].narration-active{
  background:#0f0d0a !important;
}

body[data-skin] .sidebar-section{
  background:var(--bg-card); border:1px solid var(--border-light);
  border-radius:var(--radius); box-shadow:none;
}
body[data-skin] .knowledge-check-btn{ font-family:var(--font-ui); box-shadow:none; border-radius:var(--radius-sm); }
body[data-skin] .sidebar-section-title{
  font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--text-muted);
}

body[data-skin] .header-unit-label,
body[data-skin] .header-pills span,
body[data-skin] .header-nav a,
body[data-skin] .a11y-toolbar,
body[data-skin] .a11y-btn,
body[data-skin] .practice-btn,
body[data-skin] .narration-speed,
body[data-skin] .audio-tab,
body[data-skin] .knowledge-check-label,
body[data-skin] .back-link{ font-family:var(--font-ui); }
body[data-skin] .a11y-toolbar{ box-shadow:none; border:1px solid var(--border-light); }


/* =================================================================
   SKIN 1 — PAPER  (warm printed history book)
   ================================================================= */
body[data-skin="paper"]{
  --bg-body:#f3ead8; --bg-card:#fbf5e6;
  --text-primary:#2a2017; --text-secondary:#6a5b46; --text-muted:#9c8c70;
  --border-light:#e0d3b8; --border-lighter:#ece1c7;
  --accent:#8c3a2b; --accent-light:#f4e3dc; --accent-badge:#ecd2c8;
  --radius:6px; --radius-sm:4px;
  --font-read:'Literata',Georgia,serif; --font-head:'Fraunces',Georgia,serif; --font-ui:'Newsreader',Georgia,serif;
  --read-size:1.2rem; --read-lh:1.85; --head-weight:600;
}
body[data-skin="paper"] .study-notes > p:first-of-type::first-letter{
  font-family:'Fraunces',serif; float:left; font-weight:700; font-size:3.5em; line-height:.7; margin:.05em .12em 0 0; color:var(--accent);
}
body[data-skin="paper"] .study-notes h2{ border-bottom:1px solid var(--border-light); padding-bottom:.35rem; }


/* =================================================================
   SKIN 2 — INK  (dark focus-reading; pairs with body.dark-mode)
   ================================================================= */
body[data-skin="ink"]{
  --bg-body:#1b1813; --bg-card:#26221b;
  --text-primary:#ece3d2; --text-secondary:#b7ac97; --text-muted:#8b806e;
  --border-light:#3a342a; --border-lighter:#2f2a22;
  --accent:#d8a23f; --accent-light:#2a2418; --accent-badge:#3a2f17;
  --radius:4px; --radius-sm:3px;
  --font-read:'Literata',Georgia,serif; --font-head:'Schibsted Grotesk',system-ui,sans-serif; --font-ui:'Schibsted Grotesk',system-ui,sans-serif;
  --read-size:1.18rem; --read-lh:1.8; --head-weight:700;
}
body[data-skin="ink"] .exam-tip{ background:#2a2316; border:1px solid #5a4a22; border-left:3px solid var(--accent); }
body[data-skin="ink"] .exam-tip p, body[data-skin="ink"] .exam-tip *{ color:#ecd6a4 !important; }


/* =================================================================
   SKIN 3 — CRISP  (modern, confident sans, ultramarine)
   ================================================================= */
body[data-skin="crisp"]{
  --bg-body:#f4f5f3; --bg-card:#ffffff;
  --text-primary:#181a1c; --text-secondary:#565d63; --text-muted:#8a9096;
  --border-light:#e3e6e4; --border-lighter:#eef0ee;
  --accent:#2742c9; --accent-light:#e6e9fb; --accent-badge:#dfe4fb;
  --radius:10px; --radius-sm:7px;
  --font-read:'Hanken Grotesk',system-ui,sans-serif; --font-head:'Schibsted Grotesk',system-ui,sans-serif; --font-ui:'Hanken Grotesk',system-ui,sans-serif;
  --read-size:1.13rem; --read-lh:1.72; --head-weight:800; --head-ls:-.025em;
}
body[data-skin="crisp"] .lesson-header h1,
body[data-skin="crisp"] #lesson-title{ font-size:clamp(2.2rem,4.2vw,3.3rem); }
body[data-skin="crisp"] .key-fact{ background:var(--bg-card); border:1px solid var(--border-light); border-left:4px solid var(--accent); border-radius:var(--radius-sm); }
body[data-skin="crisp"] .study-notes h2{ color:var(--accent); }


/* =================================================================
   SKIN 4 — READER  (structural redesign: full-width masthead +
   two-column body with a sticky, redesigned tool sidebar)
   ================================================================= */
body[data-skin="reader"]{
  /* BRIEF v2: neutral chrome that disappears behind any subject's hero.
     ONE muted accent per subject — the loader sets --subject-accent on <body>
     (sandbox: design-lab/skin-switcher.js map; production: subjects.color). */
  --accent:var(--subject-accent,#566a72);
  --accent-light:color-mix(in srgb,var(--accent) 8%,#ffffff);
  --accent-badge:color-mix(in srgb,var(--accent) 15%,#ffffff);
  --bg-body:#f7f6f4; --bg-card:#ffffff;
  --text-primary:#1d1c1a; --text-secondary:#54524d; --text-muted:#7f7c75;
  --border-light:#e6e4e0; --border-lighter:#f0eeea;
  --radius:4px; --radius-sm:3px;
  --font-read:'Literata',Georgia,serif;
  --font-head:'Schibsted Grotesk',system-ui,sans-serif;
  --font-ui:'Schibsted Grotesk',system-ui,sans-serif;
  --read-size:1.22rem; --read-lh:1.78; --head-weight:700; --head-ls:-.02em;
}
/* sizes UP — labels and supporting text grow into their boxes */
body[data-skin="reader"] .study-notes h2{ font-size:1.72rem; scroll-margin-top:6.5rem; }
body[data-skin="reader"] .study-notes h3{ font-size:1.34rem; scroll-margin-top:6.5rem; }
body[data-skin="reader"] .a11y-toolbar{ font-size:.84rem; }
body[data-skin="reader"] .lesson-hero-image figcaption{ font-size:.95rem; }

/* full-width page so the masthead spans edge-to-edge */
/* NB: #lesson-page only — #lesson-loading also has class .lesson-page */
body[data-skin="reader"] #lesson-page{ display:block; max-width:none; margin:0; padding:0; }
body[data-skin="reader"] .gutter-progress{ display:none !important; }

/* ---------- MASTHEAD: full-width cinematic hero, title overlaid ---------- */
body[data-skin="reader"] .lesson-masthead{ position:relative; width:100%; }
body[data-skin="reader"] #hero-figure{
  position:relative; width:100%; height:60vh; max-height:540px;
  margin:0; overflow:hidden; border-radius:0; display:block;
}
body[data-skin="reader"] #hero-figure img{ width:100%; height:100%; object-fit:cover; border-radius:0; }
/* clean image by default; scrim fades in WITH the title (on hover / briefly on load),
   so the photo is never permanently darkened and the title is always legible when shown */
body[data-skin="reader"] #hero-figure::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 66%, rgba(0,0,0,.82) 100%);
}
body[data-skin="reader"] #hero-caption{
  position:absolute; left:1rem; right:1rem; bottom:.6rem; z-index:3; margin:0;
  background:none !important; padding:0 !important; border:none !important; /* no cream box */
  color:rgba(255,255,255,.82); font-style:italic; font-size:.88rem;
  /* one line, always: long captions ellipsise instead of wrapping upward
     into the title overlay */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  opacity:0; transition:opacity .6s ease;   /* fades in with the scrim + title */
}
/* title is a true overlay anchored to the image's bottom edge — no negative-
   margin balancing act, so short titles can't let the body ride up the hero */
body[data-skin="reader"] .lesson-masthead .lesson-header{
  position:absolute; left:0; right:0; bottom:0; z-index:3; width:auto;
  text-align:center; color:#fff; padding:0 1.5rem 2.6rem; margin:0;
  opacity:0; transition:opacity .6s ease; pointer-events:none;
}
/* reveal title + scrim together: on hover, and briefly on load (.show-title via JS) */
body[data-skin="reader"] .lesson-masthead:hover #hero-figure::after,
body[data-skin="reader"] .lesson-masthead.show-title #hero-figure::after{ opacity:1; }
body[data-skin="reader"] .lesson-masthead:hover .lesson-header,
body[data-skin="reader"] .lesson-masthead.show-title .lesson-header{ opacity:1; }
body[data-skin="reader"] .lesson-masthead:hover #hero-caption,
body[data-skin="reader"] .lesson-masthead.show-title #hero-caption{ opacity:1; }
/* A phone cannot hover. Without this the .show-title flash fades after a few
   seconds and the lesson has NO VISIBLE TITLE for the rest of the session — on
   the device most students revise with. Measured at 390px before this rule:
   .lesson-header sat at opacity 0 with no way to bring it back.
   The reveal is a desktop refinement; on touch the title simply stays. */
@media (hover: none){
  body[data-skin="reader"] #hero-figure::after,
  body[data-skin="reader"] .lesson-masthead .lesson-header,
  body[data-skin="reader"] #hero-caption{ opacity:1; }
}
/* drop the inline lesson-progress bar — the sidebar checklist already shows progress */
body[data-skin="reader"] .lesson-progress-inline-wrap{ display:none; }
body[data-skin="reader"] .lesson-header .lesson-number{
  display:inline-block; color:rgba(255,255,255,.88); font-family:var(--font-ui);
  text-transform:uppercase; letter-spacing:.24em; font-size:.92rem; font-weight:600; margin-bottom:.6rem;
}
body[data-skin="reader"] .lesson-header h1,
body[data-skin="reader"] #lesson-title{
  color:#fff; font-size:clamp(2.2rem,3.8vw,3.4rem); line-height:1.04;
  max-width:18ch; margin:0 auto; text-wrap:balance;
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 20px rgba(0,0,0,.6);
}

/* ---------- TWO-COLUMN BODY: article + sticky sidebar ---------- */
/* article + toolbar + narration take ~2/3 (left, from the page edge);
   tools fill the right ~1/3 as a tile grid */
body[data-skin="reader"] .lesson-body{
  /* full-width two-column — article fills the space (Tom: more cohesive than a
     capped/centred column). No text-level measure cap, so body, exam tips and
     figures all share the column width uniformly (the old channel came from
     capping only the text — that cap is gone). */
  max-width:none; margin:0; padding:1.6rem 2.25rem 0; scroll-margin-top:5rem;
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:3rem; align-items:start;
}
body[data-skin="reader"] .lesson-content{ min-width:0; max-width:none; }
/* FIXED tools panel — fills the viewport height, NEVER scrolls; tiles auto-size to fit */
body[data-skin="reader"] .lesson-sidebar{
  position:sticky; top:5rem; align-self:start;
  max-height:calc(100vh - 6rem); overflow:hidden;
  display:flex; flex-direction:column; gap:1.5rem;
}
/* the tool panel proper (harness wraps the tiles in .sv-panel; the contents
   rail sits below it in the freed corner) */
body[data-skin="reader"] .sv-panel{
  flex:0 0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  /* BENTO HIERARCHY: slim progress strip / Quiz+Flashcards PRIMARY /
     two rows of compact utilities. Rows are content-sized — no stretched
     voids; the panel just ends */
  grid-template-rows:auto auto auto auto;
  /* TWO-WEIGHT linework (single-weight hairlines read as wireframe):
     internal rules one step lighter than the frame */
  gap:1px;
  /* ACCENT DIVIDERS (Tom's pick): the panel bg shows through the 1px gaps as
     the internal hairlines, so tinting it weaves the subject colour through
     the structure. Frame stays neutral so the colour reads as dividers, not
     an outline. Re-derives per subject + in dark mode via --accent. */
  background:color-mix(in srgb,var(--accent) 32%,var(--border-light));
  border:1px solid var(--border-light); border-radius:4px; overflow:hidden;
  box-shadow:0 1px 2px rgba(29,28,26,.05), 0 18px 36px -24px rgba(29,28,26,.18);
}
body[data-skin="reader"] .sv-panel > .sidebar-section{ min-height:0; overflow:hidden; margin:0; }
/* explicit placement — DOM order varies with what the loader injects */
body[data-skin="reader"] .sv-panel > .sidebar-progress-section{ grid-area:1 / 1 / 2 / -1; }
body[data-skin="reader"] .sv-panel > .sidebar-knowledge-check{ grid-area:2 / 1; }
body[data-skin="reader"] .sv-panel > .sidebar-flashcard-section{ grid-area:2 / 2; }
body[data-skin="reader"] .sv-panel > .tile-practice{ grid-area:3 / 1 / 4 / -1; }
/* bottom row: the two launchers paired (highlight tile removed) */
body[data-skin="reader"] .sv-panel > .sidebar-media{ grid-area:4 / 1; }
body[data-skin="reader"] .sv-panel > .tile-tutor{ grid-area:4 / 2; }

/* ============ EXIT TICKET — "Before you go" ============
   One synthesis question per lesson, fired when the student clicks
   Next lesson (either control). Once per lesson per session; Continue
   is always one click. Tinted question zone = the key-facts family. */
body[data-skin="reader"] .sv-exit-modal{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
}
body[data-skin="reader"] .sv-exit-backdrop{
  position:absolute; inset:0; background:rgba(20,15,10,.5);
}
body[data-skin="reader"] .sv-exit-card{
  position:relative; z-index:1; width:min(560px,92vw); max-height:84vh; overflow:auto;
  background:var(--bg-card); color:var(--text-primary);
  border:1px solid var(--border-light); border-radius:4px;
  padding:1.7rem 1.8rem 1.6rem; box-shadow:0 24px 70px rgba(0,0,0,.32);
}
body[data-skin="reader"] .sv-exit-close{
  position:absolute; top:.55rem; right:.9rem; background:transparent; border:none;
  font-size:1.7rem; line-height:1; cursor:pointer; color:var(--text-muted);
}
body[data-skin="reader"] .sv-exit-close:hover{ color:var(--text-primary); }
body[data-skin="reader"] .sv-exit-kicker{
  display:flex; align-items:baseline; justify-content:space-between; gap:.8rem;
  font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.13em;
  font-size:.78rem; font-weight:700; color:var(--accent); margin:0 0 .8rem;
  padding-right:1.6rem;   /* clear the close button */
}
body[data-skin="reader"] .sv-exit-from{
  color:var(--text-muted); letter-spacing:.03em; font-weight:600; text-transform:none;
  flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body[data-skin="reader"] .sv-exit-q{
  margin:0 0 1.1rem; padding:1rem 1.15rem;
  background:color-mix(in srgb,var(--accent) 7%,var(--bg-card));
  border-radius:var(--radius);
  font-family:var(--font-read); font-size:1.12rem; line-height:1.65;
  color:var(--text-primary);
}
body[data-skin="reader"] .sv-exit-answer{ margin:0 0 1.1rem; }
body[data-skin="reader"] .sv-exit-input{
  width:100%; resize:vertical; min-height:5.5rem;
  font-family:var(--font-read); font-size:1rem; line-height:1.55;
  color:var(--text-primary); background:var(--bg-card);
  border:1px solid var(--border-light); border-radius:var(--radius-sm,10px);
  padding:.7rem .85rem;
}
body[data-skin="reader"] .sv-exit-input:focus{
  outline:none; border-color:color-mix(in srgb,var(--accent) 55%,var(--border-light));
}
body[data-skin="reader"] .sv-exit-input--locked{
  background:color-mix(in srgb,var(--accent) 5%,var(--bg-card));
  color:var(--text-secondary);
}
body[data-skin="reader"] .sv-exit-checknote{
  margin:.55rem 0 0; font-family:var(--font-ui); font-size:.84rem; line-height:1.5;
  color:var(--text-secondary);
  background:color-mix(in srgb,var(--accent) 7%,var(--bg-card));
  border-radius:var(--radius-sm,10px); padding:.5rem .75rem;
}
body[data-skin="reader"] .sv-exit-checknote[hidden]{ display:none; }
body[data-skin="reader"] .sv-exit-answer-row{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  flex-wrap:wrap; margin-top:.65rem;
}
body[data-skin="reader"] .sv-exit-mic{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-ui); font-size:.88rem; font-weight:600; cursor:pointer;
  background:var(--bg-card); color:var(--text-secondary);
  border:1px solid var(--border-light); border-radius:var(--radius-sm,10px);
  padding:.5rem .9rem; transition:border-color .2s, color .2s;
}
body[data-skin="reader"] .sv-exit-mic:hover{ border-color:var(--accent); color:var(--accent); }
body[data-skin="reader"] .sv-exit-mic[hidden]{ display:none; }
body[data-skin="reader"] .sv-exit-mic--live{
  color:var(--accent); border-color:var(--accent);
  animation:svExitMicPulse 1.6s ease-in-out infinite;
}
@keyframes svExitMicPulse{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 35%,transparent); }
  50%{ box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 0%,transparent); }
}
@media (prefers-reduced-motion: reduce){
  body[data-skin="reader"] .sv-exit-mic--live{ animation:none; }
}
body[data-skin="reader"] .sv-exit-send{
  font-family:var(--font-ui); font-size:.88rem; font-weight:600; cursor:pointer;
  background:var(--accent); color:#fff; border:none;
  border-radius:var(--radius-sm,10px); padding:.55rem 1.05rem;
  transition:filter .2s, transform .12s ease;
}
body[data-skin="reader"] .sv-exit-send:hover{ filter:brightness(1.08); }
body[data-skin="reader"] .sv-exit-send:active{ transform:scale(.97); }
body[data-skin="reader"] .sv-exit-send[hidden]{ display:none; }
body[data-skin="reader"].dark-mode .sv-exit-send{ color:#181614; }
body[data-skin="reader"] .sv-exit-privacy{
  margin:.6rem 0 0; font-family:var(--font-ui); font-size:.76rem; line-height:1.5;
  color:var(--text-muted);
}
body[data-skin="reader"] .sv-exit-privacy[hidden]{ display:none; }
body[data-skin="reader"] .sv-exit-saved{
  margin:0 0 .9rem; font-family:var(--font-ui); font-size:.85rem; font-weight:600;
  color:var(--accent);
}
body[data-skin="reader"] .sv-exit-saved[hidden]{ display:none; }
body[data-skin="reader"] .sv-exit-a{
  margin:0 0 1.1rem; font-family:var(--font-read); font-size:1.02rem; line-height:1.6;
  color:var(--text-secondary);
}
body[data-skin="reader"] .sv-exit-a[hidden]{ display:none; }
body[data-skin="reader"] .sv-exit-actions{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap;
}
body[data-skin="reader"] .sv-exit-btn{
  font-family:var(--font-ui); font-size:.9rem; font-weight:600; cursor:pointer;
  background:var(--bg-card); border:1px solid color-mix(in srgb,var(--accent) 32%,var(--border-light));
  border-radius:7px; padding:.5rem 1rem; color:var(--accent);
  transition:border-color .2s, transform .12s ease;
}
body[data-skin="reader"] .sv-exit-btn[hidden]{ display:none; }
body[data-skin="reader"] .sv-exit-btn:hover{ border-color:var(--accent); }
body[data-skin="reader"] .sv-exit-btn:active{ transform:scale(.97); }
body[data-skin="reader"] .sv-exit-continue{
  font-family:var(--font-ui); font-size:.9rem; font-weight:600; text-decoration:none;
  background:var(--accent); color:#fff; border-radius:7px; padding:.55rem 1.1rem;
  transition:filter .2s, transform .12s ease;
}
body[data-skin="reader"] .sv-exit-continue:hover{ filter:brightness(1.08); }
body[data-skin="reader"] .sv-exit-continue:active{ transform:scale(.97); }
body[data-skin="reader"].dark-mode .sv-exit-continue{ color:#181614; }

/* Related Media modal (launcher tile styled with the other utilities below) */
.rm-modal{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; }
.rm-modal[hidden]{ display:none; }
.rm-backdrop{ position:absolute; inset:0; background:rgba(20,15,10,.5); }
.rm-panel{ position:relative; z-index:1; width:min(900px,94vw); max-height:84vh; overflow:auto;
  background:var(--bg-card,#fff); color:var(--text-primary,#2a2017);
  border:1px solid var(--border-light,#e0d3b8); border-radius:4px; padding:1.6rem 1.7rem; box-shadow:0 24px 70px rgba(0,0,0,.32); }
.rm-close{ position:absolute; top:.6rem; right:.9rem; background:transparent; border:none; font-size:1.7rem; line-height:1; cursor:pointer; color:var(--text-muted,#999); transition:color .15s; }
body[data-skin="reader"] .rm-close:hover{ color:var(--text-primary); }
body[data-skin="reader"] .rm-title{
  font-family:var(--font-head); font-weight:600; font-size:1.3rem; letter-spacing:-.01em;
  color:var(--text-primary); margin:0 0 1.2rem; padding-bottom:.9rem;
  border-bottom:1px solid var(--border-light);
}
.rm-title{ font-family:var(--font-head,Georgia,serif); margin:0 0 1.1rem; font-size:1.5rem; letter-spacing:-.01em; }
.rm-modal .sidebar-section-title{ display:none; }
/* the roomy modal lays categories out as a responsive CARD GRID (3 cols on a
   wide screen, 1 on a phone) — each category is a card, items are plain rows
   inside it. No fake collapsibles. */
/* TRUE MASONRY — the harness places each card in the currently-shortest column
   (fills gaps, unlike CSS columns which only balance total height) */
body[data-skin="reader"] .rm-cols{ display:flex; gap:1.1rem; align-items:flex-start; }
body[data-skin="reader"] .rm-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:1.1rem; }
body[data-skin="reader"] .rm-body .sidebar-podcast-feed{ margin-top:1.1rem; }
body[data-skin="reader"] .rm-panel .sidebar-collapsible{   /* = one category card */
  margin:0; background:var(--bg-card);
  border:1px solid var(--border-light); border-radius:4px; padding:.9rem 1rem 1rem; overflow:hidden;
}
body[data-skin="reader"] .rm-panel .sidebar-collapsible-toggle{
  cursor:default; background:none !important; border:none; width:100%;
  display:flex; align-items:center; gap:.4rem; padding:0 0 .55rem; margin-bottom:.55rem;
  border-bottom:1px solid var(--border-light);
}
body[data-skin="reader"] .rm-panel .sidebar-collapsible-toggle span{
  font-family:var(--font-ui); font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.11em; color:var(--accent);
}
body[data-skin="reader"] .rm-panel .sidebar-collapsible-icon{ display:none; }   /* not collapsible here */
body[data-skin="reader"] .rm-panel .sidebar-collapsible-content{
  display:flex !important; flex-direction:column; gap:.1rem; max-height:none !important; overflow:visible !important;
}
body[data-skin="reader"] .rm-panel .sidebar-media-item{   /* plain row inside the card */
  display:block; padding:.5rem .55rem; border:none; border-radius:8px;
  text-decoration:none; transition:background .15s ease; position:relative;
}
body[data-skin="reader"] .rm-panel .sidebar-media-item:hover{
  background:color-mix(in srgb,var(--accent) 7%,var(--bg-card));
}
body[data-skin="reader"] .rm-panel .sidebar-media-item strong{
  display:block; font-family:var(--font-ui); font-size:.9rem; font-weight:600; color:var(--text-primary);
  line-height:1.3; padding-right:1.1rem;   /* clear the ↗ */
}
body[data-skin="reader"] .rm-panel .sidebar-media-item span{
  display:block; font-family:var(--font-ui); font-size:.8rem; line-height:1.45; color:var(--text-secondary); margin-top:.15rem;
}
body[data-skin="reader"] .rm-panel .sidebar-media-item::after{
  content:"\2197"; position:absolute; top:.5rem; right:.5rem; color:var(--text-muted); font-size:.85rem; opacity:0; transition:opacity .15s;
}
body[data-skin="reader"] .rm-panel .sidebar-media-item:hover::after{ opacity:1; color:var(--accent); }

/* ===== relocate floating buttons ===== */
/* Highlight + Tutor FABs are hidden (kept present so their panels still work) and
   surfaced as sidebar tiles instead. Bug button tucks into the bottom-right corner. */
body[data-skin="reader"] .sv-hl-fab-stack,
body[data-skin="reader"] .tutor-dock{ opacity:0 !important; pointer-events:none !important; }
body[data-skin="reader"] .bugr-fab{ bottom:1rem !important; right:1rem !important; top:auto !important; left:auto !important; }

/* ===== TILE HIERARCHY — typography does the work, the frame does the structure =====
   PRIMARY (Quick Quiz, Flashcards): editorial cells — letterspaced kicker top,
   big bottom-anchored label, italic serif sub-line. NO icons.
   UTILITY (Video, Related media, Highlight, Tutor): slim text rows with a quiet chevron. */
body[data-skin="reader"] .sv-panel > .sidebar-section:not(.sidebar-progress-section){
  padding:0 !important; border:none !important; background:var(--bg-card) !important; box-shadow:none !important; display:flex;
}
body[data-skin="reader"] .knowledge-check-btn,
body[data-skin="reader"] #sidebar-flashcard-btn,
body[data-skin="reader"] .sidebar-flashcard-btn{
  position:relative;
  flex:1 1 auto; width:100%; min-height:96px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.5rem; text-align:center; padding:1rem 1.15rem;
  /* a flat tint reads as a disabled state — light falls from the top instead,
     plus a whisper of an inner top highlight (manufactured, not drawn) */
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 9%,var(--bg-card)),
    color-mix(in srgb,var(--accent) 5%,var(--bg-card)));
  border:none; border-radius:0; color:var(--text-primary);
  font-family:var(--font-ui); font-size:1.08rem; font-weight:700; letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5); cursor:pointer;
  transition:background .2s ease;
}
body[data-skin="reader"] .knowledge-check-btn:hover,
body[data-skin="reader"] #sidebar-flashcard-btn:hover,
body[data-skin="reader"] .sidebar-flashcard-btn:hover{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 13%,var(--bg-card)),
    color-mix(in srgb,var(--accent) 8%,var(--bg-card)));
}
body[data-skin="reader"] .knowledge-check-btn:active,
body[data-skin="reader"] #sidebar-flashcard-btn:active{
  background:color-mix(in srgb,var(--accent) 16%,var(--bg-card));
  box-shadow:inset 0 1px 3px rgba(29,28,26,.08);  /* pressed = light leaves */
}
body[data-skin="reader"] .knowledge-check-btn svg,
body[data-skin="reader"] #sidebar-flashcard-btn svg,
body[data-skin="reader"] .sidebar-flashcard-btn svg{
  display:block; width:28px !important; height:28px !important; flex:0 0 auto; color:var(--accent);
}
body[data-skin="reader"] .knowledge-check-label,
body[data-skin="reader"] #sidebar-flashcard-btn span{
  font-size:1.05rem; font-weight:700; letter-spacing:-.01em; line-height:1.15;
}
/* the weight tag nests inside that span — keep it quiet, matching the
   other controls' tags */
body[data-skin="reader"] #sidebar-flashcard-btn span.sv-weight-tag{
  font-size:.8rem; font-weight:400; letter-spacing:0;
}
/* score = quiet corner mark, out of the flex flow so the icon+label stack
   stays level with the Flashcards tile. Plain accent text, no pill — the
   style.css accent pill turned accent-on-accent (unreadable) under the skin */
body[data-skin="reader"] .knowledge-check-score{
  position:absolute; top:.5rem; left:.7rem; margin:0; padding:0;
  background:none; border-radius:0;
  font-size:.8rem; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums;
}
body[data-skin="reader"] .knowledge-check-btn:hover .knowledge-check-score{
  background:none; color:var(--accent);
}

/* third primary — full-width under Quiz/Flashcards; same lit-tint family AND
   the same stacked icon-over-label arrangement as the other two primaries */
body[data-skin="reader"] .sv-practice-btn{
  flex:1 1 auto; width:100%; min-height:92px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.5rem; text-align:center; padding:1rem 1.15rem;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 9%,var(--bg-card)),
    color-mix(in srgb,var(--accent) 5%,var(--bg-card)));
  border:none; border-radius:0; color:var(--text-primary);
  font-family:var(--font-ui); font-size:1.05rem; font-weight:700; letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5); cursor:pointer;
  transition:background .2s ease;
}
body[data-skin="reader"] .sv-practice-btn svg{
  display:block; width:28px !important; height:28px !important; flex:0 0 auto; color:var(--accent);
}
body[data-skin="reader"] .sv-practice-btn:hover{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 13%,var(--bg-card)),
    color-mix(in srgb,var(--accent) 8%,var(--bg-card)));
}
body[data-skin="reader"] .sv-practice-btn:active{
  background:color-mix(in srgb,var(--accent) 16%,var(--bg-card));
  box-shadow:inset 0 1px 3px rgba(29,28,26,.08);
}
body[data-skin="reader"].dark-mode .sv-practice-btn{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }

/* practice modal — the whole live .practice-section moves in here */
body[data-skin="reader"] .pq-modal{
  position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
}
body[data-skin="reader"] .pq-modal[hidden]{ display:none; }
/* ASSESSMENT SURFACES FROST THE PAGE (Tom, 11 Jun): the lesson text behind
   an exam question is an answer sheet. Practice + Quick Quiz + exit ticket
   all blur it out; reference/browse modals (related media) stay readable.
   FROST METHOD (Tom, 14 Jun): blur the CONTENT directly via filter on the
   header + lesson page, NOT backdrop-filter on the overlay. Chrome's
   backdrop-filter does not blur text glyphs — boxes/images/key-facts frosted
   but titles and paragraphs stayed razor-sharp. A real filter blurs everything
   uniformly. The modals are body children OUTSIDE #lesson-page, so they stay
   sharp; the overlays keep their dark scrim (base + .pq-/.sv-exit- backdrops)
   for the dimming. */
body[data-skin="reader"] .pq-backdrop{
  position:absolute; inset:0; background:rgba(20,15,10,.45);
}
body[data-skin="reader"].sv-modal-open .page-header,
body[data-skin="reader"].sv-modal-open #lesson-page{
  filter:blur(14px);
}
body[data-skin="reader"] .pq-panel{
  position:relative; z-index:1; width:min(720px,94vw); max-height:88vh; overflow:auto;
  background:var(--bg-card); color:var(--text-primary);
  border:1px solid var(--border-light); border-radius:4px;
  padding:1.6rem 1.8rem; box-shadow:0 24px 70px rgba(0,0,0,.32);
}
body[data-skin="reader"] .pq-close{
  position:sticky; top:0; float:right; background:transparent; border:none;
  font-size:1.7rem; line-height:1; cursor:pointer; color:var(--text-muted); z-index:2;
}
body[data-skin="reader"] .pq-close:hover{ color:var(--text-primary); }
body[data-skin="reader"] .pq-panel .practice-section{
  margin:0; padding:0; background:transparent; border:none; box-shadow:none;
}
body[data-skin="reader"] .pq-panel .practice-section h2{ margin-top:0; font-size:1.45rem; }

body[data-skin="reader"] .sv-tool-btn,
body[data-skin="reader"] .rm-launcher{
  flex:1 1 auto; width:100%; min-height:54px; display:flex; flex-direction:row;
  align-items:center; justify-content:flex-start; gap:.6rem; text-align:left; padding:.65rem 1.15rem;
  background:transparent; border:none; border-radius:0; color:var(--text-secondary);
  font-family:var(--font-ui); font-size:.95rem; font-weight:600;
  box-shadow:none; cursor:pointer; transition:background .2s ease, color .2s ease;
}
body[data-skin="reader"] .sv-tool-btn:hover,
body[data-skin="reader"] .rm-launcher:hover{ color:var(--text-primary); background:color-mix(in srgb,var(--accent) 4%,var(--bg-card)); }
body[data-skin="reader"] .sv-tool-btn svg,
body[data-skin="reader"] .rm-launcher svg{
  display:block; width:19px !important; height:19px !important; flex:0 0 auto; color:var(--text-secondary);
}
body[data-skin="reader"] .sv-tool-btn:hover svg,
body[data-skin="reader"] .rm-launcher:hover svg{ color:var(--accent); }
/* quiet chevron, pushed right */
body[data-skin="reader"] .sv-tool-btn::after,
body[data-skin="reader"] .rm-launcher::after{
  content:"\203A"; margin-left:auto; color:var(--text-muted); font-size:1.2rem; line-height:1; font-weight:400;
}
body[data-skin="reader"] .rm-launcher-label{ font-weight:600; font-size:.95rem; }
body[data-skin="reader"] .rm-launcher-count{ margin-left:auto; font-size:.88rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
body[data-skin="reader"] .rm-launcher::after{ margin-left:.5rem; }
/* the launcher button has its own label — hide the section title in action tiles */
body[data-skin="reader"] .sidebar-media > .sidebar-section-title{ display:none; }
/* active state (e.g. Highlight tile while highlight mode is on) */
body[data-skin="reader"] .sv-tool-btn--active{ color:var(--accent) !important; background:color-mix(in srgb,var(--accent) 8%, var(--bg-card)) !important; }


/* =================================================================
   HOMEPAGE (index.html) — the front door in the reader language.
   No sticky header here: a centred hero over the subject grid. CSS-only
   (no JS harness) — every surface reads from the reader tokens, so the
   muted palette + dark mode track for free.
   ================================================================= */

/* ---- hero: quiet kicker, confident wordmark, calm beta chip ---- */
body[data-skin="reader"] .hero .hero-welcome{
  font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.22em;
  font-size:.76rem; font-weight:700; color:var(--text-muted);
}
body[data-skin="reader"] .hero h1{
  font-family:var(--font-head) !important; font-weight:700; letter-spacing:-.025em; color:var(--text-primary);
}
body[data-skin="reader"] .hero h1 .logo-lock{ color:var(--accent); }
/* BETA: style.css paints the wordmark badge amber + tilted 8°. Calm it to a
   flat, level, accent-tint chip — an honest beta signal without the cheap
   sticker look (the lesson header drops its copy of this badge entirely). */
body[data-skin="reader"] .hero .hero-welcome + h1::after{
  background:color-mix(in srgb,var(--accent) 14%,var(--bg-card)) !important; color:var(--accent) !important;
  transform:none !important; border-radius:var(--radius-sm) !important; box-shadow:none !important;
  font-family:var(--font-ui); font-weight:700; right:-1.5em;
}
body[data-skin="reader"].dark-mode .hero .hero-welcome + h1::after{
  background:color-mix(in srgb,var(--accent) 24%,var(--bg-card)) !important;
}
/* the welcome-modal beta pill (different element) gets the same calm treatment */
body[data-skin="reader"] .beta-pill{
  font-family:var(--font-ui); font-weight:700; letter-spacing:.14em; transform:none;
  background:color-mix(in srgb,var(--accent) 13%,var(--bg-card)); color:var(--accent);
  border-radius:var(--radius-sm);
}
body[data-skin="reader"].dark-mode .beta-pill{
  background:color-mix(in srgb,var(--accent) 22%,var(--bg-card)); color:var(--accent);
}
body[data-skin="reader"] .hero .hero-tagline,
body[data-skin="reader"] .hero .tagline{ font-family:var(--font-read); color:var(--text-secondary); }
/* inline action links (Pick subjects / Enter school code / Change subjects) */
body[data-skin="reader"] .nav-school-link,
body[data-skin="reader"] .free-user-badge button{
  font-family:var(--font-ui); color:var(--accent); font-weight:600;
  text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent); text-underline-offset:2px;
}
body[data-skin="reader"] .nav-school-link:hover,
body[data-skin="reader"] .free-user-badge button:hover{ color:var(--accent); text-decoration-color:var(--accent); }
body[data-skin="reader"] .free-user-badge{ font-family:var(--font-ui); color:var(--text-muted); }

/* ---- subject cards: photo-led clippings, ONE muted accent per subject ----
   Each card derives a muted tone from its saturated --card-accent (mixed toward
   a warm grey) so the grid keeps gentle per-subject identity for scanning but
   never goes garish. The tone shows only on the board label + the hover edge;
   the photograph does the rest. Lifts toward light in dark mode to stay legible. */
body[data-skin="reader"] .home-card{
  --sub:color-mix(in srgb, var(--card-accent,#566a72) 60%, #71695f);
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(29,28,26,.05); overflow:hidden;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
}
body[data-skin="reader"].dark-mode .home-card{ --sub:color-mix(in srgb, var(--card-accent,#566a72) 52%, #b8b0a4); }
body[data-skin="reader"] .home-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--sub) 55%,var(--border-light));
  box-shadow:0 1px 2px rgba(29,28,26,.05), 0 18px 36px -24px rgba(29,28,26,.22);
}
body[data-skin="reader"].dark-mode .home-card:hover{
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 36px -24px rgba(0,0,0,.6);
}
/* photo sits slightly desaturated at rest, blooms to full on hover — a quiet
   tell that the whole card is live, on system with the lesson hover language */
body[data-skin="reader"] .home-card-img{ filter:saturate(.92); transition:filter .25s ease; }
body[data-skin="reader"] .home-card:hover .home-card-img{ filter:saturate(1); }
/* the rainbow 3px top stripe goes — identity now lives in the board label */
body[data-skin="reader"] .home-card-body{ border-top:none !important; }
body[data-skin="reader"] .home-card h3,
body[data-skin="reader"] .home-card-name{
  font-family:var(--font-head) !important; font-weight:700; letter-spacing:-.01em; color:var(--text-primary);
}
body[data-skin="reader"] .home-card-board{
  font-family:var(--font-ui); color:var(--sub); letter-spacing:.05em; font-weight:700;
  text-transform:uppercase; font-size:.72rem;
  background:none !important; padding:0 !important; border-radius:0 !important;
}
body[data-skin="reader"] .home-card-detail{ font-family:var(--font-ui); color:var(--text-muted); }
/* premium badge — quiet glass chip, on-system radius (was a hard cream box) */
body[data-skin="reader"] .home-card-premium{
  font-family:var(--font-ui); border-radius:var(--radius-sm); color:var(--text-secondary);
  background:color-mix(in srgb,var(--bg-card) 86%,transparent); box-shadow:0 1px 3px rgba(29,28,26,.12);
}

/* ---- section header + exam-timetable chip ---- */
body[data-skin="reader"] .home-section-header h2,
body[data-skin="reader"] .home-subjects > h2,
body[data-skin="reader"] .home-section-title,
body[data-skin="reader"] .home-subjects-header h2{
  font-family:var(--font-head) !important; color:var(--text-primary); letter-spacing:-.01em; font-weight:700;
}
/* the saturated-blue pill becomes a calm on-system chip (accent text, hairline,
   softer-square radius — the 999px pill read as the AI tell) */
body[data-skin="reader"] .home-exams-link{
  font-family:var(--font-ui); color:var(--accent); font-weight:600;
  background:var(--bg-card); border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border-light));
  border-radius:8px;
}
body[data-skin="reader"] .home-exams-link:hover{
  background:color-mix(in srgb,var(--accent) 7%,var(--bg-card)); border-color:var(--accent);
}

/* ---- request-a-subject panel (the <details> at the foot of the grid) ---- */
body[data-skin="reader"] .request-panel{
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(29,28,26,.05);
}
body[data-skin="reader"] .request-panel[open]{ border-color:var(--border-light); box-shadow:0 1px 2px rgba(29,28,26,.05), 0 18px 36px -24px rgba(29,28,26,.2); }
body[data-skin="reader"] .request-panel > summary:hover{ background:color-mix(in srgb,var(--accent) 4%,var(--bg-card)); }
body[data-skin="reader"] .request-panel .req-icon{
  background:color-mix(in srgb,var(--accent) 13%,var(--bg-card)) !important; color:var(--accent) !important;
  border-radius:var(--radius-sm);
}
body[data-skin="reader"] .request-panel .req-title{ font-family:var(--font-head); color:var(--text-primary); }
body[data-skin="reader"] .request-panel .req-title small{ font-family:var(--font-ui); color:var(--text-muted); }
body[data-skin="reader"] .request-panel-body{ background:none; border-top-color:var(--border-light); }
body[data-skin="reader"] .request-panel-body > p{ font-family:var(--font-read); color:var(--text-secondary); }
body[data-skin="reader"] .request-panel-body .update-note{
  background:color-mix(in srgb,var(--accent) 7%,var(--bg-card));
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border-light));
  border-radius:var(--radius-sm); color:var(--text-secondary); font-family:var(--font-ui);
}
body[data-skin="reader"] .request-submit{ font-family:var(--font-ui); background:var(--accent); border-radius:var(--radius-sm); color:#fff; }
body[data-skin="reader"].dark-mode .request-submit{ color:#181614; }
body[data-skin="reader"] .request-fields label{ font-family:var(--font-ui); color:var(--text-secondary); }
body[data-skin="reader"] .request-fields label > input,
body[data-skin="reader"] .request-fields label > select{
  font-family:var(--font-ui); background:var(--bg-card); color:var(--text-primary);
  border:1px solid var(--border-light); border-radius:var(--radius-sm);
}
body[data-skin="reader"] .request-fields label > input:focus,
body[data-skin="reader"] .request-fields label > select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}


/* ---- static site footer (brand · copy · links) ---- */
body[data-skin="reader"] .site-footer{ border-top:1px solid var(--border-light); }
body[data-skin="reader"] .site-footer-inner{ font-family:var(--font-ui); color:var(--text-muted); }
body[data-skin="reader"] .site-footer-brand{ font-family:var(--font-head); color:var(--text-secondary); }
body[data-skin="reader"] .site-footer-brand .logo-lock{ color:var(--accent); }
body[data-skin="reader"] .site-footer-links a{ color:var(--text-secondary); text-decoration:none; }
body[data-skin="reader"] .site-footer-links a:hover{ color:var(--accent); }

/* =================================================================
   HOMEPAGE MODALS — free-wizard (pick subjects), subject picker,
   welcome / school-code. Retargeted off the coral/amber/dark one-offs
   onto the reader tokens, so they track accent + dark mode like the rest.
   ================================================================= */
/* ---- free wizard ("Add your subjects") ---- */
body[data-skin="reader"] .free-wizard-modal{ background:var(--bg-card); border:1px solid var(--border-light); border-radius:6px; }
body[data-skin="reader"] .fw-header{ border-bottom-color:var(--border-light); }
body[data-skin="reader"] .fw-header h2{ font-family:var(--font-head); color:var(--text-primary); letter-spacing:-.01em; }
body[data-skin="reader"] .fw-header p{ font-family:var(--font-ui); color:var(--text-secondary); }
body[data-skin="reader"] .fw-step-pill{
  font-family:var(--font-ui); border-radius:var(--radius-sm); letter-spacing:.1em;
  background:color-mix(in srgb,var(--accent) 13%,var(--bg-card)); color:var(--accent);
}
body[data-skin="reader"] .fw-core-note{ background:color-mix(in srgb,var(--accent) 4%,var(--bg-card)); border-color:var(--border-light); border-radius:var(--radius); }
body[data-skin="reader"] .fw-core-note svg{ color:var(--accent); }
body[data-skin="reader"] .fw-core-note strong{ color:var(--text-primary); font-family:var(--font-ui); }
body[data-skin="reader"] .fw-core-chip{ background:var(--bg-card); border-color:var(--border-light); border-radius:7px; color:var(--text-secondary); font-family:var(--font-ui); }
body[data-skin="reader"] .fw-search-input{ background:var(--bg-card); border-color:var(--border-light); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-ui); }
body[data-skin="reader"] .fw-search-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
body[data-skin="reader"] .fw-category{ border-bottom-color:var(--border-light); }
body[data-skin="reader"] .fw-cat-header:hover{ background:color-mix(in srgb,var(--accent) 4%,var(--bg-card)); }
body[data-skin="reader"] .fw-cat-title{ font-family:var(--font-ui); color:var(--text-primary); }
body[data-skin="reader"] .fw-cat-count{ background:var(--bg-card); border-color:var(--border-light); color:var(--text-muted); font-family:var(--font-ui); }
body[data-skin="reader"] .fw-cat-count.has-selected{ background:var(--accent); border-color:var(--accent); color:#fff; }
body[data-skin="reader"].dark-mode .fw-cat-count.has-selected{ color:#181614; }
body[data-skin="reader"] .fw-subj-card{ background:var(--bg-card); border-color:var(--border-light); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-ui); }
body[data-skin="reader"] .fw-subj-card:hover:not(.unavailable){ border-color:var(--accent); }
body[data-skin="reader"] .fw-subj-card.selected{ background:color-mix(in srgb,var(--accent) 9%,var(--bg-card)); border-color:var(--accent); }
body[data-skin="reader"] .fw-subj-card .fw-check{ color:var(--accent); }
body[data-skin="reader"] .fw-soon-tag{ background:color-mix(in srgb,var(--accent) 7%,var(--bg-card)); color:var(--text-muted); font-family:var(--font-ui); }
body[data-skin="reader"] .fw-footer{ border-top-color:var(--border-light); background:color-mix(in srgb,var(--accent) 3%,var(--bg-card)); }
body[data-skin="reader"] .fw-footer-count{ font-family:var(--font-ui); color:var(--text-secondary); }
body[data-skin="reader"] .fw-footer-count strong{ color:var(--text-primary); }
body[data-skin="reader"] .fw-btn{ font-family:var(--font-ui); border-radius:var(--radius-sm); }
body[data-skin="reader"] .fw-btn-ghost{ background:var(--bg-card); color:var(--text-secondary); border-color:var(--border-light); }
body[data-skin="reader"] .fw-btn-ghost:hover{ color:var(--accent); border-color:var(--accent); }
body[data-skin="reader"] .fw-btn-primary{ background:var(--accent); color:#fff; }
body[data-skin="reader"].dark-mode .fw-btn-primary{ color:#181614; }
body[data-skin="reader"] .fw-btn-primary:hover:not(:disabled){ filter:brightness(1.08); }
/* step 2 — board picker rows */
body[data-skin="reader"] .fw-board-row{ background:var(--bg-card); border-color:var(--border-light); border-radius:var(--radius); }
body[data-skin="reader"] .fw-board-row.unresolved{ background:color-mix(in srgb,var(--accent) 4%,var(--bg-card)); border-color:color-mix(in srgb,var(--accent) 22%,var(--border-light)); }
body[data-skin="reader"] .fw-board-name{ font-family:var(--font-ui); color:var(--text-primary); }
body[data-skin="reader"] .fw-core-badge{ background:color-mix(in srgb,var(--accent) 13%,var(--bg-card)); color:var(--accent); border-radius:var(--radius-sm); font-family:var(--font-ui); }
body[data-skin="reader"] .fw-board-status.picked{ color:var(--accent); }
body[data-skin="reader"] .fw-board-pill{ background:var(--bg-card); border-color:var(--border-light); border-radius:var(--radius-sm); color:var(--text-secondary); font-family:var(--font-ui); }
body[data-skin="reader"] .fw-board-pill:hover{ border-color:var(--accent); }
body[data-skin="reader"] .fw-board-pill.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }
body[data-skin="reader"].dark-mode .fw-board-pill.selected{ color:#181614; }
body[data-skin="reader"] .fw-section-label,
body[data-skin="reader"] .fw-search-group-label{ font-family:var(--font-ui); color:var(--text-muted); }
body[data-skin="reader"] .fw-text-btn{ font-family:var(--font-ui); border-color:var(--border-light); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text-secondary); }
body[data-skin="reader"] .fw-text-btn.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }
body[data-skin="reader"].dark-mode .fw-text-btn.selected{ color:#181614; }
body[data-skin="reader"] .fw-toast{ font-family:var(--font-ui); background:var(--text-primary); color:var(--bg-card); border-radius:var(--radius-sm); }

/* ---- subject picker modal ("Change subjects") ---- */
body[data-skin="reader"] .picker-modal{ border:1px solid var(--border-light); border-radius:6px; }
body[data-skin="reader"] .picker-header h2{ font-family:var(--font-head); color:var(--text-primary); }
body[data-skin="reader"] .picker-header p{ font-family:var(--font-ui); color:var(--text-secondary); }
body[data-skin="reader"] .picker-item{ border-radius:var(--radius-sm); }
body[data-skin="reader"] .picker-item.selected{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
body[data-skin="reader"] .picker-item .picker-check{ background:var(--accent); }
body[data-skin="reader"].dark-mode .picker-item .picker-check{ color:#181614; }
body[data-skin="reader"] .picker-item-label{ font-family:var(--font-head); color:var(--text-primary); }
body[data-skin="reader"] .picker-done{ font-family:var(--font-ui); background:var(--accent); border-radius:var(--radius-sm); }
body[data-skin="reader"].dark-mode .picker-done{ color:#181614; }
body[data-skin="reader"] .picker-tier-name{ font-family:var(--font-head); }
body[data-skin="reader"] .picker-tier-btn{ font-family:var(--font-ui); }
body[data-skin="reader"] .picker-tier-indicator{ background:var(--accent); }
body[data-skin="reader"] .picker-disclaimer{ font-family:var(--font-ui); color:var(--text-muted); }

/* ---- welcome / school-code modal ---- */
body[data-skin="reader"] .welcome-modal h2,
body[data-skin="reader"] .school-modal h2{ font-family:var(--font-head); color:var(--text-primary); }
body[data-skin="reader"] .welcome-modal p,
body[data-skin="reader"] .school-modal p{ font-family:var(--font-ui); color:var(--text-secondary); }
body[data-skin="reader"] .welcome-choice-primary{ background:var(--accent); color:#fff; border-radius:var(--radius-sm); font-family:var(--font-ui); }
body[data-skin="reader"].dark-mode .welcome-choice-primary{ background:var(--accent); color:#181614; }
body[data-skin="reader"] .welcome-choice-secondary{ border-radius:var(--radius-sm); font-family:var(--font-ui); }

/* =================================================================
   BROWSE (browse.html) — Paper editorial
   ================================================================= */
body[data-skin="reader"] #browse-content .hero h1,
body[data-skin="reader"] .subject-header h1,
body[data-skin="reader"] .unit-page-header h1{
  font-family:var(--font-head) !important; font-weight:600; color:var(--text-primary); letter-spacing:-.01em;
}
/* browse/guide carry the subject/unit name inside .header-brand (lesson pages
   use .header-pills) — give it the same logo│context hairline as the lesson
   header so the wordmark and the page context read as two sections. */
body[data-skin="reader"] .header-brand .header-unit-label:not(:empty){
  position:relative; padding-left:1.15rem; margin-left:.2rem;
}
body[data-skin="reader"] .header-brand .header-unit-label:not(:empty)::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:20px; background:var(--border-light);
}
/* unit cards + lesson cards — same clipping treatment, no Tailwind accent corner */
body[data-skin="reader"] .unit-card,
body[data-skin="reader"] .lesson-card{
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius); box-shadow:none;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
}
body[data-skin="reader"] .unit-card:hover,
body[data-skin="reader"] .lesson-card:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-lg) !important;
  border-color:color-mix(in srgb,var(--accent) 35%,var(--border-light));
}
body[data-skin="reader"] .unit-card-body h2{
  font-family:var(--font-head) !important; font-weight:600; color:var(--text-primary); letter-spacing:-.01em;
}
body[data-skin="reader"] .unit-subtitle{ font-family:var(--font-read); color:var(--text-secondary); }
body[data-skin="reader"] .unit-meta,
body[data-skin="reader"] .unit-progress-label{ font-family:var(--font-ui); color:var(--text-muted); }
body[data-skin="reader"] .progress-bar-fill{ background:var(--accent); }
body[data-skin="reader"] .lesson-card-number{
  font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; color:var(--accent);
}
body[data-skin="reader"] .lesson-card h3,
body[data-skin="reader"] .lesson-card-title,
body[data-skin="reader"] .lesson-card h2{
  font-family:var(--font-head) !important; font-weight:600; color:var(--text-primary); letter-spacing:-.01em;
}

/* =================================================================
   GUIDE (guide.html) — revision-technique + exam-technique pages.
   The content reuses .lesson-page; the hub paints its category cards
   entirely from --paper-accent / --paper-light (authored green for
   revision, amber for exam). Retarget those two variables to the
   subject accent and the whole guide tracks the reader palette + dark
   mode (border, heading, labels, hover, header tint all follow).
   ================================================================= */
body[data-skin="reader"] .guide-paper{
  --paper-accent:var(--accent) !important;
  --paper-light:color-mix(in srgb,var(--accent) 8%,var(--bg-card)) !important;
  border:1px solid var(--border-light); border-left:4px solid var(--accent);
  border-radius:var(--radius); box-shadow:0 1px 2px rgba(29,28,26,.05);
}
body[data-skin="reader"].dark-mode .guide-paper{ box-shadow:none; }
body[data-skin="reader"] .guide-paper-header h2{ font-family:var(--font-head); letter-spacing:-.01em; }
body[data-skin="reader"] .guide-paper-ref{ font-family:var(--font-ui); }
body[data-skin="reader"] .guide-question-label{ font-family:var(--font-ui); }
body[data-skin="reader"] .guide-question-card{ border-top-color:var(--border-light); }
body[data-skin="reader"] .guide-question-card h3{ font-family:var(--font-head); font-weight:700; letter-spacing:-.005em; }
body[data-skin="reader"] .guide-question-card p{ font-family:var(--font-read); color:var(--text-secondary); }
body[data-skin="reader"] .guide-question-marks,
body[data-skin="reader"] .guide-soon-badge{ font-family:var(--font-ui); border-radius:var(--radius-sm); }
/* hub title + intro + individual-guide title. The unscoped lesson-masthead
   rule (white text + heavy drop-shadow, meant for a title over a hero image)
   also matches the guide's .lesson-header h1 — neutralise the shadow + force
   the dark colour so the title reads cleanly on the cream page. */
body[data-skin="reader"] #guide-content h1,
body[data-skin="reader"] .guide-hub-title{
  font-family:var(--font-head) !important; color:var(--text-primary) !important;
  text-shadow:none !important; letter-spacing:-.02em; font-weight:700;
}
body[data-skin="reader"] #guide-content .guide-hub-intro,
body[data-skin="reader"] #guide-content .hero p{ font-family:var(--font-read); color:var(--text-secondary); }
/* individual guide title: the masthead rule above also sizes it as a hero title
   (clamp to 3.4rem, centred, 18ch) — on a guide there is no hero image, so bring
   it back to the unit-page size, left-aligned (6 Sep 2026, Tom). */
body[data-skin="reader"] #guide-content .lesson-header{ text-align:left; }
body[data-skin="reader"] #guide-content .lesson-header h1{
  font-size:2.25rem; line-height:1.2; max-width:none; margin:0 0 .3em; text-align:left; text-wrap:initial;
}
/* "Video walkthrough coming soon" sidebar block: hidden site-wide until videos
   exist (6 Sep 2026, Tom: probably never) — the block is baked into 500+
   guide_pages rows, so hide it here rather than sweep the database. */
body[data-skin="reader"] #guide-content .sidebar-section:has(> .guide-video-placeholder){ display:none; }
/* individual technique article: it reuses .lesson-page > main + aside but NOT
   .study-notes, so the reader article fonts never reach it — set them here. */
body[data-skin="reader"] #guide-content h2,
body[data-skin="reader"] #guide-content h3,
body[data-skin="reader"] #guide-content h4{ font-family:var(--font-head) !important; color:var(--text-primary); letter-spacing:-.01em; }
body[data-skin="reader"] #guide-content .lesson-content p,
body[data-skin="reader"] #guide-content .lesson-content li{ font-family:var(--font-read); color:var(--text-primary); }
body[data-skin="reader"] #guide-content .lesson-content table,
body[data-skin="reader"] #guide-content .lesson-content th{ font-family:var(--font-ui); }
body[data-skin="reader"] #guide-content .lesson-content td{ font-family:var(--font-read); }

/* compact the Progress checklist: ledger strip — monochrome icon row (dim=to-do,
   accent=done), hairline bar, tabular count in the top-right corner */
body[data-skin="reader"] .sidebar-progress-section{ padding:.95rem 1.15rem 1.05rem; position:relative; }
body[data-skin="reader"] .sidebar-progress-section .sidebar-section-title{ margin-bottom:.6rem; }
body[data-skin="reader"] .lesson-progress-card{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem .2rem; }
body[data-skin="reader"] .lesson-progress-item{ flex:0 0 auto; width:auto; display:inline-flex; align-items:center; padding:0; margin:0; border:none !important; background:transparent !important; opacity:.45; }
body[data-skin="reader"] .lesson-progress-item.completed{ opacity:1; }
body[data-skin="reader"] .lesson-progress-label{ display:none; }
body[data-skin="reader"] .lesson-progress-check{ display:none; }
body[data-skin="reader"] .lesson-progress-icon{ width:32px; height:32px; color:var(--text-muted) !important; background:transparent !important; }
body[data-skin="reader"] .lesson-progress-icon svg{ width:18px; height:18px; }
body[data-skin="reader"] .lesson-progress-item.completed .lesson-progress-icon{ color:var(--accent) !important; }
body[data-skin="reader"] .lesson-progress-bar{ flex:1 1 100%; order:8; margin-top:.6rem; height:3px; border-radius:0; background:var(--border-lighter); overflow:visible; position:relative; }
body[data-skin="reader"] .lesson-progress-bar-fill{ background:var(--accent); border-radius:0; }
/* the done-line: a lesson counts as complete from 50% (weighted) — the hatched
   tick marks the target, on every lesson, always at the same spot */
body[data-skin="reader"] .lesson-progress-bar::after{
  content:''; position:absolute; left:50%; top:-7px; bottom:-7px; width:3px; margin-left:-1.5px;
  background:repeating-linear-gradient(180deg, var(--text-secondary) 0 3px, transparent 3px 6px);
  opacity:.95; pointer-events:none;
}
body[data-skin="reader"] .lesson-progress-summary{
  position:absolute; top:.95rem; right:1.15rem; flex:none; order:0; margin:0;
  font-size:.84rem; color:var(--text-muted); font-variant-numeric:tabular-nums;
}

/* VIDEO — a real player card in the freed corner below the panel (Tom,
   11 Jun): looks like a player, click opens the modal. Native loader
   markup (thumb + play button) untouched; this just frames it. */
body[data-skin="reader"] .lesson-sidebar > #sidebar-video-section{
  flex:0 0 auto; margin:0; padding:0 !important;
  background:transparent !important; border:none !important; box-shadow:none !important;
}
body[data-skin="reader"] .lesson-sidebar > #sidebar-video-section .sidebar-section-title{
  display:none;   /* the card speaks for itself */
}
body[data-skin="reader"] .lesson-sidebar > #sidebar-video-section .sidebar-video{
  position:relative; overflow:hidden; padding:0; height:auto; aspect-ratio:16/9;
  border:1px solid var(--border-light); border-radius:4px;
  box-shadow:0 1px 2px rgba(29,28,26,.05), 0 18px 36px -24px rgba(29,28,26,.18);
  cursor:pointer;
}
body[data-skin="reader"] .lesson-sidebar > #sidebar-video-section .sidebar-video::before{ content:none !important; padding:0 !important; }
body[data-skin="reader"] .lesson-sidebar > #sidebar-video-section .sidebar-video iframe,
body[data-skin="reader"] .lesson-sidebar > #sidebar-video-section .sidebar-video img,
body[data-skin="reader"] .lesson-sidebar > #sidebar-video-section .sidebar-video .sidebar-video-thumb{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;
}

/* RICH VIDEO THUMBNAIL — compose the lesson's own hero image into a
   YouTube-style card (scrim + centred play + title overlay + duration) so it
   actually invites a click. Zero generation cost: reuses the hero already on
   R2. Production would compose this from lessons.image_url. */
body[data-skin="reader"] .sv-video-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(18,14,10,.82) 0%, rgba(18,14,10,.12) 48%, rgba(18,14,10,.28) 100%);
}
body[data-skin="reader"] .sv-video-thumb-rich .sidebar-video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:54px; height:54px; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:rgba(255,255,255,.94); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.4); transition:transform .15s ease, background .15s ease;
}
body[data-skin="reader"] .sv-video-thumb-rich:hover .sidebar-video-play{
  transform:translate(-50%,-50%) scale(1.08); background:#fff;
}
body[data-skin="reader"] .sv-video-thumb-rich .sidebar-video-play svg{ width:22px; height:22px; margin-left:3px; }
body[data-skin="reader"] .sv-video-meta{
  position:absolute; left:.85rem; right:.85rem; bottom:.75rem; z-index:2;
  display:flex; flex-direction:column; gap:.18rem;
}
body[data-skin="reader"] .sv-video-kicker{
  font-family:var(--font-ui); font-size:.64rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:rgba(255,255,255,.82);
}
body[data-skin="reader"] .sv-video-ttl{
  font-family:var(--font-head); font-weight:600; font-size:1rem; line-height:1.25;
  letter-spacing:-.01em; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.45);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
body[data-skin="reader"] .sv-video-dur{
  position:absolute; top:.6rem; right:.6rem; z-index:2;
  font-family:var(--font-ui); font-size:.72rem; font-weight:600; font-variant-numeric:tabular-nums;
  color:#fff; background:rgba(0,0,0,.74); padding:.12rem .42rem; border-radius:5px;
}
body[data-skin="reader"] .sv-video-dur:empty{ display:none; }  /* until the real length loads */

@media (max-width:980px){
  body[data-skin="reader"] .lesson-body{ grid-template-columns:1fr; gap:0; }
  body[data-skin="reader"] .lesson-sidebar{ display:flex; flex-direction:column; position:static; max-height:none; height:auto; overflow:visible; margin-top:2.5rem; }
}
/* phones (<=768px): the lesson tools are a drawer behind the burger (main.js
   initSidebarPanel), not a stack at the foot of the page nobody scrolls to
   (Tom, 11 Sep 2026). The drawer scrolls inside itself; the tools sit first
   and the page links last. Tablets 769-980px keep the stacked layout above. */
@media (max-width:768px){
  body[data-skin="reader"].sidebar-panel-mode .lesson-sidebar{
    position:fixed !important; top:0; right:0; bottom:0; left:auto;
    width:min(88vw,380px); max-width:none; height:100dvh; max-height:none;
    margin:0; padding:0 1rem 1.5rem; gap:1rem;
    overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    background:var(--bg-page,#faf8f5); z-index:1500;
    box-shadow:-4px 0 24px rgba(0,0,0,.12);
    transform:translateX(102%); transition:transform .35s cubic-bezier(.16,1,.3,1);
    opacity:1 !important;
  }
  body[data-skin="reader"].sidebar-panel-mode.sidebar-open .lesson-sidebar{ transform:none; }
  body[data-skin="reader"].sidebar-panel-mode .sidebar-panel-close{ display:flex; background:var(--bg-page,#faf8f5); }
  body[data-skin="reader"].sidebar-panel-mode .sv-panel{ flex:0 0 auto; }
  body[data-skin="reader"].sidebar-panel-mode .lesson-sidebar > #sidebar-video-section{ flex:0 0 auto; }
  /* the page links: a compact row at the foot of the drawer */
  body[data-skin="reader"].sidebar-panel-mode .sidebar-panel-nav{
    display:flex; order:99; flex-direction:row; flex-wrap:wrap; gap:.4rem;
    border-bottom:0; border-top:1px solid var(--border-light); padding:.9rem 0 0; margin:.25rem 0 0;
  }
  body[data-skin="reader"].sidebar-panel-mode .sidebar-panel-nav a{
    flex:1 1 calc(50% - .4rem); justify-content:center; font-size:.84rem; padding:.55rem .5rem;
    border:1px solid var(--border-light); border-radius:8px; background:var(--bg-card,#fff);
  }
  body[data-skin="reader"].sidebar-panel-mode .sidebar-panel-nav a svg{ display:none; }
  /* the burger: a dot while the quiz in the drawer is still to do */
  body[data-skin="reader"] .mobile-menu-btn{ position:relative; }
  body[data-skin="reader"] .mobile-menu-btn.has-unseen::after{
    content:""; position:absolute; top:.35rem; right:.3rem; width:9px; height:9px; border-radius:50%;
    background:var(--accent,#5b7c5f); box-shadow:0 0 0 2px var(--bg-page,#faf8f5);
  }
}

/* ================= LEGACY CHROME SWEEP =================
   One system, no seams: every piece of pre-redesign chrome on the lesson
   page re-cut to the Reader tokens. Token-driven throughout, so dark mode
   re-derives for free. */

/* ---- page header: quiet glass, hairline on scroll, ONE colour voice ---- */
body[data-skin="reader"] .page-header{
  background:color-mix(in srgb, var(--bg-body) 78%, transparent);
}
body[data-skin="reader"] .page-header.scrolled{
  border-bottom-color:var(--border-light); box-shadow:none;
}
body[data-skin="reader"] .header-logo{ color:var(--text-primary); }
/* drop the BETA stamp on the logo — this is the launch-ready look */
body[data-skin="reader"] .header-logo::after{ content:none !important; display:none !important; }

/* SCHOOL CO-BRAND (Tom, 14 Jun) — the harness moves the injected school logo
   into .header-brand so it reads "StudyVault │ Unity College" beside the
   wordmark. Override production's display:none + ≥1400px centring (this lives
   in the lockup at all widths); the divider is a hairline between the two
   marks. Hidden on mobile, where the wordmark collapses and the drawer carries
   the school logo instead. */
body[data-skin="reader"] .header-cobrand-divider{
  flex:0 0 auto; align-self:center; width:1px; height:20px; background:var(--border-light);
}
/* hide the logo in its injected mid-header spot so it never flashes centre then
   jumps left — only show it once the harness has moved it into the lockup */
body[data-skin="reader"] .header-school-logo{ display:none !important; }
body[data-skin="reader"] .header-brand .header-school-logo{
  display:block !important; height:22px; width:auto; max-width:130px;
  object-fit:contain; border-radius:4px; flex:0 0 auto; align-self:center; margin:0;
}
@media (max-width:960px){
  body[data-skin="reader"] .header-brand .header-school-logo,
  body[data-skin="reader"] .header-cobrand-divider{ display:none !important; }
}
/* FIX a real bug: base CSS runs `animation: page-enter ... forwards` on <body>,
   whose final keyframe is transform:translateY(0). A non-none transform on an
   ancestor makes position:fixed resolve against THAT element, not the viewport
   — so the bug FAB / tour / replay get flung to the document bottom on long
   pages. Re-do the entrance as a transform-free fade so fixed elements pin to
   the viewport. (Production should drop `forwards` / the transform keyframe.) */
@keyframes sv-page-enter-fade{ from{ opacity:0; } to{ opacity:1; } }
body[data-skin="reader"]{ animation:sv-page-enter-fade .3s ease-out both !important; }
/* unit + lesson context: hierarchy, not one grey smear. Unit NAME is the
   readable anchor (normal case); lesson counter is a small muted detail after
   a hairline divider. */
body[data-skin="reader"] .header-unit-label{
  font-family:var(--font-ui); text-transform:none; letter-spacing:0;
  font-size:.92rem; font-weight:600; color:var(--text-primary);
  background:none; padding:0; border-radius:0;
}
body[data-skin="reader"] .header-lesson-label{
  font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.1em;
  font-size:.7rem; font-weight:600; color:var(--text-muted);
  background:none; padding:0; border-radius:0;
  display:inline-flex; align-items:center; white-space:nowrap;
}
/* DIVIDER HIERARCHY (Tom, 14 Jun): BIG (1px×22px) separates the header's four
   sections — logo │ unit-title │ wayfinding │ prev-next; THIN (1px×13px) divides
   WITHIN a section (unit↔lesson, and between the wayfinding links). The
   unit↔lesson divider was a heavy 2px — demote it to the thin within-section one. */
body[data-skin="reader"] .header-lesson-label::before{
  content:""; display:inline-block; width:1px; height:13px; margin-right:.65rem;
  border-radius:0; background:var(--border-light);
}
/* BIG divider to the LEFT of the unit title (between the logo and the unit) */
body[data-skin="reader"] .header-pills{ position:relative; padding-left:1.15rem; }
body[data-skin="reader"] .header-pills::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:22px; background:var(--border-light);
}

/* nav: clean editorial text links (the empty boxes were the "plain/weird"
   problem) that light up in the unit colour with an underline-grow on hover.
   Prev/Next grouped off with a hairline; Next is the one solid unit-colour
   chip — the single primary action worth the colour. */
body[data-skin="reader"] .header-nav{ gap:.4rem; align-items:center; }
body[data-skin="reader"] .header-nav a{
  font-family:var(--font-ui); font-size:.88rem; font-weight:600;
  color:var(--text-secondary); background:none; border:none; border-radius:0;
  padding:.4em .5em; position:relative;
}
body[data-skin="reader"] .header-nav a::after{
  content:""; position:absolute; left:.5em; right:.5em; bottom:.16em; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left center;
  transition:transform .18s ease;
}
body[data-skin="reader"] .header-nav a:hover{ background:none; color:var(--accent); }
body[data-skin="reader"] .header-nav a:hover::after{ transform:scaleX(1); }
/* THIN hairline between the wayfinding links (not before Home, not on the
   sequential prev/next which carry the .nav-lesson-pill class) */
body[data-skin="reader"] .header-nav a:not(:first-child):not(.nav-lesson-pill)::before{
  content:""; position:absolute; left:-.22em; top:50%; transform:translateY(-50%);
  width:1px; height:13px; background:var(--border-light);
}
/* BIG divider to the LEFT of Home — the section break from the unit title */
body[data-skin="reader"] .header-nav a:first-child{ margin-left:.55rem; padding-left:1.1rem; }
body[data-skin="reader"] .header-nav a:first-child::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:22px; background:var(--border-light);
}
/* one colour voice — no multicolour nav icons */
body[data-skin="reader"] .header-nav a .nav-icon{ color:var(--text-muted) !important; }
body[data-skin="reader"] .header-nav a:hover .nav-icon{ color:var(--accent) !important; }
/* prev/next carry the .nav-lesson-pill class — strip the chip back to text,
   and lay them out as flex so a refined SVG arrow sits beside the label */
body[data-skin="reader"] .header-nav a.nav-lesson-pill{
  display:inline-flex; align-items:center; gap:.4em;
  background:none; border:none; color:var(--text-secondary); font-weight:600;
}
body[data-skin="reader"] .header-nav a.nav-lesson-pill:hover{ background:none; color:var(--accent); }
body[data-skin="reader"] .header-nav a .nav-arrow{ flex:0 0 auto; }
/* BIG divider before Previous — the section break from the wayfinding links */
body[data-skin="reader"] .header-nav a#nav-prev-lesson{
  margin-left:.55rem; padding-left:1.1rem;
}
body[data-skin="reader"] .header-nav a#nav-prev-lesson::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:22px; background:var(--border-light);
}
/* Next = the single solid unit-colour primary */
body[data-skin="reader"] .header-nav a#nav-next-lesson{
  background:var(--accent); color:#fff; border-radius:7px; padding:.42em .9em;
}
body[data-skin="reader"] .header-nav a#nav-next-lesson::after{ display:none; }
body[data-skin="reader"] .header-nav a#nav-next-lesson:hover{ color:#fff; filter:brightness(1.08); }
body[data-skin="reader"].dark-mode .header-nav a#nav-next-lesson{ color:#181614; }
body[data-skin="reader"] .scroll-progress{ height:3px; }

/* ---- a11y toolbar: a DEFINED utility band (Tom: was too undefined as a
   bare strip). Container reads as one grouped object — faint tint, flat
   hairline, a leading caps label naming its purpose — while the controls
   inside stay quiet (no re-pilling: definition comes from the band). ---- */
body[data-skin="reader"] .a11y-toolbar{
  background:color-mix(in srgb,var(--accent) 4%,var(--bg-card));
  border:1px solid var(--border-light); border-radius:4px;
  padding:.5rem .9rem; gap:.4rem; margin:.2rem 0 2.1rem;
  font-family:var(--font-ui); justify-content:space-between;
  /* one row, always: when the column is narrower than the controls the band
     scrolls sideways rather than wrapping onto two lines (Tom, 8 Sep 2026) */
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
}
body[data-skin="reader"] .a11y-toolbar::-webkit-scrollbar{ display:none; }
body[data-skin="reader"] .a11y-toolbar > *{ flex:none; }
/* "Reading" = a leading section label; the divider after it is one of the
   evenly-spaced .a11y-divider items (normalised by the harness) */
body[data-skin="reader"] .a11y-toolbar::before{
  content:"Reading"; align-self:center;
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.11em;
  color:var(--text-muted);
}
body[data-skin="reader"] .a11y-btn{
  background:transparent; border:none; color:var(--text-secondary);
  font-weight:600; font-size:.8rem; border-radius:7px; padding:.34rem .6rem;
}
body[data-skin="reader"] .a11y-btn:hover{
  background:color-mix(in srgb,var(--accent) 7%,var(--bg-card)); color:var(--text-primary);
}
/* pressed = tinted groove, not a solid blob */
body[data-skin="reader"] .a11y-btn[aria-pressed="true"]{
  background:color-mix(in srgb,var(--accent) 13%,var(--bg-card));
  color:var(--accent); box-shadow:inset 0 1px 2px rgba(29,28,26,.06);
}
/* FOCUS MODE — article paragraphs ease in/out by distance from the reading
   line (opacity set per-scroll by the harness); the transition damps it so the
   gradient glides as you scroll rather than stepping */
body[data-skin="reader"].sv-focus-mode #lesson-page .study-notes > *{
  transition:opacity .26s ease, filter .26s ease;
  will-change:opacity, filter;
}
/* while a frosting modal is open, drop Focus mode's per-paragraph blur so it
   doesn't COMPOUND with the page-content blur (which already blurs #lesson-page
   uniformly) — otherwise focus-dimmed paragraphs would read as extra-blurred. */
body[data-skin="reader"].sv-modal-open #lesson-page .study-notes > *{
  filter:none !important; opacity:1 !important; will-change:auto !important;
}

/* legacy separator spans are inconsistent; the harness removes them and
   inserts a .a11y-divider before each control, so space-between centres a
   divider in every gap evenly */
body[data-skin="reader"] .a11y-separator{ display:none; }
body[data-skin="reader"] .a11y-divider{
  flex:0 0 auto; align-self:center; width:1px; height:20px; background:var(--border-light);
}
/* invisible terminus: space-between pins the LAST control (Overlay) to the right
   edge; this 1px no-paint item gives it an equal gap on the right so it centres
   between its divider and the bar's end, like every inner control */
body[data-skin="reader"] .a11y-bar-end{ flex:0 0 1px; align-self:center; height:20px; }
body[data-skin="reader"] .a11y-overlay-label{
  font-family:var(--font-ui); font-weight:600; font-size:.8rem; color:var(--text-muted);
}
/* below ~720px the band wrapped onto two lines; one row that scrolls sideways
   reads as one object, which is the point of the band (Tom, 8 Sep 2026) */
/* ...and on phones the row scrolled sideways with nothing to say so — the last
   control sat cut in half and the band looked broken (Tom, 12 Sep 2026). Now the
   five controls drop their labels (icons keep their titles; the label stays for
   screen readers) and sit evenly across one row, nothing hidden off the edge. */
/* Tablets (and the welcome page's tablet embed) keep the two-column lesson, which leaves
   the band about 600px wide: too narrow for five labelled controls, so the last one sat
   cut off at the edge. The compact icon row applies from 1100px down (Tom, 19 Sep 2026). */
@media (max-width:1100px){
  body[data-skin="reader"] .a11y-toolbar{ flex-wrap:nowrap; justify-content:space-evenly; overflow:visible; gap:0; padding:.35rem .3rem; }
  body[data-skin="reader"] .a11y-toolbar > *{ flex:none; }
  body[data-skin="reader"] .a11y-toolbar .a11y-divider:first-child,
  body[data-skin="reader"] .a11y-bar-end{ display:none; }
  body[data-skin="reader"] .a11y-toolbar .a11y-btn{ padding:.5rem .55rem; gap:0; position:relative; }
  body[data-skin="reader"] .a11y-toolbar .a11y-btn > span:not(.a11y-overlay-dot){
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  body[data-skin="reader"] .a11y-toolbar .a11y-btn svg{ width:20px; height:20px; }
}
@media (max-width:720px){
  body[data-skin="reader"] .a11y-toolbar{ flex-wrap:nowrap; justify-content:space-evenly; overflow:visible; gap:0; padding:.35rem .3rem; }
  body[data-skin="reader"] .a11y-toolbar > *{ flex:none; }
  body[data-skin="reader"] .a11y-toolbar::before{ display:none; }
  body[data-skin="reader"] .a11y-toolbar .a11y-divider:first-child,
  body[data-skin="reader"] .a11y-bar-end{ display:none; }
  body[data-skin="reader"] .a11y-toolbar .a11y-btn{ padding:.5rem .55rem; gap:0; }
  body[data-skin="reader"] .a11y-toolbar .a11y-btn > span:not(.a11y-overlay-dot){
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  body[data-skin="reader"] .a11y-toolbar .a11y-btn svg{ width:20px; height:20px; }
  body[data-skin="reader"] .a11y-toolbar .a11y-btn{ position:relative; }
}

/* FONT SIZE A-/A+ : the buttons toggle body.font-size-* classes that only
   change body's px font-size — which the reader skin's rem-based reading size
   ignores. Re-map each step to --read-size so the text actually scales. */
body[data-skin="reader"].font-size-down-1{ --read-size:1.06rem; }
body[data-skin="reader"].font-size-up-1{ --read-size:1.36rem; }
body[data-skin="reader"].font-size-up-2{ --read-size:1.5rem; }
/* swatches stay multicolour — they are functional colour samples */
body[data-skin="reader"] .a11y-overlay{ border:2px solid var(--border-light); }
body[data-skin="reader"] .a11y-overlay.active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--bg-card), 0 0 0 3.5px var(--accent);
}

/* OVERLAY: button + popover + intensity (Tom, 13 Jun). The shared pastels
   (top of file) are too weak to help anyone who needs a tint, so the reader
   uses DEEPER tints and scales them with --overlay-intensity (the ::after
   opacity, set by the harness slider). Deeper colour + partial opacity gives
   real headroom: the old pastel look now sits around the slider's midpoint,
   and full intensity is genuinely strong. Same specificity as the shared
   rules but later in the file, so these win. */
body[data-skin="reader"].overlay-yellow::after,
body[data-skin="reader"].overlay-blue::after,
body[data-skin="reader"].overlay-pink::after,
body[data-skin="reader"].overlay-green::after,
body[data-skin="reader"].overlay-peach::after,
body[data-skin="reader"].overlay-aqua::after{ opacity:var(--overlay-intensity,.45); }
body[data-skin="reader"].overlay-yellow::after{ background:#fde047; }
body[data-skin="reader"].overlay-blue::after{   background:#93c5fd; }
body[data-skin="reader"].overlay-pink::after{    background:#f9a8d4; }
body[data-skin="reader"].overlay-green::after{   background:#86efac; }
body[data-skin="reader"].overlay-peach::after{   background:#fdba74; }
body[data-skin="reader"].overlay-aqua::after{    background:#67e8f9; }

/* the trigger: a normal a11y control + a small dot showing the live colour */
body[data-skin="reader"] .a11y-overlay-toggle{ display:inline-flex; align-items:center; gap:.42rem; }
body[data-skin="reader"] .a11y-overlay-toggle.on{
  background:color-mix(in srgb,var(--accent) 13%,var(--bg-card)); color:var(--accent);
}
body[data-skin="reader"] .a11y-overlay-dot{
  width:11px; height:11px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
/* popover sits ABOVE the tint sheet (z 2147483000) so the chips read true */
body[data-skin="reader"] .a11y-overlay-pop{
  overflow-y:auto; overscroll-behavior:contain;
  position:fixed; z-index:2147483600; width:288px; box-sizing:border-box;
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:4px;
  box-shadow:0 1px 2px rgba(29,28,26,.05), 0 22px 44px -22px rgba(29,28,26,.34);
  padding:.95rem; display:flex; flex-direction:column; gap:.85rem;
  font-family:var(--font-ui);
}
/* the display:flex above out-specifies the UA [hidden]{display:none}, so the
   hidden attribute alone never closed it — restore it with matching specificity */
body[data-skin="reader"] .a11y-overlay-pop[hidden]{ display:none; }
body[data-skin="reader"].dark-mode .a11y-overlay-pop{
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 22px 44px -22px rgba(0,0,0,.6);
}
body[data-skin="reader"] .a11y-overlay-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
body[data-skin="reader"] .a11y-overlay-pop .a11y-overlay{
  width:28px; height:28px; border-radius:50%; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
body[data-skin="reader"] .a11y-overlay-pop .a11y-overlay svg{ width:15px; height:15px; color:var(--text-muted); }
/* intensity row: caps label + accent range */
body[data-skin="reader"] .a11y-overlay-intensity{
  display:flex; align-items:center; gap:.7rem; padding-top:.15rem;
  border-top:1px solid var(--border-lighter);
}
body[data-skin="reader"] .a11y-overlay-intensity span{
  font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted);
  flex:0 0 auto;
}
body[data-skin="reader"] .a11y-overlay-intensity input[type="range"]{
  flex:1 1 auto; -webkit-appearance:none; appearance:none; height:4px; border-radius:3px;
  background:var(--border-light); cursor:pointer; margin:0;
}
body[data-skin="reader"] .a11y-overlay-intensity input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--accent); border:2px solid var(--bg-card); box-shadow:0 1px 3px rgba(29,28,26,.3);
}
body[data-skin="reader"] .a11y-overlay-intensity input[type="range"]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-card);
}

/* READ YOUR WAY (Tom, 13 Jun) — text size + spacing + reading-font picker in one
   popover, replacing the inline A-/A+ and the OpenDyslexic toggle. Per the
   dyslexia-font report: deprecate OpenDyslexic; offer Atkinson Hyperlegible +
   Andika (both SIL OFL, static weights); and bundle ADJUSTABLE spacing — the
   real crowding lever — rather than a font swap alone. Default font stays
   Literata; left-align + paragraph gaps + measure are already baked reader
   defaults so they need no control. */
body[data-skin="reader"] .a11y-reading-toggle{ display:inline-flex; align-items:center; gap:.42rem; }
body[data-skin="reader"] .a11y-reading-toggle.on{
  background:color-mix(in srgb,var(--accent) 13%,var(--bg-card)); color:var(--accent);
}
body[data-skin="reader"] .a11y-reading-toggle svg{ width:17px; height:17px; }
body[data-skin="reader"] .a11y-reading-pop{
  position:fixed; z-index:2147483600; width:282px; box-sizing:border-box;
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:4px;
  box-shadow:0 1px 2px rgba(29,28,26,.05), 0 22px 44px -22px rgba(29,28,26,.34);
  padding:.4rem 1.05rem .9rem; font-family:var(--font-ui);
}
body[data-skin="reader"] .a11y-reading-pop[hidden]{ display:none; }
body[data-skin="reader"].dark-mode .a11y-reading-pop{
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 22px 44px -22px rgba(0,0,0,.6);
}
body[data-skin="reader"] .a11y-rd-section{ padding:.75rem 0; }
body[data-skin="reader"] .a11y-rd-section + .a11y-rd-section{ border-top:1px solid var(--border-lighter); }
body[data-skin="reader"] .a11y-rd-label{
  display:block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-muted); margin-bottom:.55rem;
}
/* text-size: the relocated A-/A+ group, as two equal segmented buttons */
body[data-skin="reader"] .a11y-reading-pop .a11y-font-size-group{ display:flex; gap:.45rem; }
body[data-skin="reader"] .a11y-reading-pop .a11y-font-size-group .a11y-btn{
  flex:1 1 0; border:1px solid var(--border-light); border-radius:8px; padding:.42rem 0;
  text-align:center; color:var(--text-secondary);
}
body[data-skin="reader"] .a11y-reading-pop .a11y-font-size-group .a11y-btn:hover{
  background:color-mix(in srgb,var(--accent) 7%,var(--bg-card)); color:var(--text-primary);
}
/* spacing slider */
body[data-skin="reader"] .a11y-rd-slider{
  display:block; width:100%; -webkit-appearance:none; appearance:none; height:4px; border-radius:3px;
  background:var(--border-light); cursor:pointer; margin:.1rem 0 0;
}
body[data-skin="reader"] .a11y-rd-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--accent); border:2px solid var(--bg-card); box-shadow:0 1px 3px rgba(29,28,26,.3);
}
body[data-skin="reader"] .a11y-rd-slider::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-card);
}
/* reading-font options: full-width rows, each name previewed in its own face */
body[data-skin="reader"] .a11y-rd-fonts{ display:flex; flex-direction:column; gap:.4rem; }
body[data-skin="reader"] .a11y-rd-font{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  border:1px solid var(--border-light); border-radius:9px; padding:.5rem .7rem;
  background:var(--bg-card); color:var(--text-primary); font-size:1rem; line-height:1.1;
  cursor:pointer; text-align:left;
}
body[data-skin="reader"] .a11y-rd-font:hover{ background:color-mix(in srgb,var(--accent) 6%,var(--bg-card)); }
body[data-skin="reader"] .a11y-rd-font.active{
  border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--bg-card));
}
body[data-skin="reader"] .a11y-rd-font .a11y-rd-check{ color:var(--accent); opacity:0; font-size:.9rem; }
body[data-skin="reader"] .a11y-rd-font.active .a11y-rd-check{ opacity:1; }
body[data-skin="reader"] .a11y-rd-font small{
  display:block; font-family:var(--font-ui); font-size:.66rem; font-weight:600; letter-spacing:.04em;
  color:var(--text-muted); margin-top:.15rem;
}
/* reset link — clears size, spacing and font back to the StudyVault defaults */
body[data-skin="reader"] .a11y-rd-reset{
  display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%;
  margin-top:.55rem; padding:.6rem; border:none; border-top:1px solid var(--border-lighter);
  background:transparent; font-family:var(--font-ui); font-size:.78rem; font-weight:600;
  color:var(--text-muted); cursor:pointer; border-radius:0;
}
body[data-skin="reader"] .a11y-rd-reset:hover{ color:var(--accent); }
body[data-skin="reader"] .a11y-rd-reset svg{ width:14px; height:14px; }

/* ---- foot prev/next cards ---- */
body[data-skin="reader"] .lesson-nav{ border-top:1px solid var(--border-light); }
body[data-skin="reader"] .lesson-nav-link{
  border:1px solid var(--border-light); border-radius:4px; background:var(--bg-card); gap:.3rem;
}
body[data-skin="reader"] .lesson-nav-link:hover{
  border-color:var(--accent);
  box-shadow:0 1px 2px rgba(29,28,26,.05), 0 14px 28px -22px rgba(29,28,26,.2);
}
body[data-skin="reader"] .lesson-nav-direction{
  font-family:var(--font-ui); font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.11em; color:var(--text-muted);
}
body[data-skin="reader"] .lesson-nav-title{
  font-family:var(--font-head); font-weight:600; font-size:1.05rem;
  color:var(--text-primary); letter-spacing:-.01em;
}

/* ---- Quick Quiz modal internals ---- */
body[data-skin="reader"] .kc-modal{ border:1px solid var(--border-light); border-radius:4px; }
body[data-skin="reader"] .kc-header{ border-bottom-color:var(--border-light); }
body[data-skin="reader"] .kc-title{ font-family:var(--font-head); font-size:1.08rem; letter-spacing:-.01em; }
body[data-skin="reader"] .kc-step{ font-family:var(--font-ui); font-variant-numeric:tabular-nums; }
body[data-skin="reader"] .kc-question{ font-family:var(--font-read); font-size:1.05rem; line-height:1.5; }
body[data-skin="reader"] .kc-option{
  font-family:var(--font-ui); font-size:.88rem; border:1px solid var(--border-light);
  border-radius:7px; padding:.65rem .8rem;
}
body[data-skin="reader"] .kc-option:hover:not(.locked){
  border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,var(--bg-card));
}
body[data-skin="reader"] .kc-option.selected{
  border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--bg-card));
}
/* right/wrong stay semantic — just calmer, on-system tints */
body[data-skin="reader"] .kc-option.correct,
body[data-skin="reader"] .kc-fill-btn.correct{
  border-color:#3e7d58; background:color-mix(in srgb,#3e7d58 10%,var(--bg-card)); color:#2c5940;
}
body[data-skin="reader"] .kc-option.incorrect,
body[data-skin="reader"] .kc-fill-btn.incorrect{
  border-color:#a04848; background:color-mix(in srgb,#a04848 9%,var(--bg-card)); color:#7c3434;
}
body[data-skin="reader"] .kc-blank.correct{ border-color:#3e7d58; color:#2c5940; }
body[data-skin="reader"] .kc-blank.incorrect{ border-color:#a04848; color:#7c3434; }
body[data-skin="reader"] .kc-fill-sentence{ font-family:var(--font-read); font-size:1rem; }
body[data-skin="reader"] .kc-fill-btn{ font-family:var(--font-ui); border:1px solid var(--border-light); }
body[data-skin="reader"] .kc-fill-btn.selected{
  border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--bg-card));
}
body[data-skin="reader"] .kc-btn{ font-family:var(--font-ui); border-radius:7px; font-size:.88rem; }
body[data-skin="reader"] .kc-btn:hover{ transform:none; }
body[data-skin="reader"] .kc-btn:active{ transform:scale(.97); }
body[data-skin="reader"] .kc-btn-secondary{
  background:var(--bg-card); border:1px solid var(--border-light); color:var(--text-secondary);
}
body[data-skin="reader"] .kc-btn-secondary:hover{
  background:var(--bg-card); border-color:var(--accent); color:var(--accent);
}
body[data-skin="reader"] .kc-result-score{
  font-family:var(--font-head); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
body[data-skin="reader"] .kc-result-label,
body[data-skin="reader"] .kc-result-msg{ font-family:var(--font-ui); }

/* ---- Flashcards modal internals (overlay frosts: it tests you) ---- */
/* frost via content-blur (see the .sv-modal-open rule near .pq-backdrop) — the
   flashcard overlay keeps only its base rgba(0,0,0,.6) scrim, no backdrop-filter */
body[data-skin="reader"] .fc-modal{ border:1px solid var(--border-light); border-radius:4px; }
body[data-skin="reader"] .fc-modal-header{ border-bottom-color:var(--border-light); }
body[data-skin="reader"] .fc-modal-title{ font-family:var(--font-head); font-size:1.08rem; letter-spacing:-.01em; }
body[data-skin="reader"] .fc-modal-count,
body[data-skin="reader"] .fc-session-counter,
body[data-skin="reader"] .fc-session-skip{ font-family:var(--font-ui); }
body[data-skin="reader"] .fc-card-face{
  border:1px solid var(--border-light); border-radius:4px;
  box-shadow:0 1px 2px rgba(29,28,26,.05), 0 14px 28px -22px rgba(29,28,26,.18);
}
body[data-skin="reader"] .fc-card-back{ background:color-mix(in srgb,var(--accent) 5%,var(--bg-card)); }
body[data-skin="reader"] .fc-card-badge{
  font-family:var(--font-ui);
  background:color-mix(in srgb,var(--accent) 12%,var(--bg-card)); color:var(--accent);
}

/* ---- practice card internals (they live in the pq-modal now) ---- */
body[data-skin="reader"] .practice-intro{ font-family:var(--font-ui); font-size:.95rem; }
body[data-skin="reader"] .practice-question-card{ border-radius:4px; padding:1.35rem 1.5rem; }
body[data-skin="reader"] .practice-question-type{
  font-family:var(--font-ui);
  background:color-mix(in srgb,var(--accent) 12%,var(--bg-card)); color:var(--accent);
}
body[data-skin="reader"] .practice-new-btn{ font-family:var(--font-ui); }
body[data-skin="reader"] .practice-new-btn:hover{
  background:color-mix(in srgb,var(--accent) 6%,transparent);
}
body[data-skin="reader"] .practice-question-text{
  font-family:var(--font-read); font-size:1.12rem; line-height:1.55;
}
body[data-skin="reader"] .practice-mark-scheme{
  font-family:var(--font-ui);
  background:color-mix(in srgb,var(--accent) 6%,var(--bg-card)); border-radius:var(--radius);
}
body[data-skin="reader"] .practice-answer-label{ font-family:var(--font-ui); }
body[data-skin="reader"] .practice-answer-input{
  font-family:var(--font-ui); font-size:.98rem; border-radius:var(--radius);
}
body[data-skin="reader"] .practice-answer-input:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
body[data-skin="reader"] .practice-btn{ font-family:var(--font-ui); border-radius:7px; }
body[data-skin="reader"] .practice-btn:hover{ transform:none; }
body[data-skin="reader"] .practice-btn--send{
  background:color-mix(in srgb,var(--accent) 10%,var(--bg-card)); color:var(--accent);
}
body[data-skin="reader"] .practice-btn--send:hover{
  background:color-mix(in srgb,var(--accent) 15%,var(--bg-card));
}
body[data-skin="reader"] .practice-ai-feedback{
  border:1px solid var(--border-light); border-radius:var(--radius); font-family:var(--font-ui);
}
body[data-skin="reader"] .practice-ai-feedback-title{ font-family:var(--font-ui); }

/* ---- glossary popups ---- */
body[data-skin="reader"] .term-popup{ font-family:var(--font-ui); border-radius:8px; }

/* ---- bug FAB: accent blob -> quiet corner control ---- */
body[data-skin="reader"] .bugr-fab{
  position:fixed !important;   /* something resets it to static -> falls into flow */
  background:var(--bg-card); color:var(--text-muted);
  border:1px solid var(--border-light);
  box-shadow:0 1px 2px rgba(29,28,26,.05), 0 8px 20px -12px rgba(29,28,26,.2);
}
body[data-skin="reader"] .bugr-fab:hover{
  filter:none; color:var(--accent); border-color:var(--accent);
}
/* REPORT-A-PROBLEM MODAL (Tom, 14 Jun) — reskin the legacy bug modal to the
   reader tokens: token-driven surface (so it works in dark mode too), Schibsted
   headline + Source-Serif gone, subject accent instead of the red bug theme,
   softer-square radii. */
body[data-skin="reader"] .bugr-modal{
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:4px;
  box-shadow:0 1px 2px rgba(29,28,26,.06), 0 24px 48px -22px rgba(29,28,26,.34);
}
body[data-skin="reader"].dark-mode .bugr-modal{ box-shadow:0 1px 2px rgba(0,0,0,.4), 0 24px 48px -22px rgba(0,0,0,.6); }
body[data-skin="reader"] .bugr-header{ border-bottom-color:var(--border-light); }
body[data-skin="reader"] .bugr-header .bugr-icon{
  background:color-mix(in srgb,var(--accent) 14%,var(--bg-card)); color:var(--accent); border-radius:var(--radius-sm);
}
body[data-skin="reader"] .bugr-header h2{ font-family:var(--font-head); color:var(--text-primary); }
body[data-skin="reader"] .bugr-header h2 small{ font-family:var(--font-ui); color:var(--text-muted); }
body[data-skin="reader"] .bugr-close{ color:var(--text-muted); }
body[data-skin="reader"] .bugr-close:hover{ background:color-mix(in srgb,var(--accent) 8%,var(--bg-card)); color:var(--accent); }
body[data-skin="reader"] .bugr-field > .bugr-label{ font-family:var(--font-ui); color:var(--text-secondary); }
body[data-skin="reader"] .bugr-field .bugr-meta{ color:var(--text-muted); }
body[data-skin="reader"] .bugr-field textarea,
body[data-skin="reader"] .bugr-field input[type="email"]{
  font-family:var(--font-ui); background:var(--bg-card); color:var(--text-primary);
  border:1px solid var(--border-light); border-radius:var(--radius-sm);
}
body[data-skin="reader"] .bugr-field textarea::placeholder,
body[data-skin="reader"] .bugr-field input::placeholder{ color:var(--text-muted); }
body[data-skin="reader"] .bugr-field textarea:focus,
body[data-skin="reader"] .bugr-field input:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
body[data-skin="reader"] .bugr-page,
body[data-skin="reader"] .bugr-screenshot{
  background:color-mix(in srgb,var(--accent) 5%,var(--bg-card)); border-radius:var(--radius-sm); color:var(--text-secondary);
}
body[data-skin="reader"] .bugr-screenshot input[type="checkbox"]{ accent-color:var(--accent); }
body[data-skin="reader"] .bugr-screenshot label{ color:var(--text-secondary); font-family:var(--font-ui); }
body[data-skin="reader"] .bugr-screenshot small{ color:var(--text-muted); }
body[data-skin="reader"] .bugr-footer{ border-top-color:var(--border-light); background:color-mix(in srgb,var(--accent) 3%,var(--bg-card)); }
body[data-skin="reader"] .bugr-msg{ font-family:var(--font-ui); color:var(--text-muted); }
body[data-skin="reader"] .bugr-btn{ font-family:var(--font-ui); border-radius:var(--radius-sm); }
body[data-skin="reader"] .bugr-btn-primary{ background:var(--accent); color:#fff; }
body[data-skin="reader"].dark-mode .bugr-btn-primary{ color:#181614; }
body[data-skin="reader"] .bugr-btn-primary:hover:not(:disabled){ background:var(--accent); filter:brightness(1.08); }
body[data-skin="reader"] .bugr-btn-ghost{
  background:var(--bg-card); border:1px solid var(--border-light); color:var(--text-secondary);
}
body[data-skin="reader"] .bugr-btn-ghost:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); background:var(--bg-card); }

/* ---- cookie banner ---- */
body[data-skin="reader"] .cookie-banner p,
body[data-skin="reader"] .cookie-btn{ font-family:var(--font-ui); }
body[data-skin="reader"] .cookie-banner-inner{ border-radius:10px 10px 0 0; }
body[data-skin="reader"] .cookie-btn--accept{ background:var(--text-primary); color:var(--bg-card); }

/* ---- READING MEASURE — now enforced by the capped article COLUMN (see
   .lesson-body grid above) so every article element shares one width ---- */

/* ---- collapsibles: solid subject-colour headers (Tom — chunking) ---- */
body[data-skin="reader"] .collapsible{
  border:1px solid var(--border-light); border-radius:var(--radius);
}
body[data-skin="reader"] .collapsible-toggle{
  background:var(--accent); color:#fff;
  font-family:var(--font-ui); font-size:1rem; font-weight:600;
}
body[data-skin="reader"] .collapsible-toggle:hover{ filter:brightness(1.07); }
body[data-skin="reader"] .collapsible-hint{ color:rgba(255,255,255,.75); }
body[data-skin="reader"] .collapsible-icon{ color:rgba(255,255,255,.9); }
/* revision-tip lightbulb + down arrow must sit SIDE BY SIDE on the solid
   header (base CSS stacked them — arrow vanished under the bulb). Arrow stays
   at the far right; bulb tucks just left of it as a white chip. */
body[data-skin="reader"] .collapsible > .revision-tip-btn{
  right:2.9rem; top:.55rem; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
body[data-skin="reader"] .collapsible:has(> .revision-tip-btn) .collapsible-toggle-right{
  margin-right:0;
}
/* ...and shift the "Tap to expand" hint left of the bulb too — the bulb sits
   in the flow gap between the hint and the arrow, so without this it covers the
   hint's right half ("…PAND"). */
body[data-skin="reader"] .collapsible:has(> .revision-tip-btn) .collapsible-hint{
  margin-right:2rem;
}

/* ---- mid-article figure (demo) — relief for the text column ----
   A diagram must show WHOLE (never cropped) and at a sensible size, so it's
   capped + centred and shown at its natural aspect (no object-fit:cover,
   which was clipping the title/captions top and bottom). */
body[data-skin="reader"] .sv-article-figure{
  margin:2.4rem auto; max-width:620px; border-radius:var(--radius);
}
body[data-skin="reader"] .sv-article-figure img{
  display:block; width:100%; height:auto;
  border:1px solid var(--border-light); border-radius:var(--radius);
}
body[data-skin="reader"] .sv-article-figure figcaption{
  font-family:var(--font-read); font-style:italic; font-size:.9rem;
  color:var(--text-muted); margin-top:.6rem; line-height:1.5;
}

/* ---- legal footer (beta banner already handled as a quiet line below) ---- */
body[data-skin="reader"] .sv-legal-footer{ border-top:1px solid var(--border-light); }
body[data-skin="reader"] .sv-legal-footer p{ font-family:var(--font-ui); }

/* ================= FEATURE TOUR — clean first-visit spotlight =================
   A dimmed page with a soft spotlight on one feature at a time + a small
   caption card. Replaces the old coachmark clutter. Subject-accent throughout. */
body[data-skin="reader"] .sv-tour-block{ position:fixed; inset:0; z-index:100000; }
/* the whole spotlight cross-fades between steps: it fades out, relocates while
   invisible (no visible glide/scroll), then fades back in — one coordinated
   motion, so it can't stutter mid-stage */
body[data-skin="reader"] .sv-tour-spot{
  position:fixed; z-index:100000; border-radius:4px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(20,15,10,.62);
  opacity:1; transition:opacity .2s ease;
}
body[data-skin="reader"] .sv-tour-card{
  position:fixed; z-index:100001; width:300px; max-width:calc(100vw - 28px);
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:4px;
  box-shadow:0 24px 60px rgba(0,0,0,.32); padding:1.1rem 1.2rem 1rem;
  font-family:var(--font-ui);
  opacity:1; transition:opacity .16s ease;
}
body[data-skin="reader"] .sv-tour-kicker{
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--accent); margin-bottom:.4rem;
}
body[data-skin="reader"] .sv-tour-title{
  font-family:var(--font-head); font-size:1.15rem; font-weight:600; letter-spacing:-.01em;
  color:var(--text-primary); margin-bottom:.4rem;
}
body[data-skin="reader"] .sv-tour-body{
  font-family:var(--font-read); font-size:.95rem; line-height:1.55; color:var(--text-secondary); margin:0 0 1rem;
}
body[data-skin="reader"] .sv-tour-foot{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
body[data-skin="reader"] .sv-tour-dots{ display:flex; gap:.35rem; }
body[data-skin="reader"] .sv-tour-dots i{ width:6px; height:6px; border-radius:50%; background:var(--border-light); display:block; transition:background .2s; }
body[data-skin="reader"] .sv-tour-dots i.on{ background:var(--accent); }
body[data-skin="reader"] .sv-tour-btns{ display:flex; gap:.55rem; align-items:center; }
body[data-skin="reader"] .sv-tour-skip,
body[data-skin="reader"] .sv-tour-back{ background:none; border:none; font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; padding:.2rem .1rem; }
body[data-skin="reader"] .sv-tour-skip{ color:var(--text-muted); }
body[data-skin="reader"] .sv-tour-back{ color:var(--text-secondary); }
body[data-skin="reader"] .sv-tour-skip:hover,
body[data-skin="reader"] .sv-tour-back:hover{ color:var(--text-primary); }
body[data-skin="reader"] .sv-tour-next{
  background:var(--accent); color:#fff; border:none; border-radius:7px; padding:.42rem .95rem;
  font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; transition:filter .15s, transform .12s;
}
body[data-skin="reader"] .sv-tour-next:hover{ filter:brightness(1.08); }
body[data-skin="reader"] .sv-tour-next:active{ transform:scale(.97); }
body[data-skin="reader"].dark-mode .sv-tour-next{ color:#181614; }
/* static replica of the simplify/explain/tutor menu, shown for the tour step */
body[data-skin="reader"] .sv-tour-demo-menu{
  position:fixed; z-index:100002; display:flex; gap:.5rem; padding:.42rem .5rem;
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:999px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
body[data-skin="reader"] .sv-tour-demo-bubble{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--accent) 11%,var(--bg-card)); color:var(--accent);
}
body[data-skin="reader"] .sv-tour-demo-bubble svg{ width:18px; height:18px; }
/* persistent help/replay control — round FAB stacked above the bug FAB
   (bottom-right) so the two feedback/help affordances pair up */
body[data-skin="reader"] .sv-tour-replay{
  position:fixed; right:16px; bottom:74px; z-index:9980;
  width:44px; height:44px; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-card); color:var(--accent);
  border:1px solid var(--border-light); cursor:pointer;
  box-shadow:0 1px 2px rgba(29,28,26,.05), 0 8px 20px -12px rgba(29,28,26,.22);
  transition:color .2s, border-color .2s, transform .15s;
}
body[data-skin="reader"] .sv-tour-replay:hover{ border-color:var(--accent); transform:translateY(-1px); }
body[data-skin="reader"] .sv-tour-replay svg{ flex:0 0 auto; }
body[data-skin="reader"] .sv-tour-replay span{ display:none; }

/* UTILITY BUTTONS (Tom, 14 Jun) — bug + replay-tour embedded in the panel FLOW,
   under the video, as a squared side-by-side pair filling the freed space. The
   floating tutor dock is retired (the panel tutor tile covers "Ask the Tutor");
   the harness reclaims the bug if the dock tries to adopt it. */
body[data-skin="reader"] .tutor-dock{ display:none !important; }
/* hide the corner FABs on the lesson page until the harness moves them into the
   row (else the bug flashes in the corner first). Sibling selector matches them
   only at BODY level; once inside #lesson-page's row it stops matching. */
body[data-skin="reader"] #lesson-page ~ .bugr-fab,
body[data-skin="reader"] #lesson-page ~ .sv-tour-replay{ display:none !important; }
/* the row sits under the video; opacity-gate the reveal until both buttons are
   in (no lone-button flash) — opacity not display, so it reserves its space */
body[data-skin="reader"] .sv-utility-row{
  display:flex; gap:.7rem; margin-top:.9rem; opacity:0;
}
body[data-skin="reader"] .sv-utility-row.sv-util-ready{ opacity:1; }
/* squared with soft rounding (matches the tiles — the pill read as an AI tell);
   equal width filling the row; nowrap keeps each label on one line */
body[data-skin="reader"] .sv-utility-row .bugr-fab,
body[data-skin="reader"] .sv-utility-row .sv-tour-replay{
  position:static !important; inset:auto !important; margin:0 !important;
  flex:1 1 0; width:auto !important; height:auto !important; border-radius:var(--radius-sm);
  display:inline-flex !important; align-items:center; justify-content:center; gap:.45rem;
  padding:.62rem .5rem; white-space:nowrap; font-family:var(--font-ui); font-size:.82rem; font-weight:600;
  background:var(--bg-card); color:var(--text-secondary); border:1px solid var(--border-light);
  box-shadow:none; cursor:pointer; transition:color .2s, border-color .2s;
}
body[data-skin="reader"] .sv-utility-row .bugr-fab:hover,
body[data-skin="reader"] .sv-utility-row .sv-tour-replay:hover{
  color:var(--accent); border-color:var(--accent); transform:none; filter:none;
}
body[data-skin="reader"] .sv-utility-row .bugr-fab svg,
body[data-skin="reader"] .sv-utility-row .sv-tour-replay svg{ width:17px !important; height:17px !important; flex:0 0 auto; }
body[data-skin="reader"] .sv-utility-row .sv-tour-replay span{ display:inline !important; }

/* ================= READER DARK — warm-dark mapping of the v2 tokens =================
   body.dark-mode swaps the same variables the skin paints from; higher
   specificity than both body.dark-mode (style.css) and body[data-skin="reader"],
   so it wins without !important. The tinted fills (key facts, primary tiles,
   recall spine, exam tips) are color-mix() against these tokens and re-derive
   themselves automatically. */
body[data-skin="reader"].dark-mode{
  --bg-body:#181614; --bg-card:#211f1c;
  --text-primary:#ece9e4; --text-secondary:#b3aea6; --text-muted:#8a857c;
  --border-light:#36332e; --border-lighter:#2b2925;
  /* subject accents are muted mid-tones tuned for white — lift them for dark */
  --accent:color-mix(in srgb,var(--subject-accent,#566a72) 68%,#fff 32%);
  --accent-light:color-mix(in srgb,var(--accent) 14%,var(--bg-card));
  --accent-badge:color-mix(in srgb,var(--accent) 22%,var(--bg-card));
}
/* the audio switch's raised key is hardcoded white for light mode */
body[data-skin="reader"].dark-mode .audio-tab-indicator{
  background:#34312c; border-color:#454138;
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
}
body[data-skin="reader"].dark-mode .narration-play{ color:#181614; }
/* Irlen overlay + dark mode fix: html is transparent, so the browser propagates
   body's (dark) background to the page CANVAS — and a mix-blend-mode:multiply
   overlay composites against that phantom white canvas, NOT the real dark page.
   Result was the article washing out to light cream with pale, unreadable text
   (invisible in light mode, where phantom + real are both light). Painting the
   canvas explicitly stops the propagation, so the overlay multiplies over the
   true dark page: background stays dark, text stays light + gently tinted.
   Mirrors --bg-body (#181614) on the reader-dark token. */
html:has(body[data-skin="reader"].dark-mode){ background:#181614 !important; }
body[data-skin="reader"].dark-mode .lesson-progress-bar{ background:var(--border-lighter); }
/* depth cues re-tuned for dark: white highlights drop to a whisper, shadows deepen */
body[data-skin="reader"].dark-mode .knowledge-check-btn,
body[data-skin="reader"].dark-mode #sidebar-flashcard-btn,
body[data-skin="reader"].dark-mode .sidebar-flashcard-btn{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
body[data-skin="reader"].dark-mode .sv-panel{ box-shadow:0 1px 2px rgba(0,0,0,.35), 0 18px 36px -24px rgba(0,0,0,.55); }

/* ---------- BETA notice -> quiet line at top of the article ---------- */
body[data-skin="reader"] .beta-banner{
  background:transparent; border:none; box-shadow:none; padding:0;
  margin:0 0 1.4rem; font-size:.86rem; color:var(--text-muted); font-family:var(--font-ui);
}
body[data-skin="reader"] .beta-banner .beta-badge{
  background:transparent; color:var(--accent); padding:0; font-weight:700; letter-spacing:.1em;
}

/* ---------- callouts ---------- */
/* key facts: unmistakably NOT body text (Tom, 11 Jun — chunking). Accent
   edge + tint + a caps label naming what it is. */
body[data-skin="reader"] .key-fact{
  background:color-mix(in srgb,var(--accent) 9%,var(--bg-card)) !important;
  border:none !important; border-left:3px solid var(--accent) !important;
  border-radius:0 var(--radius) var(--radius) 0 !important;
  box-shadow:none !important; padding:1.05rem 1.4rem 1.15rem; margin:2.2rem 0;
}
/* the content ships its own label div — restyle it as the caps marker */
body[data-skin="reader"] .key-fact .key-fact-label{
  font-family:var(--font-ui) !important; font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:var(--accent);
  margin-bottom:.45rem;
}
body[data-skin="reader"] .exam-tip{
  background:var(--accent-light); border:none; border-radius:var(--radius); box-shadow:none; padding:1.2rem 1.3rem; margin:2rem 0;
}

/* ---------- header chrome: drop the rounded accent pills ---------- */
/* kill the old pill backgrounds on both labels, but DON'T force their colour
   (the lesson counter wants to stay muted — see .header-lesson-label) */
body[data-skin="reader"] .header-pills span{
  background:transparent !important; border:none !important; padding:0 !important;
  font-family:var(--font-ui);
}
body[data-skin="reader"] .header-unit-label{ color:var(--text-primary) !important; letter-spacing:0; }

/* ---------- AUDIO: tactile switch + crafted player ---------- */
/* Narration / Lesson Podcast — keep the sliding-switch mechanism but build it
   like a physical control: recessed groove, raised white key, press feedback */
body[data-skin="reader"] .audio-tab-track{
  background:color-mix(in srgb,var(--text-primary) 5%,var(--bg-body));
  border:1px solid var(--border-light); border-radius:11px; padding:3px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.07);
}
body[data-skin="reader"] .audio-tab{
  font-family:var(--font-ui); font-size:.88rem; font-weight:600; letter-spacing:.01em;
  padding:.5rem .75rem; border-radius:8px; transition:color .25s ease, transform .12s ease;
}
body[data-skin="reader"] .audio-tab-icon{ width:15px; height:15px; }
body[data-skin="reader"] .audio-tab.active{ color:var(--text-primary); }
body[data-skin="reader"] .audio-tab:active{ transform:scale(.97); }
body[data-skin="reader"] .audio-tab-indicator{
  background:#fff; border:1px solid var(--border-light); border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.05);
}

/* player: one considered container — soft fill, hairline, no floaty shadow */
body[data-skin="reader"] .narration-player{
  background:var(--bg-card); border:1px solid var(--border-light) !important;
  border-radius:4px !important; box-shadow:none; padding:.75rem 1rem;
}
body[data-skin="reader"] .narration-play{
  width:40px; height:40px; background:var(--accent); color:#fff; border:none;
}
body[data-skin="reader"] .narration-time{
  font-family:var(--font-ui); font-size:.9rem; color:var(--text-secondary); font-variant-numeric:tabular-nums;
}
body[data-skin="reader"] .narration-speed{
  background:transparent; border:1px solid var(--border-light); border-radius:7px;
  padding:.22rem .55rem; font-family:var(--font-ui); font-size:.85rem; font-weight:600; color:var(--text-secondary);
}
body[data-skin="reader"] .narration-speed:hover{ background:transparent; border-color:var(--accent); color:var(--accent); }
body[data-skin="reader"] .narration-progress{ height:4px; border-radius:2px; background:var(--border-lighter); }
body[data-skin="reader"] .narration-progress-fill{ background:var(--accent); border-radius:2px; }

/* ---------- SIDEBAR TOOL MODULES: flat cells inside the one panel frame ---------- */
body[data-skin="reader"] .lesson-sidebar .sidebar-section{
  background:var(--bg-card); border:none;
  border-radius:0; box-shadow:none; padding:1rem 1.15rem; margin:0;
}
body[data-skin="reader"] .sidebar-section-title{
  font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.12em;
  font-size:.8rem; color:var(--text-muted); margin-bottom:.7rem;
}
/* the left rail is hidden in Reader, so surface the checklist as a sidebar module */
body[data-skin="reader"] .sidebar-progress-section{ display:block !important; }
body[data-skin="reader"] .lesson-progress-card{ background:transparent; border:none; box-shadow:none; padding:0; }
body[data-skin="reader"] .sidebar-media-item{ border-radius:var(--radius-sm); }
body[data-skin="reader"] .sidebar-video,
body[data-skin="reader"] .sidebar-video iframe{ border-radius:var(--radius); }

/* (no drop caps — brief v2) */

/* =================================================================
   EXAMS (exams.html) — deterministic revision planner + timetable.
   The inline .exams-* styling leans on #2d2a26 ink plus saturated
   blue/green one-offs. Map ink → --text-primary (so the calendar grid
   re-derives in dark mode) and the action/accent colours → --accent.
   ================================================================= */
body[data-skin="reader"] .exams-title{ font-family:var(--font-head); color:var(--text-primary); letter-spacing:-.01em; }
body[data-skin="reader"] .exams-subtitle{ font-family:var(--font-ui); color:var(--text-secondary); }
/* toolbar buttons: squared (the 999px pill was the AI tell), token/accent */
body[data-skin="reader"] .exams-btn{ font-family:var(--font-ui); border-radius:var(--radius-sm); }
body[data-skin="reader"] .exams-btn:hover{ transform:translateY(-1px); box-shadow:0 1px 2px rgba(29,28,26,.05), 0 8px 20px -12px rgba(29,28,26,.2); }
body[data-skin="reader"] .exams-btn--primary{ background:var(--accent); color:#fff; }
body[data-skin="reader"].dark-mode .exams-btn--primary{ color:#181614; }
body[data-skin="reader"] .exams-btn--secondary{ background:var(--bg-card); color:var(--text-secondary); border:1px solid var(--border-light); }
body[data-skin="reader"] .exams-btn--secondary:hover{ border-color:var(--accent); color:var(--accent); }
/* rest-day toggle */
body[data-skin="reader"] .rest-day-label{ font-family:var(--font-ui); color:var(--text-secondary); }
body[data-skin="reader"] .rest-day-btn{ font-family:var(--font-ui); background:var(--bg-card); border:1px solid var(--border-light); color:var(--text-secondary); border-radius:var(--radius-sm); }
body[data-skin="reader"] .rest-day-btn:hover{ border-color:var(--accent); }
body[data-skin="reader"] .rest-day-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
body[data-skin="reader"].dark-mode .rest-day-btn.active{ color:#181614; }
/* ICS help card → accent-tint info card */
body[data-skin="reader"] .ics-help-inner{ background:color-mix(in srgb,var(--accent) 6%,var(--bg-card)); border-color:color-mix(in srgb,var(--accent) 22%,var(--border-light)); border-radius:var(--radius); }
body[data-skin="reader"] .ics-help-title{ font-family:var(--font-ui); color:var(--accent); }
body[data-skin="reader"] .ics-help-step{ font-family:var(--font-ui); background:var(--bg-card); color:var(--text-secondary); border-radius:var(--radius-sm); }
body[data-skin="reader"] .ics-help-step strong{ color:var(--accent); }
body[data-skin="reader"] .ics-help-close{ color:var(--text-muted); }
/* loading + empty states */
body[data-skin="reader"] .plan-loading{ font-family:var(--font-ui); color:var(--text-muted); }
body[data-skin="reader"] .plan-loading .spinner{ border-color:var(--border-light); border-top-color:var(--accent); }
body[data-skin="reader"] .exams-empty{ font-family:var(--font-ui); color:var(--text-muted); }
/* calendar grid — ink lines → --text-primary (re-derive in dark), inner → border-light */
body[data-skin="reader"] .print-calendar-title,
body[data-skin="reader"] .cal-month-title{ font-family:var(--font-head); color:var(--text-primary); letter-spacing:-.01em; }
body[data-skin="reader"] .cal-grid{ border-top-color:var(--text-primary); border-left-color:var(--text-primary); }
body[data-skin="reader"] .cal-header-cell{ font-family:var(--font-ui); color:var(--text-secondary); border-right-color:var(--border-light); border-bottom-color:var(--text-primary); background:color-mix(in srgb,var(--accent) 4%,var(--bg-card)); }
body[data-skin="reader"] .cal-cell{ border-right-color:var(--border-light); border-bottom-color:var(--border-light); }
body[data-skin="reader"] .cal-cell--empty{ background:color-mix(in srgb,var(--text-primary) 2%,var(--bg-card)); }
body[data-skin="reader"] .cal-cell--weekend{ background:color-mix(in srgb,var(--accent) 4%,var(--bg-card)); }
body[data-skin="reader"] .cal-cell--today{ outline-color:var(--accent); }
body[data-skin="reader"] .cal-day-number{ font-family:var(--font-ui); color:var(--text-primary); }
body[data-skin="reader"] .cal-exam-pill{ font-family:var(--font-ui); color:var(--text-primary); }
body[data-skin="reader"] .cal-session-tag{ font-family:var(--font-ui); }

/* =================================================================
   PRACTICE (practice.html) — practice-first lessons (maths, languages,
   science calc, geography skills). The inline CSS is already largely
   var()-driven, so accent buttons + token text/borders re-skin for free.
   This pass moves the controls off Inter onto the reader faces, sets the
   method/example titles in Schibsted, and maps the main surface fills
   onto tokens so dark mode holds. Tier (bronze/silver/gold) + success/
   error colours stay — they're functional, not chrome.
   ================================================================= */
body[data-skin="reader"] #practice-page button,
body[data-skin="reader"] #practice-page input,
body[data-skin="reader"] #practice-page select{ font-family:var(--font-ui); }
body[data-skin="reader"] .method-modal-title,
body[data-skin="reader"] .panel-method-title,
body[data-skin="reader"] #practice-main h2,
body[data-skin="reader"] #practice-main h3{ font-family:var(--font-head) !important; letter-spacing:-.01em; color:var(--text-primary); }
body[data-skin="reader"] .method-modal-overlay p,
body[data-skin="reader"] .panel-method-body,
body[data-skin="reader"] .practice-panel p{ font-family:var(--font-read); }
/* main surface fills → tokens (the #f5f2ed / #fff one-offs were light-only) */
body[data-skin="reader"] .practice-panel{ background:var(--bg-body); }
body[data-skin="reader"] .practice-score-bar{ background:var(--bg-card); }
body[data-skin="reader"] .problem-card,
body[data-skin="reader"] .method-modal-card,
body[data-skin="reader"] .method-modal{ background:var(--bg-card); }
body[data-skin="reader"] .problem-input{ background:var(--bg-card); }

/* =================================================================
   HOMEPAGE REDESIGN (14 Jun) — NOT a reskin: a new spacious, fluid
   landing. ONE fluid max-width that uses the full width and scales to
   any device; a left-aligned editorial masthead; the subjects become a
   generous cinematic grid; calmer discovery. Overrides the earlier
   homepage landing rules higher in this file. Modals handled below.
   ================================================================= */
/* one shared container rhythm — fluid gutters, scales phone → ultrawide */
body[data-skin="reader"] .hero,
body[data-skin="reader"] #home-subjects,
body[data-skin="reader"] .free-user-badge,
body[data-skin="reader"] .school-name-badge{
  max-width:1280px; width:100%; margin-left:auto; margin-right:auto; box-sizing:border-box;
  padding-left:clamp(1.25rem,5vw,3.25rem); padding-right:clamp(1.25rem,5vw,3.25rem);
}

/* ---- MASTHEAD: two-zone band (brand left + planner card right), hairline-closed ---- */
body[data-skin="reader"] .hero{
  text-align:left; padding-top:clamp(2.5rem,6vw,5rem); padding-bottom:0; margin:0 auto;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(1.5rem,4vw,3rem); flex-wrap:wrap;
}
body[data-skin="reader"] .hero-lede{ flex:1 1 26rem; min-width:0; }
/* Exam-planner card fills the right of the masthead — a real, calm utility,
   not filler (links to the deterministic /exams planner) */
body[data-skin="reader"] .hero-planner{
  flex:0 1 23rem; display:flex; align-items:center; gap:.9rem; text-decoration:none;
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:4px;
  padding:1rem 1.15rem; color:var(--text-primary); box-shadow:0 1px 2px rgba(29,28,26,.05);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
}
body[data-skin="reader"] .hero-planner:hover{
  transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 38%,var(--border-light));
  box-shadow:0 1px 2px rgba(29,28,26,.05), 0 16px 32px -22px rgba(29,28,26,.25);
}
body[data-skin="reader"].dark-mode .hero-planner:hover{ box-shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 32px -22px rgba(0,0,0,.6); }
body[data-skin="reader"] .hero-planner-icon{
  flex:0 0 auto; width:40px; height:40px; padding:8px; border-radius:11px;
  background:color-mix(in srgb,var(--accent) 12%,var(--bg-card)); color:var(--accent);
}
body[data-skin="reader"] .hero-planner-text{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
body[data-skin="reader"] .hero-planner-text strong{ font-family:var(--font-head); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; color:var(--text-primary); }
body[data-skin="reader"] .hero-planner-text small{ font-family:var(--font-ui); font-size:.8rem; color:var(--text-muted); line-height:1.35; }
body[data-skin="reader"] .hero-planner-go{ flex:0 0 auto; width:20px; height:20px; color:var(--text-muted); margin-left:auto; transition:color .2s, transform .2s; }
body[data-skin="reader"] .hero-planner:hover .hero-planner-go{ color:var(--accent); transform:translateX(3px); }
@media (max-width:760px){
  body[data-skin="reader"] .hero{ display:block; }
  body[data-skin="reader"] .hero-planner{ margin-top:1.3rem; max-width:24rem; }
}
body[data-skin="reader"] .hero .hero-welcome{ margin:0 0 .4rem; }
body[data-skin="reader"] .hero h1{
  font-size:clamp(2.4rem,5vw,3.7rem); line-height:.98; margin:0;
}
body[data-skin="reader"] .hero .hero-tagline,
body[data-skin="reader"] .hero .tagline{
  font-size:clamp(1rem,1.6vw,1.15rem); margin:1rem 0 0; max-width:54ch; line-height:1.55;
}
/* account line sits left under the wordmark, both new + returning users */
body[data-skin="reader"] .free-user-badge,
body[data-skin="reader"] .school-name-badge{ text-align:left; margin-top:1.1rem; margin-bottom:0; }

/* ---- SUBJECTS: closing-rule above, then a generous fluid grid ---- */
body[data-skin="reader"] #home-subjects{
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
  padding-top:clamp(1.9rem,3.5vw,2.9rem); padding-bottom:1rem;
  border-top:1px solid var(--border-light);
}
body[data-skin="reader"] .home-section-header{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem 1.5rem;
  margin-bottom:clamp(1.2rem,2.5vw,1.9rem); flex-wrap:wrap;
}
body[data-skin="reader"] .home-section-header h2{
  font-size:clamp(1.4rem,2.7vw,1.95rem); margin:0;
}
/* the masthead planner card is now the single exam-planner entry — retire the
   redundant section chip */
body[data-skin="reader"] .home-section-header .home-exams-link{ display:none; }
/* fluid grid — auto-fills more columns as the viewport grows; min() stops the
   minmax floor overflowing a narrow phone */
body[data-skin="reader"] #home-grid,
body[data-skin="reader"] .home-grid{
  display:grid; gap:clamp(1.1rem,2vw,1.7rem);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 258px), 1fr));
  justify-content:initial;
}
/* cinematic card: photo zooms on hover under an overflow clip; editorial
   kicker(board) / title / scope hierarchy; one muted per-subject accent */
body[data-skin="reader"] .home-card{
  --sub:color-mix(in srgb, var(--card-accent,#566a72) 60%, #71695f);
  display:flex; flex-direction:column; border-radius:4px; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--border-light);
  box-shadow:0 1px 2px rgba(29,28,26,.05); position:relative;
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s, border-color .28s;
}
body[data-skin="reader"].dark-mode .home-card{ --sub:color-mix(in srgb, var(--card-accent,#566a72) 52%, #b8b0a4); }
body[data-skin="reader"] .home-card:hover{
  transform:translateY(-4px); border-color:color-mix(in srgb,var(--sub) 55%,var(--border-light));
  box-shadow:0 1px 2px rgba(29,28,26,.05), 0 22px 44px -26px rgba(29,28,26,.28);
}
body[data-skin="reader"].dark-mode .home-card:hover{ box-shadow:0 1px 2px rgba(0,0,0,.4), 0 22px 44px -26px rgba(0,0,0,.65); }
body[data-skin="reader"] .home-card-img{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block;
  filter:saturate(.9); transition:filter .35s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
body[data-skin="reader"] .home-card:hover .home-card-img{ filter:saturate(1.02); transform:scale(1.04); }
body[data-skin="reader"] .home-card-body{
  padding:1.05rem 1.2rem 1.25rem; display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
}
/* board → kicker above the title */
body[data-skin="reader"] .home-card-board{
  order:-1; margin:0 0 .42rem; font-family:var(--font-ui); color:var(--sub);
  text-transform:uppercase; letter-spacing:.07em; font-weight:700; font-size:.7rem;
  background:none !important; padding:0 !important; border-radius:0 !important;
}
body[data-skin="reader"] .home-card h3,
body[data-skin="reader"] .home-card-name{
  font-family:var(--font-head) !important; font-weight:700; letter-spacing:-.01em;
  color:var(--text-primary); font-size:clamp(1.1rem,1.5vw,1.24rem); line-height:1.18; margin:0;
}
body[data-skin="reader"] .home-card-detail{
  font-family:var(--font-ui); color:var(--text-muted); font-size:.82rem;
  margin:.55rem 0 0; padding-top:.55rem;
}
/* premium chip stays a quiet glass tag */
body[data-skin="reader"] .home-card-premium{
  font-family:var(--font-ui); border-radius:var(--radius-sm); color:var(--text-secondary);
  background:color-mix(in srgb,var(--bg-card) 84%,transparent); box-shadow:0 1px 3px rgba(29,28,26,.14);
}

/* ---- DISCOVERY: request panel as a calm centred card under the grid ---- */
body[data-skin="reader"] .request-panel{ max-width:860px; margin:clamp(1.75rem,3.5vw,3rem) auto 1.5rem; }

/* ---- PICKER WIZARD rethink: roomy, calm, scalable on any device ----
   Same engine, a much calmer room. Wider modal with real breathing space,
   airier category rows + bigger touch targets, fluid subject grid, and it
   actually fits a narrow viewport (was a fixed 720 slab that overflowed). */
body[data-skin="reader"] .free-wizard-overlay{ padding:clamp(0px,2.5vw,2rem); }
body[data-skin="reader"] .free-wizard-modal{
  width:min(860px,100%); max-width:860px; max-height:min(900px,96vh); border-radius:6px;
}
body[data-skin="reader"] .fw-header{
  padding:clamp(1.5rem,3.5vw,2.4rem) clamp(1.4rem,4vw,2.6rem) clamp(1.1rem,2vw,1.5rem);
}
body[data-skin="reader"] .fw-header h2{ font-size:clamp(1.5rem,3vw,2.05rem); }
body[data-skin="reader"] .fw-header p{ font-size:.92rem; max-width:60ch; }
body[data-skin="reader"] .fw-core-note{ padding:1rem 1.15rem; }
body[data-skin="reader"] .fw-search-wrap{ margin-top:1.15rem; }
body[data-skin="reader"] .fw-search-input{ padding:.8rem .9rem .8rem 2.6rem; font-size:.92rem; }
body[data-skin="reader"] .fw-body{ padding:.4rem clamp(1rem,3.5vw,1.9rem) .6rem; }
body[data-skin="reader"] .fw-cat-header{ padding:1.1rem .85rem; border-radius:4px; }
body[data-skin="reader"] .fw-cat-title{ font-size:1rem; gap:.85rem; }
body[data-skin="reader"] .fw-cat-dot{ width:10px; height:10px; }
body[data-skin="reader"] .fw-subj-grid{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:.6rem; padding:.15rem .85rem 1.1rem;
}
body[data-skin="reader"] .fw-subj-card{ padding:.85rem 1rem; font-size:.9rem; border-radius:11px; }
body[data-skin="reader"] .fw-footer{
  padding:clamp(1rem,2.5vw,1.4rem) clamp(1.4rem,4vw,2.6rem);
}
body[data-skin="reader"] .fw-footer-count{ font-size:.9rem; }
body[data-skin="reader"] .fw-btn{ padding:.72rem 1.6rem; font-size:.9rem; }
/* board step rows roomier too */
body[data-skin="reader"] .fw-board-row{ padding:1.1rem 1.25rem; }
body[data-skin="reader"] .fw-board-pill{ padding:.5rem 1rem; }
@media (max-width:560px){
  body[data-skin="reader"] .free-wizard-overlay{ padding:0; }
  body[data-skin="reader"] .free-wizard-modal{ width:100%; max-width:100%; max-height:100dvh; height:100dvh; border-radius:0; }
}

/* =================================================================
   HOMEPAGE — LIFE & DEPTH: the launch-ready hero. Beta framing is gone
   (the ::after BETA no longer matches — hero-welcome was removed — and
   the 'still growing' notes are dropped). An ambient drifting gradient
   field sits behind the masthead; the headline carries a rotating
   subject word in that subject's colour; the cards tilt + glow. All
   motion respects prefers-reduced-motion.
   ================================================================= */
body[data-skin="reader"] .update-note{ display:none !important; }

/* ambient field behind the masthead — slow, soft, premium; fades out before
   the subjects (full-bleed via body::before) */
body[data-skin="reader"]{ position:relative; }
body[data-skin="reader"]::before{
  content:""; position:absolute; top:0; left:0; right:0; height:660px; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 80% at 12% -10%, color-mix(in srgb,var(--accent) 34%, transparent), transparent 62%),
    radial-gradient(48% 68% at 90% 0%, color-mix(in srgb,#c4895c 26%, transparent), transparent 58%),
    radial-gradient(54% 66% at 67% -8%, color-mix(in srgb,#5f8a74 22%, transparent), transparent 60%);
  -webkit-mask-image:linear-gradient(to bottom,#000 60%, transparent 100%);
          mask-image:linear-gradient(to bottom,#000 60%, transparent 100%);
  animation:sv-ambient 30s ease-in-out infinite alternate;
}
body[data-skin="reader"].dark-mode::before{ opacity:.72; }
@keyframes sv-ambient{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{   transform:translate3d(-3.5%,2%,0) scale(1.09); }
}
@media (prefers-reduced-motion:reduce){ body[data-skin="reader"]::before{ animation:none; } }
/* lift real content above the field */
body[data-skin="reader"] .hero,
body[data-skin="reader"] .free-user-badge,
body[data-skin="reader"] .school-name-badge,
body[data-skin="reader"] #home-subjects,
body[data-skin="reader"] .request-panel{ position:relative; z-index:1; }

/* brand mark (moderate) — the HEADLINE is now the hero statement */
body[data-skin="reader"] .hero-wordmark{
  font-family:var(--font-head) !important; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.45rem,2.2vw,1.95rem); line-height:1; color:var(--text-primary);
  margin:0 0 1.05rem; display:inline-flex; align-items:center;
}
body[data-skin="reader"] .hero-wordmark .logo-lock{ color:var(--accent); }
body[data-skin="reader"] .hero-headline{
  font-family:var(--font-head); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(2rem,4.4vw,3.35rem); line-height:1.05; color:var(--text-primary);
  margin:0; max-width:20ch; text-wrap:balance;
}
/* rotating subject word, in its own muted accent (home-lab.js sets --rot-accent + swaps) */
body[data-skin="reader"] .hero-rotator{
  color:var(--rot-accent,var(--accent)); font-weight:700; display:inline-block; white-space:nowrap;
  transition:opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1), color .3s ease;
}
body[data-skin="reader"] .hero-rotator.is-swapping{ opacity:0; transform:translateY(.3em); }
body[data-skin="reader"] .hero-rotator-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ body[data-skin="reader"] .hero-rotator{ transition:none; } }
body[data-skin="reader"] .hero-headline + .hero-tagline{ margin-top:1.05rem; }

/* subject cards: tactile — cursor-driven 3D tilt (home-lab.js sets --tx/--ty),
   a soft accent glow, and a 'continue' arrow that slides in on hover */
body[data-skin="reader"] #home-grid{ perspective:1300px; }
body[data-skin="reader"] .home-card{
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(var(--lift,0));
  transform-style:preserve-3d;
}
body[data-skin="reader"] .home-card:hover{
  --lift:-5px;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-5px);
  box-shadow:0 1px 2px rgba(29,28,26,.05),
             0 26px 50px -28px color-mix(in srgb,var(--sub) 55%, rgba(29,28,26,.9));
}
body[data-skin="reader"].dark-mode .home-card:hover{
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 26px 50px -26px color-mix(in srgb,var(--sub) 50%, #000);
}
body[data-skin="reader"] .home-card-body{ position:relative; }
body[data-skin="reader"] .home-card-go{
  position:absolute; right:1.05rem; bottom:1.1rem; width:31px; height:31px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--sub) 15%,var(--bg-card)); color:var(--sub);
  opacity:0; transform:translateX(-5px); transition:opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
body[data-skin="reader"] .home-card-go svg{ width:15px; height:15px; }
body[data-skin="reader"] .home-card:hover .home-card-go{ opacity:1; transform:translateX(0); }
@media (prefers-reduced-motion:reduce){
  body[data-skin="reader"] .home-card,
  body[data-skin="reader"] .home-card:hover{ transform:none; }
}

/* ============================================================
   MASTHEAD WORDMARK — the locked brand (12 Jul 2026):
   StudyVault in Young Serif, single weight, both words the same
   ink; the padlock is the full stop in the brand rust. Markup is
   <span class="header-logo">Study<b>Vault</b><svg class="logo-lock"…/></span>
   Unscoped (works whether or not <body> carries a data-skin).
   ============================================================ */
.header-logo, .site-footer-brand{
  font-family:'Young Serif',serif;
  font-weight:400;
  letter-spacing:0;
}
.header-logo b, .site-footer-brand b{ font-weight:400; }
.header-logo .logo-lock{
  width:.24em; height:.3em;
  vertical-align:baseline;   /* sit on the baseline like a period */
  margin-left:.06em;
}
.header-logo .logo-lock path{ fill:#c06325; }
.site-footer-brand .logo-lock{
  width:.21em; height:.26em;
  vertical-align:baseline;
  margin-left:.06em;
}
.site-footer-brand .logo-lock path{ fill:#c06325; }
/* The lock keeps the brand rust everywhere — masthead and footer alike. */
body[data-skin="reader"] .site-footer-brand .logo-lock path{ fill:#c06325; }
/* Drop the amber BETA pill on the redesign masthead (matches the
   approved design-lab header; restore by deleting this rule). */
.header-logo::after{ content:none; }

/* =================================================================
   SKIN 5 — DESK-WORLD (rides the reader skin via body.desk-world):
   one world with the illustrated desk. Warm paper chrome, Bindery
   masthead, the painted hero sits as a PLATE with caption + title
   set below on paper — never over the art. Subject accent = the
   same colour as the subject's cloth tab on the desk notebook.
   ================================================================= */
body[data-skin="reader"].desk-world{
  --bg-body:#f6f1e7; --bg-card:#fffdf8;
  --text-primary:#26231e; --text-secondary:#57534a; --text-muted:#84806f;
  --border-light:#e4dfd2; --border-lighter:#efeadf;
  --accent:var(--subject-accent,#8a5a44);
  --accent-light:color-mix(in srgb,var(--accent) 9%,#fffdf8);
  --accent-badge:color-mix(in srgb,var(--accent) 16%,#fffdf8);
  /* the subject colour taken down to near-black — every "dark" surface in the
     desk world darkens THROUGH the subject, never to plain black */
  --accent-deep:color-mix(in srgb,var(--accent) 45%,#16100c);
}
/* Desk-world after dark: same desk, lamp off. Pairs the a11y dark-mode
   toggle with a warm near-black version of the desk palette (values from
   the battle-tested ink skin, accents darkened through the subject). */
body[data-skin="reader"].desk-world.dark-mode{
  --bg-body:#1b1813; --bg-card:#26221b;
  --text-primary:#ece3d2; --text-secondary:#b7ac97; --text-muted:#8b806e;
  --border-light:#3a342a; --border-lighter:#2f2a22;
  --accent:color-mix(in srgb,var(--subject-accent,#8a5a44) 62%,#e8c47a);
  --accent-light:color-mix(in srgb,var(--subject-accent,#8a5a44) 22%,#26221b);
  --accent-badge:color-mix(in srgb,var(--subject-accent,#8a5a44) 34%,#26221b);
  --accent-deep:color-mix(in srgb,var(--subject-accent,#8a5a44) 45%,#0d0a07);
}
/* the chrome follows the room: dark header surface for the dark palette
   (the base desk header is a fixed cream that would swallow cream text) */
body[data-skin="reader"].desk-world.dark-mode .page-header{
  background:color-mix(in srgb,var(--bg-body) 88%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,var(--border-light));
}

/* Bindery replaces the wordmark ONLY when the local brand kit exists —
   skin-switcher probes for it and adds .has-bindery. Deployed previews
   (public repo, kit gitignored, trademark pending) keep StudyVault. */
body[data-skin="reader"].desk-world .page-header{
  background:color-mix(in srgb,#f6f1e7 92%,transparent);
  backdrop-filter:blur(8px);
  /* hairline of the subject under the chrome — like the notebook tab peeking out */
  border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,#e4dfd2);
}
/* masthead: keep the reader's scrim + overlaid title (Tom likes the reveal) —
   the painted hero simply takes the photo's place under the same treatment.
   The scrim is TINTED: it darkens through the subject colour, so the title
   reveal quietly announces which desk-notebook you pulled this from. */
body[data-skin="reader"].desk-world #hero-figure::after{
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 30%,
    color-mix(in srgb,var(--accent-deep) 52%,transparent) 66%,
    color-mix(in srgb,var(--accent-deep) 90%,transparent) 100%);
}
/* the eyebrow above the title picks up a pale wash of the subject */
body[data-skin="reader"].desk-world .lesson-header .lesson-number{
  color:color-mix(in srgb,var(--accent) 34%,#fff);
}
/* the video-overview card's scrim joins the same colour world */
body[data-skin="reader"].desk-world .sv-video-scrim{
  background:linear-gradient(to top,
    color-mix(in srgb,var(--accent-deep) 86%,transparent) 0%,
    color-mix(in srgb,var(--accent-deep) 14%,transparent) 48%,
    color-mix(in srgb,var(--accent-deep) 30%,transparent) 100%);
}
/* selecting text highlights in the subject's wash */
body[data-skin="reader"].desk-world ::selection{
  background:color-mix(in srgb,var(--accent) 26%,transparent);
}
/* the lesson counter in the chrome takes the subject colour — the small
   constant reminder of which notebook tab you're inside */
body[data-skin="reader"].desk-world .header-lesson-label{
  color:var(--accent);
}

/* ─────────────────────────────────────────────────────────────────
   DESK-WORLD · DEMO-LOOP PASS — browse, unit list, guide, practice.
   The lesson page is the benchmark; these bring its siblings into
   the same warm chrome + subject-tab language. Nothing here touches
   the locked reader skin outside .desk-world.
   ───────────────────────────────────────────────────────────────── */

/* — BROWSE · subject overview — */
/* the quote ribbon writes in ONE ink, not a rainbow: quotes as quiet
   marginalia, authors in the subject colour */
body[data-skin="reader"].desk-world .quote-ticker{
  border-top:1px solid var(--border-lighter); border-bottom:1px solid var(--border-lighter);
  margin-bottom:.75rem;
}
body[data-skin="reader"].desk-world .quote-item{
  color:var(--text-secondary); font-weight:500;
  border-left:2px solid color-mix(in srgb,var(--accent) 38%,transparent);
}
body[data-skin="reader"].desk-world .quote-item em{ color:var(--accent); }
/* unit photos sit in the world like album prints: warmed, gently faded,
   with a soft paper edge instead of a hard photographic crop */
body[data-skin="reader"].desk-world .unit-card-image img{
  filter:sepia(.22) saturate(.8) contrast(.95) brightness(1.03);
}
body[data-skin="reader"].desk-world .unit-card-image{ position:relative; }
body[data-skin="reader"].desk-world .unit-card-image::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(122,104,72,.14), inset 0 -14px 22px -18px rgba(84,66,38,.4);
}
/* the notebook tab peeks from each unit card's spine */
body[data-skin="reader"].desk-world .unit-card{ position:relative; }
body[data-skin="reader"].desk-world .unit-card::before{
  content:""; position:absolute; left:0; top:26px; width:4px; height:38px; z-index:2;
  background:var(--accent); border-radius:0 3px 3px 0; opacity:.85;
}

/* — BROWSE · unit lesson list — */
/* the old per-unit theme band becomes the desk's warm paper with the
   subject's tab hairline; the theme stripe goes */
body[data-skin="reader"].desk-world .unit-page-header{
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 7%,#f6f1e7) 0%,#f6f1e7 72%);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 26%,#e4dfd2);
}
body[data-skin="reader"].desk-world .unit-page-header::before,
body[data-skin="reader"].desk-world .unit-page-header::after{ content:none; }

/* — CHROME · guide/browse header integrity — */
/* the brand never crushes when a page carries a wider nav (guide's extra
   links were collapsing the lockup and shoving the label into the nav) */
body[data-skin="reader"].desk-world .header-brand{ flex:0 0 auto; }
body[data-skin="reader"].desk-world .header-logo{ flex:0 0 auto; }
body[data-skin="reader"].desk-world.has-bindery .header-logo{ flex:0 0 122px; }

/* — PRACTICE · the drill chrome joins the desk — */
body[data-skin="reader"].desk-world .practice-score-bar{
  background:color-mix(in srgb,#f6f1e7 55%,#fffdf8);
}
body[data-skin="reader"].desk-world .header-lesson-pill{
  background:color-mix(in srgb,var(--accent) 14%,#fffdf8); color:var(--accent);
}
/* method card = a page from the notebook: paper ground, serif title,
   steps labelled in the subject ink, CTA in the subject colour */
body[data-skin="reader"].desk-world .method-modal-overlay{
  background:color-mix(in srgb,var(--accent-deep) 52%,transparent);
}
body[data-skin="reader"].desk-world .method-modal{ background:#fffdf8; border-radius:6px; }
body[data-skin="reader"].desk-world .method-modal-title{ font-family:var(--font-head); }
body[data-skin="reader"].desk-world .method-modal-steps-label{ color:var(--accent); }
body[data-skin="reader"].desk-world .method-modal-go-btn{ background:var(--accent); }
body[data-skin="reader"].desk-world .method-modal-go-btn:hover{ filter:brightness(.94); }

/* — PRACTICE · dark mode —
   The desk-world practice chrome above is paper-toned and outranks
   `body.dark-mode .practice-score-bar` on specificity (0,3,1 vs 0,2,1), so in
   dark mode the score bar rendered near-white with cream text sitting on it,
   and the lesson pill washed out to unreadable. These restate the same chrome
   in the dark palette at matching specificity. */
body[data-skin="reader"].desk-world.dark-mode .practice-score-bar{
  background:#221f1c;
  border-bottom-color:#3a3836;
}
body[data-skin="reader"].desk-world.dark-mode .header-lesson-pill{
  background:color-mix(in srgb,var(--accent) 30%,#221f1c);
  color:#f2eee6;
}
body[data-skin="reader"].desk-world.dark-mode .method-modal{ background:#26231f; }
body[data-skin="reader"].desk-world.dark-mode .method-modal-overlay{ background:rgba(0,0,0,.62); }

/* ── Hero wash (EXPERIMENT, 30 Jul) ────────────────────────────────────────
   Unifies a platform of stock photographs from many sources into one palette
   for £0, instead of regenerating every hero. Opt-in per page via
   data-hero-wash="1" (QA hook: ?wash=1); "2" adds paper grain + ink edge.
   Applies to lesson mastheads, unit cards and subject cards alike.        */
body[data-hero-wash] #hero-figure img,
body[data-hero-wash] .unit-card-image img,
body[data-hero-wash] .home-card-img{
  filter:saturate(.28) contrast(1.06) brightness(1.03) sepia(.22);
}
body[data-hero-wash] #hero-figure::before,
body[data-hero-wash] .unit-card-image::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--accent, #8a5a3b); mix-blend-mode:soft-light; opacity:.5;
}
body[data-hero-wash="2"] #hero-figure img,
body[data-hero-wash="2"] .unit-card-image img,
body[data-hero-wash="2"] .home-card-img{
  filter:saturate(.2) contrast(1.14) brightness(1.05) sepia(.26);
}
body[data-hero-wash="2"] #hero-figure::before,
body[data-hero-wash="2"] .unit-card-image::before{ opacity:.52; }
body[data-hero-wash="2"] #hero-figure figcaption{ z-index:4; }
body[data-hero-wash="2"] #hero-figure::marker{ content:none; }

/* ── Listening extract + native audio players ──────────────────────────────
   Tom, 5 Aug: the native player's pill shape fights the squared-off reskin.
   Chrome draws the player in shadow DOM, so squaring it means reaching the
   -webkit-media-controls-enclosure — setting border-radius on the <audio>
   element alone leaves the inner panel round.

   Applies to both places audio appears: extracts inside article prose
   (.sv-listen) and the extract players in the practice drills. */
/* Selectors carry .study-notes deliberately: the skin sets paragraph type at
   reading size with (0,2,2) specificity, which beat a plainer .sv-listen-for
   rule and rendered the caption and credit as body copy. Measured, not
   guessed. Radius is a literal 4px to match .sv-panel rather than the
   per-skin token, which runs to 7px on the reader skin - too round for the
   squared-off look. */
/* #study-notes, not .study-notes: the simplify feature wraps blocks in
   .sv-chunk, and `#study-notes .sv-chunk` (an ID selector) sets an 8px radius
   that beats any class-only rule - which is why the card stayed rounded on the
   first attempt. */
body[data-skin] #study-notes figure.sv-listen,
body[data-skin] .study-notes figure.sv-listen {
  margin: 1.9rem 0;
  padding: 1.15rem 1.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(29, 28, 26, .05);
}
body[data-skin] .study-notes .sv-listen .sv-listen-label {
  font-family: var(--font-ui);
  font-size: .74rem;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .7rem;
}
body[data-skin] .study-notes .sv-listen .sv-listen-for {
  font-family: var(--font-read);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: .9rem 0 0;
}
body[data-skin] .study-notes .sv-listen .sv-listen-credit {
  font-family: var(--font-ui);
  font-size: .78rem;
  line-height: 1.4;
  color: var(--text-muted);
  margin: .5rem 0 0;
}
body[data-skin] .sv-listen-player,
body[data-skin] .study-notes audio,
body[data-skin] .practice-passage-area audio,
body[data-skin] .passage-text audio {
  width: 100%;
  height: 40px;
  display: block;
  border: 1px solid var(--border-light);
  border-radius: 0;
  background: var(--bg-card);
}
body[data-skin] audio::-webkit-media-controls-enclosure,
body[data-skin] audio::-webkit-media-controls-panel {
  border-radius: 0;
  background: transparent;
}

/* Official-recording links (music AoS4): squared to match .sv-listen. */
body[data-skin] #study-notes ul.sv-listen-links,
body[data-skin] .study-notes ul.sv-listen-links {
  list-style: none;
  margin: 1.6rem 0;
  padding: 1.05rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 4px;
}
body[data-skin] .study-notes ul.sv-listen-links li {
  font-family: var(--font-read);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  padding-left: 1.4rem;
  position: relative;
}
body[data-skin] .study-notes ul.sv-listen-links li + li { margin-top: .6rem; }
body[data-skin] .study-notes ul.sv-listen-links li::before {
  content: "\25B6";
  position: absolute;
  left: 0;
  font-size: .68rem;
  color: var(--text-muted);
}

/* ---- Annotated player: squared for the reader skin ---- */
body[data-skin] .sv-annotated-player { border-radius: 4px; box-shadow: none; }
body[data-skin] .sv-ap-staffbar button, body[data-skin] .sv-ap-tip { border-radius: 4px; }

body[data-skin] .sv-card-hero, body[data-skin] .sv-finish-actions button, body[data-skin] .sv-ll-practice-box { border-radius: 4px; }

body[data-skin] .sv-card-img img { border-radius: 4px; }

body[data-skin] .sv-stage-strip { border-radius: 4px; }

body[data-skin] .sv-ap-video iframe { border-radius: 4px; }

body[data-skin] .sv-ap-trackbtn { border-radius: 4px; }

/* ---- touch devices: thumb-sized controls (responsive pass, 10 Sep 2026) ---- */
@media (pointer:coarse){
  body[data-skin="reader"] .a11y-btn{ min-height:38px; padding:.45rem .7rem; font-size:.84rem; }
  .sv-ap-pin{ width:32px; height:32px; font-size:.78rem; }
  .exam-cd-x{ min-width:32px; min-height:32px; display:inline-flex; align-items:center; justify-content:center; }
  .revision-tip-btn{ width:34px; height:34px; }
  .narration-speed{ min-height:32px; min-width:40px; }
  .ai-info{ width:24px; height:24px; }
  .sv-ap-trackbtn,.sv-ap-tutor,.sv-card-read,.sv-ll-tools-toggle,.quick-filter,.score-bar-examples-btn{ min-height:36px; }
  .sv-ap-ref{ width:28px; height:28px; }
  #shuffle-toggle{ width:20px; height:20px; }
}
body[data-skin] .sv-box-kicker{ font-size:.72rem; }
body[data-skin="reader"] .sv-video-kicker{ font-size:.7rem; }
/* phones: the reader skin's display:inline-flex outranked style.css's hide rule, so the
   lesson counter sat on top of the wordmark */
@media (max-width:480px){
  body[data-skin="reader"] .header-lesson-label, body[data-skin="reader"] .header-unit-label{ display:none; }
  body[data-skin="reader"] .site-footer-links a{ display:inline-block; padding:.3rem .15rem; }
}
body[data-skin] .sidebar-media-item span{ font-size:.72rem; }