/* ==========================================================================
   Learning Bridge

   The design system carried over from the proof of concept (its
   docs/BRAND.md): the look follows the logo, people side by side under the
   arches of a bridge, four bright colours on white and a soft grey wordmark.
   Rounded corners, soft shadows, one geometric typeface, violet leading and
   aqua, plum and lime kept for decoration, the way the logo uses them.

   Hand-written and self-contained: the fonts are served from here, with no
   CDN and no build step.
   ========================================================================== */

/* --- type -------------------------------------------------------------- */

/* DM Sans: geometric and open like the wordmark, under the OFL. One variable
   file carries every weight. */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-var.4630490c482d.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Italic-var.3c58c9cd28c2.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.807be4edf474.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- colour ------------------------------------------------------------ */

/* Three themes, each with the logo version that belongs on it:

     light — the default: white and cool grey, the logo in colour
     dark  — deep indigo navy, the logo reversed
     brand — an indigo header over soft lavender, the logo in white

   Every theme defines every token, and tests/shell/test_theme.py reads them
   out of this file: each text pair is held to WCAG AA, each focus ring to
   3:1. Each theme is also declared on [data-theme-sample], so a page can show
   all three side by side, drawn from these very tokens.

   Violet leads. As a fill it is the logo's own #6E7DED; wherever text sits on
   it or it sits behind text it is a deeper violet of the same hue, because
   the logo's is 3.6:1 on white. Aqua, plum and lime decorate and never carry
   text. */

:root,
:root[data-theme="light"],
[data-theme-sample="light"] {
  color-scheme: light;

  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f0f2f9;
  --surface-3: #e4e8f4;
  --line: #e2e5f0;
  --line-bright: #cdd2e4;
  --line-hover: #a8afcb;
  --topbar-bg: rgba(255, 255, 255, 0.88);
  --topbar-text: #1b1d3a;
  --topbar-dim: #474c68;
  --topbar-line: #e2e5f0;
  --topbar-well: #eef0f7;

  --text: #1b1d3a;
  --text-dim: #474c68;
  --text-faint: #5c617e;

  --accent: #5262e6;
  --accent-fg: #4250d4;
  --accent-dim: #a9b2f4;
  --accent-ink: #ffffff;
  --accent-wash: #eceefe;
  --accent-hover: #4352d8;
  --focus: #4250d4;

  --met: #13804b;
  --met-ink: #0b5a33;
  --met-wash: #e3f5ea;
  --met-line: #9fd9b7;
  --partial: #9a5300;
  --partial-ink: #693800;
  --partial-wash: #fff0da;
  --partial-line: #f1c27c;
  --danger: #c0283b;
  --danger-ink: #86141f;
  --danger-wash: #fce7ea;
  --danger-line: #f2a6b0;
  --info: #0a66c7;

  --brand-violet: #6e7ded;
  --brand-aqua: #14ccd6;
  --brand-plum: #d661cc;
  --brand-lime: #b2fa40;

  /* the header logo: colour, as supplied */
  --logo-wordmark: #878787;
  --logo-violet: #6e7ded;
  --logo-aqua: #14ccd6;
  --logo-plum: #d661cc;
  --logo-lime: #b2fa40;
  --logo-plum-violet: #5c30bd;
  --logo-violet-aqua: #0a66c7;
  --logo-aqua-lime: #0dc738;

  --shadow-1: 0 1px 2px rgba(27, 29, 58, 0.06), 0 1px 1px rgba(27, 29, 58, 0.04);
  --shadow-2: 0 10px 28px rgba(27, 29, 58, 0.1), 0 2px 6px rgba(27, 29, 58, 0.06);

  /* the maps (D-52): the background with no base, the spots, the edge
     between them, and the employer's heat from its faintest to its strongest */
  --map-bg: #e4e8f4;
  --map-point: #4250d4;
  --map-line: #ffffff;
  --map-heat-low: #a9b2f4;
  --map-heat-high: #4250d4;
}

