/* PeptideScope: page shell (v4, "simpler, faster, for teens").
   Header, explorer (3-step stepper + big stage + one sentence of narration + timeline/effects),
   Learn cards with <dialog> panels, footer, disclaimer bar, intro visibility.
   Other modules: intro.css (#intro internals), stage.css (#stage-host internals), timeline.css
   (#timeline + #active-effects), content.css (what js/ui renders). Rules here that those files may
   want to restyle use :where() (zero specificity).
   Design: ui-ux-pro-max "Minimalism & Swiss" (spacious, light-first, one violet accent); layout
   patterns from 21st.dev (basic stepper, grid feature cards, expandable card → dialog), rebuilt in
   plain HTML/CSS. Motion: opacity/transform only, 150–400 ms, off under reduced motion. */

/* ================================================================ reset + base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scroll-padding-bottom: calc(var(--disclaimer-h) + 16px);
  scrollbar-gutter: stable;
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading);
  font-feature-settings: var(--font-features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: var(--disclaimer-h);
  overflow-x: hidden;
}
@supports (overflow-x: clip) { body { overflow-x: clip; } }

/* the intro owns the page scroll while it is up; an open panel locks the page behind it */
html[data-intro="show"] body,
html[data-intro="leaving"] body { overflow: hidden; }
html:has(dialog.learn-dialog[open]) { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; touch-action: manipulation; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
p, li, dd { text-wrap: pretty; }
ul[class], ol[class] { list-style: none; padding: 0; }
a {
  color: var(--primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
a:hover { text-decoration-color: currentColor; }
::selection { background: color-mix(in srgb, var(--primary) 26%, transparent); color: var(--text); }
strong, b { font-weight: var(--weight-bold); }
time, .num { font-variant-numeric: tabular-nums; }
code { font-family: var(--font-code); font-size: 0.9em; }

/* ================================================================ utilities */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.muted { color: var(--muted); }

/* ================================================================ focus: always visible, never jumpy */
:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
[tabindex="-1"]:focus-visible { outline: none; }
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; }
}

/* ================================================================ skip link */
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: calc(var(--z-intro) + 20);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform var(--dur-1) var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* ================================================================ buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.btn:active:not([aria-disabled="true"]):not(:disabled) { transform: scale(0.98); }
.btn-icon { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover:not([aria-disabled="true"]):not(:disabled) { background: var(--primary-hover); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover:not([aria-disabled="true"]):not(:disabled) { border-color: var(--primary); color: var(--primary); }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn--block { display: flex; width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.45; cursor: not-allowed; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.icon-btn:hover { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary); }
.icon-btn .icon { width: 20px; height: 20px; }
html[data-theme="dark"] .icon--moon { display: none; }
html:not([data-theme="dark"]) .icon--sun { display: none; }
html:not(.js) #theme-toggle, html:not(.js) #motion-toggle { display: none; }

/* ================================================================ chips, notices */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: var(--weight-medium);
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--primary-line); } }
.chip[aria-checked="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.chip-tag { font-size: var(--step--2); color: var(--muted); }

.module-notice {
  padding: 14px 18px;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--step--1);
  line-height: 1.5;
}
.module-notice--warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--text); }

.noscript-note {
  margin: 24px var(--gutter);
  padding: 16px 20px;
  border-radius: var(--radius-m);
  background: var(--warn-bg);
  color: var(--text);
}

/* ================================================================ opened as a file */
.file-notice { display: none; }
html[data-file] .file-notice {
  display: flex;
  gap: 16px;
  max-width: var(--container);
  margin: 24px auto 0;
  margin-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  padding: 20px 24px;
  border-radius: var(--radius-l);
  border: 1.5px solid var(--warn-line);
  background: var(--warn-bg);
}
/* nothing loads from a file: no "Loading the list…" that never finishes */
html[data-file] .rail-placeholder { display: none; }
.file-notice-icon { flex: none; width: 24px; height: 24px; color: var(--warn-ink); }
.file-notice-body { display: grid; gap: 8px; }
.file-notice-title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); }

