/* ═══════════════════════════════════════════════════════════════════════
   e-Fuse — Module Component Stylesheet
   Ported from MiM Pro for GPs Part 1 (Movember-Learning) and rebranded
   to the e-Fuse identity. All --mim-* tokens replaced with --efuse-*
   equivalents. Texture assets removed; dark surfaces use e-Fuse navy/ink.
   Import order: engine/fonts.css -> engine/efuse-design-system.css -> this file.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* -- e-Fuse AA accent aliases (map to design-system token intent) -- */
  --efuse-volt-aa:       var(--efuse-volt);      /* AA Large strokes, icons */
  --efuse-volt-aa-dark:  var(--efuse-volt-ink);  /* AA normal accent text + links */

  /* -- Build-flag palette -- */
  --flag-bg:      rgba(255, 209, 122, 0.18);
  --flag-border:  #C28A1B;
  --flag-fg:      #6B4A12;

  /* -- Texture vars removed: dark surfaces use e-Fuse navy/ink tokens -- */

  /* -- Shell -- */
  --header-h: 60px;
  --footer-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  background: var(--efuse-white);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ═══════════════════════════════════════════════════════════════════════
   SHELL — header, footer nav, menus
   ═══════════════════════════════════════════════════════════════════════ */
.module-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
/* main grows to fill the column so the sticky footer is always pinned to the
   bottom of the viewport, even on short screens. */
#screenHost { flex: 1 1 auto; }

.module-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: var(--efuse-navy);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center;
  padding: 0 var(--sp-5); gap: var(--sp-4);
  color: var(--efuse-white);
}
.module-header__logo { height: 30px; width: auto; display: block; user-select: none; flex-shrink: 0; cursor: default; filter: invert(1) brightness(2); }
.module-header__title {
  flex: 1; font-size: 12px; font-weight: var(--weight-semibold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.module-header__right { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

.progress-bar { width: 80px; height: 3px; background: rgba(255,255,255,0.15); border-radius: var(--radius-pill); overflow: hidden; }
.progress-bar__fill { height: 100%; background: var(--efuse-volt); border-radius: var(--radius-pill); transition: width 400ms var(--ease-standard); }
.progress-label { font-size: 11px; font-weight: var(--weight-semibold); color: rgba(255,255,255,0.45); letter-spacing: 0.06em; min-width: 40px; text-align: right; }

.btn-icon {
  background: none; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md);
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.65); cursor: pointer; text-decoration: none; font-size: 15px;
  transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.btn-icon:hover { border-color: var(--efuse-volt); color: var(--efuse-volt); }
.btn-icon svg { width: 17px; height: 17px; }

/* ── Footer nav ── */
.module-footer {
  position: sticky; bottom: 0; z-index: 90;
  height: var(--footer-h);
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-5); gap: var(--sp-4);
}
body.night-mode .module-footer { background: rgba(10,10,12,0.92); border-top-color: rgba(255,255,255,0.12); }

.nav-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer; border-radius: var(--radius-pill);
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: 13px; letter-spacing: 0.04em; padding: 12px 26px;
  transition: transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}
.nav-btn--primary { background: var(--efuse-navy); color: var(--efuse-white); }
.nav-btn--primary:hover { transform: translateY(-1px); }
.nav-btn--ghost { background: var(--efuse-cloud); color: var(--fg-muted); border: 1px solid var(--border); }
.nav-btn--ghost:hover { background: var(--efuse-volt); color: var(--efuse-navy); border-color: var(--efuse-volt); }
.nav-btn:disabled { opacity: 0.32; cursor: default; transform: none; }
.nav-btn.scroll-locked { opacity: 0.38; cursor: default; }
.nav-btn.pulse-available { animation: navPulse 1.4s var(--ease-standard) 2; }
@keyframes navPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,174,239,0); } 50% { box-shadow: 0 0 0 6px rgba(0,174,239,0.28); } }

/* ── Scroll hint arrow ── */
.scroll-arrow {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 80; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard);
  color: var(--efuse-volt-aa-dark);
}
.scroll-arrow.visible { opacity: 1; animation: arrowBob 1.6s var(--ease-standard) infinite; }
@keyframes arrowBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

/* ═══════════════════════════════════════════════════════════════════════
   SCREEN SYSTEM
   ═══════════════════════════════════════════════════════════════════════ */
.screen { display: none; }
.screen.active { display: block; animation: screenIn 360ms var(--ease-standard); }
/* Dark/expressive + multimedia screens center their content — but ONLY when active,
   so the base .screen { display:none } still hides them when inactive.
   (Equal-specificity display on the variants would otherwise keep them visible.) */
.screen--dark.active, .screen--multimedia.active { display: flex; align-items: center; justify-content: center; }
@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }

.screen-inner {
  max-width: 820px; margin: 0 auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-9);
}

/* Stacking rhythm between top-level blocks inside a content screen */
.screen-inner > * + * { margin-top: var(--sp-5); }
.screen-inner > .eyebrow + * { margin-top: var(--sp-2); }

/* ── Dark / expressive screens ── */
/* Navy background with a 50% black scrim for overlay legibility.
   When a photo/video asset is present, it sits behind the scrim. */
.screen--dark {
  background-color: var(--efuse-navy);
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  color: var(--efuse-white);
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
}
.screen--dark .screen-inner { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }

/* ── Full-bleed multimedia ── */
.screen--multimedia {
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  padding: var(--sp-7) var(--sp-5);
  background-color: var(--efuse-navy);
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* video screens sit nearer the top rather than vertically centred */
.screen--multimedia[data-type="video"].active { align-items: flex-start; }
.screen--multimedia[data-type="video"] { padding-top: var(--sp-5); }

/* ═══════════════════════════════════════════════════════════════════════
   CONTENT BLOCKS
   ═══════════════════════════════════════════════════════════════════════ */

/* [eyebrow] */
.eyebrow {
  display: block;
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.screen--dark .eyebrow { color: rgba(255,255,255,0.8); }

/* [title] */
.title {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--fs-h1); letter-spacing: var(--tr-display); line-height: var(--lh-tight);
  color: var(--fg);
}
.screen--dark .title { color: var(--efuse-white); }

/* [heading] */
.heading {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--fs-h2); letter-spacing: var(--tr-display); line-height: 1.1;
  color: var(--fg);
}
.screen--dark .heading { color: var(--efuse-white); }

/* [section lead] */
.section-lead {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: var(--fs-subhead); letter-spacing: -0.01em; line-height: 1.15;
  max-width: 38ch; color: var(--fg);
}
.screen--dark .section-lead { color: var(--efuse-white); }

/* [body] */
.body {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: var(--fs-body); line-height: 1.55; max-width: var(--measure); color: var(--fg);
}
.body + .body { margin-top: 18px; }
.body strong { font-weight: var(--weight-semibold); }
.screen--dark .body { color: rgba(255,255,255,0.92); }

/* [key point] */
.keypoint-wrap {
  border-left: 3px solid var(--efuse-volt-aa);
  padding-left: 18px; margin: 16px 0; max-width: var(--measure);
}
.keypoint {
  font-family: var(--font-feature); font-weight: var(--weight-regular);
  font-size: calc((22px) * var(--fs-scale)); line-height: 1.3; letter-spacing: -0.01em; color: var(--fg);
}
.keypoint strong { font-weight: var(--weight-semibold); }
.keypoint-wrap .caption { padding-left: 0; }

/* [list] */
.list { max-width: var(--measure); }
.list li { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: var(--fs-body); line-height: 1.55; }
.list li + li { margin-top: 16px; }
.list strong { font-weight: var(--weight-semibold); }
ul.list { list-style: none; }
ul.list li { position: relative; padding-left: 24px; }
ul.list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--efuse-volt-aa-dark);
}
ol.list { list-style: none; counter-reset: li; }
ol.list li { position: relative; padding-left: 28px; counter-increment: li; }
ol.list li::before {
  content: counter(li) "."; position: absolute; left: 0; top: 0;
  font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 14px;
  color: var(--efuse-volt-aa-dark);
}

/* [instructional text] */
.instructional {
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: calc((11px) * var(--fs-scale)); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-subtle);
}

/* [caption] */
.caption {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: 13px; line-height: 1.4; letter-spacing: 0.02em;
  color: var(--fg-subtle); margin-top: 12px;
}
.screen--dark .caption, .on-photo .caption { color: rgba(255,255,255,0.7); }

/* [caveat] */
.caveat {
  background: var(--efuse-cloud); border-radius: var(--radius-md);
  padding: 14px 18px; max-width: 60ch;
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: calc((14px) * var(--fs-scale)); line-height: 1.4; color: var(--fg-muted);
}

/* [quote] */
.quote {
  border-left: 3px solid var(--efuse-navy); padding-left: 22px; max-width: var(--measure);
}
.quote__text {
  font-family: var(--font-feature); font-weight: var(--weight-regular);
  font-size: calc((24px) * var(--fs-scale)); line-height: 1.3; letter-spacing: -0.01em; color: var(--fg);
}

