/* DISPATCH TRAINER — night-shift console noir.
   Two worlds on one screen: the cold CAD terminal (phosphor amber on blue-black)
   and the caller's warm illustrated night. Offline build: system faces only —
   Cascadia (Win11) for the console voice, Georgia for the human one. */

:root {
  --ink: #0a0e16;            /* room-dark blue-black */
  --ink-2: #0f1522;          /* panel */
  --ink-3: #161e30;          /* raised */
  --phosphor: #ffb454;       /* CAD amber */
  --phosphor-dim: #8a6a3a;
  --phosphor-glow: rgba(255, 180, 84, 0.10);
  --crt-cyan: #7fd4d4;       /* secondary console accent */
  --paper: #e8e2d4;          /* narrative ivory */
  --paper-dim: #a89f8c;
  --best: #8fd48f;
  --acceptable: #d4c98f;
  --poor: #d49a6a;
  --fail: #e06c6c;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, "Lucida Console", monospace;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

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

html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  overflow: hidden;
}

/* faint room grain over everything — the 2 AM fluorescent hum */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg, transparent 0 2px, rgba(255,255,255,0.012) 2px 3px);
  z-index: 99;
}

.screen { display: none; height: 100vh; }
.screen.active { display: flex; flex-direction: column; animation: screen-in 320ms ease-out; }
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }

/* ============================ MENU ============================ */

#screen-menu.active { align-items: center; justify-content: center; }
.menu-wrap { width: min(680px, 92vw); text-align: center; }

.badge-line {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.35em;
  color: var(--phosphor-dim); margin-bottom: 18px;
}

.menu-masthead h1 {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(40px, 7vw, 64px); letter-spacing: 0.04em;
  color: var(--phosphor);
  text-shadow: 0 0 24px rgba(255,180,84,0.25);
}
.menu-masthead h1 .thin { font-weight: 200; color: var(--paper); }
.menu-masthead .sub {
  font-family: var(--mono); font-size: 12px; color: var(--paper-dim);
  margin-top: 10px; letter-spacing: 0.12em;
}

.menu-actions { margin-top: 48px; }

.btn-shift {
  display: block; width: 100%;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor);
  font-family: var(--mono); font-size: 22px; letter-spacing: 0.18em;
  padding: 22px 28px; cursor: pointer; position: relative;
  transition: border-color 160ms, box-shadow 160ms, transform 120ms;
}
.btn-shift:hover {
  border-color: var(--phosphor);
  box-shadow: 0 0 32px var(--phosphor-glow), inset 0 0 24px var(--phosphor-glow);
  transform: translateY(-1px);
}
.btn-shift .btn-kicker {
  position: absolute; top: -9px; left: 18px;
  background: var(--ink); padding: 0 8px;
  font-size: 10px; letter-spacing: 0.3em; color: var(--crt-cyan);
}
.btn-shift .btn-note {
  display: block; margin-top: 8px;
  font-size: 11px; letter-spacing: 0.08em; color: var(--paper-dim); text-transform: none;
}
.btn-shift.small { font-size: 15px; padding: 14px 22px; width: auto; }

.menu-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 30px 0 18px; color: var(--paper-dim);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
}
.menu-divider::before, .menu-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--ink-3);
}

.scenario-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.scenario-card {
  /* P0-5: now a real <button> for keyboard/AT access — reset the button chrome
     so it renders identically to the old <div> card. */
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; appearance: none; -webkit-appearance: none;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  padding: 14px 16px; cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.scenario-card:hover { border-color: var(--phosphor-dim); background: var(--ink-3); }
.scenario-card .sc-tier {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--crt-cyan);
}
.scenario-card .sc-title { font-size: 16px; margin-top: 5px; color: var(--paper); }
.scenario-card .sc-done {
  font-family: var(--mono); font-size: 10px; color: var(--best); margin-top: 4px;
}

.menu-foot { margin-top: 36px; font-family: var(--mono); font-size: 11px; color: var(--paper-dim); }

/* ============================ CALL ============================ */

