/* MiM GP Part 2 — module styles
   Shared component layer is in mim-gp-shared.css (imported second).
   Only Part 2-specific styles live here.
   ─────────────────────────────────────────────────────────────────── */
@import url('./mim-design-system.css');
@import url('../../../../_components/mim-gp-shared.css');


/* ══ LEGACY TOKEN ALIASES ════════════════════════════════════════════════
   Part 2 was authored with --s* spacing and --purple-* colour names.
   These map them to the shared design-system tokens so no HTML needs
   changing when the design system is updated.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --s2:  var(--sp-2);   /* 8px  */
  --s3:  var(--sp-3);   /* 12px */
  --s4:  var(--sp-4);   /* 16px */
  --s5:  var(--sp-5);   /* 24px */
  --s6:  var(--sp-6);   /* 32px */
  --s8:  var(--sp-8);   /* 64px */
  --s10: var(--sp-10);  /* 128px */
  --s12: 96px;          /* bottom breathing room on content screens */

  --purple-light: rgba(183, 163, 252, 0.10);
  --purple-mid:   rgba(183, 163, 252, 0.30);
  --purple-dark:  var(--mim-purple-aa-dark);   /* #5D3CC9 — AA-accessible on white */
  --text-muted:   var(--fg-muted);             /* #4A4A4A */
  --text-faint:   var(--fg-subtle);            /* #7A7A7A */
  --border-mid:   rgba(0, 0, 0, 0.25);
  --black:        var(--mim-black);
}


/* ══ CONTENT LAYOUT ═══════════════════════════════════════════════════ */

.content-wrap { flex: 1; max-width: 720px; width: 100%; margin: 0 auto; padding: var(--s10) var(--s6) var(--s12); }
.content-wrap--wide { max-width: 900px; }


/* ══ FULL-BLEED CINEMATIC HERO (screen 1) ════════════════════════════ */

.screen--hero {
  position: relative;
  height: calc(100vh - var(--header-h) - var(--footer-h));
  overflow: hidden; background: var(--mim-black); color: var(--mim-white);
}
.screen--hero.active { display: block; animation: none; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(0.9) contrast(1.02) brightness(0.88); }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 30%, rgba(0,0,0,0.30) 62%, rgba(0,0,0,0.12) 100%); }
.hero__tex { position: absolute; inset: 0; background: var(--tex-photocopy-black) center/cover; opacity: 0.45; mix-blend-mode: multiply; }
/* 2. Hero clipping on short viewports. The copy was bottom-anchored with
   `align-items: flex-end`; when it is taller than the hero box the overflow goes off
   the TOP, under the header, and flexbox start-edge overflow is NOT scrollable (so
   the `overflow:auto` below could never reach it). An auto top margin gives the same
   bottom-anchored look when there is room, but collapses to 0 on overflow so the
   content starts at the top and can be scrolled. */
.hero__inner { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; overflow: auto; }
.hero__inner-wrap { width: 100%; max-width: 1240px; margin: auto auto 0; padding: 56px 56px 52px; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 760px; }
.hx-kicker { font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mim-purple); display: inline-block; }
.hx-title { font-family: var(--font-feature); font-weight: var(--weight-regular); font-size: clamp(44px, 5.6vw, 84px); line-height: 1.0; letter-spacing: -0.028em; color: #fff; margin: 0; text-wrap: balance; }
.hx-sub { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: clamp(18px, 1.9vw, 23px); line-height: 1.32; color: rgba(255,255,255,0.86); letter-spacing: -0.01em; margin: 0; max-width: 44ch; }
.hx-bodies { display: flex; flex-direction: column; gap: 11px; }
.hx-body { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.62); margin: 0; max-width: 52ch; }
@media (prefers-reduced-motion: no-preference) {
  .screen--hero [data-rise] { opacity: 0; transform: translateY(16px); animation: hxRise 0.66s var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
  .screen--hero .hero__media img { animation: hxImg 1.2s var(--ease-out) both; }
}
@keyframes hxRise { to { opacity: 1; transform: none; } }
@keyframes hxImg { from { transform: scale(1.06); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 600px) { .hero__inner-wrap { padding: 60px 22px 36px; } .hx-title { font-size: clamp(36px, 12vw, 54px); } }


/* ══ BANNER SCREEN (full-bleed image) ════════════════════════════════ */

.banner-screen { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--mim-black); }
.banner-screen__img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; max-height: calc(100vh - var(--header-h) - var(--footer-h)); }


/* ══ BASE ELEMENT TYPOGRAPHY (Part 2 uses raw elements, not .body/.title classes) ══ */