/* ================================================================ header (slim, sticky, one link + theme) */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--container-wide);
  min-height: 72px;
  margin-inline: auto;
  padding: 10px var(--gutter);
}
.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.header-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.header-link:hover { background: var(--primary); color: var(--on-primary); }
@media (max-width: 719.98px) {
  .header-inner { min-height: 64px; gap: 10px; padding-block: 8px; }
  .header-actions { gap: 8px; }
  .header-link { padding: 0 16px; }
}

/* ================================================================ intro: visibility only (css/intro.css owns the rest)
   Visibility is owned here (html[data-intro]) with !important so no intro style can resurrect a
   closed intro; no-JS visitors never see it (the boot script only sets "show" with JS). */
html:not([data-intro="show"]):not([data-intro="leaving"]) #intro { display: none !important; }
:where(.intro) {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}
html[data-intro="leaving"] #intro {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
}
/* the disclaimer stays readable above the intro */
html[data-intro="show"] .disclaimer,
html[data-intro="leaving"] .disclaimer { z-index: var(--z-disclaimer-top); }

/* ================================================================ explorer */
main { display: block; }
main:focus { outline: none; }

.explorer {
  --rail-w: minmax(300px, 400px);
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: clamp(24px, 3vw, 40px) var(--gutter) var(--space-3xl);
}
.explorer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "rail" "stage" "after";
  gap: var(--space-l);
}
.explorer-rail { grid-area: rail; min-width: 0; display: grid; gap: var(--space-m); align-content: start; }
.explorer-stage { grid-area: stage; min-width: 0; }
.explorer-after { grid-area: after; min-width: 0; display: grid; gap: var(--space-2xl); align-content: start; }

/* Phones (teen-ux review: "the first screen is a form"): the body comes first, at about half the
   screen, with a short title above it; the stepper and the current step's card follow under it. The
   rail's children join the explorer grid (display: contents) so they can sit around the stage. */
@media (max-width: 759.98px) {
  .explorer { padding-top: var(--space-s); }
  .explorer-grid {
    grid-template-areas: "head" "stage" "stepper" "panels" "after";
    gap: var(--space-s);
  }
  .explorer-rail { display: contents; }
  .explorer-head { grid-area: head; }
  .explorer-rail > .stepper { grid-area: stepper; }
  .explorer-rail > .step-panels { grid-area: panels; }
  .explorer-after { margin-top: var(--space-l); }
  .explorer-lede { display: none; }
  .explorer-title { font-size: clamp(1.625rem, 1.25rem + 1.8vw, 2rem); max-width: none; }
  .explorer-stage { --stage-h: clamp(300px, 50svh, 460px); }
  .narration { min-height: 0; padding-top: 10px; }
  .narration-text { font-size: var(--step-0); }
}

/* Desktop: controls and the timeline on the left, the big body on the right and sticky, so the
   body stays in view while the steps, the timeline and the side effects are used. */
@media (min-width: 960px) {
  .explorer-grid {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "rail stage" "after stage";
    column-gap: clamp(32px, 4vw, 64px);
    row-gap: var(--space-2xl);
  }
  .explorer-stage {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    align-self: start;
  }
}

.explorer-head { display: grid; gap: 12px; }
.explorer-title {
  font-size: var(--step-4);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  max-width: 14ch;
}
.explorer-lede { color: var(--muted); font-size: var(--step-1); line-height: 1.45; max-width: 32ch; }
@media (min-width: 960px) {
  .explorer-title { font-size: clamp(2.25rem, 1.4rem + 1.5vw, 3rem); }
}

