/* TRAFFIC-STOP TRAINER — field console noir, officer-side sibling of the dispatch
   console. Same night-shift palette; patrol-blue accent (vs dispatch amber) marks
   the field side. Offline build: system faces only. */

:root {
  --ink: #0a0e16;            /* room-dark blue-black */
  --ink-2: #0f1522;          /* panel */
  --ink-3: #161e30;          /* raised */
  --phosphor: #ffb454;       /* MDT amber */
  --phosphor-dim: #8a6a3a;
  --patrol: #6db3ff;         /* patrol-blue field accent */
  --patrol-dim: #3f6f9e;
  --patrol-glow: rgba(109, 179, 255, 0.10);
  --crt-cyan: #7fd4d4;
  --paper: #e8e2d4;
  --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-x: hidden;
}
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; min-height: 100vh; }
.screen.active { display: flex; flex-direction: column; animation: screen-in 320ms ease-out; }
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }

.btn-plain {
  background: none; border: 1px solid var(--ink-3); color: var(--paper-dim);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em;
  padding: 9px 16px; cursor: pointer; transition: border-color 140ms, color 140ms;
}
.btn-plain:hover { border-color: var(--patrol-dim); color: var(--paper); }

/* ============================ MENU ============================ */
#screen-menu.active { align-items: center; justify-content: center; padding: 40px 0; }
.menu-wrap { width: min(720px, 92vw); text-align: center; }

.badge-line {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.35em;
  color: var(--patrol-dim); margin-bottom: 18px;
}
.menu-masthead h1 {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(38px, 6.5vw, 60px); letter-spacing: 0.04em;
  color: var(--patrol);
  text-shadow: 0 0 24px rgba(109,179,255,0.22);
}
.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: 42px; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.btn-shift {
  display: block; width: 100%;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--patrol-dim);
  color: var(--patrol);
  font-family: var(--mono); font-size: 20px; letter-spacing: 0.14em;
  padding: 22px 24px; cursor: pointer; position: relative;
  transition: border-color 160ms, box-shadow 160ms, transform 120ms;
  text-align: center;
}
.btn-shift:hover {
  border-color: var(--patrol);
  box-shadow: 0 0 32px var(--patrol-glow), inset 0 0 24px var(--patrol-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.06em; color: var(--paper-dim);
  text-transform: none; line-height: 1.45;
}
.btn-shift.small { font-size: 15px; padding: 13px 22px; width: auto; }
.mode-tile { font-size: 17px; padding: 20px 18px; }

.menu-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 0 16px; 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 {
  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(--patrol-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-band {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--paper-dim); margin-top: 3px;
}
.scenario-card .sc-done {
  font-family: var(--mono); font-size: 11px; color: var(--best); margin-top: 7px;
}
.menu-foot {
  margin-top: 26px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--paper-dim);
}

/* ============================ DRILLS ============================ */
#screen-phonetic.active, #screen-plate.active { align-items: center; padding: 36px 16px; }
.drill-wrap { width: min(720px, 94vw); }
.drill-head { text-align: center; margin-bottom: 18px; }
.drill-controls {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 10px;
}
.btn-toggle {
  background: var(--ink-2); border: 1px solid var(--patrol-dim); color: var(--patrol);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  padding: 9px 14px; cursor: pointer; transition: border-color 140ms, box-shadow 140ms;
}
.btn-toggle:hover { border-color: var(--patrol); box-shadow: 0 0 18px var(--patrol-glow); }
.drill-score {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--paper-dim);
}
.drill-card {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--ink-3); padding: 30px 26px; text-align: center;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
}
.ph-prompt, .pl-prompt { min-height: 92px; display: flex; align-items: center; justify-content: center; }
.ph-big {
  font-family: var(--mono); font-weight: 700; font-size: 92px; color: var(--patrol);
  text-shadow: 0 0 34px rgba(109,179,255,0.3); letter-spacing: 0.04em;
}
.ph-plate, .pl-plate {
  font-family: var(--mono); font-weight: 700; font-size: 52px; color: var(--phosphor);
  letter-spacing: 0.14em; text-shadow: 0 0 24px rgba(255,180,84,0.25);
  background: #0c0c0c; border: 2px solid var(--phosphor-dim); border-radius: 8px;
  padding: 10px 26px;
}
.pl-heard {
  font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--paper);
  line-height: 1.4;
}
.ph-result-num, .pl-result-num {
  font-family: var(--mono); font-weight: 700; font-size: 72px; color: var(--patrol);
}
.ph-hint, .pl-hint {
  font-family: var(--mono); font-size: 13px; color: var(--paper-dim);
  letter-spacing: 0.06em; margin: 14px 0 18px;
}
.drill-input {
  width: 100%; max-width: 420px;
  background: #0b0f14; border: 1px solid var(--patrol-dim); border-radius: 6px;
  color: var(--paper); font-family: var(--mono); font-size: 22px; letter-spacing: 0.1em;
  text-align: center; padding: 12px 14px; margin-bottom: 14px;
}
.drill-input:focus { outline: none; border-color: var(--patrol); box-shadow: 0 0 18px var(--patrol-glow); }
.ph-feedback, .pl-feedback { margin-top: 20px; font-family: var(--mono); font-size: 14px; min-height: 24px; }
.ph-feedback.good .ph-ok, .pl-feedback.good .pl-ok { color: var(--best); }
.ph-feedback.bad .ph-bad, .pl-feedback.bad .pl-bad { color: var(--poor); }
.ph-ok, .pl-ok { color: var(--best); }
.ph-bad, .pl-bad { color: var(--poor); line-height: 1.5; }
.ph-cells, .pl-cells { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.ph-cell, .pl-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid var(--ink-3); border-radius: 5px; padding: 6px 8px; min-width: 44px;
}
.ph-cell.ok, .pl-cell.ok { border-color: var(--best); }
.ph-cell.bad, .pl-cell.bad { border-color: var(--fail); }
.ph-cc, .pl-cc { font-size: 20px; font-weight: 700; color: var(--phosphor); }
.ph-cw, .pl-cw { font-size: 11px; color: var(--paper-dim); }