h2 { font-family: var(--font-feature); font-size: clamp(22px,3vw,36px); font-weight: var(--weight-regular); color: var(--mim-black); line-height: var(--lh-snug); letter-spacing: var(--tr-display); margin-bottom: var(--s6); }
h3 { font-family: var(--font-primary); font-size: var(--fs-h4); font-weight: var(--weight-semibold); color: var(--mim-black); margin-bottom: var(--s4); letter-spacing: 0; line-height: var(--lh-snug); }
p { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg); }
p + p { margin-top: var(--s4); }
.eyebrow { font-family: var(--font-primary); font-size: var(--fs-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--mim-purple-aa-dark, #5D3CC9); margin-bottom: var(--s3); }
.divider { border: none; border-top: 1px solid var(--border); margin: var(--s6) 0; }
.pull-quote { font-family: var(--font-feature); font-style: italic; font-size: clamp(17px,2.2vw,22px); color: var(--mim-black); line-height: var(--lh-normal); border-left: 2px solid var(--mim-purple); padding: var(--s5) var(--s6); margin: var(--s8) 0; background: var(--purple-light); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.pull-quote cite { display: block; font-size: var(--fs-small); font-style: normal; color: var(--fg-muted); margin-top: var(--s3); }

a { color: var(--purple-dark); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--mim-purple); }


/* ══ CARD ════════════════════════════════════════════════════════════ */

.card { background: var(--mim-white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--s5) var(--s6); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card + .card { margin-top: var(--s4); }
.card--purple { background: var(--purple-light); border-color: var(--purple-mid); }
.completion-note { display: flex; align-items: flex-start; gap: 14px; margin: var(--s8) auto 0; max-width: var(--measure); background: #B7A3FC; border: 1px solid #B7A3FC; border-radius: var(--radius-md); padding: 20px 22px; text-align: left; }
.completion-note__check { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #1A1A1A; 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: 600; font-size: 16px; line-height: 1.5; color: #1A1A1A; margin: 0; }
body.night-mode .completion-note { background: #B7A3FC; }
body.night-mode .completion-note__text { color: #1A1A1A; }


/* ══ INFOGRAPHIC ════════════════════════════════════════════════════ */

.infographic-wrap { margin: var(--s8) 0; text-align: center; }
.infographic-wrap img { max-width: 100%; height: auto; border-radius: var(--radius-md); cursor: zoom-in; transition: opacity var(--dur-fast) var(--ease-standard); }
.infographic-wrap img:hover { opacity: 0.88; }
.infographic-wrap::after { content: 'Click to zoom'; display: block; font-size: 12px; color: var(--fg-subtle); text-align: center; margin-top: 6px; }


/* ══ FIND OUT MORE (expandable boxes) ════════════════════════════════ */

.find-out-more { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin: var(--s5) 0; }
.find-out-more__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); background: var(--bg-muted); border: none; cursor: pointer; font-family: var(--font-primary); font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--fg-muted); text-align: left; transition: background var(--dur-base) var(--ease-standard); }
.find-out-more__trigger:hover { background: var(--purple-light); color: var(--purple-dark); }
.find-out-more__trigger .fom-icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--mim-purple); transition: transform var(--dur-base) var(--ease-standard); }
.find-out-more.open .find-out-more__trigger .fom-icon { transform: rotate(180deg); }
.find-out-more__panel { max-height: 0; overflow: hidden; transition: max-height 450ms var(--ease-standard); }
.find-out-more.open .find-out-more__panel { max-height: 1200px; }
.find-out-more__inner { padding: var(--s5); border-top: 1px solid var(--border); font-size: var(--fs-small); font-weight: var(--weight-light); color: var(--fg-muted); line-height: var(--lh-relaxed); }
.find-out-more__inner p { font-size: var(--fs-small); }
.find-out-more__inner p + p { margin-top: var(--s3); }


/* ══ REFLECTION BOX (Part 2 dark-bg variant — different from shared .reflect) ══ */

.reflection-box { margin: var(--s8) 0; background: var(--mim-black) var(--tex-photocopy-black) center / cover; border-radius: var(--radius-lg); padding: var(--s5) var(--s6); color: rgba(255,255,255,0.9); }
.reflection-toggle { display: inline-flex; align-items: center; gap: var(--s2); background: var(--mim-white); border: none; border-radius: var(--radius-pill); padding: 10px 20px; font-family: var(--font-primary); font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mim-black); cursor: pointer; transition: opacity var(--dur-base) var(--ease-standard); }
.reflection-toggle:hover { opacity: 0.88; }
.reflection-panel { display: none; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,0.12); }
.reflection-panel.open { display: block; }
.reflection-panel textarea { width: 100%; min-height: 100px; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md); padding: var(--s3) var(--s4); font-family: var(--font-primary); font-weight: var(--weight-light); font-size: var(--fs-small); color: var(--fg); background: var(--mim-white); resize: vertical; transition: border-color var(--dur-base) var(--ease-standard); line-height: var(--lh-relaxed); }
.reflection-panel textarea:focus { outline: 2px solid var(--mim-purple); outline-offset: 2px; border-color: transparent; }
.reflection-panel__actions { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s3); gap: var(--s3); }
.reflection-panel__save { display: inline-flex; align-items: center; gap: var(--s2); background: var(--mim-purple); border: none; border-radius: var(--radius-pill); padding: 8px 18px; font-family: var(--font-primary); font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mim-black); cursor: pointer; transition: filter var(--dur-base) var(--ease-standard); }
.reflection-panel__save:hover { filter: brightness(0.92); }
.reflection-panel__saved { font-size: 12px; color: var(--mim-purple); display: none; }
.reflection-panel__saved.visible { display: inline; }


/* ══ REFLECTIONS VIEWER MODAL (Part 2 variant) ═══════════════════════ */

.reflections-viewer { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.5); display: none; align-items: flex-end; justify-content: center; }
.reflections-viewer.open { display: flex; }
.reflections-viewer__panel { background: var(--mim-white); border-radius: var(--radius-lg) var(--radius-lg) 0 0; width: 100%; max-width: 720px; max-height: 70vh; overflow-y: auto; padding: var(--s6); }
.reflections-viewer__title { font-size: var(--fs-body-lg); font-weight: var(--weight-semibold); color: var(--mim-black); margin-bottom: var(--s5); display: flex; align-items: center; justify-content: space-between; }
.reflections-viewer__close { background: none; border: none; cursor: pointer; color: var(--fg-subtle); font-size: 22px; line-height: 1; }
.reflection-entry { border-left: 2px solid var(--purple-mid); padding: var(--s4) var(--s5); margin-bottom: var(--s5); background: var(--bg-muted); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.reflection-entry__q { font-size: 13px; font-style: italic; color: var(--fg-muted); margin-bottom: var(--s2); }
.reflection-entry__a { font-size: var(--fs-small); color: var(--fg); line-height: var(--lh-normal); }
.reflection-entry__delete { background: none; border: none; font-size: 11px; color: #cc4444; cursor: pointer; margin-top: var(--s2); padding: 0; text-decoration: underline; }


/* ══ REVEAL LIST ═════════════════════════════════════════════════════ */

.reveal-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); margin: var(--s6) 0; }
.reveal-item { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s4) var(--s5); background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius-md); opacity: 0; transform: translateX(-12px); transition: opacity 350ms var(--ease-standard), transform 350ms var(--ease-standard); pointer-events: none; }
.reveal-item.visible { opacity: 1; transform: translateX(0); pointer-events: auto; }
.reveal-item__text { font-size: var(--fs-body); font-weight: var(--weight-light); color: var(--fg); line-height: var(--lh-relaxed); }
.reveal-item__text strong { font-weight: var(--weight-semibold); color: var(--mim-black); }

/* Click-to-reveal CARDS: the box is present from the start (black photocopy
   texture, white text); a "Click to reveal" hint sits on top until the user
   clicks, then the text shows in place — no appearing over empty whitespace. */