/* ---------- stepper (numbered circles joined by a line; labels under them) ---------- */
.stepper-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.stepper-item { position: relative; min-width: 0; }
.stepper-item + .stepper-item::before {
  content: "";
  position: absolute;
  top: 21px;
  left: calc(-50% + 30px);
  right: calc(50% + 30px);
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  transition: background-color var(--dur-2) var(--ease);
}
.stepper-item[data-reached="true"]::before { background: var(--primary); }
.stepper-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 4px 4px;
  border-radius: var(--radius-m);
  text-align: center;
  color: var(--text);
}
.stepper-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.125rem;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.stepper-check { display: none; width: 20px; height: 20px; }
.stepper-text { display: grid; gap: 2px; min-width: 0; }
.stepper-label { font-weight: var(--weight-bold); font-size: 0.9375rem; line-height: 1.25; }
.stepper-value {
  min-height: 1.3em;
  color: var(--muted);
  font-size: var(--step--2);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .stepper-btn:hover:not([aria-disabled="true"]) .stepper-num { border-color: var(--primary); color: var(--primary); } }
.stepper-item[data-done="true"] .stepper-num { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.stepper-item[data-done="true"] .stepper-n { display: none; }
.stepper-item[data-done="true"] .stepper-check { display: block; }
.stepper-btn[aria-current="step"] .stepper-num { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.stepper-btn[aria-current="step"] .stepper-n { display: block; }
.stepper-btn[aria-current="step"] .stepper-check { display: none; }
.stepper-btn[aria-disabled="true"] { cursor: not-allowed; }
.stepper-btn[aria-disabled="true"] .stepper-label { color: var(--muted); }

/* ---------- step panels (one at a time) ---------- */
.step-panel {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-m);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .step-panel:not([hidden]) { animation: ps-panel-in var(--dur-3) var(--ease-out); }
}
@keyframes ps-panel-in { from { opacity: 0; transform: translateY(8px); } }
.step-title { font-size: var(--step-2); font-weight: 900; line-height: 1.15; }
.step-help { color: var(--muted); font-size: var(--step-0); line-height: 1.5; margin-top: -8px; }
.step-note {
  padding: 12px 16px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--step--1);
}
.step-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.step-actions .btn { flex: 1 1 auto; }
.hint { color: var(--muted); font-size: var(--step--1); line-height: 1.5; min-height: 1.5em; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .hint.is-nudged { animation: ps-nudge 360ms var(--ease); }
}
@keyframes ps-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.peptide-picker { min-width: 0; }
.rail-placeholder { color: var(--muted); font-size: var(--step--1); }
/* the built-in fallback list (only when js/ui is missing) */
.peptide-picker[data-fallback="true"] { display: flex; flex-wrap: wrap; gap: 8px; }

/* site picker (pre-rendered; js/ui may replace it) */
:where(.site-picker) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.site-option {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 132px;
  padding: 16px 8px 14px;
  border-radius: var(--radius-m);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .site-option:hover { border-color: var(--primary-line); } }
.site-option[aria-checked="true"] { border-color: var(--primary); background: var(--primary-soft); }
.site-glyph { width: 40px; height: 70px; color: var(--muted); }
.site-dot { fill: var(--line-strong); }
.site-option[aria-checked="true"] .site-glyph { color: var(--text-2); }
.site-option[aria-checked="true"] .site-dot { fill: var(--primary); }
.site-name { font-weight: var(--weight-bold); font-size: 0.9375rem; }

/* play button: one icon per state */
.btn--inject .btn-icon--replay { display: none; }
.btn--inject[data-mode="replay"] .btn-icon--play { display: none; }
.btn--inject[data-mode="replay"] .btn-icon--replay { display: block; }
.btn--inject[data-mode="playing"] { opacity: 0.8; cursor: progress; }