/* Dark: deep indigo navy, never flat black. */
:root[data-theme="dark"],
[data-theme-sample="dark"] {
  color-scheme: dark;

  --bg: #0e1024;
  --surface: #151834;
  --surface-2: #1b1f41;
  --surface-3: #252a55;
  --line: #262b52;
  --line-bright: #343a6b;
  --line-hover: #4a5190;
  --topbar-bg: rgba(14, 16, 36, 0.88);
  --topbar-text: #eef0fa;
  --topbar-dim: #aeb3d2;
  --topbar-line: #262b52;
  --topbar-well: #0a0c1d;

  --text: #eef0fa;
  --text-dim: #aeb3d2;
  --text-faint: #9096bc;

  --accent: #7d8bf6;
  --accent-fg: #a3aeff;
  --accent-dim: #4b56b8;
  --accent-ink: #0e1024;
  --accent-wash: #1e2350;
  --accent-hover: #929efa;
  --focus: #a3aeff;

  --met: #4fd891;
  --met-ink: #bdf0d3;
  --met-wash: #112b23;
  --met-line: #1f6b4a;
  --partial: #f6b95b;
  --partial-ink: #f8ddb0;
  --partial-wash: #2e2412;
  --partial-line: #7a5a1c;
  --danger: #ff7a86;
  --danger-ink: #ffc9cf;
  --danger-wash: #33141c;
  --danger-line: #8a2e3b;
  --info: #5cb8ff;

  --brand-violet: #6e7ded;
  --brand-aqua: #14ccd6;
  --brand-plum: #d661cc;
  --brand-lime: #b2fa40;

  /* the header logo: reversed — the wordmark goes white, the arches stay */
  --logo-wordmark: #f4f5fa;
  --logo-violet: #6e7ded;
  --logo-aqua: #14ccd6;
  --logo-plum: #d661cc;
  --logo-lime: #b2fa40;
  --logo-plum-violet: #5c30bd;
  --logo-violet-aqua: #0a66c7;
  --logo-aqua-lime: #0dc738;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 14px 34px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);

  /* the maps (D-52): the background with no base, the spots, the edge
     between them, and the employer's heat from its faintest to its strongest */
  --map-bg: #1b1f41;
  --map-point: #a3aeff;
  --map-line: #0e1024;
  --map-heat-low: #4b56b8;
  --map-heat-high: #a3aeff;
}

/* Brand: the indigo header carries the logo in white over a soft lavender
   page — the most colour of the three, still quiet where people read. */
:root[data-theme="brand"],
[data-theme-sample="brand"] {
  color-scheme: light;

  --bg: #f3f4fe;
  --surface: #ffffff;
  --surface-2: #eceefd;
  --surface-3: #dee2fb;
  --line: #dde1f7;
  --line-bright: #c5cbf0;
  --line-hover: #9ea7e3;
  --topbar-bg: rgba(70, 81, 207, 0.97);
  --topbar-text: #ffffff;
  --topbar-dim: #dde0ff;
  --topbar-line: #5a65d8;
  --topbar-well: #3a44b8;

  --text: #1a1c45;
  --text-dim: #474b78;
  --text-faint: #5a5f8c;

  --accent: #4c58d6;
  --accent-fg: #3e49c4;
  --accent-dim: #a6aeee;
  --accent-ink: #ffffff;
  --accent-wash: #e4e7ff;
  --accent-hover: #3f4ac6;
  --focus: #3e49c4;

  --met: #13804b;
  --met-ink: #0b5a33;
  --met-wash: #e3f5ea;
  --met-line: #9fd9b7;
  --partial: #9a5300;
  --partial-ink: #693800;
  --partial-wash: #fff0da;
  --partial-line: #f1c27c;
  --danger: #c0283b;
  --danger-ink: #86141f;
  --danger-wash: #fce7ea;
  --danger-line: #f2a6b0;
  --info: #0a66c7;

  --brand-violet: #6e7ded;
  --brand-aqua: #14ccd6;
  --brand-plum: #d661cc;
  --brand-lime: #b2fa40;

  /* the header logo: one colour, white on indigo */
  --logo-wordmark: #ffffff;
  --logo-violet: #ffffff;
  --logo-aqua: #ffffff;
  --logo-plum: #ffffff;
  --logo-lime: #ffffff;
  --logo-plum-violet: #ffffff;
  --logo-violet-aqua: #ffffff;
  --logo-aqua-lime: #ffffff;

  --shadow-1: 0 1px 2px rgba(70, 81, 207, 0.08), 0 1px 1px rgba(26, 28, 69, 0.04);
  --shadow-2: 0 10px 28px rgba(70, 81, 207, 0.16), 0 2px 6px rgba(26, 28, 69, 0.06);

  /* the maps (D-52): the background with no base, the spots, the edge
     between them, and the employer's heat from its faintest to its strongest */
  --map-bg: #dee2fb;
  --map-point: #3e49c4;
  --map-line: #ffffff;
  --map-heat-low: #a6aeee;
  --map-heat-high: #3e49c4;
}