.drill-ref {
  margin-top: 22px; background: var(--ink-2); border: 1px solid var(--ink-3);
  padding: 16px 18px;
}
.ref-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--crt-cyan); margin-bottom: 12px;
}
.ref-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px;
  font-family: var(--mono); font-size: 13px; color: var(--paper-dim);
}
.ref-line { font-family: var(--mono); font-size: 13px; color: var(--paper-dim); margin: 4px 0; }
.ref-line b, .ref-grid b { color: var(--phosphor); }

/* ============================ LIVE STOP ============================ */
#screen-stop.active { height: 100vh; overflow: hidden; }
.stop-topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px; border-bottom: 1px solid var(--ink-3);
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
  background: var(--ink-2);
}
.line-indicator { color: var(--patrol); display: flex; align-items: center; gap: 8px; }
.line-lamp {
  width: 9px; height: 9px; border-radius: 50%; background: var(--patrol);
  box-shadow: 0 0 10px var(--patrol); animation: lamp 1.4s ease-in-out infinite;
}
@keyframes lamp { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.stop-title { color: var(--paper); flex: 1; }
.stop-pos { color: var(--paper-dim); }

.stop-split { flex: 1; display: grid; grid-template-columns: 360px 1fr; min-height: 0; }

.pane-mdt {
  background: #070b12; border-right: 1px solid var(--ink-3);
  padding: 16px 16px 12px; display: flex; flex-direction: column; min-height: 0;
}
.mdt-header {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--phosphor); border-bottom: 1px solid var(--ink-3); padding-bottom: 8px; margin-bottom: 10px;
}
.mdt-fields { display: flex; flex-direction: column; gap: 2px; }
.mdt-field {
  display: grid; grid-template-columns: 54px 1fr; align-items: baseline; gap: 8px;
  padding: 5px 6px; border: 1px solid transparent;
}
.mdt-field dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--phosphor-dim); }
.mdt-field dd { font-family: var(--mono); font-size: 13px; color: var(--paper); word-break: break-word; }
.mdt-field.captured { border-color: var(--phosphor-dim); animation: cap-flash 600ms ease-out; }
.mdt-field-ret.captured { border-color: var(--patrol); }
@keyframes cap-flash {
  0% { background: var(--patrol-glow); } 100% { background: transparent; }
}
.mdt-log-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--paper-dim);
  margin: 14px 0 6px;
}
.mdt-log { flex: 1; overflow-y: auto; min-height: 60px; }
.log-line {
  font-family: var(--mono); font-size: 12px; color: var(--crt-cyan);
  padding: 4px 0; border-bottom: 1px dotted var(--ink-3); line-height: 1.4;
}
.mdt-notes {
  margin-top: 8px; background: #0b0f14; border: 1px solid var(--ink-3); border-radius: 4px;
  color: var(--paper); font-family: var(--mono); font-size: 12px; padding: 8px; resize: none;
}