.reveal-list--clickeach .reveal-item {
  opacity: 1; transform: none; pointer-events: auto; cursor: pointer;
  position: relative; min-height: 60px;
  background: #000 url('./assets/mim/texture-photocopy-black.png') center / cover no-repeat;
  border-color: #000; color: #fff;
  transition: box-shadow 180ms var(--ease-standard);
}
.reveal-list--clickeach .reveal-item:hover,
.reveal-list--clickeach .reveal-item:focus-visible { box-shadow: inset 0 0 0 2px var(--mim-purple); outline: none; }
.reveal-list--clickeach .reveal-item__text { color: #fff; visibility: hidden; }
.reveal-list--clickeach .reveal-item__text em,
.reveal-list--clickeach .reveal-item__text strong { color: #fff; }
.reveal-list--clickeach .reveal-item.revealed .reveal-item__text { visibility: visible; }
.reveal-list--clickeach .reveal-item__hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-primary); font-size: 11px; font-weight: var(--weight-semibold);
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  pointer-events: none;
}
.reveal-list--clickeach .reveal-item.revealed .reveal-item__hint { display: none; }

/* Slide 6 — purple eyebrow/text reads poorly on white; force black. */
#screen-5 .eyebrow { color: var(--mim-black); }

/* Textured flipcards (slides 9 & 19): black photocopy texture on the front,
   purple photocopy texture on the reverse with all reverse text in black. */
.flipcard-grid--male .flipcard__front,
.flipcard-grid--textured .flipcard__front {
  background: #000 url('./assets/mim/texture-photocopy-black.png') center / cover no-repeat;
  border-color: #000;
}
.flipcard-grid--male .flipcard__back,
.flipcard-grid--textured .flipcard__back {
  background: var(--mim-purple) url('./assets/mim/MIM_Photocopy-Texture-Purple.jpg') center / cover no-repeat;
  border-color: var(--mim-purple);
  color: #000;
}
.flipcard-grid--male .flipcard__back .part-label,
.flipcard-grid--male .flipcard__back p,
.flipcard-grid--textured .flipcard__back p,
.flipcard-grid--textured .flipcard__back em { color: #000; }
/* Slide 9 fronts carry numbers/hints (not the white MALE letters) — force white
   so they read against the dark texture. */
.flipcard-grid--textured .flipcard__front span { color: #fff !important; }

/* Bricks (slide 14): taller cards so the longer two-sided text fits without clipping;
   centre the lone 5th card instead of leaving it left-aligned. */
.flipcard-grid--bricks .flipcard { min-height: 340px; }
.flipcard-grid--bricks .flipcard__back { padding: var(--s4); }
.flipcard-grid--bricks .flipcard__back p { font-size: 14px; line-height: 1.45; }
.flipcard-grid--bricks .flipcard--center { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: calc((100% - var(--sp-4)) / 2); }
@media (max-width: 600px) { .flipcard-grid--bricks .flipcard--center { max-width: 100%; } }

/* Purple quotation mark in the top-right of every lived-experience quote screen. */
.image-quote::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  top: clamp(18px, 3vw, 32px); right: clamp(20px, 3.5vw, 38px);
  width: clamp(56px, 8vw, 104px); aspect-ratio: 272 / 150;
  background: url('./assets/images/MIM_Quotation-Marks.png') center / contain no-repeat;
}

/* ══ COMBINED QUOTE CARD — portrait + quote composed as one graphic ══ */
.quote-card { display: flex; align-items: stretch; margin: var(--s8) 0; background: #000 url('./assets/mim/texture-photocopy-black.png') center / cover no-repeat; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
.quote-card__photo { width: 38%; max-width: 300px; min-height: 260px; object-fit: cover; object-position: center top; flex-shrink: 0; display: block; }
.quote-card__body { position: relative; flex: 1; padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.quote-card__text { font-family: var(--font-feature); font-style: italic; font-size: calc(clamp(18px, 2.2vw, 26px) * var(--fs-scale)); line-height: 1.32; color: #fff; margin: 0; }
.quote-card__cite { display: block; font-family: var(--font-primary); font-style: normal; font-weight: var(--weight-semibold); font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--mim-purple); margin-top: var(--s4); }
@media (max-width: 640px) {
  .quote-card { flex-direction: column; }
  .quote-card__photo { width: 100%; max-width: none; height: 240px; min-height: 0; }
}

@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(183,163,252,0.7); }
  50%       { box-shadow: 0 0 0 10px rgba(183,163,252,0); }
}


/* ══ VIDEO SCREEN (Part 2 layout) ════════════════════════════════════ */

.video-screen { flex: 1; display: flex; flex-direction: column; background: var(--bg); }
.video-screen__intro { padding: var(--s8) var(--s6) var(--s5); max-width: 720px; margin: 0 auto; width: 100%; }
.video-player-wrap { position: relative; aspect-ratio: 16/9; background: var(--mim-black); border-radius: var(--radius-lg); overflow: hidden; }
.video-player-wrap iframe, .video-player-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.video-gate { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); background: rgba(0,0,0,0.8); opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease-standard); }
.video-gate.open { opacity: 1; pointer-events: auto; }
.video-gate__label { font-family: var(--font-feature); font-size: 20px; font-weight: var(--weight-regular); color: var(--mim-white); text-align: center; max-width: 400px; line-height: var(--lh-snug); }


/* ══ TOOLKIT HEADER ═════════════════════════════════════════════════ */

.toolkit-header { background: var(--mim-black) var(--tex-photocopy-black) center / cover; padding: var(--s10) var(--s6); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 220px; }
.toolkit-header__title { font-family: var(--font-feature); font-size: clamp(44px,7vw,72px); font-weight: var(--weight-regular); color: var(--mim-white); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }


/* ══ QUIZ ════════════════════════════════════════════════════════════ */

.quiz-question { font-family: var(--font-feature); font-size: calc(clamp(17px,2.2vw,22px) * var(--fs-scale)); font-weight: var(--weight-regular); color: var(--mim-black); line-height: var(--lh-normal); margin-bottom: var(--s6); }
.quiz-options { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); }
.quiz-option { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4) var(--s5); background: var(--bg-muted); border: 2px solid var(--border); border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-primary); font-weight: var(--weight-light); font-size: var(--fs-body); color: var(--fg); text-align: left; line-height: var(--lh-normal); transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); -webkit-tap-highlight-color: transparent; }
.quiz-option:hover:not(:disabled) { border-color: var(--mim-purple); background: var(--purple-light); }
.quiz-option:disabled { cursor: default; }
/* Quiz answer states — purple + tick, matching Part 1's .kc-option and Part 3.
   Was green/red here, which made "correct" mean two different colours inside
   the same course. Unified 2026-07-17. */
