/* De game blijft verborgen totdat de gekozen casus geladen is. */
body[data-bootstrapping] > :not(#scenario-picker) { display: none !important; }
.scenario-picker { min-height: 100vh; padding: clamp(32px, 8vw, 100px) 24px; }
.scenario-inner { max-width: 900px; margin: 0 auto; }
.scenario-picker h1 { font-size: clamp(32px, 5vw, 56px); margin: 24px 0; }
.scenario-picker h1:focus { outline: none; }
.scenario-picker #scenario-status { color: var(--ink-dim); line-height: 1.6; }
.scenario-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 40px; }
.scenario-card { display: flex; flex-direction: column; gap: 32px; padding: 28px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); text-decoration: none; }
.scenario-card h2 { margin: 0; font-size: 24px; line-height: 1.35; }
.scenario-action { margin-top: auto; color: var(--accent); }
.scenario-card:hover { border-color: var(--accent); }
.scenario-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.scenario-card-upcoming { border-style: dashed; background: transparent; cursor: default; }
.scenario-card-upcoming h2 { color: var(--ink-dim); }
.scenario-card-upcoming .scenario-action { color: var(--ink-faint); }
.scenario-card-upcoming:hover { border-color: var(--line); }

/* Triage Cockpit — nachtdienst-werkstation in medu.game-huisstijl.
   Donker (in-game) is de default context; schermen rondom de game krijgen
   .screen-light, die dezelfde custom properties overschrijft.
   De enige felle kleuren blijven de NTS-urgentieladder. */

@font-face {
  font-family: "Fieldwork Geo";
  src: url("/fonts/Fieldwork-Geo-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fieldwork Geo";
  src: url("/fonts/Fieldwork-Geo-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fieldwork Geo";
  src: url("/fonts/Fieldwork-Geo-Demibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "MuseoModerno";
  src: url("/fonts/MuseoModerno-latin.woff2") format("woff2");
  font-weight: 500 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "MuseoModerno";
  src: url("/fonts/MuseoModerno-latinext.woff2") format("woff2");
  font-weight: 500 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* medu.game-merkkleuren (DESIGN.md §2) */
  --medu-pink-light: #FFE0E0;
  --medu-pink: #FFC8C7;
  --medu-pink-50: #FFF4F4;
  --medu-blue: #141484;
  --medu-blue-700: #0A0A66;
  --medu-blue-dark: #000048;
  --off-white: #FBF9F7;

  /* Donkere game-context (default). Vlakken zijn merk-donkerblauw;
     scheiding komt van witte alpha-lijnen, niet van grijstinten. */
  --bg: #000048;
  --bg-deep: #000037;
  --panel: #020252;
  --panel-2: var(--medu-blue-700);
  --line: rgba(255, 255, 255, 0.10);
  --ink: rgba(255, 255, 255, 0.92);
  --ink-dim: rgba(255, 255, 255, 0.66);
  --ink-faint: rgba(255, 255, 255, 0.42);
  --accent: var(--medu-pink);
  --accent-dim: rgba(255, 200, 199, 0.35);
  --btn-primary-bg: var(--medu-pink);
  --btn-primary-fg: var(--medu-blue-dark);
  --btn-primary-bg-hover: var(--medu-pink-light);

  /* Semantiek (ongewijzigd) */
  --ok: #57b98a;
  --warn: #e0a63c;
  --danger: #e05252;

  /* NTS-urgentieladder (authentieke kleurcodering — NIET wijzigen) */
  --u0: #c22f3d;
  --u1: #e04b3a;
  --u2: #ec8b31;
  --u3: #ecc531;
  --u4: #5fb857;
  --u5: #4da3dc;

  --font-display: "MuseoModerno", "Quicksand", system-ui, sans-serif;
  --font-body: "Fieldwork Geo", "Nunito", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius: var(--radius-md); /* compat: bestaande verwijzingen */

  --shadow-sm: 0 1px 2px rgba(0, 0, 72, 0.06), 0 2px 6px rgba(0, 0, 72, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 72, 0.08), 0 12px 32px rgba(0, 0, 72, 0.06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 72, 0.12), 0 2px 6px rgba(0, 0, 72, 0.06);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-mid: 240ms;
  --dur-slow: 420ms;
}

/* Lichte medu-context voor de schermen rondom de game. Overschrijft dezelfde
   variabelen, zodat alle componentregels ongewijzigd meekleuren. */
.screen-light {
  --bg: var(--off-white);
  --bg-deep: #ffffff;
  --panel: #ffffff;
  --panel-2: var(--medu-pink-50);
  --line: rgba(0, 0, 72, 0.10);
  --ink: var(--medu-blue-dark);
  --ink-dim: rgba(0, 0, 72, 0.60);
  --ink-faint: rgba(0, 0, 72, 0.40);
  --accent: var(--medu-blue);
  --accent-dim: rgba(20, 20, 132, 0.35);
  --btn-primary-bg: var(--medu-blue-dark);
  --btn-primary-fg: var(--medu-pink-light);
  --btn-primary-bg-hover: var(--medu-blue);
  background: var(--bg);
  color: var(--ink);
}
.screen-light .vf-section,
.screen-light .db-hard,
.screen-light .db-list li,
.screen-light .db-hard-gemist li {
  border: none;
  box-shadow: var(--shadow-md);
}
.screen-light .db-list li.ernst-kritiek { box-shadow: var(--shadow-md), inset 0 0 0 1.5px rgba(224, 82, 82, 0.55); }
.screen-light .db-list li.ernst-belangrijk { box-shadow: var(--shadow-md), inset 0 0 0 1.5px rgba(224, 166, 60, 0.5); }
/* Op licht is de donker-context-tekstkleur (#f0b8b8) onleesbaar. */
.screen-light .stoplicht { color: #a02c2c; }
/* Semantische tekstkleuren zijn getuned voor donker; op licht donkerder tinten. */
.screen-light .db-saved { color: #1c6b40; }
.screen-light .db-afsluiting { color: rgba(0, 0, 72, 0.66); }
.screen-light .cutscene.tone-success h2 { color: #1c6b40; }
/* Sinds 23 sep 2026 (Mike: minder waardeoordeel) is een veilige afloop groen
   en een onveilige amber, niet meer rood. De toonsleutels bleven gelijk. */
.screen-light .cutscene.tone-ok h2 { color: #1c6b40; }
.screen-light .cutscene.tone-danger h2 { color: #7a5200; }

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

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 300 15px/1.5 var(--font-body);
  overflow: hidden;
}

strong, b { font-weight: 600; }
h1, h2, h3, h4 { font-weight: 600; }

.mono { font-family: var(--font-mono); font-size: 0.82em; letter-spacing: 0.04em; }
.eyebrow { color: var(--ink-faint); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; margin-bottom: 10px; }
.thin { font-weight: 300; color: var(--ink-dim); }

button {
  font: inherit; font-weight: 600; cursor: pointer; border: none;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
button:hover:not(:disabled) { transform: translateY(-1px); }
button:active:not(:disabled) { transform: none; filter: brightness(0.96); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
button:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: var(--btn-primary-bg); color: var(--btn-primary-fg);
  padding: 11px 24px;
}
.btn-primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); }
.btn-secondary {
  background: transparent; color: var(--ink); border: 1.5px solid var(--line);
  padding: 10px 18px;
}
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); }
.btn-ghost {
  background: transparent; color: var(--ink-dim); border: 1px solid var(--line);
  padding: 5px 14px; font-size: 13px;
}
.btn-danger-ghost {
  background: transparent; color: var(--danger); border: 1px solid rgba(224, 82, 82, 0.35);
  padding: 7px 16px; font-size: 13px;
}
.btn-danger-ghost:hover { background: rgba(224, 82, 82, 0.12); }

/* ── Statusbalk ─────────────────────────────────────────────────────────── */
#statusbar {
  position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: var(--bg-deep); border-bottom: 1px solid var(--line);
}
.sb-brand { font-weight: 700; letter-spacing: 0.18em; font-size: 13px; color: var(--medu-pink-light); }
.sb-dienst {
  margin-left: 10px; font-size: 11px; letter-spacing: 0.14em; color: var(--warn);
  border: 1px solid rgba(224, 166, 60, 0.4); border-radius: 4px; padding: 2px 7px;
}
.sb-callstate { color: var(--ink-dim); font-size: 13px; }
.sb-player {
  margin-left: 12px; font-size: 12px; font-weight: 600; color: var(--ok);
  border: 1px solid rgba(87, 185, 138, 0.35); border-radius: 4px; padding: 2px 8px;
}
.db-saved { color: var(--ok); font-size: 12px; margin: -6px 0 12px; }
.sb-center { display: flex; align-items: center; gap: 12px; }
.sb-wachtrij {
  font-size: 11px; padding: 3px 9px; border-radius: 12px;
  border: 1px solid var(--line); color: var(--ink-dim);
}
.sb-wachtrij.hot { border-color: rgba(224, 82, 82, 0.55); color: var(--danger); animation: attention 2s infinite; }
.sb-right { display: flex; align-items: center; gap: 14px; }
.sb-clock { color: var(--ink); font-size: 15px; }

/* ── Schermen ───────────────────────────────────────────────────────────── */
.screen { position: fixed; inset: 0; }
.scroll-screen { overflow-y: auto; padding: 70px 20px 60px; }
[hidden] { display: none !important; }

/* ── Start ──────────────────────────────────────────────────────────────── */
/* Bewust géén .screen-light: de dienst begint om 00.25 uur. Dat geeft ook een
   boog die er eerst niet was — donker startscherm, video, lichte cockpit.
   Auto-marges op het kind centreren wél maar kappen níet af; flex-centrering
   op een fixed container zonder overflow verbergt de boven- en onderkant
   zodra het venster te laag is, zonder scrollbar om erbij te komen. */
#screen-start {
  display: flex; overflow-y: auto;
  background: radial-gradient(120% 90% at 50% 30%, #0A0A66 0%, #000048 58%, #000037 100%);
}
.start-inner > .eyebrow { margin-bottom: 28px; }
.start-inner {
  margin: auto;
  max-width: 680px; width: 100%; text-align: center; padding: 40px 24px;
}
.start-inner h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(48px, 6vw, 76px); letter-spacing: -0.01em; line-height: 1.05;
  margin-bottom: 22px;
}
.start-inner h1 .thin { font-weight: 500; color: var(--medu-pink); }
.start-greeting { font-size: 16px; font-weight: 600; color: var(--medu-pink); margin-bottom: 14px; }
.start-brief { font-size: 20px; color: var(--ink-dim); margin-bottom: 30px; }
.start-brief strong { color: var(--ink); }
.start-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.start-hint { margin-top: 26px; font-size: 13px; color: var(--ink-faint); }
.start-warning { margin-top: 18px; color: var(--warn); font-size: 14px; }

/* ── Werkstation ────────────────────────────────────────────────────────── */
.workstation {
  top: 46px; display: grid; grid-template-columns: minmax(380px, 1fr) minmax(340px, 440px);
  gap: 14px; padding: 14px;
  /* Op ultrawide niet oneindig meerekken: gecentreerd met een leesbaar maximum. */
  max-width: 1760px; margin-inline: auto;
}
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex; flex-direction: column; min-height: 0;
}

/* Gesprekspaneel */
.call-panel { overflow: hidden; }
.call-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.call-id { display: flex; align-items: center; gap: 12px; }
.caller-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--medu-blue), var(--medu-blue-dark));
  /* De avatar-PNG's hebben transparante marge boven het hoofd; inzoomen + iets
     omhoog richten laat het gezicht de cirkel vullen zonder rand boven/onder. */
  background-size: 150%; background-position: center 26%;
  border: 2px solid var(--line); position: relative;
}
.caller-avatar.speaking { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(87, 185, 138, 0.25); }
.caller-name { font-weight: 600; }
.call-meta { color: var(--ink-faint); font-size: 12px; }
.call-head-actions { display: flex; align-items: center; gap: 10px; }
.chip {
  font-size: 12px; padding: 4px 10px; border-radius: 20px; font-family: var(--font-mono);
}
.chip-hold { background: rgba(224, 166, 60, 0.15); color: var(--warn); border: 1px solid rgba(224, 166, 60, 0.4); }