/* [stat] */
.stat {
  background: var(--efuse-navy);
  border-radius: var(--radius-lg); padding: 56px 48px;
  display: grid; grid-auto-rows: auto; gap: 32px; align-items: center;
  max-width: 680px;
}
.stat__figure {
  font-family: var(--font-feature); font-weight: var(--weight-regular);
  font-size: calc((clamp(96px, 14vw, 140px)) * var(--fs-scale)); letter-spacing: -0.04em; line-height: 0.9;
  color: var(--efuse-white);
}
.stat__sentence {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: calc((17px) * var(--fs-scale)); line-height: 1.4; max-width: 26ch; color: rgba(255,255,255,0.92);
}
.stat__source {
  font-family: var(--font-primary); font-size: 11px; color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em; margin-top: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════
   [evidence] — "Moustaches love research"
   ═══════════════════════════════════════════════════════════════════════ */
.evidence {
  background: var(--efuse-cloud); border: 1px solid var(--border);
  border-radius: var(--radius-lg); max-width: var(--measure); overflow: hidden;
}
.evidence__row {
  display: grid; grid-template-columns: 44px 1fr 28px; align-items: center;
  gap: 12px; padding: 16px 18px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
}
.evidence__mo {
  width: 44px; height: 28px;
  background: url('./assets/images/logo.svg') left center / contain no-repeat;
}
.evidence__label {
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: calc((13px) * var(--fs-scale)); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg); text-align: center;
}
.evidence__toggle {
  font-family: var(--font-primary); font-size: 22px; color: var(--fg-muted);
  line-height: 1; transition: transform 220ms var(--ease-standard); justify-self: end;
}
.evidence.open .evidence__toggle { transform: rotate(45deg); }
.evidence__body {
  display: none; padding: 0 22px 20px 82px;
}
.evidence.open .evidence__body { display: block; }
.evidence__paper {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: calc((15px) * var(--fs-scale)); line-height: 1.6; color: var(--fg);
}
.evidence__paper + .evidence__paper { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 20px; }
.evidence__cite { font-family: var(--font-primary); font-size: calc((12px) * var(--fs-scale)); color: var(--fg-subtle); line-height: 1.4; margin-top: 8px; }
.evidence__link {
  display: inline-block; margin-top: 12px;
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: calc((11px) * var(--fs-scale)); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--efuse-volt-aa-dark); text-decoration: none;
}
.evidence__link:hover { text-decoration: underline; }

/* "Save for later" flag button (injected into each evidence paper) */
.fom-tag-btn {
  display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 16px;
  background: none; border: 1.5px solid rgba(0,174,239,0.5); border-radius: var(--radius-pill);
  padding: 6px 14px; font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: 12px; letter-spacing: 0.04em; color: var(--efuse-volt-aa-dark); cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.fom-tag-btn:hover { background: rgba(0,174,239,0.14); border-color: var(--efuse-volt); }
.fom-tag-btn.is-tagged { background: var(--efuse-volt); border-color: var(--efuse-volt); color: var(--efuse-navy); }
.fom-tag-btn.is-tagged svg { fill: var(--efuse-navy); }
body.night-mode .fom-tag-btn { color: #7DD8F7; }
body.night-mode .fom-tag-btn.is-tagged { color: var(--efuse-navy); }

/* ═══════════════════════════════════════════════════════════════════════
   [additional resources] — collation / email screen
   ═══════════════════════════════════════════════════════════════════════ */
.resources-list { list-style: none; margin: var(--sp-5) 0; padding: 0; }
.summary-resource-item { border-bottom: 1px solid var(--border); transition: background var(--dur-base) var(--ease-standard); }
.summary-resource-item:first-child { border-top: 1px solid var(--border); }
.resource-item__label { display: flex; align-items: flex-start; gap: 14px; padding: 12px 8px; cursor: pointer; margin: 0; }
.resource-item__label:hover { background: var(--efuse-cloud); }
.resource-checkbox { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--efuse-volt); cursor: pointer; }
.resource-item__text { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((14px) * var(--fs-scale)); line-height: 1.55; color: var(--fg-muted); }
.summary-resource-item.tagged .resource-item__text { font-weight: var(--weight-semibold); color: var(--fg); }
.resources-email-section { margin-top: var(--sp-5); }
.resources-email-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.email-resources-btn svg { width: 14px; height: 14px; }
.resources-email-hint { font-family: var(--font-primary); font-size: 12px; font-style: italic; color: var(--fg-subtle); margin-top: 14px; }
.resources-email-hint.hidden { display: none; }
/* completion confirmation (final wrap-up slide) */
.completion-note { display: flex; align-items: flex-start; gap: 14px; margin-top: var(--sp-7); max-width: var(--measure); background: rgba(0,110,65,0.10); border: 1px solid rgba(0,110,65,0.35); border-radius: var(--radius-md); padding: 20px 22px; }
.completion-note__check { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #006E41; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.completion-note__text { font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: calc((16px) * var(--fs-scale)); line-height: 1.5; color: var(--fg); margin: 0; }
body.night-mode .completion-note { background: rgba(0,110,65,0.18); }
body.night-mode .completion-note__text { color: rgba(255,255,255,0.92); }
body.night-mode .resource-item__label:hover { background: rgba(255,255,255,0.05); }
body.night-mode .resource-item__text { color: rgba(255,255,255,0.7); }
body.night-mode .summary-resource-item.tagged .resource-item__text { color: #fff; }
body.night-mode .summary-resource-item { border-color: rgba(255,255,255,0.1); }

/* ═══════════════════════════════════════════════════════════════════════
   [navigation tutorial] — onboarding screen 2
   ═══════════════════════════════════════════════════════════════════════ */
.nav-tutorial { margin-top: var(--sp-5); max-width: 720px; }
.tutorial-step {
  display: flex; align-items: flex-start; gap: 18px; width: 100%; text-align: left;
  padding: 20px 22px; margin-bottom: 14px;
  background: var(--efuse-cloud); border: 2px solid var(--border); border-radius: var(--radius-lg);
  cursor: pointer; font-family: inherit;
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.tutorial-step:hover { border-color: var(--efuse-volt); background: rgba(0,174,239,0.12); transform: translateY(-1px); }
.tutorial-step__icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-md);
  background: rgba(0,174,239,0.16); border: 1px solid var(--efuse-volt);
  display: flex; align-items: center; justify-content: center;
  color: var(--efuse-volt-aa-dark); font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 18px;
}
.tutorial-step__icon svg { width: 22px; height: 22px; }
.tutorial-step__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tutorial-step__title { font-family: var(--font-feature); font-size: 18px; color: var(--fg); }
.tutorial-step__text { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: 14px; line-height: 1.55; color: var(--fg-muted); }
body.night-mode .tutorial-step { background: #0A1326; }
body.night-mode .tutorial-step__title { color: rgba(255,255,255,0.92); }
body.night-mode .tutorial-step__text { color: rgba(255,255,255,0.7); }
@media (max-width: 640px) { .tutorial-step { flex-direction: column; gap: 12px; } }

/* button highlight pulsed from a tutorial step */
.btn-tutorial-hl { outline: 3px solid var(--efuse-volt); outline-offset: 4px; position: relative; z-index: 200; animation: tut-pulse 0.75s var(--ease-standard) 4; }
@keyframes tut-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,174,239,0); } 50% { box-shadow: 0 0 0 8px rgba(0,174,239,0.35); } }
.btn-tutorial-hl--large { outline: 3px solid var(--efuse-volt); outline-offset: 4px; position: relative; z-index: 200; animation: tut-pulse-large 0.9s var(--ease-standard) 6; }
@keyframes tut-pulse-large { 0% { box-shadow: 0 0 0 0 rgba(0,174,239,0.9); } 45% { box-shadow: 0 0 0 24px rgba(0,174,239,0.32); } 75% { box-shadow: 0 0 0 40px rgba(0,174,239,0); } 100% { box-shadow: 0 0 0 0 rgba(0,174,239,0); } }

/* ═══════════════════════════════════════════════════════════════════════
   [accordion]
   ═══════════════════════════════════════════════════════════════════════ */
.accordion { border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); max-width: var(--measure); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__item:last-child { border-bottom: none; }
.accordion__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; width: 100%; background: none; border: none; cursor: pointer; text-align: left;
}
.accordion__title { font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: calc((17px) * var(--fs-scale)); line-height: 1.3; color: var(--fg); }
.accordion__toggle { font-family: var(--font-primary); font-size: 22px; color: var(--fg-muted); line-height: 1; transition: transform 220ms var(--ease-standard); flex-shrink: 0; }
.accordion__item.open .accordion__toggle { transform: rotate(45deg); }
.accordion__body { display: none; padding: 0 4px 24px; }
.accordion__item.open .accordion__body { display: block; }
.accordion__body .body { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((16px) * var(--fs-scale)); line-height: 1.6; max-width: 62ch; }