.call-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; background: var(--ink-2);
  border-bottom: 1px solid var(--ink-3);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
}
.line-indicator { color: var(--crt-cyan); display: flex; align-items: center; gap: 8px; }
.line-lamp {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fail); box-shadow: 0 0 8px var(--fail);
  animation: lamp-pulse 1.6s ease-in-out infinite;
}
@keyframes lamp-pulse { 50% { opacity: 0.45; } }
.call-title { color: var(--paper-dim); letter-spacing: 0.2em; }
/* Fixed 2026-07-07 (QA sweep #2 finding S7, remaining item): like the two
   CAD inputs fixed 2026-07-06, #transcript-toggle had no base rule outside
   the mobile-only @media block, so on desktop it rendered as a default
   browser button inside the CRT topbar. Styled to match the topbar's
   mono/CRT treatment (same reset approach as .scenario-card above). */
.transcript-toggle {
  font: inherit; letter-spacing: inherit;
  appearance: none; -webkit-appearance: none;
  background: var(--ink); color: var(--crt-cyan);
  border: 1px solid var(--ink-3); border-radius: 2px;
  padding: 4px 10px; cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.transcript-toggle:hover { border-color: var(--phosphor-dim); background: var(--ink-3); }
.transcript-toggle:focus-visible { outline: 1px solid var(--phosphor-dim); }
.shift-pos { color: var(--phosphor-dim); }

.call-split { flex: 1; display: grid; grid-template-columns: 7fr 6fr; min-height: 0; }

/* — left: CAD — */
.pane-console {
  background: var(--ink-2);
  border-right: 1px solid var(--ink-3);
  padding: 18px 20px; overflow-y: auto;
  font-family: var(--mono);
  background-image: repeating-linear-gradient(
    0deg, transparent 0 3px, rgba(127,212,212,0.015) 3px 4px);
}
.cad-header {
  font-size: 12px; letter-spacing: 0.25em; color: var(--crt-cyan);
  border-bottom: 1px dashed var(--ink-3); padding-bottom: 8px;
}
.cad-fields { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.cad-field { display: flex; gap: 12px; font-size: 13px; }
.cad-field dt { width: 52px; color: var(--phosphor-dim); letter-spacing: 0.15em; flex-shrink: 0; }
.cad-field dd { color: var(--paper-dim); }
.cad-field.captured dd { color: var(--phosphor); }
.cad-field.captured { animation: field-capture 700ms ease-out; }
@keyframes field-capture {
  0% { background: var(--phosphor-glow); }
  100% { background: transparent; }
}
.cad-comments-label {
  margin-top: 20px; font-size: 11px; letter-spacing: 0.25em; color: var(--crt-cyan);
  border-bottom: 1px dashed var(--ink-3); padding-bottom: 6px;
}
.cad-comments { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--phosphor); }
.cad-comments .cmt-line { animation: field-capture 700ms ease-out; }

/* Fixed 2026-07-06 (go-live QA sweep finding S7): these two trainee-input
   fields had no rule anywhere outside the mobile-only @media(max-width:480px)
   block (font-size/min-height only), so on desktop -- the primary demo
   surface -- both rendered as plain default browser inputs clashing against
   the amber/cyan CRT theme. Styled to match .comment-beat textarea's already-
   established input treatment further down this file. */
.cad-location-input {
  width: 100%; background: var(--ink); color: var(--phosphor);
  border: 1px solid var(--ink-3); border-radius: 2px;
  font-family: inherit; font-size: 13px; padding: 3px 8px;
}
.cad-location-input::placeholder { color: var(--paper-dim); }
.cad-location-input:focus { outline: 1px solid var(--phosphor-dim); }

.cad-notes {
  width: 100%; margin-top: 6px; background: var(--ink); color: var(--phosphor);
  border: 1px solid var(--ink-3); border-radius: 2px;
  font-family: inherit; font-size: 12.5px; line-height: 1.7;
  padding: 10px; resize: vertical;
}
.cad-notes::placeholder { color: var(--paper-dim); }
.cad-notes:focus { outline: 1px solid var(--phosphor-dim); }

/* — right: the caller's world — */
.pane-caller { display: flex; flex-direction: column; min-height: 0; }
.vignette {
  flex: 1; position: relative; min-height: 0;
  border-bottom: 1px solid var(--ink-3);
  overflow: hidden;
}
.vignette-art {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 60% at 50% 38%, var(--scene-warm, #2a2030) 0%, transparent 70%),
    linear-gradient(180deg, #11131f 0%, #0a0c14 100%);
  transition: filter 600ms;
}
/* placeholder “illustration”: a lit window in the dark until real art ships */
.vignette-art::before {
  content: "";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%);
  width: 38%; aspect-ratio: 3/4;
  background: linear-gradient(180deg, var(--scene-window, #4a3a28) 0%, #1c1612 100%);
  border: 2px solid #000; box-shadow: 0 0 60px rgba(255,200,120,0.12);
}
.vignette[data-agitation="2"] .vignette-art { filter: saturate(1.25) contrast(1.06); }
.vignette[data-agitation="3"] .vignette-art { filter: saturate(1.5) contrast(1.15) hue-rotate(-8deg); }

.caller-mood {
  position: absolute; bottom: 10px; left: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
  color: var(--paper-dim); text-transform: uppercase;
}
.vignette[data-agitation="3"] .caller-mood { color: var(--fail); }

.caller-speech {
  padding: 18px 22px; min-height: 118px; max-height: 30vh; overflow-y: auto;
  font-size: 17px; line-height: 1.55; font-style: italic; color: var(--paper);
}
.caller-speech .who {
  display: block; font-family: var(--mono); font-style: normal;
  font-size: 10px; letter-spacing: 0.25em; color: var(--crt-cyan); margin-bottom: 6px;
}
.caller-speech.speaking { animation: speech-in 260ms ease-out; }
@keyframes speech-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
/* Audio-first: TRANSCRIPT toggle. When OFF, the caller's words are not shown as
   text (the trainee listens); the reserved min-height box keeps layout stable.
   State is wired + persisted in engine.js. Fixes the SME bug (2026-06-17): OFF
   must actually hide the transcription. */
body.dt-transcript-off .caller-speech { visibility: hidden; }

/* — bottom: decisions — */
.decision-strip {
  background: var(--ink-2); border-top: 1px solid var(--ink-3);
  padding: 0 18px 16px;
}
.timer-track { height: 3px; background: var(--ink-3); margin: 0 -18px; }
.timer-bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--crt-cyan), var(--phosphor));
  transform-origin: left; transition: none;
}
.timer-track.urgent .timer-bar { background: var(--fail); }

.decision-prompt {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--crt-cyan); padding: 12px 0 10px;
}
.choices { display: grid; gap: 8px; }
.choice-btn {
  text-align: left; background: var(--ink-3);
  border: 1px solid transparent; border-left: 3px solid var(--phosphor-dim);
  color: var(--paper); font-family: var(--serif); font-size: 15.5px;
  padding: 11px 16px; cursor: pointer;
  transition: border-color 120ms, background 120ms, transform 80ms;
}
.choice-btn:hover {
  background: #1b2438; border-left-color: var(--phosphor);
  transform: translateX(2px);
}
.choice-btn:active { transform: translateX(2px) scale(0.995); }