.transcript { flex: 1; overflow-y: auto; padding: 18px 18px 8px; scroll-behavior: smooth; }

.msg { max-width: min(78%, 680px); margin-bottom: 12px; }
.msg.has-avatar { display: flex; gap: 9px; align-items: flex-end; }
.msg-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none; margin-bottom: 2px;
  background: radial-gradient(circle at 35% 30%, var(--medu-blue), var(--medu-blue-dark));
  /* Zelfde framing als de header-avatar: inzoomen zodat het gezicht de cirkel vult. */
  background-size: 150%; background-position: center 26%;
  border: 1px solid var(--line);
}
.msg-main { min-width: 0; }
.msg-head { font-size: 11px; color: var(--ink-faint); margin-bottom: 3px; font-family: var(--font-mono); letter-spacing: 0.06em; }
.msg-bubble {
  padding: 9px 13px; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word;
}
/* Tim, 3 sep 2026: de bubbels van de speler waren altijd 680px breed, ook bij
   drie woorden. De bubbels van de NPC's krompen wél mee, want die zijn door
   `.has-avatar` een flexbox en flex-items krimpen naar hun inhoud. De speler
   heeft geen avatar, dus die bubbel bleef een block dat de volle max-width van
   `.msg` opvult. `fit-content` geeft hem hetzelfde gedrag; `margin-left: auto`
   houdt hem rechts. */
