/* ==========================================================================
   HWC Training Portal
   Palette matches the Trauma & Grief Center site (hwc.mmhpi.org). If you change
   a colour here, change src/brand.js too — certificate.js draws PDFs and cannot
   read CSS, so it keeps its own copy of the same values.
   ========================================================================== */

/* ---- fonts ---------------------------------------------------------------
   Montserrat stands in for Gotham, which is licensed to the main site and not
   ours to redistribute. Self-hosted: no CDN, works on locked-down networks. */
@font-face {
  font-family: 'Montserrat';
  src: url('/public/fonts/montserrat.woff2') format('woff2-variations'),
       url('/public/fonts/montserrat.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens --------------------------------------------------------------
   One scheme only: blue and white. The app never goes dark — a dark scheme
   turns every surface into another shade of navy, and blue-on-blue is exactly
   what this design forbids. Dark ground exists in two deliberate places (the
   entry hero and the player letterbox), and everything on it is white. */
:root {
  color-scheme: light;

  --navy-900: #0E2436;
  --navy-800: #142E43;
  --navy-700: #1D4363;
  --blue-600: #285F9F;
  --blue-700: #1F4C80;
  --cyan-500: #00B0DA; /* white surfaces only — on navy it is blue-on-blue */
  --grey-050: #FAFBFC;
  --grey-100: #F1F4F7;
  --grey-200: #E1E8ED;
  --grey-300: #C5CBD0;
  --grey-500: #5F7183;

  --ink: var(--navy-700);
  --ink-strong: var(--navy-800);
  --ink-muted: var(--grey-500);
  --ground: #fff;
  --surface: #fff;
  --surface-alt: var(--grey-050);
  --line: var(--grey-200);
  --line-strong: var(--grey-300);
  --action: var(--blue-600);
  --action-hover: var(--blue-700);
  --action-ink: #fff;
  --action-wash: rgba(40, 95, 159, .06);
  --focus: var(--blue-600);

  --ok-bg: #E7F4EA;   --ok-line: #BFE3C6;   --ok-ink: #1D6B2F;
  --warn-bg: #FFF4E0; --warn-line: #F0DDB8; --warn-ink: #8A5A00;
  --err-bg: #FBEAEA;  --err-line: #EECCCC;  --err-ink: #A4262C;

  --font: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --step--1: .875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: 2.1875rem;
  --lh-tight: 1.2;
  --lh-body: 1.65;

  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 3px rgba(20, 46, 67, .08);
  --shadow-2: 0 4px 12px rgba(20, 46, 67, .10);
  --dur: 160ms;
  --ease: cubic-bezier(.2, .6, .3, 1);

  --measure: 68ch;
  --width: 1080px;
  --width-narrow: 620px;
  --width-wide: 1320px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: var(--lh-tight); margin: 0 0 var(--sp-3); font-weight: 700; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--action); }
a:hover { color: var(--action-hover); }

img, svg { max-width: 100%; }
img { height: auto; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.icon { width: 1.15em; height: 1.15em; flex: none; }

/* ---- utilities ----------------------------------------------------------- */
/* public/launcher.js shows the certificate button by removing this class, so it
   has to beat the component rules that set `display` — .btn is declared later in
   this file and would otherwise win on source order. */
.hidden { display: none !important; }
.muted { color: var(--ink-muted); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  box-shadow: var(--shadow-2); text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: var(--sp-4); }

.linkish {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--action); cursor: pointer;
  text-decoration: none;
}
.linkish:hover { color: var(--action-hover); text-decoration: underline; }
.linkish--sm { font-size: var(--step--1); }

/* ---- page chrome --------------------------------------------------------- */
.masthead { border-bottom: 1px solid var(--line); background: var(--surface); }
.masthead__inner {
  max-width: var(--width); margin: 0 auto;
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap;
}
.masthead__brand { display: inline-flex; line-height: 0; }
.masthead__brand img { width: 260px; height: auto; }
.masthead__nav { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.masthead__lang { margin: 0; }
.masthead--admin .masthead__title { font-size: var(--step-2); margin: 0; }
.masthead--admin .masthead__sub { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }

main { max-width: var(--width); margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }
main.narrow { max-width: var(--width-narrow); }
main.wide { max-width: var(--width-wide); }

.site-footer { border-top: 1px solid var(--line); background: var(--surface-alt); }
.site-footer__inner {
  max-width: var(--width); margin: 0 auto;
  padding: var(--sp-5); color: var(--ink-muted); font-size: var(--step--1);
}
.site-footer__meta { margin: var(--sp-2) 0 0; }

.page__title { font-size: var(--step-4); }
.page__lead { max-width: var(--measure); color: var(--ink-muted); margin-bottom: var(--sp-6); }
.page__cta { margin-top: var(--sp-6); }

/* ---- card ---------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
}
.card--center { text-align: center; }
.card__title { font-size: var(--step-3); }
.card__lead { color: var(--ink-muted); max-width: var(--measure); }
.card--center .card__lead { margin-left: auto; margin-right: auto; }

.panel {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.panel__title { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.panel__lead { color: var(--ink-muted); font-size: var(--step--1); }
.panel__eyebrow {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--sp-2);
}
.panel--next {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--sp-5); margin-top: var(--sp-5);
}

.actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.card--center .actions { justify-content: center; }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-5);
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font: inherit; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn--primary { background: var(--action); color: var(--action-ink); }
.btn--primary:hover { background: var(--action-hover); color: var(--action-ink); }
.btn--ghost { background: transparent; color: var(--action); border-color: var(--action); }
.btn--ghost:hover { background: var(--action-wash); color: var(--action-hover); }
.btn--quiet { background: var(--surface-alt); color: var(--ink); border-color: var(--line); }
.btn--quiet:hover { background: var(--grey-100); color: var(--ink); }
.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding: var(--sp-2) var(--sp-4); font-size: var(--step--1); }

/* ---- alerts -------------------------------------------------------------- */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-md);
  border: 1px solid; margin-bottom: var(--sp-5);
}
.alert--error { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); }
.alert--success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.alert .icon { margin-top: .15em; }

