/* ============================================================================
   The Third Umpire — EDITORIAL EDITION theme overlay
   Loaded AFTER each page's original <style>, so these rules win the cascade.
   It only restyles: page markup and JavaScript are unchanged.
   Look: Newsreader serif + IBM Plex Mono, cool-light palette with an indigo
   accent, a single narrow reading column, light code, card-wrapped interactive.
   ========================================================================== */
/* fonts self-hosted via ../fonts.css (loaded in the page head before this file) */
:root{
  --paper:#EEF0F3;   /* page background — cool light */
  --ink:#171A21;
  --muted:#5B616E;
  --hairline:#DCE0E7;
  --cream:#FFFFFF;   /* callout / card fills → white */
  --grass:#E7F5EE;
  --red:#C6413F;
  --green:#2E9E6B;
  /* --tan is intentionally left as its warm value so the cricket pitch etc.
     stay sandy; indigo accent is applied explicitly below. */
  --accent:#4338CA;
  --accent-soft:#EEECFB;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --mono2:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --fs:1;            /* reader font-size multiplier — set by the options bar */

  /* ---- type scale (single source of truth) ----
     All reading text derives from these. Each already folds in the --fs
     multiplier, so the options-bar size control still scales everything, and
     "body copy" can never disagree with itself across selectors. */
  --text-h1:      calc(52px * var(--fs,1));
  --text-sub:     calc(24px * var(--fs,1));
  --text-body:    calc(21px * var(--fs,1));   /* concept paragraphs + panel intro */
  --text-recap:   calc(20px * var(--fs,1));   /* synth / recap prose */
  --text-deep-h:  calc(21px * var(--fs,1));   /* deep-dive sub-heads */
  --text-deep:    calc(19px * var(--fs,1));   /* deep-dive prose */
}

html, body{
  font-family:var(--serif) !important;
  background:var(--paper) !important;
  color:var(--ink) !important;
  line-height:1.7 !important;
}

/* ---- layout — LESSON pages ----
   All lessons default to the original two-column concept | interactive grid
   (editorially restyled), consistent across the edition. A page can opt into a
   single reading column with data-layout="one-col" (the page-1 toggle uses it).
   The overview & chrome pages have no section.concept, so they are never touched. */
html[data-ed-layout="one"] main:has(section.concept){ display:block !important; width:100% !important; max-width:760px !important; margin:0 auto !important; }
html[data-ed-layout="one"] main:has(section.concept) > * + *{ margin-top:46px !important; }

/* ---- type ---- */
.concept h1{ font-family:var(--serif) !important; font-weight:600 !important; font-size:var(--text-h1) !important; letter-spacing:-0.01em !important; line-height:1.08 !important; }
.concept .sub{ font-style:italic !important; font-size:var(--text-sub) !important; color:var(--muted) !important; }
/* body copy — one size, shared by the concept paragraphs AND the panel intro */
.concept p, .play .bridge{ font-size:var(--text-body) !important; line-height:1.7 !important; }
.concept .bridge{ font-style:italic !important; border-left:3px solid var(--accent) !important; }
.synth h2, .code-block h3{ font-family:var(--serif) !important; font-weight:600 !important; }
.synth p{ font-size:var(--text-recap) !important; line-height:1.7 !important; }
.synth .recap{ font-style:italic !important; border-left-color:var(--hairline) !important; }

/* ---- inline code token ---- */
.ty{ font-family:var(--mono2) !important; color:var(--accent) !important; border-color:var(--accent) !important; background:var(--accent-soft) !important; font-weight:600 !important; }