.msg-triagist { margin-left: auto; width: fit-content; }
.msg-triagist .msg-head { text-align: right; }
.msg-triagist .msg-bubble { background: var(--medu-blue); color: #fff; border-bottom-right-radius: 4px; }
.msg-patient .msg-bubble { background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
/* Donkere bubbels zijn hardcoded (niet thema-afhankelijk) — tekst dus ook expliciet licht. */
.msg-partner .msg-bubble { background: #1a1060; color: #fff; border: 1px solid rgba(255, 200, 199, 0.28); border-bottom-left-radius: 4px; }
.msg-regiearts .msg-bubble { background: #041c50; color: #fff; border: 1px solid rgba(87, 185, 138, 0.35); border-bottom-left-radius: 4px; }
.msg-system { max-width: 100%; text-align: center; }
.msg-system .msg-bubble {
  display: inline-block; background: transparent; color: var(--ink-faint);
  font-size: 12px; font-family: var(--font-mono); border: 1px dashed var(--line);
}
/* Systeemregel met avatar (bv. terugkeer naar de patiënt): foto gecentreerd
   boven de tekst zodat de wisseling van gesprekspartner meteen opvalt. */
.msg-system.has-avatar { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 6px auto 14px; }
.sys-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background-size: 150%; background-position: center 26%;
  border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line), var(--shadow-md);
}
.msg-typing .msg-bubble::after { content: '▋'; animation: blink 1s infinite; color: var(--ink-dim); }
/* Op de hardcoded donkere bubbels is --ink-dim (op licht thema donkerblauw) onzichtbaar; forceer licht. */
.msg-partner.msg-typing .msg-bubble::after,
.msg-regiearts.msg-typing .msg-bubble::after { color: rgba(255, 255, 255, 0.75); }
@keyframes blink { 50% { opacity: 0; } }

/* Composer */
.composer {
  display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.composer input {
  flex: 1; background: var(--bg-deep); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px;
}
.composer input::placeholder { color: var(--ink-faint); }
.btn-mic {
  width: 46px; height: 42px; display: grid; place-items: center;
  background: var(--panel); color: var(--ink-dim); border: 1px solid var(--line);
}
.btn-mic-setup { width: 34px; font-size: 15px; color: var(--ink-faint); }
.btn-mic.recording {
  background: rgba(224, 82, 82, 0.18); color: var(--danger); border-color: var(--danger);
  animation: mic-pulse 1.2s infinite;
}
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 6px rgba(224, 82, 82, 0.12); } }
.btn-send { padding: 10px 18px; }
/* Twee toestanden. `disabled`: geen gesprek (rinkelt, pauze, einde), alles
   op slot. `busy`: de beller praat; typen én versturen blijven mogelijk (het
   bericht wacht dan tot hij klaar is, Jojanneke 3 sep 2026), alleen de
   microfoon botst met zijn stem en wacht. */
.composer.disabled { opacity: 0.5; pointer-events: none; }
.composer.busy .btn-mic { opacity: 0.5; pointer-events: none; }

/* Terug-naar-de-patiënt-balk (tijdens regiearts-overleg), prominent onderaan. */
.btn-back-patient {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 14px 12px; padding: 11px 16px;
  background: var(--panel); color: var(--accent);
  border: 1.5px solid var(--accent); border-radius: var(--radius);
  font-weight: 600; font-size: 14px;
}
.btn-back-patient:hover { background: var(--accent); color: #fff; }
.btn-back-patient svg { flex: none; }

/* Overleg definitief afronden — bewust rustiger dan 'terug naar de patiënt',
   want dit is de onomkeerbare van de twee. */
.btn-finish-regie {
  display: block; margin: 0 14px 8px; padding: 9px 16px;
  font-size: 13px; font-weight: 600;
}

/* Pauze in de gesprekskop: aanwezig maar terughoudend — het mag de aandacht
   niet wegtrekken van het gesprek zelf. */
.btn-pause {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  border-radius: var(--radius);
}
.btn-pause svg { flex: none; }

/* ── TriageMonitor ──────────────────────────────────────────────────────── */
.monitor { overflow-y: auto; }
.monitor-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.monitor-title { color: var(--accent); letter-spacing: 0.16em; font-weight: 600; }
.monitor-case { color: var(--ink-faint); }
.patient-record { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.pr-row { display: flex; gap: 12px; padding: 3px 0; font-size: 13px; }
.pr-label { width: 70px; color: var(--ink-faint); font-size: 11px; padding-top: 2px; }

.cards { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); overflow: hidden; }
.card.locked { opacity: 0.45; }
.card.attention { border-color: var(--warn); animation: attention 2s infinite; }
@keyframes attention { 50% { box-shadow: 0 0 0 3px rgba(224, 166, 60, 0.15); } }
.card-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; background: transparent; color: var(--ink); text-align: left;
  border-radius: 0;
}
.card-head .card-title { font-weight: 600; font-size: 14px; }
.card-state { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.card-state.chosen { color: var(--ok); }
.card-body { padding: 4px 12px 12px; display: none; }
.card.expanded .card-body { display: block; }
.card-q { font-size: 13px; color: var(--ink-dim); margin-bottom: 10px; }
.opt-list { display: flex; flex-direction: column; gap: 6px; }
.opt {
  text-align: left; padding: 9px 12px; border-radius: 8px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; font-size: 14px;
}
.opt:hover { border-color: var(--accent-dim); background: var(--medu-blue-700); color: #fff; }
/* Gekozen optie is altijd gemarkeerd (ook als de kaart nog wijzigbaar is) en
   houdt bij hover z'n groene stijl i.p.v. de donkere hover-achtergrond. */
.opt.opt-active, .opt.opt-active:hover { background: var(--panel); border-color: var(--ok); color: var(--ok); }
/* Kaart met een vastgezette keuze: opties zijn niet meer te wijzigen. */
/* Een vastgelegde kaart is gedimd, ook als hij dichtgeklapt is. Daarvoor gold
   het verschil alleen voor de opties, en die zie je niet zolang de kaart dicht
   staat: een vergrendelde kaart was dan niet te onderscheiden van een kaart die
   je nog mag wijzigen (feedback Mike, 25 aug 2026, punt 8). */
.card.resolved:not(.locked) .card-head { opacity: 0.6; }
.card.resolved .opt { opacity: 0.4; cursor: default; }
.card.resolved .opt:hover { border-color: var(--line); background: var(--panel); color: var(--ink); }
.card.resolved .opt.opt-active { opacity: 1; border-color: var(--ok); color: var(--ok); cursor: default; }
.opt .u-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.u-U0 { background: var(--u0); } .u-U1 { background: var(--u1); } .u-U2 { background: var(--u2); }
.u-U3 { background: var(--u3); } .u-U4 { background: var(--u4); } .u-U5 { background: var(--u5); }

/* Actie-balk onderin de monitor: volle-breedte knoppen, gestapeld. Toont de op
   dit moment beschikbare vervolgacties (bel regiearts / verslaglegging). */
.monitor-actions {
  margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.monitor-actions .btn-action { width: 100%; font-size: 14px; padding: 12px 16px; }
/* Jojanneke miste dat ze hier moest klikken om door te gaan. De zachte
   schaduwpuls van .attention viel op een gevulde knop niet op. Deze knop pulst
   daarom in de waarschuwkleur, met een ring die duidelijk uit de knop groeit. */
.monitor-actions .btn-action.attention {
  /* De ring staat er altijd, ook stil. De puls trekt de aandacht, maar wie hem
     net mist ziet nog steeds dat dit de volgende stap is. */
  outline: 2px solid var(--warn);
  outline-offset: 2px;
  animation: attention-knop 1.6s ease-in-out infinite;
}
@keyframes attention-knop {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 166, 60, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(224, 166, 60, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .monitor-actions .btn-action.attention { animation: none; }
}
.monitor-actions .btn-secondary.attention { border-color: var(--warn); color: var(--warn); }
.doc-actions button, .monitor-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

/* ── Overlays ───────────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 34, 0.86); backdrop-filter: blur(4px);
}

/* Intro-cutscene: dekkend zwart boven alles (ook boven de ring-overlay, zodat
   de telefoon alvast kan rinkelen terwijl de video nog uitzoomt). */
.overlay-intro {
  --intro-fade: 700ms; /* moet matchen met FADE_MS in intro.js */
  z-index: 80; background: #000; backdrop-filter: none;
}
.overlay-intro video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity var(--intro-fade) ease;
}
.overlay-intro.intro-visible video { opacity: 1; }
.overlay-intro.intro-fade-out { animation: intro-out var(--intro-fade) ease forwards; }
@keyframes intro-out { to { opacity: 0; } }
.intro-skip {
  position: absolute; right: 22px; bottom: 20px;
  padding: 9px 18px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 34, 0.5);
  color: rgba(255, 255, 255, 0.85); font-size: 12px; letter-spacing: 0.1em;
  opacity: 0; animation: intro-skip-in 400ms ease 1.2s forwards;
}
.intro-skip:hover { background: rgba(0, 0, 34, 0.8); border-color: rgba(255, 255, 255, 0.6); }
@keyframes intro-skip-in { to { opacity: 1; } }
.ring-box { text-align: center; }
.ring-pulse {
  width: 130px; height: 130px; margin: 0 auto 26px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
}
.ring-pulse::before, .ring-pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent); animation: ring 1.8s ease-out infinite;
}
.ring-pulse::after { animation-delay: 0.9s; }
@keyframes ring { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.55); opacity: 0; } }
.ring-core {
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--btn-primary-bg); color: var(--btn-primary-fg);
  display: grid; place-items: center; font-size: 38px;
  box-shadow: 0 0 0 6px var(--accent-dim);
  animation: shake 1.8s infinite;
}
@keyframes shake { 0%, 8%, 16%, 100% { transform: rotate(0); } 4% { transform: rotate(-8deg); } 12% { transform: rotate(8deg); } }
.ring-label { color: var(--ink-faint); font-size: 12px; letter-spacing: 0.14em; margin-bottom: 6px; }
.ring-caller { font-size: 22px; font-weight: 600; margin-bottom: 30px; }
.btn-answer {
  background: var(--btn-primary-bg); color: var(--btn-primary-fg); font-size: 17px; font-weight: 700;
  padding: 14px 44px; border-radius: var(--radius-pill);
}
.btn-answer:hover { background: var(--btn-primary-bg-hover); }