/* ---- forms --------------------------------------------------------------- */
.field { margin-bottom: var(--sp-5); }
.field label, fieldset legend { display: block; font-weight: 600; margin-bottom: var(--sp-2); }
.field__tag {
  font-weight: 400; font-size: var(--step--1); color: var(--ink-muted);
}
.field__note { margin: var(--sp-2) 0 0; font-size: var(--step--1); color: var(--ink-muted); }
.field__note--suggest { color: var(--warn-ink); }

/* Two fields on one line: first/last name, state/zip. Collapses at 640px with
   the rest of the form. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field-row--state { grid-template-columns: 2fr 1fr; }

/* The four password requirements. Unmet is the resting state — a fresh field
   shows all four as things still to do, not as failures, so there is no red on a
   form nobody has typed into yet. */
.pwrules { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-1); }
.pwrule {
  position: relative; padding-left: 22px;
  font-size: var(--step--1); color: var(--ink-muted);
}
.pwrule::before {
  content: ""; position: absolute; left: 4px; top: .45em;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); box-sizing: border-box;
}
.pwrule[data-met] { color: var(--ok-ink); }
.pwrule[data-met]::before {
  border-color: var(--ok-ink); background: var(--ok-ink);
}

.consent { margin-top: var(--sp-5); }
.consent__box {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  align-items: start; font-weight: 400; margin-bottom: var(--sp-2);
  font-size: var(--step--1); line-height: var(--lh-body); cursor: pointer;
}
.consent__box input { margin: .2em 0 0; width: 20px; height: 20px; accent-color: var(--action); flex: none; }
.consent__box:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--r-sm); }

.entry__who {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-4); font-size: var(--step--1); color: var(--ink-muted);
}
.entry__who span { font-weight: 600; color: var(--ink); }

select {
  width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4);
  font: inherit; font-size: var(--step-0); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
}
select:hover { border-color: var(--ink-muted); }
select:focus { border-color: var(--action); }

input[type="password"] {
  display: block; width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4);
  font: inherit; font-size: var(--step-0); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
}
input[type="password"]:hover { border-color: var(--ink-muted); }
input[type="password"]:focus { border-color: var(--action); }