/* ═══════════════════════════════════════════════════════════════════════
   MULTIMEDIA — video, image, image+text, image quote
   ═══════════════════════════════════════════════════════════════════════ */
.video-frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 980px; margin: 0 auto;
  border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, #0A1326, #15233F);
}
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; object-fit: cover; }
.video-poster {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background-size: cover; background-position: center; z-index: 2;
}
.video-poster__play {
  width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-base) var(--ease-standard);
}
.video-poster:hover .video-poster__play { transform: scale(1.05); }
.video-poster__play svg { width: 26px; height: 26px; fill: var(--efuse-navy); margin-left: 4px; }
/* Placeholder label — review draft only; disappears when a real asset loads (poster hides on play). */
body.placeholder-video .video-poster::after {
  content: "Video placeholder — final asset to come";
  position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.75);
}
/* When a real video thumbnail is preloaded, lay a subtle scrim so the white
   play button stays legible over bright frames. */
.video-poster.has-thumb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.38)); }
.video-poster.has-thumb .video-poster__play { position: relative; z-index: 1; }
.video-poster.activated { opacity: 0.55; }
.video-caption { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((13px) * var(--fs-scale)); color: var(--fg-muted); margin-top: var(--sp-3); text-align: center; }

/* [image] */
.image-block { border-radius: var(--radius-lg); overflow: hidden; max-width: var(--measure); }
.image-block img { width: 100%; object-fit: cover; filter: saturate(0.85); }
.image-caption { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((13px) * var(--fs-scale)); color: var(--fg-subtle); margin-top: 8px; }

/* [image + text] */
.image-text { display: grid; grid-template-columns: 280px 1fr; gap: 28px; max-width: 800px; align-items: center; }
.image-text--right { grid-template-columns: 1fr 280px; }
.image-text--right .image-text__media { order: 2; }

/* ── decorative accent illustration beside a heading / title / text block ──
   Used as a "gap filler" to the right of short headings and bullet lists. */
/* Capped to the content measure so the accent image's right edge never extends
   past the widest text box on the slide. */
.accent-row { display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; max-width: var(--measure); }
.accent-row__main { flex: 1 1 320px; min-width: 0; }
.accent-row__main > * + * { margin-top: var(--sp-3); }
.accent-row__art { flex: 0 0 auto; width: clamp(170px, 26vw, 280px); height: auto; pointer-events: none; user-select: none; }
@media (max-width: 640px) { .accent-row__art { display: none; } }
.image-text__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.image-text__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.image-text__body .heading { font-size: var(--fs-h3); }
.image-text__body .body { margin-top: 12px; }
@media (max-width: 720px) { .image-text, .image-text--right { grid-template-columns: 1fr; } .image-text--right .image-text__media { order: 0; } }

/* [image quote] */
.image-quote {
  position: relative; width: 100%; max-width: 1100px; margin: 0 auto;
  aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden;
}
.image-quote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.image-quote::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.65) 100%); }
.image-quote__inner { position: absolute; left: 0; right: 0; padding: 32px 36px; max-width: 680px; z-index: 2; }
.image-quote--bottom-left .image-quote__inner { bottom: 0; }
.image-quote--top-left .image-quote__inner { top: 0; }
/* top-left quotes need the scrim at the top, where the text sits, for contrast */
.image-quote--top-left::after { background: linear-gradient(180deg, rgba(0,0,0,0.68) 0%, transparent 60%); }
.image-quote__text {
  font-family: var(--font-feature); font-weight: var(--weight-regular);
  font-size: calc((clamp(20px, 2.2vw, 28px)) * var(--fs-scale)); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--efuse-white); text-shadow: 0 1px 18px rgba(0,0,0,0.45);
}
.image-quote__attr { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((13px) * var(--fs-scale)); color: rgba(255,255,255,0.85); margin-top: 14px; }
@media (max-width: 720px) { .image-quote { aspect-ratio: 3 / 4; } }

/* ═══════════════════════════════════════════════════════════════════════
   [bricks] — the backpack reveal
   ═══════════════════════════════════════════════════════════════════════ */
.bricks { display: grid; grid-template-columns: 280px 1fr; gap: 28px; max-width: 900px; align-items: start; }
.bricks__reveal {
  position: sticky; top: calc(var(--header-h) + 16px);
  background: var(--efuse-cloud); border-radius: var(--radius-md);
  padding: 24px 26px; min-height: 260px;
}
.bricks__empty { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((14px) * var(--fs-scale)); color: var(--fg-subtle); }
.bricks__reveal-title { font-family: var(--font-feature); font-weight: var(--weight-regular); font-size: calc((22px) * var(--fs-scale)); line-height: 1.2; margin-bottom: 10px; }
.bricks__reveal-body { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((15px) * var(--fs-scale)); line-height: 1.6; }
.bricks__wall { display: flex; flex-wrap: wrap; gap: 14px; }
.brick {
  flex: 1 1 calc(50% - 14px); min-width: 180px; height: 78px;
  background: var(--efuse-white); border: 1.5px solid var(--efuse-navy); border-radius: 4px;
  padding: 14px 18px; font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: calc((14px) * var(--fs-scale)); line-height: 1.25; text-align: left; color: var(--fg); cursor: pointer;
  transition: transform 180ms var(--ease-standard), background 180ms var(--ease-standard), border-color 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}