.quiz-option.correct   { border: 2.5px solid var(--mim-purple-aa); background: rgba(183,163,252,0.10); }
.quiz-option.correct::after  { content: ''; margin-left: auto; flex-shrink: 0; width: 22px; height: 22px; background: url('./assets/mim/mark-tick.png') center / contain no-repeat; }
.quiz-option.incorrect { border: 2.5px solid var(--fg); background: rgba(0,0,0,0.05); color: var(--fg-muted); text-decoration: line-through; }
.quiz-option.incorrect::after { content: '\00D7'; margin-left: auto; padding-left: var(--s3); font-size: 24px; line-height: 1; font-weight: 400; color: var(--fg); text-decoration: none; flex-shrink: 0; }
/* The right answer, revealed after a wrong choice. Thinner stroke than
   .correct, so "this was the answer" reads differently from "you got it
   right" — the same distinction Part 1 draws between chosen- and
   revealed-correct. */
.quiz-option.revealed-correct { border: 1.5px solid var(--mim-purple-aa); background: rgba(183,163,252,0.10); }
.quiz-option.revealed-correct::after { content: ''; margin-left: auto; flex-shrink: 0; width: 22px; height: 22px; background: url('./assets/mim/mark-tick.png') center / contain no-repeat; }
.quiz-feedback { padding: var(--s5); border-radius: var(--radius-md); font-size: var(--fs-small); font-weight: var(--weight-light); line-height: var(--lh-relaxed); margin-top: var(--s4); border-left: 2px solid transparent; }
.quiz-feedback--correct   { background: #f0faf5; border-left-color: #22a05a; color: #1a5232; }
.quiz-feedback--incorrect { background: #fdf2f2; border-left-color: #cc4444; color: #7a2a2a; }


/* ══ SUMMARY SCREEN ═════════════════════════════════════════════════ */

.summary-screen__logo { height: 56px; width: auto; margin-bottom: var(--s6); }
.summary-screen__title { font-family: var(--font-feature); font-size: clamp(26px,3vw,32px); font-weight: var(--weight-regular); color: var(--mim-black); margin-bottom: var(--s4); letter-spacing: var(--tr-display); }
.summary-tick { flex-shrink: 0; width: 40px; height: 40px; object-fit: contain; margin-top: 2px; }
.summary-items { list-style: none; display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.summary-card { display: flex; align-items: flex-start; gap: var(--s4); }


/* ══ VIEW REFLECTIONS BUTTON ════════════════════════════════════════ */

.view-reflections-btn { display: inline-flex; align-items: center; gap: var(--s2); background: none; border: 1px solid rgba(0,0,0,0.2); border-radius: var(--radius-pill); padding: 8px 16px; font-family: var(--font-primary); font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); cursor: pointer; margin-top: var(--s4); transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
body.night-mode .view-reflections-btn { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); }
.view-reflections-btn:hover { border-color: var(--mim-purple); color: var(--mim-purple); }


/* ══ MISC SCREEN RULES ══════════════════════════════════════════════ */

.screen[data-type="quote"] .banner-screen { background: var(--mim-black) var(--tex-photocopy-black) center / cover; }
.content-wrap img:not([data-nozoom]) { cursor: zoom-in; }


/* ══ TUTORIAL (nav tutorial screen) ════════════════════════════════ */

.nav-tutorial { flex: 1; max-width: 720px; width: 100%; margin: 0 auto; padding: var(--s10) var(--s6) var(--s12); }
.tutorial-step { display: flex; align-items: flex-start; gap: var(--s5); padding: var(--s5) var(--s6); background: var(--bg-muted); border: 2px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--s4); cursor: pointer; transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); user-select: none; width: 100%; text-align: left; }
.tutorial-step:hover { border-color: var(--purple-mid); background: var(--purple-light); }
.tutorial-step__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--purple-light); border: 1px solid var(--purple-mid); display: flex; align-items: center; justify-content: center; }
.tutorial-step__icon svg { width: 22px; height: 22px; color: var(--purple-dark); }
.tutorial-step__body { flex: 1; }
.tutorial-step__body h3 { font-size: var(--fs-body); margin-bottom: var(--s2); }
.tutorial-step__body p  { font-size: var(--fs-small); font-weight: var(--weight-light); color: var(--fg-muted); }


/* ══ FAQ ════════════════════════════════════════════════════════════ */

.faq-screen { flex: 1; max-width: 720px; width: 100%; margin: 0 auto; padding: var(--s10) var(--s6) var(--s12); }
.faq-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s6); }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); background: var(--bg-muted); border: none; cursor: pointer; font-family: var(--font-primary); font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--fg); text-align: left; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.faq-trigger:hover { background: var(--purple-light); color: var(--purple-dark); }
.faq-icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--mim-purple); transition: transform var(--dur-base) var(--ease-standard); }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height 400ms var(--ease-standard); }
.faq-item.open .faq-body { max-height: 800px; }
.faq-body__inner { padding: var(--s4) var(--s5); border-top: 1px solid var(--border); font-size: var(--fs-small); font-weight: var(--weight-light); color: var(--fg-muted); line-height: var(--lh-relaxed); }
.faq-body__inner p + p { margin-top: var(--s3); }
.faq-title-wrap { position: relative; display: flex; align-items: flex-start; gap: var(--s4); }
.faq-title-wrap h2 { flex: 1; }

/* Accordion (FAQ) — aligned to GP Module 1 */
.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; }
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); }
.questionmark-accent { flex-shrink: 0; width: 70px; height: auto; opacity: 0.45; margin-top: 4px; pointer-events: none; }


/* ══ TRANSCRIPT ═════════════════════════════════════════════════════ */

