/* ══════════════════════════════════════════════════════════════════
   lecture.css — HUMB1001 Module 1. Styles engine.css doesn't provide:
   title/divider/front-matter slides, marker chips, gallery, animated-
   step placeholders, the sequence and sort checks, the confidence MCQ
   sub-line, the explorer panel, the simulation, and the wide notes page.
   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; }

/* ── Simulation (Pattern 10) ── */
.sim-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:22px; flex:1; min-height:0; }
.sim-axis { background:var(--offwhite); border-radius:10px; display:flex; align-items:center; justify-content:center; padding:8px; }
.sim-svg { width:100%; height:100%; max-height:560px; }
.sim-node rect { fill:#fff; stroke:var(--green); stroke-width:2; }
.sim-node.cells rect { fill:#EBF5EE; }
.sim-node text { font-family:var(--sans); font-size:17px; font-weight:600; fill:var(--green); text-anchor:middle; }
.sim-flow { stroke:var(--green); stroke-width:4; stroke-dasharray:8 6; animation:simflow 1.6s linear infinite; }
@keyframes simflow { to { stroke-dashoffset:-28; } }
.sim-flow-label { font-family:var(--sans); font-size:14px; font-weight:600; fill:var(--text); }
.sim-fb { fill:none; stroke:var(--gold); stroke-width:3; stroke-dasharray:6 5; transition:opacity .4s; }
.sim-fb-label { font-family:var(--sans); font-size:26px; font-weight:700; fill:var(--gold); }
.sim-fb-caption { font-family:var(--sans); font-size:13px; font-weight:600; fill:#8a6314; }
.sim-panel { display:flex; flex-direction:column; gap:10px; min-height:0; }
.sim-bars { background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px 16px 8px; display:flex; flex-direction:column; gap:8px; }
.sim-bar-row { display:grid; grid-template-columns:110px 1fr 22px; gap:10px; align-items:center; }
.sim-bar-name { font-family:var(--sans); font-size:13px; font-weight:600; color:var(--green); }
.sim-bar { position:relative; height:16px; background:var(--offwhite); border-radius:8px; overflow:hidden; }
.sim-band { position:absolute; left:27%; width:13%; top:0; bottom:0; background:#A9C2B5; opacity:.55; }
.sim-fill { position:absolute; left:0; top:4px; bottom:4px; background:var(--green); border-radius:4px; width:33%; }
.sim-arrow { font-family:var(--sans); font-size:18px; font-weight:700; text-align:center; }
.sim-arrow.up { color:var(--wrong); } .sim-arrow.down { color:#2E5A87; } .sim-arrow.same { color:var(--muted); }
.sim-legend { font-family:var(--sans); font-size:10px; color:var(--muted); margin:0; text-align:right; }
.sim-step-label { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin:4px 0 0; }
.sim-scenarios { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.sim-scenarios button, .sim-predict-btns button { font-family:var(--sans); font-size:13px; text-align:left; background:var(--offwhite); border:1.5px solid var(--border); border-radius:7px; padding:7px 11px; cursor:pointer; }
.sim-scenarios button:hover, .sim-predict-btns button:hover { border-color:var(--gold); }
.sim-scenarios button.chosen { border-color:var(--gold); background:#FDF8EC; font-weight:600; }
.sim-predict { display:none; } .sim-predict.show { display:block; }
.sim-predict-btns { display:flex; gap:8px; margin-top:4px; }
.sim-result { display:none; font-family:var(--sans); font-size:13px; line-height:1.5; padding:10px 14px; border-radius:6px; }
.sim-result.show { display:block; }
.sim-result.good { background:#EBF5EE; border-left:4px solid var(--correct); }
.sim-result.bad { background:#FDF8EC; border-left:4px solid var(--gold); }
.sim-compare { display:none; font-family:var(--serif); font-style:italic; font-size:14px; color:var(--green); margin:0; }
.sim-compare.show { display:block; }

/* ── 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="56"] .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; }
.sim-panel { padding-top:26px; }

/* ── 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 Design step animations (slides 37, 38, 43) */
.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-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; }