.comment-beat label {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--crt-cyan); margin: 12px 0 8px;
}
.comment-beat textarea {
  width: 100%; background: var(--ink); color: var(--phosphor);
  border: 1px solid var(--ink-3); font-family: var(--mono); font-size: 13px;
  padding: 10px; resize: vertical; line-height: 1.6;
  min-height: 220px;   /* bigger comments box (Daniel msg 4688) */
}
.comment-beat textarea:focus { outline: 1px solid var(--phosphor-dim); }
.comment-submit { margin-top: 8px; font-family: var(--mono); letter-spacing: 0.1em; }

/* ============================ DEBRIEF ============================ */

#screen-debrief.active { overflow-y: auto; display: block; }
.debrief-wrap { width: min(860px, 94vw); margin: 0 auto; padding: 48px 0 80px; }

.debrief-head h2 { font-family: var(--mono); font-size: 26px; color: var(--paper); margin-top: 6px; }
.verdict {
  margin-top: 16px; font-family: var(--mono); font-size: 18px; letter-spacing: 0.08em;
  padding: 14px 18px; border-left: 4px solid var(--phosphor);
  background: var(--ink-2); color: var(--phosphor);
}
.verdict.tier-fail { border-left-color: var(--fail); color: var(--fail); }
.verdict.tier-strong { border-left-color: var(--best); color: var(--best); }

.rubric { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rubric-dim {
  background: var(--ink-2); padding: 12px 14px;
  border: 1px solid var(--ink-3); font-size: 13.5px;
}
.rubric-dim .rd-name { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--crt-cyan); }
.rubric-dim .rd-result { margin-top: 5px; }
.rubric-dim.hit .rd-result { color: var(--best); }
.rubric-dim.miss .rd-result { color: var(--fail); }
.rubric-dim.partial .rd-result { color: var(--acceptable); }