/* ---- the interactive → a white card ---- */
.play{ background:#fff !important; border:1px solid var(--hairline) !important; border-radius:18px !important; padding:26px 26px 28px !important; box-shadow:0 16px 44px -30px rgba(20,25,40,.55) !important; }

/* ---- light code panel (was dark) ---- */
.code-panel{ background:#fff !important; color:#1F2430 !important; border:1px solid var(--hairline) !important; font-family:var(--mono2) !important; }
.code-panel *{ font-family:var(--mono2) !important; }
.code-panel .com{ color:#8A93A6 !important; }
.code-panel .str{ color:#2E9E6B !important; }
.code-panel .kw{ color:#4338CA !important; }
.code-panel .fn{ color:#B26A00 !important; }
.code-panel .num{ color:#C6413F !important; }
.code-panel .ty{ color:#4338CA !important; background:none !important; border:none !important; }

/* ---- buttons / accents ---- */
.next-btn{ background:var(--accent) !important; border-color:var(--accent) !important; }
.appeal-btn{ border-color:var(--ink) !important; border-radius:999px !important; }
.appeal-btn.active{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; }
.appeal-btn.explored{ border-color:var(--green) !important; }

/* ---- deep-dive, editorial ---- */
details.deepdive{ background:#fff !important; border-radius:14px !important; }
details.deepdive > summary{ font-family:var(--mono2) !important; text-transform:uppercase !important; letter-spacing:0.06em !important; font-size:13px !important; color:var(--accent) !important; }
.deepdive-body h4{ font-family:var(--serif) !important; font-size:var(--text-deep-h) !important; font-weight:600 !important; }
.deepdive-body p{ font-size:var(--text-deep) !important; }
.deep{ max-width:760px !important; }

/* ---- chrome widths ----
   Two-column (default) keeps the original 1120px nav/dots; the footer stays
   narrow. In one-column mode the nav/dots narrow to the reading column. */
.page-footer{ max-width:760px !important; }
html[data-ed-layout="one"] .lesson-nav,
html[data-ed-layout="one"] .page-dots,
html[data-ed-layout="one"] .options-bar{ max-width:760px !important; }

/* ---- reader layout toggle (shared; injected by layout.js on lesson pages) ---- */
.options-bar{ position:static; z-index:50; max-width:1120px; margin:0 auto; padding:0; display:flex; align-items:center; justify-content:flex-end; gap:18px; flex-wrap:wrap; font-family:var(--mono2); pointer-events:none; }
/* the controls sit in a compact pill hugging the right edge, so the full-width
   sticky bar never bands across (or intercepts clicks on) the main content */
.opt-cluster{ display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap; pointer-events:auto; background:var(--paper); border:1px solid var(--hairline); border-radius:999px; padding:7px 15px; box-shadow:0 6px 20px -12px rgba(20,25,40,.45); }
.opt-group{ display:flex; align-items:center; gap:8px; }
.lt-btn{ appearance:none; background:#fff; border:1px solid var(--hairline); color:var(--ink); padding:6px 9px; border-radius:8px; cursor:pointer; min-height:34px; display:inline-flex; align-items:center; justify-content:center; transition:border-color .15s, background .15s, color .15s; }
.lt-btn svg{ width:26px; height:20px; display:block; }
.lt-btn:hover{ border-color:var(--accent); }
.lt-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
@media (max-width:640px){ .options-bar{ justify-content:center; } }
.nav-btn{ font-family:var(--mono2) !important; }
.page-dots a.current{ background:var(--accent) !important; border-color:var(--accent) !important; }
.page-dots a.done{ background:var(--muted) !important; }

/* ============================================================================
   COLOUR THEMES (global, chosen in the options bar; set via <html data-ed-theme>)
   Light is the default (:root above). Sepia and Dark remap the palette; because
   the base rules read the CSS variables, most surfaces re-tint automatically.
   Code panels and a few accent-on-fill spots get explicit overrides.
   ========================================================================== */

/* ---------- Sepia (warm paper, sienna accent) ---------- */
html[data-ed-theme="sepia"]{
  --paper:#F4ECD8;
  --ink:#3B3222;
  --muted:#6E5F45;
  --hairline:#E3D6BC;
  --cream:#FBF5E6;
  --grass:#E7EBD3;
  --accent:#A15C2E;
  --accent-soft:#EFE1CB;
}
html[data-ed-theme="sepia"] .play{ box-shadow:0 16px 44px -30px rgba(80,60,25,.5) !important; }
html[data-ed-theme="sepia"] .code-panel{ background:#FBF5E6 !important; color:#3B3222 !important; border-color:var(--hairline) !important; }
html[data-ed-theme="sepia"] .code-panel .com{ color:#9A8B6E !important; }
html[data-ed-theme="sepia"] .code-panel .str{ color:#4A7A3A !important; }
html[data-ed-theme="sepia"] .code-panel .kw{ color:#A15C2E !important; }
html[data-ed-theme="sepia"] .code-panel .fn{ color:#9A5B00 !important; }
html[data-ed-theme="sepia"] .code-panel .num{ color:#B0472F !important; }
html[data-ed-theme="sepia"] .code-panel .ty{ color:#A15C2E !important; }
html[data-ed-theme="sepia"] details.deepdive{ background:var(--cream) !important; }
html[data-ed-theme="sepia"] .lt-btn,
html[data-ed-theme="sepia"] .fs-btn{ background:var(--cream); color:var(--ink); }

/* ---------- Green (soft sage paper, forest-green accent) ---------- */
html[data-ed-theme="green"]{
  --paper:#E5EFE2;
  --ink:#20302A;
  --muted:#556B5A;
  --hairline:#CDE0C9;
  --cream:#F3F8F1;
  --grass:#D8E8D2;
  --accent:#2E7D4E;
  --accent-soft:#DCEBDC;
}
html[data-ed-theme="green"] .play{ box-shadow:0 16px 44px -30px rgba(30,70,45,.5) !important; }
html[data-ed-theme="green"] .code-panel{ background:#F3F8F1 !important; color:#20302A !important; border-color:var(--hairline) !important; }
html[data-ed-theme="green"] .code-panel .com{ color:#7C917F !important; }
html[data-ed-theme="green"] .code-panel .str{ color:#2E7D4E !important; }
html[data-ed-theme="green"] .code-panel .kw{ color:#1F6B8C !important; }
html[data-ed-theme="green"] .code-panel .fn{ color:#9A5B00 !important; }
html[data-ed-theme="green"] .code-panel .num{ color:#B0472F !important; }
html[data-ed-theme="green"] .code-panel .ty{ color:#2E7D4E !important; }
html[data-ed-theme="green"] details.deepdive{ background:var(--cream) !important; }
html[data-ed-theme="green"] .lt-btn,
html[data-ed-theme="green"] .fs-btn{ background:var(--cream); color:var(--ink); }

/* ---------- theme swatch buttons (in the options bar) ---------- */
.opt-sep{ display:inline-block; width:1px; height:20px; background:var(--hairline); }
.theme-toggle{ display:flex; align-items:center; gap:8px; }
.th-btn{ appearance:none; width:26px; height:26px; padding:0; border-radius:50%; border:1px solid var(--hairline); cursor:pointer; transition:transform .12s, box-shadow .12s; }
.th-btn:hover{ transform:translateY(-1px); }
.th-btn.active{ box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
/* each swatch previews its theme: paper (top-left) + accent (bottom-right) */
.th-light{ background:linear-gradient(135deg, #EEF0F3 0 50%, #4338CA 50% 100%); }
.th-sepia{ background:linear-gradient(135deg, #F4ECD8 0 50%, #A15C2E 50% 100%); }
.th-green{ background:linear-gradient(135deg, #E5EFE2 0 50%, #2E7D4E 50% 100%); }

/* ---- reader font size (options bar) ---- */
html[data-ed-font="sm"]{ --fs:0.9; }
html[data-ed-font="lg"]{ --fs:1.16; }
/* Apply the reader size to the lesson body + deep-dive (the controls, nav and
   page-dots live outside <main>, so they stay put). Scoped to lesson pages via
   :has(section.concept) so the course outline's own rule isn't doubled up. */
html[data-ed-font="sm"] main:has(section.concept),
html[data-ed-font="sm"] section.deep{ zoom:0.9; }
html[data-ed-font="lg"] main:has(section.concept),
html[data-ed-font="lg"] section.deep{ zoom:1.13; }
.fs-toggle{ display:flex; align-items:center; gap:6px; }
.fs-btn{ appearance:none; background:#fff; border:1px solid var(--hairline); color:var(--ink); border-radius:8px; min-width:32px; min-height:34px; padding:0 8px; cursor:pointer; font-family:var(--serif); line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:border-color .15s, background .15s, color .15s; }
.fs-btn:hover{ border-color:var(--accent); }
.fs-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.fs-s1{ font-size:12px; }
.fs-s2{ font-size:15px; }
.fs-s3{ font-size:19px; }

/* ============================================================================
   RESPONSIVE SIZE BANDS (laptop -> large desktop)
   Reading text and the interactive card scale by the SAME factor per band, so
   the editorial proportions are preserved exactly; only the size changes.
   Phones (<1000px) are untouched; the options-bar font control still overrides.
   The browser can't read physical inches, so these track viewport width -- a
   dense 15" laptop and a big monitor land in different bands and size right.
   ========================================================================== */
@media (min-width: 1000px) and (max-width: 1279px){   /* compact laptop / dense 15" */
  :root{ --fs: 1.08; }
  .play{ zoom: 1.08; }
}
@media (min-width: 1280px) and (max-width: 1599px){   /* standard laptop / desktop */
  :root{ --fs: 1.12; }
  .play{ zoom: 1.12; }
}
@media (min-width: 1600px){                            /* large monitor */
  :root{ --fs: 1.18; }
  .play{ zoom: 1.18; }
}