.bricks__wall .brick:nth-child(even) { margin-left: 7%; }
.brick:hover { background: rgba(0,174,239,0.08); border-color: var(--efuse-volt-aa); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.brick.viewed { background: var(--efuse-cloud); border-color: rgba(0,0,0,0.18); color: var(--fg-subtle); }
.brick.selected { background: rgba(0,174,239,0.10); border: 2px solid var(--efuse-volt-aa); color: var(--fg); padding: 13.5px 17.5px; }
@media (max-width: 720px) {
  .bricks { grid-template-columns: 1fr; }
  .bricks__reveal { position: static; }
  .brick { flex-basis: 100%; }
  .bricks__wall .brick:nth-child(even) { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   [card deck] + popup modal
   ═══════════════════════════════════════════════════════════════════════ */
.card-deck { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; max-width: 760px; }
/* spread variant — distribute a small set of cards evenly across the content width */
.card-deck--spread { max-width: 100%; justify-content: space-evenly; gap: 28px; }
/* bigger case-example cards on 1.6 */
.card-deck--spread .deck-card { flex: 1 1 0; max-width: 480px; height: 520px; }
@media (max-width: 720px) { .card-deck--spread { flex-direction: column; align-items: center; overflow: visible; } .card-deck--spread .deck-card { width: 100%; max-width: 100%; height: 320px; } }

/* image lightbox (click to zoom) */
.image-block--zoom, .image-block--zoom img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.92); padding: 48px; cursor: zoom-out; }
.lightbox.open { display: flex; animation: fadeIn 200ms var(--ease-standard); }
.lightbox img { max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox__close { position: fixed; top: 18px; right: 26px; z-index: 301; background: none; border: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════
   [backpack of bricks] — native interactive (screen 14), rebuilt from the
   standalone. Pack each norm "brick"; the backpack fills bottom-up; gate
   unlocks when all six are packed.
   ═══════════════════════════════════════════════════════════════════════ */
.bob { margin-top: var(--sp-4); max-width: 980px; }
.bob__stage { display: grid; grid-template-columns: minmax(300px, 1fr) 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
@media (max-width: 760px) { .bob__stage { grid-template-columns: 1fr; gap: 32px; align-items: start; } }
.bob__left { display: flex; flex-direction: column; }
.bob__right { display: flex; }

.bob__trait { background: var(--efuse-cloud); border-radius: var(--radius-lg); padding: 26px 28px 30px; min-height: 210px; transition: background var(--dur-base) var(--ease-standard); }
.bob__eyebrow { display: block; margin-bottom: 14px; font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); }
.bob__trait-title { font-family: var(--font-feature); font-weight: var(--weight-medium); font-size: calc(clamp(26px, 3vw, 34px) * var(--fs-scale)); line-height: 1.08; margin: 0 0 12px; color: var(--fg); }
.bob__trait-desc { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc(18px * var(--fs-scale)); line-height: 1.5; color: var(--fg-muted); max-width: 34ch; margin: 0; }
.bob__trait--empty .bob__trait-title, .bob__trait--empty .bob__trait-desc { color: #6B7A9B; }
.bob__swap { animation: bobSwapIn 320ms var(--ease-standard); }
@keyframes bobSwapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.bob__pack { margin: clamp(16px, 2vw, 28px) auto 0; position: relative; width: 100%; max-width: 360px; display: flex; justify-content: center; }
.bob__svg { display: block; width: 100%; height: auto; overflow: visible; }
.bob__band { animation: bobBandDrop 460ms var(--ease-out, cubic-bezier(0.16,1,0.3,1)); }
@keyframes bobBandDrop { 0% { opacity: 0; transform: translateY(-22px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
.bob__falling { position: absolute; left: 50%; top: 4%; width: 56px; height: 28px; margin-left: -28px; border-radius: 5px; background: var(--efuse-volt); box-shadow: var(--shadow-md); z-index: 5; pointer-events: none; animation: bobBrickFall 640ms cubic-bezier(0.45,0.05,0.55,0.95) forwards; }
@keyframes bobBrickFall { 0% { opacity: 0; transform: translateY(-40px) rotate(-8deg) scale(0.9); } 18% { opacity: 1; } 72% { opacity: 1; transform: translateY(120px) rotate(4deg); } 100% { opacity: 0; transform: translateY(150px) rotate(2deg) scale(0.86); } }

.bob__meta { margin-top: var(--sp-5); display: flex; align-items: center; gap: 14px; }
.bob__count { font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 15px; color: var(--fg); }
.bob__count b { color: var(--efuse-volt-aa-dark); }
.bob__reset { margin-left: auto; border: 1px solid var(--border); background: transparent; color: var(--fg-muted); font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.bob__reset:hover:not(:disabled) { border-color: var(--border-strong); color: var(--fg); }
.bob__reset:disabled { opacity: 0.35; cursor: default; }


/* The six bricks stretch to fill the left column's height so the stack's
   bottom edge lines up with the bottom of the backpack illustration. */
.bob__bricks { display: flex; flex-direction: column; gap: 14px; flex: 1; justify-content: space-between; }
.bob__brick { appearance: none; text-align: left; font-family: var(--font-primary); border: 1px solid var(--border); background: var(--efuse-cloud); border-radius: var(--radius-md); padding: 18px 20px; cursor: pointer; color: var(--fg-muted); font-weight: var(--weight-semibold); font-size: calc(clamp(16px, 1.4vw, 18px) * var(--fs-scale)); display: flex; align-items: center; gap: 14px; flex: 1 1 0; min-height: 64px; transition: transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
@media (max-width: 760px) { .bob__right { display: block; } .bob__bricks { display: flex; flex: none; } .bob__brick { flex: none; min-height: 0; } }
.bob__brick:nth-child(2) { margin-left: 34px; }
.bob__brick:nth-child(3) { margin-right: 26px; }
.bob__brick:nth-child(4) { margin-left: 42px; }
.bob__brick:nth-child(5) { margin-right: 38px; }
.bob__brick:nth-child(6) { margin-left: 28px; }
@media (max-width: 760px) { .bob__brick { margin-left: 0 !important; margin-right: 0 !important; } }
.bob__brick:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); color: var(--fg); }
.bob__brick:focus-visible { outline: 3px solid var(--efuse-volt-aa-dark); outline-offset: 2px; }
.bob__dot { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid currentColor; opacity: 0.5; transition: all var(--dur-base) var(--ease-standard); }
.bob__label { flex: 1; }
.bob__brick.is-packed { background: var(--efuse-white); color: var(--fg); border-color: rgba(0,174,239,0.55); }
.bob__brick.is-packed .bob__dot { background: var(--efuse-volt); border-color: var(--efuse-volt); opacity: 1; }
.bob__brick.is-active { background: rgba(0,174,239,0.18); border-color: var(--efuse-volt); color: var(--fg); box-shadow: 0 0 0 1px var(--efuse-volt); }
.bob__brick.is-active .bob__dot { background: var(--efuse-volt); border-color: var(--efuse-volt); opacity: 1; }
body.night-mode .bob__trait, body.night-mode .bob__brick { background: #0A1326; }
body.night-mode .bob__brick.is-packed { background: #15233F; }

/* ═══════════════════════════════════════════════════════════════════════
   [reveal stack] — stacked images, click to reveal text (1.2 life stages)
   ═══════════════════════════════════════════════════════════════════════ */
.reveal-stack { display: flex; flex-direction: column; gap: 16px; max-width: var(--measure); }
.reveal-item { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--efuse-cloud); }
.reveal-item__head { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.reveal-item__img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease-standard); }
.reveal-item__head:hover .reveal-item__img { transform: scale(1.02); }
.reveal-item__head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78)); }
.reveal-item__title { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 20px 24px; font-family: var(--font-feature); font-size: calc((24px) * var(--fs-scale)); line-height: 1.1; color: #fff; text-align: left; }
.reveal-item__chev { position: absolute; right: 20px; bottom: 18px; z-index: 2; color: #fff; font-size: 30px; line-height: 1; transition: transform var(--dur-base) var(--ease-standard); }
.reveal-item.open .reveal-item__chev { transform: rotate(45deg); }
.reveal-item__body { display: none; padding: 24px 28px 28px; }
.reveal-item.open .reveal-item__body { display: block; }
.reveal-item__body > * + * { margin-top: var(--sp-4); }
body.night-mode .reveal-item { background: #0A1326; }

/* ═══════════════════════════════════════════════════════════════════════
   [reveal bullets] — click each to reveal a consequence (health literacy gap)
   ═══════════════════════════════════════════════════════════════════════ */
.reveal-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: var(--measure); margin-top: 8px; }
.reveal-bullet {
  min-height: 66px; display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; text-align: left;
  background: var(--efuse-cloud); border: 1.5px solid var(--border); border-radius: var(--radius-md);
  font-family: var(--font-primary); font-size: var(--fs-body); line-height: 1.4; color: var(--fg); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.reveal-bullet:hover:not(.revealed) { border-color: var(--efuse-volt); background: rgba(0,174,239,0.08); }
.reveal-bullet__face { font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; font-size: calc((12px) * var(--fs-scale)); color: var(--efuse-volt-aa-dark); }
.reveal-bullet.revealed { cursor: default; background: rgba(0,174,239,0.10); border-color: var(--efuse-volt-aa); font-weight: var(--weight-light); }
.reveal-bullet.revealed::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--efuse-volt-aa); }
@media (max-width: 560px) { .reveal-list { grid-template-columns: 1fr; } }
body.night-mode .reveal-bullet { background: #0A1326; }
body.night-mode .reveal-bullet__face { color: #7DD8F7; }
.deck-card {
  position: relative; flex: 0 0 280px; height: 417px; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md); cursor: pointer; border: none; padding: 0;
  transition: transform var(--dur-base) var(--ease-standard);
}
.deck-card:hover { transform: translateY(-3px); }
.deck-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deck-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.8)); }
.deck-card__title { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 20px; font-family: var(--font-primary); font-weight: var(--weight-bold); font-size: calc((20px) * var(--fs-scale)); color: var(--efuse-white); text-align: left; }
.deck-card__arrow {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-standard);
}
.deck-card__arrow svg { width: 18px; height: 18px; stroke: var(--efuse-white); }
.deck-card:hover .deck-card__arrow { background: var(--efuse-volt); }
.deck-card:hover .deck-card__arrow svg { stroke: var(--efuse-navy); }
.deck-card.viewed .deck-card__img { filter: grayscale(0.7); opacity: 0.65; }

/* popup */
.card-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; }
.card-modal.open { display: flex; }
.card-modal__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); animation: fadeIn 220ms var(--ease-standard); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.card-modal__panel {
  position: relative; z-index: 2; background: var(--efuse-white); border-radius: var(--radius-lg);
  max-width: 720px; width: calc(100% - 48px); padding: 56px 64px; margin: 40px auto;
  animation: screenIn 260ms var(--ease-standard);
}
.card-modal__panel > * + * { margin-top: var(--sp-4); }
.card-modal__panel .body { max-width: 62ch; }
.card-modal__close {
  position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--efuse-cloud); border: none; cursor: pointer; color: var(--fg-muted);
  font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 600px) { .card-modal__panel { padding: 40px 24px; } }

/* ═══════════════════════════════════════════════════════════════════════
   KNOWLEDGE CHECK options (shared: standalone + hear-it-from-him)
   ═══════════════════════════════════════════════════════════════════════ */
.kc-question { font-family: var(--font-feature); font-weight: var(--weight-regular); font-size: calc((24px) * var(--fs-scale)); line-height: 1.25; max-width: 640px; margin-bottom: 18px; color: var(--fg); }
.kc-options { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.kc-option {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 16px 48px 16px 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--efuse-white); font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: calc((16px) * var(--fs-scale)); line-height: 1.4; text-align: left; cursor: pointer; width: 100%; color: var(--fg);
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.kc-option:hover:not(:disabled) { border-color: var(--efuse-volt-aa); }
.kc-option__mark { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: none; }
.kc-option__tick { /* mark-tick.png removed - tick feedback handled by inline SVG */ }
.kc-option__cross { color: var(--fg); }
.kc-option__cross svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.4; }