.beat-review { margin-top: 34px; }
.beat-review h3, .comment-review h3 {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.28em;
  color: var(--phosphor-dim); margin-bottom: 14px;
}
.beat-card {
  background: var(--ink-2); border: 1px solid var(--ink-3);
  padding: 16px 18px; margin-bottom: 10px;
}
.beat-card .bc-prompt { font-family: var(--mono); font-size: 11.5px; color: var(--paper-dim); letter-spacing: 0.06em; }
.beat-card .bc-chosen { margin-top: 8px; font-size: 15px; }
.beat-card .bc-chosen .grade-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  padding: 2px 7px; margin-right: 9px; vertical-align: 1px;
}
.grade-best { background: rgba(143,212,143,0.14); color: var(--best); }
.grade-acceptable { background: rgba(212,201,143,0.14); color: var(--acceptable); }
.grade-poor { background: rgba(212,154,106,0.14); color: var(--poor); }
.grade-fail { background: rgba(224,108,108,0.16); color: var(--fail); }
.beat-card .bc-why { margin-top: 9px; font-size: 14px; line-height: 1.6; color: var(--paper-dim); }
.beat-card .bc-best { margin-top: 8px; font-size: 13.5px; color: var(--best); }
.beat-card .bc-protocol {
  margin-top: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.55;
  background: rgba(127,212,212,0.05); border-left: 3px solid var(--crt-cyan);
  color: var(--crt-cyan);
}

.comment-review { margin-top: 36px; }
.comment-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comment-cols h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.25em;
  color: var(--paper-dim); margin-bottom: 8px;
}
.comment-cols pre {
  background: var(--ink); border: 1px solid var(--ink-3);
  color: var(--phosphor); font-family: var(--mono); font-size: 12.5px;
  padding: 12px; white-space: pre-wrap; line-height: 1.65; min-height: 110px;
}
.comment-rule { margin-top: 12px; font-size: 13px; color: var(--paper-dim); font-style: italic; }

.debrief-actions { margin-top: 40px; display: flex; gap: 14px; align-items: center; }
.btn-plain {
  background: none; border: 1px solid var(--ink-3); color: var(--paper-dim);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  padding: 12px 18px; cursor: pointer; transition: color 140ms, border-color 140ms;
}
.btn-plain:hover { color: var(--paper); border-color: var(--paper-dim); }

@media (max-width: 900px) {
  .call-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .pane-console { border-right: none; border-bottom: 1px solid var(--ink-3); }
  .rubric, .comment-cols, .scenario-list { grid-template-columns: 1fr; }
}

/* ====================================================================
   LIGHT-BLUE MENU THEME (2026-06-12, per Daniel msg 28570)
   Palette lifted from his RCT roll-call decks: navy 06102B, gold C9A649,
   light blue-white E8EEF7, steel B9C3D1. Menu + debrief go light; the
   live call screen stays night-console — the contrast IS the design:
   you leave the bright roll-call room and sit down at the dark console.
   ==================================================================== */

:root {
  --rc-navy: #06102b;
  --rc-gold: #c9a649;
  --rc-gold-deep: #a8842e;
  --rc-light: #e8eef7;
  --rc-steel: #b9c3d1;
  --rc-card: #f4f7fc;
}

/* ---- menu, re-skinned ---- */
#screen-menu {
  background:
    radial-gradient(ellipse 120% 70% at 50% -20%, #ffffff 0%, transparent 60%),
    linear-gradient(170deg, var(--rc-light) 0%, #d3ddeb 100%);
}
#screen-menu .badge-line { color: var(--rc-gold-deep); }
#screen-menu .menu-masthead h1 {
  color: var(--rc-navy);
  text-shadow: none;
}
#screen-menu .menu-masthead h1 .thin { color: var(--rc-gold-deep); }
#screen-menu .menu-masthead .sub { color: #5a6880; }
#screen-menu .menu-masthead::after {
  content: "";
  display: block; width: 120px; height: 3px; margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--rc-gold), transparent);
}

#screen-menu .btn-shift {
  background: linear-gradient(180deg, var(--rc-navy), #0b1a40);
  border: 1px solid var(--rc-gold);
  color: var(--rc-gold);
}
#screen-menu .btn-shift:hover {
  box-shadow: 0 6px 28px rgba(6,16,43,0.35), inset 0 0 24px rgba(201,166,73,0.12);
  transform: translateY(-2px);
}
#screen-menu .btn-shift .btn-kicker { background: var(--rc-light); color: var(--rc-gold-deep); }
#screen-menu .btn-shift .btn-note { color: var(--rc-steel); }

