/* ------------------------------------------------------------------
   Johnson & Johnson brand layer for the Calcium Masterclass site.
   Loaded LAST on every page (index, login, test, admin), after light.css
   and each page's own <style>, so it restyles without touching behaviour.

   Built from the J&J brand guidelines (Color, Typography, Logo, Design
   guidance; October 2026):
     - Core palette: J&J Red #EB1700 and white, used roughly equally.
       Warm grays 01 to 08 for modules and keylines. Black is for text.
     - Red floods for high-level moments only (header band, hero).
       Text-dense areas sit on white.
     - Accent colours never as blocks or text: here only as the thin
       right/wrong keylines in the test.
     - Johnson Display for headlines (regular weight, never bold for a
       whole headline), Johnson Text for everything else. Arial is the
       approved fallback until the brand fonts are installed.
     - Sentence case everywhere, left aligned, no tracking, no all caps.
     - Headlines and eyebrows in red or black on white, white on red.
       Body copy black on white, white on red. Never red body copy,
       never black text on red, no highlighting words in red, no
       gradients, no changes to type opacity.
     - Logo: only original artwork from the J&J asset library. This file
       never draws it; the header shows assets/brand/logo-white.svg if
       it exists and the site name in type if it doesn't.
-------------------------------------------------------------------*/

/* Brand fonts: the original Johnson Display and Johnson Text OTF files from
   J&J, served unchanged (the font licence forbids converting or altering
   them, so no WOFF2 copies are made here). Arial is the fallback. */