/* chosen + correct */
.kc-option.chosen-correct { border: 2.5px solid var(--efuse-volt-aa); background: rgba(0,174,239,0.10); }
.kc-option.chosen-correct .kc-option__tick { display: block; }
/* chosen + incorrect */
.kc-option.chosen-incorrect { border: 2.5px solid var(--fg); background: rgba(0,0,0,0.05); color: var(--fg-muted); text-decoration: line-through; }
.kc-option.chosen-incorrect .kc-option__cross { display: block; }
/* revealed correct (when learner picked wrong) */
.kc-option.revealed-correct { border: 1.5px solid var(--efuse-volt-aa); background: rgba(0,174,239,0.10); }
.kc-option.revealed-correct .kc-option__tick { display: block; }
.kc-option:disabled { cursor: default; }

.kc-feedback {
  display: none; background: var(--efuse-white); border-left: 4px solid var(--border-strong);
  padding: 18px 20px; max-width: 620px; margin-top: 18px;
}
.kc-feedback.show { display: block; animation: screenIn 300ms var(--ease-standard); }
.kc-feedback__status { font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: calc((11px) * var(--fs-scale)); letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.kc-feedback__body { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((15px) * var(--fs-scale)); line-height: 1.55; }
.kc-feedback--correct { border-left-color: var(--efuse-volt-aa); }
.kc-feedback--correct .kc-feedback__status { color: var(--efuse-volt-aa-dark); }
.kc-feedback--incorrect { border-left-color: var(--fg); background: rgba(0,0,0,0.05); }
.kc-feedback--incorrect .kc-feedback__status { color: var(--fg); }

/* ═══════════════════════════════════════════════════════════════════════
   [reflect] — Pause for a mo
   ═══════════════════════════════════════════════════════════════════════ */
.reflect {
  background: var(--efuse-cloud); border-radius: var(--radius-lg);
  padding: 32px 36px; max-width: 720px;
  opacity: 0; transform: translateY(10px);
}
.reflect.in { animation: reflectIn 600ms var(--ease-standard) forwards; }
@keyframes reflectIn { to { opacity: 1; transform: translateY(0); } }
.reflect__label {
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: calc((13px) * var(--fs-scale)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg);
  margin-bottom: 16px; display: block;
}
.reflect__prompt { font-family: var(--font-feature); font-weight: var(--weight-regular); font-size: calc((22px) * var(--fs-scale)); line-height: 1.3; color: var(--fg); }
.reflect__prompt + .reflect__prompt { margin-top: 14px; }
.reflect ol, .reflect ul { margin-top: 14px; padding-left: 0; }
.reflect ol { list-style: none; counter-reset: rli; }
.reflect ol li { position: relative; padding-left: 28px; counter-increment: rli; font-family: var(--font-feature); font-size: calc((20px) * var(--fs-scale)); line-height: 1.35; }
.reflect ol li + li { margin-top: 10px; }
.reflect ol li::before { content: counter(rli) "."; position: absolute; left: 0; color: var(--efuse-volt-aa-dark); font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 16px; }

/* reflect — optional response, collapsed behind a toggle (v2 behaviour) */
.reflect__toggle {
  display: inline-flex; align-items: center; margin-top: 16px;
  background: none; border: 1.5px solid var(--efuse-volt); border-radius: var(--radius-pill);
  padding: 8px 18px; font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: 13px; letter-spacing: 0.02em; color: var(--efuse-volt-aa-dark); cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard);
}
.reflect__toggle:hover { background: rgba(0,174,239,0.14); }
body.night-mode .reflect__toggle { color: #7DD8F7; }
.reflect__respond { display: none; margin-top: 16px; }
.reflect.respond-open .reflect__respond,
.hifh__reflect.respond-open .reflect__respond { display: block; }
/* Match the reflect textarea width to the question prompt above it (both 33rem,
   centred) — a ch-based cap looked narrower because the prompt uses a larger font. */
.reflect__respond--centred { max-width: 33rem; margin-left: auto; margin-right: auto; text-align: left; }
.reflect__input {
  width: 100%; box-sizing: border-box; min-height: 104px; resize: vertical;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 16px; font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: calc((16px) * var(--fs-scale)); line-height: 1.55; color: var(--fg);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.reflect__input:focus { outline: none; border-color: var(--efuse-volt); }
.reflect__input::placeholder { color: var(--fg-muted); }
.reflect__actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.reflect__save {
  background: var(--efuse-volt); color: var(--efuse-navy); border: none; border-radius: var(--radius-pill);
  padding: 10px 22px; font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: 13px; cursor: pointer; transition: filter var(--dur-base) var(--ease-standard);
}
.reflect__save:hover { filter: brightness(0.94); }
.reflect__saved {
  font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 13px;
  color: var(--efuse-volt-aa-dark); opacity: 0; transition: opacity var(--dur-base) var(--ease-standard);
}
.reflect__saved.visible { opacity: 1; }
.reflect__view {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 13px;
  color: var(--fg-muted); text-decoration: underline; text-underline-offset: 3px;
}
.reflect__view:hover { color: var(--fg); }

/* my reflections viewer */
.reflections-list { display: flex; flex-direction: column; gap: 16px; max-height: 58vh; overflow-y: auto; }
.reflections-empty { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((15px) * var(--fs-scale)); color: var(--fg-muted); }
.reflection-entry { background: var(--efuse-cloud); border-radius: var(--radius-md); padding: 18px 20px; }
.reflection-entry__q { font-family: var(--font-feature); font-size: calc((17px) * var(--fs-scale)); line-height: 1.35; color: var(--fg); margin-bottom: 10px; }
.reflection-entry__a { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((15px) * var(--fs-scale)); line-height: 1.6; color: var(--fg); white-space: pre-wrap; }
.reflection-entry__delete {
  margin-top: 12px; background: none; border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 6px 16px; font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: 12px; color: var(--fg-muted); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.reflection-entry__delete:hover { border-color: #E52222; color: #E52222; }

/* ═══════════════════════════════════════════════════════════════════════
   [hear it from him]
   ═══════════════════════════════════════════════════════════════════════ */
.hifh__video-stage { transition: opacity 400ms var(--ease-standard); }
.hifh__video-stage.fading { opacity: 0; }
.hifh__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: var(--sp-4); max-width: 980px; margin-left: auto; margin-right: auto; }
.ghost-btn {
  background: var(--efuse-cloud); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 10px 22px; font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: 13px; color: var(--fg-muted); cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.ghost-btn:hover { background: var(--efuse-volt); color: var(--efuse-navy); border-color: var(--efuse-volt); }

/* transcript control on standalone video screens (mirrors hifh controls).
   Transcript sits left; the deliberately understated Skip sits far right. */
.video-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 980px; margin: var(--sp-4) auto 0; }

/* Skip — present but quiet: plain underlined text pushed to the far right,
   not a button, so it doesn't compete with watching the video. */
.skip-video {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-family: var(--font-primary); font-weight: var(--weight-regular);
  font-size: 13px; letter-spacing: 0.03em; color: var(--fg-muted);
  text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px;
  transition: color var(--dur-base) var(--ease-standard);
}
.skip-video:hover { color: var(--fg); }
.skip-video:focus-visible { outline: 2px solid var(--efuse-volt-aa-dark); outline-offset: 3px; }
/* on the black full-screen video screens (light + night mode) */
.screen--multimedia .skip-video { color: rgba(255,255,255,0.6); }
.screen--multimedia .skip-video:hover { color: #fff; }
/* hear-it-from-him screens (26, 35) sit on a LIGHT background — keep the skip
   dark there so it isn't white-on-white (it was invisible). */
.hifh__controls .skip-video { color: var(--fg-muted); }
.hifh__controls .skip-video:hover { color: var(--fg); }
/* night mode: content + hifh video screens sit on a dark page */
body.night-mode .skip-video, body.night-mode .hifh__controls .skip-video { color: rgba(255,255,255,0.6); }
body.night-mode .skip-video:hover, body.night-mode .hifh__controls .skip-video:hover { color: #fff; }
.hifh__transcript { display: none; margin-top: var(--sp-4); max-width: 760px; margin-left: auto; margin-right: auto; background: var(--efuse-cloud); border-radius: var(--radius-md); padding: 24px 26px; }
.hifh__transcript.open { display: block; }
.hifh__transcript p { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((16px) * var(--fs-scale)); line-height: 1.6; }

.hifh__followup { display: none; opacity: 0; transform: translateY(10px); }
.hifh__followup.show { display: block; }
.hifh__followup.in { animation: hifhIn 900ms var(--ease-standard) forwards; }
@keyframes hifhIn { to { opacity: 1; transform: translateY(0); } }

/* reflect variant — centred */
.hifh__reflect { text-align: center; max-width: 640px; margin: 0 auto; }
.hifh__reflect .reflect__label { text-align: center; }
.hifh__reflect-prompt { font-family: var(--font-feature); font-weight: var(--weight-regular); font-size: calc((clamp(22px, 2.6vw, 30px)) * var(--fs-scale)); line-height: 1.35; max-width: 33rem; margin: 0 auto; color: var(--fg); }
.hifh__actions { display: flex; gap: 14px; justify-content: center; margin-top: var(--sp-6); opacity: 0; }
.hifh__actions.in { animation: actionsIn 600ms var(--ease-standard) forwards; }
@keyframes actionsIn { from { opacity: 0; } to { opacity: 1; } }

/* KC completion screen */
.hifh__complete { text-align: center; max-width: 520px; margin: 0 auto; }
.hifh__complete-mo { width: 120px; height: 76px; margin: 0 auto var(--sp-6); background: url('./assets/images/logo.svg') center / contain no-repeat; }
.hifh__complete-caption { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((15px) * var(--fs-scale)); color: var(--fg-muted); margin-bottom: var(--sp-5); }
body.night-mode .hifh__complete-caption { color: rgba(255,255,255,0.7); }
body.night-mode .video-controls .ghost-btn, body.night-mode .hifh__transcript { color: rgba(255,255,255,0.92); }
body.night-mode .hifh__transcript { background: #0A1326; }
.kc-continue { margin-top: var(--sp-5); }

/* ═══════════════════════════════════════════════════════════════════════
   Buttons used in content (downloadable resource etc.)
   ═══════════════════════════════════════════════════════════════════════ */
.btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--efuse-navy); background: transparent; color: var(--fg);
  padding: 12px 22px; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none;
  font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.btn-secondary svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; }
.resource-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: var(--sp-4); }

/* ═══════════════════════════════════════════════════════════════════════
   BUILD FLAG (Build Key §Build flag format) — dev/preview only
   ═══════════════════════════════════════════════════════════════════════ */
.build-flag {
  background: var(--flag-bg); border-left: 3px solid var(--flag-border);
  padding: 10px 14px; max-width: 60ch;
  font-family: var(--font-primary); font-weight: var(--weight-regular);
  font-size: 13px; line-height: 1.4; color: var(--flag-fg);
}
.build-flag strong { font-weight: var(--weight-bold); }
/* Visible by default in this REVIEW DRAFT so the writer sees every flagged
   ambiguity. All build flags must be resolved and removed before go-live. */

/* Screen-meta dev badge (Master rule 7) — only visible in dev mode */
.screen-meta {
  display: none; position: absolute; top: 8px; left: 8px; z-index: 5;
  background: rgba(0,0,0,0.5); color: #fff; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.04em; padding: 3px 7px; border-radius: 4px;
}
body.dev-mode .screen-meta { display: inline-block; }

/* ═══════════════════════════════════════════════════════════════════════
   LANDING / PART DIVIDER / COMPLETION (expressive)
   ═══════════════════════════════════════════════════════════════════════ */
.landing { text-align: left; max-width: 720px; }
.landing__img { width: 100%; max-width: 600px; border-radius: var(--radius-lg); margin-bottom: var(--sp-6); }
.landing .title { margin-bottom: var(--sp-3); }
.landing .heading { color: var(--efuse-volt); margin-bottom: var(--sp-5); }
.landing .caption { margin-top: var(--sp-7); }
.outcomes { margin-top: var(--sp-6); }
.outcomes__title { font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: calc((12px) * var(--fs-scale)); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: var(--sp-4); }

.part-divider { text-align: center; }
.part-divider .title { font-family: var(--font-display); font-size: var(--fs-display); }

/* ═══════════════════════════════════════════════════════════════════════
   CHAPTER MENU + SETTINGS (shell — adapted from v2 engine)
   ═══════════════════════════════════════════════════════════════════════ */
.overlay-panel { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,0.5); display: none; }
.overlay-panel.open { display: block; animation: fadeIn 220ms var(--ease-standard); }
.overlay-panel__inner {
  position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 92vw);
  background: var(--efuse-white); padding: var(--sp-6); overflow-y: auto;
  box-shadow: var(--shadow-lg); animation: slideIn 280ms var(--ease-standard);
}
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.overlay-panel__title { font-family: var(--font-feature); font-size: 24px; margin-bottom: var(--sp-5); }

.chapter-item { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; padding: 12px 8px; cursor: pointer; text-align: left; border-radius: var(--radius-sm); }
.chapter-item:hover { background: var(--efuse-cloud); }
.chapter-item.active { background: rgba(0,174,239,0.12); }
.chapter-item.active .chapter-item__label { color: var(--efuse-volt-aa-dark); font-weight: var(--weight-semibold); }
.chapter-item.active .chapter-item__num { color: var(--efuse-volt-aa-dark); }
.chapter-item.locked { opacity: 0.4; cursor: default; }
.chapter-item__num { font-family: var(--font-mono); font-size: 12px; color: var(--fg-subtle); min-width: 22px; }
.chapter-item__label { font-family: var(--font-primary); font-size: 14px; color: var(--fg); }
.nav-group__header { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; padding: 14px 8px 6px; }
.nav-group__label { font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle); }
.nav-group__icon { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-standard); }
.nav-group.open .nav-group__icon { transform: rotate(180deg); }
.nav-group__body { display: none; }
.nav-group.open .nav-group__body { display: block; }

