/* senior-adventure-warm.css - shared warm 'junior-adventure' skin for Year 12 Biology.
   Generalised from bio-m8-warm.css: scope broadened to any linked -mN-bg page (bio + chem).
   Per-module hero accent overrides at the foot; read the specificity ladder note there
   before touching a selector. Every warm module links this file; the old module-local
   fork subjects/biology/year12/module8/bio-m8-warm.css has been deleted. */
/* =====================================================
   Warm "junior-adventure" skin for the senior
   guided lesson system. Loaded LAST, it re-skins the existing
   senior-adventure / senior-adventure-v2 shell (sa-hero, sa-card,
   sa-tab, sa-step, sa-donext) into the warm sticker-card look Kyle
   approved, without changing the guided-flow structure or the
   quiz-engine / boss-battle wiring. Scoped to body[class*="-m"][class*="-bg"] so it
   only affects lessons that opt in.
   Palette + shadow adapted from subjects/maths/junior-adventure.css.
   ============================================================ */
body[class*="-m"][class*="-bg"]{
  --w-bg:#f9efe1; --w-bg-deep:#f4e2cb; --w-panel:#fffdf9; --w-soft:#f6ecd9;
  --w-rule:#e6d2b8; --w-rule-soft:#f1e0c5;
  --w-ink:#2d3142; --w-ink-soft:#556; --w-muted:#66667e;
  --w-green:#5a9e78; --w-green-deep:#3f7d63; --w-green-soft:#dcefe0;
  --w-teal:#3f8a86; --w-teal-deep:#2f6d69; --w-teal-soft:#d6ebe8;
  --w-rose:#c47b8a; --w-rose-deep:#9c5c6e; --w-rose-soft:#f6dbe1;
  --w-coral:#e89b8b; --w-coral-deep:#c47165; --w-coral-soft:#fbe1d8;
  --w-plum:#6d5b8a; --w-plum-deep:#4e4068; --w-plum-soft:#e6def0;
  --w-gold:#d6a85f; --w-gold-deep:#a87f3f; --w-gold-soft:#f7e6c4;
  --w-red:#c4646b; --w-red-soft:#f5d8db;
  --w-display:'Outfit',ui-rounded,system-ui,sans-serif;
  --w-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --w-mono:'JetBrains Mono','DM Mono',ui-monospace,monospace;
  --w-r:14px; --w-r-lg:18px; --w-r-xl:24px; --w-stick:0 4px 0 var(--w-rule);
  /* senior-adventure-v2.css paints the canvas from --sa2-canvas behind an
     !important on body[data-sa-version='2'].sa[data-subject] (0,3,1), which outranks
     this rule (0,2,1) wherever a lesson carries data-subject. Re-measured on
     2026-08-12: 479 of 537 migrated lessons, so most of the estate wore stone
     #fafaf9 while the other 58 rendered the cream correctly -- two grounds, not one
     wrong one. Retarget the variable the v2 rule ALREADY READS rather than escalate
     specificity, which would start an arms race between two sheets that both use
     !important. Warm lessons resolve it to the cream; every other v2 lesson keeps
     the #fafaf9 default, because this declaration is scoped inside the warm block. */
  --sa2-canvas:var(--w-bg);
  background:var(--w-bg) !important;
  background-image:
    radial-gradient(circle at 12% -2%, #fdf6ea 0%, transparent 42%),
    radial-gradient(circle at 100% 6%, #f6e6cf 0%, transparent 46%) !important;
  color:var(--w-ink);
  font-family:var(--w-body);
}
body[class*="-m"][class*="-bg"] h1,body[class*="-m"][class*="-bg"] h2,body[class*="-m"][class*="-bg"] h3,body[class*="-m"][class*="-bg"] h4,
body[class*="-m"][class*="-bg"] .sa-hero-title,body[class*="-m"][class*="-bg"] .sa-card-title{font-family:var(--w-display)}

/* ---- HERO: warm gradient + sticker feel ---- */
body[class*="-m"][class*="-bg"] .sa-hero{
  background:linear-gradient(135deg,#2f6d69 0%,#4f9a78 50%,#dcae63 134%) !important;
  border-radius:var(--w-r-xl);
  box-shadow:0 12px 30px rgba(47,109,105,.28);
}
/* Keep the goldward gradient transition and legacy white sheen away from hero copy.
   The terminal gold is off-canvas, but its interpolation reaches long title/lede lines,
   especially below 640px. These overlays sit behind .sa-hero-inner (z-index:1).
   Measured failures sit at the goldward (right) end of text lines, so the desktop
   scrim is weighted right: heavy alpha there, near-none over the already-dark start.
   A left-heavy scrim passed AA too but visibly muted accents that never failed
   (ext2 violet, chem-m4 terracotta, maths-adv-y11 olive). Below 640px the hero art
   hides, copy spans the full width, and every accent fails (worst 2.28:1), so the
   mobile overlay is a flat estate-wide scrim instead. */
body[class*="-m"][class*="-bg"] .sa-hero::before{
  background:
    linear-gradient(90deg,rgba(29,33,49,.12) 0%,rgba(29,33,49,.28) 55%,rgba(29,33,49,.45) 100%),
    linear-gradient(175deg,transparent 40%,rgba(0,0,0,.22) 100%)}
body[class*="-m"][class*="-bg"] .sa-hero::after{
  background:radial-gradient(circle at 95% 8%,rgba(255,255,255,.12),transparent 30%)}
@media(max-width:640px){
  body[class*="-m"][class*="-bg"] .sa-hero::before{background:rgba(29,33,49,.36)}
  body[class*="-m"][class*="-bg"] .sa-hero::after{background:none}
}
body[class*="-m"][class*="-bg"] .sa-hero-badge{
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.24);
  border-radius:99px;font-family:var(--w-display);font-weight:700;color:#fff}
body[class*="-m"][class*="-bg"] .sa-hero-badge:first-child{background:var(--w-gold);color:#3d2700}
body[class*="-m"][class*="-bg"] .sa-hero-title{font-weight:800;letter-spacing:-.025em}
body[class*="-m"][class*="-bg"] .sa-hero-sub,body[class*="-m"][class*="-bg"] .sa-hero-desc{color:#eef7f2}

/* ---- PHASE TABS: warm sticker tabs ---- */
body[class*="-m"][class*="-bg"] .sa-tab{
  background:var(--w-panel);border:1.5px solid var(--w-rule);box-shadow:var(--w-stick);
  color:var(--w-ink-soft);font-family:var(--w-display);font-weight:800;border-radius:var(--w-r)}
body[class*="-m"][class*="-bg"] .sa-tab[aria-selected="true"],body[class*="-m"][class*="-bg"] .sa-tab.active{
  background:linear-gradient(135deg,var(--w-green),var(--w-teal)) !important;color:#fff;border-color:transparent}

/* ---- CARDS: white sticker cards ---- */
body[class*="-m"][class*="-bg"] .sa-card{
  background:var(--w-panel) !important;border:1.5px solid var(--w-rule) !important;
  box-shadow:var(--w-stick) !important;border-radius:var(--w-r-lg) !important}
body[class*="-m"][class*="-bg"] .sa-card.tint-teal{background:var(--w-teal-soft) !important}
body[class*="-m"][class*="-bg"] .sa-card.tint-blue{background:var(--w-plum-soft) !important}
/* Card numbers are 14px/800 -- NORMAL text for WCAG, so the floor is 4.5:1, not the
   3:1 large-text floor. Measured in a browser on a real lesson, white on the BASE
   tokens failed for five of the six hues: teal 4.05 (the default, ~6,550 chips),
   gold 2.18, coral 2.21, rose 3.21, green 3.18. Only plum passed, at 5.98.
   One rule covers all six, and it is the split .sa-hero-badge:first-child already ships:
     dark hues  -> white on the -deep token   (teal 5.98, plum 5.98, rose 5.04, green 4.86)
     light hues -> #3d2700 on the base token  (gold 6.47, coral 6.38)
   Gold and coral stay visibly gold and coral rather than going muddy. Plum is left
   alone: it already passed, and changing it would be churn.
   NOTE .rose had no rule at all, so 720 rose chips were rendering with the base teal. */
body[class*="-m"][class*="-bg"] .sa-card-num{
  background:var(--w-teal-deep) !important;color:#fff !important;border-radius:11px;
  font-family:var(--w-display);font-weight:800;box-shadow:0 3px 0 rgba(0,0,0,.1)}
body[class*="-m"][class*="-bg"] .sa-card-num.plum{background:var(--w-plum) !important}
body[class*="-m"][class*="-bg"] .sa-card-num.teal{background:var(--w-teal-deep) !important}
body[class*="-m"][class*="-bg"] .sa-card-num.rose{background:var(--w-rose-deep) !important}
body[class*="-m"][class*="-bg"] .sa-card-num.gold{background:var(--w-gold) !important;color:#3d2700 !important}
body[class*="-m"][class*="-bg"] .sa-card-num.coral{background:var(--w-coral) !important;color:#3d2700 !important}
body[class*="-m"][class*="-bg"] .sa-card-title{font-weight:800;color:var(--w-ink)}
body[class*="-m"][class*="-bg"] .sa-card-subtitle{color:var(--w-ink-soft)}

/* ---- STEP shell (guided) ---- */
body[class*="-m"][class*="-bg"] .sa-step{border-radius:var(--w-r-lg)}
body[class*="-m"][class*="-bg"] .sa-step-title{font-family:var(--w-display);font-weight:800}
body[class*="-m"][class*="-bg"] .sa-here,body[class*="-m"][class*="-bg"] .sa-step-summary .sa-here{
  color:var(--w-teal-deep);font-family:var(--w-display);font-weight:800}

/* ---- highlighter MARKS on key terms ---- */
body[class*="-m"][class*="-bg"] .mark-green,body[class*="-m"][class*="-bg"] .mark-gold,body[class*="-m"][class*="-bg"] .mark-rose,
body[class*="-m"][class*="-bg"] .mark-plum,body[class*="-m"][class*="-bg"] .mark-teal{
  padding:1px 5px;border-radius:5px;font-weight:600;color:var(--w-ink)}
body[class*="-m"][class*="-bg"] .mark-green{background:var(--w-green-soft)}
body[class*="-m"][class*="-bg"] .mark-gold{background:var(--w-gold-soft)}
body[class*="-m"][class*="-bg"] .mark-rose{background:var(--w-rose-soft)}
body[class*="-m"][class*="-bg"] .mark-plum{background:var(--w-plum-soft)}
body[class*="-m"][class*="-bg"] .mark-teal{background:var(--w-teal-soft)}

/* ---- "Remember!" star callout ---- */
body[class*="-m"][class*="-bg"] .w-remember{
  display:flex;gap:11px;align-items:flex-start;margin:14px 0;padding:13px 15px;
  background:var(--w-gold-soft);border:1.5px dashed var(--w-gold);border-radius:var(--w-r)}
body[class*="-m"][class*="-bg"] .w-remember .w-rl{font-weight:800;color:var(--w-gold-deep);font-family:var(--w-display);display:block;font-size:13px}
body[class*="-m"][class*="-bg"] .w-remember p{font-size:13.5px;margin:2px 0 0}
body[class*="-m"][class*="-bg"] .w-remember svg{width:20px;height:20px;color:var(--w-gold);flex-shrink:0;margin-top:1px}

/* ---- two-column feedback compare ---- */
body[class*="-m"][class*="-bg"] .w-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
@media(max-width:600px){body[class*="-m"][class*="-bg"] .w-two{grid-template-columns:1fr}}
body[class*="-m"][class*="-bg"] .w-fbcard{border:1.5px solid var(--w-rule);border-radius:var(--w-r);padding:14px;background:var(--w-panel)}
body[class*="-m"][class*="-bg"] .w-fbcard.neg{border-top:4px solid var(--w-green)}
body[class*="-m"][class*="-bg"] .w-fbcard.pos{border-top:4px solid var(--w-coral)}
body[class*="-m"][class*="-bg"] .w-fbcard h4{font-family:var(--w-display);font-weight:800;font-size:14px;margin:0 0 7px}
body[class*="-m"][class*="-bg"] .w-fbcard.neg h4{color:var(--w-green-deep)}
body[class*="-m"][class*="-bg"] .w-fbcard.pos h4{color:var(--w-coral-deep)}

/* ---- DO-THIS-NEXT bar: warm ---- */
body[class*="-m"][class*="-bg"] .sa-donext{
  background:color-mix(in srgb,var(--w-panel) 92%,transparent);
  border-top:1.5px solid var(--w-rule)}
body[class*="-m"][class*="-bg"] .sa-donext-lbl{color:var(--w-gold-deep);font-family:var(--w-display);font-weight:800}
body[class*="-m"][class*="-bg"] .sa-donext-txt{color:var(--w-ink);font-weight:700}
body[class*="-m"][class*="-bg"] .sa-donext-go,body[class*="-m"][class*="-bg"] .sa-step-continue{
  background:linear-gradient(135deg,var(--w-green),var(--w-teal)) !important;color:#fff !important;
  border:0 !important;font-family:var(--w-display);font-weight:800;border-radius:var(--w-r);
  box-shadow:0 4px 0 var(--w-teal-deep)}
body[class*="-m"][class*="-bg"] .sa-step-continue:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--w-teal-deep)}

/* ---- intent cards (Know/Understand/Can Do) ---- */
body[class*="-m"][class*="-bg"] .sa-intention{
  background:var(--w-panel);border:1.5px solid var(--w-rule);box-shadow:var(--w-stick);
  border-radius:var(--w-r);border-top-width:5px}
body[class*="-m"][class*="-bg"] .sa-intention:nth-child(1){border-top-color:var(--w-green)}
body[class*="-m"][class*="-bg"] .sa-intention:nth-child(2){border-top-color:var(--w-plum)}
body[class*="-m"][class*="-bg"] .sa-intention:nth-child(3){border-top-color:var(--w-coral)}

/* ---- section labels ---- */
body[class*="-m"][class*="-bg"] .sa-section-label{color:var(--w-teal-deep);font-family:var(--w-display);font-weight:800}

/* ---- existing content elements, re-skinned warm ---- */
/* copy-to-book highlighted definition = the signature highlighter look */
body[class*="-m"][class*="-bg"] mark.sa-copy-key{
  background:linear-gradient(180deg,transparent 8%,var(--w-gold-soft) 8%) !important;
  color:var(--w-ink) !important;padding:1px 3px;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
body[class*="-m"][class*="-bg"] .sa-copy-cue{color:var(--w-gold-deep);font-weight:600}
/* callouts */
body[class*="-m"][class*="-bg"] .sa-callout{
  background:var(--w-teal-soft);border:1.5px solid var(--w-rule);border-left:4px solid var(--w-teal);
  border-radius:var(--w-r)}
body[class*="-m"][class*="-bg"] .sa-callout.sky{background:var(--w-plum-soft);border-left-color:var(--w-plum)}
body[class*="-m"][class*="-bg"] .sa-callout-tag{
  background:var(--w-teal);color:#fff;font-family:var(--w-display);font-weight:800;border-radius:7px}
body[class*="-m"][class*="-bg"] .sa-callout.sky .sa-callout-tag{background:var(--w-plum)}
/* Beyond-syllabus marker. The .sa-callout and .sa-card strong rules above would
   otherwise repaint it as a plain teal callout with ink text, so the one signal that
   tells a student "this is extension, you can skip it" disappeared on every warm
   lesson -- measured, not reasoned: chemistry lesson20 came back rgb(214,235,232),
   the same teal as an ordinary callout. :first-child so the later .sa-card strong
   rule cannot undo it whatever the file order. FINDINGS-LOG 2026-08-29. */
body[class*="-m"][class*="-bg"] .sa-callout--beyond{background:var(--w-plum-soft);border-left-color:var(--w-plum)}
body[class*="-m"][class*="-bg"] .sa-callout--beyond strong:first-child{color:var(--w-plum-deep)}
/* microtasks = warm quick-check card */
body[class*="-m"][class*="-bg"] .sa-microtask{
  background:var(--w-coral-soft) !important;border:1.5px solid var(--w-rule) !important;
  border-radius:var(--w-r) !important;box-shadow:var(--w-stick)}
body[class*="-m"][class*="-bg"] .sa-mt-q{font-family:var(--w-display);font-weight:700;color:var(--w-ink)}
body[class*="-m"][class*="-bg"] .sa-mt-opt,body[class*="-m"][class*="-bg"] .sa-mt-cloze-input{
  background:var(--w-panel) !important;border:1.5px solid var(--w-rule) !important;border-radius:10px !important}
body[class*="-m"][class*="-bg"] .sa-mt-opt:hover{border-color:var(--w-coral) !important}
/* book notes / copy blocks */
body[class*="-m"][class*="-bg"] .sa-book-notes{
  background:var(--w-soft) !important;border:1.5px dashed var(--w-rule) !important;border-radius:var(--w-r) !important}
/* misconception reveal (click-to-reveal details) */
body[class*="-m"][class*="-bg"] .sa-misconception{
  background:var(--w-soft);border:1.5px solid var(--w-rule);border-radius:var(--w-r)}
/* supported/core/stretch route tags */
body[class*="-m"][class*="-bg"] .sa-band,body[class*="-m"][class*="-bg"] .sa-bloom{font-family:var(--w-display);font-weight:800;border-radius:99px}
/* ==============================================================
   INNER CONTENT warm-style every element rendered inside a card, so
   nothing shows as plain unstyled HTML. This is what makes the whole
   lesson read as designed rather than just the card shells.
   ===================================================================== */
body[class*="-m"][class*="-bg"] .sa-card h2{
  font-family:var(--w-display);font-size:16px;font-weight:800;color:var(--w-teal-deep);
  margin:20px 0 8px;padding-left:12px;position:relative;line-height:1.3}
body[class*="-m"][class*="-bg"] .sa-card h2::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:3px;background:var(--w-gold)}
body[class*="-m"][class*="-bg"] .sa-card h3{font-family:var(--w-display);font-size:14.5px;font-weight:800;color:var(--w-ink);margin:14px 0 6px}
body[class*="-m"][class*="-bg"] .sa-card p{color:var(--w-ink-soft)}
body[class*="-m"][class*="-bg"] .sa-card strong,body[class*="-m"][class*="-bg"] .sa-card b{color:var(--w-ink)}

body[class*="-m"][class*="-bg"] .sa-bridge{
  font-size:13px;color:var(--w-muted);background:var(--w-soft);border-radius:10px;
  padding:9px 13px;border-left:3px solid var(--w-rule-soft);margin:10px 0}
body[class*="-m"][class*="-bg"] .sa-conceptual-first{font-size:16px;line-height:1.6;color:var(--w-ink);font-weight:500;margin:12px 0}
body[class*="-m"][class*="-bg"] .sa-card-subtitle{font-style:italic;color:var(--w-ink-soft);font-size:14.5px}

/* tables -> warm rounded table */
body[class*="-m"][class*="-bg"] .sa-card table{
  width:100%;border-collapse:separate;border-spacing:0;margin:14px 0;font-size:13.5px;
  border:1.5px solid var(--w-rule);border-radius:var(--w-r);overflow:hidden;box-shadow:var(--w-stick)}
body[class*="-m"][class*="-bg"] .sa-card thead th{
  background:linear-gradient(135deg,var(--w-teal),var(--w-green));color:#fff;font-family:var(--w-display);
  font-weight:800;text-align:left;padding:10px 12px;font-size:12.5px}
body[class*="-m"][class*="-bg"] .sa-card tbody td{padding:9px 12px;border-top:1px solid var(--w-rule-soft);color:var(--w-ink-soft)}
body[class*="-m"][class*="-bg"] .sa-card tbody td:first-child{font-weight:700;color:var(--w-ink);background:var(--w-soft)}
body[class*="-m"][class*="-bg"] .sa-card tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--w-soft) 45%,var(--w-panel))}

/* comparison grid + cards -> distinct warm sticker cards */
body[class*="-m"][class*="-bg"] .cc-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
@media(max-width:620px){body[class*="-m"][class*="-bg"] .cc-compare-grid{grid-template-columns:1fr}}
body[class*="-m"][class*="-bg"] .cc-compare-card{
  background:var(--w-panel) !important;border:1.5px solid var(--w-rule) !important;
  box-shadow:var(--w-stick) !important;border-radius:var(--w-r) !important;padding:15px !important;border-top-width:5px !important}
body[class*="-m"][class*="-bg"] .cc-compare-card.teal{border-top-color:var(--w-green) !important;background:color-mix(in srgb,var(--w-green-soft) 30%,var(--w-panel)) !important}
body[class*="-m"][class*="-bg"] .cc-compare-card.gold{border-top-color:var(--w-coral) !important;background:color-mix(in srgb,var(--w-coral-soft) 34%,var(--w-panel)) !important}
body[class*="-m"][class*="-bg"] .cc-compare-card h3{font-family:var(--w-display);font-weight:800;font-size:15px;margin:0 0 8px}
body[class*="-m"][class*="-bg"] .cc-compare-card.teal h3{color:var(--w-green-deep)}
body[class*="-m"][class*="-bg"] .cc-compare-card.gold h3{color:var(--w-coral-deep)}
body[class*="-m"][class*="-bg"] .cc-compare-card li{font-size:13px;color:var(--w-ink-soft);line-height:1.55;margin-bottom:5px}

/* key-term list */
body[class*="-m"][class*="-bg"] .sa-kt-item{background:var(--w-soft);border:1.5px solid var(--w-rule-soft);border-radius:11px}
body[class*="-m"][class*="-bg"] .sa-kt-term{font-family:var(--w-display);font-weight:800;color:var(--w-teal-deep)}
body[class*="-m"][class*="-bg"] .sa-kt-def{color:var(--w-ink-soft)}

/* misconception right/wrong */
body[class*="-m"][class*="-bg"] .sa-misconception-wrong{background:var(--w-red-soft);border-left:3px solid var(--w-red);border-radius:9px}
body[class*="-m"][class*="-bg"] .sa-misconception-right{background:var(--w-green-soft);border-left:3px solid var(--w-green);border-radius:9px}

/* true/false + option buttons -> warm sticker buttons */
/* :not() on the answered states — this rule's !important otherwise beats the
   .chosen-right/.chosen-wrong colours in senior-adventure-microtasks.css, so
   answering a microtask changed nothing visible. See FINDINGS-LOG 2026-08-29. */
body[class*="-m"][class*="-bg"] .mt-tf:not([class*="chosen"]),
body[class*="-m"][class*="-bg"] .sa-opt:not([class*="chosen"]),
body[class*="-m"][class*="-bg"] .mt-opt:not([class*="chosen"]){
  background:var(--w-panel) !important;border:1.5px solid var(--w-rule) !important;border-radius:11px !important;
  color:var(--w-ink) !important;box-shadow:var(--w-stick)}
body[class*="-m"][class*="-bg"] .mt-tf:hover,body[class*="-m"][class*="-bg"] .sa-opt:hover,body[class*="-m"][class*="-bg"] .mt-opt:hover{border-color:var(--w-coral) !important}
body[class*="-m"][class*="-bg"] .mt-tf-stmt,body[class*="-m"][class*="-bg"] .sa-check-q{font-weight:700;color:var(--w-ink)}

/* unlock check -> warm highlighted box */
body[class*="-m"][class*="-bg"] .sa-check,body[class*="-m"][class*="-bg"] .sa-guided-check{
  background:var(--w-coral-soft) !important;border:1.5px solid var(--w-rule) !important;
  border-radius:var(--w-r) !important;box-shadow:var(--w-stick);padding:15px !important}

/* embedded interactives */
body[class*="-m"][class*="-bg"] .sa-embed{background:var(--w-panel);border:1.5px solid var(--w-rule);box-shadow:var(--w-stick);border-radius:var(--w-r);padding:14px}
body[class*="-m"][class*="-bg"] .sa-embed-label{font-family:var(--w-display);font-weight:800;color:var(--w-plum-deep);font-size:12px}

/* worksheet tiles + pills + marks + answer blocks */
body[class*="-m"][class*="-bg"] .sa-ws-tile{background:var(--w-panel);border:1.5px solid var(--w-rule);box-shadow:var(--w-stick);border-radius:var(--w-r)}
body[class*="-m"][class*="-bg"] .sa-pill{background:var(--w-soft);border:1.5px solid var(--w-rule);border-radius:99px;font-family:var(--w-display);font-weight:700}
body[class*="-m"][class*="-bg"] .sa-marks{font-family:var(--w-display);font-weight:800;color:var(--w-plum-deep)}
body[class*="-m"][class*="-bg"] .sa-answer-block{background:var(--w-soft);border:1.5px solid var(--w-rule);border-radius:var(--w-r)}

/* feedback-diagram pathway steps */
body[class*="-m"][class*="-bg"] .fd-step{background:var(--w-panel);border:1.5px solid var(--w-rule);box-shadow:var(--w-stick);border-radius:12px}
body[class*="-m"][class*="-bg"] .fd-step-label{font-family:var(--w-display);font-weight:800;color:var(--w-plum-deep)}
body[class*="-m"][class*="-bg"] .fd-arrow{color:var(--w-plum)}

/* copy-to-book item + coral callout */
body[class*="-m"][class*="-bg"] .sa-copy-item{background:var(--w-gold-soft);border:1.5px dashed var(--w-gold);border-radius:var(--w-r)}
body[class*="-m"][class*="-bg"] .sa-callout.coral{background:var(--w-coral-soft);border-left-color:var(--w-coral)}
body[class*="-m"][class*="-bg"] .sa-callout.coral .sa-callout-tag{background:var(--w-coral)}

/* ==============================================================
   AUTHORED WARM COMPONENTS (used by the fully-authored L01 Learn phase)
   ===================================================================== */
/* worked-example anchor: words | worked panel */
body[class*="-m"][class*="-bg"] .w-anchor{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;align-items:center;margin:14px 0;
  padding:16px;background:var(--w-soft);border:1.5px solid var(--w-rule-soft);border-radius:var(--w-r)}
@media(max-width:600px){body[class*="-m"][class*="-bg"] .w-anchor{grid-template-columns:1fr}}
body[class*="-m"][class*="-bg"] .w-anchor .ww{font-size:14px;line-height:1.55;color:var(--w-ink)}
body[class*="-m"][class*="-bg"] .w-anchor .we{font-family:var(--w-mono);font-size:13.5px;text-align:center;padding:13px;
  background:var(--w-panel);border:1.5px solid var(--w-rule);border-radius:var(--w-r-sm,10px);line-height:1.85;color:var(--w-ink)}
body[class*="-m"][class*="-bg"] .w-anchor .we b{color:var(--w-teal-deep)}
/* feedback-loop diagram */
body[class*="-m"][class*="-bg"] .w-loop{background:var(--w-soft);border:1.5px solid var(--w-rule-soft);border-radius:var(--w-r);
  padding:20px 14px 12px;position:relative;margin:14px 0}
body[class*="-m"][class*="-bg"] .w-loop .cap{position:absolute;top:-11px;left:14px;background:var(--w-plum);color:#fff;
  font-family:var(--w-display);font-weight:800;font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:8px}
body[class*="-m"][class*="-bg"] .w-loop .row{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
body[class*="-m"][class*="-bg"] .w-loop .nd{text-align:center;position:relative;padding:0 4px}
body[class*="-m"][class*="-bg"] .w-loop .nd .c{width:44px;height:44px;border-radius:50%;margin:0 auto 7px;display:grid;place-items:center;
  font-family:var(--w-display);font-weight:800;font-size:16px;background:#fff;color:var(--w-plum-deep);
  border:2.5px solid var(--w-plum);box-shadow:0 3px 0 var(--w-plum-soft)}
body[class*="-m"][class*="-bg"] .w-loop .nd .l{font-family:var(--w-display);font-size:9px;letter-spacing:.03em;text-transform:uppercase;color:var(--w-plum-deep);font-weight:800}
body[class*="-m"][class*="-bg"] .w-loop .nd .w{font-size:11.5px;font-weight:700;margin-top:1px;color:var(--w-ink)}
body[class*="-m"][class*="-bg"] .w-loop .nd .e{font-size:10.5px;color:var(--w-ink-soft);line-height:1.25}
body[class*="-m"][class*="-bg"] .w-loop .nd:not(:last-child) .c::after{content:"";position:absolute;top:20px;right:calc(-50% + 22px);width:calc(100% - 44px);border-top:3px dashed var(--w-plum);opacity:.5}
@media(max-width:600px){body[class*="-m"][class*="-bg"] .w-loop .row{grid-template-columns:1fr 1fr;gap:14px 0}body[class*="-m"][class*="-bg"] .w-loop .nd:not(:last-child) .c::after{display:none}}
body[class*="-m"][class*="-bg"] .w-loop .back{margin-top:11px;background:var(--w-teal-soft);color:var(--w-teal-deep);border-radius:10px;
  padding:9px 13px;font-size:12.5px;font-weight:700;display:flex;gap:8px;align-items:center;justify-content:center}
/* click-to-reveal misconception */
body[class*="-m"][class*="-bg"] .w-reveal{border:1.5px solid var(--w-rule);border-radius:var(--w-r);background:var(--w-panel);box-shadow:var(--w-stick);margin:12px 0;overflow:hidden}
body[class*="-m"][class*="-bg"] .w-reveal>summary{list-style:none;cursor:pointer;padding:12px 15px;display:flex;gap:10px;align-items:center;font-family:var(--w-display);font-weight:700;font-size:13.5px;color:var(--w-ink)}
body[class*="-m"][class*="-bg"] .w-reveal>summary::-webkit-details-marker{display:none}
body[class*="-m"][class*="-bg"] .w-reveal>summary .tg{font-family:var(--w-display);font-size:10px;letter-spacing:.04em;text-transform:uppercase;font-weight:800;color:var(--w-red);background:var(--w-red-soft);padding:3px 8px;border-radius:6px}
body[class*="-m"][class*="-bg"] .w-reveal>summary .cv{margin-left:auto;transition:.2s;color:var(--w-muted);font-weight:800}
body[class*="-m"][class*="-bg"] .w-reveal[open]>summary .cv{transform:rotate(45deg)}
body[class*="-m"][class*="-bg"] .w-reveal .bd{padding:0 15px 14px;font-size:13px;color:var(--w-ink-soft);line-height:1.55}
body[class*="-m"][class*="-bg"] .w-reveal .bd .fix{margin-top:8px;background:var(--w-green-soft);color:var(--w-green-deep);border-radius:9px;padding:9px 11px;font-weight:600}
/* mini-card trio */
body[class*="-m"][class*="-bg"] .w-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
@media(max-width:600px){body[class*="-m"][class*="-bg"] .w-trio{grid-template-columns:1fr}}
body[class*="-m"][class*="-bg"] .w-mini{background:var(--w-panel);border:1.5px solid var(--w-rule);box-shadow:var(--w-stick);border-radius:var(--w-r);padding:13px}
body[class*="-m"][class*="-bg"] .w-mini h5{font-family:var(--w-display);font-weight:800;font-size:13px;margin:0 0 3px;color:var(--w-teal-deep)}
body[class*="-m"][class*="-bg"] .w-mini p{font-size:12px;color:var(--w-ink-soft);line-height:1.45;margin:0}

/* hero illustration layout */
body[class*="-m"][class*="-bg"] .sa-hero-inner{display:grid;grid-template-columns:1fr 168px;gap:18px;align-items:center}
body[class*="-m"][class*="-bg"] .sa-hero-art{display:flex;justify-content:center;align-items:center}
body[class*="-m"][class*="-bg"] .sa-hero-art svg{width:100%;max-width:168px;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.22))}
@media(max-width:640px){body[class*="-m"][class*="-bg"] .sa-hero-inner{grid-template-columns:1fr}body[class*="-m"][class*="-bg"] .sa-hero-art{display:none}}

/* wider content column (Kyle: content felt too narrow in the middle of the page) */
body[class*="-m"][class*="-bg"] .sa-shell{max-width:1080px !important}
body[class*="-m"][class*="-bg"] .sa-donext{max-width:1080px !important}

/* ==============================================================
   m8-cycle component family (used by L02-L21 guided rebuilds). Warm-
   styling these once makes every m8-cycle lesson render warm.
   ===================================================================== */
body[class*="-m"][class*="-bg"] .sa-card.m8-cycle{background:var(--w-panel) !important;border:1.5px solid var(--w-rule) !important;box-shadow:var(--w-stick) !important;border-radius:var(--w-r-lg) !important}
/* Same AA rule as the card-num block above: green was 3.18 on white, and amber (which
   is --w-gold under a second name) was 2.18. Dark hue takes -deep + white, light hue
   keeps its colour and takes dark ink. */
body[class*="-m"][class*="-bg"] .sa-card-num.green{background:var(--w-green-deep) !important;color:#fff !important}
body[class*="-m"][class*="-bg"] .sa-card-num.amber{background:var(--w-gold) !important;color:#3d2700 !important}
body[class*="-m"][class*="-bg"] .sa-xp-tag.green{background:var(--w-green-soft);color:var(--w-green-deep)}
body[class*="-m"][class*="-bg"] .sa-xp-tag.amber,body[class*="-m"][class*="-bg"] .sa-xp-tag.gold{background:var(--w-gold-soft);color:var(--w-gold-deep)}
body[class*="-m"][class*="-bg"] .sa-xp-tag.teal{background:var(--w-teal-soft);color:var(--w-teal-deep)}
body[class*="-m"][class*="-bg"] .sa-xp-tag.plum{background:var(--w-plum-soft);color:var(--w-plum-deep)}
body[class*="-m"][class*="-bg"] .sa-xp-tag.rose{background:var(--w-rose-soft);color:var(--w-rose-deep)}
body[class*="-m"][class*="-bg"] .m8-kicker{font-family:var(--w-display);font-weight:800;color:var(--w-teal-deep);text-transform:uppercase;letter-spacing:.06em;font-size:11.5px}

/* pathway diagram */
body[class*="-m"][class*="-bg"] .m8-pathway{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin:14px 0;background:var(--w-soft);border:1.5px solid var(--w-rule-soft);border-radius:var(--w-r);padding:16px 12px}
body[class*="-m"][class*="-bg"] .m8-path-step{flex:1;min-width:120px;text-align:center;background:#fff;border:1.5px solid var(--w-rule);border-radius:12px;padding:11px 9px;box-shadow:0 3px 0 var(--w-plum-soft);display:flex;flex-direction:column;gap:2px}
body[class*="-m"][class*="-bg"] .m8-path-step span{width:26px;height:26px;border-radius:50%;margin:0 auto 3px;display:grid;place-items:center;background:var(--w-plum);color:#fff;font-family:var(--w-display);font-weight:800;font-size:13px}
body[class*="-m"][class*="-bg"] .m8-path-step strong{font-family:var(--w-display);font-size:12.5px;color:var(--w-ink)}
body[class*="-m"][class*="-bg"] .m8-path-step small{font-size:11px;color:var(--w-ink-soft);line-height:1.3}
body[class*="-m"][class*="-bg"] .m8-path-arrow{display:flex;align-items:center;color:var(--w-plum);font-weight:800;padding:0 6px}
@media(max-width:600px){body[class*="-m"][class*="-bg"] .m8-pathway{flex-direction:column}body[class*="-m"][class*="-bg"] .m8-path-arrow{transform:rotate(90deg);padding:4px 0}}

/* Supported/Core/Stretch routes + tiers */
body[class*="-m"][class*="-bg"] .m8-route-grid,body[class*="-m"][class*="-bg"] .m8-tier-grid,body[class*="-m"][class*="-bg"] .m8-compare-grid,body[class*="-m"][class*="-bg"] .m8-exit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
@media(max-width:640px){body[class*="-m"][class*="-bg"] .m8-route-grid,body[class*="-m"][class*="-bg"] .m8-tier-grid,body[class*="-m"][class*="-bg"] .m8-compare-grid,body[class*="-m"][class*="-bg"] .m8-exit-grid{grid-template-columns:1fr}}
body[class*="-m"][class*="-bg"] .m8-route,body[class*="-m"][class*="-bg"] .m8-tier{background:var(--w-panel);border:1.5px solid var(--w-rule);box-shadow:var(--w-stick);border-radius:var(--w-r);padding:14px;border-top-width:5px}
body[class*="-m"][class*="-bg"] .m8-route:nth-child(1),body[class*="-m"][class*="-bg"] .m8-tier:nth-child(1){border-top-color:var(--w-green)}
body[class*="-m"][class*="-bg"] .m8-route:nth-child(2),body[class*="-m"][class*="-bg"] .m8-tier:nth-child(2){border-top-color:var(--w-plum)}
body[class*="-m"][class*="-bg"] .m8-route:nth-child(3),body[class*="-m"][class*="-bg"] .m8-tier:nth-child(3){border-top-color:var(--w-coral)}
body[class*="-m"][class*="-bg"] .m8-tier-label{font-family:var(--w-display);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--w-teal-deep)}
/* ---- Key-word stickers ----------------------------------------------
   This is now the single source of truth. All 21 Bio M8 lessons link this sheet
   (#526), the module-local bio-m8-warm.css fork is deleted, and the duplicate
   copy that briefly lived in bio-m8-sa.css is removed, so these rules are the
   live styling rather than a parity copy. Bio M8 is the only user of
   .m8-vocab-strip. Verified by computed-style diff: 2196 properties across four
   lessons, identical with and without the removed duplicate.
   Pastel sticker cards on the card ground (no inner tray, which read as a beige
   box inside a beige box). Colour is carried by the tint, border and drop
   shadow; the term itself stays ink so every card clears 9:1 contrast, because
   accent-deep on its own pastel fails WCAG AA on four of the six hues. */
body[class*="-m"][class*="-bg"] .m8-vocab-strip{
  display:flex;flex-wrap:wrap;gap:12px;margin:16px 0;padding:0;background:none;border:0}
/* flex-grow rather than fixed grid tracks, so a 5-term set widens the last row
   to fill the width instead of leaving an empty column. */
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div{
  flex:1 1 232px;display:flex;flex-direction:column;gap:4px;padding:12px 14px 13px;
  background:var(--w-teal-soft);border:1.5px solid var(--w-teal);border-radius:14px;
  box-shadow:0 4px 0 var(--w-teal);transition:transform .15s ease,box-shadow .15s ease}
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--w-teal)}
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div strong{
  margin:0;font-family:var(--w-display);font-weight:800;font-size:14.5px;line-height:1.25;color:var(--w-ink)}
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div span{font-size:12.5px;line-height:1.5;color:var(--w-ink-soft)}
/* Optional second line: a worked example under the definition. A definition that
   only swaps one abstract phrase for another does not land, so the example
   carries the meaning. Hairline rule separates it from the definition without
   adding another box. */
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div span.m8-vocab-eg{
  margin-top:3px;padding-top:7px;border-top:1px dashed rgba(45,49,66,.2);font-size:12px;color:var(--w-ink)}
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div:nth-child(6n+2){background:var(--w-plum-soft);border-color:var(--w-plum);box-shadow:0 4px 0 var(--w-plum)}
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div:nth-child(6n+2):hover{box-shadow:0 6px 0 var(--w-plum)}
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div:nth-child(6n+3){background:var(--w-coral-soft);border-color:var(--w-coral);box-shadow:0 4px 0 var(--w-coral)}
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div:nth-child(6n+3):hover{box-shadow:0 6px 0 var(--w-coral)}
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div:nth-child(6n+4){background:var(--w-green-soft);border-color:var(--w-green);box-shadow:0 4px 0 var(--w-green)}
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div:nth-child(6n+4):hover{box-shadow:0 6px 0 var(--w-green)}
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div:nth-child(6n+5){background:var(--w-gold-soft);border-color:var(--w-gold);box-shadow:0 4px 0 var(--w-gold)}
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div:nth-child(6n+5):hover{box-shadow:0 6px 0 var(--w-gold)}
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div:nth-child(6n+6){background:var(--w-rose-soft);border-color:var(--w-rose);box-shadow:0 4px 0 var(--w-rose)}
body[class*="-m"][class*="-bg"] .m8-vocab-strip > div:nth-child(6n+6):hover{box-shadow:0 6px 0 var(--w-rose)}
@media (prefers-reduced-motion: reduce){
  body[class*="-m"][class*="-bg"] .m8-vocab-strip > div{transition:none}
  body[class*="-m"][class*="-bg"] .m8-vocab-strip > div:hover{transform:none}
}
body[class*="-m"][class*="-bg"] .m8-roadmap,body[class*="-m"][class*="-bg"] .m8-priority-map,body[class*="-m"][class*="-bg"] .m8-exam-move{background:var(--w-soft);border:1.5px solid var(--w-rule-soft);border-radius:var(--w-r);padding:13px}
body[class*="-m"][class*="-bg"] .m8-roadmap-head{font-family:var(--w-display);font-weight:800;color:var(--w-plum-deep)}

/* sort-steps active practice */
body[class*="-m"][class*="-bg"] .sa-pattern{background:var(--w-panel);border:1.5px solid var(--w-rule);box-shadow:var(--w-stick);border-radius:var(--w-r);padding:14px}
body[class*="-m"][class*="-bg"] .ap-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
body[class*="-m"][class*="-bg"] .ap-tag{font-family:var(--w-display);font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--w-coral-deep)}
body[class*="-m"][class*="-bg"] .ap-xp{font-family:var(--w-display);font-weight:800;font-size:11.5px;color:var(--w-gold-deep);background:var(--w-gold-soft);padding:3px 9px;border-radius:99px}
body[class*="-m"][class*="-bg"] .ap-sort-step{background:var(--w-soft);border:1.5px solid var(--w-rule);border-radius:11px;padding:10px 12px;margin-bottom:7px;font-size:13.5px;cursor:grab}
body[class*="-m"][class*="-bg"] .ap-sort-step:hover{border-color:var(--w-coral)}
body[class*="-m"][class*="-bg"] .ap-sort-actions button,body[class*="-m"][class*="-bg"] [data-sort-check],body[class*="-m"][class*="-bg"] [data-sort-reset]{font-family:var(--w-display);font-weight:800;border-radius:11px;border:1.5px solid var(--w-rule);background:var(--w-panel);box-shadow:var(--w-stick);padding:8px 14px;color:var(--w-ink)}

/* ===== per-module hero accents (override the shared green/gold default) =====

   SPECIFICITY LADDER, read this before editing any selector below.

   These accents were previously written as `body.bio-m7-bg .sa-hero`, which scores
   (0,2,1). The shared default it is meant to override is `body[class*="-m"][class*="-bg"]
   .sa-hero`, which scores (0,3,1). Both carry !important, so specificity decides and
   source order is never consulted: every accent block in this section was inert, and
   all six warm-migrated modules rendered the identical teal/green default hero. Verified
   in-browser 2026-07-26 across bio-m5/m6/m7, chem-m5/m6 and bio-m8, all byte-identical.

   The module class is therefore doubled (`body.bio-m7-bg.bio-m7-bg`) purely to raise
   specificity to (0,3,1)+1 class = (0,4,1), which strictly beats the shared default for
   every selector in the group. Do not "tidy" the repetition away, it is load-bearing.

     shared default   body[class*="-m"][class*="-bg"] .sa-hero        (0,3,1)
     module accent    body.bio-m8-bg.bio-m8-bg .sa-hero              (0,4,1)  wins
     forced-colours   body[class*=..][class*=..][class*=..][class*=..] (0,5,1)  wins over both

   The forced-colours block at the foot must stay above the accent tier, see the note
   there. Hue map, keep new modules clear of these:
     bio-m6   ~12 deg rust      bio-m7  ~320 deg mauve   chem-m7 ~163 deg forest
     chem-m8 ~175 deg teal      bio-m5  ~180 deg teal    chem-m5 ~208 deg blue
     bio-m8  ~234 deg indigo    chem-m6 ~257 deg violet
     phys-m5 ~207 deg blue      phys-m6  ~18 deg copper  phys-m7 ~263 deg violet
     phys-m8 ~224 deg navy
   Biology Year 11 (added 2026-08-11, see the note above that tier):
     bio-m1   ~24 deg sienna    bio-m2   ~55 deg olive   bio-m3 ~158 deg emerald
     bio-m4  ~194 deg teal
   Chemistry Year 11 (added 2026-08-02, see the note above that tier):
     chem-m1  ~26 deg stone     chem-m2 ~345 deg crimson chem-m3  ~47 deg bronze
     chem-m4  ~15 deg magma
   Physics Year 11 (added 2026-08-11, see the note above that tier):
     phys-m1  ~78 deg bronze    phys-m2 ~128 deg green   phys-m3 ~186 deg jade
     phys-m4 ~344 deg magenta
   These degrees are CIE Lab hue and are a rough guide only. Hue distance lies at
   low chroma: bio-m8 and phys-m6 sit ~58 deg apart and are CIEDE2000 4.6, which
   is the same colour to a learner. Check a new accent with
   `node scripts/audit-warm-accents.js --add '#dark,#mid' --gate CANDIDATE`.     */

/* Every accent below is a dark, saturated gradient, so hero text must be white.
   This sheet owns the hero background, so it has to own the hero foreground too:
   a module stylesheet that hard-codes a dark title for its own pale pre-warm hero
   (chem-m6-sa.css does exactly this, `color:#1a2040 !important`) otherwise drops
   the title to 2.60:1 against the accent, which fails WCAG AA even for large text.
   Measured before this rule: chem-m6 2.60:1. After: 8.6:1. */
body[class*="-m"][class*="-bg"][class*="-bg"] .sa-hero h1,
body[class*="-m"][class*="-bg"][class*="-bg"] .sa-hero .sa-hero-title,
body[class*="-m"][class*="-bg"][class*="-bg"] .sa-hero-title { color:#fff !important }

/* Mathematics Advanced Year 12: deep slate -> clear blue -> shared gold */
body.sa-maths-adv-y12-bg.sa-maths-adv-y12-bg .sa-hero{background:linear-gradient(135deg,#253437 0%,#1579c1 55%,#dcae63 132%) !important}
body.sa-maths-adv-y12-bg.sa-maths-adv-y12-bg .sa-tab[aria-selected="true"],body.sa-maths-adv-y12-bg.sa-maths-adv-y12-bg .sa-tab.active,body.sa-maths-adv-y12-bg.sa-maths-adv-y12-bg .cta,body.sa-maths-adv-y12-bg.sa-maths-adv-y12-bg .sa-donext-go,body.sa-maths-adv-y12-bg.sa-maths-adv-y12-bg .sa-step-continue{background:linear-gradient(135deg,#1579c1,#253437) !important;box-shadow:0 4px 0 #172123}

/* M7 Infectious Disease: warm plum -> rose -> gold */
body.bio-m7-bg.bio-m7-bg .sa-hero{background:linear-gradient(135deg,#5a3f52 0%,#9c5c6e 52%,#dcae63 130%) !important}
body.bio-m7-bg.bio-m7-bg .sa-tab[aria-selected="true"],body.bio-m7-bg.bio-m7-bg .sa-tab.active,body.bio-m7-bg.bio-m7-bg .cta,body.bio-m7-bg.bio-m7-bg .sa-donext-go,body.bio-m7-bg.bio-m7-bg .sa-step-continue{background:linear-gradient(135deg,var(--w-rose),var(--w-plum)) !important;box-shadow:0 4px 0 var(--w-plum-deep)}
/* M5 Heredity: warm teal -> plum */
body.bio-m5-bg.bio-m5-bg .sa-hero{background:linear-gradient(135deg,#2f6d69 0%,#6d5b8a 55%,#dcae63 130%) !important}
body.bio-m5-bg.bio-m5-bg .sa-tab[aria-selected="true"],body.bio-m5-bg.bio-m5-bg .sa-tab.active,body.bio-m5-bg.bio-m5-bg .cta,body.bio-m5-bg.bio-m5-bg .sa-donext-go,body.bio-m5-bg.bio-m5-bg .sa-step-continue{background:linear-gradient(135deg,var(--w-teal),var(--w-plum)) !important;box-shadow:0 4px 0 var(--w-plum-deep)}
/* M6 Genetic Change: warm coral -> gold (placeholder; tune at M6 pilot) */
body.bio-m6-bg.bio-m6-bg .sa-hero{background:linear-gradient(135deg,#8a4a3f 0%,#c47165 52%,#dcae63 130%) !important}
body.bio-m6-bg.bio-m6-bg .sa-tab[aria-selected="true"],body.bio-m6-bg.bio-m6-bg .sa-tab.active,body.bio-m6-bg.bio-m6-bg .cta,body.bio-m6-bg.bio-m6-bg .sa-donext-go,body.bio-m6-bg.bio-m6-bg .sa-step-continue{background:linear-gradient(135deg,#c47165,#8a4a3f) !important;box-shadow:0 4px 0 #6e3931}
/* ---- Biology M8 Non-infectious Disease and Disorders: indigo-slate -> periwinkle -> gold.
   Sits in the one genuinely open arc of the module wheel (~234 deg), between chem-m5's
   saturated blue (~208) and chem-m6's saturated violet (~257). Held deliberately low in
   saturation so it reads as slate rather than competing with either neighbour, and it
   carries the shared #dcae63 gold terminal like all seven others. ---- */
body.bio-m8-bg.bio-m8-bg .sa-hero{background:linear-gradient(135deg,#3d4270 0%,#7a7fae 55%,#dcae63 132%) !important}
body.bio-m8-bg.bio-m8-bg .sa-tab[aria-selected="true"],body.bio-m8-bg.bio-m8-bg .sa-tab.active,body.bio-m8-bg.bio-m8-bg .cta,body.bio-m8-bg.bio-m8-bg .sa-donext-go,body.bio-m8-bg.bio-m8-bg .sa-step-continue{background:linear-gradient(135deg,#7a7fae,#3d4270) !important;box-shadow:0 4px 0 #2c3054}
/* ---- Chemistry M5 Equilibrium: cool blue -> teal, distinct from the bio warm-earth heroes (tune at L01 pilot) ---- */
body.chem-m5-bg.chem-m5-bg .sa-hero{background:linear-gradient(135deg,#265a86 0%,#3f8a86 55%,#dcae63 132%) !important}
body.chem-m5-bg.chem-m5-bg .sa-tab[aria-selected="true"],body.chem-m5-bg.chem-m5-bg .sa-tab.active,body.chem-m5-bg.chem-m5-bg .cta,body.chem-m5-bg.chem-m5-bg .sa-donext-go,body.chem-m5-bg.chem-m5-bg .sa-step-continue{background:linear-gradient(135deg,#3f8a86,#2f6d69) !important;box-shadow:0 4px 0 #24534f}
/* ---- Chemistry M6 Acid/Base: indicator violet -> magenta -> gold, distinct from chem-m5 blue-teal and from bio-m7 muted rose (tune at L01 pilot) ---- */
body.chem-m6-bg.chem-m6-bg .sa-hero{background:linear-gradient(135deg,#4a3a7c 0%,#8f4f8e 55%,#dcae63 132%) !important}
body.chem-m6-bg.chem-m6-bg .sa-tab[aria-selected="true"],body.chem-m6-bg.chem-m6-bg .sa-tab.active,body.chem-m6-bg.chem-m6-bg .cta,body.chem-m6-bg.chem-m6-bg .sa-donext-go,body.chem-m6-bg.chem-m6-bg .sa-step-continue{background:linear-gradient(135deg,#8f4f8e,#5f3a7a) !important;box-shadow:0 4px 0 #4a2d61}
/* ---- Chemistry M7 Organic Chemistry: forest green -> olive (distinct from chem M5 blue and M6 violet) ---- */
body.chem-m7-bg.chem-m7-bg .sa-hero{background:linear-gradient(135deg,#2d6a4f 0%,#5f8c52 55%,#dcae63 132%) !important}
body.chem-m7-bg.chem-m7-bg .sa-tab[aria-selected="true"],body.chem-m7-bg.chem-m7-bg .sa-tab.active,body.chem-m7-bg.chem-m7-bg .cta,body.chem-m7-bg.chem-m7-bg .sa-donext-go,body.chem-m7-bg.chem-m7-bg .sa-step-continue{background:linear-gradient(135deg,#2d6a4f,#5f8c52) !important;box-shadow:0 4px 0 #24543f}
/* ---- Chemistry M8 Applying Chemical Ideas: deep teal -> slate ---- */
body.chem-m8-bg.chem-m8-bg .sa-hero{background:linear-gradient(135deg,#1f4f5c 0%,#4a7d86 55%,#dcae63 132%) !important}
body.chem-m8-bg.chem-m8-bg .sa-tab[aria-selected="true"],body.chem-m8-bg.chem-m8-bg .sa-tab.active,body.chem-m8-bg.chem-m8-bg .cta,body.chem-m8-bg.chem-m8-bg .sa-donext-go,body.chem-m8-bg.chem-m8-bg .sa-step-continue{background:linear-gradient(135deg,#1f4f5c,#4a7d86) !important;box-shadow:0 4px 0 #173c46}

/* Chemistry Y11 M1-M4 accents use distinct warm-earth hues. Both gradient stops\n   meet WCAG AA normal-text contrast with white; the off-canvas gold carries no text. */

/* ---- Chemistry M1 Properties and Structure of Matter: mineral stone -> warm sand -> gold ---- */
body.chem-m1-bg.chem-m1-bg .sa-hero{background:linear-gradient(135deg,#4a4038 0%,#826e5c 55%,#dcae63 132%) !important}
body.chem-m1-bg.chem-m1-bg .sa-tab[aria-selected="true"],body.chem-m1-bg.chem-m1-bg .sa-tab.active,body.chem-m1-bg.chem-m1-bg .cta,body.chem-m1-bg.chem-m1-bg .sa-donext-go,body.chem-m1-bg.chem-m1-bg .sa-step-continue{background:linear-gradient(135deg,#826e5c,#4a4038) !important;box-shadow:0 4px 0 #37302a}
/* ---- Chemistry M2 Introduction to Quantitative Chemistry: deep crimson -> brick red -> gold ---- */
body.chem-m2-bg.chem-m2-bg .sa-hero{background:linear-gradient(135deg,#6b2233 0%,#b04a4a 55%,#dcae63 132%) !important}
body.chem-m2-bg.chem-m2-bg .sa-tab[aria-selected="true"],body.chem-m2-bg.chem-m2-bg .sa-tab.active,body.chem-m2-bg.chem-m2-bg .cta,body.chem-m2-bg.chem-m2-bg .sa-donext-go,body.chem-m2-bg.chem-m2-bg .sa-step-continue{background:linear-gradient(135deg,#b04a4a,#6b2233) !important;box-shadow:0 4px 0 #4e1826}
/* ---- Chemistry M3 Reactive Chemistry: dark bronze -> brass -> gold (the metal reactivity series) ---- */
body.chem-m3-bg.chem-m3-bg .sa-hero{background:linear-gradient(135deg,#5c4a1d 0%,#8f7222 55%,#dcae63 132%) !important}
body.chem-m3-bg.chem-m3-bg .sa-tab[aria-selected="true"],body.chem-m3-bg.chem-m3-bg .sa-tab.active,body.chem-m3-bg.chem-m3-bg .cta,body.chem-m3-bg.chem-m3-bg .sa-donext-go,body.chem-m3-bg.chem-m3-bg .sa-step-continue{background:linear-gradient(135deg,#8f7222,#5c4a1d) !important;box-shadow:0 4px 0 #443616}
/* ---- Chemistry M4 Drivers of Reactions: magma, deep ember -> hot orange -> gold (energy and entropy) ---- */
body.chem-m4-bg.chem-m4-bg .sa-hero{background:linear-gradient(135deg,#5e2418 0%,#b0492a 55%,#dcae63 132%) !important}
body.chem-m4-bg.chem-m4-bg .sa-tab[aria-selected="true"],body.chem-m4-bg.chem-m4-bg .sa-tab.active,body.chem-m4-bg.chem-m4-bg .cta,body.chem-m4-bg.chem-m4-bg .sa-donext-go,body.chem-m4-bg.chem-m4-bg .sa-step-continue{background:linear-gradient(135deg,#b0492a,#5e2418) !important;box-shadow:0 4px 0 #451a11}

/* Hero ledes stay near-white without depending on v2 initialisation or data-subject.\n   Scope excludes generic hero paragraphs so light-panel hook copy remains readable. */
body.chem-m1-bg.chem-m1-bg .sa-hero .sa-hero-sub,body.chem-m1-bg.chem-m1-bg .sa-hero .sa-hero-desc,
body.chem-m2-bg.chem-m2-bg .sa-hero .sa-hero-sub,body.chem-m2-bg.chem-m2-bg .sa-hero .sa-hero-desc,
body.chem-m3-bg.chem-m3-bg .sa-hero .sa-hero-sub,body.chem-m3-bg.chem-m3-bg .sa-hero .sa-hero-desc,
body.chem-m4-bg.chem-m4-bg .sa-hero .sa-hero-sub,body.chem-m4-bg.chem-m4-bg .sa-hero .sa-hero-desc,
body.chem-m5-bg.chem-m5-bg .sa-hero .sa-hero-sub,body.chem-m5-bg.chem-m5-bg .sa-hero .sa-hero-desc,
body.chem-m6-bg.chem-m6-bg .sa-hero .sa-hero-sub,body.chem-m6-bg.chem-m6-bg .sa-hero .sa-hero-desc,
body.chem-m7-bg.chem-m7-bg .sa-hero .sa-hero-sub,body.chem-m7-bg.chem-m7-bg .sa-hero .sa-hero-desc{color:#eef7f2 !important}

/* ---- Physics M5 Advanced Mechanics: midnight blue -> orbital cyan -> signal gold ---- */
body.phys-m5-bg.phys-m5-bg .sa-hero{background:linear-gradient(135deg,#173f5f 0%,#287c8e 55%,#dcae63 132%) !important}
body.phys-m5-bg.phys-m5-bg .sa-tab[aria-selected="true"],body.phys-m5-bg.phys-m5-bg .sa-tab.active,body.phys-m5-bg.phys-m5-bg .cta,body.phys-m5-bg.phys-m5-bg .sa-donext-go,body.phys-m5-bg.phys-m5-bg .sa-step-continue{background:linear-gradient(135deg,#287c8e,#173f5f) !important;box-shadow:0 4px 0 #102f47}
/* ---- Physics M6 Electromagnetism: accessible field-line copper -> indigo -> gold ---- */
body.phys-m6-bg.phys-m6-bg .sa-hero{background:linear-gradient(135deg,#713f2a 0%,#474b87 58%,#dcae63 132%) !important}
body.phys-m6-bg.phys-m6-bg .sa-tab[aria-selected="true"],body.phys-m6-bg.phys-m6-bg .sa-tab.active,body.phys-m6-bg.phys-m6-bg .cta,body.phys-m6-bg.phys-m6-bg .sa-donext-go,body.phys-m6-bg.phys-m6-bg .sa-step-continue{background:linear-gradient(135deg,#474b87,#713f2a) !important;box-shadow:0 4px 0 #382447}
/* ---- Physics M7 The Nature of Light: spectrum sweep, deep violet -> warm rose -> gold ---- */
body.phys-m7-bg.phys-m7-bg .sa-hero{background:linear-gradient(135deg,#3f2d5c 0%,#9e5a67 55%,#dcae63 132%) !important}
body.phys-m7-bg.phys-m7-bg .sa-tab[aria-selected="true"],body.phys-m7-bg.phys-m7-bg .sa-tab.active,body.phys-m7-bg.phys-m7-bg .cta,body.phys-m7-bg.phys-m7-bg .sa-donext-go,body.phys-m7-bg.phys-m7-bg .sa-step-continue{background:linear-gradient(135deg,#9e5a67,#3f2d5c) !important;box-shadow:0 4px 0 #2c1f42}
/* ---- Physics M8 From the Universe to the Atom: night sky, deep navy -> starlight blue -> gold ---- */
body.phys-m8-bg.phys-m8-bg .sa-hero{background:linear-gradient(135deg,#141f3d 0%,#3c5a8c 55%,#dcae63 132%) !important}
body.phys-m8-bg.phys-m8-bg .sa-tab[aria-selected="true"],body.phys-m8-bg.phys-m8-bg .sa-tab.active,body.phys-m8-bg.phys-m8-bg .cta,body.phys-m8-bg.phys-m8-bg .sa-donext-go,body.phys-m8-bg.phys-m8-bg .sa-step-continue{background:linear-gradient(135deg,#3c5a8c,#141f3d) !important;box-shadow:0 4px 0 #0e1529}

/* ===== Mathematics (added 2026-08-11, Job D/E Phase 0) =====

   READ THIS BEFORE ADDING A MATHS CLASS. Maths is the first subject whose body class does
   NOT already satisfy the shared skin's selector, and getting it wrong fails silently in a
   way no gate catches.

   Every rule in this sheet is scoped to  body[class*="-m"][class*="-bg"].  Maths lessons
   ship with  class="sa maths-std-bg" / "sa maths-adv-bg", which contain "-bg" but NO "-m"
   (their only hyphens are "-std"/"-adv" and "-bg"). So none of this stylesheet has ever
   applied to any maths lesson. An accent block alone would still match, because it names
   its class directly, and the result is a recoloured hero on a completely unskinned page.
   Every documented gate passes in that state.

   Hence the names below: the "-m" comes from "-maths", which is stable because every maths
   class contains the word. Do NOT rename to a form where "maths" leads the string
   ("maths-std-y11-bg" has no "-m" and silently skips the skin), and do not key a maths
   class on its focus area ("...-earning-bg" fails; "...-measurement-bg" passes only by
   luck of the word).

   ONE ACCENT PER COURSE, not per module, and that is a capacity decision rather than a
   stylistic one. Measured with CIEDE2000 against the sixteen accents above: eight
   focus-area accents separate by only dE 6.4 and two fail the 3:1 large-text floor; the
   open green arc (CIELCh 86 to 161, the only gap wide enough) holds four to five accents;
   Advanced Y11's six modules collapse to dE 1.6 wherever else they are placed. Module
   identity is carried by the hero badge (data-module-label), which every lesson has.
   Re-measure with scripts/accent-colour-analysis.py before adding any maths accent.

     maths-std-y11   CIELCh hue 128, L* 20    nearest shipped chem-m3, dE 18.7
     maths-adv-y11   CIELCh hue 116, L* 41    nearest shipped chem-m3, dE 16.5
     separation between the two ........................... dE 17.7

   THE PAIRING IS THE MEASUREMENT, not each accent alone. Job D and Job E each proposed a
   Standard colour and both were approved before anyone compared them. Job E's green
   (#1d3706) scored a strong dE 18.7 against the shipped sixteen, and Job D's Advanced olive
   (#2d3f01) a strong 15.0, and the two of them together were **dE 4.9 apart**: the one
   combination that fails, reachable only by approving two individually-good proposals. So
   check any new maths accent against the other maths accents, not just against the sixteen.

     maths-std-y11  CIELCh hue 345, L* 38   dE 15.7 from the sixteen (nearest bio-m7)
     maths-adv-y11  CIELCh hue 118, L* 24   dE 15.0 from the sixteen (nearest chem-m3)
     separation between the two courses ......................... dE 57.4

   White on the start stops is 6.96 and 11.52, on the mid stops 3.76 and 6.50: both above
   the 3:1 large-text floor and inside the shipped range (existing mid stops run 3.56-8.00).

   Standard Y12, Advanced Y12 and the extensions are NOT sited yet. The 165-190 teal arc is
   reserved for the Y12 pair, but the obvious candidates there sit only dE 6.3 apart, so
   they must be re-optimised rather than copied. */

/* ---- Mathematics Standard Year 11: deep magenta-plum -> rose -> gold ---- */
body.sa-maths-std-y11-bg.sa-maths-std-y11-bg .sa-hero{background:linear-gradient(135deg,#9a2f71 0%,#c86193 55%,#dcae63 132%) !important}
body.sa-maths-std-y11-bg.sa-maths-std-y11-bg .sa-tab[aria-selected="true"],body.sa-maths-std-y11-bg.sa-maths-std-y11-bg .sa-tab.active,body.sa-maths-std-y11-bg.sa-maths-std-y11-bg .cta,body.sa-maths-std-y11-bg.sa-maths-std-y11-bg .sa-donext-go,body.sa-maths-std-y11-bg.sa-maths-std-y11-bg .sa-step-continue{background:linear-gradient(135deg,#c86193,#9a2f71) !important;box-shadow:0 4px 0 #6f2153}
/* ---- Mathematics Advanced Year 11: deep olive -> moss -> gold (Job D's colours, Job E's naming) ---- */
body.sa-maths-adv-y11-bg.sa-maths-adv-y11-bg .sa-hero{background:linear-gradient(135deg,#2d3f01 0%,#516520 55%,#dcae63 132%) !important}
body.sa-maths-adv-y11-bg.sa-maths-adv-y11-bg .sa-tab[aria-selected="true"],body.sa-maths-adv-y11-bg.sa-maths-adv-y11-bg .sa-tab.active,body.sa-maths-adv-y11-bg.sa-maths-adv-y11-bg .cta,body.sa-maths-adv-y11-bg.sa-maths-adv-y11-bg .sa-donext-go,body.sa-maths-adv-y11-bg.sa-maths-adv-y11-bg .sa-step-continue{background:linear-gradient(135deg,#516520,#2d3f01) !important;box-shadow:0 4px 0 #202d01}
/* ---- Mathematics Extension 2 Year 12: deep violet to electric plum to gold ---- */
body.sa-maths-ext2-y12-bg.sa-maths-ext2-y12-bg .sa-hero{background:linear-gradient(135deg,#780b8e 0%,#b011d0 55%,#dcae63 132%) !important}
body.sa-maths-ext2-y12-bg.sa-maths-ext2-y12-bg .sa-tab[aria-selected="true"],body.sa-maths-ext2-y12-bg.sa-maths-ext2-y12-bg .sa-tab.active,body.sa-maths-ext2-y12-bg.sa-maths-ext2-y12-bg .cta,body.sa-maths-ext2-y12-bg.sa-maths-ext2-y12-bg .sa-donext-go,body.sa-maths-ext2-y12-bg.sa-maths-ext2-y12-bg .sa-step-continue{background:linear-gradient(135deg,#b011d0,#780b8e) !important;box-shadow:0 4px 0 #520861}
/* ---- Mathematics Advanced Year 12: charcoal teal -> ocean blue -> gold ---- */
body.sa-maths-adv-y12-bg.sa-maths-adv-y12-bg .sa-hero{background:linear-gradient(135deg,#253437 0%,#1579c1 55%,#dcae63 132%) !important}
body.sa-maths-adv-y12-bg.sa-maths-adv-y12-bg .sa-tab[aria-selected="true"],body.sa-maths-adv-y12-bg.sa-maths-adv-y12-bg .sa-tab.active,body.sa-maths-adv-y12-bg.sa-maths-adv-y12-bg .cta,body.sa-maths-adv-y12-bg.sa-maths-adv-y12-bg .sa-donext-go,body.sa-maths-adv-y12-bg.sa-maths-adv-y12-bg .sa-step-continue{background:linear-gradient(135deg,#1579c1,#253437) !important;box-shadow:0 4px 0 #192527}

/* ---- Mathematics Standard Year 12: deep indigo -> violet -> gold ----
   The last maths accent to be wired. 43 shipped lessons carried
   sa-maths-std-y12-bg with no rule anywhere, so every one of them painted the
   shared default teal.

   Hue chosen by measurement, not by eye. The estate already declares 28 accents
   on a 360 degree wheel -- roughly 13 degrees apart -- so the constraint was:
   at least 40 degrees from EVERY maths sibling (a learner compares maths courses
   with each other, not with bio-m1), and the largest perceptual distance
   available from all 28 plus the shared default. This is hue 246, dE >= 37 from
   the nearest of them, and white on the mid stop is 10.96:1 -- against 3.76:1 for
   the Standard Year 11 magenta it sits beside. */
body.sa-maths-std-y12-bg.sa-maths-std-y12-bg .sa-hero{background:linear-gradient(135deg,#2a1f6b 0%,#4b3bb2 55%,#dcae63 132%) !important}
body.sa-maths-std-y12-bg.sa-maths-std-y12-bg .sa-tab[aria-selected="true"],body.sa-maths-std-y12-bg.sa-maths-std-y12-bg .sa-tab.active,body.sa-maths-std-y12-bg.sa-maths-std-y12-bg .cta,body.sa-maths-std-y12-bg.sa-maths-std-y12-bg .sa-donext-go,body.sa-maths-std-y12-bg.sa-maths-std-y12-bg .sa-step-continue{background:linear-gradient(135deg,#4b3bb2,#2a1f6b) !important;box-shadow:0 4px 0 #1e1650}
/* ---- Mathematics Extension 1 (added 2026-08-19, stream E) ----
   Two accents, because maths reuses module numbers across years and Extension 1
   spans both: the class must encode the year or Year 11 and Year 12 collide.

   THE CLASS NAME IS LOAD-BEARING BEYOND NAMING. Every rule in this sheet is scoped
   to body[class*="-m"][class*="-bg"]. All 185 Extension 1 lessons shipped carrying
   `maths-ext1-bg`, which has NO "-m" substring, so they matched the accent block
   alone and NONE of the 204 warm rules -- a recoloured hero on an unskinned page,
   with every documented gate green. `sa-maths-ext1-y11-bg` contains "-m" at "sa-m".

   Chosen against all 29 shipping accents with scripts/audit-warm-accents.js, which
   compares the MINIMUM over every stop-to-stop pair rather than dark against dark:
     Y11 rust      nearest maths 27.9 (std-y11), nearest other 8.3 (chem-m4)
     Y12 bronze    nearest maths 21.4 (adv-y11), nearest other 8.6 (chem-m3)
     between them  17.6, against a 10 same-subject bar
   Both text-bearing stops clear WCAG AA against the white hero title (9.7/4.5 and
   10.6/4.5). The #dcae63 gold sits past 100%, carries no text, and is reported by
   the audit rather than gated.

   The !important is load-bearing and must not be tidied away: every lesson hero
   carries an inline style="background:linear-gradient(...)", and an inline style
   beats any stylesheet rule that is not !important. The accent does not apply, it
   WINS -- and only while this survives. */
body.sa-maths-ext1-y11-bg.sa-maths-ext1-y11-bg .sa-hero{background:linear-gradient(135deg,#81210e 0%,#dc3918 55%,#dcae63 132%) !important}
body.sa-maths-ext1-y11-bg.sa-maths-ext1-y11-bg .sa-tab[aria-selected="true"],body.sa-maths-ext1-y11-bg.sa-maths-ext1-y11-bg .sa-tab.active,body.sa-maths-ext1-y11-bg.sa-maths-ext1-y11-bg .cta,body.sa-maths-ext1-y11-bg.sa-maths-ext1-y11-bg .sa-donext-go,body.sa-maths-ext1-y11-bg.sa-maths-ext1-y11-bg .sa-step-continue{background:linear-gradient(135deg,#dc3918,#81210e) !important;box-shadow:0 4px 0 #5c170a}
body.sa-maths-ext1-y12-bg.sa-maths-ext1-y12-bg .sa-hero{background:linear-gradient(135deg,#5a3702 0%,#a96704 55%,#dcae63 132%) !important}
body.sa-maths-ext1-y12-bg.sa-maths-ext1-y12-bg .sa-tab[aria-selected="true"],body.sa-maths-ext1-y12-bg.sa-maths-ext1-y12-bg .sa-tab.active,body.sa-maths-ext1-y12-bg.sa-maths-ext1-y12-bg .cta,body.sa-maths-ext1-y12-bg.sa-maths-ext1-y12-bg .sa-donext-go,body.sa-maths-ext1-y12-bg.sa-maths-ext1-y12-bg .sa-step-continue{background:linear-gradient(135deg,#a96704,#5a3702) !important;box-shadow:0 4px 0 #3d2501}
/* Physics Year 11 M1-M4 (added 2026-08-11). Both text-bearing stops clear WCAG AA
   normal text against the white hero title; the #dcae63 gold sits past 100% and
   carries no text. Chosen with scripts/audit-warm-accents.js, which measures
   CIEDE2000 rather than hue degrees.
   M1 and M2 keep the hue family physics-y11-sa.css already gave them (amber,
   green). M3 and M4 could NOT: the blue band is held by phys-m5 and phys-m8 and
   the indigo band by phys-m6's second stop, so M3 takes jade and M4 magenta.
   Every pair sits >=10 CIEDE2000 from all four Physics Y12 accents, which are the
   ones a physics learner meets in the same subject nav. Cross-subject distance is
   7-11, above the shipping worst case of 2.4 (bio-m7 vs phys-m7). */

/* ---- Physics M1 Kinematics: deep bronze -> amber -> gold (the motion trail) ---- */
body.phys-m1-bg.phys-m1-bg .sa-hero{background:linear-gradient(135deg,#43331c 0%,#7e570b 55%,#dcae63 132%) !important}
body.phys-m1-bg.phys-m1-bg .sa-tab[aria-selected="true"],body.phys-m1-bg.phys-m1-bg .sa-tab.active,body.phys-m1-bg.phys-m1-bg .cta,body.phys-m1-bg.phys-m1-bg .sa-donext-go,body.phys-m1-bg.phys-m1-bg .sa-step-continue{background:linear-gradient(135deg,#7e570b,#43331c) !important;box-shadow:0 4px 0 #2f2413}
/* ---- Physics M2 Dynamics: forest -> grass green, the one genuinely open arc ---- */
body.phys-m2-bg.phys-m2-bg .sa-hero{background:linear-gradient(135deg,#245214 0%,#3f7d12 55%,#dcae63 132%) !important}
body.phys-m2-bg.phys-m2-bg .sa-tab[aria-selected="true"],body.phys-m2-bg.phys-m2-bg .sa-tab.active,body.phys-m2-bg.phys-m2-bg .cta,body.phys-m2-bg.phys-m2-bg .sa-donext-go,body.phys-m2-bg.phys-m2-bg .sa-step-continue{background:linear-gradient(135deg,#3f7d12,#245214) !important;box-shadow:0 4px 0 #18380d}
/* ---- Physics M3 Waves and Thermodynamics: deep pine -> jade (wave crest) ---- */
body.phys-m3-bg.phys-m3-bg .sa-hero{background:linear-gradient(135deg,#1e4640 0%,#0d7d69 55%,#dcae63 132%) !important}
body.phys-m3-bg.phys-m3-bg .sa-tab[aria-selected="true"],body.phys-m3-bg.phys-m3-bg .sa-tab.active,body.phys-m3-bg.phys-m3-bg .cta,body.phys-m3-bg.phys-m3-bg .sa-donext-go,body.phys-m3-bg.phys-m3-bg .sa-step-continue{background:linear-gradient(135deg,#0d7d69,#1e4640) !important;box-shadow:0 4px 0 #14302c}
/* ---- Physics M4 Electricity and Magnetism: deep wine -> field-line magenta ---- */
body.phys-m4-bg.phys-m4-bg .sa-hero{background:linear-gradient(135deg,#612a44 0%,#b8497f 55%,#dcae63 132%) !important}
body.phys-m4-bg.phys-m4-bg .sa-tab[aria-selected="true"],body.phys-m4-bg.phys-m4-bg .sa-tab.active,body.phys-m4-bg.phys-m4-bg .cta,body.phys-m4-bg.phys-m4-bg .sa-donext-go,body.phys-m4-bg.phys-m4-bg .sa-step-continue{background:linear-gradient(135deg,#b8497f,#612a44) !important;box-shadow:0 4px 0 #431d2f}
/* ===== Biology Year 11 M1-M4 (added 2026-08-11) =====

   Picked against ALL sixteen existing accent modules, not by eye. Method and
   measurements are in docs/BIO-Y11-PHASE0-ACCENTS.md.

   The wheel is full: sixteen modules already hold accents and every hero also
   ends on the shared #dcae63 gold, so no arc is genuinely empty. The shipped set
   is itself not uniformly separated, bio-m7 vs phys-m7 measure CIEDE2000 2.4
   apart and chem-m8 vs phys-m5 4.4, against a median of 19.5 over 120 pairs.
   Cross-subject distance is therefore not, and cannot be, the binding rule.

   These four were selected on a tiered rule that matches what a learner meets:
     tier 1  the four Y11 Bio modules vs each other   min dE00 23.1  (median 19.5)
     tier 2  vs the other Biology modules bio-m5..m8  min dE00 13.1
     tier 3  vs Chemistry / Physics                   min dE00  7.0  (shipped floor 2.4)

   Contrast, white on both gradient stops (the off-canvas gold carries no text):
     bio-m1 10.05 / 4.81   bio-m2 8.07 / 5.56
     bio-m3  9.97 / 4.79   bio-m4 7.48 / 5.55
   All eight clear WCAG AA normal text (4.5), which four of the eight Y12 stop2s
   do not. Chroma is held inside the shipped C* band (16.7-43.6) so these read as
   the same muted family rather than competing with it.                          */

/* ---- Biology M1 Cells as the Basis of Life: burnt sienna -> terracotta -> gold ---- */
body.bio-m1-bg.bio-m1-bg .sa-hero{background:linear-gradient(135deg,#6e3007 0%,#a76036 55%,#dcae63 132%) !important}
body.bio-m1-bg.bio-m1-bg .sa-tab[aria-selected="true"],body.bio-m1-bg.bio-m1-bg .sa-tab.active,body.bio-m1-bg.bio-m1-bg .cta,body.bio-m1-bg.bio-m1-bg .sa-donext-go,body.bio-m1-bg.bio-m1-bg .sa-step-continue{background:linear-gradient(135deg,#a76036,#6e3007) !important;box-shadow:0 4px 0 #561b00}
/* ---- Biology M2 Organisation of Living Things: dark olive -> bronze -> gold ---- */
body.bio-m2-bg.bio-m2-bg .sa-hero{background:linear-gradient(135deg,#595100 0%,#746918 55%,#dcae63 132%) !important}
body.bio-m2-bg.bio-m2-bg .sa-tab[aria-selected="true"],body.bio-m2-bg.bio-m2-bg .sa-tab.active,body.bio-m2-bg.bio-m2-bg .cta,body.bio-m2-bg.bio-m2-bg .sa-donext-go,body.bio-m2-bg.bio-m2-bg .sa-step-continue{background:linear-gradient(135deg,#746918,#595100) !important;box-shadow:0 4px 0 #433c00}
/* ---- Biology M3 Biological Diversity: deep forest -> emerald -> gold ---- */
body.bio-m3-bg.bio-m3-bg .sa-hero{background:linear-gradient(135deg,#004d31 0%,#008358 55%,#dcae63 132%) !important}
body.bio-m3-bg.bio-m3-bg .sa-tab[aria-selected="true"],body.bio-m3-bg.bio-m3-bg .sa-tab.active,body.bio-m3-bg.bio-m3-bg .cta,body.bio-m3-bg.bio-m3-bg .sa-donext-go,body.bio-m3-bg.bio-m3-bg .sa-step-continue{background:linear-gradient(135deg,#008358,#004d31) !important;box-shadow:0 4px 0 #00381e}
/* ---- Biology M4 Ecosystem Dynamics: deep water teal -> lagoon -> gold ---- */
body.bio-m4-bg.bio-m4-bg .sa-hero{background:linear-gradient(135deg,#005c79 0%,#007193 55%,#dcae63 132%) !important}
body.bio-m4-bg.bio-m4-bg .sa-tab[aria-selected="true"],body.bio-m4-bg.bio-m4-bg .sa-tab.active,body.bio-m4-bg.bio-m4-bg .cta,body.bio-m4-bg.bio-m4-bg .sa-donext-go,body.bio-m4-bg.bio-m4-bg .sa-step-continue{background:linear-gradient(135deg,#007193,#005c79) !important;box-shadow:0 4px 0 #004762}

/* Hero ledes stay near-white on the four new accents, same reason as the chem tier. */
body.bio-m1-bg.bio-m1-bg .sa-hero .sa-hero-sub,body.bio-m1-bg.bio-m1-bg .sa-hero .sa-hero-desc,
body.bio-m2-bg.bio-m2-bg .sa-hero .sa-hero-sub,body.bio-m2-bg.bio-m2-bg .sa-hero .sa-hero-desc,
body.bio-m3-bg.bio-m3-bg .sa-hero .sa-hero-sub,body.bio-m3-bg.bio-m3-bg .sa-hero .sa-hero-desc,
body.bio-m4-bg.bio-m4-bg .sa-hero .sa-hero-sub,body.bio-m4-bg.bio-m4-bg .sa-hero .sa-hero-desc{color:#eef7f2 !important}

/* Forced-colours (Windows High Contrast) strips backgrounds, so the warm gradient
   buttons above lose their shape. Those rules use border:0 !important and load after
   senior-adventure-v2.css, which would otherwise supply the boundary, so the override
   has to be restated here. Without this the do-next control has no visible edge.

   The attribute selector is repeated to reach (0,5,1). It previously scored (0,3,1),
   which merely TIED the accent rules above and won on source order alone. Now that the
   accent tier is at (0,4,1) (see the ladder note at the top of this section) a tie is no
   longer good enough, and without the repeat the accent gradient would win here and
   silently re-break the fix this block exists to provide.

   .sa-tab is now covered too: the accent tier paints active tabs with an !important
   gradient, so in High Contrast mode the selected tab lost its edge for the same reason
   the do-next button did. */
@media (forced-colors: active) {
  body[class*="-m"][class*="-bg"][class*="-bg"][class*="-bg"] .sa-donext-go,
  body[class*="-m"][class*="-bg"][class*="-bg"][class*="-bg"] .sa-step-continue,
  body[class*="-m"][class*="-bg"][class*="-bg"][class*="-bg"] .cta,
  body[class*="-m"][class*="-bg"][class*="-bg"][class*="-bg"] .sa-tab[aria-selected="true"],
  body[class*="-m"][class*="-bg"][class*="-bg"][class*="-bg"] .sa-tab.active {
    background: ButtonFace !important;
    border: 2px solid ButtonText !important;
    box-shadow: none !important;
    color: ButtonText !important;
    forced-color-adjust: auto;
  }
}