/* --- layout and type ---------------------------------------------------- */

:root {
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  /* The logo has no corner anywhere, so neither does anything else. */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* the four arches, in order, as one bar */
  --bar: linear-gradient(90deg, #d661cc 0%, #6e7ded 34%, #14ccd6 67%, #b2fa40 100%);

  --gutter: 20px;
  --max: 1180px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* What has the focus is never under the bar that stays at the top (WCAG
   2.4.11): a page scrolls it into view below the bar. */
html { scroll-padding-top: 76px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
}

h1 { font-size: clamp(30px, 5.2vw, 52px); }
h2 { font-size: clamp(22px, 3.4vw, 30px); }
h3 { font-size: 18px; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hidden means hidden: a component's own display, a panel's grid say, would
   otherwise show what a page or a script hid. */
[hidden] { display: none !important; }

/* --- the bar: the four arches of the logo, in order, across the top ----- */

.stripe {
  height: 4px;
  background: var(--bar);
}

/* --- shell ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.topbar {
  border-bottom: 1px solid var(--topbar-line);
  background: var(--topbar-bg);
  color: var(--topbar-text);
  backdrop-filter: saturate(160%) blur(10px);
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
}

.topbar__spacer { flex: 1; }

/* The logo, inline, every colour a custom property of the theme: it turns
   reversed on dark and white on indigo the moment the theme switches. */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.logo {
  display: block;
  height: 30px;
  width: auto;
}

.logo--mark { display: none; height: 28px; }

/* On a phone the mark stands in for the logo; the link keeps the name. */
@media (max-width: 520px) {
  .logo--full { display: none; }
  .logo--mark { display: block; }
  .topbar__inner { gap: 8px; }
  .switch__opt { padding: 4px 6px; }
}

main { padding: 40px 0 88px; }

/* --- switches ----------------------------------------------------------- */

/* A pill of options with the current one lifted out of it — the shape every
   switch takes. The theme switch is three ordinary links with icons. */
.switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--topbar-well);
}

.switch__opt {
  display: grid;
  place-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  color: var(--topbar-dim);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.switch__opt svg { display: block; width: 14px; height: 14px; }
.switch__opt:hover { color: var(--topbar-text); }
.switch__opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.switch__opt.is-current {
  background: var(--surface);
  color: var(--accent-fg);
  box-shadow: var(--shadow-1);
}

/* --- labels and text ---------------------------------------------------- */

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-fg);
  margin-bottom: 12px;
}

.lede {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--text-dim);
  max-width: 62ch;
}

.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.mono { font-family: var(--mono); }

/* --- surfaces ---------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 22px;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 40px 0;
}

.section-head { margin-bottom: 18px; }
.section-head p { margin-top: 8px; }

/* --- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}

.btn:hover { background: var(--surface-2); border-color: var(--line-hover); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--sm { padding: 8px 13px; font-size: 13px; }

/* --- chips: a status in words, with a dot that says it too ------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 11px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text-dim);
}

.chip__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--text-faint);
}

.chip[data-status="met"] { border-color: var(--met-line); background: var(--met-wash); color: var(--met-ink); }
.chip[data-status="met"] .chip__dot { background: var(--met); }
.chip[data-status="partial"] { border-color: var(--partial-line); background: var(--partial-wash); color: var(--partial-ink); }
.chip[data-status="partial"] .chip__dot { background: var(--partial); }
.chip[data-status="danger"] { border-color: var(--danger-line); background: var(--danger-wash); color: var(--danger-ink); }
.chip[data-status="danger"] .chip__dot { background: var(--danger); }

/* --- the front page ------------------------------------------------------ */

.hero { padding: 26px 0 30px; }
.hero h1 { max-width: 16ch; }
.hero .lede { margin-top: 18px; }

/* The hero carries the logo's mark, large, beside the words: the arches rise
   one after another, the heads settle on them, and the mark keeps swaying.
   Anything moving for longer than five seconds needs a way to stop it (WCAG
   2.2.2): the button in its corner, static/js/hero.js. Under reduced motion
   nothing moves at all. */
.hero--brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 24px 56px;
  align-items: center;
}

.hero__art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

.hero__art::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-wash) 30%, transparent);
}

/* The arches multiply where they cross, which is how the logo's overlap
   colours came about, so each can move on its own and the crossings stay
   exact. The mark is a group of its own, so they multiply with each other and
   never with the page. */
.mark {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  isolation: isolate;
  transform-origin: 50% 100%;
}
.mark__arch { mix-blend-mode: multiply; }