/* ---------- stage frame (stage.css styles what the 3D scene adds inside) ---------- */
.explorer-stage { --stage-h: clamp(340px, 58svh, 560px); }
@media (min-width: 960px) {
  .explorer-stage {
    --stage-h: clamp(420px, calc(100svh - var(--header-h) - var(--disclaimer-h) - 140px), 800px);
  }
}
:where(.stage-host) {
  position: relative;
  height: var(--stage-h);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--stage-bg);
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  /* stage.css sizes its labels and buttons by the stage's own width (@container stage) */
  container: stage / inline-size;
}
:where(.stage-canvas-host) { position: absolute; inset: 0; z-index: var(--z-stage-canvas); }
/* single-column layouts: the open Body panel gets its own room under the body (stage.css) */
@media (max-width: 959.98px) {
  .stage-host { --be-sheet-h: min(340px, 52svh); }
  /* the body above the sheet shrinks (never under 240 px) so the whole body and the sheet fit between the
     header and the disclaimer bar together: a slider moved in the sheet shows its result on the full body */
  .stage-host.has-body-editor-open {
    height: min(calc(var(--stage-h) + var(--be-sheet-h)),
      max(calc(var(--be-sheet-h) + 240px), calc(100svh - var(--header-h) - var(--disclaimer-h) - 32px)));
  }
  .stage-host.has-body-editor-open :is(#stage-canvas-host, #callout-layer) { bottom: var(--be-sheet-h); height: auto; }
  .stage-host.has-body-editor-open :is(.stage-tools, .stage-credit, .stage-legend, .stage-hint, .stage-skip) {
    translate: 0 calc(-1 * var(--be-sheet-h));
  }
}
:where(.stage-canvas-host) canvas { width: 100% !important; height: 100% !important; touch-action: none; }
:where(.callout-layer) { position: absolute; inset: 0; z-index: var(--z-callouts); pointer-events: none; }

/* loading: the body glyph and one progress bar that follows real progress (main.js sets --progress) */
.stage-loading {
  position: absolute;
  inset: 0;
  z-index: var(--z-stage-overlay);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.stage-loading-mark { width: 44px; height: 77px; color: var(--line-strong); }
.stage-progress {
  width: min(220px, 60vw);
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}
.stage-progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform var(--dur-3) var(--ease);
}
.stage-loading-text { font-weight: var(--weight-bold); color: var(--text); }
.stage-loading-step { font-size: var(--step--1); color: var(--muted); }

/* fallback: a still picture of the body (when it loads) with a short note under it */
.stage-fallback {
  position: absolute;
  inset: 0;
  z-index: var(--z-stage-overlay);
  display: grid;
  align-content: end;
  justify-items: center;
  padding: 20px;
}
.stage-fallback-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: -1;
}
.stage-fallback-inner {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 440px;
  padding: 20px 24px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: center;
}
.stage-fallback:not([data-poster="shown"]) { align-content: center; }
.stage-fallback-icon { width: 32px; height: 32px; color: var(--primary); }
.stage-fallback[data-poster="shown"] .stage-fallback-icon { display: none; }
.stage-fallback-title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); }
.stage-fallback-text { color: var(--muted); font-size: var(--step--1); }
.stage-fallback-text--file { display: none; }
.stage-fallback[data-reason="file"] .stage-fallback-text--file { display: block; }
.stage-fallback[data-reason="file"] #stage-fallback-text { display: none; }
/* opened as a file, no script runs: CSS alone shows the "open it from its web address" note */
html[data-file] .stage-fallback[hidden] { display: grid !important; }
html[data-file] .stage-fallback-text--file { display: block; }
html[data-file] #stage-fallback-text, html[data-file] #stage-fallback-title { display: none; }
.stage-fallback .btn { margin-top: 6px; }
@media (max-width: 599.98px) {
  .stage-fallback { padding: 12px; }
  .stage-fallback-inner { padding: 14px 16px; gap: 6px; }
  .stage-fallback[data-poster="shown"] .stage-fallback-text { font-size: var(--step--2); }
}