input[type="text"], input[type="email"], input[type="search"] {
  display: block; width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  font: inherit; color: var(--ink);
  background: var(--ground);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input[type="text"]:hover, input[type="email"]:hover { border-color: var(--ink-muted); }
input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus {
  outline: none; border-color: var(--action);
  box-shadow: 0 0 0 3px var(--action-wash);
}
input::placeholder { color: var(--ink-muted); opacity: .8; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
fieldset legend { padding: 0; }

/* role picker */
.roles__grid { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.role {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--sp-3); align-items: start;
  padding: var(--sp-4);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.role:hover { border-color: var(--line-strong); background: var(--surface-alt); }
.role input { margin: .3em 0 0; width: 20px; height: 20px; accent-color: var(--action); flex: none; }
.role__text { display: block; }
.role__label { display: block; font-weight: 600; }
.role__hint { display: block; font-size: var(--step--1); color: var(--ink-muted); margin-top: var(--sp-1); }
.role__badge {
  align-self: center; white-space: nowrap;
  font-size: var(--step--1); font-weight: 600;
  color: var(--ink-muted); background: var(--surface-alt);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3);
}
.role:has(input:checked) {
  border-color: var(--action); background: var(--action-wash);
  box-shadow: inset 0 0 0 1px var(--action);
}
.role:has(input:checked) .role__badge { color: var(--action); border-color: var(--action); background: var(--surface); }
.role:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* language toggle */
.segmented__track {
  display: inline-flex; gap: var(--sp-1); margin-top: var(--sp-2);
  padding: var(--sp-1);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.segmented__option { position: relative; margin: 0; }
.segmented__option input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.segmented__option span {
  display: block; padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill); font-size: var(--step--1); font-weight: 600;
  color: var(--ink-muted);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented__option input:checked + span { background: var(--action); color: var(--action-ink); }
.segmented__option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- entry page ----------------------------------------------------------
   Split hero: brand panel left, sign-in column right. This page has no masthead
   — the panel is the brand — so it is the one <main> that goes full bleed. The
   card column is a fixed 460px because the field inside it should not stretch
   to a 1400px monitor. */
/* Two thirds / one third. Fractional rather than a fixed 460px column so the
   split holds its proportion on any monitor. The 360px floor only bites below
   1080px, where a true third would leave the selects too narrow; the padding
   drops at the same point so the form still gains room rather than losing it. */
.entry {
  max-width: none;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr);
  min-height: 100vh;
  min-height: 100svh;
}

/* Sticky and sized to the viewport rather than stretched to the row. Revealing
   the registration fieldset makes the card column ~2000px tall; without this the
   panel grows to match and the mission ends up marooned in the middle of it. */
.hero {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--navy-900);
  color: #fff;
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-7);
}
/* The panel is two thirds of the screen but the copy inside it is measured, so
   left-aligning everything piles all the leftover navy against the card. Centre
   the content as one column instead, and the gap splits evenly either side. The
   brand, the copy and the stats share a max-width so their left edges line up. */
.hero > * { width: 100%; max-width: 560px; margin-inline: auto; }

.hero__brand { display: inline-flex; line-height: 0; }
.hero__brand img { width: 260px; height: auto; }
/* Everything on the navy panel is white — full white for what must be read,
   translucent white for what supports it. Never cyan or a blue-grey: on navy
   those read as blue-on-blue, and this app is blue and white only. */
.hero__eyebrow {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-bottom: var(--sp-3);
}
/* Measured so the headline wraps to three or four lines instead of running the
   full width of the panel. ch is relative to the font size it sits at, so this
   holds its shape when --step-3 takes over on small screens. */