.hero__motion {
  position: absolute;
  right: 6%;
  bottom: 12%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-dim);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}
.hero__motion:hover { color: var(--text); border-color: var(--line-hover); }
.hero__motion:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hero__motion svg { width: 14px; height: 14px; }
.hero__motion-play,
.is-still .hero__motion-pause { display: none; }
.is-still .hero__motion-play { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .mark { animation: mark-sway 7.2s ease-in-out 1.7s infinite; }
  .mark__arch {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation:
      arch-rise 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.15) both,
      arch-wave 3.6s ease-in-out 1.7s infinite;
  }
  .mark__arch--violet { animation-delay: 0.12s, 2.6s; }
  .mark__arch--aqua { animation-delay: 0.24s, 3.5s; }
  .mark__arch--lime { animation-delay: 0.36s, 4.4s; }
  .mark__head {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation:
      head-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.95s both,
      head-wave 3.6s ease-in-out 2.75s infinite;
  }
  .mark__head--aqua { animation-delay: 1.07s, 3.65s; }

  .is-still .mark { animation-play-state: paused; }
  .is-still .mark__arch,
  .is-still .mark__head { animation-play-state: running, paused; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__motion { display: none !important; }
}

@keyframes arch-rise { from { transform: scaleY(0); } }
@keyframes head-in { from { opacity: 0; transform: translateY(-60%) scale(0.4); } }
@keyframes arch-wave {
  0%, 100% { transform: scaleY(1); }
  25% { transform: scaleY(1.08); }
  75% { transform: scaleY(0.94); }
}
@keyframes head-wave {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-3.6px); }
  75% { transform: translateY(2.6px); }
}
@keyframes mark-sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(1.5deg); }
  75% { transform: rotate(-1.5deg); }
}

@media (max-width: 900px) {
  .hero--brand { grid-template-columns: minmax(0, 1fr); }
  .hero__art { display: none; }
}

/* --- the front page, signed out (D-56) ------------------------------------- */

/* What the platform is, how learning works, what organisations get, what it
   promises and what it does not, and the ways in: one column on a phone,
   side by side as soon as there is room. */
.hero--front h1 { max-width: 20ch; }
.front__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.front__section { margin-top: 48px; }
.front__section > h2 { margin-bottom: 18px; }
.front__steps,
.front__columns,
.front__glimpse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}
.front__steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: 0; padding: 0; list-style: none; }
.front__columns--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 22px; }
.front__step { padding: 18px; }
.front__step h3 { margin: 12px 0 6px; }
.front__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent-fg);
}
.front__icon--met { color: var(--met); }
.front__audience h3,
.front__promise h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.front__glimpse { margin: 14px 0 0; }
.front__talk { display: grid; gap: 10px; align-content: start; }
.front__profile h3 { font-size: 16px; margin-bottom: 12px; }
.front__profile .chips { margin-bottom: 12px; }
.front__pilot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 14px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--accent-wash);
}
.front__pilot p { flex: 1 1 16rem; margin: 0; font-weight: 600; }
.front__way h3 { margin-bottom: 8px; }
.front__way .btn { margin-top: 14px; }
.front__links { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }
.front__links ul { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; list-style: none; }
.front__links a { color: var(--accent-fg); font-weight: 600; }

/* --- the three themes, side by side ------------------------------------- */

/* Each sample re-declares its theme's tokens, so what it shows is exactly
   what that theme draws: its header, its logo, its surfaces. */
.themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.theme-sample {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

.theme-sample__bar {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid var(--topbar-line);
  background: var(--topbar-bg);
}

.theme-sample__bar .logo { height: 24px; }

.theme-sample__body {
  display: grid;
  gap: 14px;
  padding: 18px 16px 20px;
}

.theme-sample__body .card { padding: 16px; }
.theme-sample__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* --- the local stack ------------------------------------------------------ */

.stack {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stack__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.stack__row:last-child { border-bottom: 0; }
.stack__name { font-weight: 600; }
.stack__detail { grid-column: 1 / -1; font-size: 13px; color: var(--text-faint); }
.stack__detail a { color: var(--accent-fg); }

/* --- the account: signing in, and one's own settings --------------------- */

.account-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
}

.account-menu form { margin: 0; }

.account-menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--topbar-dim);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.account-menu__link:hover { color: var(--topbar-text); background: var(--topbar-well); }

.account-menu__icon { display: none; width: 20px; height: 20px; }