/* ---------- narration: one short sentence under the body ---------- */
.narration {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  min-height: 84px;
  padding: 18px 8px 0;
}
.narration-phase {
  flex: none;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  line-height: 1.5;
}
.narration-text {
  flex: 1 1 260px;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text);
  max-width: 52ch;
}

/* ---------- after the shot: timeline + side effects ---------- */
.after-block { display: grid; gap: var(--space-m); min-width: 0; }
.after-head { display: grid; gap: 6px; }
.after-title { font-size: var(--step-2); font-weight: 900; }
.after-lede { color: var(--muted); max-width: 46ch; }
:where(.timeline-host), :where(.active-effects) { min-width: 0; }
.panel-empty {
  padding: 20px 24px;
  border-radius: var(--radius-l);
  border: 1.5px dashed var(--line-strong);
  color: var(--muted);
}

/* ================================================================ Learn: big friendly cards */
.learn {
  max-width: var(--container-wide); /* one content width with the header and the explorer */
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter) var(--section-pad);
}
.learn-head { display: grid; gap: 12px; margin-bottom: var(--space-xl); }
.learn-title { font-size: var(--step-4); font-weight: 900; line-height: 1.08; letter-spacing: var(--tracking-tight); }
.learn-about { color: var(--primary); }
.learn-lede { color: var(--muted); font-size: var(--step-1); max-width: 40ch; }
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--space-m);
}
.learn-item { min-width: 0; display: grid; }
.learn-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 8px;
  width: 100%;
  min-height: 188px;
  padding: var(--space-m) var(--space-m) 56px;
  border-radius: var(--radius-card);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .learn-card:hover { transform: translateY(-3px); border-color: var(--primary-line); box-shadow: var(--shadow-2); } }
.learn-card:active { transform: translateY(-1px); }
.learn-ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: var(--radius-m);
  background: var(--primary-soft);
  color: var(--primary);
}
.learn-ico-svg { width: 24px; height: 24px; }
.learn-card-title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); line-height: 1.2; }
.learn-card-text { color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
.learn-card-go {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--primary);
  transition: transform var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .learn-card:hover .learn-card-go { transform: translateX(3px); background: var(--primary-soft); } }
.learn-card--danger .learn-ico { background: var(--danger-bg); color: var(--danger-ink); }
.learn-card--warn .learn-ico { background: var(--warn-bg); color: var(--warn-ink); }
@media (hover: hover) and (pointer: fine) { .learn-card--danger:hover { border-color: var(--danger-line); } }
@media (hover: hover) and (pointer: fine) { .learn-card--warn:hover { border-color: var(--warn-line); } }
/* Sources closes the grid as one slim full-width row, so the 12 topic cards fill every row evenly
   (4, 3, 2 or 1 per row) instead of leaving one card alone on the last row */
.learn-item[data-card="sources"] { grid-column: 1 / -1; }
.learn-item[data-card="sources"] .learn-card {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  min-height: 0;
  padding: 20px 64px 20px var(--space-m);
}
.learn-item[data-card="sources"] .learn-ico { grid-row: 1 / 3; margin-bottom: 0; }
.learn-item[data-card="sources"] .learn-card-go { top: calc(50% - 14px); bottom: auto; }

