/* templates.css — layout glue for template-authored pages (the responsive path).
Thin by design: each template's look and interaction come from the vendored
design system (js/vendor/_ds_bundle.js); this file only hosts the page inside
the player's content zone (scrolling, padding). No content, no re-skinning. */
/* A template page fills the content zone and scrolls when its content is taller than the stage. */
.tpl-page {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
/* a step brighter than the chrome navy, so the stage reads as a panel above the chrome */
background: var(--surface-stage, #1A2E60);
/* tight vertical padding so the fixed-canvas desktop composition fits with NO scroll (spacing
only — never shrinking text); sides keep reasonable breathing room, esp. on mobile. */
padding: 6px 28px 10px;
}
/* Unify the interaction with the stage. The component paints its root wrapper the chrome navy,
which reads as a dark seam around the interaction. Match it to the stage surface so the stage
content area and the interaction background are one lighter-blue panel. Also trim its 34px top
padding to shift the interaction up. SCOPED per template — never global — so a template with a
different surface (e.g. guidedStepper's white panel) is not forced navy. */
.tpl-page--category-match > div { background-color: var(--surface-stage, #1A2E60) !important; padding-top: 8px !important; }
.tpl-page--scorecard > div { padding-top: 8px !important; } /* .sc is transparent → the stage navy shows through */
/* Guided Steps: the handoff component is a full white surface with dark text. To sit it on the
navy stage (matching category-match's lighter-than-chrome background) AND keep that text
readable, present it as a white panel FILLING the stage with the navy showing as a framing
margin — not shrink-wrapped into a small card. */
.tpl-page--guided-stepper { display: flex; flex-direction: column; padding: 14px clamp(12px, 2vw, 28px) 18px; }
.tpl-page--guided-stepper > div {
flex: 1; min-height: 0; width: 100%; max-width: 1180px; margin-inline: auto;
border-radius: 16px; overflow: hidden; box-shadow: 0 8px 26px rgba(8, 12, 26, 0.3);
}
/* ---- Guided Steps: responsive (tablet + phone) — the whole page fits with NO scrolling ---- */
@media (max-width: 1024px) {
/* Bound the page to the space between the header and the fixed bottom bar (56 + 96), so the
stepper's own layout (content region + pinned step bar) fits without growing the document. */
.tpl-page--guided-stepper {
height: calc(100dvh - var(--rc-header-h, 56px) - 96px);
min-height: 0; overflow: hidden;
padding: 10px clamp(10px, 2vw, 20px) 12px;
}
/* cap the step image so it never eats the vertical budget */
.tpl-page--guided-stepper img { max-height: min(210px, 26vh) !important; }
/* Prev/Next become CIRCLES that match the course-player nav buttons (.rc-nav): a
52px circle carrying the SAME bold arrow SVG. font-size:0 hides the
"Previous"/"Next" text; the SVG keeps its explicit 24px size. Class-based (not
[aria-label=...]) so the locked-state label changes never drop the styling. */
.tpl-page--guided-stepper .gs-nav {
width: 52px !important; height: 52px !important; min-height: 52px !important;
padding: 0 !important; border-radius: 50% !important; flex-shrink: 0;
justify-content: center !important; gap: 0 !important; font-size: 0 !important;
}
.tpl-page--guided-stepper .gs-nav svg { width: 24px !important; height: 24px !important; }
/* tighten the step control bar (the div with the border-top seam) */
.tpl-page--guided-stepper div[style*="border-top"] { padding: 10px 16px 12px !important; }
}
/* When the row is too narrow for [ ‹ dots › ] on one line, drop BOTH circles below the dots:
force the dots (tablist) onto their own full-width row; the two circles wrap under it together.
540px clears the widest the flanking row gets (~5 dots + two 52px circles) before it overflows. */
@media (max-width: 540px) {
.tpl-page--guided-stepper [role="tablist"] { order: -1; flex-basis: 100%; }
}
/* ---- Sequence (.tpl-page--sequence) — responsive reflow -------------------------------
The component's visuals are inline styles from the vendored bundle, so the few structural
overrides below need !important. Desktop (>1024px) is untouched. */
@media (max-width: 1024px) {
/* Zero the .tpl-page side padding here: `.seq-page` supplies its own, and the two were
stacking — 28px + 16px per side ate 88px of a 390px phone, collapsing the action text to
~54px (3–4 lines). One owner of the horizontal gutter, not two. */
.tpl-page--sequence { padding-left: 0 !important; padding-right: 0 !important; }
.tpl-page--sequence .seq-page { padding: 18px 14px 24px !important; }
.tpl-page--sequence h2 { font-size: 22px !important; }
}
/* ≤700px the component itself switches to LIST MODE (one reorderable list — top = first;
no zones, no bank), so no grid reflow is needed here: the rows are compact horizontal
cards sized inline by the component. */
/* Guided Steps reveal — a dismissible popover CARD (fixed overlay) rather than an inline panel that
pushes the layout and forces scrolling. Backdrop or × closes it; a long reveal scrolls INSIDE the
card, so the page never grows and "everything fits, no scrolling" holds at every screen size. */
.gs-reveal-overlay {
position: fixed; inset: 0; z-index: 80;
display: flex; align-items: center; justify-content: center; padding: 20px;
background: rgba(8, 12, 26, 0.45);
font-family: 'Archivo', system-ui, sans-serif;
}
.gs-reveal-card {
position: relative; width: 100%; max-width: 460px; max-height: 76vh; overflow: auto;
background: var(--surface-stage, #1A2E60);
border: 1px solid rgba(18, 166, 106, 0.45); border-top: 4px solid #12A66A;
border-radius: 14px; padding: 24px; box-shadow: 0 18px 50px rgba(8, 12, 26, 0.55);
}
.gs-reveal-close {
position: absolute; top: 6px; right: 8px; width: 38px; height: 38px;
border: none; background: transparent; color: rgba(255, 255, 255, 0.65); font-size: 28px; line-height: 1;
cursor: pointer; border-radius: 8px;
}
.gs-reveal-close:hover { color: #fff; }
.gs-reveal-label {
font-weight: 800; font-size: 14px; letter-spacing: 0.4px; color: #35D18A;
text-transform: uppercase; margin: 0 32px 10px 0;
}
.gs-reveal-body { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
/* Guided Steps step image (author 2026-07-27, revised same day after diagnosis).
The WRAPPER (.gs-step-media) owns the aspect-ratio, not the img — 8/3 on desktop
(crop-free at the authored 1600x600 art, keeps the band short enough that the step
body still fits without scrolling), 4/3 on mobile/tablet (those layouts ALREADY
scroll per-step regardless of image height, so the crop can relax). The img just
fills the wrapper (position:absolute; inset:0).
WHY THE WRAPPER, NOT THE IMG DIRECTLY: an aspect-ratio on the img alone was silently
clamped to a flat 210px on mobile/tablet by an OLDER, broader, pre-existing rule
below (`.tpl-page--guided-stepper img { max-height: min(210px,26vh) !important }` —
a "cap the image so it never eats the vertical budget" guard that predates this
class and is left untouched here, since other images in that container may still
need it). 8/3 never exceeded that cap so it went unnoticed; 4/3 did — confirmed by
forcing max-height:none on the live element, which alone unlocked the correct
234px height. The wrapper's OWN aspect-ratio isn't a "max-height", so that old rule
can't touch it; `.gs-step-media .gs-step-img`'s max-height:none (below) then
guarantees the img itself is never independently capped either — two classes beats
the old rule's one-class-plus-type-selector specificity, so it reliably wins even
though both carry !important. */
/* The band's shape is now AUTHORABLE per breakpoint (author 2026-07-29), because a fixed
band shape cannot honour a protect-rect: with the desktop band at 8/3, the rects drawn
over scenario-1-setup steps 2-3 and scenario-2-delivery-complete step 1 provably CANNOT
FIT at any focal (authoring/scripts/frame_from_safe.py reports "CANNOT FIT at cover" for
all three), so the subject was being cut no matter how the crop was tuned. At 4/3 all
three fit. `config.aspect` / `step.aspect` publish --gs-media-aspect-* below; the media
queries pick one, same reason as --gs-fit-* (a JS breakpoint read freezes at mount). */
.gs-step-media {
aspect-ratio: var(--gs-media-aspect-desktop, 8 / 3);
/* DESKTOP NEEDS A WIDTH CAP once the band is squarer than 8/3. The desktop stage is a fixed
1080-tall canvas that does not scroll, and the band is width-driven — so a 4/3 band at the
card's full width is ~645px tall and pushes the step title and body clean off the card
(observed immediately on the first 4/3 desktop render). Capping the WIDTH keeps the aspect
exactly 4/3 — so the protect-rect is still honoured — and simply draws the band smaller,
centred, with the text back in view. Capping the height instead cannot work: `width: auto`
on a block resolves to stretch rather than deriving from the aspect, so the box would just
become wider than its ratio and crop the rect again. Default `none` = every existing 8/3
page is untouched. */
max-width: var(--gs-media-max-w, none);
margin-inline: auto;
}
.gs-step-media .gs-step-img {
position: absolute; inset: 0; width: 100%; height: 100%;
max-height: none !important;
/* WHICH BREAKPOINT'S CROP APPLIES is decided here, not in JS. _ds_bundle.js publishes
--gs-fit-* / --gs-focal-* for all three platforms on the element; these rules choose
one. The component does not re-render on resize, so a JS breakpoint read would freeze
at whatever it was on mount — a media query simply cannot get out of date.
The img's inline `object-fit: var(--gs-fit, cover)` reads whichever wins. */
--gs-fit: var(--gs-fit-desktop, cover);
--gs-focal: var(--gs-focal-desktop, center);
object-fit: var(--gs-fit, cover);
}
@media (max-width: 1024px) {
.gs-step-media {
aspect-ratio: var(--gs-media-aspect-tablet, var(--gs-media-aspect-desktop, 4 / 3));
max-width: none; /* these layouts already scroll, so the band takes the full width */
}
.gs-step-media .gs-step-img {
--gs-fit: var(--gs-fit-tablet, var(--gs-fit-desktop, cover));
--gs-focal: var(--gs-focal-tablet, var(--gs-focal-desktop, center));
}
}
@media (max-width: 600px) {
.gs-step-media {
aspect-ratio: var(--gs-media-aspect-phone, var(--gs-media-aspect-tablet, var(--gs-media-aspect-desktop, 4 / 3)));
}
.gs-step-media .gs-step-img {
--gs-fit: var(--gs-fit-phone, var(--gs-fit-desktop, cover));
--gs-focal: var(--gs-focal-phone, var(--gs-focal-desktop, center));
}
}
/* Shrink the oversized 36px title; keep the instruction (h2 + p — the ONLY reliable selector, as
card bodies are also
) a compact subtitle directly under it (not orphaned). */
.tpl-page h2 { font-size: 26px !important; line-height: 1.2 !important; }
.tpl-page h2 + p { margin: 2px 0 6px !important; font-size: 15px !important; line-height: 1.4 !important; }
/* Category Match cards — DESKTOP (fixed-canvas): the component centers its cards in a 1240px
column with a fixed 3-column grid. Widen ~15% (still centered → cards spread out), 3 cols × 2
rows. Overrides the component's inline styles; scoped to the stage; never the vendored bundle. */
.tpl-page [style*="max-width: 1240px"] { max-width: 1426px !important; margin-inline: auto !important; }
.tpl-page ul[style*="grid-template-columns"] { grid-template-columns: repeat(3, 1fr) !important; }
/* Category Match with a scene band (config.scene): the items sit in ONE row of up
to 4 so the page fits the stage without scrolling (author 2026-07-27). Class-based
because the rule above clobbers any inline column count. */
.tpl-page ul.cm-items-row[style*="grid-template-columns"] { grid-template-columns: repeat(4, 1fr) !important; }
/* RESPONSIVE reflow below the fixed-canvas breakpoint (the player drops the fixed 1920 canvas at
<1024px and flows to the viewport). The column goes fluid and the cards reflow: 3 → 2 (tablet)
→ 1 (phone, any). Breakpoints align with the player's fixed→responsive switch (RESPONSIVE_MIN). */
@media (max-width: 1024px) {
.tpl-page [style*="max-width: 1240px"] { max-width: 100% !important; }
/* cue cards (the
) → 2 columns; category-reference cards (the
grid) → 2 columns */
.tpl-page ul[style*="grid-template-columns"],
.tpl-page ul.cm-items-row[style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; }
.tpl-page div[style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
/* phone: single column for both cue cards and category-reference cards */
.tpl-page ul[style*="grid-template-columns"],
.tpl-page ul.cm-items-row[style*="grid-template-columns"],
.tpl-page div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
/* ===== Category Match — phone category-reference drawer (<= 600px) =================
On phones the inline category cards are replaced by a collapsible right-edge drawer so the
learner can consult the four categories while scrolling the cue cards. Rendered by
category-match.js from the SAME config.categories (no duplicated content); overlay only — it
never changes page width or the interaction. Hidden entirely above the phone breakpoint. */
.cm-cat-panel { display: none; }
/* Category Match scene band (config.scene): the scenario image shows at EVERY
breakpoint (author 2026-07-27). Desktop/tablet keep the 3/4-image + 1/4-reference
band; on the phone (<=600px) the band survives the structural reference-hide below
and shows the IMAGE full-width — only the inline reference card hides, because the
Categories drawer owns the categories there. */
@media (max-width: 600px) {
.tpl-page--category-match h2 + p + div.cm-scene-band { display: flex !important; }
.cm-scene-band .cm-scene-ref { display: none !important; } /* inline display:flex needs the bang */
/* per-screen override (author 2026-07-27): the phone-only squarer crop (see
scene.mobileAspect in _ds_bundle.js) — desktop/tablet keep scene.aspect's default.
!important: the base ratio is an INLINE style on the same element (bundle), which
always wins over a plain class rule regardless of specificity. */
.cm-scene-card.cm-scene-card--mobile-aspect { aspect-ratio: var(--cm-scene-mobile-aspect) !important; }
}
@media (max-width: 600px) {
/* replace the inline "CATEGORY REFERENCE" white box (the div right after the instruction) */
.tpl-page--category-match h2 + p + div { display: none !important; }
/* the sliding panel: fixed between the (measured) header and the viewport bottom, off-screen
right when closed. pointer-events:none so the closed/empty area never blocks the page. */
.cm-cat-panel {
display: block; position: fixed; z-index: 40;
top: var(--cm-header-h, 56px); bottom: 0; right: 0;
width: min(88vw, 360px);
transform: translateX(100%);
transition: transform 240ms cubic-bezier(.2,.7,.3,1);
overflow: visible; /* let the tab stick out past the panel's left edge */
pointer-events: none;
}
.cm-cat-panel.is-open { transform: translateX(0); }
/* the tab: rides the panel's left edge, so it peeks when closed and sits on the drawer edge
when open — the same button toggles both (aria-expanded on it). Minimal footprint. */
.cm-cat-tab {
position: absolute; left: -40px; top: 16px; width: 40px;
margin: 0; border: 0; padding: 14px 8px;
/* Deep Navy on Signal Blue = 5.13:1; white would be 2.88:1, failing WCAG 1.4.3 AND 1.4.11 */
background: var(--signal, #00A3DD); color: var(--navy, #132554);
font: 700 13px/1 system-ui, sans-serif; letter-spacing: .02em;
writing-mode: vertical-rl; text-orientation: mixed;
border-radius: 10px 0 0 10px; box-shadow: -3px 0 10px rgba(0,0,0,.28);
cursor: pointer; pointer-events: auto;
}
.cm-cat-tab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* the drawer body: fills the panel, scrolls when taller than the viewport */
.cm-cat-drawer {
height: 100%; overflow-y: auto; pointer-events: auto;
background: var(--white, #fff); box-shadow: -8px 0 24px rgba(10,16,35,.35);
padding: 18px 18px 24px;
}
.cm-cat-drawer-head { margin: 0 0 12px; font: 800 18px/1.2 system-ui, sans-serif; color: var(--navy, #132554); }
.cm-cat-drawer-head:focus-visible { outline: 3px solid var(--blue, #00A3DD); outline-offset: 3px; border-radius: 4px; }
.cm-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
/* color is a per-category ACCENT only; meaning is always the label + description text */
.cm-cat-item { border-left: 4px solid var(--cm-cat-color, var(--navy, #132554)); background: rgba(19,37,84,.04); border-radius: 8px; padding: 10px 12px; }
.cm-cat-item-name { display: block; font: 800 15px/1.2 system-ui, sans-serif; color: var(--cm-cat-color, var(--navy, #132554)); }
.cm-cat-item-def { display: block; margin-top: 4px; font: 500 14px/1.45 system-ui, sans-serif; color: var(--ink, #16203A); }
}
@media (prefers-reduced-motion: reduce) {
.cm-cat-panel { transition: none; }
}
/* ===== Completion — course-complete + certificate (LAST screen) ===================
Demo-only template reproduced faithfully from the handoff Completion design: a
centered card with a green check, eyebrow, course title, message, and a
"Download certificate" button. Content via config (completion.js). ============== */
.tpl-page--completion {
display: flex; align-items: center; justify-content: center;
min-height: 100%; padding: clamp(24px, 5vw, 64px);
}
.cmp-card {
background: #fff; border: 1px solid var(--border, #DCE2EC); border-radius: 20px;
padding: clamp(36px, 6vw, 56px) clamp(28px, 6vw, 64px);
text-align: center; max-width: 720px; width: 100%;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
.cmp-check {
width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 24px;
background: rgba(18, 166, 106, 0.10); border: 2px solid var(--correct, #12A66A); color: var(--correct, #12A66A);
display: flex; align-items: center; justify-content: center; font: 800 44px/1 var(--font-ui, 'Archivo', sans-serif);
}
.cmp-eyebrow {
font: 800 15px/1 var(--font-ui, 'Archivo', sans-serif); letter-spacing: 1.5px; text-transform: uppercase;
color: var(--signal, #00A3DD); margin-bottom: 8px;
}
.cmp-title { font: 800 30px/1.15 var(--font-ui, 'Archivo', sans-serif); color: var(--navy, #132554); letter-spacing: -0.5px; margin-bottom: 6px; }
.cmp-body { font: 400 18px/1.6 var(--font-ui, 'Archivo', sans-serif); color: var(--secondary, #5A6577); margin: 12px 0 28px; }
.cmp-btn {
border: none; border-radius: var(--radius-pill, 100px); padding: 15px 40px; cursor: pointer;
font: 800 16px/1 var(--font-ui, 'Archivo', sans-serif); letter-spacing: 0.3px;
background: var(--signal, #00A3DD); color: var(--navy, #132554);
}
.cmp-btn:hover { background: var(--signal-hover, #008EC1); }
.cmp-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 163, 221, 0.55); }
/* ===== Scorecard — end-of-course results summary ==================================
Demo-only template reproduced faithfully from design tokens (never the vendored
bundle). Two columns: left = pass/fail badge + big N/M score + accuracy/passing;
right = the per-decision review list. Data comes entirely from published scores
(scoring.js). DESKTOP layout here; responsive reflow is the final build step. */
.sc {
display: flex;
gap: var(--space-8, 32px);
align-items: flex-start;
padding: 24px 32px 32px;
min-height: 0;
}
/* Left summary card */
.sc-summary {
width: 420px;
flex-shrink: 0;
background: var(--white, #fff);
border: 1px solid var(--border, #DCE2EC);
border-radius: var(--radius-card, 16px);
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
gap: 6px;
box-shadow: var(--shadow-card, 0 1px 2px rgba(19,37,84,0.04));
}
.sc-badge {
display: inline-flex;
align-items: center;
gap: 10px;
font: var(--fw-extrabold, 800) 14px/1 var(--font-ui, system-ui, sans-serif);
letter-spacing: 1px;
text-transform: uppercase;
border-radius: var(--radius-pill, 100px);
border: 1.5px solid;
padding: 8px 20px;
margin-bottom: 12px;
}
.sc-badge.is-pass { color: var(--correct, #12A66A); border-color: var(--correct, #12A66A); background: var(--correct-wash, rgba(18,166,106,0.10)); }
.sc-badge.is-fail { color: var(--incorrect, #E5463E); border-color: var(--incorrect, #E5463E); background: var(--incorrect-wash, rgba(229,70,62,0.07)); }
.sc-badge-dot {
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; color: var(--white, #fff);
}
.sc-badge.is-pass .sc-badge-dot { background: var(--correct, #12A66A); }
.sc-badge.is-fail .sc-badge-dot { background: var(--incorrect, #E5463E); }
.sc-score { font: var(--fw-black, 900) 96px/1 var(--font-ui, system-ui, sans-serif); color: var(--navy, #132554); letter-spacing: -2px; }
.sc-score .sc-denom { color: var(--disabled-btn, #B7C0CE); font-weight: var(--fw-extrabold, 800); }
.sc-score-label { font: 500 18px/1.3 var(--font-ui, system-ui, sans-serif); color: var(--secondary, #5A6577); }
.sc-stats {
display: flex; gap: 40px; justify-content: center; align-items: stretch;
width: 100%; margin-top: 24px; padding-top: 24px;
border-top: 1px solid var(--page, #EEF1F6);
}
.sc-stat-val { font: var(--fw-extrabold, 800) 28px/1 var(--font-ui, system-ui, sans-serif); color: var(--signal, #00A3DD); }
.sc-stat-val.is-navy { color: var(--navy, #132554); }
.sc-stat-label { font: 600 13px/1.2 var(--font-ui, system-ui, sans-serif); color: var(--muted, #8A93A3); margin-top: 2px; }
.sc-stat-sep { width: 1px; background: var(--page, #EEF1F6); }
/* Right review list */
.sc-review { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sc-review-title {
font: var(--fw-extrabold, 800) 14px/1 var(--font-ui, system-ui, sans-serif);
letter-spacing: var(--track-eyebrow, 1.5px); text-transform: uppercase;
color: var(--signal, #00A3DD); margin-bottom: 16px;
}
.sc-rows { display: flex; flex-direction: column; gap: 14px; }
.sc-row {
display: flex; align-items: center; gap: 18px;
background: var(--white, #fff);
border: 1.5px solid var(--border, #DCE2EC);
border-radius: var(--radius-option, 12px);
padding: 18px 22px;
}
.sc-row.is-wrong { background: var(--incorrect-wash, rgba(229,70,62,0.05)); border-color: var(--incorrect, #E5463E); }
.sc-mark {
width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font: var(--fw-extrabold, 800) 16px/1 var(--font-ui, system-ui, sans-serif);
color: var(--white, #fff); background: var(--correct, #12A66A);
}
.sc-row.is-wrong .sc-mark { background: var(--incorrect, #E5463E); }
.sc-q { flex: 1; min-width: 0; }
.sc-q-text { font: var(--fw-bold, 700) 18px/1.3 var(--font-ui, system-ui, sans-serif); color: var(--ink, #16203A); margin-bottom: 3px; }
.sc-q-chose { font: 400 15px/1.4 var(--font-ui, system-ui, sans-serif); color: var(--secondary, #5A6577); }
.sc-q-correct { font: 600 14px/1.4 var(--font-ui, system-ui, sans-serif); color: var(--correct, #12A66A); margin-top: 3px; }
/* The withheld explanation (`immediateFeedback: false`). Set apart with a rule rather than a
colour, because it is prose that has to be READ, not a verdict to be scanned — and because
the row already carries green/red for the outcome. */
.sc-q-feedback {
font: 400 14px/1.5 var(--font-ui, system-ui, sans-serif); color: var(--secondary, #5A6577);
margin-top: 7px; padding-left: 11px; border-left: 3px solid var(--line, #DCE2EC);
}
.sc-row.is-wrong .sc-q-feedback { border-left-color: rgba(229, 70, 62, 0.45); }
.sc-verdict {
flex-shrink: 0;
font: var(--fw-extrabold, 800) 13px/1 var(--font-ui, system-ui, sans-serif);
letter-spacing: 0.5px; color: var(--correct, #12A66A);
}
.sc-row.is-wrong .sc-verdict { color: var(--incorrect, #E5463E); }
.sc-empty {
margin: auto; max-width: 520px; text-align: center;
color: var(--text-on-navy, #fff);
font: 500 17px/1.6 var(--font-ui, system-ui, sans-serif);
}
/* FAIL STATE — what happens next, below the score inside the verdict card. Rendered only
when graded work exists AND the learner is under the pass mark, so a passing scorecard is
untouched. Separated from the stats by a rule rather than a coloured panel: the badge
above already carries the red, and a second alarm would shout at someone who has just
been told they failed. */
.sc-fail {
margin-top: 22px; padding-top: 20px;
border-top: 1px solid var(--border, #DCE2EC);
width: 100%; text-align: center;
}
.sc-fail-title {
font: var(--fw-extrabold, 800) 20px/1.25 var(--font-ui, system-ui, sans-serif);
color: var(--incorrect, #E5463E); margin-bottom: 8px;
}
.sc-fail-body {
font: 400 15px/1.55 var(--font-ui, system-ui, sans-serif);
color: var(--secondary, #5A6577); margin: 0 0 18px;
}
.sc-fail-btn {
font: var(--fw-bold, 700) 15px/1 var(--font-ui, system-ui, sans-serif);
color: #fff; background: var(--signal, #00A3DD);
border: none; border-radius: var(--radius-btn, 999px);
padding: 14px 28px; cursor: pointer;
}
.sc-fail-btn:hover { background: var(--signal-hover, #008EC1); }
.sc-fail-btn:active { background: var(--signal-pressed, #007BA6); }
/* RESPONSIVE reflow (the "final build step" above). At/below the tablet breakpoint the two
columns stack: the overall-result card becomes a full-width banner on top, and the decision
review moves underneath — its rows in a 2-up grid on tablet, a single column on phone.
Breakpoints match the other template reflows above (1024 → tablet, 640 → phone). */
@media (max-width: 1024px) {
.sc { flex-direction: column; align-items: stretch; padding: 20px 24px 28px; }
.sc-summary { width: auto; } /* overall result → full-width banner on top */
.sc-rows { display: grid; grid-template-columns: repeat(2, 1fr); } /* answers → two columns underneath */
}
@media (max-width: 640px) {
.sc { padding: 16px 16px 24px; }
.sc-rows { grid-template-columns: 1fr; } /* phone → single column */
}
/* ===== Accordion — "Explore" two-panel reveal ====================================
Demo-only template reproduced faithfully from design tokens (never the vendored
bundle). Left = an illustration that cross-fades to the open panel; right = a
single-open vertical accordion (numbered rows, +/- toggle). Content + images
come entirely from the screen JSON (accordion.js). Colors mirror the handoff:
DEEP #0E1C42 media panel, signal-blue accents, white text on the navy stage. */
.tpl-page--accordion > div { padding-top: 8px; } /* .acc is transparent → the stage navy shows through */
.acc {
/* ONE phase of the panel-change choreography; two phases = the advance-click
clip runtime (ui-sounds.js / accordion.js PHASE_MS — keep in sync) */
--acc-phase: 370ms;
display: flex;
gap: 0;
min-height: 0;
height: 100%;
background: var(--surface-deep, #0E1C42);
border-radius: var(--radius-card, 16px);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.10);
}
/* Left illustration panel — swaps with the open row */
.acc-media {
width: 46%;
flex-shrink: 0;
background: var(--surface-deep, #0E1C42);
border-right: 1px solid rgba(255, 255, 255, 0.10);
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.acc-media-frame {
width: 100%;
aspect-ratio: 8 / 3; /* matches the authored scene art (1600×600); wide, subject left-anchored */
position: relative;
overflow: hidden;
border-radius: 12px;
background: #E7EBF1;
box-shadow: inset 0 2px 22px rgba(19, 37, 84, 0.14);
border: 1px solid #D5DCE8;
/* ADVANCE-CLICK contract (author 2026-07-26): the panel change is TWO PHASES of
--acc-phase each, totalling the advance-click clips' runtime (~740ms, see
ui-sounds.js + accordion.js PHASE_MS — change them together).
phase 1: rows shift (grid-rows below) while the OLD image fades out
phase 2: the NEW image fades in together with the new body text
Row headers never fade — only the panel content that changes. */
animation: mvImageFade var(--acc-phase, 370ms) ease-in-out; /* keyframes in player.css */
}
.acc-media-frame.is-leaving { animation: accMediaOut var(--acc-phase, 370ms) ease-in-out both; }
@keyframes accMediaOut { from { opacity: 1; } to { opacity: 0; } }
.acc-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Right accordion column */
.acc-list-col {
flex: 1;
min-width: 0;
padding: 40px 56px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.acc-eyebrow {
font: var(--fw-extrabold, 800) 16px/1 var(--font-ui, 'Archivo', system-ui, sans-serif);
letter-spacing: 1.5px; text-transform: uppercase; color: var(--signal, #00A3DD);
}
.acc-heading {
font-family: var(--font-display, 'Archivo', sans-serif);
font-weight: 800; font-size: 34px; line-height: 1.15;
color: #fff; margin: 6px 0 20px;
}
/* authored line breaks in panel bodies render as-is (e.g. a formula on its own line,
2026-07-26); single-paragraph bodies are unaffected. The OPEN panel's body text
fades in during PHASE 2 (delayed one phase, invisible through the row shift via
fill-mode both) — together with the new image, per the advance-click contract. */
.acc-body-text { white-space: pre-line; }
.acc-body-wrap.is-open .acc-body-text {
animation: mvImageFade var(--acc-phase, 370ms) ease-in-out var(--acc-phase, 370ms) both;
}
/* optional instruction line under the heading (config.subtitle, 2026-07-26) */
.acc-subtitle {
margin: -10px 0 18px;
font: 400 17px/1.5 var(--font-ui, 'Archivo', sans-serif);
color: rgba(255, 255, 255, 0.82);
}
.acc-list { display: flex; flex-direction: column; }
.acc-item { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
/* PHASE 1 row shift: every body lives in a grid-rows wrapper (0fr closed, 1fr
open) so the closing and opening panels animate against each other over one
phase. Closed wraps are `inert` (renderer) — out of tab order and the a11y
tree, the job the old `hidden` attribute did. */
.acc-body-wrap {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows var(--acc-phase, 370ms) ease-in-out;
}
.acc-body-wrap.is-open { grid-template-rows: 1fr; }
.acc-head {
width: 100%; text-align: left; background: transparent; border: none; cursor: pointer;
padding: 20px 4px; display: flex; align-items: center; gap: 16px;
}
.acc-num {
width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font: 800 15px/1 var(--font-ui, 'Archivo', system-ui, sans-serif);
background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.7);
}
/* Deep Navy on Signal Blue = 5.13:1; white would be 2.88:1, failing WCAG 1.4.3 AND 1.4.11 */
.acc-item.is-open .acc-num { background: var(--signal, #00A3DD); color: var(--navy, #132554); }
.acc-title { flex: 1; font: 700 21px/1.25 var(--font-ui, 'Archivo', system-ui, sans-serif); color: #fff; }
.acc-toggle {
font-size: 30px; font-weight: 400; color: var(--signal, #00A3DD);
line-height: 1; width: 24px; text-align: center; flex-shrink: 0;
}
.acc-body {
padding: 0 4px 0 46px;
font: 400 18px/1.6 var(--font-ui, 'Archivo', system-ui, sans-serif);
color: rgba(255, 255, 255, 0.8);
/* grid-rows collapse plumbing: the wrapper track animates 0fr<->1fr; the body
itself must be clippable for that to read as a slide. The old mvModalIn pop
is retired — the choreography above owns the entrance now.
CLOSED = zero vertical padding, and that is load-bearing: a border-box can
never be shorter than its own padding, so a closed body with padding-bottom
22px holds the track open 22px and the first line of text peeks through
(author bug report). The bottom padding belongs to the OPEN state only and
transitions with the row shift, so it reads as part of the same motion. */
overflow: hidden; min-height: 0;
transition: padding-bottom var(--acc-phase, 370ms) ease-in-out;
}
.acc-body-wrap.is-open .acc-body { padding-bottom: 22px; }
.acc-head:focus-visible { outline: 3px solid var(--signal, #00A3DD); outline-offset: 2px; border-radius: 8px; }
/* The per-row inline image is desktop-hidden: on desktop the shared left panel is the
illustration, so this copy never shows above 1024px. */
.acc-body-img { display: none; }
/* RESPONSIVE reflow (matches the other template reflows: 1024 → tablet/phone). The shared
top illustration is disconnected from whichever row you tapped (and scrolls off-screen as
you open lower rows), so HIDE it and show each panel's image INSIDE its own expanded body
instead — the illustration then stays with the expanded item. */
@media (max-width: 1024px) {
.acc { flex-direction: column; height: auto; }
.acc-media { display: none; }
.acc-list-col { padding: 24px clamp(16px, 4vw, 40px) 28px; }
.acc-heading { font-size: 26px; }
.acc-title { font-size: 18px; }
/* Clicking a header scrolls it into view (accordion.js, author 2026-07-27) so
it anchors near the top and the expanding image/text reveal by scrolling
down from there. scroll-margin-top keeps scrollIntoView from landing the
header UNDER the fixed viewport-anchored chrome header (--rc-header-h,
player.css .rc-shell) with a little breathing room past it. */
.acc-head { scroll-margin-top: calc(var(--rc-header-h, 56px) + 12px); }
/* Symmetric horizontal padding here so the image centers on the FULL column. The body's
title-indent (46px) moves onto the text only (.acc-body-text) — otherwise the lopsided
46px-left / 4px-right box would push the "centered" image ~21px to the right. */
/* zero vertical padding when closed (same peek-guard as desktop); the is-open
rule above restores the 22px bottom, transitioned with the row shift */
.acc-body { font-size: 16px; padding: 0; }
.acc-body-text { padding-left: 46px; }
.acc-body-img {
display: block;
width: 100%; max-width: 560px;
/* THE PICTURE KEEPS ITS OWN SHAPE HERE (author 2026-07-29: "way too cropped and
zoomed in on tablet and on mobile — it should keep the aspect ratio it was printed
in and just zoom out to fit").
This used to force `aspect-ratio: 4/3; object-fit: cover` for headroom (2026-07-27).
But the panel art is authored at 8/3, so squeezing a wide plate into a 4/3 box and
cropping to fill threw away most of each side. `auto` + `contain` lets the box take
the image's natural ratio: nothing is cut, the whole plate is simply smaller — which
is the right trade on a layout that already scrolls. */
aspect-ratio: auto; height: auto; object-fit: contain;
border-radius: 12px;
background: #E7EBF1; border: 1px solid #D5DCE8;
box-shadow: inset 0 2px 22px rgba(19, 37, 84, 0.14);
margin: 4px auto 16px; /* truly centered now that the box is symmetric */
}
/* tablet/phone: the inline image IS the picture, so it takes phase 2 with the text */
.acc-body-wrap.is-open .acc-body-img {
animation: mvImageFade var(--acc-phase, 370ms) ease-in-out var(--acc-phase, 370ms) both;
}
}
/* Reduced motion: hard-cut, no fades, no row-shift transition (the renderer also
skips the swap state entirely). */
@media (prefers-reduced-motion: reduce) {
.acc-media-frame, .acc-media-frame.is-leaving, .acc-body, .acc-body-img, .acc-body-text,
.acc-body-wrap.is-open .acc-body-text, .acc-body-wrap.is-open .acc-body-img { animation: none; }
.acc-body-wrap, .acc-body { transition: none; }
}
/* ===== Multiple Choice — single-answer question ===================================
Demo-only template reproduced faithfully from design tokens (never the vendored
bundle). Optional scenario rail (DEEP navy) + scene image with a thought bubble,
a NAVY prompt bar, and a row of white answer cards. Select → Submit → feedback
modal → retry-until-correct. Scorable (scoring.js). DESKTOP layout here; the
responsive reflow is the final build step below. Tokens: DEEP #0E1C42,
NAVY #132554, signal #00A3DD, ink #16203A, correct #12A66A, incorrect #E5463E. */
.tpl-page--multiple-choice { padding: 8px; position: relative; } /* anchors the intro modal */
/* ===== Multiple Choice: intro narration modal (config.intro) ================
The narrator stands in the lecture-accordion ROOM (light-navy wall + floor
gradient) while the scenario + observations fall in beside her. Desktop and
tablet: text LEFT / figure RIGHT. Phone: text above, figure below. */
.mc-intro-scrim {
position: absolute; inset: 0; z-index: 40;
background: rgba(8, 15, 34, 0.72);
display: flex; align-items: center; justify-content: center;
animation: mvModalIn 240ms cubic-bezier(.2, .7, .3, 1);
}
.mc-intro-modal {
position: relative;
width: min(1040px, 92%); height: min(620px, 90%);
background: #1d3163;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 20px; overflow: hidden;
display: flex;
}
.mc-intro-panel {
flex: 1; min-width: 0; padding: 42px 46px 30px;
display: flex; flex-direction: column; gap: 16px; overflow: auto;
}
.mc-intro-eyebrow {
display: block;
font: var(--fw-extrabold, 800) 13px/1 var(--font-ui, 'Archivo', system-ui, sans-serif);
letter-spacing: 1.4px; text-transform: uppercase;
color: var(--signal, #00A3DD);
margin-bottom: 8px;
}
.mc-intro-item + .mc-intro-item .mc-intro-eyebrow { margin-top: 10px; }
.mc-intro-text { margin: 0; font: 400 20px/1.5 var(--font-ui, 'Archivo', system-ui, sans-serif); color: rgba(255, 255, 255, 0.95); }
.mc-intro-obs {
display: flex; gap: 12px; align-items: flex-start;
font: 400 17px/1.5 var(--font-ui, 'Archivo', system-ui, sans-serif); color: rgba(255, 255, 255, 0.88);
}
.mc-intro-dot {
flex: 0 0 auto; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%;
border: 2px solid var(--signal, #00A3DD);
}
.mc-intro-item { opacity: 0; transform: translateY(10px); transition: opacity 450ms ease, transform 450ms ease; }
.mc-intro-item.is-in { opacity: 1; transform: none; }
.mc-intro-btn {
margin-top: auto; align-self: flex-start;
border: none; border-radius: var(--radius-pill, 100px); padding: 15px 40px; cursor: pointer;
font: 800 16px/1 var(--font-ui, 'Archivo', sans-serif); letter-spacing: 0.3px;
background: var(--signal, #00A3DD); color: var(--navy, #132554);
}
.mc-intro-btn:hover { background: var(--signal-hover, #008EC1); }
.mc-intro-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 163, 221, 0.55); }
/* the ROOM: light-navy back wall, floor gradient darker where it meets the wall */
.mc-intro-figure {
flex: 0 0 36%; position: relative; min-height: 0;
background: #26407a;
border-left: 1px solid rgba(255, 255, 255, 0.10);
}
.mc-intro-figure::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 22%; pointer-events: none;
background: linear-gradient(to bottom, #0b1631 0%, #16264f 55%, #1d3163 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.mc-intro-figure img {
position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%);
height: 88%; max-width: 92%; object-fit: contain; object-position: bottom;
z-index: 1; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}
/* Guided Steps verdict mark (step.mark:"x", 2026-07-25): a red X snaps in over the
step image and pulses twice, then holds. The overlay is keyed per step in the
bundle, so re-entering the step replays it. Reduced motion: static X, no pulse. */
.gs-mark-x {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
display: flex; align-items: center; justify-content: center;
background: rgba(127, 29, 29, 0.14);
}
.gs-mark-x svg {
width: min(38%, 190px); height: auto; overflow: visible;
animation: gsMarkX 1.9s ease-out both;
filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
}
.gs-mark-x path { stroke: #E0362C; stroke-width: 13; stroke-linecap: round; fill: none; }
@keyframes gsMarkX {
0% { opacity: 0; transform: scale(1.6); }
18% { opacity: 1; transform: scale(1); }
38% { transform: scale(1.14); }
55% { transform: scale(1); }
72% { transform: scale(1.14); }
100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .gs-mark-x svg { animation: none; } }
/* SPEECH MODE (2026-07-25): the narrator alone in her room — light-navy wall, floor
gradient — with a comic-style bubble attached above her head (same configuration as
the intro sequence's comic panel: white, 3px #0E1C42 border, centered tail pointing
down at her) and one button beneath her. */
.mc-intro-modal--speech {
/* AUTHOR'S LAYOUT, 2026-08-01 (his sketch): Loretta hard LEFT, full height, standing on the
floor gradient; her speech in a wide rounded box TOP-RIGHT at head height; Continue below
that box, centre-right, clear of the floor. Was a centred column with the bubble stacked
above her. One change here reaches every intro AND outro on every template, because they
all render the one IntroNarration component — that is the point of it being a template. */
display: grid;
grid-template-columns: minmax(150px, 30%) 1fr;
grid-template-rows: auto 1fr;
align-items: start;
column-gap: clamp(16px, 3%, 34px); row-gap: 18px;
/* THE BOTTOM PADDING RESERVES THE CONTINUE BUTTON'S ROW (author 2026-07-30). The button is
gated on `gateContinue` — it only appears once she has finished speaking — and it used to be
a normal flex child. In a `justify-content: flex-end` column, adding a child mid-scene
pushes every earlier child UP, so Loretta jumped vertically the instant Continue faded in.
Reserving its space here and taking the button out of flow (below) means her position is
identical before and after, which also lets her stand higher than the modal's floor.
--mc-intro-btn-row = 46px button (15px padding x2 + 16px line) + the 18px column gap. */
--mc-intro-btn-row: 64px;
/* Floor height, shared by the gradient and the button below — one number so they
cannot drift apart. */
--mc-intro-floor: 24%;
/* Halved top/bottom air so she fills the stage (author 2026-08-01) — 30->15 above her hair,
26->13 below her feet. The button's reserved row is untouched, so its late arrival still
cannot move her. */
padding: 26px 28px calc(13px + var(--mc-intro-btn-row));
background: #26407a;
}
.mc-intro-modal--speech::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--mc-intro-floor);
pointer-events: none;
background: linear-gradient(to bottom, #0b1631 0%, #16264f 55%, #1d3163 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.mc-intro-speech-bubble {
position: relative; z-index: 1;
grid-column: 2; grid-row: 1; align-self: start;
width: 100%;
background: #fff; color: #16203A; border: 3px solid #0E1C42; border-radius: 15px;
padding: 13px 18px;
font: 650 19px/1.35 var(--font-ui, 'Archivo', system-ui, sans-serif);
box-shadow: 0 6px 16px rgba(8, 12, 26, 0.35); text-align: left;
}
/* Tail points LEFT, at her head — she now stands beside the box rather than under it. Two
layers, outline then fill, so the wedge keeps the 3px dark border the body has. */
.mc-intro-speech-bubble::after {
content: ""; position: absolute; right: 100%; top: 34px; margin-top: -11px;
border: 11px solid transparent; border-right-color: #0E1C42;
}
.mc-intro-speech-bubble::before {
content: ""; position: absolute; right: calc(100% - 4px); top: 34px; margin-top: -8px;
border: 8px solid transparent; border-right-color: #fff; z-index: 1;
}
.mc-intro-speech-figure {
position: relative; z-index: 1;
/* spans both rows and sits on the floor: `end` alignment is what makes her STAND on the
gradient rather than float above it, and the height lets her break well above the floor
line as drawn. */
grid-column: 1; grid-row: 1 / -1; align-self: end; justify-self: center;
height: 96%; max-width: 100%; object-fit: contain; object-position: bottom;
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}
/* OUT OF FLOW, in the row reserved above — so its arrival cannot move the figure. Absolute
rather than `visibility: hidden` on a placeholder, because the button is conditionally
rendered in JS (intro-narration.js) and there is no element to reserve with when it is absent. */
.mc-intro-modal--speech .mc-intro-btn {
/* Centred on the RIGHT COLUMN (the text side), not on the modal — Loretta occupies the left
~30%, so a modal-centred button sat visually under her rather than under her speech.
Still absolute, still inside the reserved --mc-intro-btn-row, so its late arrival cannot
move her: the gate means it appears only after she stops speaking. */
margin: 0; z-index: 2;
position: absolute; left: 65%; /* centre of the right column: 30% + 70%/2 */
/* Clear of the floor by the SAME 26px the speech box gets against the modal edge
(author 2026-08-01) — it used to sit at 26px from the modal bottom, which put it
inside the gradient band rather than resting above it. Both distances now come
from the one padding value, so restyling the modal keeps them equal. */
bottom: calc(var(--mc-intro-floor) + 26px);
transform: translateX(-50%);
}
@media (max-width: 1024px) {
/* the responsive player scrolls the document — pin the scrim to the viewport.
Tablet keeps the side-by-side layout.
INSET BY THE REAL CHROME (author 2026-07-27): the scrim used to cover the whole
100vh viewport, so the flex-centered modal's own height cap (a flat 600px) was
centered against space that included the fixed header/bottom bar — well short of
the true visible window on a tall phone, leaving a chrome-navy gap between the
modal and the bar. Insetting the scrim by --rc-header-h/--rc-footer-h (measured
live, chrome-responsive.js) means "100%" here IS the true content window, so the
modal can fill it properly instead of guessing a fixed pixel cap. */
.mc-intro-scrim { position: fixed; top: var(--rc-header-h); bottom: var(--rc-footer-h); }
/* no fixed px cap here (was min(600px,...) — 600 was STILL the binding constraint
even after the scrim's own inset was fixed, since 600 < a typical phone's ~694px
available height, so the gap barely moved on the first pass of this fix). The
scrim above is already correctly bounded to the true content window, so 100% IS
the right size — nothing left to cap it against. */
.mc-intro-modal { width: 94%; height: 100%; }
.mc-intro-panel { padding: 26px 24px 20px; }
.mc-intro-text { font-size: 18px; }
/* SPEECH MODE ONLY, tablet/narrow (author 2026-08-01): the modal was stretched to the full
scrim height, which left a large empty field above Loretta's head and floated her speech
box away from her. It now SHRINKS TO ITS CONTENT and the scrim's existing
`align-items: center` centres it vertically — no new centring mechanism needed.
The air above her head is the modal's own top padding, set to 13px so it matches the
padding inside the speech bubble beside her head, exactly as asked.
Scoped to this breakpoint deliberately: desktop is a different composition and was not
what the author was looking at. */
.mc-intro-modal--speech {
height: auto; max-height: 100%;
padding-top: 13px;
}
/* `width: auto` is what makes the 13px true. With a stretched box, `object-fit: contain`
letterboxes the spare space ABOVE her (object-position: bottom), so the gap above her hair
was the letterbox, not the padding. Sizing by height and letting the width follow means the
box hugs the artwork — and the art is alpha-cropped (CLAUDE.md §30.17), so the top of the
image IS the top of her hair. */
.mc-intro-modal--speech .mc-intro-speech-figure {
height: clamp(240px, 44vh, 460px); width: auto; max-width: 100%;
}
}
@media (max-width: 640px) {
/* phone: text ABOVE, the narrator below in her room */
.mc-intro-modal { flex-direction: column; }
.mc-intro-figure { flex: 0 0 32%; border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.10); }
.mc-intro-figure img { height: 92%; }
/* speech mode keeps its single column; just tighter type and a shorter figure */
/* Same reserved button row, with this block's tighter 14px gap. */
.mc-intro-modal--speech {
flex-direction: column; gap: 14px;
--mc-intro-btn-row: 60px;
padding: 20px 16px calc(20px + var(--mc-intro-btn-row));
}
/* Phone: no room for a 30/70 split, so the halves stack — bubble on top, her beneath it,
tail swung back to pointing DOWN at her head. The desktop layout is the author's spec;
this is the same composition folded, not a different design. */
.mc-intro-modal--speech { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.mc-intro-speech-bubble { grid-column: 1; grid-row: 1; font-size: 16px; padding: 11px 14px; }
.mc-intro-speech-bubble::after {
right: auto; left: 50%; top: 100%; margin: -11px 0 0 -11px;
border-right-color: transparent; border-top-color: #0E1C42;
}
.mc-intro-speech-bubble::before {
right: auto; left: 50%; top: calc(100% - 4px); margin: -8px 0 0 -8px;
border-right-color: transparent; border-top-color: #fff;
}
.mc-intro-speech-figure { grid-column: 1; grid-row: 2; height: 46%; }
/* PHONE KEEPS THE BUTTON ON THE FLOOR GRADIENT — author-confirmed 2026-08-01, do not "fix"
this to match tablet. Tablet/desktop rest the button ABOVE the gradient
(`calc(var(--mc-intro-floor) + 26px)`); on phone the modal is a single stacked column and
that placement would push the button off the bottom, so a flat 20px from the modal edge is
correct here. The three breakpoints differ on purpose. */
.mc-intro-modal--speech .mc-intro-btn { bottom: 20px; left: 50%; }
}
@media (prefers-reduced-motion: reduce) {
.mc-intro-scrim { animation: none; }
.mc-intro-item { transition: none; }
.tpl-fb-card.is-leaving { animation: none; opacity: 0; }
.mc-intro-scrim--outro .mc-intro-modal { animation: none; }
}
.mc {
position: relative; /* anchors the floating Submit + feedback modal */
display: flex; flex-direction: column;
height: 100%; min-height: 0;
background: var(--navy, #132554);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-card, 16px);
overflow: hidden;
}
.mc-eyebrow {
font: var(--fw-extrabold, 800) 14px/1 var(--font-ui, 'Archivo', system-ui, sans-serif);
letter-spacing: 1.5px; text-transform: uppercase; color: var(--signal, #00A3DD); margin-bottom: 8px;
}
/* Upper: scenario rail + scene */
.mc-upper { display: flex; flex: 1 1 60%; min-height: 0; }
.mc-rail {
/* Wider on desktop (author 2026-07-30: "I see no reason why the scenario information and what
you observe couldn't take up more space on the left side"). This costs NOTHING vertically —
the upper band is 1902px wide and was using only ~1224 of it (rail 360 + an aspect-locked
scene), so ~680px sat empty. The scene is aspect-locked, so it cannot absorb spare width
without also growing taller and stealing from the cards; the rail can, because its content
is text that simply reflows. That is why this is the one free improvement here. */
width: var(--mc-rail-w, 480px); flex-shrink: 0;
background: var(--surface-deep, #0E1C42);
border-right: 1px solid rgba(255, 255, 255, 0.10);
padding: 28px 30px; display: flex; flex-direction: column; gap: 18px; overflow: auto;
}
.mc-scenario-text { font: 400 19px/1.4 var(--font-ui, 'Archivo', system-ui, sans-serif); color: #fff; }
.mc-divider { height: 1px; background: rgba(255, 255, 255, 0.14); }
.mc-obs-list { display: flex; flex-direction: column; gap: 12px; }
.mc-obs { display: flex; align-items: center; gap: 12px; }
.mc-obs-icon { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.mc-obs-marker {
width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
border: 2.4px solid var(--signal, #00A3DD);
}
.mc-obs-text { font: 400 17px/1.3 var(--font-ui, 'Archivo', system-ui, sans-serif); color: #fff; }
.mc-scene-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 18px; min-width: 0; }
.mc-scene {
height: 96%; aspect-ratio: 21 / 9; max-width: 100%; flex-shrink: 0; position: relative;
overflow: hidden; border-radius: 12px; background: #E7EBF1;
box-shadow: inset 0 2px 22px rgba(19, 37, 84, 0.14); border: 1px solid #D5DCE8;
}
.mc-scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
/* Which breakpoint's focal applies is decided here, not in JS (same reason as --gs-focal-*:
the component does not re-render on resize, so a JS breakpoint read would freeze at
mount). choice-parts.js publishes all three; the img's object-position reads --mc-scene-focal. */
--mc-scene-focal: var(--mc-scene-focal-desktop, center);
}
@media (max-width: 1024px) {
.mc-scene-img { --mc-scene-focal: var(--mc-scene-focal-tablet, var(--mc-scene-focal-desktop, center)); }
}
@media (max-width: 600px) {
.mc-scene-img { --mc-scene-focal: var(--mc-scene-focal-phone, var(--mc-scene-focal-desktop, center)); }
}
.mc-thought {
position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
background: #fff; border: 1.5px solid var(--ink, #16203A); border-radius: 22px;
padding: 12px 22px; white-space: nowrap;
}
.mc-thought span { font: 700 22px/1 var(--font-ui, 'Archivo', system-ui, sans-serif); color: var(--ink, #16203A); }
/* Prompt bar */
.mc-prompt {
/* `0 1 auto` + `min-width: 0`, NOT `0 0 auto` (author bug report 2026-08-07, tablet).
A flex item defaults to min-width:auto, which is its CONTENT width — so with no shrink
factor a long question simply refused to narrow: measured 899px inside a 753px row at
768px wide, hanging 153px off the LEFT because the row centres it, and clipped at both
ends. The text already wraps (`white-space: normal`); it was never allowed to get narrow
enough to need to. max-width belts it so the pill can never exceed its row. */
flex: 0 1 auto; min-width: 0; max-width: 100%;
min-height: 48px; padding: 8px 24px;
display: flex; align-items: center; justify-content: center; background: var(--navy, #132554);
font: 700 24px/1.25 var(--font-ui, 'Archivo', system-ui, sans-serif); color: #fff; text-align: center;
}
/* Answer cards */
.mc-cards {
flex: 1 1 40%; min-height: 0; background: var(--navy, #132554);
/* The 78px bottom pad that used to reserve the floating Submit lane is gone (author
2026-08-05): Submit now lives in the prompt row, so the cards keep this space. */
display: grid; gap: 20px; padding: 0 48px 16px;
grid-template-columns: repeat(var(--mc-cols, 4), 1fr); /* --mc-cols set inline per page */
/* CARDS SHARE ONE HEIGHT SO EVERY OPTION IMAGE STARTS AT THE SAME LINE (author-directed
2026-08-07). This reverses the 2026-08-05 content-sizing, and the reason that one existed
is now handled elsewhere: back then `stretch` dumped the surplus as dead white space UNDER
the picture (43px against 11px at the sides), because `.mc-card-art` is `flex: 0 0 auto`
and nothing above it could grow. `.mc-card-desc` is now `flex: 1 1 auto`, so the surplus
goes into the TEXT block instead and the art still lands on the card's own bottom padding.
Result: uniform card height, uniform bottom gap, and every picture at the same top edge —
the author's words, "I would rather the buttons be uniform size altogether versus some of
them being taller, some shorter." */
align-items: stretch;
}
/* Desktop option carousel (author 2026-07-25): >5 options can't fit the one-row grid,
so ChoiceCards renders the band as a scroll strip (scrollbar hidden) with arrow
buttons at both ends; an arrow fades out at its end of the strip. ≤1024px the
wrapper dissolves (display:contents) and the existing tablet/phone swipe carousels
take over — touch pans, so the arrows are hidden there. */
.mc-cards-wrap { position: relative; flex: 1 1 40%; min-height: 0; display: flex; }
.mc-cards-wrap > .mc-cards { flex: 1 1 auto; min-width: 0; }
.mc-cards--scroll {
/* `stretch`, not `flex-start` (author-directed 2026-08-07) — the strip has no shared row
height, so content-sized cards left neighbours a few px apart and their pictures on
different lines, which is exactly what the author objected to. Stretch was rejected on
2026-08-05 for a reason that no longer applies: it dumped the surplus as dead space under
the picture (41-55px against 11px at the sides on scenario-3) because nothing above the
art could absorb it. `.mc-card-desc` is now `flex: 1 1 auto` and takes it instead, so the
art still sits on the card's own bottom padding. */
display: flex; flex-wrap: nowrap; align-items: stretch;
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.mc-cards--scroll::-webkit-scrollbar { display: none; }
@media (min-width: 1025px) {
/* 4 cards fully visible + a peek of the 5th (the peek is the scroll affordance) */
.mc-cards--scroll .mc-card { flex: 0 0 calc((100% - 80px) / 4.35); scroll-snap-align: start; }
}
.mc-cards-arrow {
position: absolute; z-index: 5;
top: calc((100% - 78px) / 2); /* centered on the card area above the Submit zone */
transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
border: 1.5px solid #DCE2EC; background: rgba(255, 255, 255, 0.94);
color: var(--navy, #132554); font: 700 26px/1 var(--font-ui, 'Archivo', sans-serif);
cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
display: flex; align-items: center; justify-content: center;
/* Optical centring of the chevron, MEASURED rather than eyeballed (author 2026-08-05:
"it looks a little high"). The ink of `›` sits +0.5px below its own line-box centre, and
a bottom padding of P lifts the flex-centred content by P/2 — so the offset from the
button's centre is 0.5 − P/2. The old P=3 put it a full 1px HIGH; P=1 lands it at 0.00. */
padding: 0 0 1px;
transition: opacity 160ms ease;
}
.mc-cards-arrow:hover { background: #fff; }
.mc-cards-arrow:focus-visible { outline: 3px solid var(--signal, #00A3DD); outline-offset: 2px; }
.mc-cards-arrow--left { left: 6px; }
.mc-cards-arrow--right { right: 6px; }
.mc-cards-arrow.is-off { opacity: 0; pointer-events: none; }
/* `is-end` = at that end of the strip, but the question is still unsolved, so the arrow
stays VISIBLE instead of fading out (author 2026-07-28). Dimmed enough to read as
"nothing further this way" while never leaving the learner with no visible control in
either direction — which is what the old opacity:0 could do at the far end of a long
option strip. Still interactive: `nudge` clamps, so the click is a no-op. */
.mc-cards-arrow.is-end { opacity: 0.42; }
.mc-cards-arrow.is-end:hover { opacity: 0.72; background: #fff; }
@media (max-width: 1024px) {
.mc-cards-wrap { display: contents; }
.mc-cards-arrow { display: none; }
}
/* ---- Guided Multiple Choice: the stepped scene cycler (scene-cycler.js) -----------------
Reuses `.mc-scene-wrap` / `.mc-scene` so the cycler occupies exactly the slot the single
scene plate did, with the same aspect + focal handling. Only the contents are new. */
/* `.mc-scene-wrap` is a ROW flex container (it was only ever given one child), so a dots strip
added as a sibling lands BESIDE the picture, vertically centred, overlapping it by ~122px.
Scoped to the cycler's own class so the shared wrapper is untouched. */
.scy-wrap { flex-direction: column; justify-content: center; }
/* The base `.mc-scene` is 21/9 — right for a wide scene plate, wrong for step art drawn at
1.25–1.41, which that ratio crops savagely. The cycler honours the screen's authored
`scenario.scene.aspect` on DESKTOP too (the shared `.mc-scene--custom` rule only applies
inside the narrow media query), falling back to 16/10 when none is authored. */
/* HEIGHT-DRIVEN at the AUTHORED ratio — the same sizing model as `.mc-scene`, just not locked
to 21/9. Width-driven was wrong here (author 2026-08-05, with a marked-up screenshot): filling
the column made the box 924px wide against source art only 762–939px across, so every step
image was upscaled past its native resolution — visibly soft, on top of being cropped to a
thin horizontal slice. Driving from height at 5/4 makes it TALLER and NARROWER, which frames
the art properly and brings it back under 1:1 so it renders sharp.
88% (not `.mc-scene`'s 96%) leaves the dots strip its row underneath. */
/* The picture and its two arrows, side by side. The arrows are ordinary flex items now, so they
sit in the band's spare width instead of covering the art. */
.scy-row {
display: flex; align-items: center; justify-content: center; gap: 14px;
width: 100%; height: 85%; min-height: 0;
}
.scy {
position: relative; overflow: hidden;
height: 100%; width: auto; max-width: 100%; flex-shrink: 1; min-width: 0;
aspect-ratio: var(--mc-scene-aspect, 15 / 8);
}
.scy-img { transition: opacity 200ms ease; }
/* The caption plate. A gradient, not a flat band: a hard edge across the middle of the art
reads as a crop, while a gradient lets the picture carry through into the text. */
.scy-caption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 34px 20px 16px;
background: linear-gradient(to bottom, rgba(14, 28, 66, 0) 0%, rgba(14, 28, 66, 0.72) 38%, rgba(14, 28, 66, 0.92) 100%);
color: #fff; text-align: left; pointer-events: none;
}
.scy-caption-title {
font: 800 17px/1.25 var(--font-head, 'Archivo', system-ui, sans-serif);
color: #fff; margin-bottom: 4px;
}
.scy-caption-body {
margin: 0; font: 400 14px/1.45 var(--font-ui, 'Archivo', system-ui, sans-serif);
color: rgba(255, 255, 255, 0.94);
}
/* Arrows: same visual language as the option-strip arrows, and the same lesson learned —
the centring transform is re-declared in :active so the press cannot slide the button out
from under the pointer (see .mc-cards-arrow). */
.scy-arrow {
flex: 0 0 auto; z-index: 3;
width: 38px; height: 38px; border-radius: 50%;
border: 1.5px solid #DCE2EC; background: rgba(255, 255, 255, 0.94);
color: var(--navy, #132554); font: 700 22px/1 var(--font-ui, 'Archivo', sans-serif);
display: flex; align-items: center; justify-content: center;
padding: 0 0 1px; cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
transition: opacity 160ms ease;
}
.scy-arrow:hover:not(:disabled) { background: #fff; }
.scy-arrow:disabled { opacity: 0.32; cursor: default; }
/* No centring transform to preserve now that the arrow is a flex item, so the press is just
the scale — nothing for it to replace. */
.scy-arrow:not(:disabled):active { transform: scale(0.94); }
.scy-arrow:focus-visible { outline: 3px solid var(--signal, #00A3DD); outline-offset: 2px; }
/* Dots sit BELOW the picture, not on it — over the caption they would compete with the text,
and under it they double as the progress read-out. `is-seen` is what makes the option gate
legible: the learner can tell at a glance which images they have already stepped through. */
.scy-dots { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 10px; }
.scy-dot {
width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
border: 1.5px solid rgba(255, 255, 255, 0.55); background: transparent;
transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.scy-dot.is-seen { border-color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.45); }
.scy-dot.is-on { background: var(--signal, #00A3DD); border-color: var(--signal, #00A3DD); transform: scale(1.25); }
.scy-dot:focus-visible { outline: 3px solid var(--signal, #00A3DD); outline-offset: 3px; }
@media (max-width: 1024px) {
/* The narrow scene band is shorter, so the caption gets a tighter plate and the arrows
shrink — same controls, never removed (they are the only way to advance on touch). */
.scy-caption { padding: 26px 14px 12px; }
.scy-caption-title { font-size: 15px; }
.scy-caption-body { font-size: 13px; }
.scy-arrow { width: 34px; height: 34px; font-size: 20px; }
}
.mc-card {
position: relative; text-align: left; cursor: pointer; background: #fff;
/* Bottom padding matched to the sides so the picture sits in an even frame (2026-08-05). */
border: 1.5px solid #DCE2EC; border-radius: 16px; padding: 14px 16px 16px;
display: flex; flex-direction: column; overflow: hidden;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.mc-card.is-selected { border: 2px solid var(--signal, #00A3DD); box-shadow: 0 0 0 4px rgba(0, 163, 221, 0.18); }
.mc-card.is-wrong { border: 2px solid var(--incorrect, #E5463E); box-shadow: 0 0 0 4px rgba(229, 70, 62, 0.15); opacity: 0.65; cursor: not-allowed; }
.mc-card:disabled:not(.is-wrong) { cursor: default; }
/* SUBMITTED, DEFERRED FEEDBACK (`immediateFeedback: false` — the graded quiz). Every option
greys out the moment Submit is pressed, so the freeze is visible rather than merely true.
The learner's own pick stays legible and keeps its blue selected border: it is the record of
what they answered, and this screen deliberately says nothing about whether it was right. */
.mc.is-locked-out .mc-card { opacity: 0.45; filter: grayscale(0.85); transition: opacity 200ms ease, filter 200ms ease; }
.mc.is-locked-out .mc-card.is-selected { opacity: 0.9; filter: grayscale(0.25); }
.mc-card:focus-visible { outline: 3px solid var(--signal, #00A3DD); outline-offset: 2px; }
.mc-card-x {
position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%;
background: var(--incorrect, #E5463E); color: #fff; font: 800 15px/1 var(--font-ui, system-ui, sans-serif);
display: flex; align-items: center; justify-content: center;
}
.mc-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.mc-card-badge {
width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
background: var(--navy, #132554); color: #fff;
font: 800 16px/1 var(--font-ui, system-ui, sans-serif);
display: flex; align-items: center; justify-content: center;
}
.mc-card.is-selected .mc-card-badge { background: var(--signal, #00A3DD); }
.mc-card.is-wrong .mc-card-badge { background: var(--incorrect, #E5463E); }
.mc-card-title { font: 800 19px/1.2 var(--font-ui, 'Archivo', system-ui, sans-serif); color: var(--ink, #16203A); }
/* THE DESCRIPTION ABSORBS THE SLACK, SO EVERY OPTION IMAGE STARTS AT THE SAME HEIGHT
(author-directed 2026-08-07: "keep the pictures the size they are... but try to keep the
pictures at the same top height all the way across, like the top edge of all of them
should be at the same area for each of them regardless of how many lines of text").
The description is the ONLY variable-height part of a card — the badge/title row and the
art box are both fixed — so a one-line option used to sit ~21px shorter than the two-line
one beside it, and its picture rode 21px higher. `flex: 1 1 auto` here, with the cards
stretched to a shared height (.mc-cards / .mc-cards--scroll), pushes the surplus INTO
this block instead of leaving it under the picture. The art is `flex: 0 0 auto`, so it
lands against the card's bottom padding in every card — same size, same top edge, same
bottom gap. Cards with less text simply carry more space between text and picture.
A FIXED TWO-LINE RESERVE WAS TRIED FIRST AND IS WRONG: measured across every choice page,
five options already wrap past two lines (scenario-5-decision C, scenario-6-decision A/B,
scenario-8-decision b at three; scenario-8-decision a at FOUR), so a two-line cap would
have truncated real answer text. This approach has no cap and no line count to maintain —
the tallest option on a page sets the height and the rest follow. */
.mc-card-desc {
font: 400 15px/1.4 var(--font-ui, 'Archivo', system-ui, sans-serif); color: #5A6577;
margin-bottom: 10px;
flex: 1 1 auto;
}
.mc-card-art {
width: 100%; flex: 1; min-height: 70px; margin-top: 8px; position: relative;
border-radius: 10px 10px 0 0; overflow: hidden; background: #EEF1F6;
}
/* WIDTH-DRIVEN, 4:3, AT EVERY BREAKPOINT (author 2026-07-29: "on mobile and tablet the images
for the options are more square — the desktop ones should be too", "these are still tiny and
they should be filling up the space for the options").
Desktop used to size this art HEIGHT-first: choice-parts.js sets an inline `aspectRatio` with
`width: auto; align-self: center`, so the box took whatever vertical slack the card's flex
column had left after the title and body — a few dozen pixels — and the width followed it
down. That is why the art read as a thumbnail centred in a wide card. Driving from the width
makes the art fill the option, and the height follow the ratio, which is the same rule the
narrow layouts already use. Per-page `cardArtAspect`/`cardArtMobileAspect` still override the
shape through the var; only the SIZING AXIS is fixed here. */
.mc-card-art {
/* DESKTOP: 4:3, sized from an explicit HEIGHT so the box is deterministic, then centred.
Width-driven at full card width is what the author asked for, but it does not fit: at a
589px card the 4:3 box is 416px tall inside a 280px card, so the art was clipped by the
card's bottom edge. The fixed 1080 canvas cannot scroll, and making room would need a
~624px cards band, shrinking the scene image above to ~185px. So desktop gets the SHAPE
(4:3, square-ish, per the author) at the largest height that fits, which is still ~4x the
area of the old flex-slack thumbnail. `--mc-card-art-h` raises it per page if the layout
is rebalanced. The narrow layouts keep the full-width rule below — they scroll, so they
can afford the height. */
/* 351x162 IS THE AUTHORED OPTION-IMAGE VIEWPORT (author 2026-07-29: "351 x 162 pixels is the
size, a bunch of images were made specifically for that size... the viewport for all
multiple choice questions for the images should be that size, and just crop and zoom in to
fit any images that don't fit that size").
So the ratio is the SYSTEM DEFAULT for every choice page, not a per-page value, and it is
the same at every breakpoint — the art was generated for it. Scenario 3's seven plates are
1846x852, which is exactly this ratio, confirming it. The box fills the card's width and
takes its height from the ratio; anything whose native shape differs is cover-cropped into
it rather than being shrunk to fit inside it. */
aspect-ratio: var(--mc-card-art-aspect, 351 / 162) !important;
width: 100% !important; height: auto !important;
align-self: stretch !important; flex: 0 0 auto !important; min-height: 0 !important;
max-width: var(--mc-card-art-max-w, none);
margin-inline: auto;
}
.mc-card-art--img {
/* `cover` rather than the inline 200% magnification: the frame now matches the art's shape,
so filling it needs no zoom (the 200% default is what made these read "zoomed in"). */
background-size: var(--mc-card-art-bg-size, cover) !important;
background-position: var(--mc-card-art-bg-pos, center) !important;
}
.mc-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Background-image variant (choice-parts.js): lets a wide scene be zoomed + panned to center
its subject in the short card strip (background-size/position come inline, per option). */
.mc-card-art--img { background-repeat: no-repeat; background-color: #EEF1F6; }
/* Wrong-answer card flip (author 2026-07-27, Multiple Choice): REPLACES the incorrect-
feedback modal — the selected wrong card itself flips (same 3D mechanic as Flip Cards,
.fc-card/.fc-inner/.fc-face above) to reveal a red INCORRECT header + feedback body + Try
again, instead of covering the page with an overlay. The outer .mc-card-flip keeps the
plain .mc-card box (border/background/radius/padding via the shared class) OFF — both
faces draw their own chrome — and adds the 3D perspective; .mc-card-flip-inner is what
actually rotates. First use: scenario-4-decision. */
.mc-card.mc-card-flip { position: relative; padding: 0; border: none; background: transparent; cursor: default; perspective: 1400px; }
.mc-card-flip-inner {
position: absolute; inset: 0; transform-style: preserve-3d;
transition: transform 520ms cubic-bezier(.3, .7, .3, 1);
}
.mc-card-flip.is-flipped .mc-card-flip-inner { transform: rotateY(180deg); }
.mc-card-flip-face {
position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
display: flex; flex-direction: column;
}
/* front: the normal card look, red-bordered + dimmed the instant it's marked wrong —
before the flip even starts, so the pause after Submit still reads as "that one". */
.mc-card-flip-front {
background: #fff; border: 2px solid var(--incorrect, #E5463E); opacity: .7;
padding: 14px 16px;
}
.mc-card-flip-front .mc-card-badge { background: var(--incorrect, #E5463E); }
/* back: white body under a solid red header — "Incorrect" is fixed chrome, not authored
per-page, so the mechanic reads identically everywhere it's used. */
.mc-card-flip-back { transform: rotateY(180deg); background: #fff; border: 2px solid var(--incorrect, #E5463E); }
.mc-card-flip-back-head {
flex: 0 0 auto; background: var(--incorrect, #E5463E); color: #fff; text-align: center;
padding: 12px 16px; font: 800 15px/1.2 var(--font-ui, 'Archivo', system-ui, sans-serif);
letter-spacing: .6px; text-transform: uppercase;
}
.mc-card-flip-back-body {
flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px;
font: 400 15px/1.4 var(--font-ui, 'Archivo', system-ui, sans-serif); color: var(--ink, #16203A);
}
.mc-card-flip-tryagain {
flex: 0 0 auto; margin: 0 16px 14px; padding: 10px; border-radius: 100px; border: none;
cursor: pointer; background: var(--signal, #00A3DD); color: var(--surface-deep, #0E1C42);
font: 800 14px/1 var(--font-ui, 'Archivo', system-ui, sans-serif); transition: background 140ms ease;
}
.mc-card-flip-tryagain:hover { background: #008ec2; }
@media (prefers-reduced-motion: reduce) { .mc-card-flip-inner { transition: none; } }
/* ===== Shared feedback UI (feedback.js): floating Submit + correct/incorrect modal ==========
Used by every scorable answer→submit→feedback template (Multiple Choice, Multi-Select,
Scenario). Reproduced faithfully from the design tokens. The Submit and modal are absolutely
positioned, so the host template's ROOT must be position:relative. */
.tpl-submit-wrap {
position: absolute; left: 0; right: 0; bottom: 14px; z-index: 20;
display: flex; justify-content: center; pointer-events: none;
}
/* PROMPT ROW: the question centred, Submit parked over the LAST option column (author
2026-08-05, "above where option C is … for all questions"). `right: 48px` is the same
inset `.mc-cards` uses, so the button's right edge lines up with the last card's right
edge at any column count — three options or seven, it never moves. The row is always in
the DOM, so Submit fading in shifts nothing. Scoped to `.mc-prompt-row`, so scenario.js
keeps the original bottom-centre float it was designed around. */
/* `width: 100%` is load-bearing: `.mc` is a column flex, so without it the row shrinks to the
width of its own text (measured 224px) and `right: 48px` anchors to that instead of to the
card band's edge. */
/* Padding is bottom-only and deliberately asymmetric: the scene band already leaves ~18px under
the picture, so an even `8px 0` put 18px above the row and 8px below it. All of it on the
bottom balances the row between the image and the options (author 2026-08-05: "equal padding
between the image above and the options below"). */
.mc-prompt-row { position: relative; width: 100%; padding: 0 0 18px; display: flex; align-items: center; justify-content: center; }
.mc-prompt-row .mc-prompt { margin-left: auto; margin-right: auto; }
/* Submit pins to the right edge of the option band — one predictable place on every question,
whatever the option count. Column-alignment was built and then dropped (author 2026-08-05):
with a varying number of options, "above option C" stops meaning anything. */
.mc-prompt-row .tpl-submit-wrap {
left: auto; right: 48px; bottom: auto; top: 50%; transform: translateY(-50%);
justify-content: flex-end; width: auto;
}
/* The lift on show is the row's, not the page's — `translateY(8px)` in the base rule would
fight the centring transform above (the same replace-not-merge trap as the arrows). */
.mc-prompt-row .tpl-submit { transform: none; }
.tpl-submit {
pointer-events: none; opacity: 0; transform: translateY(8px);
font: 800 17px/1 var(--font-ui, 'Archivo', system-ui, sans-serif); letter-spacing: 0.5px;
background: var(--signal, #00A3DD); color: var(--surface-deep, #0E1C42);
border: none; border-radius: 100px; padding: 15px 48px; cursor: default;
transition: opacity 320ms cubic-bezier(.2, .7, .3, 1), transform 320ms cubic-bezier(.2, .7, .3, 1), background 140ms ease;
}
.tpl-submit.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; cursor: pointer; }
.tpl-submit.is-shown:hover { background: #008ec2; }
/* WAITING, NOT MISSING — the choice templates show Submit greyed out before a selection
(author-directed 2026-08-07). Background: once the prompt row stacks at ≤1024px, Submit
became a full-width row of its own in the column flow, so at opacity 0 it left a 79px
void between the question and the cards (measured: 47px button + 6px margin + 8px row gap
+ 18px row padding). The author read that gap as a rendering fault — "in order for it to
not read like an error, we should make the submit button grayed out until the user selects
an option." A visible disabled control explains its own space.
SCOPED TO .mc-prompt-row on purpose. Every other host of FloatingSubmit (scenario.js and
friends) floats it bottom-centre OVER the stage, where a permanently visible grey pill
would be new furniture nobody asked for. Those keep the fade-in; only the choice
templates, where the button has a reserved lane, show the waiting state.
The button carries a real `disabled` (feedback.js), so this is appearance only — it is
already out of the tab order and unclickable. */
.mc-prompt-row .tpl-submit:not(.is-shown) {
opacity: 1; transform: none;
background: rgba(255, 255, 255, 0.13);
color: rgba(255, 255, 255, 0.42);
}
/* Feedback modal — a centered overlay over the STAGE only (player bars stay clear) */
.tpl-fb {
position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
padding: 32px 64px; background: rgba(8, 12, 26, 0.8);
}
.tpl-fb-card {
/* `relative` anchors the dev-only close X (feedback.js), which is absolutely positioned. */
position: relative;
width: 100%; max-width: 1360px; max-height: 100%;
background: #fff; border-radius: 18px; overflow: auto;
display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
animation: mvModalIn 320ms cubic-bezier(.34, 1.56, .64, 1);
}
.tpl-fb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* EXPERIMENTAL narrator column (2026-07-25): Loretta beside the feedback text, no
bubble, same room treatment as the MC intro modal. She also reads the feedback
aloud (feedback.js). REVERT = stop passing `narrator` in the host templates and
delete this block. */
.tpl-fb-card.has-narrator { flex-direction: row; overflow: hidden; }
.tpl-fb-card.has-narrator .tpl-fb-main { overflow: auto; }
.tpl-fb-figure {
flex: 0 0 25%; position: relative; min-height: 0;
background: #26407a; border-left: 1px solid rgba(13, 22, 49, 0.18);
}
.tpl-fb-figure::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
pointer-events: none;
background: linear-gradient(to bottom, #0b1631 0%, #16264f 55%, #1d3163 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tpl-fb-figure img {
position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%);
height: 88%; max-width: 90%; object-fit: contain; object-position: bottom;
z-index: 1; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}
/* DESKTOP: LANDSCAPE MODAL — Loretta stands FULL HEIGHT on the LEFT, her words on the right
(author 2026-07-31). Two earlier attempts are recorded here because both were wrong in the
same direction: a `cover` crop scaled her to the column's WIDTH and showed only her head, and
a hips-up crop still read as a floating bust. She is a standing character; she should stand.
The card gets a min-height so there is a room for her to stand in — without it the card is
only as tall as its text, and a full-height figure inside a short card is small again, which
was the original complaint. The floor gradient comes back, because there are feet to ground.
Tablet and phone are deliberately untouched below. */
@media (min-width: 1025px) {
/* SAME HEIGHT AS THE INTRO MODAL (author 2026-08-01): .mc-intro-modal is
`height: min(620px, 90%)`, and the feedback card read as noticeably thinner beside
it. min-height rather than height so a long body can still grow the card instead of
scrolling inside a fixed box. */
.tpl-fb-card.has-narrator { min-height: min(620px, 90%); }
.tpl-fb-figure {
order: -1; flex: 0 0 30%;
border-left: none; border-right: 1px solid rgba(13, 22, 49, 0.18);
}
.tpl-fb-figure img {
position: absolute; bottom: 4%; left: 50%; right: auto; top: auto;
transform: translateX(-50%);
/* Taller so she fills the space, NOT stretched: `contain` + `width: auto` means the
browser scales her by aspect ratio and the height is the only driver. Setting both
width and height is what would distort her. */
height: 97%; width: auto; max-width: 96%;
object-fit: contain; object-position: bottom;
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}
}
/* Narrow layouts keep the narrator (author 2026-07-27; previously dropped): */
@media (max-width: 1024px) {
/* tablet: Loretta holds the RIGHT THIRD of the modal */
.tpl-fb-figure { flex: 0 0 33%; }
}
@media (max-width: 600px) {
/* phone: Loretta STACKS ABOVE the feedback and the whole card scrolls, so the
text is read by scrolling down past her */
.tpl-fb-card.has-narrator { flex-direction: column; overflow: auto; }
.tpl-fb-card.has-narrator .tpl-fb-main { overflow: visible; }
.tpl-fb-figure {
order: -1; flex: 0 0 auto; height: 220px;
border-left: none; border-bottom: 1px solid rgba(13, 22, 49, 0.18);
}
}
/* Outro hand-off: the card alone fades out while the dark overlay holds; the outro
speech modal then enters card-only (its scrim skips the re-fade below). */
.tpl-fb-card.is-leaving { animation: mvFbCardOut 250ms ease forwards; }
@keyframes mvFbCardOut { to { opacity: 0; transform: translateY(10px) scale(0.985); } }
.mc-intro-scrim--outro { animation: none; }
.mc-intro-scrim--outro .mc-intro-modal { animation: mvModalIn 300ms cubic-bezier(.2, .7, .3, 1); }
.tpl-fb-head { display: flex; align-items: center; gap: 16px; padding: 28px 44px; }
.tpl-fb-head.is-correct { background: var(--correct, #12A66A); }
.tpl-fb-head.is-wrong { background: var(--incorrect, #E5463E); }
.tpl-fb-mark {
width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #fff;
font: 800 21px/1 var(--font-ui, system-ui, sans-serif);
display: flex; align-items: center; justify-content: center;
}
.tpl-fb-head.is-correct .tpl-fb-mark { color: var(--correct, #12A66A); }
.tpl-fb-head.is-wrong .tpl-fb-mark { color: var(--incorrect, #E5463E); }
.tpl-fb-title { font: 800 26px/1.2 var(--font-ui, 'Archivo', system-ui, sans-serif); color: #fff; text-transform: uppercase; letter-spacing: 0.5px; }
.tpl-fb-body { flex: 1; display: flex; flex-direction: column; padding: 40px 44px; }
.tpl-fb-text { position: relative; font: 400 23px/1.55 var(--font-ui, 'Archivo', system-ui, sans-serif); color: var(--ink, #16203A); margin: 0 0 26px; }
.tpl-fb-takeaway {
background: rgba(0, 163, 221, 0.06); border: 1px solid rgba(0, 163, 221, 0.25); border-radius: 12px;
padding: 20px 24px; margin-bottom: 34px;
font: 400 19px/1.5 var(--font-ui, 'Archivo', system-ui, sans-serif); color: var(--ink, #16203A);
}
.tpl-fb-takeaway b { color: var(--signal, #00A3DD); font-weight: 800; }
/* Type-on size reservation (author 2026-07-27, "the modal shouldn't grow as she talks") —
.tpl-fb-ghost renders the FULL final text `visibility:hidden` so it still occupies layout
space; .tpl-fb-live is the real animated reveal, absolutely positioned on top of it (same
font/width as the ghost, so it wraps identically). .tpl-fb-reserve is only needed where the
ghost's container has its own padding (.tpl-fb-takeaway) — inset:0 positions against the
padding box, so without an unpadded wrapper the live layer would ignore that padding.
.tpl-fb-text has no padding of its own, so it can be the position:relative anchor directly. */
.tpl-fb-reserve { position: relative; }
.tpl-fb-ghost { visibility: hidden; }
.tpl-fb-live { position: absolute; inset: 0; }
/* CENTRED in the white panel (author 2026-08-01). Was flex-end, which put it in the far
corner; the card now reads as one composition with the figure, so the action belongs
centred under the words it follows. */
.tpl-fb-actions { display: flex; justify-content: center; margin-top: auto; }
.tpl-fb-btn {
font: 800 17px/1 var(--font-ui, 'Archivo', system-ui, sans-serif); letter-spacing: 0.5px;
background: var(--signal, #00A3DD); color: var(--surface-deep, #0E1C42);
border: none; border-radius: 100px; padding: 15px 44px; cursor: pointer;
transition: background 140ms ease;
}
.tpl-fb-btn:hover { background: #008ec2; }
@media (prefers-reduced-motion: reduce) {
.tpl-submit { transition: opacity 0ms; }
.tpl-fb-card { animation: none; }
}
/* RESPONSIVE reflow (matches the other template reflows: 1024 → tablet, 600 → phone). The fixed
two-region desktop composition (360px rail + scene beside 4-up cards) does not fit a narrow
screen, so: the page grows, the rail stacks above the scene, the prompt shrinks, the Submit
sticks to the bottom of the scroll area, and the feedback modal covers the viewport.
OPTIONS ARE A HORIZONTAL SWIPE CAROUSEL on every touch size — all N choices in ONE row, so
there is no second grid row to scroll down to (which would push the scenario + observations
out of view). Tablet shows ~2 cards at once; phone shows ~1 (the 600px block below). The scene
is capped to a banner so the scenario text + observations stay visible above the carousel. */
@media (max-width: 1024px) {
.tpl-page--multiple-choice { padding: 0; }
.mc { height: auto; min-height: 100%; border-radius: 0; border: none; }
.mc-upper { flex-direction: column; flex: 0 0 auto; }
.mc-rail { width: auto; gap: 14px; padding: 20px 18px; }
.mc-scene-wrap { padding: 16px; }
/* THE SCENE SHOWS WHOLE FROM 1024px DOWN (author 2026-07-31). It was a fixed 200px banner
here and 104px on phone, both cover-cropped — which cut the heads off the figures anywhere
between ~650px and 1024px. There is no reason to cap the height: the plate already fits
horizontally, the page scrolls at these widths, and a cropped scene is worse than a tall
one. Width is untouched; only the height cap is lifted, so the box takes the image's own
aspect. `aspect-ratio: auto` is required because the base .mc-scene rule pins 21/9, and
`--custom` is included because a per-screen aspect is itself a crop.
DESKTOP (>1024px) IS DELIBERATELY UNTOUCHED — it is a fixed canvas that cannot scroll. */
.mc-scene { width: 100%; }
/* Supersedes the 2026-07-27 per-screen `--mc-scene-aspect` opt-in: that existed so a
square/portrait plate could escape the banner crop, and now NOTHING is cropped here, so
every scene gets what that override was asking for. The property is still read on desktop. */
.mc-scene,
.mc-scene.mc-scene--custom { height: auto; aspect-ratio: auto; }
.mc-scene-img { position: static; width: 100%; height: auto; object-fit: contain; }
.mc-prompt { font-size: 20px; padding: 12px 16px; }
.mc-cards {
display: flex; flex-wrap: nowrap;
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
-webkit-overflow-scrolling: touch;
grid-template-columns: none; grid-auto-rows: auto;
gap: 14px; padding: 16px; scrollbar-width: none;
}
.mc-cards::-webkit-scrollbar { display: none; }
.mc-card { flex: 0 0 44%; scroll-snap-align: start; min-height: 220px; } /* ~2 visible + a peek */
/* Card art on TABLET+PHONE is WIDTH-driven, 4:3 by default (author 2026-07-29: "I just want
them to be as large as possible within the width of each of those options", "4:3 for all
of these").
Desktop's fixed-ratio art is sized HEIGHT-first (from the flex row's own height, via
`flex:1`) with `width:auto` + `align-self:center` following the ratio — that's backwards
here: a mobile card's height is mostly text, so the leftover flex slack is tiny, and a
box sized from THAT collapses to a tiny box with big blank margins either side (author
bug reports 2026-07-27 "why are the images so tiny" and 2026-07-29, twice). Flip the
relationship: stretch to the card's full WIDTH and let height follow the ratio.
THIS USED TO BE OPT-IN, and that was the bug. The rule only applied to
`.mc-card-art--mobile-aspect`, a class the renderer adds solely when the page authored
`cardArtMobileAspect`/`imageZoomMobile`/`imagePosMobile` — so scenario-1-decision,
scenario-3-verify and scenario-4-decision, which author none of those, silently kept the
height-driven desktop sizing and collapsed. A default that only works when a page opts
in is a default that will be missing on the next page too, so the width-driven form is
now the plain behaviour for every card and the per-page vars remain as overrides.
!important throughout: the base ratio/size are INLINE styles on this element, which beat
any plain class rule regardless of specificity.
`cover` (not the inline 200% zoom) is the default fill: the art fills a frame it now
actually matches in shape, instead of being magnified 2x inside a collapsed one. */
/* The narrow layouts inherit the width-driven 4:3 base rule above; these only swap in the
per-page MOBILE overrides, which must beat the desktop-scoped vars. */
.mc-card-art {
aspect-ratio: var(--mc-card-art-mobile-aspect, var(--mc-card-art-aspect, 351 / 162)) !important;
width: 100% !important; height: auto !important;
align-self: stretch !important; max-width: none !important;
}
.mc-card-art--img {
background-size: var(--mc-card-art-mobile-bg-size, var(--mc-card-art-bg-size, cover)) !important;
background-position: var(--mc-card-art-mobile-bg-pos, var(--mc-card-art-bg-pos, center)) !important;
}
/* Shared feedback UI responsive (applies to every scorable template, not just MC): Submit
rides the bottom of the scroll viewport; the modal covers the viewport (stage is now tall). */
.tpl-submit-wrap { position: sticky; bottom: 12px; margin-top: 6px; }
.tpl-fb { position: fixed; padding: 16px; }
.tpl-fb-card { max-height: calc(100dvh - 32px); }
.tpl-fb-head { padding: 20px 24px; gap: 12px; }
.tpl-fb-mark { width: 32px; height: 32px; font-size: 17px; }
.tpl-fb-title { font-size: 20px; }
.tpl-fb-body { padding: 24px; }
.tpl-fb-text { font-size: 18px; margin-bottom: 20px; }
.tpl-fb-takeaway { font-size: 16px; padding: 16px 18px; margin-bottom: 24px; }
.tpl-fb-btn { padding: 14px 32px; }
}
@media (max-width: 600px) {
/* PHONE: same horizontal carousel as tablet (defined in the 1024px block), but ONE card at a
time (~82% wide, so the next peeks) and the scenario compacted harder — smaller scene banner,
thought bubble hidden — so the observations still fit above the options.
BREAKPOINT: 600px is the conventional phone/tablet line (Material sw600dp) and also the
practical floor for a 2-up view (two readable cards need ~280px each). ≤600px = ~1 card;
601–1024px = ~2 cards (the block above); >1024px = the 4-up desktop composition. */
.mc-card { flex: 0 0 82%; scroll-snap-align: center; } /* one at a time; next card peeks */
.mc-cards { gap: 12px; padding: 12px 16px 16px; }
/* Compact the scenario so it (text + observations) stays in view above the carousel. */
.mc-rail { padding: 14px 16px; gap: 10px; }
.mc-obs-list { gap: 8px; }
.mc-scenario-text { font-size: 16px; }
.mc-obs-text { font-size: 15px; }
.mc-scene-wrap { padding: 8px 16px; }
/* The uncropped scene is inherited from the 1024px block above — it applies from there all
the way down, so phone needs no rule of its own beyond this tighter gutter. */
.mc-thought { display: none; } /* the prompt bar already asks the question */
.mc-prompt { font-size: 17px; padding: 8px 14px; }
}
/* ===== Multi-Select — "select all that apply" =====================================
Now the SAME scenario-question layout as Multiple Choice (choice-parts.js / the shared .mc-*
classes), with MULTIPLE selectable cards. Only the multi-select extras live here: the card
checkbox marker and the instruction sub-line. Page padding mirrors Multiple Choice. */
.tpl-page--multi-select { padding: 8px; }
/* checkbox marker on each card (top-right) — the select-all affordance */
.mc-card-check {
position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; flex-shrink: 0;
border-radius: 6px; border: 2px solid #B7C0CE; background: #fff;
display: flex; align-items: center; justify-content: center;
font: 800 14px/1 var(--font-ui, system-ui, sans-serif); color: #fff;
}
.mc-card.is-selected .mc-card-check { background: var(--signal, #00A3DD); border-color: var(--signal, #00A3DD); }
/* keep the card title clear of the checkbox */
.tpl-page--multi-select .mc-card-head { padding-right: 30px; }
/* the "select all that apply" instruction — inline on the prompt line (lighter + smaller) */
.mc-prompt-inst { color: rgba(255, 255, 255, 0.62); font-weight: 500; font-size: 20px; margin-left: 12px; }
@media (max-width: 1024px) {
.tpl-page--multi-select { padding: 0; }
.mc-prompt-inst { font-size: 15px; margin-left: 8px; }
}
/* THE PROMPT ROW STACKS BELOW 1024px (author bug report 2026-08-07, phone + tablet).
On desktop the row is one line — question pill centred, Submit parked in a 160px lane at
the right — and that is right there, because the stage is 1920 wide. Narrow, the same
layout turns into three cramped columns: the question squeezed into the left half, "Select
all that apply." wrapping one or two words per line beside it, and the Submit lane holding
the right quarter empty until an answer is picked. The author's words: "they should be
vertically stacked... it seems to avoid the right half of the screen on that row for no
reason."
Column direction gives the question the full width, drops the instruction onto its own
line, and moves Submit underneath instead of alongside. Submit KEEPS `position: sticky`
(set at 1024px) — it is now a full-width row of its own, so sticking to the bottom still
works and nothing horizontal is reserved. */
@media (max-width: 1024px) {
.mc-prompt-row { flex-direction: column; align-items: stretch; gap: 8px; }
.mc-prompt-row .mc-prompt { width: 100%; max-width: 100%; margin: 0; }
.mc-prompt-row .tpl-submit-wrap {
top: auto; right: auto; left: auto; transform: none;
width: 100%; justify-content: center;
}
/* The instruction is a inside .mc-prompt, and .mc-prompt is itself a FLEX ROW — so
`display: block` on the span does nothing at all (a flex item's display is blockified and
it stays on the main axis; measured, it sat at x=300 of a 375px screen, still beside the
question). Turning the pill's own axis is what actually stacks them: the question is an
anonymous flex item, the span is the second, and column puts one under the other. */
.mc-prompt { flex-direction: column; }
.mc-prompt-inst { margin-left: 0; margin-top: 4px; text-align: center; }
}
/* ===== Welcome — course landing / title screen ====================================
Demo-only template reproduced faithfully from the design. The background is ONE inline