@import url('/assets/fonts/fonts.css');
/* Figtree: deck body text, open and light enough to read across a classroom. It has no Greek,
   so Manrope stays next in --font-body and supplies those letters. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-normal-300-900-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-normal-300-900-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Shared calm teaching style. Year colours identify the course; diagram colours
   continue to identify physical quantities. Load after the deck-specific CSS. */
:root {
  color-scheme: light;
  --font-body: 'Figtree', 'Manrope', system-ui, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display: var(--font-display);
  --year-colour: #f6cea8;
  --year-ink: #80501e;
  --year-dark: #efb978;
  --bg-color: #f8f6f1;
  --bg-pattern: #ede9e0;
  --text-main: #1b1b1b;
  --text-secondary: #4a4540;
  --card-bg: #fff;
  --card-border: #ded9cf;
  --viewer-bg: #f1eee7;
  --muted-bg: #f3f0ea;
  --input-border: #bcb5a8;
  --brand-primary: var(--year-ink);
  --brand-accent: var(--year-colour);
  --brand-accent-strong: var(--year-ink);
  --focus: #28758a;
  --ink: var(--text-main);
  --muted: var(--text-secondary);
  --paper: var(--bg-color);
  --card: var(--card-bg);
  --diagram-bg: var(--viewer-bg);
  --navy: #2c4654;
  --navy-deep: #1f3340;
  --hi: var(--year-colour);
  --cyan: #28758a;
  --hot: #b34a2b;
  --violet: #7250a3;
  --alt: #e3bd65;
  --accent: var(--year-colour);
  --line: var(--card-border);
  --formula: color-mix(in srgb, var(--year-colour) 24%, var(--card-bg));
  --note: var(--muted-bg);
  --wrong: #a93624;
  --right: #31623e;
  --nav-bg: rgba(248, 246, 241, .96);
  --nav-border: var(--card-border);
  --soft-shadow: 0 4px 14px rgba(0, 0, 0, .04);
  --card-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}