/* whose account it is: their initial in a circle, and their name */
.account-menu__you { gap: 8px; padding-left: 6px; color: var(--topbar-text); }

.account-menu__initial {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--topbar-well);
  color: var(--topbar-text);
  font-size: 13px;
  font-weight: 700;
}

.account-menu__name {
  display: inline-block;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

@media (max-width: 520px) {
  /* the logo's mark, the theme switch and the menu on one line: icons, with
     their names kept for screen readers */
  .account-menu { margin-left: 2px; gap: 0; }
  .account-menu__link { padding: 0 8px; }
  .account-menu__icon { display: block; }
  .account-menu__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.account-menu__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.account-menu__link--strong { color: var(--topbar-text); }

/* how many escalations nobody has taken up wait for a trainer (P3-01) */
.account-menu__link { position: relative; }
.account-menu__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--danger-wash);
  color: var(--danger-ink);
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 520px) {
  .account-menu__count { position: absolute; top: 0; right: 0; margin: 0; }
}
/* a trainer's menu has one way in more: icons up to a laptop's width, their
   names kept for screen readers and as tooltips, the count on its icon */
@media (max-width: 900px) {
  .account-menu--many .account-menu__link { padding: 0 8px; }
  .account-menu--many .account-menu__icon { display: block; }
  .account-menu--many .account-menu__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .account-menu--many .account-menu__count { position: absolute; top: 0; right: 0; margin: 0; }
}

/* --- toasts: what just happened, in the top corner -------------------- */

.toasts {
  position: fixed;
  top: 84px;
  right: 16px;
  z-index: 40;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  /* the gaps between toasts let clicks through to the page */
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px 10px 16px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-2);
  font-size: 15px;
  pointer-events: auto;
  transition: opacity 200ms ease, transform 200ms ease;
}

.toast[data-leaving] { opacity: 0; transform: translateY(-6px); }

.toast--success { border-color: var(--met-line); background: var(--met-wash); color: var(--met-ink); }
.toast--warning { border-color: var(--partial-line); background: var(--partial-wash); color: var(--partial-ink); }
.toast--error { border-color: var(--danger-line); background: var(--danger-wash); color: var(--danger-ink); }

.toast__text { flex: 1; margin: 0; padding-top: 5px; }

.toast__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.toast__close:hover { background: rgba(127, 127, 127, 0.16); }
.toast__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.toast__close svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

@media (max-width: 520px) {
  .toasts { top: 76px; right: 12px; width: calc(100vw - 24px); }
}

.message {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
}

.message--success { border-color: var(--met-line); background: var(--met-wash); color: var(--met-ink); }
.message--warning { border-color: var(--partial-line); background: var(--partial-wash); color: var(--partial-ink); }
.message--error { border-color: var(--danger-line); background: var(--danger-wash); color: var(--danger-ink); }

.auth {
  display: grid;
  justify-items: center;
  padding: 8px 0 24px;
}

.auth__card {
  width: 100%;
  max-width: 440px;
  padding: 28px 24px;
}

.auth h1,
.manage h1 {
  margin-bottom: 10px;
  font-size: clamp(26px, 4vw, 32px);
}

.auth__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  color: var(--text-faint);
  font-size: 13px;
}

.auth__or::before,
.auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth__card > .btn { width: 100%; }
.auth__card > .message { margin-bottom: 16px; }
.auth__note { margin-top: 22px; font-size: 13.5px; }
.auth__hint { margin: 8px 0 0; font-size: 13.5px; text-align: center; }

/* --- forms ------------------------------------------------------------- */