.pane-scene { display: flex; flex-direction: column; min-height: 0; }
.scene { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.scene-art {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 70% 20%, var(--scene-window, #3a4a2e) 0%, transparent 55%),
    linear-gradient(180deg, var(--scene-warm, #241f1a), #05070b);
  transition: filter 400ms;
}
.scene[data-agitation="1"] .scene-art { filter: saturate(1.1) brightness(1.04); }
.scene[data-agitation="2"] .scene-art { filter: saturate(1.25) brightness(1.08) hue-rotate(-6deg); }
.scene[data-agitation="3"] .scene-art { filter: saturate(1.4) brightness(1.12) hue-rotate(-12deg); }
.stop-setup {
  position: relative; margin: 18px; max-width: 440px;
  background: rgba(7,11,18,0.78); border: 1px solid var(--ink-3); padding: 14px 16px;
  backdrop-filter: blur(2px);
}
.su-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 4px 0; }
.su-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--patrol-dim); }
.su-v { font-family: var(--mono); font-size: 12px; color: var(--paper); line-height: 1.4; }
.dispatch-mood {
  position: absolute; bottom: 12px; left: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--paper-dim);
  background: rgba(7,11,18,0.7); padding: 4px 10px;
}
.dispatch-speech {
  padding: 16px 22px; font-family: var(--serif); font-size: 18px; line-height: 1.55;
  color: var(--paper); border-top: 1px solid var(--ink-3); background: var(--ink-2);
  min-height: 92px; max-height: 32vh; overflow-y: auto;
}
.dispatch-speech .who, .dispatch-speech .scene-cue {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  color: var(--patrol); margin-bottom: 6px;
}
.dispatch-speech .scene-cue { color: var(--crt-cyan); }
.dispatch-speech.speaking { animation: speak-in 280ms ease-out; }
@keyframes speak-in { from { opacity: 0.3; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* decision strip */
.decision-strip {
  border-top: 1px solid var(--ink-3); background: var(--ink);
  padding: 12px 18px 16px;
}
.timer-track {
  height: 4px; background: var(--ink-3); border-radius: 2px; overflow: hidden; margin-bottom: 12px;
}
.timer-bar {
  height: 100%; width: 100%; transform-origin: left; background: var(--patrol);
  transform: scaleX(1);
}
.timer-track.reading .timer-bar { background: var(--patrol-dim); }
.timer-track.urgent .timer-bar { background: var(--fail); }
.decision-prompt {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; color: var(--phosphor);
  margin-bottom: 12px; line-height: 1.45;
}
.choices { display: grid; gap: 9px; }
.choice-btn {
  text-align: left; background: var(--ink-2); border: 1px solid var(--ink-3);
  color: var(--paper); font-family: var(--serif); font-size: 16px; line-height: 1.45;
  padding: 14px 16px; cursor: pointer; transition: border-color 130ms, background 130ms;
}
.choice-btn:hover, .choice-btn:focus {
  border-color: var(--patrol); background: var(--ink-3); outline: none;
}
.comment-beat label {
  display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--paper-dim); margin-bottom: 8px;
}
.comment-beat textarea {
  width: 100%; background: #0b0f14; border: 1px solid var(--patrol-dim); border-radius: 4px;
  color: var(--paper); font-family: var(--mono); font-size: 14px; padding: 10px; resize: vertical;
  margin-bottom: 10px;
}
.comment-submit { background: var(--ink-3); text-align: center; font-family: var(--mono); letter-spacing: 0.1em; }

/* ============================ DEBRIEF ============================ */
#screen-debrief.active { align-items: center; padding: 36px 16px; }
.debrief-wrap { width: min(820px, 94vw); }
.debrief-head { text-align: center; margin-bottom: 24px; }
.debrief-head h2 { font-family: var(--mono); font-size: 28px; color: var(--paper); letter-spacing: 0.02em; }
.verdict {
  font-family: var(--mono); font-size: 18px; letter-spacing: 0.06em; margin-top: 12px;
  color: var(--best); padding: 8px 0;
}
.verdict.tier-strong { color: var(--best); }
/* Fixed 2026-07-07 (QA sweep #2 finding S9): the mid "SOLID" band (65-84%) had
   no tier class, so it fell back to .verdict's base color -- the same green as
   tier-strong, making a 66% stop look identical to a 95% one. Colored with the
   palette's own mid-grade var (--acceptable, already the "partial" rubric color). */
.verdict.tier-solid { color: var(--acceptable); }
.verdict.tier-fail { color: var(--fail); }

.rubric { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; }
.rubric-dim { border: 1px solid var(--ink-3); border-left-width: 3px; padding: 10px 14px; background: var(--ink-2); }
.rubric-dim.hit { border-left-color: var(--best); }
.rubric-dim.partial { border-left-color: var(--acceptable); }
.rubric-dim.miss { border-left-color: var(--fail); }
.rd-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--paper-dim); }
.rd-result { font-size: 14px; color: var(--paper); margin-top: 4px; line-height: 1.4; }

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