/* Revision-note pane; set on .notes so it replaces the deck stylesheets' own. */
.notes {
  --rn-ink: var(--text-main);
  --rn-muted: var(--text-secondary);
  --rn-bg: var(--card-bg);
  --rn-bar: var(--bg-color);
  --rn-border: 1px solid var(--card-border);
  --rn-radius: 20px;
  --rn-trap: var(--wrong);
  --rn-tip: var(--right);
  --rn-more: var(--violet);
  --rn-accent: var(--brand-primary);
  --rn-callout: var(--muted-bg);
  --rn-font: 500 16px/1.5 var(--font-body);
  --rn-label-font: 600 13px var(--font-mono);
  --rn-label-case: none;
  --rn-tag-font: 600 12px var(--font-mono);
}
:root.deck-y10 { --year-colour: #d8eaa1; --year-ink: #49651f; --year-dark: #c8df85; }
:root.deck-y11 { --year-colour: #f6e7a5; --year-ink: #78601b; --year-dark: #ecda8e; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-color: #111110;
  --bg-pattern: #1a1a18;
  --text-main: #edebe8;
  --text-secondary: #c0bcb4;
  --card-bg: #1a1a19;
  --card-border: #41413b;
  --viewer-bg: #181816;
  --muted-bg: #242420;
  --input-border: #73736a;
  --brand-primary: var(--year-dark);
  --brand-accent-strong: var(--year-dark);
  --cyan: #76c5d9;
  --hot: #edaa8c;
  --violet: #bea3e7;
  --wrong: #f2a190;
  --right: #9accaa;
  --nav-bg: rgba(17, 17, 16, .96);
  --focus: #76c5d9;
}
body {
  background-color: var(--bg-color);
  background-image: radial-gradient(var(--bg-pattern) 1px, transparent 1px);
  background-size: 30px 30px;
  color: var(--text-main);
  font-family: var(--font-body);
}
.banner { background: var(--nav-bg); border-color: var(--nav-border); box-shadow: var(--soft-shadow); }
.banner-title { background: none; -webkit-text-fill-color: currentColor; color: var(--text-main); font: 400 22px var(--font-display); text-decoration: none; }
.companion-deck .banner { position: fixed; top: var(--standalone-top); left: 0; right: 0; z-index: 20; height: 60px; padding: 0 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; backdrop-filter: blur(10px); border-bottom: 1px solid var(--nav-border); }
.companion-deck .banner-logo { display: flex; align-items: center; min-height: 48px; justify-self: start; }
.companion-deck .banner-logo img { width: 38px; height: 38px; }
.banner-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
.banner-start { justify-self: start; display: flex; align-items: center; gap: 10px; }
.nav-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid var(--input-border); border-radius: 999px; background: var(--card-bg); color: var(--text-main); font: 600 13px var(--font-body); text-decoration: none; }
.nav-pill:hover { background: var(--muted-bg); color: var(--text-main); }
.nav-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.icon-button { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--brand-primary); }
.icon-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.icon-button .pane { fill: currentColor; opacity: 0; }
.icon-button[aria-pressed="true"] .pane { opacity: .3; }
#theme-button { --panphy-theme-button-size: 48px; }
#fullscreen { --panphy-fs-size: 48px; }
.controls { background: var(--nav-bg); border: 1px solid var(--nav-border); box-shadow: var(--soft-shadow); }
.controls button { border: 1px solid var(--input-border); background: var(--card-bg); color: var(--text-main); }
.controls button:hover { transform: none; background: var(--muted-bg); }
.counter { color: var(--text-secondary); font: 600 15px var(--font-mono); }
.counter b { color: var(--text-main); }
.progress { height: 4px; }
.progress span { background: var(--brand-primary); }
.thumbs { background: var(--nav-bg); border-right: 1px solid var(--nav-border); scrollbar-color: var(--input-border) transparent; }
.thumb-num { color: var(--text-secondary); font-family: var(--font-mono); }
.thumb-frame { border: 2px solid var(--card-border); border-radius: 10px; background: var(--bg-color); }
.thumb:hover .thumb-frame, .thumb[aria-current="true"] .thumb-frame { border-color: var(--brand-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 25%, transparent); }
.thumb[aria-current="true"] .thumb-num { color: var(--brand-primary); }
.thumb-slide { background: var(--bg-color); }
.deck { border: 1px solid var(--card-border); border-radius: 26px; background: var(--bg-color); box-shadow: var(--soft-shadow); }
.slide, .slide.dark, .slide.history {
  --accent: var(--year-colour);
  border-top: 12px solid var(--year-colour);
  padding-top: 48px;
  background-color: var(--bg-color);
  background-image: radial-gradient(var(--bg-pattern) 1.5px, transparent 1.5px);
  background-size: 36px 36px;
  color: var(--text-main);
}
.year-badge { position: absolute; top: 36px; right: 84px; border-radius: 999px; padding: 7px 16px; background: var(--year-colour); color: var(--year-ink); font: 600 24px var(--font-mono); }
/* .triple marks a slide examined only in GCSE Physics (8463), never in Combined Science: Trilogy;
   .triple-tag marks one item on a mixed slide. The flag hangs from the bottom edge, below the year badge's top. */