.transcript-toggle { background: none; border: 1px solid var(--border-mid); border-radius: var(--radius-pill); padding: 7px 16px; font-family: var(--font-primary); font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); cursor: pointer; margin-top: var(--s3); transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.transcript-toggle:hover { border-color: var(--mim-purple); color: var(--purple-dark); }
.transcript-panel { display: none; padding: 0 0 var(--s6); }
.transcript-panel.open { display: block; }
.transcript-panel__inner { background: var(--bg-muted); border-radius: var(--radius-md); padding: var(--s5) var(--s6); font-size: var(--fs-small); font-weight: var(--weight-light); color: var(--fg-muted); line-height: var(--lh-relaxed); }
.transcript-panel__inner p + p { margin-top: var(--s4); }


/* ══ REFLECTION QUESTION (standalone italic prompt) ═════════════════ */

.reflection-question { font-family: var(--font-feature); font-size: var(--fs-body-lg); font-weight: var(--weight-regular); font-style: italic; color: rgba(255,255,255,0.92); line-height: var(--lh-normal); margin-bottom: var(--s4); }


/* ══ STATEMENT BOX ══════════════════════════════════════════════════ */

.statement-box { background: var(--purple-light); border-left: 3px solid var(--mim-purple); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--s5) var(--s6); font-family: var(--font-feature); font-size: var(--fs-body-lg); font-weight: var(--weight-regular); color: var(--mim-black); line-height: var(--lh-normal); margin-top: var(--s8); }


/* ══ EMAIL RESOURCES + RESOURCES LIST ══════════════════════════════ */

.email-resources-btn { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s5); background: var(--mim-black); border: none; border-radius: var(--radius-pill); padding: 12px 22px; font-family: var(--font-primary); font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mim-white); cursor: pointer; transition: opacity var(--dur-base) var(--ease-standard); text-decoration: none; }
.email-resources-btn:hover { opacity: 0.88; color: var(--mim-white); }
.email-resources-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.resources-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.resources-list li { font-size: var(--fs-small); font-weight: var(--weight-light); color: var(--fg-muted); line-height: var(--lh-normal); padding-left: var(--s4); position: relative; }
.resources-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--mim-purple); }


/* ══ PHOTO ALONGSIDE LAYOUT ═════════════════════════════════════════ */

.photo-alongside-layout { display: flex; gap: var(--s6); align-items: flex-start; margin-top: var(--s4); }
.photo-alongside-layout__text { flex: 1; min-width: 0; }
.brad-photo { flex-shrink: 0; width: 190px; position: relative; border-radius: var(--radius-md); overflow: hidden; }
.brad-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.brad-photo--large { width: 240px; }
.brad-photo--xl { width: 380px; }

/* ══ HEAR IT FROM HIM — full-bleed cover with overlaid text ═════════ */
.hifh-cover { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; }
.hifh-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hifh-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, transparent 32%, rgba(0,0,0,0.78) 100%); }
.hifh-cover__inner { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(28px, 5vw, 56px); max-width: 780px; }
.hifh-cover__eyebrow { font-family: var(--font-primary); font-size: var(--fs-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--mim-purple); margin: 0 0 var(--s3); }
.hifh-cover__title { font-family: var(--font-feature); font-weight: 700; font-size: clamp(46px, 7.5vw, 88px); line-height: 0.96; letter-spacing: -0.02em; color: var(--mim-white); margin: 0 0 var(--s4); text-shadow: 0 2px 28px rgba(0,0,0,0.55); }
.hifh-cover__lead { font-family: var(--font-feature); font-style: italic; font-size: calc(clamp(18px, 2.2vw, 25px) * var(--fs-scale)); line-height: 1.3; color: rgba(255,255,255,0.96); margin: 0 0 var(--s4); text-shadow: 0 1px 18px rgba(0,0,0,0.5); }
.hifh-cover__note { font-family: var(--font-primary); font-size: calc(15px * var(--fs-scale)); line-height: var(--lh-relaxed); color: rgba(255,255,255,0.88); margin: 0; }
.hifh-cover__note strong { font-weight: var(--weight-semibold); color: #fff; }
@media (max-width: 720px) { .hifh-cover { aspect-ratio: 3 / 4; } }


/* ══ HIGHLIGHT LINE ═════════════════════════════════════════════════ */

.highlight-line-wrap { position: relative; display: inline-block; }
.highlight-line-wrap strong { position: relative; z-index: 1; font-size: 17px; }
.highlight-line-img { position: absolute; bottom: -16px; left: -12px; width: calc(100% + 24px); height: 22px; object-fit: fill; pointer-events: none; z-index: 0; }


/* ══ TIPS & EXAMPLES BLOCKS ═════════════════════════════════════════ */

.tips-heading { font-size: var(--fs-small); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mim-black); margin: var(--s6) 0 var(--s3); }
.tips-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); }
.tips-list li { font-size: var(--fs-body); font-weight: var(--weight-light); color: var(--fg); line-height: var(--lh-relaxed); padding-left: var(--s5); position: relative; }
.tips-list li::before { content: ''; position: absolute; left: 0; top: 0.25em; width: 14px; height: 10px; border-radius: 0; background: url('./assets/images/MIM_Arrow1.png') center/contain no-repeat; }
.examples-block { background: var(--purple-light); border-left: 2px solid var(--mim-purple); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--s5) var(--s6); margin: var(--s4) 0; }
.examples-block ul { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.examples-block li { font-size: var(--fs-body); font-style: italic; color: var(--fg); line-height: var(--lh-relaxed); padding-left: var(--s4); position: relative; }
.examples-block li::before { content: '"'; position: absolute; left: 0; top: 0; color: var(--mim-purple); font-weight: var(--weight-semibold); }


/* ══ MALE ACRONYM CARDS ═════════════════════════════════════════════ */

.male-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s4); margin: var(--s6) 0; }
.male-card { background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--s5); display: flex; align-items: flex-start; gap: var(--s4); }
.male-card__letter { font-family: var(--font-feature); font-size: 42px; font-weight: var(--weight-regular); color: var(--mim-purple); line-height: 1; flex-shrink: 0; }
.male-card__body h4 { font-size: var(--fs-body); font-weight: var(--weight-semibold); color: var(--mim-black); margin-bottom: var(--s2); }
.male-card__body p  { font-size: var(--fs-small); color: var(--fg-muted); }


/* Screen 5 — background video */
#screen-4 { overflow: hidden; }
.screen-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
/* Scrim between the video and its text (design feedback 14 Jul 2026): dimming
   the video itself washed out its colour without reliably protecting text
   contrast against bright frames. A black scrim above the video, below the
   text, does both — full video vibrancy, consistent white-text contrast. */