#screen-menu .menu-divider { color: #5a6880; }
#screen-menu .menu-divider::before, #screen-menu .menu-divider::after { background: var(--rc-steel); }

#screen-menu .scenario-card {
  background: var(--rc-card);
  border: 1px solid var(--rc-steel);
  border-left: 4px solid var(--rc-gold);
  box-shadow: 0 1px 4px rgba(6,16,43,0.08);
  position: relative; overflow: hidden;
}
#screen-menu .scenario-card:hover {
  background: #ffffff; border-color: var(--rc-navy);
  box-shadow: 0 6px 18px rgba(6,16,43,0.16);
  transform: translateY(-2px);
}
#screen-menu .scenario-card::after {       /* gold sweep on hover */
  content: ""; position: absolute; inset: 0 auto 0 -110%;
  width: 100%; background: linear-gradient(100deg, transparent 30%, rgba(201,166,73,0.13) 50%, transparent 70%);
  transition: left 450ms ease;
}
#screen-menu .scenario-card:hover::after { left: 110%; }
#screen-menu .scenario-card .sc-tier { color: var(--rc-gold-deep); }
#screen-menu .scenario-card .sc-title { color: var(--rc-navy); }
#screen-menu .scenario-card .sc-done { color: #2e7d32; }
#screen-menu .menu-foot { color: #5a6880; }

/* staggered card reveal on menu load */
#screen-menu.active .scenario-card { animation: card-rise 420ms ease-out backwards; }
#screen-menu.active .scenario-card:nth-child(2)  { animation-delay: 60ms; }
#screen-menu.active .scenario-card:nth-child(3)  { animation-delay: 120ms; }
#screen-menu.active .scenario-card:nth-child(4)  { animation-delay: 180ms; }
#screen-menu.active .scenario-card:nth-child(5)  { animation-delay: 240ms; }
#screen-menu.active .scenario-card:nth-child(6)  { animation-delay: 300ms; }
#screen-menu.active .scenario-card:nth-child(7)  { animation-delay: 360ms; }
#screen-menu.active .scenario-card:nth-child(8)  { animation-delay: 420ms; }
#screen-menu.active .scenario-card:nth-child(9)  { animation-delay: 480ms; }
#screen-menu.active .scenario-card:nth-child(10) { animation-delay: 540ms; }
#screen-menu.active .scenario-card:nth-child(11) { animation-delay: 600ms; }
#screen-menu.active .scenario-card:nth-child(12) { animation-delay: 660ms; }
@keyframes card-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }

/* ---- debrief, re-skinned to match the roll-call room ---- */
#screen-debrief {
  background: linear-gradient(170deg, var(--rc-light) 0%, #d8e1ee 100%);
}
#screen-debrief .badge-line { color: var(--rc-gold-deep); }
#screen-debrief .debrief-head h2 { color: var(--rc-navy); }
#screen-debrief .verdict {
  background: var(--rc-navy); border-left-color: var(--rc-gold); color: var(--rc-gold);
}
#screen-debrief .verdict.tier-strong { border-left-color: #66bb6a; color: #9ce39f; }
#screen-debrief .verdict.tier-fail { border-left-color: #ef5350; color: #ff9e9a; }
#screen-debrief .rubric-dim {
  background: var(--rc-card); border: 1px solid var(--rc-steel); color: var(--rc-navy);
}
#screen-debrief .rubric-dim .rd-name { color: var(--rc-gold-deep); }
#screen-debrief .rubric-dim.hit .rd-result { color: #2e7d32; }
#screen-debrief .rubric-dim.miss .rd-result { color: #c62828; }
#screen-debrief .rubric-dim.partial .rd-result { color: #a8842e; }
#screen-debrief .beat-review h3, #screen-debrief .comment-review h3 { color: var(--rc-gold-deep); }
#screen-debrief .beat-card {
  background: var(--rc-card); border: 1px solid var(--rc-steel); color: var(--rc-navy);
}
#screen-debrief .beat-card .bc-prompt { color: #5a6880; }
#screen-debrief .beat-card .bc-why { color: #3c485e; }
#screen-debrief .beat-card .bc-best { color: #2e7d32; }
#screen-debrief .beat-card .bc-protocol {
  background: rgba(6,16,43,0.05); border-left-color: var(--rc-navy); color: #1c2c55;
}
#screen-debrief .comment-cols pre {
  background: var(--rc-navy); border-color: var(--rc-steel);
}
#screen-debrief .comment-rule { color: #5a6880; }
#screen-debrief .btn-plain { border-color: var(--rc-steel); color: #3c485e; }
#screen-debrief .btn-plain:hover { color: var(--rc-navy); border-color: var(--rc-navy); }
#screen-debrief .grade-best { background: rgba(46,125,50,0.12); color: #2e7d32; }
#screen-debrief .grade-acceptable { background: rgba(168,132,46,0.12); color: #a8842e; }
#screen-debrief .grade-poor { background: rgba(230,126,34,0.12); color: #b35c1e; }
#screen-debrief .grade-fail { background: rgba(198,40,40,0.12); color: #c62828; }
#screen-debrief .debrief-actions .btn-shift {
  background: linear-gradient(180deg, var(--rc-navy), #0b1a40);
  border-color: var(--rc-gold); color: var(--rc-gold);
}