.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.settings-row--stack { flex-direction: column; align-items: stretch; gap: 12px; }
.settings-row__label { display: block; font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 14px; }
.settings-row__desc { display: block; font-family: var(--font-primary); font-size: 12px; color: var(--fg-subtle); margin-top: 2px; }
.text-size-control { display: flex; gap: 8px; }
.text-size-btn { width: 40px; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--efuse-white); cursor: pointer; }
.text-size-btn.is-active { border-color: var(--efuse-volt-aa); background: rgba(0,174,239,0.12); }
.settings-toggle { width: 48px; height: 28px; border: none; background: none; cursor: pointer; }
.settings-toggle__track { display: block; width: 48px; height: 28px; border-radius: var(--radius-pill); background: var(--efuse-steel); position: relative; transition: background var(--dur-base) var(--ease-standard); }
.settings-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--efuse-white); transition: transform var(--dur-base) var(--ease-standard); box-shadow: var(--shadow-sm); }
.settings-toggle.is-on .settings-toggle__track { background: var(--efuse-volt-aa); }
.settings-toggle.is-on .settings-toggle__thumb { transform: translateX(20px); }

/* ── Text size scaling ── scales every --fs-* token (see efuse-design-system.css) ── */
/* Size 1 (default, active) is the smallest = baseline 1.0; steps only go up. */
body.text-size-2 { --fs-scale: 1.25; }
body.text-size-3 { --fs-scale: 1.5; }
body.text-size-4 { --fs-scale: 1.8; }
body.text-size-5 { --fs-scale: 2.1; }