@font-face { font-family: "Johnson Display"; src: url("fonts/JohnsonDisplay-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Johnson Display"; src: url("fonts/JohnsonDisplay-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Johnson Display"; src: url("fonts/JohnsonDisplay-RegularItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Johnson Text"; src: url("fonts/JohnsonText-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Johnson Text"; src: url("fonts/JohnsonText-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Johnson Text"; src: url("fonts/JohnsonText-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Johnson Text"; src: url("fonts/JohnsonText-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Johnson Text"; src: url("fonts/JohnsonText-RegularItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* J&J core and neutral palette */
  --jj-red: #EB1700;
  --jj-white: #FFFFFF;
  --g01: #F1EFED; --g02: #E8E6E3; --g03: #D5CFC9; --g04: #CBC4BC;
  --g05: #A39992; --g06: #81766F; --g07: #6E6259; --g08: #312C2A;
  --jj-black: #000000;
  /* accents, only for small graphical marks */
  --jj-green: #328714; --jj-maroon: #9E0000;

  --display: "Johnson Display", Arial, Helvetica, sans-serif;
  --text: "Johnson Text", Arial, Helvetica, sans-serif;

  /* Remap the Made Clear tokens (light.css and the page styles) */
  --bg: #FFFFFF; --surface: #FFFFFF; --sunk: var(--g01);
  --ink: #000000; --ink-2: var(--g08); --ink-3: var(--g07);
  --line: var(--g02); --line-2: var(--g03);
  --yellow: var(--g02);   /* every old yellow hover becomes a neutral gray fill with black text */
  --hl: var(--g03);       /* search hits: warm gray, never red */
  --accent: var(--jj-black); --accent-bg: var(--g02);
  --good: var(--jj-green); --good-bg: #FFFFFF;
  --bad: var(--jj-maroon); --bad-bg: #FFFFFF;
  --card: var(--g01); --card-2: var(--g02);
  --muted: var(--g07); --caption: var(--g07); --body-ink: #000000;
  --head: var(--display); --body: var(--text); --data: var(--text);
  --r-sm: 0; --r: 0; --r-lg: 0;
  --shadow: none; --shadow-lg: none;
  --band-h: 64px;
}

/* ---------- type ---------- */
body { font-family: var(--text); color: #000; background: #fff; font-feature-settings: "kern"; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.data, .tc, .cue, .dur, .num, .count { font-variant-numeric: tabular-nums; }
/* No all caps, no tracking, anywhere (guidelines: sentence case only) */
.label, .eyebrow, .lozenge, .src, .stat .k, .scroll-cue, .v2flag, .onscreen, .passage .now,
.moment .src, .passage .src, .card-over .k, .sec .n, .group-label, .brief-in h3, .how-in section .label,
.fgroup .group-head .label, .mast-top .label, .sum .label, .stage-head .label, .nothing .label {
  text-transform: none !important; letter-spacing: 0 !important;
}
/* Eyebrows: Johnson Text, sentence case, J&J Red on white */
.label, .eyebrow { font-family: var(--text); font-weight: 400; font-size: 14px; color: var(--jj-red); }
.hl { background: var(--g03); color: #000; border-radius: 0; }
/* Headline emphasis that used to be highlighted: plain type now */
.hero-inner h1 .hl, .mast-title .hl, h1 .hl, h2 .hl { background: none; padding: 0; color: inherit; }

:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* ---------- the red band: every page's top bar ---------- */
.topbar, .hero-top, .masthead {
  background: var(--jj-red) !important; color: #fff !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;
}
.topbar { padding: calc(12px + env(safe-area-inset-top, 0px)) 32px 12px; min-height: var(--band-h); gap: 20px; }
.topbar :focus-visible, .hero-top :focus-visible, .masthead :focus-visible, .hero :focus-visible { outline-color: #fff; }

/* Logo: the original single-line white artwork (primary negative), 22px tall
   (about 225px wide, above the 120px screen minimum). Kept a clear distance
   from the site name, with no rule or box, so it never reads as a lock-up. */
.brand { display: inline-flex; align-items: center; gap: 40px; color: #fff; text-decoration: none; white-space: nowrap; min-width: 0; }
.brand-logo { height: 22px; width: auto; display: block; }
.brand-name { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1; }
.brand:hover .brand-name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.nav-pill { background: none; box-shadow: none; padding: 0; gap: 26px; margin: 0 0 0 auto; }
.nav-pill a, .nav-pill button {
  font-family: var(--text); font-size: 15px; color: #fff !important; padding: 6px 0; border-radius: 0;
  background: none !important; border-bottom: 2px solid transparent;
}
.nav-pill a:hover, .nav-pill button:hover { border-bottom-color: #fff; }
.nav-pill [aria-current="page"], .nav-pill [aria-pressed="true"] { background: none; color: #fff; border-bottom-color: #fff; }
.top-actions { margin-left: 0; }
.topbar > .brand + .top-actions, .hero-top > .brand + .top-actions { margin-left: auto; }

/* Signed-in pill on red: white keyline, white type */
.topbar .btn-light, .hero-top .btn-light, .masthead .btn-light, [data-user-pill] .btn {
  background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1px #fff;
}
[data-user-pill] .btn:hover { background: #fff !important; color: var(--jj-red) !important; }
.avatar { background: #fff; color: var(--jj-red); font-family: var(--text); font-weight: 700; }
[data-user-pill] .btn:hover .avatar { background: var(--jj-red); color: #fff; }
.user-menu { border-radius: 0; box-shadow: 0 0 0 1px var(--g03); color: #000; }
.user-menu .so { border-radius: 0; }
.user-menu .so:hover { background: var(--g01) !important; color: #000 !important; }

/* ---------- buttons ---------- */
.btn { font-family: var(--text); font-weight: 700; letter-spacing: 0; border-radius: 999px; }
.btn-dark, .btn-yellow { background: var(--jj-red); color: #fff; }
.btn-light { background: #fff; color: #000; box-shadow: inset 0 0 0 1px #000; }
.btn-ghost { color: #000; text-decoration: underline; text-underline-offset: 4px; }
/* Hovers: red buttons go black; outline buttons fill warm gray. Overrides the
   !important yellow hover in light.css. */
.btn-dark:hover, .btn-yellow:hover, #lgo:hover, #go:hover, .reel-btn:hover {
  background: #000 !important; color: #fff !important; filter: none;
}
.btn-light:hover, .btn-ghost:hover, .btn:not(.btn-dark):not(.btn-yellow):hover { background: var(--g02) !important; color: #000 !important; }
[data-user-pill] .btn:hover { background: #fff !important; color: var(--jj-red) !important; }
.btn:disabled, .btn:disabled:hover { opacity: 1; background: var(--g03) !important; color: var(--g08) !important; }
.test-fab { box-shadow: 0 0 0 2px #fff; padding: 14px 22px; }

/* ---------- cards, lozenges, forms ---------- */
.card { border-radius: 0; box-shadow: none; background: var(--g01); }
.card-btn:hover, button.card:hover { box-shadow: inset 0 0 0 2px #000 !important; }
.lozenge { font-family: var(--text); background: #fff; color: #000; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--g04); }
.lozenge.grey { background: #fff; color: var(--g08); }
.lozenge.good { background: #fff; color: #000; box-shadow: inset 0 0 0 1.5px var(--jj-green); }
.lozenge.bad { background: #fff; color: #000; box-shadow: inset 0 0 0 1.5px var(--jj-maroon); }
.lozenge.dashed { border-color: var(--g05); }
.field label { font-family: var(--text); font-weight: 700; }
.input, .select { border-radius: 0; border: 1px solid var(--g05); font-family: var(--text); }
.input:focus, .select:focus { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.field .err { color: var(--jj-maroon); }
.check input { accent-color: var(--jj-red); }

/* ---------- footer ---------- */
.foot, footer:not(.foot) { font-family: var(--text); color: var(--g07); background: #fff; border-top: 1px solid var(--g02); }
.foot a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.foot { max-width: none; padding-left: 32px; padding-right: 32px; }

/* =================================================================
   HOMEPAGE (index.html, landing)
   ================================================================= */
.hero { background: var(--jj-red); color: #fff; min-height: auto; overflow: visible; }
.wall, .veil { display: none !important; }
.hero-top { position: sticky; top: 0; z-index: 25; padding: calc(12px + env(safe-area-inset-top, 0px)) 32px 12px; min-height: var(--band-h); align-items: center; gap: 20px; }
.hero-top .nav-pill { margin: 0 0 0 auto; }

.hero-inner {
  max-width: 1280px; margin: 0; padding: 7vh 32px 48px; align-items: flex-start; text-align: left; gap: 22px; justify-content: flex-start;
}
.hero-eyebrow, .hero .eyebrow { color: #fff; font-size: 16px; }
.hero-inner h1 { font-family: var(--display); font-weight: 400; font-size: clamp(42px, 5.2vw, 78px); line-height: 1.05; letter-spacing: 0; max-width: 21ch; color: #fff; }
.hero-inner h1 .sub { color: #fff; display: block; }
.lede { font-family: var(--text); color: #fff; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; max-width: 46ch; }

.lsearch { background: #fff; border-radius: 999px; box-shadow: none; padding: 6px; max-width: 760px; margin-top: 8px; }
.lsearch:focus-within { box-shadow: 0 0 0 3px #000; }
#lq { font-family: var(--text); font-size: 18px; color: #000; }
#lq::placeholder { color: var(--g07); }
#lmic { color: #000; }
#lmic:hover, #mic:hover { background: var(--g02) !important; color: #000 !important; }
#lmic[data-state="listening"], #mic[data-state="listening"] { background: var(--g03) !important; color: #000; }
#lgo { background: var(--jj-red); color: #fff; font-family: var(--text); font-weight: 700; font-size: 16px; letter-spacing: 0; padding: 0 28px; }
.lhint { color: #fff; margin-top: -8px; font-family: var(--text); }

.hero-links { justify-content: flex-start; gap: 24px; margin-top: -4px; }
.textbtn { font-family: var(--text); font-size: 15px; color: #fff; text-decoration: underline; text-decoration-color: #fff; text-underline-offset: 4px; }
.textbtn:hover { color: #fff; background: none !important; text-decoration-thickness: 2px; text-decoration-color: #fff; }

.chips { justify-content: flex-start; max-width: 1180px; gap: 8px; margin-top: 10px; }
.chip {
  font-family: var(--text); font-size: 14px; background: transparent; color: #fff; border: 0; border-radius: 999px;
  box-shadow: inset 0 0 0 1px #fff; padding: 8px 15px;
}
.chip:hover, .chip:focus-visible { background: #fff !important; color: var(--jj-red) !important; box-shadow: inset 0 0 0 1px #fff; }
.chips .more { box-shadow: none; border: 1px dashed #fff; color: #fff; }
.scroll-cue { align-self: flex-start; margin: 0 32px calc(28px + env(safe-area-inset-bottom, 0px)); color: #fff; font-family: var(--text); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.scroll-cue:hover { color: #fff; text-decoration-thickness: 2px; }

/* The masterclasses */
.films { background: #fff; padding: 64px 32px 72px; }
.films-inner { max-width: none; gap: 36px; }
.films-head { text-align: left; align-items: flex-start; gap: 10px; }
.films-head h2 { font-family: var(--display); font-weight: 400; color: var(--jj-red); font-size: clamp(34px, 3.8vw, 54px); line-height: 1.08; }
.films-head p { color: #000; font-size: 18px; max-width: 60ch; }
.fgroup { gap: 18px; }
.fgroup .group-head { border-top: 1px solid #000; padding-top: 10px; color: #000; }
.fgroup .group-head .label { font-family: var(--text); font-weight: 700; font-size: 15px; color: #000; }
.fgroup .group-head .count { font-family: var(--text); color: var(--g07); }
.fgrid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 32px 20px; }
.fcard { background: none; box-shadow: none !important; border-radius: 0; padding: 0; gap: 10px; }
.fcard:hover { box-shadow: none !important; }
.fcard:hover .ft { text-decoration: underline; text-underline-offset: 3px; }
.fcard .thumb { border-radius: 0; background: var(--g01); }
.fcard:hover .thumb { outline: 2px solid var(--jj-red); outline-offset: 0; }
.fcard .ft, .fcard .fm { padding: 0; }
.fcard .ft { font-family: var(--text); font-weight: 700; font-size: 16px; color: #000; }
.fcard .fm { font-family: var(--text); font-size: 13px; color: var(--g07); }
.fcard .thumb .play-ico > span { border-radius: 50%; background: var(--jj-red); color: #fff; }
.thumb { background: var(--g01); }
.thumb .dur { border-radius: 0; right: 0; bottom: 0; background: #000; color: #fff; font-family: var(--text); font-size: 11.5px; padding: 2px 6px; }

/* Chapters under each card and inside the transcript */
.fchapters { font-family: var(--text); font-size: 13.5px; border-top: 1px solid var(--g02); padding-top: 6px; }
.fchapters summary { color: #000; padding: 4px 0; font-weight: 700; }
.fchapters summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.fchapters summary::before { content: "+ "; color: var(--jj-red); }
.fchapters[open] summary::before { content: "\2013  "; }
.fchapters button { border-radius: 0; padding: 5px 4px; }
.fchapters button:hover, .chap:hover { background: var(--g01) !important; }
.fchapters .tc, .chap .tc { font-family: var(--text); color: var(--g07); }
.fchapters em, .chap em { color: var(--g07); }
.chap { font-family: var(--text); font-weight: 700; color: #000; border-top: 1px solid #000; }
.onscreen { font-family: var(--text); font-size: 11.5px; font-weight: 700; background: var(--g08); color: #fff; border-radius: 0; padding: 2px 6px; }

/* "How answers work" */
dialog.howdlg { border-radius: 0; box-shadow: none; border: 1px solid #000; }
dialog.howdlg::backdrop { background: rgba(255, 255, 255, .94); backdrop-filter: none; }
.how-in { padding: 32px 34px 34px; }
.how-in h2 { font-family: var(--display); font-weight: 400; color: var(--jj-red); font-size: 32px; }
.how-in .x { border-radius: 999px; background: #fff; color: #000; box-shadow: inset 0 0 0 1px #000; font-family: var(--text); }
.how-in .x:hover { background: var(--g02) !important; color: #000 !important; }
.how-in section { border-top: 1px solid var(--g02); padding-top: 12px; }
.how-in section .label { font-family: var(--text); font-weight: 400; font-size: 15px; color: var(--jj-red); }
.how-in p, .how-in li { color: #000; font-family: var(--text); }

/* =================================================================
   RESULTS VIEW (index.html, after a question)
   ================================================================= */
.masthead { padding: calc(14px + env(safe-area-inset-top, 0px)) 32px 22px; gap: 16px; }
.mast-top { gap: 20px; min-height: 36px; }
.mast-top .label { color: #fff; font-family: var(--text); font-weight: 400; font-size: 15px; }
.mast-title { font-family: var(--display); font-weight: 400; color: #fff; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; max-width: 26ch; }
.modes { background: none; box-shadow: inset 0 0 0 1px #fff; border-radius: 999px; padding: 3px; align-self: flex-start; width: max-content; }
.mode { font-family: var(--text); font-weight: 400; font-size: 14px; color: #fff; border-radius: 999px; letter-spacing: 0; }
.mode:hover { background: rgba(0,0,0,0) !important; color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
.mode[aria-pressed="true"], .mode[aria-pressed="true"]:hover { background: #fff !important; color: var(--jj-red) !important; text-decoration: none; }
.qwrap { background: #fff; border-radius: 999px; box-shadow: none; }
.qwrap:focus-within { box-shadow: 0 0 0 3px #000; }
#q { font-family: var(--text); color: #000; }
#q::placeholder { color: var(--g07); }
#mic { color: #000; }
#go { background: var(--jj-red); color: #fff; font-family: var(--text); font-weight: 700; letter-spacing: 0; }
.voice-hint { color: #fff; font-family: var(--text); }
.suggests .label { color: #fff; }
.sug { font-family: var(--text); background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff; border-radius: 999px; }
.sug:hover { background: #fff !important; color: var(--jj-red) !important; }
body.compact .mast-top .label { font-size: 15px; }
body.compact .masthead { padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 12px; }

.panes { background: #fff; gap: 24px; padding: 24px 32px; }
.pane.results { padding: 0; gap: 28px; }
.asked .label, .group-head .label { font-family: var(--text); font-weight: 400; font-size: 14px; color: var(--jj-red); }
.asked h2 { font-family: var(--display); font-weight: 400; color: #000; font-size: 30px; line-height: 1.15; }
.group-head { border-top: 1px solid #000; padding-top: 8px; color: var(--g07); }
.group-head .count { font-family: var(--text); }
.linkish { font-family: var(--text); color: #000; }
.linkish:hover { background: none !important; color: #000 !important; text-decoration-thickness: 2px; }
.empty { font-family: var(--text); color: var(--g08); }

.stat { background: var(--g01); border-radius: 0; box-shadow: none; }
.stat .n { font-family: var(--display); font-weight: 400; font-size: 34px; color: var(--jj-red); }
.stat .k { font-family: var(--text); font-size: 13px; color: #000; }

.note { background: var(--g01); border-radius: 0; box-shadow: none; color: #000; }
.note .label { color: var(--jj-red); }

.reel-btn { background: var(--jj-red); color: #fff; font-family: var(--text); font-weight: 700; letter-spacing: 0; border-radius: 999px; }
.reel-btn:disabled, .reel-btn:disabled:hover { background: var(--g03) !important; color: var(--g08) !important; opacity: 1; }

.passage { background: var(--g01); border-radius: 0; box-shadow: none; }
.passage:hover { background: var(--g02); box-shadow: none !important; }
.passage[aria-current="true"] { background: #fff; outline: 2px solid #000; outline-offset: -2px; }
.passage.flash { outline: 2px solid var(--jj-red); outline-offset: -2px; }
.passage .thumb { border-radius: 0; }
.passage .thumb .num { border-radius: 0; background: #000; color: #fff; font-family: var(--text); }
.passage.cited .thumb .num { background: var(--jj-red); color: #fff; }
.passage .play-ico > span { border-radius: 50%; background: #fff; color: #000; }
.passage .who { font-family: var(--text); font-weight: 700; color: #000; }
.passage .txt { font-family: var(--text); color: #000; }
.passage .src, .moment .src { font-family: var(--text); font-size: 13px; color: var(--g07); }
.passage .inc { font-family: var(--text); color: var(--g08); }
.passage .inc input { accent-color: var(--jj-red); }
.passage .prog { background: var(--jj-red); }
.passage .now { background: var(--jj-red); color: #fff; border-radius: 0; font-family: var(--text); }

.film { background: var(--g01); border-radius: 0; box-shadow: none; }
.film:hover { background: var(--g02); box-shadow: none !important; }
.film[aria-current="true"] { background: var(--g08); color: #fff; }
.film-title { font-family: var(--text); font-weight: 700; }
.film-meta { font-family: var(--text); color: var(--g07); }
.film[aria-current="true"] .film-meta { color: #fff; }
.hitmap .base { background: var(--g05); }
.hitmap i { background: var(--jj-red); }
.film[aria-current="true"] .hitmap i { background: #fff; }

.moment { border-radius: 0; }
.moment + .moment { border-top: 1px solid var(--g02); }
.moment:hover { background: var(--g01); }
.moment .tc { font-family: var(--text); color: var(--g07); }
.moment .txt { font-family: var(--text); color: #000; }

.bar { background: var(--g02); }
.bar::after, .stage .bar::after { background: var(--jj-red); }
.working { color: var(--g08); font-family: var(--text); }

/* Right column: summary, player, transcript */
.pane.stage { background: transparent; }
.stage-inner { background: #fff; border-radius: 0; box-shadow: inset 0 0 0 1px var(--g03); }
.sum .label { font-family: var(--text); font-weight: 400; font-size: 14px; color: var(--jj-red); }
.sum .gen-note { font-family: var(--text); color: var(--g07); }
.summary { font-family: var(--text); font-size: 19px; line-height: 1.5; color: #000; }
/* Citations: numerals in solid circles (the type system's annotation style) */
.cite {
  font-family: var(--text); font-size: 11px; font-weight: 700; background: #000; color: #fff;
  border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px; vertical-align: 3px;
}
.cite:hover { background: var(--jj-red) !important; color: #fff !important; outline: none !important; }
.frame { border-radius: 0; margin: 0; background: #000; }
.card-over { background: #000; }
.card-over .k { font-family: var(--text); font-weight: 400; font-size: 14px; color: #fff; }
.card-over .t { font-family: var(--display); font-weight: 400; }
.card-over .m { font-family: var(--text); color: #fff; }
.ph .pt { font-family: var(--display); font-weight: 400; font-size: 22px; }
.ph .cue { font-family: var(--text); }
.ph .cue .hl { background: none; color: #fff; padding: 0; }
.ph .pb { font-family: var(--text); color: #fff; }
.reelbar { padding: 12px 20px 0; }
.reelbar .pos { font-family: var(--text); color: var(--g07); }
.reelbar .pos b { color: #000; }
.rb { font-family: var(--text); background: #fff; color: #000; box-shadow: inset 0 0 0 1px #000; border-radius: 999px; }
.rb:hover { background: var(--g02) !important; color: #000 !important; }
.ticks i { background: var(--g02); border-radius: 0; }
.ticks i.done { background: #000; }
.ticks i b { background: var(--jj-red); }
.stage-head { padding: 18px 20px 12px; }
.stage-head .label { font-family: var(--text); font-weight: 400; font-size: 14px; color: var(--jj-red); }
.stage-head h2 { font-family: var(--display); font-weight: 400; font-size: 26px; color: #000; }
.stage-meta { font-family: var(--text); color: var(--g07); }
.transcript { margin: 0 20px 20px; border-radius: 0; background: var(--g01); }
.transcript .label { color: var(--jj-red); }
.seg .tc { font-family: var(--text); color: var(--g07); }
.seg .txt { font-family: var(--text); color: var(--g08); }
.seg[aria-current="true"] .txt { color: #000; font-weight: 700; }
.seg[aria-current="true"] .tc { color: var(--jj-red); }
.nothing { font-family: var(--text); color: var(--g08); }
.nothing .label { font-family: var(--text); font-weight: 400; font-size: 14px; color: var(--jj-red); }
.v2flag { background: var(--g02); color: #000; font-family: var(--text); }

@media (max-width: 900px) {
  .panes { padding: 16px; gap: 16px; }
  .masthead, .stage-head, .sum, .reelbar, footer { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 760px) {
  .topbar, .hero-top { padding-left: 16px; padding-right: 16px; gap: 12px; }
  .brand-name { font-size: 18px; }
  .brand-logo { height: 18px; }
  .brand-logo + .brand-name { display: none; }
  .top-actions { margin-left: auto !important; }
  .hero-inner { padding: 36px 16px 36px; gap: 18px; }
  .hero-inner h1 { font-size: clamp(38px, 11vw, 52px); }
  .lsearch { padding: 4px; }
  #lgo { padding: 0 18px; }
  .scroll-cue { margin-left: 16px; }
  .films { padding: 40px 16px 48px; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .foot { padding-left: 16px; padding-right: 16px; }
}

/* =================================================================
   TEST (test.html)
   ================================================================= */
.head { text-align: left; align-items: flex-start; padding: 40px 0 32px; }
.head .eyebrow { font-size: 16px; }
.head h1 { font-family: var(--display); font-weight: 400; color: var(--jj-red); font-size: clamp(38px, 5vw, 64px); line-height: 1.05; }
.head h1 .sub { color: #000; }
.head p { color: #000; font-family: var(--text); }
.sec { background: var(--g01); }
.sec:hover { box-shadow: inset 0 0 0 2px #000 !important; }
.sec .n { font-family: var(--text); font-size: 14px; color: var(--jj-red); }
.sec h3 { font-family: var(--display); font-weight: 400; font-size: 26px; color: #000; }
.sec p { color: #000; }
.start-row { justify-content: flex-start; }
.about h3, .watch h3, .cta h3 { font-family: var(--display); font-weight: 400; font-size: 24px; }
.about p, .watch p, .cta p { color: #000; }
.progress .seg span { font-family: var(--text); }
.progress .bar { border-radius: 0; background: var(--g02); height: 4px; }
.progress .bar i { border-radius: 0; background: var(--jj-red); }
.qcard { background: #fff; box-shadow: inset 0 0 0 1px var(--g03); }
.qcard h2 { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15; }
.opt { border-radius: 0; border: 1px solid var(--g04); }
.opt:hover { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.opt .k { font-family: var(--text); border-color: var(--g05); color: #000; }
.opt .t { font-family: var(--text); color: #000; }
.opt:has(input:checked) { border-color: #000; background: var(--g01); box-shadow: inset 0 0 0 1px #000; }
.opt:has(input:checked) .k { background: #000; border-color: #000; color: #fff; }
.opt:has(input:focus-visible) { outline: 2px solid #000; }
.opt.right, .opt.right:has(input:checked) { border-color: var(--jj-green); background: #fff; box-shadow: inset 0 0 0 2px var(--jj-green); }
.opt.right .k, .opt.right:has(input:checked) .k { background: var(--jj-green); border-color: var(--jj-green); color: #fff; }
.opt.wrong, .opt.wrong:has(input:checked) { border-color: var(--jj-maroon); background: #fff; box-shadow: inset 0 0 0 2px var(--jj-maroon); }
.opt.wrong .k, .opt.wrong:has(input:checked) .k { background: var(--jj-maroon); border-color: var(--jj-maroon); color: #fff; }
.feedback { border-radius: 0; background: var(--g01); }
.feedback .verdict, .feedback.ok .verdict, .feedback.no .verdict { font-family: var(--text); color: #000; }
.feedback.ok { box-shadow: inset 4px 0 0 var(--jj-green); }
.feedback.no { box-shadow: inset 4px 0 0 var(--jj-maroon); }
.src { border-radius: 0; }
.src .th { border-radius: 0; }
.src .who { font-family: var(--text); }
.ring .num { font-family: var(--display); }
.ring .num b { font-weight: 400; color: var(--jj-red); font-size: 40px; }
.brow { font-family: var(--text); }
.brow .track { border-radius: 0; background: var(--g02); }
.brow .track i { border-radius: 0; background: var(--jj-red); }
.cta .done { color: #000; font-family: var(--text); }
dialog.player { border-radius: 0; box-shadow: none; }
dialog.player::backdrop { background: rgba(49, 44, 42, .6); backdrop-filter: none; }
.player .bar { background: #fff; }
.player .bar .who { font-family: var(--text); }

/* =================================================================
   SIGN IN (login.html)
   ================================================================= */
.intro .eyebrow { font-size: 16px; }
.intro h1 { font-family: var(--display); font-weight: 400; color: var(--jj-red); font-size: clamp(38px, 4.6vw, 64px); line-height: 1.05; }
.intro h1 .sub { color: #000; }
.intro p { color: #000; font-family: var(--text); }
.points li { font-family: var(--text); color: #000; }
.points li svg { color: var(--jj-red); }
.stills div { border-radius: 0; }
.stills img { filter: none; }
.stills img.ok { opacity: 1; }
.panel { background: var(--g01); }
.tabs { background: #fff; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--g04); }
.tabs button { font-family: var(--text); font-weight: 700; color: #000; }
.tabs button:hover { background: var(--g02) !important; color: #000 !important; }
.tabs button[aria-selected="true"], .tabs button[aria-selected="true"]:hover { background: #000 !important; color: #fff !important; box-shadow: none; }
.form-head h2 { font-family: var(--display); font-weight: 400; font-size: 30px; color: #000; }
.form-head p { color: #000; }
.group-label { font-family: var(--text); font-size: 14px; color: var(--jj-red); border-top-color: var(--g03); }
.small { font-family: var(--text); color: var(--g08); }
.small a { color: #000; }
.banner { border-radius: 0; background: #fff; color: #000; box-shadow: inset 4px 0 0 var(--jj-red); font-family: var(--text); }
.pw button { font-family: var(--text); color: #000; text-decoration: underline; border-radius: 0; }

/* =================================================================
   CLIENT DASHBOARD (admin.html)
   ================================================================= */
.demo-flag { background: #fff; color: var(--jj-red); font-family: var(--text); }
.kpi .n { font-family: var(--display); font-weight: 400; color: var(--jj-red); letter-spacing: 0; }
.alert .av, .brief-in header .av { background: #fff; color: var(--jj-red); box-shadow: inset 0 0 0 1px var(--jj-red); font-family: var(--text); }
.brief-in h3 { font-family: var(--text); font-weight: 400; font-size: 14px; color: var(--jj-red); }
.heat .cell:hover { outline: 2px solid #000; }

/* Red small type only passes WCAG AA on white. On warm gray modules,
   eyebrows go black (guidelines allow red or black). */
.card .eyebrow, .card .label, .sec .n, .note .label, .transcript .label, .panel .group-label { color: #000 !important; }

/* Narrower windows: keep the logo whole and stop the site name running into
   the menu (the dashboard has five menu items). */
.brand { flex: none; }
.brand-logo { flex: none; max-width: none; }
@media (max-width: 1240px) {
  .topbar:has(.nav-pill) .brand-name, .hero-top:has(.nav-pill) .brand-name { display: none; }
}
@media (max-width: 1020px) {
  .nav-pill { gap: 16px; }
  .nav-pill a, .nav-pill button { font-size: 14px; }
}
@media (max-width: 900px) {
  .brand-logo { height: 18px; }
  .topbar { gap: 14px; }
}
@media (max-width: 840px) {
  .nav-pill { gap: 11px; }
  .nav-pill a, .nav-pill button { font-size: 13px; }
  .topbar .btn-sm, .topbar .demo-flag { padding-left: 10px; padding-right: 10px; }
}