.form {
  display: grid;
  gap: 16px;
  margin: 18px 0 0;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.auth .form__actions > .btn,
.auth .form__actions > .button-group { flex: 1 1 auto; }

.form__errors {
  padding: 12px 16px;
  border: 1px solid var(--danger-line);
  border-radius: var(--radius);
  background: var(--danger-wash);
  color: var(--danger-ink);
  font-size: 15px;
}

.field { display: grid; gap: 6px; }
.field__label { font-weight: 600; font-size: 14.5px; }

/* 16px keeps a phone from zooming in on a field it focuses. */
.field input:not([type="checkbox"], [type="radio"], [type="hidden"]),
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.field input:not([type="checkbox"], [type="radio"], [type="hidden"]):hover,
.field select:hover,
.field textarea:hover { border-color: var(--line-hover); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--focus);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.field input::placeholder { color: var(--text-faint); }

.field--invalid input:not([type="checkbox"], [type="radio"]),
.field--invalid select,
.field--invalid textarea { border-color: var(--danger); }

.field__help { margin: 0; color: var(--text-dim); font-size: 13.5px; }
.field__error { margin: 0; color: var(--danger); font-size: 13.5px; font-weight: 600; }

.field__check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.field__check input { width: 24px; height: 24px; accent-color: var(--accent); }

/* --- more buttons -------------------------------------------------------- */

.btn--danger {
  border-color: var(--danger-line);
  background: var(--danger-wash);
  color: var(--danger-ink);
}

.btn--danger:hover { border-color: var(--danger); background: var(--danger-wash); }

.btn-link {
  /* 24 px for any pointer (WCAG 2.5.8), without moving the line */
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--accent-fg);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.btn-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.button-group { display: flex; flex-wrap: wrap; gap: 10px; }
.button-group--vertical { flex-direction: column; align-items: stretch; }

/* --- an organisation ------------------------------------------------------ */

.page {
  display: grid;
  gap: 18px;
  max-width: 880px;
}

.page > h1 { font-size: clamp(28px, 4.4vw, 40px); }
.page > .eyebrow { margin-bottom: -8px; }
/* a long address or table never makes the page wider than the screen: the
   table scrolls in its own box, the address breaks (WCAG 1.4.10) */
.page > * { min-width: 0; }
.breakable { overflow-wrap: anywhere; }
.page > .eyebrow a { color: inherit; }

.link-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-list a { color: var(--accent-fg); font-weight: 600; }

.roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roles li { display: inline-flex; align-items: center; gap: 8px; }
.roles form { margin: 0; }

.form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.form--inline .field { flex: 1 1 240px; }
.form--inline .field--narrow { flex: 1 1 160px; }

/* an invitation's QR code, scanned from across a table */
.qr.qr--large {
  width: min(320px, 100%);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
}

.qr svg { display: block; width: 100%; height: 100%; }

/* --- one's own account ---------------------------------------------------- */

.manage {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.manage__nav {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 4px;
}

.manage__nav a {
  padding: 10px 14px;
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.manage__nav a:hover { background: var(--surface-2); color: var(--text); }
.manage__nav a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-fg); }
.manage__nav a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.manage__body {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.manage__body > .form,
.manage__body > form { max-width: 520px; }

.panel { display: grid; gap: 12px; }
.panel__title { font-size: 20px; letter-spacing: -0.015em; }
.panel__body p { color: var(--text-dim); }
.panel__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* positioned, so text kept for screen readers in a wide table (.sr-only) stays
   in the box that scrolls, and never widens the page */
.table-wrap { position: relative; overflow-x: auto; }
.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.table th,
.table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.table th { color: var(--text-dim); font-size: 13px; font-weight: 600; }

.auth h2 {
  margin: 22px 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.qr {
  display: block;
  width: 216px;
  height: 216px;
  padding: 8px;
  border-radius: var(--radius);
  background: #ffffff;
}

/* recovery codes, the authenticator's secret: read character by character */
.field textarea[readonly],
.manage textarea { font-family: var(--mono); line-height: 1.7; }

details > summary {
  color: var(--accent-fg);
  font-weight: 600;
  cursor: pointer;
}

details[open] > summary { margin-bottom: 12px; }

@media (max-width: 760px) {
  .manage { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .manage__nav { position: static; display: flex; flex-wrap: wrap; }
}

/* The turn loop's prototype (P1-14): a conversation, one line at a time. */
.transcript { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.line { max-width: 46rem; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); }
.line p { margin: 0; }
.line--trainer { background: var(--surface-2); }
.line--learner { justify-self: end; background: var(--accent-wash, var(--surface-2)); }
.line--rules { font-size: 13px; color: var(--text-dim); border-style: dashed; }
.line__meta { margin-top: 6px !important; font-size: 12px; color: var(--text-faint); }
.transcript__waiting { margin: 12px 0 0; color: var(--text-dim); }

/* A learner's first steps (P2-02): questions answered by choosing, the
   documents they agree to, and their course's modules. */
.choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice legend { margin-bottom: 4px; padding: 0; }
.choice .field__check {
  padding: 10px 14px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background: var(--surface);
}
.choice .field__check:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.draft-note {
  margin: 0;
  padding: 12px 16px;
  border: 1px dashed var(--partial-line);
  border-radius: var(--radius);
  background: var(--partial-wash);
  color: var(--partial-ink);
  font-size: 15px;
}
.document section { display: grid; gap: 6px; }
.document h2 { font-size: 20px; letter-spacing: -0.015em; }
/* who says what, at a glance: the learner's lines narrower, and edged */
.line--learner { max-width: min(85%, 46rem); border-color: var(--accent-dim); }
.modules { display: grid; gap: 14px; margin: 0; padding-left: 22px; }
.modules p { margin: 0; }
.modules__title { font-weight: 600; }
.steps { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 18px; }
.steps a { color: var(--accent-fg); font-weight: 600; }
/* --- the one next thing, and where a thumb reaches (section 17) --------- */

.onward {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.onward__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-fg);
}

/* the footer only has the theme switch, for a phone */
.footer { display: none; }

@media (max-width: 600px) {
  /* the next thing is a bar along the bottom, in reach of a thumb */
  .onward {
    position: fixed;
    inset: auto 0 0;
    z-index: 25;
    flex-wrap: nowrap;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--text) 10%, transparent);
  }
  .onward__button { flex: 1; }
  body:has(.onward) { padding-bottom: 88px; }
  /* nor under the bar at the bottom (2.4.11) */
  html:has(.onward) { scroll-padding-bottom: 96px; }

  /* the answer stays at the bottom while the conversation scrolls above it */
  .form[data-answer-panel] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-inline: calc(-1 * var(--gutter));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  /* nor under the answer, which stays at the bottom */
  html:has(.form[data-answer-panel]) { scroll-padding-bottom: 240px; }
}

@media (max-width: 520px) {
  .topbar .switch { display: none; }
  .footer { display: block; padding: 0 0 32px; }
  .footer__inner { display: flex; justify-content: center; }
}

/* --- the trainer's panel (P3-01) ------------------------------------------ */

/* a page's tabs, the one shown marked */
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.tabs a {
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--text-dim);
  font-weight: 600;
  text-decoration: none;
}
.tabs a:hover { background: var(--surface-2); color: var(--text); }
.tabs a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-fg); }
.tabs a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.cell-link { color: var(--accent-fg); font-weight: 600; }