.hero__title { font-size: 2.375rem; max-width: 21ch; margin-bottom: var(--sp-4); color: #fff; }
.hero__lead { color: rgba(255, 255, 255, .85); max-width: 46ch; line-height: var(--lh-body); margin: 0; }

.hero__stats { list-style: none; display: flex; gap: var(--sp-6); margin: 0 0 var(--sp-5); padding: 0; }
.hero__stats li { color: rgba(255, 255, 255, .8); font-size: var(--step--1); }
.hero__stats b { display: block; font-size: var(--step-3); color: #fff; line-height: 1.1; }
.hero__note { color: rgba(255, 255, 255, .66); font-size: var(--step--1); margin: 0; max-width: 46ch; }

.entry__card {
  background: #fff;
  color: var(--ink);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* The column is a third of the screen, but the form inside it should not be —
     an email field 600px wide on a large monitor looks broken. Cap the content
     and centre it in whatever the column turns out to be. */
  align-items: center;
}
.entry__card > * { width: 100%; max-width: 460px; }
.entry__eyebrow {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--sp-2);
}
.entry__title { font-size: var(--step-3); }
.entry__lead { color: var(--ink-muted); margin-bottom: var(--sp-5); }
.entry__form { margin-top: var(--sp-5); }
.entry__alt { margin-top: var(--sp-4); text-align: center; font-size: var(--step--1); }
.entry__note { margin: var(--sp-4) 0 0; text-align: center; font-size: var(--step--1); color: var(--ink-muted); }
.entry__links {
  display: flex; justify-content: center; gap: var(--sp-5);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.entry__links .masthead__lang { margin: 0; }
.reg { margin: 0; }

/* ---- learning path ------------------------------------------------------- */
.path__head { margin-bottom: var(--sp-7); }
.path__title { font-size: var(--step-4); margin-bottom: var(--sp-2); }
.path__who { color: var(--ink-muted); margin-bottom: var(--sp-5); }
.path__tools { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin: var(--sp-4) 0 0; }

.progress { max-width: 420px; }
.progress__track {
  height: 8px; border-radius: var(--r-pill);
  background: var(--grey-200); overflow: hidden;
}
.progress__fill {
  height: 100%; border-radius: var(--r-pill);
  background: var(--action);
  transition: width var(--dur) var(--ease);
}
.progress__label { margin: var(--sp-2) 0 0; font-size: var(--step--1); color: var(--ink-muted); }

.steps { list-style: none; margin: 0; padding: 0; }
.step {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
}
/* the spine */
.step::before {
  content: ""; position: absolute;
  left: 21px; top: 48px; bottom: 0; width: 2px;
  background: var(--line);
}
.step:last-child::before { display: none; }
.step[data-state="completed"]::before { background: var(--ok-line); }

.step__marker {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line);
  color: var(--ink-muted); position: relative; z-index: 1;
}
.step__marker .icon { width: 1.25rem; height: 1.25rem; }
.step[data-state="completed"] .step__marker {
  background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink);
}
.step[data-state="active"] .step__marker {
  background: var(--action); border-color: var(--action); color: var(--action-ink);
  box-shadow: 0 0 0 4px var(--action-wash);
}

.step__body { padding-top: var(--sp-1); min-width: 0; }
.step[data-state="active"] .step__body {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-5);
  box-shadow: var(--shadow-1); margin-top: -4px;
}
.step__eyebrow {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--sp-1);
}
.step__title { font-size: var(--step-1); margin: 0 0 var(--sp-2); }
.step[data-state="active"] .step__title { font-size: var(--step-2); }
.step[data-state="upcoming"] .step__title { color: var(--ink-muted); font-weight: 600; }
.step__meta { font-size: var(--step--1); color: var(--ink-muted); margin: 0 0 var(--sp-3); }
.step__hint { color: var(--warn-ink); }
.step__actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.steps--flat .step { padding-bottom: var(--sp-4); }
.steps--flat .step::before { display: none; }

/* ---- completion ---------------------------------------------------------- */
.done__mark {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto var(--sp-5);
}
.done__mark .icon { width: 2rem; height: 2rem; }
.done__mark[data-state="done"] { background: var(--ok-bg); color: var(--ok-ink); }
.done__mark[data-state="saved"] { background: var(--warn-bg); color: var(--warn-ink); }
.done__course { font-weight: 600; }

