/* 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);
/* 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: var(--space-p6) var(--space-p28) var(--space-p10);
}
/* 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) !important; padding-top: var(--space-p8) !important; }
.tpl-page--scorecard > div { padding-top: var(--space-p8) !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: var(--space-p14) clamp(12px, 2vw, 28px) var(--space-p18); }
.tpl-page--guided-stepper > div {
flex: 1; min-height: 0; width: 100%; max-width: var(--size-p1180); margin-inline: auto;
border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 8px 26px var(--ink-deep-a30);
}
/* ---- Guided Steps: responsive (tablet + phone) — the whole page fits with NO scrolling ---- */
@media (max-width: 1024px /* bp:tablet */) {
/* 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, var(--chrome-flow-header-h)) - var(--chrome-flow-footer-h));
min-height: 0; overflow: hidden;
padding: var(--space-p10) clamp(10px, 2vw, 20px) var(--space-p12);
}
/* 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: var(--chrome-pill-h) !important; height: var(--chrome-pill-h) !important; min-height: var(--chrome-pill-h) !important;
padding: 0 !important; border-radius: var(--radius-circle) !important; flex-shrink: 0;
justify-content: center !important; gap: 0 !important; font-size: 0 !important;
}
.tpl-page--guided-stepper .gs-nav svg { width: var(--size-p24) !important; height: var(--size-p24) !important; }
/* tighten the step control bar (the div with the border-top seam) */
.tpl-page--guided-stepper div[style*="border-top"] { padding: var(--space-p10) var(--space-p16) var(--space-p12) !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 /* bp:stepper-wrap */) {
.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 /* bp:tablet */) {
/* 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: var(--space-p18) var(--space-p14) var(--space-p24) !important; }
.tpl-page--sequence h2 { font-size: var(--type-h4) !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: var(--z-reveal-overlay);
display: flex; align-items: center; justify-content: center; padding: var(--space-p20);
background: var(--ink-deep-a45);
font-family: var(--font-sans-system);
}
.gs-reveal-card {
position: relative; width: 100%; max-width: var(--size-p460); max-height: 76vh; overflow: auto;
background: var(--surface-stage);
border: var(--border-hairline) solid var(--correct-a45); border-top: var(--border-w4) solid var(--correct);
border-radius: var(--radius-r14); padding: var(--space-p24); box-shadow: 0 18px 50px var(--ink-deep-a55);
}
.gs-reveal-close {
position: absolute; top: var(--space-p6); right: var(--space-p8); width: var(--size-p38); height: var(--size-p38);
border: none; background: transparent; color: var(--white-a65); font-size: var(--type-stat); line-height: var(--lh-solid);
cursor: pointer; border-radius: var(--radius-sm);
}
.gs-reveal-close:hover { color: var(--text-on-navy); }
.gs-reveal-label {
font-weight: var(--fw-extrabold); font-size: var(--type-caption); letter-spacing: var(--track-caption); color: var(--correct-light);
text-transform: uppercase; margin: 0 var(--space-p32) var(--space-p10) 0;
}
.gs-reveal-body { font-size: var(--type-copy); line-height: var(--lh-body); color: var(--white-a92); }
/* 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);
}
/* SIDE-BY-SIDE STEPPER (its own template, 2026-09-19 - the stepper's component under a second page class): the panel a
grid - the words at the left, the picture at the right spanning the rows the words take; the bundle's stacked order
(media, title, body, callout, action) is unchanged, the grid places it. THE PICTURE IS SIZED BY THE HEIGHT (the same
evening, Tyler: "do not limit the size of the guided stepper to an artificial horizontal width ... as wide as possible that
still fits inside the player and the chrome"): the card is the container; the picture's height is the card's less the
head, the padding and the step bar (a 4:3 picture on a wide card would otherwise run off the bottom), its width from its
own ratio, capped at two thirds of the card; the words take everything left. */
.tpl-page--side-by-side-stepper .gs-panel { display: grid; grid-template-columns: minmax(var(--size-p300), 1fr) auto; grid-auto-rows: auto; column-gap: var(--space-p32); align-items: start; }
.tpl-page--side-by-side-stepper .gs-panel > .gs-step-media { grid-column: 2; grid-row: 1 / span 5; width: calc((100cqh - var(--size-p300) - var(--size-p20)) * var(--gs-media-aspect-desktop, 8 / 3)) !important; max-width: 65cqw; margin: 0; } /* !important: the bundle writes width: 100% inline on the frame */
.tpl-page--side-by-side-stepper .gs-panel > :not(.gs-step-media) { grid-column: 1; }
.tpl-page--side-by-side-stepper .gs-panel > h3 { margin-top: 0; }
/* the card at its full width for the side-by-side (the bundle sizes the card to its 860 px content wrapper inline; the grid needs the
room - the three anonymous boxes between the page and the panel are the card, its padding box and the wrapper) */
.tpl-page--side-by-side-stepper > div { width: 100%; max-width: none; container-type: size; } /* the whole stage's width (Tyler, 2026-09-19: 'do not limit the size ... to an artificial horizontal width'); the stepper's own card keeps its 1180; the container the picture's height reads */
.tpl-page--side-by-side-stepper > div > div { width: 100%; box-sizing: border-box; }
.tpl-page--side-by-side-stepper > div > div > div { max-width: none !important; width: 100%; }
.tpl-page--side-by-side-stepper .gs-panel { width: 100%; }
@media (max-width: 1024px /* bp:tablet */) {
.tpl-page--side-by-side-stepper .gs-panel { display: block; } /* stacked again where the layout scrolls */
.tpl-page--side-by-side-stepper > div { container-type: normal; } /* in flow here: a size container would collapse the card */
.tpl-page--side-by-side-stepper .gs-panel > .gs-step-media { width: 100% !important; max-width: none; } /* the picture at the full width again */
.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 /* bp:phone */) {
.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). */
/* EXCLUSIONS ADDED 2026-09-06. This rule shrinks a template page's own oversized title, and
it uses !important, so it captured any h2 inside .tpl-page. When .mc-prompt (the decision
question, 24px) and .cmp-title (the completion title, 30px) were promoted from
to
for WCAG 1.3.1, both were silently re-sized by this rule — the prompt grew 24->26px
and reflowed the option row on a phone. They carry their own type scale, so they opt out
rather than this rule losing its !important, which the pages it was written for still need. */
.tpl-page h2:not(.mc-prompt):not(.cmp-title) { font-size: var(--type-h2) !important; line-height: var(--lh-title) !important; }
/* Same exclusions, same reason (2026-09-06): .cmp-title is directly followed by
,
so promoting the title to