.comment-review { margin-top: 24px; }
.comment-score {
  display: flex; align-items: baseline; gap: 14px; padding: 12px 16px;
  background: var(--ink-2); border: 1px solid var(--ink-3); margin-bottom: 12px;
}
.comment-score.tier-strong { border-color: var(--best); }
.comment-score.tier-fail { border-color: var(--fail); }
.cs-num { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--patrol); }
.cs-verdict { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--paper-dim); }
.cg-dims { display: grid; gap: 6px; margin-bottom: 12px; }
.cg-dim { display: flex; justify-content: space-between; gap: 14px; font-family: var(--mono); font-size: 12px; padding: 6px 10px; background: var(--ink-2); }
.cg-dim.hit { border-left: 2px solid var(--best); }
.cg-dim.partial { border-left: 2px solid var(--acceptable); }
.cg-dim.miss { border-left: 2px solid var(--fail); }
.cg-dim-name { color: var(--paper-dim); }
.cg-dim-detail { color: var(--paper); text-align: right; }
.cg-facts { margin-bottom: 12px; }
.cg-facts-row { font-family: var(--mono); font-size: 12px; padding: 6px 0; line-height: 1.5; }
.cg-label { display: inline-block; letter-spacing: 0.12em; margin-right: 10px; }
.cg-hit .cg-label { color: var(--best); }
.cg-miss .cg-label { color: var(--fail); }
.cg-coaching { margin: 8px 0 0 18px; }
.cg-coaching li { font-size: 14px; color: var(--paper); line-height: 1.55; margin: 5px 0; }

.comment-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.comment-cols h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--paper-dim); margin-bottom: 8px; }
.comment-cols pre {
  background: #0b0f14; border: 1px solid var(--ink-3); padding: 12px;
  font-family: var(--mono); font-size: 12px; color: var(--paper); white-space: pre-wrap;
  line-height: 1.5; min-height: 80px;
}
.comment-rule { font-size: 13px; color: var(--paper-dim); font-style: italic; margin-top: 12px; line-height: 1.5; }

.debrief-actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; }

/* ============================ STOP-INITIATED OVERLAY ============================ */
#ring-overlay {
  position: fixed; inset: 0; z-index: 200; background: var(--ink);
  display: none; flex-direction: column; align-items: center; justify-content: center;
}
#ring-overlay.ringing { display: flex; animation: screen-in 200ms ease-out; }
.ring-lamp {
  width: 30px; height: 30px; border-radius: 50%; background: var(--patrol);
  box-shadow: 0 0 40px var(--patrol); animation: lamp 0.8s ease-in-out infinite; margin-bottom: 24px;
}
.ring-text { font-family: var(--mono); font-size: 22px; letter-spacing: 0.3em; color: var(--patrol); }
.ring-sub { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--paper-dim); margin-top: 12px; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 760px) {
  .stop-split { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; }
  #screen-stop.active { height: auto; overflow: visible; }
  .pane-mdt { border-right: none; border-bottom: 1px solid var(--ink-3); }
  .mode-grid, .scenario-list, .rubric, .comment-cols { grid-template-columns: 1fr; }
  .ref-grid { grid-template-columns: repeat(2, 1fr); }
  .ph-big { font-size: 68px; }
  .ph-plate, .pl-plate { font-size: 38px; }
}