/* ---- help ---------------------------------------------------------------- */
.faq { display: grid; gap: var(--sp-5); }
.faq__item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: var(--sp-5);
}
.faq__q { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.faq__a { color: var(--ink-muted); max-width: var(--measure); margin: 0; }

/* ---- player -------------------------------------------------------------- */
.player { display: flex; flex-direction: column; height: 100vh; background: var(--navy-900); }
.player__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--navy-800); color: #fff; flex: none;
}
.player__title { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.player__home { display: inline-flex; align-items: center; gap: var(--sp-2); color: rgba(255, 255, 255, .85); text-decoration: none; flex: none; }
.player__home:hover { color: #fff; }
.player__course {
  font-weight: 600; font-size: var(--step--1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.player__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.player__learner { color: rgba(255, 255, 255, .85); font-size: var(--step--1); }
.player__frame { flex: 1; width: 100%; border: 0; background: #fff; }
.player .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.player .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.player .btn--quiet { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; }
.player .btn--quiet:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* ---- admin --------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-4);
}
.stat__num { font-size: var(--step-3); font-weight: 700; line-height: 1.1; }
.stat__total { font-size: var(--step-0); color: var(--ink-muted); font-weight: 400; }
.stat__label { color: var(--ink-muted); font-size: var(--step--1); margin: var(--sp-1) 0 var(--sp-3); }
.stat__bar { height: 4px; border-radius: var(--r-pill); background: var(--grey-200); overflow: hidden; }
.stat__fill { height: 100%; background: var(--action); }

.toolbar {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.toolbar__search { flex: 1 1 320px; }
.toolbar select {
  min-height: 48px; padding: var(--sp-3) var(--sp-4);
  font: inherit; font-size: var(--step-0); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
}
.toolbar select:focus-visible { border-color: var(--action); }

.table-wrap { overflow-x: auto; }
.nowrap { white-space: nowrap; }
.warnish { color: var(--warn-ink); }

.roster__name { font-weight: 600; text-decoration: none; }
.roster__name:hover { text-decoration: underline; }
.roster__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4);
  font-size: var(--step--1);
}
.roster__pages { display: flex; gap: var(--sp-2); }
.btn.is-disabled { color: var(--line-strong); pointer-events: none; }

/* Row-level progress. Narrower and quieter than .progress, which is the
   learner's own headline number. */
.meter { display: flex; align-items: center; gap: var(--sp-3); }
.meter__track {
  width: 120px; height: 6px; border-radius: var(--r-pill);
  background: var(--grey-200); overflow: hidden; flex: none;
}
.meter__fill { height: 100%; border-radius: var(--r-pill); background: var(--action); }
.meter__label { white-space: nowrap; }

/* ---- admin: one learner ------------------------------------------------- */
.backlink { margin-bottom: var(--sp-4); font-size: var(--step--1); }
.record__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.record__head .page__title { margin-bottom: var(--sp-1); }
.record__head .actions { margin-top: 0; }
.record__role { font-size: var(--step--1); }

.records { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-6) 0; }
.record {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4);
  align-items: center; padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.record__title { font-weight: 600; margin: 0 0 var(--sp-1); }
.record__meta { color: var(--ink-muted); font-size: var(--step--1); margin: 0; }
.record__side { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

.rolechange { margin-bottom: var(--sp-6); }
.rolechange summary { display: inline-flex; list-style: none; cursor: pointer; }
.rolechange summary::-webkit-details-marker { display: none; }
.rolechange form {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--r-md);
}
.rolechange .field__note { flex: 1 0 100%; margin: 0; }
.rolechange select {
  flex: 1 1 320px; min-height: 44px; padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: var(--step--1); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
}

.record__head .actions form { margin: 0; }
.resetlink {
  display: inline-block; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--step--1);
  word-break: break-all; user-select: all;
}

.trail { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.trail li { font-size: var(--step--1); color: var(--ink-muted); }

/* ---- admin: email studio ------------------------------------------------- */
textarea {
  display: block; width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font: inherit; color: var(--ink);
  background: var(--ground);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  resize: vertical;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea:hover { border-color: var(--ink-muted); }
textarea:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-wash); }

