/* ══════════════════════════════════════════════════════════════════
   lecture.css — HUMB1001 Module 3. Copied from Module 2's lecture.css
   (Module 1 base + Module 2 additions + the larger on-screen cue text),
   with Module 2's per-slide size rules removed and the Module 3 additions
   at the end: four-column table, drawn SVGs (slides 23, 44), motor-unit
   highlights, case box, eight-item sequence, one-chip sort rows, the
   scrollable muscle-tour panel and per-slide size rules for Module 3.
   Uses engine.css colour tokens throughout.
   ══════════════════════════════════════════════════════════════════ */

/* ── Title + dividers ── */
.title-slide { display:grid; grid-template-columns:1.05fr 1fr; height:720px; background:var(--green); }
.divider-slide { display:flex; flex-direction:column; justify-content:center; padding:0 72px; height:720px; box-sizing:border-box; background:var(--green); color:#fff; position:relative; }
.divider-slide::after { content:''; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--gold); }
.title-slide .divider-slide { background:transparent; padding-right:40px; }
.title-slide .divider-slide::after { display:none; }
.divider-num { font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:18px; }
.divider-title { font-family:var(--serif); font-size:52px; font-weight:600; line-height:1.1; color:#fff; text-wrap:balance; }
.divider-rule { width:64px; height:3px; background:var(--gold); border:none; margin:26px 0; }
.divider-subtitle { font-family:var(--sans); font-size:19px; color:rgba(255,255,255,.82); line-height:1.5; max-width:620px; }
.divider-video-note { position:absolute; bottom:28px; left:72px; font-family:var(--sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.35); }
.title-hero { position:relative; background:#12301f; display:flex; }
.title-hero .vid-placeholder { display:flex; width:100%; gap:10px; font-family:var(--sans); font-size:13px; }
.title-slide .shortcut-legend { color:rgba(255,255,255,.7); margin-top:30px; }
.title-slide .shortcut-legend kbd { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:#fff; box-shadow:none; }

/* ── Front matter (AoC, copyright) ── */
.frontmatter-wrap { height:720px; display:flex; align-items:center; justify-content:center; background:#fff; }
.frontmatter-wrap img { max-width:1180px; max-height:660px; object-fit:contain; box-shadow:0 4px 24px rgba(0,0,0,.08); }
.frontmatter-continue { position:absolute; bottom:24px; left:0; right:0; text-align:center; font-family:var(--sans); font-size:12px; color:var(--muted); }

/* ── Pattern C list, card spacing ── */
.pattern-c .slide-body { padding-left:64px; padding-right:180px; }
.pattern-c .list-items { gap:9px; }
.pattern-c .list-card .item-label { font-size:11px; }

/* ── Pattern A (image + markers) ── */
.pattern-a .marker-image { height:520px; }
.marker-chips { display:flex; gap:10px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.marker-chip { font-family:var(--sans); font-size:13px; font-weight:500; color:var(--green); background:var(--offwhite); border:1.5px solid var(--gold); border-radius:20px; padding:5px 14px; }

/* ── Pattern AL tweaks ── */
.pattern-al .al-grid { grid-template-columns:1.35fr 1fr; }
.pattern-al .al-image-col .image-wrap { height:570px; }
.pattern-al .al-list-col .item-label { font-size:11px; }

/* ── Tables ── */
.pattern-table .compare-row { padding:11px 20px; }
.pattern-table .compare-row .compare-val { font-size:14px; }
.pattern-table .compare-row .compare-feature { font-size:14px; }

/* ── Gallery (Pattern 16) ── */
.gallery-frame { position:relative; flex:1; min-height:0; border-radius:10px; overflow:hidden; background:#fff; }
.gallery-panel { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .5s ease; }
.gallery-panel.show { opacity:1; }
.gallery-label { font-family:var(--serif); font-size:20px; color:var(--green); text-align:center; margin:12px 0 0; }
.gallery-steps { height:0; overflow:hidden; }

/* ── Animated-diagram steps (Pattern 22 placeholder until Claude Design SVGs arrive) ── */
.steps-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:22px; flex:1; min-height:0; }
.anim-placeholder { border:2px dashed var(--border); border-radius:10px; background:repeating-linear-gradient(45deg,#FAFAF6,#FAFAF6 12px,#F4F4F0 12px,#F4F4F0 24px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center; }
.anim-ph-title { font-family:var(--serif); font-size:22px; color:var(--gold); margin:0 0 10px; }
.anim-ph-sub { font-family:var(--sans); font-size:13px; color:var(--muted); line-height:1.5; max-width:420px; margin:0; }
.steps-col { display:flex; flex-direction:column; justify-content:center; gap:10px; }
.step-card { display:flex; align-items:center; gap:14px; background:var(--offwhite); border-left:4px solid var(--gold); border-radius:0 8px 8px 0; padding:11px 16px; font-family:var(--sans); font-size:15px; color:var(--text); }
.step-num { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }

/* ── MCQ sub-line + confidence prompt ── */
.mcq-sub { display:block; font-family:var(--sans); font-size:15px; color:var(--muted); margin-top:8px; }
.conf-prompt { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin:4px 0 0; }
.pattern-e .confidence-row { margin:8px 0 14px; }

/* ── Sequence check (Pattern 7) ── */
.seq-hint { font-family:var(--sans); font-size:12px; color:var(--muted); margin:-6px 0 10px; }
.seq-list { list-style:none; counter-reset:seq; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; max-width:760px; }
.seq-item { counter-increment:seq; display:flex; align-items:center; gap:12px; background:#FDF8EC; border:2px solid var(--gold); border-radius:8px; padding:10px 14px; font-family:var(--sans); font-size:15px; cursor:grab; user-select:none; }
.seq-item::before { content:counter(seq); flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--green); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.seq-grip { color:var(--muted); font-size:12px; letter-spacing:-2px; }
.seq-item.correct { background:#EBF5EE; border-color:var(--correct); }
.seq-item.wrong { background:#F5EBEB; border-color:var(--wrong); }
.seq-list.locked .seq-item { cursor:default; }

/* ── Sort / match check (Pattern 8 variant) ── */
.sort-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:18px; flex:1; min-height:0; }
.sort-pool { display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; padding:12px; background:var(--offwhite); border:1px dashed var(--border); border-radius:8px; min-height:120px; }
.sort-pool .drag-cat-pool-label { width:100%; }
.sort-targets { display:flex; flex-direction:column; gap:10px; min-height:0; }
.sort-buckets .sort-targets { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sort-buckets .sort-row { display:flex; flex-direction:column; }
.sort-buckets .sort-drop { flex:1; min-height:260px; flex-direction:column; align-items:stretch; justify-content:flex-start; }
.sort-rows .sort-targets { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; align-content:start; }
.sort-rows .sort-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:center; }
.sort-label { font-family:var(--sans); font-size:13px; font-weight:600; color:var(--green); line-height:1.3; }
.sort-buckets .sort-label { font-size:14px; padding:0 0 6px; }
.sort-drop { display:flex; flex-wrap:wrap; gap:6px; min-height:40px; padding:5px; box-sizing:border-box; border:2px dashed var(--border); border-radius:8px; background:#FAFAF6; }
.sort-chip { background:#FDF8EC; border:2px solid var(--gold); border-radius:6px; padding:7px 11px; font-family:var(--sans); font-size:13px; cursor:grab; user-select:none; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.sort-chip.correct { background:#EBF5EE; border-color:var(--correct); }
.sort-chip.wrong { background:#F5EBEB; border-color:var(--wrong); animation:shake .4s; }
.sort-grid.locked .sort-chip { cursor:default; }
.sortable-ghost { opacity:.4; }
.pattern-sort .mcq-feedback, .pattern-seq .mcq-feedback { margin-top:8px; }

/* ── Graded localisation extras ── */
.gl-hint { font-family:var(--sans); font-size:12px; color:var(--muted); margin:0; }

/* ── Explorer (endocrine map) ── */
.explore-result-col { align-items:stretch; justify-content:flex-start; padding:28px; }
.explore-gland { font-family:var(--serif); font-size:26px; font-weight:600; color:var(--green); margin:0 0 6px; }
.explore-rows { display:flex; flex-direction:column; gap:4px; }
.explore-k { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin:12px 0 0; }
.explore-v { font-family:var(--sans); font-size:15px; color:var(--text); line-height:1.5; margin:0; }
.explore-result-col .explore-caption { margin-top:auto; text-align:left; }

/* ── Reflect / notes ── */
.pattern-reflect .slide-body { justify-content:flex-start; }
.reflect-privacy { font-family:var(--sans); font-size:11px; color:var(--muted); margin:0; }
.pattern-notes .slide-body { padding-top:calc(var(--hh) + 30px); }
.notes-card.notes-wide { max-width:1100px; padding:22px 30px; }
.notes-cols { display:grid; grid-template-columns:1.4fr 1fr; gap:26px; }
.notes-big { font-family:var(--sans); font-size:13px; line-height:1.5; margin:4px 0 14px; padding-left:18px; }
.notes-lab { background:#FDF8EC; border:1.5px solid var(--gold); border-radius:8px; padding:12px 16px; align-self:start; }
.notes-lab ul { font-family:var(--sans); font-size:13px; line-height:1.55; margin:6px 0 0; padding-left:18px; }
@media print {
  body.printing-notes .reveal .slides section[data-slide="62"] .notes-card { max-width:none; }
}

/* ── Fixes after first render check ── */
.reveal .slides { text-align:left; }                       /* Reveal centres text by default */
.pattern-b .concept-text, .pattern-b .concept-note { text-align:left; }
.sort-grid { flex:0 1 auto; max-height:430px; }
.sort-buckets .sort-drop { min-height:210px; }
.pattern-sort .drag-btn-row, .pattern-seq .drag-btn-row { margin-top:10px; }
.frontmatter-wrap img { max-height:600px; }
.frontmatter-continue { bottom:14px; }
.gallery-label { text-align:center; }
.mcq-continue, .conf-prompt { text-align:left; }

/* ── Start screen ── */
#start-overlay { position:fixed; inset:0; z-index:20000; background:rgba(27,67,50,.96); display:flex; align-items:center; justify-content:center; }
#start-overlay.hidden { display:none; }
.start-card { background:#fff; border-radius:14px; padding:40px 48px; max-width:560px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.3); border-top:6px solid var(--gold); }
.start-eyebrow { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 8px; }
.start-card h1 { font-family:var(--serif); font-size:34px; color:var(--green); margin:0 0 12px; }
.start-text { font-family:var(--sans); font-size:15px; color:var(--text); line-height:1.5; margin:0 0 22px; }
#start-btn { font-family:var(--sans); font-size:17px; font-weight:600; background:var(--green); color:#fff; border:none; border-radius:10px; padding:14px 30px; cursor:pointer; }
#start-btn:hover, #start-btn:focus-visible { background:#2D6A4F; outline:3px solid var(--gold); outline-offset:2px; }
.start-keys { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:20px; font-family:var(--sans); font-size:12px; color:var(--muted); }
.start-keys kbd { font-family:var(--sans); font-size:11px; font-weight:600; background:var(--offwhite); border:1px solid var(--border); border-radius:4px; padding:2px 6px; color:var(--green); }
.start-note { font-family:var(--sans); font-size:12px; color:var(--muted); margin:14px 0 0; }

/* ── Transcript button + panel ── */
#transcript-btn { position:fixed; bottom:14px; left:132px; z-index:9999; background:#fff; color:var(--green); border:1.5px solid var(--green); border-radius:6px; font-family:var(--sans); font-size:11px; font-weight:500; padding:6px 12px; cursor:pointer; opacity:.9; }
#transcript-btn.on { background:var(--green); color:#fff; }
#transcript-panel { position:fixed; left:50%; transform:translateX(-50%); bottom:52px; z-index:9998; width:min(900px, 86vw); max-height:30vh; overflow:auto; background:rgba(20,40,30,.92); color:#fff; font-family:var(--sans); font-size:15px; line-height:1.5; padding:12px 18px; border-radius:8px; display:none; }
#transcript-panel.show { display:block; }

/* ── Title hero (until the title video exists) ── */
.title-hero-inner { margin:auto; padding:0 48px; }
.th-label { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-lt); margin:0 0 14px; }
.th-list { font-family:var(--serif); font-size:21px; color:rgba(255,255,255,.88); line-height:1.75; margin:0; padding-left:26px; }
.th-list li::marker { color:var(--gold); font-family:var(--sans); font-size:15px; }

/* ── Step flow (until the Claude Design animations exist) ── */
.steps-flow { flex:1; display:flex; flex-direction:column; justify-content:center; gap:0; max-width:720px; margin:0 auto; width:100%; }
.steps-flow .step-card { font-size:17px; padding:13px 20px; position:relative; margin-bottom:22px; }
.steps-flow .step-card:not(:last-child)::after { content:'\2193'; position:absolute; left:28px; bottom:-22px; color:var(--gold); font-size:16px; line-height:22px; }

/* ── Keyboard / click placing for drag activities ── */
.sort-chip:focus-visible, .sort-drop:focus-visible, .sort-pool:focus-visible, .hotspot:focus-visible, .gradedloc-hotspot:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.sort-chip.picked { outline:3px solid var(--green); outline-offset:1px; background:#fff; }
.sort-grid.placing .sort-drop, .sort-grid.placing .sort-pool { border-color:var(--gold); cursor:pointer; }
.seq-move { margin-left:auto; display:flex; gap:4px; }
.seq-move button { border:1px solid var(--border); background:#fff; border-radius:4px; width:26px; height:24px; font-size:10px; color:var(--green); cursor:pointer; }
.seq-move button:hover, .seq-move button:focus-visible { border-color:var(--gold); outline:none; }
.seq-list.locked .seq-move { visibility:hidden; }
.explore-hint { left:auto; right:10px; top:10px; bottom:auto; }
/* Claude-built step animations (slides 26, 30, 55, 56, 57) */
.steps-anim-grid { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:22px; align-items:center; }
.steps-anim { position:relative; width:100%; aspect-ratio:16/9; max-height:100%; border-radius:10px; overflow:hidden; background:#fff; }
.steps-anim-frame { position:absolute; inset:0; width:100%; height:100%; border:0; }
.steps-side { max-width:none; margin:0; }
.steps-side .step-card { font-size:14px; padding:9px 12px; margin-bottom:14px; }
.steps-side .step-card:not(:last-child)::after { bottom:-15px; left:22px; font-size:12px; line-height:14px; }
/* Title video (slide 01) */
.title-hero-inner:has(.title-video) { padding:104px 40px 24px; display:flex; flex-direction:column; align-items:center; }
.title-video { width:min(100%, 400px); aspect-ratio:1/1; border-radius:14px; overflow:hidden; border:3px solid var(--gold); background:#000; margin-bottom:22px; flex-shrink:0; }
.title-video video { width:100%; height:100%; object-fit:cover; display:block; }
.title-video img { width:100%; height:100%; object-fit:cover; object-position:52% 28%; display:block; }
/* Sophia photo on section dividers (as Module 1) */
.divider-slide:has(.divider-photo) { padding-right:456px; }
.divider-photo { position:absolute; right:72px; top:50%; transform:translateY(-50%); width:320px; aspect-ratio:1/1; border-radius:14px; overflow:hidden; border:3px solid var(--gold); background:#12301f; }
.divider-photo img { width:100%; height:100%; object-fit:cover; object-position:52% 28%; display:block; }
.title-hero-inner:has(.title-video) .th-label { align-self:flex-start; margin-bottom:8px; }
.title-hero-inner:has(.title-video) .th-list { columns:2; column-gap:28px; font-size:15px; line-height:1.55; align-self:stretch; }
/* Slide number: centred in the green header bar (was hidden under the speed control) */
#slide-num { white-space:pre; top:0; right:auto; left:50%; transform:translateX(-50%); height:var(--hh); display:flex; align-items:center; z-index:10000; color:#fff; opacity:.8; font-size:12px; font-weight:500; letter-spacing:.04em; }
#slide-num::before { content:"Slide "; }
/* "AI-generated voice" badge removed at Daniel's request */
#voice-tag-chrome { display:none !important; }

/* ══════════════ Module 2 additions ══════════════ */

/* Functional joint term as a sub-text line (Decision 7 / C; slides 45, 46, 47, 49).
   Sits inside the existing .item-text / .compare-val / subline element, so it adds
   no fragments and card/row counts are unchanged. Not yet in files/engine.css (T14). */
.item-sub, .compare-sub { display:block; font-size:.82em; font-style:italic; font-weight:400; color:var(--muted); margin-top:2px; letter-spacing:0; text-transform:none; }
.title-subline { font-family:var(--sans); font-size:15px; color:var(--text); margin:-6px 0 8px; }
.title-subline .item-sub { display:inline; margin:0 0 0 8px; font-size:.92em; }

/* Image + narrated markers with the marker list beside the image (slides 20, 39, 41, 49) */
.marker-side .marker-side-grid { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:22px; align-items:center; }
.marker-side .marker-image { height:560px; }
.marker-chips-side { flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:center; gap:7px; margin:0; }
.marker-chips-side .marker-chip { border-radius:8px; padding:6px 12px; font-size:13px; display:flex; align-items:center; gap:10px; line-height:1.3; }
.mc-num { flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--green); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.pattern-a .marker-image svg, .marker-side .marker-image svg { width:100%; height:100%; }

/* Image + cards with a landscape (16:9) image: give the image more room */
.pattern-al.al-wide .al-grid { grid-template-columns:1.7fr 1fr; }

/* Fracture repair gallery: all four panels in a row; the current one full strength */
.gallery-strip { display:flex; gap:12px; justify-content:center; align-items:stretch; background:transparent; }
.gallery-strip .gallery-panel { position:static; inset:auto; width:auto; height:100%; max-width:24%; flex:0 1 auto; opacity:.22; border:3px solid transparent; border-radius:8px; box-sizing:border-box; }
.gallery-strip .gallery-panel.past { opacity:.5; }
.gallery-strip .gallery-panel.show { opacity:1; border-color:var(--gold); }
.pattern-gallery .slide-body { padding-bottom:28px; }

/* Three-category sorts (slides 43, 52) and one-column job/movement rows (slides 22, 59) */
.sort-buckets.sort-3 { grid-template-columns:0.8fr 1.4fr; }
.sort-buckets.sort-3 .sort-targets { grid-template-columns:repeat(3, minmax(0,1fr)); }
.sort-buckets.sort-3 .sort-drop { min-height:200px; }
.sort-rows .sort-targets { grid-template-columns:1fr; gap:7px; }
.sort-rows .sort-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.sort-rows .sort-drop { min-height:42px; }
.sort-rows .sort-chip, .sort-3 .sort-chip { font-size:12.5px; }

/* Explorers (slides 37, 58): selected region gold, the others dim */
.explore-instr { font-family:var(--sans); font-size:14px; color:var(--muted); margin:0; }
.explore-grid.has-active .hotspot:not(.active) { opacity:.5; }
.explore-grid .hotspot.active .hotspot-badge { stroke:var(--gold); }
.explore-result-col .explore-caption { margin-top:auto; }

/* Confidence comment after the transcript feedback (slides 14, 17, 31, 60) */
.conf-note { display:none; margin-top:6px; font-style:italic; color:var(--green); }
.conf-note.show { display:block; }

/* Notes page sub-heading */
.notes-sub { font-family:var(--sans); font-size:12px; color:var(--muted); margin:6px 0 4px; }

/* ══════════════ Larger on-screen cue text (Daniel's preview feedback, 4 Oct 2026) ══════════════
   Card-style text at 2x the Module 1 size where it fits; dense slides get a smaller factor
   (per-slide rules at the end of this block). Values are in slide pixels (1280x720 design;
   Reveal scales the whole slide), so they no longer use vw clamps. Wording and fragment
   counts are unchanged; checked with scripts/tests/check_layout.py at 1280x800 and 1920x1080. */

/* card lists (slides 4, 9, 61) – 2x */
.pattern-c .list-card { padding:12px 24px; }
.pattern-c .list-card .item-label { font-size:22px; margin-bottom:4px; }
.pattern-c .list-card .item-text { font-size:32px; line-height:1.3; }
.pattern-c .slide-body { padding-right:120px; }

/* functional-term sub-text stays visibly smaller than its main line */
.item-sub, .compare-sub { font-size:.72em; margin-top:3px; }

/* image + cards (2x: list column widened, image narrower) */
.pattern-al .al-grid { grid-template-columns:1fr 1fr; gap:24px; }
.pattern-al.al-wide .al-grid { grid-template-columns:1.2fr 1fr; }
.pattern-al .al-list-col { gap:10px; }
.pattern-al .al-list-col .list-card { padding:10px 18px; }
.pattern-al .al-list-col .item-label { font-size:22px; margin-bottom:3px; }
.pattern-al .al-list-col .item-text { font-size:28px; line-height:1.3; }

/* comparison tables – 2x */
.pattern-table .compare-header { padding:0 20px 10px; }
.pattern-table .compare-header span { font-size:20px; letter-spacing:.04em; }
.pattern-table .compare-row { padding:12px 20px; }
.pattern-table .compare-row .compare-feature { font-size:28px; line-height:1.25; }
.pattern-table .compare-row .compare-val { font-size:28px; line-height:1.3; }
.pattern-table .compare-table-body { gap:10px; }

/* numbered step cards beside the animations – side column widened */
.steps-anim-grid { grid-template-columns:minmax(0,1fr) 400px; }
.steps-side .step-card { font-size:28px; line-height:1.25; padding:10px 14px; margin-bottom:16px; gap:12px; }
.steps-side .step-num { width:34px; height:34px; font-size:17px; }
.steps-side .step-card:not(:last-child)::after { bottom:-16px; font-size:13px; line-height:16px; }

/* marker chips */
.marker-chip { font-size:26px; padding:6px 18px; border-radius:24px; }
.marker-side .marker-side-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
.marker-chips-side { gap:8px; }
.marker-chips-side .marker-chip { font-size:26px; padding:7px 14px; border-radius:10px; line-height:1.2; }
.marker-chips-side .mc-num { width:30px; height:30px; font-size:16px; }
.title-subline { font-size:26px; margin:-2px 0 10px; }

/* explorers (37, 58) */
.explore-instr { font-size:24px; }
.explore-gland { font-size:36px; }
.explore-k { font-size:20px; }
.explore-v { font-size:28px; line-height:1.35; }
.explore-result-col .explore-caption { font-size:20px; }

/* question slides: options, feedback, sort and sequence pieces (1.5x – room is shared with feedback) */
.pattern-e .mcq-opt { font-size:22px; padding:12px 18px; }
.pattern-e .mcq-feedback { font-size:20px; }
.pattern-e .mcq-continue { font-size:16px; }
.pattern-e .confidence-btn { font-size:18px; padding:8px 20px; }
.conf-prompt { font-size:16px; }
.sort-chip, .sort-rows .sort-chip, .sort-3 .sort-chip { font-size:20px; padding:6px 12px; }
.sort-label, .sort-buckets .sort-label { font-size:20px; }
.drag-cat-pool-label { font-size:14px; }
.seq-item { font-size:24px; padding:12px 16px; }
.seq-hint, .gl-hint { font-size:16px; }
.gradedloc-question { font-size:26px; }
.gradedloc-feedback { font-size:20px; }
.gallery-label { font-size:30px; }

/* ── per-slide reductions where 2x doesn't fit (checked with check_layout.py) ── */
.gallery-label { width:fit-content; margin-left:auto; margin-right:auto; }
.sort-buckets.sort-3 .sort-drop { min-height:150px; }
.notes-card.notes-wide { max-width:100%; box-sizing:border-box; }
.sort-grid.sort-3 { max-height:370px; grid-template-columns:0.95fr 1.25fr; }
.sort-3 .sort-chip { font-size:18px; padding:5px 10px; }   /* 1.4x: nine chips must fit beside three drop zones */

/* ══════════════ Module 3 additions ══════════════ */

/* Comparison table with three value columns (slide 11) */
.compare-cols-4 .compare-header, .compare-cols-4 .compare-row { grid-template-columns:1.15fr 1fr 1fr 1fr; gap:14px; }
.compare-cols-4 .compare-row .compare-feature, .compare-cols-4 .compare-row .compare-val { font-size:23px; line-height:1.22; }
.compare-cols-4 .compare-row { padding:8px 18px; }
.compare-cols-4 .compare-table-body { gap:7px; }

/* Marker chips under the image are numbered too (matches the marker order) */
.marker-chips:not(.marker-chips-side) .marker-chip { display:inline-flex; align-items:center; gap:8px; }
.marker-chips:not(.marker-chips-side) .mc-num { width:26px; height:26px; font-size:14px; }

/* Claude-built drawings inline on the slide (23 sarcomere, 44 motor units) */
.drawn-svg { width:100%; height:100%; display:block; font-family:var(--sans); }

/* Slide 44: motor-unit highlights, one state per card (data-hl set by lecture.js) */
.mu-svg .mu-tag { opacity:0; transition:opacity .4s ease; }
.mu-svg[data-hl="4"] .mu-tag { opacity:1; }
.mu-svg .mu-fibre, .mu-svg .mu-nerve, .mu-svg .mu-key { transition:opacity .4s ease; }
.mu-svg[data-hl="1"] .mu-fibre:not(.muA), .mu-svg[data-hl="1"] .mu-nerve:not(.muA),
.mu-svg[data-hl="3"] .muB, .mu-svg[data-hl="4"] .muB { opacity:.3; }
@keyframes mu-glow { 0%,100% { stroke:#5A5A5A; stroke-width:2.5; } 50% { stroke:#E8C060; stroke-width:12; } }
@keyframes mu-nerve-glow { 0%,100% { stroke-width:5; } 50% { stroke-width:11; } }
@keyframes mu-turn { 0%,34%,100% { stroke:#5A5A5A; stroke-width:2.5; } 12%,22% { stroke:#E8C060; stroke-width:12; } }
@keyframes mu-flash { 0%,45%,100% { stroke:#5A5A5A; stroke-width:2.5; } 10%,32% { stroke:#E8C060; stroke-width:13; } }
.mu-svg[data-hl="1"] .mu-fibre.muA, .mu-svg[data-hl="4"] .mu-fibre.muA, .mu-svg[data-hl="4"] .mu-fibre.muC { animation:mu-glow 1.6s ease-in-out infinite; }
.mu-svg[data-hl="1"] .mu-nerve.muA { animation:mu-nerve-glow 1.6s ease-in-out infinite; }
.mu-svg[data-hl="2"] .mu-fibre.muA { animation:mu-turn 3.6s ease-in-out infinite; }
.mu-svg[data-hl="2"] .mu-fibre.muB { animation:mu-turn 3.6s ease-in-out 1.2s infinite; }
.mu-svg[data-hl="2"] .mu-fibre.muC { animation:mu-turn 3.6s ease-in-out 2.4s infinite; }
.mu-svg[data-hl="3"] .mu-fibre.muA { animation:mu-flash 3.2s ease-in-out infinite; }
.mu-svg[data-hl="3"] .mu-fibre.muC { animation:mu-flash 3.2s ease-in-out 1.6s infinite; }
@media (prefers-reduced-motion: reduce) {
  .mu-svg .mu-fibre, .mu-svg .mu-nerve { animation:none !important; }
  .mu-svg[data-hl="1"] .mu-fibre.muA, .mu-svg[data-hl="2"] .mu-fibre:not([fill="#fff"]), .mu-svg[data-hl="3"] .mu-fibre.muA,
  .mu-svg[data-hl="3"] .mu-fibre.muC, .mu-svg[data-hl="4"] .mu-fibre.muA, .mu-svg[data-hl="4"] .mu-fibre.muC { stroke:#E8C060; stroke-width:10; }
}

/* Case box above a question (slide 34) */
.mcq-case { font-family:var(--sans); font-size:21px; line-height:1.35; color:var(--text); background:var(--offwhite); border-left:4px solid var(--gold);
  border-radius:0 8px 8px 0; padding:8px 16px; margin:0 0 6px; }
.mcq-case-label { display:block; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:2px; }

/* One-chip sort rows (slides 50, 57): label | drop zone per row */
.sort-rows.sort-8, .sort-rows.sort-6 { grid-template-columns:0.9fr 1.25fr; }
.sort-rows.sort-8 .sort-row, .sort-rows.sort-6 .sort-row { grid-template-columns:minmax(0,0.55fr) minmax(0,1.45fr); }

/* Muscle tour (slide 59): selected region outlined in gold; the long panel scrolls inside itself */
.region-outline { fill:none; stroke:var(--gold); stroke-width:4; stroke-dasharray:12 7; opacity:0; transition:opacity .25s; pointer-events:none; }
.hotspot.active .region-outline { opacity:1; }
.explore-scroll { overflow-y:auto; min-height:0; flex:1 1 auto; padding-right:8px; }
.explore-scroll:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.explore-list { margin:4px 0 0; padding-left:22px; }
.explore-list li { margin:0 0 5px; }

/* ── Module 3 per-slide size rules (checked with scripts/tests/check_layout.py at 1280x800 and 1920x1080) ── */
/* image + markers below: a little less image height so the chip row clears the bottom-left buttons */
.pattern-a:not(.marker-side) .marker-image { height:470px; }
.marker-chips:not(.marker-chips-side) .marker-chip { font-size:23px; padding:5px 14px; }
/* slide 7: seven cards */
section[data-slide="7"] .list-items { gap:6px; }
section[data-slide="7"] .list-card { padding:6px 20px; }
section[data-slide="7"] .list-card .item-label { font-size:17px; margin-bottom:1px; }
section[data-slide="7"] .list-card .item-text { font-size:24px; line-height:1.2; }
/* slide 56: six rows with long example lists */
section[data-slide="56"] .compare-header, section[data-slide="56"] .compare-row { grid-template-columns:0.95fr 1fr 1.7fr; }
section[data-slide="56"] .compare-row { padding:7px 18px; }
section[data-slide="56"] .compare-row .compare-feature, section[data-slide="56"] .compare-row .compare-val { font-size:22px; line-height:1.22; }
section[data-slide="56"] .compare-table-body { gap:6px; }
/* feedback beside the answers where the stack is too tall for 1280x800 (slides 34 and 39) */
section.fb-side .slide-body { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); column-gap:28px; align-content:start; }
section.fb-side .slide-body > * { grid-column:1 / -1; }
section.has-case .slide-body > .mcq-case { grid-row:1; }
section.has-case .slide-body > .mcq-question { grid-row:2; }
section.has-case .slide-body > .conf-prompt { grid-row:3; }
section.has-case .slide-body > .confidence-row { grid-row:4; }
section.has-case .slide-body > .mcq-options { grid-column:1; grid-row:5 / 9; }
section.has-case .slide-body > .fb-correct, section.has-case .slide-body > .fb-wrong { grid-column:2; grid-row:5; align-self:start; margin-top:0; }
section.has-case .slide-body > .mcq-continue { grid-column:2; grid-row:6; }
section.has-case .mcq-opt { font-size:19px; padding:9px 14px; }
section.has-case .mcq-feedback { font-size:18px; line-height:1.4; }
section.has-case .mcq-case { font-size:19px; }
section.has-case .mcq-question { font-size:22px; }
section.pattern-seq.fb-side .slide-body > .mcq-question { grid-row:1; }
section.pattern-seq.fb-side .slide-body > .seq-hint { grid-row:2; }
section.pattern-seq.fb-side .slide-body > .seq-list { grid-column:1; grid-row:3 / 8; max-width:none; }
section.pattern-seq.fb-side .slide-body > .drag-btn-row { grid-column:2; grid-row:3; margin-top:0; }
section.pattern-seq.fb-side .slide-body > .fb-correct, section.pattern-seq.fb-side .slide-body > .fb-wrong { grid-column:2; grid-row:4; align-self:start; }
section.pattern-seq.fb-side .slide-body > .mcq-continue { grid-column:2; grid-row:5; }
section[data-slide="39"] .seq-list { gap:6px; }
section[data-slide="39"] .seq-item { font-size:19px; padding:7px 12px; line-height:1.25; }
/* slide 50: eight long movement descriptions */
section[data-slide="50"] .sort-chip { font-size:16px; padding:4px 9px; }
section[data-slide="50"] .sort-label { font-size:17px; }
section[data-slide="50"] .sort-rows .sort-drop { min-height:34px; }
section[data-slide="50"] .sort-targets { gap:5px; }
section[data-slide="50"] .sort-pool { gap:6px; padding:9px; }
/* slide 59: the tour panel is a fixed-height box whose body scrolls */
section[data-slide="59"] .explore-grid { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); height:560px; flex:none; }
section[data-slide="59"] .explore-result-col { min-height:0; overflow:hidden; padding:18px 22px; gap:6px; }
section[data-slide="59"] .explore-instr { font-size:20px; }
section[data-slide="59"] .explore-gland { font-size:30px; margin:0; }
section[data-slide="59"] .explore-k { font-size:16px; margin-top:6px; }
section[data-slide="59"] .explore-v { font-size:20px; line-height:1.35; }
section[data-slide="59"] .explore-caption { font-size:17px; min-height:0; }
/* printed slides (notes.js handout): the motor-unit diagram shows its last state, still */
#handout .mu-svg * { animation:none !important; }
#handout .mu-svg .mu-tag { opacity:1; }