/* a table whose rows become cards on a phone, each value under its column's
   name; the names are for the eye, a screen reader has the table's own */
.table__label { display: none; }
@media (max-width: 600px) {
  .table--cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .table--cards,
  .table--cards tbody,
  .table--cards tr,
  .table--cards td { display: block; }
  .table--cards tr {
    margin-bottom: 10px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .table--cards td { padding: 4px 0; border: 0; }
  .table__label { display: block; color: var(--text-dim); font-size: 12px; font-weight: 600; }
}

/* how an answer was graded, in three layers (D-30) */
.graded { display: grid; gap: 8px; }
.graded p { margin: 0; }
.graded__head { font-weight: 700; margin-top: 6px; }
.graded__list,
.graded__reasons { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.graded__list li { display: grid; gap: 2px; }
.graded__criterion { font-weight: 600; }
.graded__score { color: var(--text-dim); }

/* a learner's report: each objective a conversation asked about */
.part > summary { font-size: 17px; }
.asked { display: grid; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.asked__objective { margin: 0; font-weight: 600; }

/* what its trainers wrote on an escalation, note by note */
.notes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.notes__entry { padding: 10px 14px; border-left: 3px solid var(--line); }
.notes__entry p { margin: 0; }

/* where a group goes wrong (P3-02): an objective or a topic at a time, each
   with a bar as many units wide as learners were asked about it, coloured by
   how they did; the same counts stand beside it in words */
.figures { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.figure { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.figure:first-child { padding-top: 0; border-top: 0; }
.figure p { margin: 0; }
.figure__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 16px; }
.figures__more { margin-top: 16px; }
.figures__more > .figures { margin-top: 12px; }
.bar { display: block; width: 100%; height: 12px; border-radius: 6px; background: var(--line); }
.bar__met { fill: var(--met); }
.bar__later { fill: var(--met-line); }
.bar__partly { fill: var(--partial); }
.bar__gap { fill: var(--danger); }
.bar__open { fill: var(--line-bright); }
.key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; color: var(--text-dim); font-size: 13px; }
.swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; }
.swatch--met { background: var(--met); }
.swatch--later { background: var(--met-line); }
.swatch--partly { background: var(--partial); }
.swatch--gap { background: var(--danger); }
.swatch--open { background: var(--line-bright); }
.missed, .counted { display: grid; gap: 10px; margin: 8px 0 0; padding-left: 18px; }
.missed p { margin: 0; }
.missed__what { font-weight: 600; }

/* An employer's candidates (P3-05): their cards side by side as the screen
   allows, each with its facts in a row. */
.candidates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.candidate { display: grid; gap: 12px; align-content: start; padding: 18px; }
.candidate__name { margin: 0; font-size: 18px; }
.candidate__facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--text-dim); }