/* ---- incoming-call ring overlay (the transition INTO the dark) ---- */
#ring-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: none; align-items: center; justify-content: center; flex-direction: column;
  background: var(--ink);
}
#ring-overlay.ringing { display: flex; animation: ring-fade 200ms ease-out; }
@keyframes ring-fade { from { opacity: 0; } to { opacity: 1; } }
#ring-overlay .ring-lamp {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--fail); box-shadow: 0 0 24px var(--fail);
  animation: ring-pulse 600ms ease-in-out infinite;
}
@keyframes ring-pulse { 50% { opacity: 0.25; transform: scale(0.85); } }
#ring-overlay .ring-text {
  margin-top: 22px; font-family: var(--mono); font-size: 15px;
  letter-spacing: 0.5em; color: var(--phosphor);
  animation: ring-pulse 600ms ease-in-out infinite;
}
#ring-overlay .ring-sub {
  margin-top: 10px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; color: var(--paper-dim);
}

/* menu must scroll once the scenario library outgrows the viewport
   (found in self-QA 2026-06-12: 12 cards clipped the masthead) */
#screen-menu.active { overflow-y: auto; }
.menu-wrap { margin: auto; padding: 48px 0 64px; }
/* flex centering pushes overflowing content off the top; margin:auto on the
   child centers when short AND scrolls clean when tall */
#screen-menu.active { justify-content: flex-start; }

/* sound toggle — quiet corner control */
#sound-toggle {
  position: fixed; right: 14px; bottom: 12px; z-index: 60;
  background: rgba(127,127,127,0.12); border: 1px solid rgba(127,127,127,0.3);
  font-size: 14px; padding: 6px 9px; cursor: pointer; border-radius: 4px;
  opacity: 0.65; transition: opacity 140ms;
}
#sound-toggle:hover { opacity: 1; }

/* ====================================================================
   MOBILE / PHONE LAYOUT (≤480px) — ADDITIVE, 2026-06-21
   Desktop + tablet (the max-width:900px block above) are untouched.
   Goal: single phone-friendly column, no horizontal scroll, tappable
   (≥44px) full-width controls. Same dark/roll-call palette throughout.
   Root problem fixed here: body{overflow:hidden} + .screen{height:100vh}
   crushes the stacked live-call panes on a phone — on mobile we let the
   page flow and scroll vertically instead of locking to one viewport.
   ==================================================================== */