.screen--dark:has(> .screen-bg-video) { position: relative; }
.screen--dark:has(> .screen-bg-video)::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
}
.screen--dark:has(> .screen-bg-video) > .screen-inner { position: relative; z-index: 2; }
#screen-4 .screen-inner { position: relative; z-index: 1; }

/* Remove texture on slides 30 and 36 */
#screen-28 { background-image: none; }
/* S32 — white background only (design feedback 17 Jul 2026). */
#screen-31 { background-image: none; }
#screen-36 { background-image: none; }

/* ── Animated quote cards (IGQ) — screens 22 (David) and 30 (Malcher) ── */
@keyframes igqFadeRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes igqMark { from { opacity: 0; transform: translateY(10px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes igqSplash { from { background-size: 0% 100%; } to { background-size: 104% 100%; } }
@keyframes igqUnderline { from { background-size: 0% 78%; } to { background-size: 100% 78%; } }
.igq-card [data-anim="fade"],
.igq-card [data-anim="mark"] { opacity: 0; }
.igq-card[data-play="true"] [data-anim="fade"] { animation: igqFadeRise .72s cubic-bezier(0.16,1,0.3,1) forwards; }
.igq-card[data-play="true"] [data-anim="mark"] { animation: igqMark .6s cubic-bezier(0.16,1,0.3,1) forwards; }
.igq-card[data-play="true"] [data-anim="splash"] { animation: igqSplash 1.05s .95s cubic-bezier(0.2,0.7,0.2,1) both; }
.igq-card[data-play="true"] [data-anim="underline"] { animation: igqUnderline .9s .7s cubic-bezier(0.2,0.7,0.2,1) both; }
.igq-photo--david { background-image: url('./assets/images/portrait-david.jpg'); background-position: center 18%; background-size: cover; }
.igq-splash { background-image: url('./assets/images/mark-highlighter-blocks.png'); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; padding: .04em .18em .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.igq-underline { background-image: url('./assets/images/mark-highlighter-line-v2.png'); background-repeat: no-repeat; background-position: left 92%; background-size: 0% 78%; padding: 0 .1em .04em; }
@media (prefers-reduced-motion: reduce) {
  .igq-card [data-anim="fade"],
  .igq-card [data-anim="mark"] { opacity: 1 !important; animation: none !important; }
  .igq-splash { background-size: 104% 100% !important; }
  .igq-underline { background-size: 100% 78% !important; }
}

/* Toggle twin of the @media block above — same state, driven by the
   in-course setting. A body class cannot un-match a media query, so the
   two entry points have to be authored in parallel. Keep them in step. */
body.reduced-motion .igq-card [data-anim="fade"], body.reduced-motion .igq-card [data-anim="mark"] { opacity: 1 !important; animation: none !important; }
body.reduced-motion .igq-splash { background-size: 104% 100% !important; }
body.reduced-motion .igq-underline { background-size: 100% 78% !important; }

@media (max-width: 720px) {
  .igq-grid { grid-template-columns: 1fr !important; }
  .igq-photo { min-height: 280px !important; max-height: 340px; order: -1; }
}

/* White photocopy texture on all non-dark editorial screens */
.screen:not(.screen--dark):not(.screen--multimedia):not(.screen--closing) {
  background-image: url('./assets/images/MIM_Photocopy-Texture-White.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.night-mode .screen:not(.screen--dark):not(.screen--multimedia):not(.screen--closing) { background-image: none; }


/* ══ RESOURCE TAG BUTTON ════════════════════════════════════════════ */

.fom-tag-btn { display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 16px; background: none; border: 1.5px solid rgba(183,163,252,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(--purple-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(183,163,252,0.14); border-color: var(--mim-purple); }
.fom-tag-btn.is-tagged { background: var(--mim-purple); border-color: var(--mim-purple); color: var(--mim-black); }
.fom-tag-btn.is-tagged svg { fill: var(--mim-black); }


/* ══ RESOURCE LIST ITEMS ════════════════════════════════════════════ */

.resources-list { list-style: none; margin: 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(--mim-grey-light); }
.resource-checkbox { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mim-purple); 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; }
.resources-email-hint { font-size: 12px; font-style: italic; color: var(--fg-subtle); margin-top: 14px; }
.resources-email-hint.hidden { display: none; }
.resources-select-all { font-size: 12px !important; padding: 8px 16px !important; }


/* ══ REVEAL LIST BUTTON ═════════════════════════════════════════════ */

.reveal-list-btn { display: inline-flex; align-items: center; gap: var(--s2); background: none; border: 1.5px solid var(--border); border-radius: var(--radius-pill); padding: 9px 18px; font-family: var(--font-primary); font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); cursor: pointer; transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); margin-bottom: var(--s4); }
.reveal-list-btn:hover:not(:disabled) { border-color: var(--mim-purple); color: var(--purple-dark); background: var(--purple-light); }
.reveal-list-btn:disabled { opacity: 0.38; cursor: default; }


/* ══ NIGHT MODE — Part 2-specific component overrides ════════════════
   (Shared component night-mode rules are in mim-gp-shared.css)
   ══════════════════════════════════════════════════════════════════ */

body.night-mode h2, body.night-mode h3 { color: rgba(255,255,255,0.95); }
body.night-mode p { color: rgba(255,255,255,0.82); }
body.night-mode .divider { border-top-color: rgba(255,255,255,0.1); }
body.night-mode a { color: #c0a8ff; }
body.night-mode .card { background: #17171b; border-color: rgba(255,255,255,0.1); }
body.night-mode .card--purple { background: rgba(183,163,252,0.1); border-color: rgba(183,163,252,0.2); }
body.night-mode .pull-quote { background: rgba(183,163,252,0.08); color: rgba(255,255,255,0.9); }
body.night-mode .pull-quote cite { color: rgba(255,255,255,0.5); }
body.night-mode .find-out-more { border-color: rgba(255,255,255,0.1); }
body.night-mode .find-out-more__trigger { background: #17171b; color: rgba(255,255,255,0.6); }
body.night-mode .find-out-more__trigger:hover { background: rgba(183,163,252,0.1); color: rgba(255,255,255,0.85); }
body.night-mode .find-out-more__inner { background: #111115; border-top-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); }
body.night-mode .find-out-more__inner p { color: rgba(255,255,255,0.65); }
body.night-mode .quiz-option { background: #17171b; border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
body.night-mode .quiz-option:hover:not(:disabled) { background: rgba(183,163,252,0.1); border-color: var(--mim-purple); }
/* .incorrect now uses var(--fg), which night mode does not redefine — without
   these it would render black-on-dark. Mirrors Part 1's .kc-option rules. */
body.night-mode .quiz-option.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 .quiz-option.incorrect::after { color: rgba(255,255,255,0.9); }
body.night-mode .quiz-option.correct, body.night-mode .quiz-option.revealed-correct { background: rgba(183,163,252,0.14); }
body.night-mode .quiz-question { color: rgba(255,255,255,0.9); }
/* Quiz feedback panels were only styled for light mode (bright green/red on dark
   looked jarring). Darken the fill + lighten the text, keep the semantic border. */
body.night-mode .quiz-feedback--correct   { background: rgba(34,160,90,0.14); color: rgba(255,255,255,0.9); }
body.night-mode .quiz-feedback--incorrect { background: rgba(204,68,68,0.14); color: rgba(255,255,255,0.9); }
/* "Tips" heading was hard-set to black — invisible on the dark night-mode bg. */
body.night-mode .tips-heading { color: rgba(255,255,255,0.92); }
body.night-mode .faq-item { border-color: rgba(255,255,255,0.1); }
body.night-mode .faq-trigger { background: #17171b; color: rgba(255,255,255,0.8); }
body.night-mode .faq-trigger:hover { background: rgba(183,163,252,0.1); color: rgba(255,255,255,0.95); }
body.night-mode .faq-body__inner { border-top-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); }
body.night-mode .faq-body__inner p { color: rgba(255,255,255,0.65); }
body.night-mode .transcript-panel__inner { background: #17171b; color: rgba(255,255,255,0.65); }
body.night-mode .reveal-item { background: #17171b; border-color: rgba(255,255,255,0.1); }
body.night-mode .reveal-item__text { color: rgba(255,255,255,0.82); }
body.night-mode .reflection-entry { background: rgba(255,255,255,0.04); }
body.night-mode .reflection-entry__q { color: rgba(255,255,255,0.5); }
body.night-mode .reflection-entry__a { color: rgba(255,255,255,0.8); }
body.night-mode .reflections-viewer__panel { background: #17171b; }
body.night-mode .reflections-viewer__title { color: rgba(255,255,255,0.9); }
body.night-mode .tutorial-step { background: #17171b; border-color: rgba(255,255,255,0.1); }
body.night-mode .tutorial-step:hover { background: rgba(183,163,252,0.08); border-color: rgba(183,163,252,0.25); }
body.night-mode .tutorial-step__body p { color: rgba(255,255,255,0.55); }
body.night-mode .tips-list li { color: rgba(255,255,255,0.82); }
body.night-mode .resources-list li { color: rgba(255,255,255,0.6); }
body.night-mode .summary-screen__title { color: rgba(255,255,255,0.95); }
body.night-mode .fom-tag-btn { color: #cdbcff; }
body.night-mode .fom-tag-btn.is-tagged { color: var(--mim-black); }
body.night-mode .reveal-list-btn { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); }
body.night-mode .reveal-list-btn:hover:not(:disabled) { border-color: var(--mim-purple); color: var(--mim-purple); background: rgba(183,163,252,0.1); }


/* ══ RESPONSIVE — Part 2-specific overrides ══════════════════════════
   (Shared component responsive rules are in mim-gp-shared.css)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .male-cards { grid-template-columns: 1fr; }
  .photo-alongside-layout { flex-direction: column-reverse; }
  .brad-photo { width: 100%; max-width: 260px; margin: 0 auto; }
  .content-wrap { padding: var(--s6) var(--s4) var(--s10); }
  .quiz-option { padding: var(--s4); font-size: var(--fs-small); }
  .tutorial-step { flex-direction: column; gap: var(--s3); }
  .tutorial-step__icon { width: 40px; height: 40px; }
}


/* ── S13: 2 flip cards top row, 3 bottom row (design feedback 15 Jul 2026) ── */
#screen-11 .flipcard-grid { grid-template-columns: repeat(6, 1fr); }
#screen-11 .flipcard-grid > .flipcard:nth-child(1) { grid-column: 2 / span 2; }
#screen-11 .flipcard-grid > .flipcard:nth-child(2) { grid-column: 4 / span 2; }
#screen-11 .flipcard-grid > .flipcard:nth-child(3),
#screen-11 .flipcard-grid > .flipcard:nth-child(4),
#screen-11 .flipcard-grid > .flipcard:nth-child(5) { grid-column: span 2; }
@media (max-width: 600px) {
  #screen-11 .flipcard-grid { grid-template-columns: 1fr; }
  #screen-11 .flipcard-grid > .flipcard { grid-column: auto; }
}

/* ═══ A11y: Text-size (--fs-scale) coverage for the hero copy ═══
   .hx-sub / .hx-body hard-coded font-size without * var(--fs-scale); re-declared
   here (values unchanged) so the Text-size control affects them.
   ⚠ Verify at Text-size 5 (2.1×) that the hero doesn't overflow/clip. */
.hx-sub  { font-size: calc(clamp(18px,1.9vw,23px) * var(--fs-scale)); }
.hx-body { font-size: calc(15px * var(--fs-scale)); }

/* ── S32 moustache: GIF vs still ───────────────────────────────────────────
   An animated GIF ignores prefers-reduced-motion entirely — there's no CSS or
   JS hook to pause one. So the still is a real element, swapped in by the same
   two entry points as every other motion rule here. */
.summary-screen__logo.mo-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .summary-screen__logo.mo-anim  { display: none; }
  .summary-screen__logo.mo-still { display: block; }
}
body.reduced-motion .summary-screen__logo.mo-anim  { display: none; }
body.reduced-motion .summary-screen__logo.mo-still { display: block; }

/* The sentence lifted above the video on S32 (it used to sit below the divider). */
.summary-screen__lead {
  max-width: var(--measure); margin: var(--s4) auto 0;
  font-size: calc(16px * var(--fs-scale)); line-height: var(--lh-relaxed);
  color: var(--fg); font-weight: var(--weight-light);
}

/* ══ DOWNLOAD CALLOUT ════════════════════════════════════════════════
   Ported from Part 3 (slides 23/41) so the handout callout is identical
   across the course. Only the live-download rules are carried over —
   Part 3's "--pending / coming soon" state has no use here. Spacing uses
   this module's --s6 alias (Part 3 authors the same value as --sp-6). */
.download { max-width: var(--measure); margin-top: var(--s6); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 22px; background: rgba(183,163,252,0.08); border: 1px solid var(--mim-purple-aa); border-radius: var(--radius-md); }
.download__body { flex: 1 1 260px; }
.download__body .body { margin: 0; }
.download__btn { flex: 0 0 auto; text-decoration: none; }

/* ══ Layout fixes inherited from the ACRRM build (20 Jul 2026) — promote to the shared
   engine once the other courses are done, then delete this block. Kept verbatim so this
   edition stays diffable against ACRRM; geometry only, nothing accreditation-related.
   ══════════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════════
   AUDIENCE DISCLAIMER + CRISIS SUPPORT — Health and Community Professionals edition only
   Added 12 Aug 2026. Not present in the GP / ACRRM / Pharmacy / Nurses courses,
   so a diff against ACRRM will show this block as an intended delta.

   Two components:
     .hero-note      short notice on the hero (screen 1)
     .audience-note  the full disclaimer on the onboarding screen
   Conventions these deliberately follow (each one is a documented past defect):
     · Opaque backgrounds, never translucent. Over the hero photograph a
       translucent panel is both genuinely hard to read and unmeasurable —
       qa-contrast composites to the painted backdrop and cannot see the image,
       so it reports a confident false result in either direction.
     · font-size carries * var(--fs-scale) so the A/A+/A++ control actually
       resizes this copy. qa-text-size only samples a fixed list of blocks, so a
       new component that omits the scale sails through the gate (Ph2/Ph3 hero
       copy did exactly that).
     · Explicit body.night-mode overrides. Inheriting --fg in night mode is the
       documented route to ~2.6:1 body copy.
     · NO [data-rise]. The hero rise animation is correctly wrapped in
       @media (prefers-reduced-motion: no-preference), but a disclaimer must not
       depend on an animation having run under any circumstances.
   ═══════════════════════════════════════════════════════════════════════════════ */

.hero-note {
  /* Deliberately loud (Tom, 13 Aug). This is the only thing telling a learner the
     course was not written for their role, so it is sized to be read, not skimmed
     past: body-copy size rather than caption size, a full border plus a heavy left
     rule, and a shadow to lift it off the photograph. Still OPAQUE — a translucent
     panel over the hero image is both hard to read and unmeasurable (qa-contrast
     composites to the painted backdrop and cannot see a photograph). */
  max-width: 62ch;
  background: #141318;
  border: 1px solid rgba(183, 163, 252, 0.42);
  border-left: 6px solid var(--mim-purple);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}
.hero-note__label {
  display: block;
  font-family: var(--font-primary); font-weight: var(--weight-bold);
  font-size: calc(13px * var(--fs-scale));
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mim-purple);
  margin-bottom: 9px;
}
.hero-note__text {
  font-family: var(--font-primary); font-weight: var(--weight-regular);
  font-size: calc(17px * var(--fs-scale)); line-height: 1.5;
  color: #fff;                              /* 19:1 on #141318 */
  margin: 0;
}

.audience-note {
  max-width: var(--measure);
  margin-top: var(--sp-6);
  background: #F4F1FF;                      /* light purple tint, opaque */
  border-left: 3px solid var(--mim-purple);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}
.audience-note__label {
  display: block;
  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: #4B3A9E;                           /* 7.4:1 on #F4F1FF — --mim-purple is too light here */
  margin-bottom: 10px;
}
.audience-note__text {
  font-family: var(--font-primary); font-weight: var(--weight-regular);
  font-size: calc(15px * var(--fs-scale)); line-height: 1.6;
  color: #1A1A1A; margin: 0;
}
.audience-note__text + .audience-note__text { margin-top: 0.9em; }

body.night-mode .audience-note      { background: #17171b; }
body.night-mode .audience-note__label { color: #cdbcff; }   /* 8.1:1 on #17171b */
body.night-mode .audience-note__text  { color: rgba(255,255,255,0.90); }

/* Short viewports. 1366x768 is the most common laptop resolution and the hero copy
   stack there (kicker + up-to-84px title + sub + note + body paragraphs) overran the
   usable height by ~8px, putting the audience disclaimer behind the Back/Continue
   footer. Measured, not guessed: see tools/qa-hcp-disclaimer.js, which asserts the
   note's real rect against innerHeight minus the footer at every breakpoint.
   Tighten the stack rather than let a disclaimer depend on the learner scrolling. */
@media (max-height: 850px) {
  /* The disclaimer is now bigger, so the space has to come from somewhere. It comes
     from the DISPLAY TITLE, not from the disclaimer: capping the title reclaims ~60px
     across its three lines, which is more than the larger note costs. Verified with a
     real measurement at 1366x768 (the most common laptop size, and the one that
     overran by 8px before), 1440x900, 1280x720 and 1920x1080 — see
     tools/qa-hcp-disclaimer.js, which asserts the note's rect against innerHeight
     minus the footer. Never shrink the note to make it fit. */
  .screen--hero .hx-title         { font-size: clamp(34px, 4.1vw, 54px); }
  .screen--hero .hero__copy      { gap: 12px; }
  .screen--hero .hero__inner-wrap { padding-bottom: 26px; }
  .hero-note                      { padding: 16px 20px; }
  .hero-note__label               { margin-bottom: 7px; }
}

/* .evidence__link is display:block / 11px / uppercase by design. Restore body size for
   the disclaimer's contact link, following the .find-out-more__link precedent in
   mim-gp-shared.css. Explicit calc(), not var(--fs-body): the token form silently
   ignores the text-size control. */
/* Inline, body-size contact link inside the disclaimer copy. Deliberately NOT
   .evidence__link (display:block / 11px / uppercase -- a standalone CTA). Explicit
   calc() rather than var(--fs-body): the token form ignores the text-size control. */
.audience-note__inline-link {
  font-size: calc(15px * var(--fs-scale));
  color: #4B3A9E;                 /* 7.4:1 on #F4F1FF */
  text-decoration: underline;
}
body.night-mode .audience-note__inline-link { color: #cdbcff; }   /* 8.1:1 on #17171b */