.studio {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sp-6); align-items: start; margin-top: var(--sp-5);
}
.studio__tabs {
  display: flex; gap: var(--sp-5); flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.studio__form .field label { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.studio__vars { display: inline-flex; gap: var(--sp-1); flex-wrap: wrap; margin-left: auto; }
.studio__var {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; font-weight: 400;
  color: var(--ink-muted); background: var(--surface-alt);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 8px;
}
.studio__edited {
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--action); border: 1px solid var(--action);
  border-radius: var(--r-pill); padding: 0 8px;
}
.studio__reset { margin-top: var(--sp-4); }
.studio__test { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }
.studio__test input { flex: 1 1 260px; width: auto; }
.studio__mailoff { color: var(--warn-ink); }
.studio__preview { position: sticky; top: var(--sp-4); }
.studio__preview .preview__frame { height: 760px; }

@media (max-width: 1100px) {
  .studio { grid-template-columns: minmax(0, 1fr); }
  .studio__preview { position: static; }
}

/* ---- review mode ----------------------------------------------------------
   Injected for invited reviewers only. Blue and white like everything else:
   blue pins with white numerals, white cards with blue accents. The layer is
   pointer-events:none so it never blocks the page (or the course iframe);
   only the pins and composer re-enable themselves. */
.review-layer {
  position: absolute; top: 0; left: 0; width: 100%;
  pointer-events: none; z-index: 900;
}
.review-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--action); color: #fff;
  border: 2px solid #fff; box-shadow: var(--shadow-2);
  font: 700 .8rem/1 var(--font); cursor: pointer;
  pointer-events: auto;
}
.review-pin:hover { background: var(--action-hover); }
.review-pin--done { background: var(--grey-300); color: var(--ink); }

.review-trigger {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 920;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-3) var(--sp-5);
  background: var(--action); color: #fff;
  border: 0; border-radius: var(--r-pill);
  font: 600 var(--step--1)/1.2 var(--font); cursor: pointer;
  box-shadow: var(--shadow-2);
}
.review-trigger:hover { background: var(--action-hover); }
.review-trigger__count {
  background: #fff; color: var(--action);
  border-radius: var(--r-pill); padding: 1px 8px; font-size: .72rem;
}
.review-trigger--bar .review-trigger__count { background: rgba(255, 255, 255, .2); color: #fff; }

.review-banner {
  position: fixed; top: var(--sp-4); left: 50%; transform: translateX(-50%);
  z-index: 940; max-width: min(92vw, 480px); text-align: center;
  background: var(--navy-800); color: #fff;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  font-size: var(--step--1); box-shadow: var(--shadow-2);
}
.review-shield {
  position: fixed; z-index: 930;
  display: grid; place-items: center; text-align: center;
  background: rgba(255, 255, 255, .85); color: var(--ink);
  border: 2px dashed var(--line-strong);
  font-size: var(--step--1); padding: var(--sp-5);
}
body.review-pinning { cursor: crosshair; }
body.review-pinning a, body.review-pinning button:not([data-review-ui]) { cursor: crosshair; }

.review-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 950;
  width: min(360px, 92vw);
  background: #fff; border-left: 1px solid var(--line); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur) var(--ease);
}
.review-panel--open { transform: translateX(0); }
.review-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
}
.review-panel__who { margin: 0; font-weight: 600; font-size: var(--step--1); color: var(--ink); }
.review-panel__close {
  background: none; border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--ink-muted); padding: var(--sp-1);
}
.review-panel__close:hover { color: var(--ink); }
.review-panel__actions {
  display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.review-panel__list { overflow-y: auto; padding: var(--sp-4) var(--sp-5); flex: 1; }

.review-btn {
  min-height: 40px; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill); border: 1.5px solid var(--action);
  background: #fff; color: var(--action);
  font: 600 var(--step--1)/1.2 var(--font); cursor: pointer;
}
.review-btn:hover { background: var(--action-wash); }
.review-btn--primary { background: var(--action); color: #fff; }
.review-btn--primary:hover { background: var(--action-hover); }
.review-btn[disabled] { opacity: .6; cursor: default; }
.review-linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--action); font: inherit; font-size: var(--step--1);
}
.review-linkish:hover { color: var(--action-hover); text-decoration: underline; }