@media (max-width: 480px) {

  /* let the document breathe + scroll vertically; kill any sideways scroll */
  html, body { height: auto; overflow-x: hidden; overflow-y: auto; }

  /* screens stop being fixed-height viewport panes — they grow with content */
  .screen { height: auto; min-height: 100vh; }
  .screen.active { display: flex; }   /* flex column inherited; height now auto */

  /* ---------------- MENU ---------------- */
  #screen-menu.active { padding: 0; }
  .menu-wrap { width: 100%; padding: 30px 16px 56px; }
  .menu-actions { margin-top: 30px; }

  .menu-masthead h1 { font-size: clamp(34px, 11vw, 48px); }
  .badge-line { letter-spacing: 0.22em; font-size: 10px; word-break: break-word; }

  /* shift buttons: comfortable tap target, smaller type so the label fits */
  .btn-shift {
    font-size: 18px; letter-spacing: 0.1em;
    padding: 20px 18px; min-height: 56px;
  }
  .btn-shift .btn-note { font-size: 10.5px; }

  /* single-call library collapses to one column (tablet rule already does
     this at 900px; restated here so it holds with the new menu padding) */
  .scenario-list { grid-template-columns: 1fr; }
  .scenario-card { padding: 16px; min-height: 52px; }
  .scenario-card .sc-title { font-size: 15px; }

  /* ---------------- LIVE CALL ---------------- */
  /* topbar: 4 cramped items wrap to a tidy 2-row block instead of overflowing */
  .call-topbar {
    flex-wrap: wrap; gap: 6px 12px; padding: 9px 14px;
    font-size: 11px; line-height: 1.3;
  }
  .call-title { flex: 1 1 100%; order: 3; letter-spacing: 0.12em; }
  .shift-pos { order: 4; }
  /* transcript toggle stays a real tap target */
  .transcript-toggle { min-height: 34px; padding: 6px 10px; }

  /* the split is already 1fr / two rows at 900px; on a phone we drop the
     forced equal rows so each pane sizes to its content and the screen
     scrolls (no internal crush, no clipped notes box) */
  .call-split { grid-template-rows: auto auto; }

  .pane-console { padding: 14px 14px; }
  .cad-field { font-size: 12.5px; gap: 10px; }
  .cad-field dt { width: 46px; }
  .cad-location-input,
  .cad-notes {
    font-size: 16px;   /* ≥16px stops iOS zoom-on-focus */
  }
  .cad-notes { min-height: 120px; }

  /* caller world: cap the art so the speech + decisions stay reachable */
  .pane-caller { min-height: 240px; }
  .vignette { min-height: 130px; }
  .caller-speech {
    font-size: 16px; padding: 14px 16px;
    min-height: 90px; max-height: none;   /* page scrolls instead */
  }

  /* ---------------- DECISION STRIP ---------------- */
  .decision-strip { padding: 0 14px 18px; }
  .timer-track { margin: 0 -14px; }
  .decision-prompt { padding: 12px 0 10px; }

  /* MCQ option buttons: full width, generously tappable (≥44px) */
  .choices { gap: 10px; }
  .choice-btn {
    width: 100%;
    font-size: 15px; line-height: 1.4;
    padding: 14px 16px; min-height: 48px;
  }
  /* the X-translate hover/active is a desktop affordance; flatten on touch
     so a tap doesn't nudge the button sideways under the finger */
  .choice-btn:hover, .choice-btn:active { transform: none; }

  .comment-beat textarea {
    font-size: 16px;          /* ≥16px: no iOS zoom */
    min-height: 160px;
  }
  .comment-submit { width: 100%; min-height: 48px; }

  /* ---------------- DEBRIEF / SCORECARD ---------------- */
  .debrief-wrap { width: 100%; padding: 28px 16px 64px; }
  .debrief-head h2 { font-size: 21px; }
  .verdict { font-size: 15px; padding: 12px 14px; }

  /* rubric + comment columns + grid all collapse to one column */
  .rubric, .comment-cols { grid-template-columns: 1fr; }

  .beat-card { padding: 14px; }
  .comment-cols pre { font-size: 12px; }

  /* debrief actions stack full-width so both are easy taps */
  .debrief-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .debrief-actions .btn-shift.small,
  .debrief-actions .btn-plain {
    width: 100%; text-align: center; min-height: 48px;
  }

  /* the graded-comments debrief block: stack the columns, ease the type */
  .comment-score { flex-direction: column; align-items: flex-start; gap: 4px; }
  .comment-score .cs-num { font-size: 30px; }
  .cg-dims { grid-template-columns: 1fr; }
}

/* ====================================================================
   MENU HERO BANNER (2026-06-21) — a cinematic header image over the
   masthead. References ../img/trainers/hero_calltaking.webp (demo export: the image is copied into this folder so the tree is self-contained). The image
   is OPTIONAL: it layers UNDER the title via a gradient that fades to the
   existing menu background, so a missing file degrades to the plain
   light-blue roll-call header with no broken-image box and no layout shift.
   ==================================================================== */