/* The maps (P3-03, P3-06, D-52): MapLibre draws each in a box of our own, on
   the theme's background where there is no base, its spots in the theme's
   colours (static/js/map.js). Its sheet loads after this one, so what changes
   its controls is more specific than its own rules: a fingertip's size on a
   touch screen, and a focus ring drawn inside the box, which clips the rest. */
.map { position: relative; height: 320px; margin: 4px 0 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--map-bg); }
@media (min-width: 768px) { .map { height: 420px; } }
.map .maplibregl-canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.map__sources { margin-top: 12px; font-size: 13px; }
@media (pointer: coarse) {
  .map .maplibregl-ctrl-group button { width: 44px; height: 44px; }
}

/* The demonstration (P3-09): while a presenter is seen as somebody made up,
   a strip under the header on every page, in the colours of a warning, so
   nobody takes it for the real thing. In the page's flow, never over it; its
   buttons wrap onto a line of their own on a phone. */
.demo { border-bottom: 1px solid var(--partial-line); background: var(--partial-wash); color: var(--partial-ink); }
.demo__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-block: 10px; }
.demo__text { flex: 1 1 18rem; margin: 0; }
.demo__note { display: block; margin-top: 2px; font-size: 14px; }
.demo__switch,
.demo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.demo .btn[aria-current="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-fg); }
.demo-options { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.demo-options__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

/* Everything a finger presses is 44 px at least. With a mouse the controls
   keep their size; on a phone or a tablet each grows to a fingertip's. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 44px; padding-inline: 16px; }
  .brand { min-height: 44px; }
  .switch__opt { min-width: 44px; min-height: 44px; }
  .hero__motion { width: 44px; height: 44px; }
  .account-menu__link { min-height: 44px; min-width: 44px; justify-content: center; }
  .toast__close { width: 44px; height: 44px; }
  /* the actions in a table's rows: a row grows to a fingertip's */
  .btn-link { display: inline-flex; align-items: center; min-height: 44px; }
  /* a box to tick is pressed through its label, as tall as a fingertip */
  .field__check { min-height: 44px; }
  .manage__nav a { padding-block: 12px; }
  /* a link's padding reaches past its line without moving the text */
  .page > .eyebrow a,
  .steps a,
  .link-list a { padding-block: 14px; }
  /* the front page's links at its foot: "Terms" alone is barely 44 px wide */
  .front__links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  /* the trainer's panel: a learner's name in a row, a tab, a summary */
  .cell-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .tabs a { display: inline-flex; align-items: center; min-height: 44px; }
  /* padded, not a flex box, so it keeps the triangle that says it opens */
  details > summary { padding-block: 10px; }
}

/* readiness, area by area: where the learner started and where they are */
.readiness { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.readiness__area { display: grid; gap: 6px; }
.readiness__area p { margin: 0; }
.readiness__topic { font-weight: 600; }
.readiness__levels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
/* a level stays beside its label when the line breaks */
.readiness__level { display: inline-flex; align-items: center; gap: 8px; }
/* a few facts, each a term and what it is: a readiness record's page */
.facts { display: grid; gap: 10px; margin: 0; }
.facts div { display: grid; grid-template-columns: minmax(6rem, max-content) 1fr; gap: 12px; align-items: center; }
.facts dt { color: var(--text-dim); }
.facts dd { margin: 0; font-weight: 600; }

/* --- a film (P2-06): its player, its words, and the choice after it ------- */

.film { display: grid; gap: 18px; }
/* the film keeps its 16:9 while it loads, so nothing under it moves */
.player__frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
}
.player__video { display: block; width: 100%; height: 100%; }
.player__failed { margin: 12px 0 0; color: var(--danger-ink); font-weight: 600; }
.player__controls { display: grid; gap: 12px; margin-top: 12px; }
.chapters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chapter__at { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.chapter[aria-current="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-fg); }
.player__speed { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-weight: 600; }
.player__speed select {
  padding: 8px 12px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.film__transcript p { margin: 0 0 10px; }
.choice-made p { margin: 0; }
.choice-made .chip { justify-self: start; }

@media (pointer: coarse) {
  .player__speed select { min-height: 44px; }
  /* a link's padding reaches past its line without moving the text */
  .film__download { padding-block: 14px; }
}