/* ===================== RADIO RUN DRILL (radiorun.js) ===================== */
.rr-input { width: 100%; resize: vertical; font-family: inherit; }
.rr-scene { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
.rr-kicker { font-size: 11px; letter-spacing: .12em; color: #6fb1ff; font-weight: 700; }
.rr-oos { color: #e0a45a; }
.rr-state { color: #9aa0aa; font-size: 13px; }
.rr-audio-text { margin-top: 8px; font-style: italic; color: #c8cdd6; min-height: 1.2em; }
.rr-hint { color: #9aa0aa; font-size: 13px; margin: 6px 0 10px; }
.rr-feedback { margin-top: 10px; }
.rr-grade { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid #444; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.rr-grade.good { border-left-color: #3fb950; }
.rr-grade.bad { border-left-color: #f85149; }
.rr-grade-head { font-size: 12px; letter-spacing: .08em; color: #9aa0aa; font-weight: 700; margin-bottom: 8px; }
.rr-el { font-size: 13px; margin: 3px 0; }
.rr-el.ok { color: #7fc78f; } .rr-el.bad { color: #e0867d; }
.rr-el.pending { color: #8a909a; }
.rr-flag { margin-top: 8px; color: #e0a45a; font-size: 13px; font-weight: 600; }
.rr-model { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.12);
  font-size: 13px; color: #c8cdd6; }
.rr-model-lbl { display: block; font-size: 10px; letter-spacing: .1em; color: #6fb1ff; font-weight: 700; margin-bottom: 3px; }
.rr-return { border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.rr-return.clear { background: rgba(63,185,80,.07); border: 1px solid rgba(63,185,80,.25); }
.rr-return.flag { background: rgba(248,81,73,.07); border: 1px solid rgba(248,81,73,.3); }
.rr-return-title { font-size: 12px; letter-spacing: .06em; font-weight: 700; color: #c8cdd6; margin-bottom: 6px; }
.rr-flagtag { color: #f85149; } .rr-cleartag { color: #3fb950; }
.rr-return-line { font-size: 14px; margin-bottom: 8px; }
.rr-result { text-align: center; padding: 20px; border-radius: 8px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; }
.rr-result.good { border-color: rgba(63,185,80,.4); } .rr-result.bad { border-color: rgba(248,81,73,.4); }
.rr-result-num { font-size: 40px; font-weight: 800; }
.rr-result-sub { color: #9aa0aa; font-size: 13px; margin-top: 4px; }
.rr-result-note { margin-top: 12px; font-size: 13px; color: #c8cdd6; }

/* ---- capture fields (2026-07-02 dispatcher-side rework) ---- */
.rr-capture { margin: 4px 0 14px; text-align: left; }
.rr-cap-label {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: #9aa0aa; margin: 10px 0 4px;
}
.rr-cap-input {
  text-align: left; max-width: 100%; font-size: 17px; letter-spacing: .02em;
  padding: 10px 12px; margin-bottom: 4px;
}
.rr-req-toggle { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.rr-req-btn {
  background: var(--ink-2, #14181f); border: 1px solid rgba(255,255,255,.15); color: #c8cdd6;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; padding: 9px 12px;
  cursor: pointer; transition: border-color 140ms, background 140ms, color 140ms;
}
.rr-req-btn:hover { border-color: #6fb1ff; }
.rr-req-btn.active { border-color: #6fb1ff; background: rgba(111,177,255,.12); color: #eaf2ff; }

/* per-character breakdown for the plate / last-name capture — same visual
   pattern as the phonetic drill's .ph-cell / plate drill's .pl-cell. */
.rr-cells { display: flex; gap: 6px; justify-content: flex-start; flex-wrap: wrap; margin: 6px 0 10px; }
.rr-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 5px; padding: 6px 8px; min-width: 30px;
}
.rr-cell.ok { border-color: #3fb950; }
.rr-cell.bad { border-color: #f85149; }
.rr-cc { font-size: 16px; font-weight: 700; color: #eaf2ff; font-family: var(--mono); }
.rr-cw { font-size: 10px; color: #9aa0aa; }

.ref-sub { margin-top: 8px; color: #8a909a; font-size: 12px; opacity: .85; }