.menu-masthead {
  position: relative;
  padding: 30px 24px 26px;
  margin-bottom: 8px;
  border-radius: 10px;
  overflow: hidden;
  /* base color sits first so it shows through wherever the image is absent
     or still loading; the image (if present) paints on top, then a scrim
     gradient keeps the title legible. Background shorthand with a missing
     url() simply paints nothing — never a broken-image glyph. */
  background:
    linear-gradient(180deg, rgba(6,16,43,0.62) 0%, rgba(6,16,43,0.30) 45%, rgba(232,238,247,0.92) 100%),
    url("../img/trainers/hero_calltaking.webp") center top / cover no-repeat,
    linear-gradient(170deg, #0b1a40 0%, #11254f 100%);
}
/* on the light menu skin, lift the title/sub for contrast against the image scrim */
#screen-menu .menu-masthead { box-shadow: 0 8px 30px rgba(6,16,43,0.22); }
#screen-menu .menu-masthead h1 { color: #ffffff; text-shadow: 0 2px 18px rgba(6,16,43,0.55); }
#screen-menu .menu-masthead h1 .thin { color: var(--rc-gold); }
#screen-menu .menu-masthead .sub { color: #d7e0ef; }
#screen-menu .menu-masthead .badge-line { color: var(--rc-gold); }
#screen-menu .menu-masthead::after {
  background: linear-gradient(90deg, transparent, var(--rc-gold), transparent);
}
@media (max-width: 480px) {
  .menu-masthead { padding: 22px 16px 20px; border-radius: 8px; }
}

/* ====================================================================
   GRADED COMMENTS — the documentation step's debrief (2026-06-21)
   The comment beat is now a real, scored part of the call (see engine.js
   gradeComments + DT_GRADER). This styles the score headline, the
   per-dimension coverage, the key-fact hit/miss chips, and the coaching,
   in the roll-call light palette so it sits with the rest of the debrief.
   ==================================================================== */
.comment-score {
  display: flex; align-items: baseline; gap: 14px;
  margin: 4px 0 16px; padding: 14px 18px;
  background: var(--rc-navy); color: var(--rc-gold);
  border-left: 4px solid var(--rc-gold);
  font-family: var(--mono);
}
.comment-score.tier-strong { border-left-color: #66bb6a; color: #9ce39f; }
.comment-score.tier-fail   { border-left-color: #ef5350; color: #ff9e9a; }
.comment-score .cs-num { font-size: 34px; font-weight: 700; letter-spacing: 0.02em; }
.comment-score .cs-verdict { font-size: 12px; letter-spacing: 0.22em; opacity: 0.92; }

.comment-grade { margin-bottom: 16px; }
.cg-dims {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px;
}
.cg-dim {
  background: var(--rc-card); border: 1px solid var(--rc-steel);
  border-left: 3px solid var(--rc-steel);
  padding: 9px 12px; font-size: 12.5px; color: var(--rc-navy);
}
.cg-dim.hit     { border-left-color: #66bb6a; }
.cg-dim.partial { border-left-color: var(--rc-gold); }
.cg-dim.miss    { border-left-color: #ef5350; }
.cg-dim .cg-dim-name {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.2em; color: var(--rc-gold-deep); margin-bottom: 3px;
}
.cg-dim .cg-dim-detail { display: block; line-height: 1.45; color: #3c485e; }
.cg-dim.hit .cg-dim-detail     { color: #2e7d32; }
.cg-dim.miss .cg-dim-detail    { color: #c62828; }
.cg-dim.partial .cg-dim-detail { color: #a8842e; }

.cg-facts { margin-bottom: 14px; }
.cg-facts-row {
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  padding: 7px 0; border-top: 1px dashed var(--rc-steel);
}
.cg-facts-row .cg-label {
  display: inline-block; min-width: 92px;
  font-size: 9.5px; letter-spacing: 0.2em; color: var(--rc-gold-deep);
}
.cg-facts-row.cg-hit  { color: #2e7d32; }
.cg-facts-row.cg-miss { color: #c62828; }

.cg-coaching {
  list-style: none; margin: 0; padding: 0;
}
.cg-coaching li {
  position: relative; padding: 7px 0 7px 18px;
  font-size: 13px; line-height: 1.55; color: #3c485e;
  border-top: 1px solid rgba(6,16,43,0.06);
}
.cg-coaching li::before {
  content: "›"; position: absolute; left: 2px; top: 6px;
  color: var(--rc-gold-deep); font-weight: 700;
}