/* ── Night mode (a11y override) ── */
body.night-mode { background: #0A1326; }
body.night-mode .screen-inner { color: rgba(255,255,255,0.92); }
body.night-mode .body, body.night-mode .list li, body.night-mode .title, body.night-mode .heading, body.night-mode .section-lead, body.night-mode .kc-question, body.night-mode .keypoint { color: rgba(255,255,255,0.92); }
body.night-mode .evidence, body.night-mode .reflect, body.night-mode .caveat { background: #0A1326; }
body.night-mode .evidence__label, body.night-mode .reflect__label, body.night-mode .reflect__prompt, body.night-mode .hifh__reflect-prompt { color: rgba(255,255,255,0.92); }
body.night-mode .reflect__input { background: #0A1326; border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.92); }
body.night-mode .reflect__input::placeholder { color: rgba(255,255,255,0.45); }
body.night-mode .reflection-entry { background: #0A1326; }
body.night-mode .reflection-entry__q, body.night-mode .reflection-entry__a { color: rgba(255,255,255,0.92); }
body.night-mode #reflectionsViewer .overlay-panel__inner { background: #0A1326; color: rgba(255,255,255,0.92); }

/* ── Night mode — contrast audit (round 2) ──
   Every component that carried a light-theme colour (dark text, or a light
   surface) needs an explicit override here, or it goes black-on-black /
   light-on-light once the page flips dark. Scoped to body.night-mode so the
   default light theme is untouched. */
/* Loose text that sits straight on the page background */
body.night-mode .eyebrow { color: rgba(255,255,255,0.72); }
body.night-mode .caption, body.night-mode .image-caption, body.night-mode .video-caption { color: rgba(255,255,255,0.6); }
body.night-mode .instructional { color: rgba(255,255,255,0.66); }
body.night-mode .caveat { color: rgba(255,255,255,0.82); }
body.night-mode .quote { border-left-color: rgba(255,255,255,0.4); }
body.night-mode .quote__text { color: rgba(255,255,255,0.92); }
body.night-mode .btn-secondary { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.4); }
/* "Moustaches love research" evidence panels */
body.night-mode .evidence__paper { color: rgba(255,255,255,0.9); }
body.night-mode .evidence__cite { color: rgba(255,255,255,0.55); }
body.night-mode .evidence__toggle { color: rgba(255,255,255,0.7); }
body.night-mode .evidence__link { color: #7DD8F7; }
body.night-mode .evidence__paper + .evidence__paper { border-top-color: rgba(255,255,255,0.12); }
/* the Mo logo glyphs are black artwork — invert so they show on dark */
body.night-mode .evidence__mo, body.night-mode .hifh__complete-mo { filter: invert(1) brightness(2); }
/* FAQ + any accordion */
body.night-mode .accordion { border-color: rgba(255,255,255,0.2); }
body.night-mode .accordion__item { border-color: rgba(255,255,255,0.12); }
body.night-mode .accordion__title { color: rgba(255,255,255,0.92); }
body.night-mode .accordion__toggle { color: rgba(255,255,255,0.7); }
/* click-to-reveal consequence bullets (literacy gap) */
body.night-mode .reveal-bullet { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.14); }
/* stacked reveal panel inner content + bricks reveal panel */
body.night-mode .bricks__reveal { background: #0A1326; }
body.night-mode .bricks__empty { color: rgba(255,255,255,0.6); }
/* ghost buttons (transcript / watch again) — were light-on-light in night mode */
body.night-mode .ghost-btn { background: #0A1326; color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.2); }
body.night-mode .ghost-btn:hover { background: var(--efuse-volt); color: var(--efuse-navy); border-color: var(--efuse-volt); }
body.night-mode .reflect__view { color: rgba(255,255,255,0.7); }
/* knowledge-check options + feedback */
body.night-mode .kc-option { background: #0A1326; color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.22); }
body.night-mode .kc-option.chosen-incorrect { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
body.night-mode .kc-feedback { background: #0A1326; border-left-color: rgba(255,255,255,0.3); }
body.night-mode .kc-feedback__body { color: rgba(255,255,255,0.9); }
body.night-mode .kc-feedback--incorrect { background: rgba(255,255,255,0.06); border-left-color: rgba(255,255,255,0.5); }
body.night-mode .kc-feedback--incorrect .kc-feedback__status { color: rgba(255,255,255,0.85); }
body.night-mode .kc-option__cross { color: rgba(255,255,255,0.9); }
/* backpack of bricks (screen 14) */
body.night-mode .bob__eyebrow { color: rgba(255,255,255,0.55); }
body.night-mode .bob__trait-title, body.night-mode .bob__count { color: rgba(255,255,255,0.92); }
body.night-mode .bob__trait-desc { color: rgba(255,255,255,0.7); }
body.night-mode .bob__brick { color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.14); }
body.night-mode .bob__brick:hover, body.night-mode .bob__brick.is-packed, body.night-mode .bob__brick.is-active { color: #fff; }
body.night-mode .bob__reset { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.22); }
/* case-example modal (1.6) */
body.night-mode .card-modal__panel { background: #0A1326; }
body.night-mode .card-modal__close { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }
/* changelog tags (dev only) */
body.night-mode .cl-entry { border-color: rgba(255,255,255,0.14); }
body.night-mode .cl-entry__tag--fix { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.72); }
body.night-mode .cl-entry__tag--polish { color: #4ade80; }
body.night-mode .cl-entry__tag--feat { color: #7DD8F7; }
/* audit follow-ups — purple/muted accents that stayed too dark on the dark page */
body.night-mode .kc-feedback--correct .kc-feedback__status { color: #7DD8F7; }
body.night-mode .reflections-empty, body.night-mode .reflection-entry__delete { color: rgba(255,255,255,0.7); }
body.night-mode ul.list li::before { background: #7DD8F7; }
body.night-mode ol.list li::before, body.night-mode .reflect ol li::before { color: #7DD8F7; }
body.night-mode .bob__count b { color: #7DD8F7; }
body.night-mode .reflect__saved { color: #7DD8F7; }
body.night-mode .mail-modal__k { color: rgba(255,255,255,0.6); }

/* ── Dev badge + popup + changelog ── */
#devBadge { display: none; position: fixed; bottom: 76px; left: 12px; z-index: 120; background: var(--efuse-volt-aa); color: #fff; font-family: var(--font-mono); font-size: 11px; padding: 4px 9px; border-radius: var(--radius-sm); }
#devPopup { position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%); z-index: 130; background: var(--efuse-navy); color: #fff; padding: 12px 20px; border-radius: var(--radius-pill); font-family: var(--font-primary); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity var(--dur-base); }
#devPopup.open { opacity: 1; }
#mo-flash { position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%); z-index: 130; background: var(--efuse-navy); color: #fff; padding: 12px 20px; border-radius: var(--radius-pill); font-family: var(--font-primary); font-size: 13px; transition: opacity var(--dur-base); }

.changelog-access { display: none; margin-top: var(--sp-5); }
.cl-entries { max-width: 680px; }
.cl-entry { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 12px; }
.cl-entry--current { border-color: var(--efuse-volt-aa); }
.cl-entry__meta { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-wrap: wrap; }
.cl-entry__version { font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.cl-entry__date { font-size: 12px; color: var(--fg-subtle); }
.cl-entry__tag { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: var(--weight-semibold); }
.cl-entry__tag--feat { background: rgba(0,174,239,0.18); color: var(--efuse-volt-aa-dark); }
.cl-entry__tag--fix { background: rgba(0,0,0,0.06); color: var(--fg-muted); }
.cl-entry__tag--polish { background: rgba(0,110,65,0.12); color: #006E41; }
.cl-entry__tag--current { background: var(--efuse-volt-aa); color: #fff; }
.cl-entry__changes { display: none; margin-top: 12px; padding-left: 20px; }
.cl-entry--open .cl-entry__changes { display: block; }
.cl-entry__changes li { font-size: 14px; line-height: 1.5; margin-bottom: 6px; }
.cl-current-version { font-size: 14px; color: var(--fg-muted); margin-bottom: var(--sp-5); }

/* ── reduce-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── visible keyboard focus (a11y) ── */
.btn-icon:focus-visible, .nav-btn:focus-visible, .ghost-btn:focus-visible,
.brick:focus-visible, .deck-card:focus-visible, .tutorial-step:focus-visible,
.kc-option:focus-visible, .evidence__row:focus-visible, .accordion__summary:focus-visible,
.chapter-item:focus-visible, .reflect__save:focus-visible, .reflect__view:focus-visible,
.reflect__toggle:focus-visible, .reveal-item:focus-visible, .fom-tag-btn:focus-visible,
.reflect__input:focus-visible, .video-poster:focus-visible, .text-size-btn:focus-visible,
.settings-toggle:focus-visible {
  outline: 3px solid var(--efuse-volt-aa-dark);
  outline-offset: 2px;
}
.resource-item__label:focus-within { outline: 3px solid var(--efuse-volt-aa-dark); outline-offset: 2px; }

/* ── current section in header (wayfinding) ── */
.progress-section {
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: 12px; letter-spacing: 0.04em; color: rgba(255,255,255,0.72);
  max-width: 210px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* ── completed-section ticks in the contents menu ── */
.chapter-item.done .chapter-item__num { color: var(--efuse-volt-aa-dark); }
.chapter-item.done::after { content: "\2713"; margin-left: auto; color: var(--efuse-volt-aa-dark); font-size: 13px; font-weight: 700; flex-shrink: 0; }
/* ── shared overlay-panel footer (contents menu + reflections viewer) ── */
.overlay-panel__footer { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 24px; }

/* ── Contact / bug-report modal (mailto fallback) ──
   mailto silently does nothing when no mail client is registered, so this
   modal always shows the To / Subject / Message, with Copy + Open-in-app. */
.mail-modal { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); padding: 24px; }
.mail-modal.open { display: flex; animation: fadeIn 200ms var(--ease-standard); }
.mail-modal__inner { position: relative; background: var(--efuse-white); border-radius: var(--radius-lg); max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 40px 40px 32px; animation: screenIn 240ms var(--ease-standard); }
.mail-modal__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--efuse-cloud); border: none; cursor: pointer; color: var(--fg-muted); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.mail-modal__title { font-family: var(--font-feature); font-size: 26px; margin-bottom: 8px; color: var(--fg); }
.mail-modal__lead { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: 15px; line-height: 1.55; color: var(--fg-muted); margin-bottom: 22px; }
.mail-modal__field { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.mail-modal__k { font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle); padding-top: 2px; }
.mail-modal__v { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: 14px; line-height: 1.5; color: var(--fg); word-break: break-word; }
pre.mail-modal__v { white-space: pre-wrap; margin: 0; }
.mail-modal__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.mail-modal__note { font-family: var(--font-primary); font-size: 13px; font-weight: var(--weight-semibold); color: var(--efuse-volt-aa-dark); margin-top: 12px; min-height: 18px; }
@media (max-width: 520px) { .mail-modal__inner { padding: 32px 22px 24px; } .mail-modal__field { grid-template-columns: 1fr; gap: 4px; } }
body.night-mode .mail-modal__inner { background: #0A1326; }
body.night-mode .mail-modal__title { color: rgba(255,255,255,0.95); }
body.night-mode .mail-modal__lead { color: rgba(255,255,255,0.7); }
body.night-mode .mail-modal__v { color: rgba(255,255,255,0.9); }
body.night-mode .mail-modal__field { border-top-color: rgba(255,255,255,0.12); }
body.night-mode .mail-modal__close { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }
body.night-mode .mail-modal__note { color: #7DD8F7; }

/* ── responsive: tablet / phone ── */
@media (max-width: 760px) {
  .progress-section, .progress-bar { display: none; }
}
@media (max-width: 600px) {
  .module-header { padding: 0 var(--sp-4); gap: var(--sp-3); }
  .module-header__title { display: none; }
  .module-header__right { gap: 8px; }
  .btn-icon { width: 40px; height: 40px; }
  .screen-inner { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .reveal-item__img { height: 180px; }
  .reveal-item__title { font-size: calc(20px * var(--fs-scale)); padding: 16px 18px; }
  .module-footer { padding: 0 var(--sp-4); }
  .nav-btn { padding: 12px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE POLISH (phone widths) — audit follow-ups
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Backpack activity: on a phone the bricks no longer sit miles below the bag.
     The trait + a compact backpack pin to the top while the bricks scroll
     beneath, so tapping a brick visibly fills the pack and updates the text. */
  .bob__stage { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .bob__left {
    position: sticky; top: calc(var(--header-h) + 6px); z-index: 6;
    flex-direction: row; align-items: center; gap: 14px;
    background: var(--efuse-white); padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
  }
  .bob__trait { min-height: 0; flex: 1; padding: 12px 14px; }
  .bob__trait-title { font-size: calc(20px * var(--fs-scale)); margin-bottom: 6px; }
  .bob__trait-desc { font-size: calc(13.5px * var(--fs-scale)); max-width: none; }
  .bob__eyebrow { margin-bottom: 8px; }
  .bob__pack { flex: 0 0 112px; max-width: 112px; margin: 0; }
  .bob__meta { margin-top: var(--sp-4); }
  body.night-mode .bob__left { background: #0A1326; border-color: rgba(255,255,255,0.14); }
  /* roomier hit area for the otherwise-small skip text */
  .skip-video { padding: 10px 6px; }
}
@media (max-width: 600px) {
  /* The stat figure + fixed 48px side padding overflowed narrow screens. */
  .stat { padding: 32px 24px; gap: 22px; }
  .stat__figure { font-size: calc(clamp(58px, 16vw, 96px) * var(--fs-scale)); }
  /* heavy card paddings squeeze reading width on a phone */
  .reflect { padding: 22px 20px; }
  .evidence__body { padding: 0 18px 18px 18px; }
  .keypoint-wrap { padding-left: 14px; }
}

/* ===== Final assessment + certificate (e-Fuse) =====
   Styles for the markup generated by efuse-module.js (A5):
     buildQuiz()       -> .qblock(.active), .q-num, .q-text, .q-opts,
                          .q-opt > .q-letter, .q-feedback (#qfb-N), #qopts-N
     quizAnswer()      -> .q-opt.correct / .wrong, .q-feedback.correct-fb / .wrong-fb
     showQuizResult()  -> .quiz-result-card > .result-emoji, h3, p, .btn-nav
     retryQuiz()       -> re-renders buildQuiz markup (.btn-nav data-action="retryQuiz")
   Host hooks documented in the JS contract (host markup, not JS-generated):
     #quiz-host, #quiz-result, #quizBackBtn (assessment screen)
     #learnerName  (sign-off input; data-action="generateCert" submit -> .btn-nav)
     #certCanvas   (certificate canvas; data-action="downloadCert" -> .btn-nav)
   Adapted from the proven m18 reference; mapped to design-system tokens.
   ======================================================================= */

/* --- Assessment question block --- */
.qblock {
  background: var(--efuse-white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
  display: none;
}
.qblock.active { display: block; animation: screenIn 300ms var(--ease-standard); }

.q-num {
  font-family: var(--font-mono); font-weight: var(--weight-semibold);
  font-size: calc((11px) * var(--fs-scale)); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--efuse-volt-aa-dark); margin-bottom: 8px;
}
.q-text {
  font-family: var(--font-primary); font-weight: var(--weight-bold);
  font-size: calc((17px) * var(--fs-scale)); line-height: 1.45;
  color: var(--fg); margin-bottom: 18px;
}
.q-opts { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }

.q-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--efuse-cloud); border: 2px solid transparent;
  border-radius: var(--radius-md); padding: 12px 16px; cursor: pointer;
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: calc((15px) * var(--fs-scale)); line-height: 1.4;
  color: var(--fg); text-align: left;
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.q-opt:hover:not(:disabled) { border-color: var(--efuse-volt-aa); }
.q-opt:disabled { cursor: default; }

.q-letter {
  flex-shrink: 0; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--efuse-steel); color: var(--efuse-navy);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary); font-weight: var(--weight-bold);
  font-size: calc((12px) * var(--fs-scale));
}
.q-opt.correct { border-color: var(--efuse-correct); background: rgba(26,122,74,0.08); }
.q-opt.correct .q-letter { background: var(--efuse-correct); color: var(--efuse-white); }
.q-opt.wrong { border-color: var(--efuse-wrong); background: rgba(185,28,28,0.07); }
.q-opt.wrong .q-letter { background: var(--efuse-wrong); color: var(--efuse-white); }

.q-feedback {
  margin-top: 12px; padding: 12px 16px; border-radius: var(--radius-md);
  max-width: 640px;
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: calc((14px) * var(--fs-scale)); line-height: 1.55;
}
.q-feedback.correct-fb { background: rgba(26,122,74,0.08); color: var(--efuse-correct); border-left: 4px solid var(--efuse-correct); }
.q-feedback.wrong-fb { background: rgba(185,28,28,0.07); color: var(--efuse-wrong); border-left: 4px solid var(--efuse-wrong); }

/* --- Result card (pass / fail) --- */
.quiz-result-card {
  background: var(--efuse-white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px; text-align: center;
  animation: screenIn 300ms var(--ease-standard);
}
.result-emoji { font-size: 3rem; line-height: 1; margin-bottom: 12px; }
.quiz-result-card h3 {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: calc((30px) * var(--fs-scale)); letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--fg); margin-bottom: 10px;
}
.quiz-result-card p {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: var(--fs-body); line-height: 1.55; color: var(--fg-muted);
  margin-bottom: 20px;
}

/* --- Result-card / sign-off / cert action button (.btn-nav) --- */
.btn-nav {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; border-radius: var(--radius-pill);
  background: var(--efuse-volt); color: var(--efuse-navy);
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: 14px; letter-spacing: 0.04em; padding: 13px 28px;
  transition: transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.btn-nav:hover { transform: translateY(-1px); }
.btn-nav.secondary { background: transparent; color: var(--fg); border: 2px solid var(--border); }
.btn-nav.secondary:hover { border-color: var(--efuse-navy); transform: none; }

/* --- Sign-off name entry (#learnerName) --- */
#learnerName {
  width: 100%; max-width: 480px;
  padding: 12px 16px; margin-bottom: 12px;
  border: 2px solid var(--efuse-steel); border-radius: var(--radius-md);
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: var(--fs-body); color: var(--fg);
  background: var(--efuse-white);
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
#learnerName:focus {
  outline: none; border-color: var(--efuse-volt);
  box-shadow: 0 0 0 3px rgba(0,174,239,0.15);
}
#learnerName::placeholder { color: var(--fg-subtle); }

/* --- Certificate canvas + download --- */
.cert-wrap { max-width: 720px; margin: 0 auto; text-align: center; }
#certCanvas {
  display: block; width: 100%; height: auto; margin: 20px auto;
  border-radius: var(--radius-md); cursor: default;
  box-shadow: 0 8px 40px rgba(13,34,79,0.35);
}

/* --- Night-mode variants --- */
body.night-mode .qblock,
body.night-mode .quiz-result-card { background: #0A1326; border-color: rgba(255,255,255,0.14); }
body.night-mode .q-text,
body.night-mode .quiz-result-card h3 { color: rgba(255,255,255,0.92); }
body.night-mode .quiz-result-card p { color: rgba(255,255,255,0.7); }
body.night-mode .q-opt { background: #0A1326; color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.22); }
body.night-mode .q-opt.correct { background: rgba(26,122,74,0.18); border-color: var(--efuse-correct); }
body.night-mode .q-opt.wrong { background: rgba(185,28,28,0.18); border-color: var(--efuse-wrong); }
body.night-mode .q-num { color: #7DD8F7; }
body.night-mode .q-feedback.correct-fb { background: rgba(26,122,74,0.18); color: #6fd99e; }
body.night-mode .q-feedback.wrong-fb { background: rgba(185,28,28,0.18); color: #f0a0a0; }
body.night-mode #learnerName { background: #0A1326; border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.92); }
body.night-mode #learnerName::placeholder { color: rgba(255,255,255,0.45); }
body.night-mode .btn-nav.secondary { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.25); }
body.night-mode .btn-nav.secondary:hover { border-color: rgba(255,255,255,0.6); }