:root { --triple-bg: #d3e9ed; --triple-ink: #1f5966; --triple-edge: #2f7c8c; }
:root[data-theme="dark"] { --triple-bg: #20434b; --triple-ink: #b4e2ea; --triple-edge: #6cbccb; }
.slide.triple { box-shadow: inset 0 -10px 0 var(--triple-edge); }
.triple-flag { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 10px 22px 8px; border-radius: 14px 14px 0 0; background: var(--triple-bg); color: var(--triple-ink); font: 800 24px var(--font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
/* Presenting on a screen taller than 16:9 (an iPad), the slide stays pinned to the top with its year bar and badge,
   and the flag and its edge drop to the bottom of the screen. */
body.is-fullscreen .deck { overflow: visible; clip-path: inset(0 0 calc(-1 * var(--fs-extra, 0px)) 0); }
body.is-fullscreen .slide.triple { box-shadow: none; }
body.is-fullscreen .slide.triple::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--fs-extra, 0px)); height: 10px; background: var(--triple-edge); }
body.is-fullscreen .triple-flag { bottom: calc(10px - var(--fs-extra, 0px)); }
.triple-tag { display: inline-block; vertical-align: .16em; margin: 0 4px; padding: 2px 10px; border-radius: 999px; background: var(--triple-bg); color: var(--triple-ink); font: 800 max(24px, .6em) var(--font-body); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.slide-foot, .slide.dark .slide-foot { border: 0; padding-top: 0; color: var(--text-secondary); font: 600 18px var(--font-mono); letter-spacing: .06em; opacity: 1; }
.slide-foot .tag::before { display: none; }
h1, h2, h3, .slide.dark h1 { font-family: var(--font-display); font-weight: 400; text-transform: none; letter-spacing: -.015em; }
h2 { font-size: 64px; line-height: 1.05; margin-bottom: 28px; }
h2 em, h3 em { box-shadow: none; color: var(--brand-primary); }
.slide.dark h1 { font-size: 106px; line-height: 1.02; margin-top: 24px; }
.slide.dark h1 em { color: var(--brand-primary); }
.slide.dark .lead, .lead { color: var(--text-secondary); }
.eyebrow, .slide.dark .eyebrow { font: 700 24px var(--font-body); color: var(--brand-primary); letter-spacing: .06em; }
.eyebrow .num { border: 0; padding: 4px 12px; color: var(--year-ink); }
.points li { line-height: 1.3; }
.points li::before { width: 14px; height: 14px; border: 0; top: .48em; background: var(--brand-primary); box-shadow: none; }
.points.small li::before { width: 12px; height: 12px; }
.points b { font-weight: 800; }
ol.steps li::before { border: 0; color: var(--year-ink); font: 600 24px var(--font-mono); }
.hl { box-shadow: none; border-bottom: 2px solid var(--brand-primary); }
.panel { border: 1px solid var(--card-border); border-radius: 24px; background: var(--viewer-bg); box-shadow: none; }
.panel-head { border-color: var(--card-border); font: 700 24px var(--font-body); letter-spacing: .04em; color: var(--text-main); }
.panel .pill { border-color: var(--input-border); color: var(--text-secondary); background: var(--card-bg); font: 700 24px var(--font-body); letter-spacing: .04em; }
.card, .card.flat, .card.navy, .mission { border: 1px solid var(--card-border); border-radius: 22px; background: var(--card-bg); color: var(--text-main); box-shadow: none; }
.card.navy p { color: var(--text-secondary); }
.rule, .remember, .formula { border: 1px solid var(--card-border); border-radius: 16px; background: var(--muted-bg); color: var(--text-main); box-shadow: none; font-weight: 500; }
.rule { border-left: 4px solid var(--brand-primary); }
.rule > strong:first-child, .formula > span:first-child { font: 800 24px var(--font-body); letter-spacing: .06em; }
.remember { border: 0; border-left: 4px solid var(--brand-primary); border-radius: 0 16px 16px 0; }
.eq-block { background: var(--formula); border: 1px solid var(--card-border); border-radius: 20px; color: var(--text-main); box-shadow: none; }
.eq-block .eq { color: var(--text-main); font: 600 56px/1.1 var(--font-mono); letter-spacing: 0; }
.eq-block .eq-words, .eq-block .eq-units { color: var(--text-secondary); font-weight: 500; }
.eq-block .eq-units { border-color: var(--card-border); }
.eq-block .flag { border-color: var(--input-border); color: var(--text-secondary); font: 700 24px var(--font-body); letter-spacing: .04em; }
mjx-container { line-height: 0; }
.eq-block .eq mjx-container { color: var(--text-main); }
.worked { border: 1px solid var(--card-border); border-radius: 20px; background: var(--card-bg); box-shadow: none; overflow: hidden; }
.worked .wq { border: 0; border-bottom: 1px solid var(--card-border); background: var(--formula); color: var(--text-main); font-weight: 600; }
.worked .wq span, .worked dt { font: 800 24px/1.5 var(--font-body); letter-spacing: .06em; }
/* The label column fits its longest label, now that the labels are larger. */
.worked dl { grid-template-columns: max-content 1fr; }
.worked dd { font-weight: 500; }
.worked dd.ans { color: var(--brand-primary); font-weight: 700; }
.mistake { border: 1px solid var(--card-border); border-radius: 16px; background: var(--card-bg); overflow: hidden; }
.mistake p + p { border-color: var(--card-border); }
.mistake .wrong { color: var(--text-secondary); }
.data { color: var(--text-main); }
table.data { border-collapse: separate; border-spacing: 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; }
.data caption { border: 0; background: var(--formula); color: var(--text-main); font-weight: 600; }
.data th, .data td { border: 0; border-bottom: 1px solid var(--card-border); border-right: 1px solid var(--card-border); }
.data th:last-child, .data td:last-child { border-right: 0; }
.data tbody th, .data thead th { background: var(--muted-bg); color: var(--text-main); }
.data .odd { background: color-mix(in srgb, var(--hot) 15%, var(--card-bg)); }
.q { border: 1px solid var(--card-border); border-radius: 20px; box-shadow: none; }
.q p { font-weight: 600; }
.q .n { border: 0; color: var(--year-ink); font: 600 24px var(--font-mono); }
.q .ans { border: 0; border-left: 4px solid var(--brand-primary); border-radius: 0 12px 12px 0; background: var(--formula); color: var(--text-main); font-weight: 600; }
.reveal-hint { font: 700 24px var(--font-body); color: var(--text-secondary); letter-spacing: .05em; }
.terms { background: var(--card-bg); color: var(--text-main); border: 1px solid var(--card-border); border-radius: 22px; box-shadow: none; }
/* In Year 11, .terms is a grid of separate .term cards, not one panel. */
.deck-y11 .terms { background: none; border: 0; border-radius: 0; }
.term { border-color: var(--card-border); }
.term b { font: 400 32px/1.15 var(--font-display); text-transform: none; color: var(--brand-primary); }
.term span { color: var(--text-secondary); }
.lesson-number { font-family: var(--font-mono); font-size: 24px; border: 1px solid var(--input-border); }
.lesson-icon { border: 0; color: var(--year-ink); font: 600 24px var(--font-mono); }
.unlocks span, .unlocks a { border: 1px solid var(--card-border); border-radius: 999px; background: var(--formula); color: var(--text-main); box-shadow: none; font-weight: 600; }
.case-card, .plot-card { transform: none; border: 1px solid var(--card-border); border-radius: 22px; background: var(--card-bg); box-shadow: none; }
.case-card h3 { line-height: 1.15; }
.plot-card p { font-family: var(--font-display); text-transform: none; font-weight: 400; line-height: 1.15; }
.case-card .label, .plot-label { color: var(--text-secondary); font: 800 24px var(--font-body); letter-spacing: .08em; border-color: var(--card-border); }
.sticky { background: var(--formula); color: var(--text-main); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: none; text-transform: none; font: 600 22px var(--font-body); }
.stamp { color: var(--brand-primary); border-color: var(--brand-primary); font: 800 17px/1.1 var(--font-body); letter-spacing: 0; } /* decorative ring of fixed size */
.route > div { border: 1px solid var(--card-border); border-radius: 18px; box-shadow: none; }
.route > div.go { background: var(--formula); }
.route > div b { font: 800 24px var(--font-body); letter-spacing: .06em; }
.path > div { font-weight: 600; }
.path > div i { border: 0; font-family: var(--font-mono); color: var(--year-ink); }
.path > div.gate i { background: var(--formula); color: var(--text-main); }
.frame { border-color: var(--input-border); border-radius: 16px; }
.frame b { font-weight: 800; }
.stores .store, .toolkit .tool { border: 1px solid var(--card-border); border-radius: 16px; box-shadow: none; }
.store b { font: 400 28px/1.15 var(--font-display); text-transform: none; }
.tool .eq { font-family: var(--font-mono); font-weight: 600; }
.ring-box, .ring-box > span { background: var(--card-bg); color: var(--text-main); }
.ring-box > span.right.step.shown { color: var(--cyan); outline-color: var(--cyan); }
.masthead { border-bottom: 2px solid var(--card-border); padding-right: 150px; } /* clear of the year badge */
.masthead .paper-name { font: 400 42px var(--font-display); letter-spacing: -.015em; }
.masthead .edition { border: 0; border-radius: 999px; background: var(--formula); color: var(--text-main); font: 700 24px var(--font-body); letter-spacing: .04em; }
.masthead .dateline { font: 700 24px var(--font-body); letter-spacing: .05em; }
.news-photo img { border: 1px solid var(--card-border); border-radius: 16px; box-shadow: none; }
.news-photo figcaption, .news-photo .credit { color: var(--text-secondary); }
.story .kicker { border: 0; background: var(--formula); color: var(--text-main); border-radius: 999px; font: 800 24px var(--font-body); letter-spacing: .06em; }
.story .standfirst, .story .follow-up { font-weight: 500; }
.story .follow-up { border-width: 4px; border-color: var(--brand-primary); border-radius: 0 16px 16px 0; }
.story .ask { border: 1px solid var(--card-border); border-radius: 16px; background: var(--formula); color: var(--text-main); box-shadow: none; font-weight: 600; }
.story .follow-up b, .story .ask b { font: 800 24px var(--font-body); letter-spacing: .06em; }
/* Essential diagram strokes must not inherit generic illustration .body rules. */
.cd, .cd .body { stroke: var(--ink); stroke-width: 3.2; fill: none; }
.cd .body rect, .cd .body circle:not(.dot) { fill: var(--diagram-bg); }
.cd text.note, .cd text.tick, .dk .dk-small, .dk .dk-tick, .wf .tick-t { fill: var(--text-secondary); }
.cd .grid, .dk .dk-grid, .wf .grid { stroke: var(--card-border); }
.cd .curve, .cd text.hot, .dk .dk-label.hot, .wf .hot-t { stroke: none; fill: var(--hot); }
.cd .curve { fill: none; stroke: var(--hot); }
.cd text.cool, .wf .cyan-t { fill: var(--cyan); }
.wf .arrow.cyan, .wf .tape, .dk .dk-cross, .dk .dk-fit { stroke: var(--cyan); }
.wf .head.cyan { fill: var(--cyan); }
.wf .arrow.hot, .dk .dk-pointer, .dk .dk-cross.odd { stroke: var(--hot); }
.wf .head.hot { fill: var(--hot); }
.wf .box.pop { filter: none; }
.wf .big { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; }
.wf .lab { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; }
.wf .ruler, .wf .board { fill: #e3c88c; }
.chart { border-color: var(--ink); }
.chart .point { border-color: var(--ink); }
.dk-controls button { border: 1px solid var(--input-border); border-radius: 12px; background: var(--card-bg); color: var(--text-main); box-shadow: none; font: 600 24px var(--font-body); min-height: 52px; }
.dk-controls button[aria-pressed="true"], .dk-controls button:hover { background: var(--year-colour); color: var(--year-ink); }
.dk-readout { border-width: 4px; border-radius: 0 12px 12px 0; background: var(--muted-bg); color: var(--text-main); font-weight: 500; }
.dk .dk-sky { fill: color-mix(in srgb, #69a8b6 16%, var(--card-bg)); }
.dk .dk-wheel, .wf .wheel { fill: #101c22; }
.ef { --ef-ink: var(--ink); --ef-paper: var(--diagram-bg); --ef-cool: var(--cyan); --ef-hot: var(--hot); }
.ef .ink { stroke-width: 3.2; }
.ef text.muted { fill: var(--text-secondary); }
.guide.accent { stroke: var(--brand-primary); stroke-width: 3; opacity: 1; }
[data-fig="half-life"] circle { stroke: var(--brand-primary); stroke-width: 2.5; }
[data-fig="ball"][data-kind="proton"] circle { fill: #a93624; }
[data-fig="ball"][data-kind="neutron"] circle { fill: #4b5965; }
[data-fig="ball"][data-kind="electron"] circle { fill: #176397; }
[data-theme="dark"] .ef { --ef-soft: #283039; --ef-cool-t: #173d49; --ef-hot-t: #512d25; --ef-sun-t: #4b3c20; --ef-leaf-t: #263d22; }
[data-theme="dark"] .dk .dk-body, [data-theme="dark"] .dk.one-store .dk-bar { fill: #2b6476; }
[data-theme="dark"] .dk .dk-window { fill: #233f4b; }
[data-theme="dark"] .wf text.set-a-t { fill: #c8df85; }
[data-theme="dark"] .wf text.set-b-t { fill: #edaa8c; }
[data-theme="dark"] .wf text.set-c-t { fill: #76c5d9; }
[data-theme="dark"] .data .set-a th, [data-theme="dark"] .data .set-b th, [data-theme="dark"] .data .set-c th { color: #1b1b1b; }
.model3d .model-label { background: var(--card-bg) !important; color: var(--ink) !important; }
:is(button, a):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
body.is-fullscreen .banner { display: none; }
body.is-fullscreen .stage { top: var(--standalone-top); }
body.is-fullscreen .deck { border-radius: 0; }
@media (max-width: 900px) {
  .banner { grid-template-columns: auto 1fr auto !important; gap: 8px; }
  .banner-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; }
  .deck-y11 .banner-title { display: block; justify-self: stretch; line-height: 48px; } /* its flex title would not truncate */
  .nav-pill .wide { display: none; }
}
@media print {
  .banner { display: none !important; }
  .deck { border-radius: 0; }
}

/* Scene fills need dark variants as well as the labels and outlines. */
[data-theme="dark"] .wf .ruler, [data-theme="dark"] .wf .board { fill: #4b3c20; }
[data-theme="dark"] .wf .heli-backdrop, [data-theme="dark"] .wf .f-muted { fill: #283039; }
[data-theme="dark"] .dk .dk-ruler { fill: #4b3c20; }
[data-theme="dark"] .dk .dk-mass, [data-theme="dark"] .dk .dk-wall, [data-theme="dark"] .dk .dk-pulley, [data-theme="dark"] .dk .dk-rod { fill: #37414a; }
[data-theme="dark"] .dk .dk-bookbody, [data-theme="dark"] .dk .dk-ball { fill: #7e422b; }

.slide.dark .eyebrow span.on { color: var(--brand-primary); }
.table-scroll { overflow-x: auto; max-width: 100%; }

/* Coloured teaching panels use soft fills; strokes and labels stay strong. */
.mission { --accent: var(--year-colour); }
.mission .lesson-icon { background: var(--year-colour); color: var(--year-ink); }
.wf .f-cyan { fill: #9dccd7; }
.wf .tick-t { fill: var(--ink); }
[data-theme="dark"] .wf .f-cyan { fill: #244b57; }
[data-theme="dark"] .wf .f-accent, [data-theme="dark"] .wf .f-hi, [data-theme="dark"] .wf .f-alt { fill: var(--formula); }
.card.navy .eyebrow { color: var(--brand-primary) !important; }
.card.navy h3 { color: var(--text-main) !important; }
[data-fig="coverArt"] { background: var(--viewer-bg); border: 1px solid var(--card-border); border-radius: 14px; }
[data-fig="coverArt"] .ef text { fill: var(--ink); }
[data-fig="coverArt"] .ef > path:first-child { stroke: var(--brand-primary); }
[data-fig="coverArt"] .ef > path:nth-child(2) { fill: var(--year-colour); opacity: .4; }
[data-fig="coverArt"] .ef > circle { fill: var(--year-colour); stroke: var(--brand-primary); stroke-width: 2; }
[data-fig="coverArt"] .ef > circle:nth-of-type(2) { fill: var(--brand-primary); }
.dk .dk-book .dk-small { fill: #fff; }
.dk .dk-bookbody { fill: #9b422d; }
.dk .dk-small.m-label-A, .dk .dk-small.m-label-B { fill: var(--ink); }
.grid-pd.pd-high { background: #a93624; border-color: #a93624; }
.grid-pd.pd-low, .grid-pd.pd-mid { color: #1b1b1b; }
.plus { fill: #806018; opacity: 1; }
[data-theme="dark"] .plus { fill: #efcd87; }
.legend .positive { background: #806018; }
.legend .proton { background: #a93624; }
.legend .neutron { background: #4b5965; }
.t-proton { fill: #a93624; }
.t-neutron { fill: #4b5965; }
[data-theme="dark"] .t-proton { fill: #edaa8c; }
[data-theme="dark"] .t-neutron { fill: #bdcbd6; }

:root { --electron: #176397; --neutron: #4b5965; }
:root[data-theme="dark"] { --electron: #76c5d9; --neutron: #bdcbd6; }
.legend .electron { background: #176397; }
.t-proton { color: #a93624; }
.t-neutron { color: #4b5965; }
[data-theme="dark"] .t-proton { color: #edaa8c; }
[data-theme="dark"] .t-neutron { color: #bdcbd6; }
.sym { stroke: rgba(0, 0, 0, .7); stroke-width: 1.5px; stroke-linejoin: round; paint-order: stroke; }

.circuit-card { transform: none; border: 1px solid var(--card-border); border-radius: 22px; box-shadow: none; background: var(--card-bg); }
.grid-route .grid-band { background: var(--muted-bg); border-color: var(--cyan); }
.grid-band-tag, .grid-band-tag strong { color: var(--brand-primary); }
.grid-icon, .grid-stage-up .grid-icon, .grid-stage-cables .grid-icon, .grid-stage-down .grid-icon, .grid-stage-homes .grid-icon { background: var(--formula); }
.tool.given { background: var(--formula); }
.cd .case { fill: var(--muted-bg); }
.q .n { background: var(--year-colour); }
.legend .alpha { background: #9c1881; }
.legend .photon { background: #7040ad; }
.cd text[style*="fill:#111827"] { fill: var(--ink) !important; }
.cd [stroke="#111827"] { stroke: var(--ink); }
[data-theme="dark"] .cd [fill="#fff"], [data-theme="dark"] .cd [fill="#f4f1e8"], [data-theme="dark"] .cd [fill="#f3e2b3"] { fill: var(--card-bg); }
:root[data-theme="dark"] { --text-secondary: #c7c3ba; }
[data-theme="dark"] .wf .tag { fill: var(--formula); }
[data-theme="dark"] .dk .dk-motor { fill: #4b3c20; }
[data-theme="dark"] .cd .heater { fill: #512d25; }
[data-theme="dark"] .cd [fill="#e3e8ee"] { fill: var(--card-bg); }
.symbol-tile { border: 1px solid var(--card-border); border-radius: 16px; box-shadow: none; }
.symbol-tile figcaption { font: 600 24px/1.2 var(--font-body); text-transform: none; letter-spacing: 0; }

.machine .sticky.one, .machine .sticky.two { transform: none; box-shadow: none; }
.component { border: 1px solid var(--card-border); border-radius: 16px; box-shadow: none; overflow: hidden; }
.component figcaption { border-color: var(--card-border); }
.component figcaption > b { font: 700 24px var(--font-body); letter-spacing: .02em; text-transform: none; }
.photo img { border: 1px solid var(--card-border); border-radius: 16px; box-shadow: none; }
.not-examined { position: static; align-self: flex-start; margin: 12px 0 0; padding: 6px 10px; border: 1px solid var(--card-border); border-radius: 12px; background: var(--muted-bg); font: 700 24px var(--font-body); letter-spacing: .04em; }
.wf .band { fill: color-mix(in srgb, var(--cyan) 15%, var(--diagram-bg)); stroke: var(--cyan); stroke-width: 2.5; opacity: 1; }
.orbit { stroke: var(--text-secondary); stroke-opacity: 1; stroke-width: 2.2; }

/* History is enrichment: the background is a persistent exam-scope signal. */
.deck-y11 .slide.history,
.deck-y11 body.is-fullscreen:has(#deck .slide.history.active) {
  background-color: color-mix(in srgb, var(--brand-primary) 15%, var(--bg-color));
}
.symbol-grid .cd { stroke-width: 2.5; }
.symbol-grid .cd .body { stroke-width: inherit; }
.equation-inline { white-space: nowrap; }
.data tr.step:not(.shown), .data td.step:not(.shown), .data th.step:not(.shown) { opacity: 1; transform: none; }
.data tr.step:not(.shown) > td > .cell-content,
.data tr.step:not(.shown) > th > .cell-content,
.data td.step:not(.shown) > .cell-content,
.data th.step:not(.shown) > .cell-content { opacity: 0; }
.cell-content { transition: opacity .3s ease; }
@media print { .data .step:not(.shown) > .cell-content { opacity: 1 !important; } }
.eco-house { display: block; width: 100%; height: auto; }
.eco-house-frame { background: #f8f6f1; border-radius: 12px; padding: 12px; }

/* AQA specification references on the map cards and part dividers. */
.slide p.spec-ref, .slide .mission p.spec-ref { display: flex; flex-wrap: wrap; gap: 0 14px; margin: auto 0 0; padding-top: 10px; font: 500 14px/1.35 var(--font-mono); letter-spacing: .02em; color: var(--text-secondary); text-transform: none; }
.slide p.spec-ref span { white-space: nowrap; }
.slide .hero p.spec-ref, .slide .title-grid p.spec-ref { margin-top: 22px; padding-top: 0; font-size: 16px; }
.eyebrow.course { flex-wrap: wrap; row-gap: 6px; }

/* A landscape phone gives the slide the whole screen: no banner, and slim controls in the side margins. */
@media screen and (orientation: landscape) and (max-height: 500px) {
  body:not(.is-fullscreen) .banner, body:not(.is-fullscreen) .progress { display: none; }
  body:not(.is-fullscreen) .stage { top: var(--standalone-top); bottom: var(--vv-bottom, 0px); left: 0; }
  body:not(.is-fullscreen) .controls { left: max(6px, env(safe-area-inset-left)); top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; gap: 4px; padding: 4px; }
  body:not(.is-fullscreen) .controls button { width: 40px; height: 40px; }
  body:not(.is-fullscreen) .controls .counter { min-width: 0; font-size: 12px; line-height: 1.2; text-align: center; }
  body:not(.is-fullscreen) .notes { right: max(6px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); }
  body:not(.is-fullscreen) .notes-toggle { min-height: 40px; padding: 0 9px; }
  body:not(.is-fullscreen) .notes-toggle :is(.notes-label, .notes-chevron) { display: none; }
  body:not(.is-fullscreen) .notes .notes-body { left: calc(max(6px, env(safe-area-inset-left)) + 58px); right: calc(max(6px, env(safe-area-inset-right)) + 58px); bottom: max(8px, env(safe-area-inset-bottom)); max-height: calc(100dvh - 16px - var(--standalone-top, 0px)); padding: 12px 18px 14px; }
}

/* Copyright line on the title slide */
.slide-copyright { position: absolute; right: 84px; bottom: 26px; margin: 0; font: 600 16px var(--font-mono); letter-spacing: .06em; color: var(--text-secondary); }

/* Labels read from the back of a classroom: worded labels in the bold body font at 24px or more;
   numbers stay monospaced. Covers the label rules in the deck-specific stylesheets too.
   AQA spec references, photo credits and the copyright line stay small on purpose. */
.facts thead th { font: 700 24px var(--font-body); letter-spacing: .06em; }
.chip { font: 700 24px var(--font-body); letter-spacing: .02em; }
.obs-head { font: 700 24px var(--font-body); letter-spacing: .06em; }
.card .eyebrow { font-size: 24px; }
.legend > span { font-size: 24px; }
.panel-head .pill { font-size: 24px; }
.tool .where { font: 800 24px var(--font-body); letter-spacing: .06em; }
.grid-head strong { font-size: 24px; }
.panel-head { flex-wrap: wrap; row-gap: 6px; }
.panel-head > span { white-space: nowrap; }
.panel-head > span:last-child:not(:first-child) { margin-left: auto; }