.review-row { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.review-row__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-1); font-size: .72rem; color: var(--ink-muted);
}
.review-row__num {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--action); color: #fff; font-weight: 700; flex: none;
}
.review-row__done {
  margin-left: auto; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600; color: var(--ok-ink);
}
.review-row__body { margin: 0; font-size: var(--step--1); white-space: pre-wrap; }
.review-row__tools { display: flex; gap: var(--sp-4); margin: var(--sp-2) 0 0; }
.review-row--flash { background: var(--action-wash); }
.review-empty { color: var(--ink-muted); font-size: var(--step--1); }

.review-composer {
  position: absolute; z-index: 960; width: 330px; max-width: 92vw;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); padding: var(--sp-4);
  pointer-events: auto;
}
.review-composer__title {
  margin: 0 0 var(--sp-2); font-size: .78rem; font-weight: 600; color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.review-edit {
  width: 100%; min-height: 84px; margin-bottom: var(--sp-2);
  font-size: var(--step--1);
}

/* ---- admin: review inbox -------------------------------------------------- */
.review-inbox__mint { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.review-inbox__mint input { flex: 1 1 260px; width: auto; }
.review-inbox__anchor {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem;
  background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 1px 6px;
}
.review-inbox__anchor--page { font-family: var(--font); color: var(--ink-muted); }
.review-inbox__body { margin: var(--sp-2) 0; white-space: pre-wrap; }

/* ---- admin: reminder preview -------------------------------------------- */
.preview {
  background: var(--grey-100); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.preview__frame { display: block; width: 100%; height: 620px; border: 0; background: #F1F4F7; }
.preview__subject { font-weight: 600; font-size: var(--step-1); margin-bottom: var(--sp-2); }
.preview code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em;
}
table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
th, td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); }
th { color: var(--ink-muted); font-weight: 600; white-space: nowrap; }

.pill {
  display: inline-block; padding: 2px 10px; border-radius: var(--r-pill);
  font-size: var(--step--1); font-weight: 600; white-space: nowrap;
}
.pill[data-state="done"] { background: var(--ok-bg); color: var(--ok-ink); }
.pill[data-state="progress"] { background: var(--warn-bg); color: var(--warn-ink); }
.pill[data-state="new"] { background: var(--surface-alt); color: var(--ink-muted); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1200px) {
  /* Below this the 360px floor on the entry column starts holding it wider than
     a third. Trim the padding so the extra width goes to the form rather than to
     the margins. Must live here, after the base rules — a media query adds no
     specificity, so declaring it earlier would simply lose. */
  .hero { padding: var(--sp-6) var(--sp-6) var(--sp-5); }
  .entry__card { padding: var(--sp-6) var(--sp-5); }
}

@media (max-width: 900px) {
  /* One column. The panel stays on top rather than moving below the card: it is
     what tells a first-time visitor what this is, and an unexplained email field
     is a worse opening than one screen of scrolling. It gets shorter instead. */
  .entry { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero {
    position: static; min-height: 0;
    padding: var(--sp-5) var(--sp-5) var(--sp-6); gap: var(--sp-5);
  }
  .hero__title { font-size: var(--step-3); }
  .hero__stats { gap: var(--sp-5); margin-bottom: var(--sp-4); }
  .entry__card { padding: var(--sp-6) var(--sp-5); }
  .entry__links { margin-top: var(--sp-5); }
}

@media (max-width: 640px) {
  :root { --step-3: 1.5rem; --step-4: 1.75rem; }
  main { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .masthead__inner { padding: var(--sp-3) var(--sp-4); }
  .masthead__brand img { width: 200px; }
  .masthead__nav { gap: var(--sp-4); }
  .card, .entry__card { padding: var(--sp-5); }
  .field-row, .field-row--state { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .role { grid-template-columns: auto 1fr; }
  .role__badge { grid-column: 2; justify-self: start; }
  .step { grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-3); }
  .step::before { left: 17px; top: 40px; }
  .step__marker { width: 36px; height: 36px; }
  .step[data-state="active"] .step__body { padding: var(--sp-4); }
  .step__actions .btn { flex: 1 1 auto; }
  .player__learner { display: none; }
  .player__home span { display: none; }
}

/* ---- motion & print ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .masthead, .site-footer, .actions, .path__tools, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .faq__item, .panel--next { border: 1px solid #999; box-shadow: none; }
  main { max-width: none; padding: 0; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}