/* ---------- the panel each card opens (native <dialog>; a bottom sheet on phones) ---------- */
.learn-dialog {
  /* centred in the space above the disclaimer bar, which stays readable under the backdrop */
  inset: 0 0 var(--disclaimer-h);
  width: min(880px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - var(--disclaimer-h) - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  overflow: clip; /* not a scroll container: only .dialog-inner scrolls */
}
.learn-dialog[open] { display: flex; flex-direction: column; }
.learn-dialog::backdrop { background: var(--scrim); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .learn-dialog[open] { animation: ps-dialog-in var(--dur-3) var(--ease-out); }
  html:not([data-motion="reduce"]) .learn-dialog[open]::backdrop { animation: ps-fade-in var(--dur-3) var(--ease); }
}
@keyframes ps-dialog-in { from { opacity: 0; transform: translateY(16px) scale(0.985); } }
@keyframes ps-fade-in { from { opacity: 0; } }
.dialog-inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 clamp(20px, 4vw, 40px) clamp(28px, 4vw, 48px);
  scroll-padding-top: 120px;
}
.dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  margin-bottom: var(--space-m);
  padding: clamp(20px, 3vw, 32px) 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.dialog-ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-m);
  background: var(--primary-soft);
  color: var(--primary);
}
.learn-dialog--danger .dialog-ico { background: var(--danger-bg); color: var(--danger-ink); }
.learn-dialog--warn .dialog-ico { background: var(--warn-bg); color: var(--warn-ink); }
.dialog-ico-svg { width: 24px; height: 24px; }
.dialog-titles { display: grid; gap: 6px; min-width: 0; padding-top: 4px; }
.dialog-titles h2 { font-size: var(--step-3); font-weight: 900; line-height: 1.1; }
.dialog-titles .lede { color: var(--muted); max-width: 58ch; }
.dialog-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.dialog-close:hover { background: var(--primary-soft); color: var(--primary); }
.dialog-close-svg { width: 20px; height: 20px; }
@media (max-width: 639.98px) {
  .learn-dialog {
    width: 100vw;
    max-height: calc(100dvh - var(--disclaimer-h) - 16px);
    margin: auto 0 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  .dialog-head { grid-template-columns: minmax(0, 1fr) auto; }
  .dialog-ico { display: none; }
  .dialog-titles h2 { font-size: var(--step-2); }
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="reduce"]) .learn-dialog[open] { animation-name: ps-sheet-in; }
  }
}
@keyframes ps-sheet-in { from { transform: translateY(40px); opacity: 0.4; } }

/* section bodies: a calm skeleton until js/ui fills them */
:where(.section-body) { min-width: 0; }
.dialog-inner .section-body + .section-body { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--line); }
:where(.section-body):empty {
  min-height: 160px;
  border-radius: var(--radius-m);
  background:
    linear-gradient(var(--skeleton-a) 0 0) 0 0 / 70% 18px no-repeat,
    linear-gradient(var(--skeleton-a) 0 0) 0 36px / 92% 14px no-repeat,
    linear-gradient(var(--skeleton-a) 0 0) 0 62px / 84% 14px no-repeat,
    linear-gradient(var(--skeleton-a) 0 0) 0 88px / 60% 14px no-repeat;
}
/* where a target lands inside a panel (a source, a section part) */
.is-landed { animation: ps-landed 1.6s var(--ease); border-radius: var(--radius-xs); }
@keyframes ps-landed { 0%, 40% { background: var(--primary-soft); } }

/* citations (content renders <sup class="cite">): a baseline so they never look raw */
:where(.cite) { font-size: 0.72em; line-height: 0; margin-left: 1px; }
:where(.cite) a { font-weight: var(--weight-bold); text-decoration: none; padding: 0 2px; }

