/* 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); }

/* Shrink the oversized 36px title; keep the instruction (h2 + p — the ONLY reliable selector, as
   card bodies are also <p>) 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; }

/* 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 <ul>) → 2 columns; category-reference cards (the <div> grid) → 2 columns */
  .tpl-page ul[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 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; }

@media (max-width: 600px) {
  /* replace the inline "CATEGORY REFERENCE" white box (the div right after the instruction) */
  .tpl-page 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;
    background: var(--blue, #00A3DD); color: #fff;
    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; }
}

/* ===== 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; }
.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);
}

/* 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 */
}

/* Loud failure when a named template's component is missing from the bundle —
   an unfinished template must never silently render as something else. */
.tpl-missing {
  margin: auto;
  padding: 28px 36px;
  max-width: 640px;
  background: #fff;
  color: #B3261E;
  border: 2px solid #B3261E;
  border-radius: 12px;
  font: 600 16px/1.5 system-ui, sans-serif;
}