.analyse-box { text-align: center; color: var(--ink-dim); max-width: 440px; padding: 0 20px; }
.analyse-title { font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
#analyse-status { min-height: 1.4em; transition: opacity 0.3s; }
.analyse-hint { margin-top: 12px; font-size: 13px; color: var(--ink-faint); line-height: 1.5; }
.spinner {
  width: 42px; height: 42px; margin: 0 auto 18px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.mic-box {
  width: min(480px, 92vw); padding: 30px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.mic-box h2 { margin-bottom: 18px; }
.mic-box .vf-field { margin-bottom: 16px; }
.mic-meter {
  height: 14px; border-radius: 7px; background: var(--bg-deep);
  border: 1px solid var(--line); overflow: hidden;
}
#mic-meter-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ok), var(--warn) 80%, var(--danger));
  transition: width 0.08s linear;
}
.mic-hint { font-size: 12px; color: var(--ink-faint); margin: 8px 0 16px; }
.mic-test-row { margin-bottom: 12px; }
.mic-test-row .recording { border-color: var(--danger); color: var(--danger); }
.mic-test-result {
  background: var(--bg-deep); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; color: var(--ink-dim); margin-bottom: 6px;
}
.mic-test-result.ok { border-color: rgba(87, 185, 138, 0.5); color: var(--ink); }
.mic-vad-row {
  display: flex; gap: 8px; align-items: center; font-size: 13px;
  color: var(--ink-dim); margin-top: 12px; cursor: pointer;
}

.redflag-box {
  max-width: 520px; padding: 34px; text-align: center;
  background: var(--panel); border: 1px solid rgba(224, 82, 82, 0.5); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.redflag-box .eyebrow { color: var(--danger); }
.redflag-text { color: var(--ink-dim); margin: 14px 0 8px; font-style: italic; }

/* ── Documenten (verslag / debrief) ─────────────────────────────────────── */
.doc { max-width: 760px; margin: 0 auto; }
.doc-back { margin-bottom: 22px; padding: 6px 12px; font-size: 13px; }
.doc-back:hover { color: var(--ink); border-color: var(--accent); }
.doc h2 { font-family: var(--font-display); font-weight: 600; font-size: 30px; margin-bottom: 8px; }
.doc h3 { font-size: 16px; margin: 22px 0 10px; color: var(--ink-dim); }
.doc-sub { color: var(--ink-dim); margin-bottom: 26px; }
/* Afsluiting boven de knoppen (Mike, punt 20): wat je nu weet, en wat de twee
   knoppen doen. Zonder deze regel eindigde de debriefing bij een uitklap. */
.db-afsluiting { margin: 26px 0 0; color: var(--ink-dim); font-size: 13.5px; line-height: 1.55; }
.db-afsluiting h3 { margin: 0 0 6px; color: var(--accent); font-size: 15px; }
.screen-light .db-afsluiting h3 { color: var(--medu-blue); }
.db-afsluiting p { margin: 0; }
/* Testfase-feedback (Mike, 22 sep 2026). Het blok onderaan valt bewust op:
   de debriefing is lang en testers haken af vóór de knoppen. */
.db-feedback-top {
  margin: 0 0 22px; padding: 12px 16px; font-size: 14px; line-height: 1.5;
  color: var(--ink); background: var(--panel); border: 1.5px solid var(--accent);
  border-radius: var(--radius-lg);
}
.db-feedback-top a { color: inherit; font-weight: 600; }
.db-feedback {
  margin: 30px 0 0; padding: 24px 26px;
  border: 2px solid var(--accent); border-radius: var(--radius-lg);
  background: var(--panel);
}
.db-feedback .eyebrow { color: var(--accent); margin-bottom: 6px; }
.doc .db-feedback h3 { margin: 0 0 8px; color: var(--ink); font-size: 20px; }
.db-feedback p { margin: 0 0 18px; color: var(--ink); line-height: 1.55; }
.btn-link-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none; border-radius: var(--radius-pill);
}
.btn-link-primary::after { content: '↗'; }
.feedback-box { border-color: var(--accent); }
.feedback-box .eyebrow { color: var(--accent); }
.feedback-guard-text { color: var(--ink-dim); margin: 14px 0 8px; line-height: 1.55; }
.feedback-box .doc-actions { justify-content: center; flex-wrap: wrap; }
.doc-actions { margin: 18px 0 10px; display: flex; gap: 12px; justify-content: flex-end; }

.vf-section {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px; margin-bottom: 14px;
}
.vf-section h3 { margin: 0 0 14px; color: var(--ink); font-size: 15px; }
.vf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Read-only dossierblok in sectie 1. Deze gegevens zijn geen invoer maar een
   uittreksel uit het dossier, dus ze lezen als een lijst: label links, waarde
   rechts. `display: contents` op de rij laat label en waarde meedoen in het
   grid van het blok, zodat alle waarden op één kolom uitlijnen ook als het ene
   label veel langer is dan het andere. */
.vf-dossier {
  display: grid;
  grid-template-columns: minmax(130px, max-content) 1fr;
  gap: 7px 20px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.vf-dossier-row { display: contents; }
.vf-dossier-label { color: var(--ink-faint); padding-top: 1px; }
.vf-note { margin: 0 0 14px; color: var(--ink-faint); font-size: 12px; line-height: 1.5; }

@media (max-width: 640px) {
  /* Naast elkaar wordt te smal: label boven de waarde. */
  .vf-dossier { grid-template-columns: 1fr; gap: 2px 0; }
  .vf-dossier-row { display: block; margin-bottom: 8px; }
  .vf-dossier-label { display: block; }
}
.vf-field { display: flex; flex-direction: column; gap: 4px; }
.vf-field.wide { grid-column: 1 / -1; }
.vf-field label { font-size: 12px; color: var(--ink-faint); }
.vf-field input, .vf-field select, .vf-field textarea {
  background: var(--bg-deep); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px;
}
.vf-field textarea { min-height: 58px; resize: vertical; }
/* Basis focus-ring (thema-bewust); de lichte context hieronder overschrijft 'm. */
.vf-field input:focus-visible,
.vf-field select:focus-visible,
.vf-field textarea:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.screen-light .vf-field input:focus-visible,
.screen-light .vf-field select:focus-visible,
.screen-light .vf-field textarea:focus-visible {
  outline: none; border-color: var(--medu-blue-dark);
  box-shadow: 0 0 0 4px var(--medu-pink-light);
}
.vf-field .readonly { color: var(--ink-dim); padding: 8px 10px; background: var(--panel-2); border-radius: 8px; font-size: 14px; }
.vf-field.missing input, .vf-field.missing select, .vf-field.missing textarea { border-color: var(--danger); }

/* Cutscene + debrief */
/* De cutscene vult het venster in plaats van eraan te hangen (Tim, 10 sep
   2026: het scherm was voor tweederde leeg). Flex-kolom met verticale
   centrering; `min-height` en niet `height`, zodat een lange uitkomsttekst
   gewoon doorgroeit en de scroll van .scroll-screen overneemt in plaats van
   dat de bovenkant wegvalt. De 130px is de padding van .scroll-screen
   (70 boven + 60 onder, regel 209). */
.cutscene {
  text-align: center;
  min-height: calc(100vh - 130px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
/* De uitkomst landt vóór je leest: een zachte gloed in de toonkleur die
   renderCutscene (client/js/ui.js) al op dit element zet. Zelfde middel als
   het startscherm gebruikt (radial-gradient), geen nieuwe assets.

   Vast aan .cutscene en niet aan #screen-debrief, want de debriefing woont in
   datzelfde scherm en mag geen groene waas krijgen: renderDebrief zet
   #cutscene op `hidden`, en `[hidden] { display: none !important }` (regel
   210) haalt daarmee ook deze ::before weg. z-index -1 houdt hem achter de
   tekst; .screen staat op position: fixed, dus inset: 0 is precies het
   venster.

   Losse rgba-stops en geen color-mix(): dit draait ook in de Moodle-iframe en
   op Safari, en een genegeerde color-mix zou de gloed stil laten verdwijnen. */
.cutscene::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 62% at 50% 0%, var(--cutscene-gloed, transparent) 0%, transparent 66%);
}
/* Niet de kale --ok/--warn/--danger: die zijn getuned om als tékst op donker
   te werken. Uitgestreken over een lichte achtergrond op ~20% verliest juist
   --ok (#57b98a, een gedempt saliegroen) zijn kleur en blijft er een grijze
   waas over, terwijl rood meteen leest. Groen en amber gaan daarom naar de
   dieper verzadigde tinten die .screen-light hierboven (regel 126-128) al
   voor de kop van ditzelfde scherm gebruikt, zodat de drie tonen even hard
   aankomen. Gemeten op de drie echte sessies, niet geschat. */
.cutscene.tone-success { --cutscene-gloed: rgba(28, 107, 64, 0.17); }
.cutscene.tone-ok { --cutscene-gloed: rgba(28, 107, 64, 0.12); }
.cutscene.tone-danger { --cutscene-gloed: rgba(214, 148, 30, 0.22); }
/* Mike, 25 aug 2026: de eindtitel was slecht leesbaar. De labels staan in
   kapitalen, en MuseoModerno (via `.doc h2`) heeft daar een G die als een Q
   leest: het label "ONDERTRIAGE" komt over als "ONDERTRIAQE". Zelfde ingreep
   als eerder bij de briefingtitel: deze kop gaat naar de body-letter. De rest
   van `.doc h2` blijft ongewijzigd. */
.cutscene h2 {
  margin-bottom: 18px;
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0.01em;
}
.cutscene-text { font-size: 18px; color: var(--ink-dim); max-width: 560px; margin: 0 auto 16px; }
/* Mike, punt 10: de kernles stond cursief in een lichter lettertype onder het
   einde. Als dat de kern is, hoort hij nadrukkelijk in beeld.

   Sinds 15 sep 2026 staat hij alleen nog op de debriefing en niet meer op de
   cutscene (besluit Tim). Hij stond op allebei, en sinds het scherm de
   PDF-secties volgt las de deelnemer ook de aflooptekst twee keer achter
   elkaar. De cutscene is het filmische moment: uitkomst en afloop, meer niet.
   De regels voor .cutscene-lesson zijn daarmee vervallen. */
.cutscene.tone-danger h2 { color: var(--warn); }
.cutscene.tone-ok h2 { color: var(--ok); }
.cutscene.tone-success h2 { color: var(--ok); }

/* Debrief-kop, variant B (Mike, 22 sep 2026): een gekleurd kader met de
   uitkomst en wat er ontbrak, eronder de telling. Groen bij veilig, amber bij
   nog niet veilig; nooit alleen kleur, de kop zegt het ook in woorden.
   Contrast: #5c3d00 op #fbe3a8 is 7,8:1, #14532f op #e2f3e9 is 7,9:1. */
#db-oordeel { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.verdict-kader {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 22px; border-radius: var(--radius-lg);
}
.verdict-cheer { font-size: 26px; line-height: 1.25; }
.verdict-sub { font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.5; }
.verdict-telling { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink-dim); }
#db-oordeel.verdict-pass .verdict-kader,
#db-oordeel.verdict-great .verdict-kader { background: #e2f3e9; color: #14532f; }
#db-oordeel.verdict-fail .verdict-kader { background: #fbe3a8; color: #5c3d00; }

.db-stoplichten-blok { margin: 16px 0; }
.db-stoplichten-blok h3 { margin: 0 0 6px; color: var(--accent); font-size: 15px; }
.screen-light .db-stoplichten-blok h3 { color: var(--medu-blue); }
.db-stoplichten-blok .stoplichten { margin: 0; }
.stoplichten { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.stoplicht {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  column-gap: 10px; row-gap: 4px; padding: 10px 14px;
  background: rgba(224, 82, 82, 0.1); border: 1px solid rgba(224, 82, 82, 0.4);
  border-radius: 10px; color: #f0b8b8; font-size: 14px;
}
.stoplicht::before { content: '✕'; font-weight: 600; }
/* De onderbouwende zin (Mike, 11 sep 2026) staat onder het label, in de tweede
   kolom, zodat hij uitlijnt met de labeltekst en niet met het kruisje. */
.stoplicht-label { font-weight: 600; }
.stoplicht-waarom { grid-column: 2; font-weight: 400; font-size: 13px; line-height: 1.5; opacity: 0.92; }

.db-hard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; margin: 18px 0;
}
.db-hard h3:first-child { margin: 0 0 8px; color: var(--accent); font-size: 15px; }
.screen-light .db-hard h3:first-child { color: var(--medu-blue); }
.db-hard-telling { font-size: 15px; font-weight: 600; margin: 0; }
.db-hard-uitleg { font-size: 13px; color: var(--ink-dim); margin: 6px 0 0; }
.db-hard-gemist { list-style: none; margin: 10px 0 0; padding: 0; }
.db-hard-gemist li {
  padding: 8px 10px; margin-bottom: 6px; border-radius: 8px;
  background: var(--bg-deep); border: 1px solid var(--line); font-size: 13px; color: var(--ink-dim);
}

/* ── Kanttekening: kernles, tijd, leerpunt ──────────────────────────────────
   Eén patroon voor de drie losse mededelingen in de debriefing. De kernles op
   de cutscene hing hier ook aan tot 15 sep 2026; die staat er niet meer.

   Waarom geen kader meer (Tim, 10 sep 2026): tot nu toe was elk van deze vier
   een getint vlak met een accentbalk links en een klein gekleurd kopje. Dat is
   de standaard-"callout", en vier stuks op één pagina lieten de debriefing
   lezen als een stapel identieke waarschuwingen — het verraadde dat het niet
   ontworpen was. De les zelf is nu de vorm: haarlijnen erboven en eronder,
   geen vlak, geen balk, en ruimte in plaats van padding.

   Het kopje volgt .eyebrow (regel 144), hetzelfde idioom als "EEN UUR LATER…"
   en "DEBRIEFING" die al op dit scherm staan. Zo bindt het label zich aan iets
   wat er al is, in plaats van aan een vijfde accentkleur.

   De waarden staan hier uitgeschreven en niet als `composes`/extra class in de
   HTML: .eyebrow zit op <p>-elementen, deze koppen zijn <h3> en houden hun
   documentstructuur (voorleessoftware, PDF-parity). */
.db-kernles, .db-tijd, .leerpunt {
  background: none; border: 0; border-radius: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 18px 0; margin: 30px 0;
}
.db-kernles h3, .db-tijd h3, .leerpunt h3 {
  margin: 0 0 10px;
  color: var(--ink-faint); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.db-kernles p, .db-tijd p, .leerpunt p {
  margin: 0; color: var(--ink); font-size: 17px; line-height: 1.55;
}
/* Twee kanttekeningen achter elkaar zouden een dubbele lijn van 2px geven:
   #db-kernles en #db-leerpunt staan in index.html direct naast elkaar. De
   bovenlijn van de tweede wijkt, dus een reeks leest als één set secties met
   enkele scheidingen. Geldt voor elke combinatie, vandaar de volledige matrix
   in plaats van dat ene paar — anders breekt het zodra de volgorde wijzigt. */
.db-kernles + .db-kernles, .db-kernles + .db-tijd, .db-kernles + .leerpunt,
.db-tijd + .db-kernles, .db-tijd + .db-tijd, .db-tijd + .leerpunt,
.leerpunt + .db-kernles, .leerpunt + .db-tijd, .leerpunt + .leerpunt {
  border-top: 0; margin-top: -12px;
}
/* De tijd blijft een spiegel en geen oordeel (Mike, punt 17): zelfde vorm als
   de kernles, maar gedempt, zodat hij niet even hard aankomt als de les. */
.db-tijd p { color: var(--ink-dim); font-size: 15px; }

.db-miste { width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: 13px; }
.db-miste th {
  text-align: left; font-size: 12px; color: var(--ink-faint);
  font-weight: 600; padding: 0 12px 6px 0; border-bottom: 1px solid var(--line);
}
.db-miste td { padding: 10px 12px 10px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.db-miste td:last-child, .db-miste th:last-child { padding-right: 0; }
.db-miste-label { font-weight: 600; width: 26%; }
.db-miste-telt { display: block; font-weight: 400; font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
/* Zwaarte-markering: alléén bij een rij die op zichzelf fataal is of tot een
   fatale groep hoort (client/js/zwaarte-text.js geeft null voor telt_mee, en
   dan komt dit element er niet). Zelfde vorm als .db-miste-telt hierboven. */
.db-miste-zwaarte { display: block; font-weight: 400; font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

.db-alle { list-style: none; margin: 0 0 18px; padding: 0; columns: 2; column-gap: 20px; font-size: 13px; }
.db-alle li { break-inside: avoid; padding: 3px 0 3px 20px; position: relative; }
.db-alle li::before { position: absolute; left: 0; }
.db-alle li.behaald::before { content: '✓'; color: var(--ok); }
.db-alle li.gemist::before { content: '✕'; color: var(--danger); }
.db-alle li.gemist { color: var(--ink-dim); }
/* Begeleidende zin boven de zestien-lijst (opdrachtgever, sep 2026): verving
   de eerdere zwaarte-markering per regel (.db-alle-zwaarte, verwijderd). */
.db-alle-inleiding { font-size: 13px; color: var(--ink-dim); margin: 0 0 10px; }
/* --ok/--danger zijn getuned voor donker (zie de toelichting bij .db-saved en
   .stoplicht hierboven); dezelfde donkerdere tinten hier hergebruikt zodat het
   vinkje en het kruisje op licht leesbaar blijven. */
.screen-light .db-alle li.behaald::before { color: #1c6b40; }
.screen-light .db-alle li.gemist::before { color: #a02c2c; }

/* Stapelen op smalle schermen: label, risico, tip onder elkaar per gemist
   punt. Een tabel die horizontaal scrollt is op een telefoon onleesbaar. */
@media (max-width: 720px) {
  .db-miste, .db-miste tbody, .db-miste tr, .db-miste td { display: block; width: auto; }
  .db-miste thead { display: none; }
  .db-miste tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .db-miste td { border: 0; padding: 2px 0; }
  .db-miste-label { width: auto; font-size: 14px; }
  .db-alle { columns: 1; }
}

/* .leerpunt deelt sinds 10 sep 2026 het kanttekening-patroon hierboven. De
   eigen kaart-variant (roze vlak met schaduw op licht, getint vlak met
   accentbalk op donker) is daar vervangen; alleen de bredere regels van .doc
   gelden hier nog. */

.db-details { margin: 18px 0; color: var(--ink-dim); }
.db-details summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.db-details .db-columns { margin-top: 14px; }

.db-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Buiten de <details> (Goed gedaan / Overige aandachtspunten, 11 sep 2026):
   dezelfde ademruimte als de andere eigen secties op het eindscherm. */
.db-columns-open { margin: 18px 0; }
.db-list { list-style: none; }
.db-list li {
  padding: 10px 12px; margin-bottom: 8px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); font-size: 14px;
}
.db-list li .t { font-weight: 600; display: block; }
.db-list li .d { color: var(--ink-dim); font-size: 13px; }
.db-list li.ernst-kritiek { border-color: rgba(224, 82, 82, 0.55); }
.db-list li.ernst-kritiek .t::before { content: '✕ '; color: var(--danger); }
.db-list li.ernst-belangrijk { border-color: rgba(224, 166, 60, 0.5); }
.db-list li.ernst-belangrijk .t::before { content: '! '; color: var(--warn); }
.db-list li.ernst-aandachtspunt .t::before { content: '· '; color: var(--ink-faint); }
.db-list li.goed .t::before { content: '✓ '; color: var(--ok); }

.db-transcript { margin-top: 24px; color: var(--ink-dim); }
.db-transcript pre { white-space: pre-wrap; font-size: 12px; padding: 14px; background: var(--bg-deep); border-radius: 10px; margin-top: 10px; }

/* ── Werkdruk-toasts ────────────────────────────────────────────────────── */
.toasts {
  position: fixed; top: 56px; right: 14px; z-index: 55;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  max-width: 340px;
}
.toast {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--bg-deep); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 13px; font-size: 12.5px; color: var(--ink-dim);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateX(24px); transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-icon { flex: none; display: inline-flex; margin-top: 1px; color: var(--ink-faint); }

/* ── Responsief ─────────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .workstation { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
  .monitor { overflow-y: auto; }
  .vf-grid { grid-template-columns: 1fr; }
  .db-columns { grid-template-columns: 1fr; }
  /* Statusbalk compact houden zodat 'ie niet over 2 regels wrapt: de naam
     blijft staan (belangrijk voor de speler), de dienst-badge wijkt. */
  .sb-dienst { display: none; }
  #sb-callstate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Scherm te klein: telefoon-blokkade ─────────────────────────────────── */
/* Pure CSS zodat 'ie live meebeweegt met draaien/resizen. Verborgen tenzij het
   scherm echt te klein is voor de cockpit (smalle telefoon of liggende telefoon). */
.too-small { display: none; }
@media (max-width: 700px), (max-height: 460px) and (orientation: landscape) {
  .too-small {
    position: fixed; inset: 0; z-index: 200; display: flex;
    align-items: center; justify-content: center; padding: 30px;
    background: radial-gradient(130% 110% at 50% 0%, var(--medu-blue) 0%, var(--bg-deep) 72%);
  }
  /* Alles eronder afschermen — geen geluid/interactie op de telefoon. */
  body > :not(.too-small):not(script) { pointer-events: none; }
}
.too-small-box { max-width: 380px; text-align: center; }
.too-small-icon { color: var(--accent); margin-bottom: 18px; }
.too-small-box h2 { font-family: var(--font-display); font-size: 25px; margin: 0 0 14px; color: #fff; }
.too-small-box p { color: var(--ink-dim); line-height: 1.55; margin: 0 0 12px; font-size: 15px; }
.too-small-cta { color: var(--ink) !important; }
.too-small-cta strong { color: var(--accent); }

/* ── Uitleg in stappen op het startscherm ────────────────────────────────── */
/* Mike: deelnemers moeten vóór het opnemen weten wat ze gaan doen en hoe ze
   beoordeeld worden — maar één scherm tegelijk, niet als muur tekst. */

/* Het baken blijft staan terwijl de tekst eronder wisselt: dat geeft het gevoel
   van doorbladeren zonder dat er echt iets sleept. Bewust trager en zachter dan
   .ring-pulse van de echte inkomende oproep, zodat die later nog kan escaleren. */
/* Ruim onder het baken en onder de regel eronder: Steven las de kop, de regel
   en het baken als één klont. De lucht scheidt de drie. */
.briefing-beacon {
  width: 104px; height: 104px; margin: 0 auto 52px;
  display: grid; place-items: center; position: relative;
}
.briefing-beacon::before, .briefing-beacon::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--medu-pink); opacity: 0;
  animation: beacon 3.2s ease-out infinite;
}
.briefing-beacon::after { animation-delay: 1.6s; }
@keyframes beacon {
  0%   { transform: scale(0.72); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}
.beacon-core {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--medu-pink); color: var(--medu-blue-dark);
  display: grid; place-items: center;
  box-shadow: 0 0 34px rgba(255, 200, 199, 0.26), 0 0 0 6px rgba(255, 200, 199, 0.10);
}

/* Minimumhoogte zodat de navigatie eronder niet op en neer springt bij het
   wisselen van stap. */
/* Eén maat voor alle tekst in de briefing: alinea's liepen tot de volle 632 px
   terwijl de opsommingen op 400 px stonden. Dat verschil las als rommel. */
.briefing-stage { position: relative; min-height: 236px; --briefing-maat: 500px; }
.briefing-step h2 {
  font-family: var(--font-body); font-size: 21px; font-weight: 600;
  color: var(--medu-pink); margin-bottom: 14px;
}
.briefing-step p {
  font-size: 15px; color: var(--ink-dim); margin-bottom: 10px;
  max-width: var(--briefing-maat); margin-left: auto; margin-right: auto;
}
.briefing-step p:last-child { margin-bottom: 0; }
.briefing-step strong { color: var(--ink); }
/* Deze drie zijn ook een <p> in een stap, dus de regel hierboven wint van hun
   eigen kleur verderop. Expliciet terugzetten: de waarschuwing moet geel
   blijven signaleren, en de begroeting stond nog op donkerblauw uit de tijd
   dat dit scherm licht was. */
.briefing-step .start-greeting { color: var(--medu-pink); }
.briefing-step .start-warning { color: var(--warn); }
.briefing-step .start-hint { color: var(--ink-faint); }
/* Subkop binnen een stap. Hij mag niet concurreren met de roze staptitel
   erboven, dus even groot als de lopende tekst en alleen zwaarder gezet. */
.briefing-step .briefing-sub {
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: var(--ink); margin: 0 0 10px;
}

/* Alleen de staptitel staat gecentreerd; alles eronder zit in één linkerkolom.
   Elke tekstregel begint op dezelfde as, 20 px vanaf de rand van het blok.
   Links daarvan hangen alleen markeringen: de bolletjes en nummers van een
   opsomming en de roze streep van de aandachtsregel. Eerder liepen alinea,
   opsomming en aandachtsregel elk anders, en dat las als rommel. */
.briefing-blok {
  max-width: var(--briefing-maat); margin: 22px auto 0; text-align: left;
}
.briefing-blok > :first-child { margin-top: 0; }
.briefing-blok .briefing-sub { padding-left: 20px; margin-top: 22px; }
.briefing-blok .briefing-steps, .briefing-blok .briefing-scores { margin: 0; max-width: none; }
.briefing-blok p {
  margin-left: 0; margin-right: 0; max-width: none;
  padding-left: 20px; margin-bottom: 12px;
}

/* De aandachtsregel sluit de stap af. De roze streep zet hem apart zonder er
   een eigen kopje boven te hangen; "Let op!" staat vet in de zin zelf. */
.briefing-step .briefing-note {
  margin-top: 22px; padding-left: 18px;
  border-left: 2px solid var(--medu-pink);
}
.briefing-steps, .briefing-scores {
  margin: 0 auto; padding-left: 20px; max-width: var(--briefing-maat); text-align: left;
  font-size: 15px; color: var(--ink-dim);
}
.briefing-steps li, .briefing-scores li { margin-bottom: 8px; }
.briefing-steps li:last-child, .briefing-scores li:last-child { margin-bottom: 0; }
/* Kernles, leerpunt en tijd staan bewust níet in de lijst hierboven: daar word
   je niet op beoordeeld, en de kop belooft juist waar je wél op beoordeeld
   wordt (opdrachtgever, 10 sep 2026). Als losse noot eronder, kleiner. */
.briefing-noot {
  margin: 12px auto 0; max-width: var(--briefing-maat); text-align: left;
  font-size: 14px; color: var(--ink-faint);
}
/* De startknop op de laatste stap heeft lucht nodig: hij kleefde tegen de
   laatste opsommingsregel aan. */
.briefing-step .start-actions { margin-top: 34px; }

@keyframes stap-in-rechts { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes stap-in-links  { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.briefing-step.van-rechts { animation: stap-in-rechts var(--dur-slow) var(--ease-out); }
.briefing-step.van-links  { animation: stap-in-links var(--dur-slow) var(--ease-out); }

.briefing-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 30px; flex-wrap: wrap;
}
.briefing-back {
  background: transparent; border: 1px solid var(--line); color: var(--ink-dim);
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
}
.briefing-back:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.briefing-dots { display: flex; gap: 8px; }
.briefing-dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.briefing-dots button:hover { background: rgba(255, 255, 255, 0.45); }
.briefing-dots button.actief { background: var(--medu-pink); transform: scale(1.2); }

.start-links { display: flex; gap: 16px; justify-content: center; margin-top: 14px; }
.btn-link {
  background: none; border: none; padding: 4px;
  color: var(--ink-dim); font-size: 13px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.btn-link:hover { color: var(--accent); }

/* De globale regel op regel 658 zet alle animatie al uit. Zonder animatie
   blijven de ringen echter op hun begin-opacity van 0 staan — dan is het baken
   een kale cirkel. Vandaar dat ze hier statisch zichtbaar worden gemaakt. */
@media (prefers-reduced-motion: reduce) {
  .briefing-beacon::before, .briefing-beacon::after { opacity: 0.22; }
}

/* Mike vond MuseoModerno hier slecht leesbaar; de briefingtitel gaat naar de
   body-letter. De rest van de merkstijl blijft ongewijzigd. */
.start-inner h1 { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.02em; }

/* ── Rondleiding (spotlight over de echte cockpit) ───────────────────────── */
.overlay-tour { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
/* De spotlight is een 'gat' in een paginagrote schaduw: geen extra laag nodig
   en het uitgelichte element blijft in zijn echte positie zichtbaar. */
.tour-spot {
  position: absolute; border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(0, 0, 72, 0.72);
  outline: 2px solid var(--medu-pink); outline-offset: 2px;
  transition: all var(--dur-mid) var(--ease-out);
}
.tour-box {
  position: absolute; width: 360px; max-width: calc(100vw - 32px);
  background: var(--off-white); color: var(--medu-blue-dark);
  border-radius: var(--radius-md); padding: 16px 18px;
  box-shadow: var(--shadow-lg); pointer-events: auto;
  transition: top var(--dur-mid) var(--ease-out), left var(--dur-mid) var(--ease-out);
  /* De kaart is licht, maar staat buiten .screen-light. Zonder deze tokens
     pakt "overslaan" (.btn-ghost) de witte inkt van het donkere thema en is
     hij op deze achtergrond vrijwel onleesbaar. */
  --ink: var(--medu-blue-dark);
  --ink-dim: rgba(0, 0, 72, 0.60);
  --ink-faint: rgba(0, 0, 72, 0.40);
  --line: rgba(0, 0, 72, 0.14);
  --accent: var(--medu-blue);
  --btn-primary-bg: var(--medu-pink);
  --btn-primary-fg: var(--medu-blue-dark);
  --btn-primary-bg-hover: var(--medu-pink-light);
}
.tour-box h3 { font-size: 17px; margin-bottom: 6px; }
.tour-box p { font-size: 14px; line-height: 1.5; }
.tour-stap { color: rgba(0, 0, 72, 0.45); margin-bottom: 4px; }
.tour-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* ── Merkbalk ────────────────────────────────────────────────────────────────
   Medu.game en College24 maken dit product samen: de techniek en de inhoud.
   Vandaar naast elkaar met een streep ertussen, niet het een boven het ander.

   Aan de kant van College24 hangt hier het merk Triage24 en niet het
   moederlogo: Steven wees erop dat de doelgroep Triage24 herkent.

   De twee logo's worden NIET op gelijke hoogte geschaald. Het medu-logo is een
   beeldmerk plus woordmerk (verhouding ruwweg 2:1), Triage24 is puur woordmerk
   (3,8:1). Even hoog laat Triage24 bijna twee keer zo breed en dus veel groter
   ogen. Deze hoogtes zijn op het oog gelijkgetrokken, niet op de meetlat: 40
   tegen 20 px komt uit op 85 tegen 77 px breed, en dat leest als gelijkwaardig.

   Alleen op de lichte schermen eromheen: start, verslaglegging, debriefing. In
   de cockpit zelf zit de speler op een huisartsenpost, niet in een product. */
.merkbalk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.merk-medu { height: 40px; width: auto; }
.merk-t24 { height: 20px; width: auto; }
.merk-streep { width: 1px; height: 26px; background: var(--line); }

/* Op de donkere hero hangen de lichte varianten in de markup: beide logo's zijn
   in hun standaarduitvoering donker en zouden daar wegvallen. Bij Medu.game is
   dat een aparte bestandsversie met een wit woordmerk en roze accenten, niet een
   naar wit gefilterde kopie: die zou het roze weggooien. Triage24 is één zwart
   vlak, dus daar is de witte variant wél een omzetting: beide PNG's komen uit
   assets/Triage24_logo.jpg.webp, waarbij de donkerte van de JPEG de alfa werd.
   Van Triage24 bestaat geen vectorversie; triage24.nl serveert zelf ook deze
   JPEG. Komt er een SVG van College24, vervang dan beide bestanden. */
.merkbalk-donker { border-top-color: rgba(255, 255, 255, 0.14); }
.merkbalk-donker .merk-streep { background: rgba(255, 255, 255, 0.22); }

@media (max-width: 480px) {
  .merkbalk { gap: 14px; }
  .merk-medu { height: 32px; }
  .merk-t24 { height: 16px; }
}

/* ── Secties die het scherm sinds 15 sep 2026 met de PDF deelt ────────────────
   Besluit Tim: scherm en PDF tonen hetzelfde, de PDF is leidend. */
.db-keuzes-blok, .db-verslag-blok, .db-alle-blok, .db-transcript-blok { margin: 18px 0; }
.db-keuzes { display: flex; flex-wrap: wrap; gap: 12px; }
.db-keuze {
  flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
}
.db-keuze-label { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
.db-keuze-waarde { font-weight: 600; }
.db-verslag, .db-transcript-blok pre {
  white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow-y: auto;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; line-height: 1.6;
}
@media (max-width: 720px) { .db-keuze { flex-basis: 100%; } }