/* ================================================================ footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  padding: var(--space-2xl) 0 calc(var(--space-2xl) + 8px);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 900px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-xl) clamp(32px, 4vw, 64px); }
}
.footer-brand { display: grid; gap: 16px; align-content: start; }
.footer-about { color: var(--text-2); font-weight: var(--weight-medium); }
.footer-help { display: grid; gap: 16px; align-content: start; }
.footer-emergency {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-m);
  background: var(--danger-bg);
  color: var(--text);
  font-weight: var(--weight-medium);
}
.footer-emergency a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; vertical-align: middle;
  color: var(--danger-ink); font-weight: var(--weight-bold); white-space: nowrap;
}
.footer-emergency > span { line-height: 1.9; }
.footer-emergency-icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--danger-ink); }
.footer-disclaimer { color: var(--muted); font-size: var(--step--1); line-height: 1.6; }
.footer-meta { display: grid; gap: 16px; align-content: start; }
.footer-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
}
.seal-mark { width: 18px; height: 18px; color: var(--warn-ink); }
.footer-checked { color: var(--muted); font-size: var(--step--1); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: var(--weight-medium);
}
.link-ext { width: 15px; height: 15px; opacity: 0.7; }
.footer-fineprint { color: var(--muted); font-size: var(--step--2); line-height: 1.55; }
.footer-fineprint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-fineprint a:hover { color: var(--text); }

/* the "Reduce motion" switch */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--text);
  font-weight: var(--weight-medium);
  justify-self: start;
}
.switch-track {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--muted); /* the off state must be visible too (≥ 3:1, a11y review) */
  transition: background-color var(--dur-2) var(--ease);
}
.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease);
}
.switch[aria-checked="true"] .switch-track { background: var(--primary); }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(18px); }

/* ================================================================ disclaimer bar (persistent) */
.disclaimer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-disclaimer);
  padding: 9px var(--gutter) calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
}
.disclaimer-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 10px;
  max-width: var(--container-wide);
  margin-inline: auto;
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  text-align: center;
}
.disclaimer-text > span { white-space: nowrap; }
.disclaimer-icon { width: 16px; height: 16px; color: var(--primary); }
.disclaimer .sep { color: var(--line-strong); }
@media (max-width: 519.98px) {
  .disclaimer { padding-top: 7px; padding-bottom: calc(7px + env(safe-area-inset-bottom)); }
  .disclaimer-text { gap: 0 8px; font-size: 0.75rem; }
  .disclaimer-icon { display: none; }
}

/* ================================================================ short viewports (e.g. 400% zoom on a laptop)
   The header scrolls away with the page and the disclaimer bar shrinks to one line, so the page keeps
   room to read (WCAG 1.4.10 reflow). The name and tagline stay in the header; the full disclaimer is
   in the footer. */
@media (max-height: 500px) {
  .site-header { position: static; }
  .header-inner { min-height: 0; }
  .disclaimer { padding-block: 4px calc(4px + env(safe-area-inset-bottom)); }
  .disclaimer-text { gap: 0 6px; font-size: 0.6875rem; line-height: 1.25; }
  .disclaimer-text > .sep:nth-last-child(2), .disclaimer-text > span:last-child, .disclaimer-icon { display: none; }
  html { scroll-padding-top: 8px; }
  .explorer-stage { position: static !important; }
}

/* ================================================================ reduced motion: no transforms, no animation */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *,
  html:not([data-motion="full"]) *::before,
  html:not([data-motion="full"]) *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  html:not([data-motion="full"]) .learn-card:hover,
  html:not([data-motion="full"]) .learn-card:hover .learn-card-go { transform: none; }
}
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
html[data-motion="reduce"] .learn-card:hover,
html[data-motion="reduce"] .learn-card:hover .learn-card-go,
html[data-motion="reduce"] .btn:active { transform: none; }

/* ================================================================ forced colors */
@media (forced-colors: active) {
  .learn-card, .step-panel, .site-option, .stepper-num, .learn-dialog { border: 1px solid CanvasText; }
  .stepper-btn[aria-current="step"] .stepper-num, .switch[aria-checked="true"] .switch-track { background: Highlight; }
}

/* ================================================================ print: every panel's content, no chrome */
@media print {
  .site-header, .disclaimer, .skip-link, .stepper, .step-panels, .explorer-stage, .learn-grid,
  .dialog-close, #intro, .switch { display: none !important; }
  body { padding: 0; background: #fff; color: #000; }
  .learn-dialog { display: block !important; position: static; width: auto; max-height: none; box-shadow: none; border: 0; overflow: visible; }
  .dialog-inner { overflow: visible; padding: 0; }
  .dialog-head { position: static; }
  .site-footer { background: none; }
}