/* Oral Rehearsal candidate environment.
   Layout follows public ABR remote-oral candidate/examiner guides.
   Not ABR software. Do not use ABR marks. */

:root {
    --bg: #12151a;
    --bg-2: #1c2128;
    --bg-3: #252b33;
    --line: #3d4450;
    --text: #e8eaed;
    --muted: #9aa0a6;
    --gold: #c9a227;
    --gold-dim: #8a7018;
    --ok: #3d9a6a;
    --bad: #c44c4c;
    --warn: #c9a227;
    --accent: #3d7ea6;
    --tool: #2a3038;
    --tool-on: #3d7ea6;
    --waiting: #000;
    /* The room used to declare Segoe UI here and never load a webfont. Inter now comes
       from css/tokens.css, which every page loads first. */
    --font: var(--font-sans);
}

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

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
}

a { color: #8cb4d4; }
button, input, select, textarea { font-family: inherit; }

.or-banner {
    background: #0b0d10;
    color: var(--muted);
    font-size: 12px;
    padding: 6px 14px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}
.or-banner a { color: #c5d4e0; }

.exam-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 12px;
    background: #0e1116;
    border-bottom: 1px solid var(--line);
    gap: 12px;
}
.exam-header .brand {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}
.exam-header .meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
/* Left group of the room header: wordmark plus the way out. Only exam.html has these;
   every other page that uses .exam-header keeps a bare .brand and is untouched. */
.exam-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 0;
}
.leave-btn {
    border: 0;
    background: none;
    padding: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
}
.leave-btn:hover { color: var(--text); }
.leave-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chip {
    background: var(--bg-3);
    border: 1px solid var(--line);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
}
.chip.gold { border-color: var(--gold-dim); color: var(--gold); }
.chip.clock { font-variant-numeric: tabular-nums; min-width: 62px; text-align: center; letter-spacing: 0.02em; color: var(--text, #e8e8e8); }
.chip.clock.wrap { border-color: var(--gold-dim); color: var(--gold); }
.chip.clock.last { border-color: #b23b3b; color: #ff7a7a; }
.chip.clock.muted-clock { color: var(--muted); }

.btn {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    background: var(--bg-3);
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}
.btn:hover { background: #313844; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: #2b5c7a; border-color: #3d7ea6; }
.btn-primary:hover { background: #356d90; }
.btn-gold { background: #5c4a12; border-color: var(--gold); color: #f3e6b8; }
.btn-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
}
.btn-row .btn { height: 36px; }

.wizard {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 90px);
}
.wizard-nav {
    background: var(--bg-2);
    border-right: 1px solid var(--line);
    padding: 16px 0;
}
.wizard-nav h2 {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 16px 12px;
}
.wizard-nav button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--muted);
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    border-left: 3px solid transparent;
}
.wizard-nav button.on {
    color: var(--text);
    background: #252b33;
    border-left-color: var(--gold);
}
.wizard-nav button.done { color: #8fbfa3; }
.wizard-main {
    padding: 28px 36px 80px;
    max-width: 920px;
}
.wizard-main h1 { font-size: 22px; margin-bottom: 8px; }
.lede { color: var(--muted); margin-bottom: 20px; line-height: 1.5; }
.panel {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 16px 18px;
    margin: 12px 0;
}
.panel h3 { font-size: 14px; margin-bottom: 8px; }
.list { margin: 8px 0 0 18px; line-height: 1.55; color: var(--text); }
.list li { margin: 4px 0; }
.check-list label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0;
    line-height: 1.4;
}
.check-list input { margin-top: 3px; }
.note {
    font-size: 12px;
    color: var(--muted);
    margin-top: 10px;
}
.warn-box {
    border: 1px solid var(--gold-dim);
    background: #2a230d;
    color: #e6d9a8;
    padding: 12px 14px;
    border-radius: 6px;
    margin: 12px 0;
}
.fail-box {
    border: 1px solid #7a2e2e;
    background: #2a1414;
    color: #e8b4b4;
    padding: 12px 14px;
    border-radius: 6px;
    margin: 12px 0;
}
.ok-box {
    border: 1px solid #2e5c45;
    background: #142a1e;
    color: #b6e0c8;
    padding: 12px 14px;
    border-radius: 6px;
    margin: 12px 0;
}
/* Technical check on a phone: the step list sits above the step as a wrapping row of
   pills, and the step takes the full width (the two columns made the page 630px wide). */
@media (max-width: 720px) {
    .wizard { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .wizard-nav { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
    .wizard-nav h2 { padding: 0 0 8px; }
    #wizard-nav-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .wizard-nav button { display: inline-flex; align-items: center; width: auto; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-left-width: 1px; border-radius: 999px; }
    .wizard-nav button.on { border-color: var(--gold); border-left-color: var(--gold); }
    .wizard-main { padding: 24px 16px 80px; min-width: 0; }
    .wizard > div { min-width: 0; }
    .wizard-foot { padding: 8px 16px; }
}
.wizard-foot {
    position: sticky;
    bottom: 0;
    background: #0e1116;
    border-top: 1px solid var(--line);
    padding: 10px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
}

/* Media previews */
.media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
video.preview, canvas.preview {
    width: 100%;
    max-width: 420px;
    background: #000;
    border: 1px solid var(--line);
    border-radius: 4px;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.meter {
    height: 10px;
    background: #111;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}
.meter > span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--ok);
}

/* Monitor check / image stage */
.stage-wrap {
    position: relative;
    background: #000;
    min-height: calc(100vh - 44px);
    display: flex;
}
.tool-rail {
    width: 48px;
    background: #161a20;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 4px;
    z-index: 3;
}
.tool-btn {
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    background: var(--tool);
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tool-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.tool-btn.on { background: var(--tool-on); border-color: #6aa8cc; }
.tool-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tool-btn[title] { position: relative; }

.image-box {
    flex: 1;
    position: relative;
    background: #000;
    overflow: hidden;
}
.image-box.presented {
    box-shadow: inset 0 0 0 3px var(--gold);
}
.image-box canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}
.waiting {
    position: absolute;
    inset: 0;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    letter-spacing: 0.02em;
    z-index: 4;
}
.waiting.hidden { display: none; }

.control-box {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    display: flex;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: #1c2128cc;
}
.control-box button {
    height: 28px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}
.control-box button.on {
    background: #2e6b48;
    color: #fff;
}

.slice-hud {
    position: absolute;
    top: 78px;
    right: 12px;
    z-index: 6;
    padding: 4px 10px;
    border-radius: 4px;
    background: #0b0d10cc;
    border: 1px solid var(--line);
    color: #d7dbe0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.series-hud {
    /* Top right, under the slice counter. It used to sit bottom left at 32px, directly in the
       path of the transcript strip, which is anchored to the same corner and grows upward as
       lines arrive, so the label was covered as soon as anyone spoke. */
    position: absolute;
    right: 16px;
    top: 112px;
    z-index: 5;
    color: #c9a227;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #0008;
    padding: 2px 8px;
    border-radius: 3px;
    pointer-events: none;
}
.series-hud.hidden { display: none; }

.cursor-label {
    position: absolute;
    pointer-events: none;
    z-index: 6;
    font-size: 11px;
    background: #000c;
    color: #fff;
    padding: 1px 5px;
    border-radius: 2px;
    transform: translate(10px, 10px);
    white-space: nowrap;
}

/* Video tiles */
.tiles {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 7;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}
.tile {
    width: 240px;
    background: #0b0d10;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 24px #0008;
}
.tile.hidden { display: none; }
.tile.mini { width: 160px; }
.tile.large { width: 360px; }
.tile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    padding: 0 8px;
    background: #1c2128;
    font-size: 11px;
    color: var(--muted);
}
.tile-bar .btns { display: flex; gap: 4px; }
.tile-bar button {
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
    font-size: 10px;
    border: 1px solid var(--line);
    background: var(--bg-3);
    color: var(--text);
    cursor: pointer;
    border-radius: 2px;
}
.tile video, .tile .avatar {
    width: 100%;
    aspect-ratio: 16/10;
    background: #111;
    object-fit: cover;
    display: block;
}
.tile .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
}
.tile.speaking { border-color: var(--ok); }
.tile .avatar .av { position: relative; width: 100%; height: 100%; display: block; overflow: hidden; --av-top: #2f3a4a; }
.tile .avatar .av-room { position: absolute; inset: 0; background: linear-gradient(180deg, #2a3038 0%, #171b20 100%); }
.tile .avatar .av-room::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, transparent, var(--av-top)); opacity: 0.55; }
.tile .avatar .av-halo { position: absolute; inset: 0; background: radial-gradient(circle at 50% 58%, rgba(143, 183, 217, 0.38), rgba(143, 183, 217, 0) 62%); opacity: 0; transition: opacity 0.25s; }
.tile .avatar .av-face { position: absolute; inset: 0 0 20px 0; display: flex; align-items: center; justify-content: center; font-size: 88px; line-height: 1; transition: transform 0.08s; text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.tile .avatar .av-plate { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: rgba(11, 13, 16, 0.85); display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 10px; font-size: 11px; color: #c9ced6; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.tile .avatar .av-dot { width: 7px; height: 7px; border-radius: 50%; background: #4a5560; }
.tile .avatar[data-state="speaking"] .av-halo { opacity: 1; }
.tile .avatar[data-state="speaking"] .av-dot { background: #4fbf7a; }
.tile .avatar[data-state="thinking"] .av-dot { background: #c9a24a; }
.tile.mini .avatar .av-face { font-size: 44px; }
/* position:static is load-bearing. .image-box canvas (position:absolute; inset:0) also
   matches this canvas, because the tiles live inside the image box, and it was pinning
   the waveform to the top-left corner of .tiles instead of leaving it in the You tile
   under the video. The rule below only ever set width, height and colour, so the
   absolute positioning came through and put the strip outside its own tile. */
.tile canvas.wave { position: static; width: 100%; height: 28px; display: block; background: #0b0d10; border-top: 1px solid var(--line); }

/* Radiopaedia credit, always on the image */
.credit {
    position: absolute;
    top: 0;
    left: 56px;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.3;
    background: #0b0d10ee;
    border-bottom: 1px solid var(--gold-dim);
    color: #e8ecf0;
    text-decoration: none;
}
.credit:hover { color: #fff; background: #12161b; }
.credit strong { color: #fff; font-weight: 700; }
.credit-site { color: var(--gold); font-weight: 700; letter-spacing: 0.01em; }
.credit-rid, .credit-lic { color: var(--muted); }
.credit-lead { color: #c9cfd6; }
.credit[hidden] { display: none; }
.credit-chip { text-decoration: none; color: var(--gold); border-color: var(--gold-dim); }
.credit-chip:hover { color: #fff; }
.interlude-credit { color: #c9cfd6; font-size: 14px; max-width: 70%; text-align: center; }
.interlude-credit strong { color: #fff; }
.interlude-credit .credit-site { color: var(--gold); font-weight: 700; }
.image-box > .rehearsal { top: 40px; }

/* Live transcript strip (rehearsal aid, toggled from the header) */
.chip-btn { cursor: pointer; font: inherit; }
.transcript-bar { padding-right: 56px; }
.tr-hide { position: absolute; top: 6px; right: 8px; height: 20px; padding: 0 8px; font-size: 11px; border: 1px solid var(--line); background: var(--bg-3); color: var(--muted); border-radius: 3px; cursor: pointer; }
.tr-hide:hover { color: var(--text); }
.transcript-bar {
    position: absolute;
    left: 56px;
    right: 270px;
    bottom: 12px;
    z-index: 6;
    background: #0b0d10e6;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
    max-height: 30%;
    overflow: auto;
}
.transcript-bar.hidden { display: none; }
.transcript-bar .line { display: flex; gap: 8px; }
.transcript-bar .line + .line { margin-top: 4px; }
.transcript-bar .who { flex: 0 0 76px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.transcript-bar .you span:last-child { color: #9fe0b8; }
.transcript-bar .interim { color: var(--muted); }

/* One click before the period starts: Chrome needs a gesture before audio in or out. */
/* The first thing anyone sees on the free case, so it is a composed card rather than a button
   on black: on the 8px grid, 24px inset, 24px radius, three sizes and three weights. */
.begin-gate {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space, 24px);
    background: radial-gradient(120% 100% at 50% 0%, #14181e 0%, #05070a 62%);
}
.begin-gate .gate-card {
    box-sizing: border-box;
    width: min(560px, 100%);
    padding: 48px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(18, 21, 26, 0.82);
    text-align: center;
}
.begin-gate .gate-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 24px;
}
.begin-gate .gate-title {
    margin: 0 0 16px;
    font-family: var(--font-serif), Georgia, serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.15;
    color: var(--text);
}
.begin-gate .gate-title em { font-style: normal; color: var(--gold); }
.begin-gate .gate-lede {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.6;
    color: #c2c8d0;
}
.begin-gate .gate-note {
    margin: 24px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}
.begin-gate.hidden { display: none; }
.interlude {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #000;
}
.interlude.hidden { display: none; }
.interlude-title { font-size: 15px; color: var(--muted); letter-spacing: 0.04em; }
.interlude-clock { font-size: 44px; font-variant-numeric: tabular-nums; color: var(--gold); line-height: 1; }
/* Gold, matching the primary action on the public page, so the one button that starts a
   case looks the same wherever it is pressed. */
.begin-gate .btn-primary,
.mic-check .btn-primary { background: var(--gold); border-color: var(--gold); color: #1a1500; }
.begin-gate .btn-primary:hover,
.mic-check .btn-primary:hover { background: #d9b437; }
.begin-gate .btn { height: 48px; padding: 0 32px; font-size: 16px; font-weight: 500; border-radius: 24px; }

.tile .avatar[data-state="thinking"] .av { filter: brightness(0.92); }
.tile .avatar[data-state="speaking"] .av { filter: brightness(1.05); }
.tile .note {
    padding: 4px 8px;
    min-height: 18px;
    max-height: 72px;
    overflow: auto;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.35;
    background: #0b0d10;
}
.tile.mini .note { max-height: 56px; }
#examiner-caption:empty { display: none; }

/* Rehearsal strip (not on ABR exam) */
.rehearsal {
    position: absolute;
    left: 56px;
    top: 8px;
    z-index: 8;
    background: #2a230d;
    border: 1px solid var(--gold-dim);
    border-radius: 4px;
    padding: 6px 8px;
    max-width: calc(100% - 320px);
}
.rehearsal summary {
    cursor: pointer;
    font-size: 11px;
    color: #e6d9a8;
    font-weight: 700;
    list-style: none;
}
.rehearsal summary::-webkit-details-marker { display: none; }
.rehearsal .rehearsal-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
}
.rehearsal .rehearsal-body .btn { height: 28px; font-size: 12px; padding: 0 10px; }
.scorer-line {
    font-size: 12px;
    color: #e6d9a8;
    min-height: 28px;
    display: flex;
    align-items: center;
}
.scorer-key-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    font-size: 12px;
    color: #e6d9a8;
}
.scorer-key-wrap.hidden { display: none; }
.scorer-key-wrap input {
    height: 28px;
    width: 160px;
    border: 1px solid var(--line);
    background: #1c2128;
    color: var(--text);
    padding: 0 8px;
    border-radius: 4px;
}

.break-screen {
    position: absolute;
    inset: 0;
    background: #0b0d10;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.break-screen.hidden { display: none; }
.break-screen h1 { font-size: 28px; }
.break-clock { font-size: 48px; font-variant-numeric: tabular-nums; }

/* Leave-exam sheet. A reload or a closed tab used to lose the period with no warning;
   this is the deliberate way out, and beforeunload guards the accidental one. */
.leave-sheet {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space);
    background: #05070ac7;
}
.leave-sheet.hidden { display: none; }
.leave-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    padding: var(--space);
    gap: var(--s-1);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 24px 48px #0009;
}
.leave-title {
    font-size: var(--t-lg);
    font-weight: var(--w-bold);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.leave-note {
    font-size: var(--t-sm);
    font-weight: var(--w-regular);
    line-height: 1.5;
    color: var(--muted);
}
/* Standing rule: the action block is pushed to the bottom of the card so the buttons
   line up whatever the copy above them wraps to. Primary action last. */
.leave-actions {
    margin-top: auto;
    padding-top: var(--s-2);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
/* Taller than the room's 36px .btn: these three are decisions taken with a thumb, and
   48px keeps them on the 8px scale as well as above the touch-target floor. */
.leave-actions .btn { width: 100%; height: var(--s-6); }

.lobby {
    max-width: 760px;
    margin: 40px auto;
    padding: 0 16px 80px;
}
.lobby h1 { font-size: 24px; margin-bottom: 8px; }
.ident {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0;
}
.ident .field {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px;
}
.ident label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 6px; }
.ident input {
    width: 100%;
    height: 36px;
    background: #0e1116;
    border: 1px solid var(--line);
    color: var(--text);
    padding: 0 10px;
    border-radius: 4px;
}
.schedule {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 20px;
    font-size: 13px;
}
.schedule th, .schedule td {
    border: 1px solid var(--line);
    padding: 8px 10px;
    text-align: left;
}
.schedule th { background: var(--bg-3); font-weight: 700; }
.ready-box {
    border: 1px solid var(--gold);
    background: #2a230d;
    padding: 14px 16px;
    border-radius: 6px;
    margin: 18px 0;
}
.ready-box label { display: flex; align-items: center; gap: 10px; font-weight: 700; }

.debrief { max-width: 800px; margin: 32px auto; padding: 0 16px 80px; }
.score-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
/* Debrief */
.debrief h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -0.01em; }
.debrief .lede { margin: 0 0 22px; color: var(--muted); }
.debrief a.btn, .debrief .btn-row a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.debrief .panel { margin: 14px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.debrief .panel.hidden { display: none; }
.debrief .panel h3 { margin: 0; font-size: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-head .muted { color: var(--muted); font-size: 13px; }
.pill { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); }
.pill.pass { color: #b6e0c8; border-color: #2e5c45; background: #142a1e; }
.pill.fail { color: #e8b4b4; border-color: #7a2e2e; background: #2a1414; }
.stats { display: flex; gap: 22px; margin-top: 12px; }
.stat-v { font-size: 26px; font-weight: 700; line-height: 1.1; }
.stat-l { font-size: 12px; color: var(--muted); }
.section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.section-cell { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.section-cell.pass { border-color: #2e5c45; }
.section-cell.fail { border-color: #7a2e2e; }
.section-name { font-size: 12px; color: var(--muted); }
.section-mean { font-size: 18px; font-weight: 700; margin-top: 2px; }
.section-cell.pass .section-mean { color: #b6e0c8; }
.section-cell.fail .section-mean { color: #e8b4b4; }
.exam-verdict { margin: 12px 0 0; }
.scoring-status { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--muted); }
.spinner { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: or-spin 0.9s linear infinite; flex: 0 0 auto; }
@keyframes or-spin { to { transform: rotate(360deg); } }
.empty { padding: 18px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; }
.case-card { margin: 14px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.case-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.case-kicker { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.case-title { font-size: 18px; font-weight: 700; margin-top: 2px; }
.case-dx { font-size: 13px; color: var(--muted); margin-top: 2px; }
.score-badge { flex: 0 0 auto; min-width: 84px; text-align: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.score-num { font-size: 28px; font-weight: 700; line-height: 1; }
.score-word { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.score-badge.b72, .score-badge.b71 { border-color: #2e5c45; }
.score-badge.b72 .score-num, .score-badge.b71 .score-num { color: #b6e0c8; }
.score-badge.b70 { border-color: #3d7ea6; }
.score-badge.b70 .score-num { color: #a9d0ea; }
.score-badge.b69 { border-color: var(--gold-dim); }
.score-badge.b69 .score-num { color: #e6d9a8; }
.score-badge.b68 { border-color: #7a2e2e; }
.score-badge.b68 .score-num { color: #e8b4b4; }
.dim-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 18px; margin-top: 14px; }
.dim-meter { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.dim-label { flex: 0 0 82px; color: var(--muted); }
.dim-bar { display: flex; gap: 3px; }
.dim-bar .seg { width: 22px; height: 6px; border-radius: 3px; background: var(--bg-3); display: block; }
.dim-bar .seg.on { background: #4fbf7a; }
.dim-value { color: var(--text); text-transform: capitalize; }
.case-said { margin-top: 12px; font-size: 14px; }
.said-text { font-style: normal; }
.said-text.good { color: #b6e0c8; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.chips-label { color: var(--muted); }
.tag { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: 12px; }
.tag.miss { border-color: #7a2e2e; color: #e8b4b4; }
.tag.good { border-color: #2e5c45; color: #b6e0c8; }
.unsafe { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: #2a1414; border: 1px solid #7a2e2e; color: #e8b4b4; font-size: 13px; }
.case-notes { margin: 6px 0 0; color: var(--text); font-size: 14px; line-height: 1.5; }
.case-abr { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; }
.case-abr a { color: #8cb4d4; text-decoration: none; }
.case-abr a:hover { text-decoration: underline; }
.abr-line { line-height: 1.6; }
.abr-learn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.tag.learn { border-color: #35516a; color: #a9d0ea; }
.sources { margin-top: 20px; }
.source-list { margin: 10px 0 0 18px; padding: 0; font-size: 13px; line-height: 1.5; }
.source-list li { margin: 4px 0; }
.source-list a { color: #8cb4d4; }
.source-list .note { display: inline; margin: 0; }
.debrief .lede a { color: #8cb4d4; }
.case-why, .case-remember { margin-top: 12px; }
.case-remember ul { margin: 6px 0 0 18px; padding: 0; font-size: 14px; line-height: 1.5; }
.case-remember li { margin: 2px 0; }
.case-provisional { margin-top: 10px; font-size: 12px; color: #e6d9a8; }
.textbook { margin: 14px 0 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.textbook summary { cursor: pointer; color: var(--gold); font-size: 13px; }
.textbook-body { padding: 8px 2px 2px; font-size: 14px; line-height: 1.5; }
.textbook-body .spoken { margin: 0 0 10px; }
.textbook-body .tb-label { margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.textbook-body ul { margin: 2px 0 0 18px; padding: 0; }
.textbook-body .note { margin-top: 8px; font-size: 11px; color: var(--muted); }

.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.dimmed { opacity: 0.45; pointer-events: none; }

/* Radiopaedia credit on debrief cards and the contributors block */
.case-credit { display: block; margin: 8px 0 10px; padding: 8px 12px; border: 1px solid var(--gold-dim); border-radius: 4px; background: #0e1116; color: #e8ecf0; font-size: 13px; text-decoration: none; }
.case-credit:hover { background: #151a21; color: #fff; }
.case-credit strong { color: #fff; }
.credits-panel h3 { margin-top: 0; }
.credit-names { font-size: 14px; color: #e8ecf0; line-height: 1.6; }
.image-box > .control-box { top: 40px; }

/* Exam-day schedule panel */
.sched { max-width: 900px; }
.sched .kicker { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.sched h1 { margin: 0 0 8px; font-size: 30px; letter-spacing: -0.01em; }
.sched .lede { max-width: 660px; }
.sched-card { padding: 20px 22px 18px; margin-bottom: 14px; }
.sched-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sched-card-head h3 { margin: 0; font-size: 15px; }
.sched-card-head .muted { color: var(--muted); font-size: 12.5px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.seg-opt { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px 40px; border: 1px solid var(--line); border-radius: 8px; background: #1b2026; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.seg-opt:hover { border-color: #5a6270; }
.seg-opt input { position: absolute; left: 14px; top: 15px; margin: 0; accent-color: var(--gold); }
.seg-opt:has(input:checked) { border-color: var(--gold); background: #2a2614; box-shadow: inset 0 0 0 1px var(--gold-dim); }
.seg-title { font-weight: 700; color: var(--text); font-size: 14.5px; }
.seg-sub { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.sec-grid-head { display: flex; justify-content: space-between; align-items: center; min-height: 28px; margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.sec-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 11px 12px 11px 36px; border: 1px solid var(--line); border-radius: 8px; background: #1b2026; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.sec-tile:hover { border-color: #5a6270; }
.sec-tile input { position: absolute; left: 12px; top: 14px; margin: 0; accent-color: var(--gold); }
.sec-tile:has(input:checked) { border-color: var(--gold); background: #2a2614; }
.sec-name { font-weight: 700; font-size: 14px; color: var(--text); }
.sec-sub { font-size: 12px; color: var(--muted); }
.sec-grid.dimmed { opacity: 0.4; pointer-events: none; }
.sched-note { margin: 14px 0 0; }
.btn-ghost { height: 28px; padding: 0 10px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.timeline { font-size: 14px; }
.timeline th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); background: transparent; border-bottom: 1px solid var(--line); font-weight: 500; }
.timeline td { border-bottom: 1px solid #262c34; padding: 10px 12px; }
.timeline tr:last-child td { border-bottom: 0; }
.timeline tr.period td:first-child { color: var(--gold); font-weight: 700; white-space: nowrap; }
.timeline tr.period td:last-child { font-weight: 700; color: var(--text); }
.timeline tr.break td, .timeline tr.check td { color: var(--muted); }
.timeline td.len { font-variant-numeric: tabular-nums; white-space: nowrap; }
.credit-note { margin: 12px 0 0; }
.ready-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--gold-dim); border-radius: 8px; background: #1f1b0f; margin-top: 4px; }
.ready-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.ready-check input { margin: 3px 0 0; accent-color: var(--gold); width: 16px; height: 16px; flex: 0 0 auto; }
.ready-check strong { display: block; font-size: 15px; }
.ready-check small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; max-width: 560px; line-height: 1.4; }
.btn-enter { height: 40px; padding: 0 22px; font-size: 15px; white-space: nowrap; }
.btn-enter:disabled { opacity: 0.45; cursor: not-allowed; }
.timeline tr.checkin td { color: var(--muted); }
/* The status chip sat flush against the panel's gold kicker. */
.lobby-chips { margin: 0 0 16px; }
@media (max-width: 640px) {
    .seg { grid-template-columns: 1fr; } .ready-row { flex-direction: column; align-items: stretch; } .sched-card-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    /* Timeline as cards on a phone: block and length on one line, detail under them. The
       three-column table was 595px wide at 390. */
    .timeline, .timeline tbody { display: block; width: 100%; }
    .timeline thead { display: none; }
    .timeline tr { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; padding: 12px 0; border-bottom: 1px solid #262c34; }
    .timeline tr:last-child { border-bottom: 0; }
    .timeline td, .timeline th { border: 0; padding: 0; }
    .timeline td:last-child { grid-column: 1 / -1; margin-top: 4px; font-size: 13px; }
    .timeline tr.period td:last-child { font-weight: 500; }
}

/* Microphone check before the examiner speaks */
/* The microphone check reads as the second card in the same sequence as the begin gate:
   same ground, same width, same 24px radius, same 48px inset. Everything on it is centred on
   one vertical axis, so the composition stays symmetric as lines appear and disappear. */
.mic-check {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space, 24px);
    background: radial-gradient(120% 100% at 50% 0%, #14181e 0%, #05070a 62%);
}
.mic-check.hidden { display: none; }
.mic-card {
    box-sizing: border-box;
    width: min(560px, 100%);
    padding: 48px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(18, 21, 26, 0.82);
    text-align: center;
}
.mic-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 24px;
}
.mic-title {
    margin: 0 0 32px;
    font-family: var(--font-serif), Georgia, serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.15;
    color: var(--text);
}

/* Concentric level meter. Every element is a circle on the same centre, so the whole thing is
   symmetric by construction: --lvl (0..1) grows the disc, --thr puts a faint ring at the level
   the examiner treats as speech, and the disc crossing that ring is the thing to look for. */
.mic-ring {
    position: relative;
    width: 176px;
    height: 176px;
    margin: 0 auto 32px;
    --lvl: 0;
    --thr: 0.3;
}
.mic-ring > * {
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
}
.mic-ring-track { border: 1px solid var(--line); }
.mic-ring.armed .mic-ring-track { animation: mic-breathe 2.8s ease-in-out infinite; }
.mic-ring-mark {
    border: 1px dashed rgba(215, 222, 232, 0.45);
    transform: scale(calc(0.34 + var(--thr) * 0.66));
    transition: transform 240ms ease;
    z-index: 1;   /* the level disc is drawn under it: crossing this ring is the whole point */
}
.mic-ring-level {
    background: radial-gradient(circle closest-side, rgba(197, 160, 80, 0.42) 0%, rgba(197, 160, 80, 0.10) 68%, rgba(197, 160, 80, 0) 100%);
    transform: scale(calc(0.34 + var(--lvl) * 0.66));
    transition: transform 90ms linear;
}
.mic-ring.loud .mic-ring-level {
    background: radial-gradient(circle closest-side, rgba(197, 160, 80, 0.62) 0%, rgba(197, 160, 80, 0.18) 68%, rgba(197, 160, 80, 0) 100%);
}
.mic-ring-halo { border: 1px solid var(--gold); opacity: 0; }
.mic-ring.loud .mic-ring-halo { animation: mic-ripple 1.8s ease-out infinite; }
.mic-ring.loud .mic-ring-halo:nth-child(2) { animation-delay: 0.9s; }
.mic-ring-core {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: #12151a;
    color: var(--muted);
    transition: color 240ms ease, border-color 240ms ease;
}
.mic-ring.loud .mic-ring-core { color: var(--gold); border-color: rgba(197, 160, 80, 0.5); }
.mic-ring.pass .mic-ring-core { color: #8fd18f; border-color: rgba(143, 209, 143, 0.5); }
@keyframes mic-ripple {
    0%   { transform: scale(0.62); opacity: 0.45; }
    100% { transform: scale(1.14); opacity: 0; }
}
@keyframes mic-breathe {
    0%, 100% { opacity: 0.45; transform: scale(0.985); }
    50%      { opacity: 1;    transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .mic-ring.loud .mic-ring-halo,
    .mic-ring.armed .mic-ring-track { animation: none; }
    .mic-ring-level { transition: none; }
}

.mic-check-step { margin-bottom: 16px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
/* Each slot reserves the tallest copy it will ever hold: two lines for the sentence and what
   was heard, three for the longest verdict. The card is then the same height in every state,
   so the ring never moves and nothing under it jumps as the check advances. */
.mic-check-line { min-height: 3em; font-size: 20px; line-height: 1.5; color: var(--text); transition: color 240ms ease; }
.mic-check-line.dim { color: var(--muted); }
.mic-check-heard { min-height: 3em; margin-top: 16px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.mic-check-verdict { min-height: 4.8em; margin-top: 8px; font-size: 16px; line-height: 1.6; color: #c2c8d0; }
.mic-check-verdict.ok { color: #8fd18f; }
.mic-check-verdict.bad { color: #e0a55a; }
.mic-check-actions { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.mic-check .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mic-check-device { margin: 24px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }

/* Scoring screen after the last case */
.scoring-screen { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #000; }
.scoring-screen.hidden { display: none; }
.scoring-spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #2a2f36; border-top-color: var(--gold); animation: scoring-spin 0.9s linear infinite; }
@keyframes scoring-spin { to { transform: rotate(360deg); } }
.scoring-title { font-size: 22px; color: var(--text); letter-spacing: 0.01em; }
.scoring-note { max-width: 420px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* What counted: the rubric against the candidate's words */
.counted { margin-top: 14px; }
.counted .tb-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.counted .note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.counted-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.counted-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.counted-table td { vertical-align: top; padding: 7px 8px; border-bottom: 1px solid #262c34; line-height: 1.45; }
.counted-group td { padding: 10px 8px 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: none; }
.counted-item { width: 30%; color: var(--text); }
.counted-quote .q { color: var(--text); font-style: normal; }
.counted-quote .none { color: var(--muted); }
.counted-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.counted-status { width: 150px; white-space: nowrap; }
.counted-ok .counted-status { color: #b6e0c8; }
.counted-warn .counted-status { color: #e6d9a8; }
.counted-bad .counted-status { color: #e8b4b4; }
.counted-na .counted-status { color: var(--muted); }

/* How the score is decided */
.scoring { margin: 12px 0 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.scoring summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.scoring summary:hover { color: var(--text); }
.scoring-body { padding: 8px 2px 4px; font-size: 14px; line-height: 1.5; }
.scoring-body .tb-label { margin-top: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.scoring-body .note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.bands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.band { padding: 8px 6px; border: 1px solid var(--line); border-radius: 6px; text-align: center; background: var(--bg-3); }
.band-num { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--text); }
.band-word { font-size: 11px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.band.fail .band-num { color: #e8b4b4; }
.band.here { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.band.here .band-word { color: var(--gold); }
.table-wrap { overflow-x: auto; margin-top: 6px; }
.score-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 12.5px; }
.score-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.score-table td { vertical-align: top; padding: 8px; border-bottom: 1px solid var(--line); line-height: 1.4; }
.comp-name { color: var(--text); white-space: nowrap; }
.comp-asks { white-space: normal; max-width: 200px; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.comp-level { color: var(--text); white-space: nowrap; }
.comp-level.lv-strong { color: #b6e0c8; }
.comp-level.lv-partial { color: #e6d9a8; }
.comp-level.lv-missing { color: #e8b4b4; }
.comp-band { color: var(--muted); }
.rubric { margin-top: 6px; display: grid; gap: 10px; }
.rubric-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.rub-item { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; font-size: 13.5px; }
.rub-item .tag { flex: 0 0 auto; min-width: 74px; text-align: center; }
.tag.alt { border-color: #35516a; color: #a9d0ea; }
.tag.wait { border-color: #6a5c2e; color: #e6d9a8; }
@media (max-width: 640px) { .bands { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .band { padding: 6px 2px; } .band-num { font-size: 16px; } .band-word { display: none; } }

/* What the examiner heard, editable, with rescoring */
.heard { margin: 12px 0 4px; border: 1px solid var(--line); border-radius: 6px; background: #12161b; }
.heard summary { cursor: pointer; padding: 10px 12px; color: var(--muted); font-size: 13px; }
.heard summary:hover { color: var(--text); }
.heard-text { display: block; width: calc(100% - 24px); margin: 0 12px 10px; padding: 10px; background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; }
.heard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0 12px 12px; }
.heard-actions .btn { height: 34px; }

/* Case intake (internal) */
.intake { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; padding: 16px; max-width: 1400px; margin: 0 auto; }
.intake-side .panel { position: sticky; top: 12px; }
.intake-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.intake .panel h3 { font-size: 15px; margin-bottom: 10px; }
.intake .sub-h { margin-top: 18px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 14px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.field.wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea, .series-row input, .series-row select, .thumb-meta input {
    height: 36px; padding: 0 10px; background: #0e1116; color: var(--text); border: 1px solid #3d4450; border-radius: 4px; font: inherit; font-size: 14px; }
.field textarea { height: auto; padding: 8px 10px; line-height: 1.45; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .series-row input:focus { outline: none; border-color: var(--gold); }
.field input.flash, .field textarea.flash, .field select.flash { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-dim); }
.field input[type=file] { padding: 6px 10px; height: auto; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); margin: 8px 0; }
.check.wide { grid-column: 1 / -1; }
.status-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.status-chip.st-checked { border-color: #2e5c45; color: #b6e0c8; }
.status-chip.st-accepted { border-color: var(--gold-dim); color: var(--gold); }
.sub-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-height: 60vh; overflow: auto; }
.sub-row { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); cursor: pointer; font: inherit; }
.sub-row:hover { border-color: #5a6270; }
.sub-row.current { border-color: var(--gold); }
.sub-title { font-size: 13.5px; }
.sub-meta { font-size: 11.5px; color: var(--muted); }
.series-row { display: grid; grid-template-columns: 24px 130px 1fr 1fr 130px auto; gap: 8px; align-items: center; margin: 6px 0; }
.series-n { color: var(--muted); font-size: 12px; text-align: center; }
.btn.small { height: 30px; padding: 0 10px; font-size: 12px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.thumb { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.thumb img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #000; border-radius: 4px; }
.thumb-n { position: absolute; top: 12px; left: 12px; z-index: 1; min-width: 22px; text-align: center; padding: 2px 6px; border-radius: 999px; background: var(--gold); color: #1a1508; font-size: 12px; font-weight: 700; }
.thumb-meta { display: flex; flex-direction: column; gap: 4px; }
.thumb-meta input { height: 30px; font-size: 12.5px; }
.thumb-cap { font-size: 11.5px; color: var(--muted); }
.issues { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.issues-head { font-size: 14px; padding: 8px 10px; border-radius: 6px; }
.issues-head.ok { background: #14261c; color: #b6e0c8; border: 1px solid #2e5c45; }
.issues-head.bad { background: #2a1414; color: #e8b4b4; border: 1px solid #7a2e2e; }
.issue { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.issue-field { flex: 0 0 auto; min-width: 120px; text-align: left; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.issue.error .issue-field { border-color: #7a2e2e; color: #e8b4b4; }
.issue.warning .issue-field { border-color: #6a5c2e; color: #e6d9a8; }
.review { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font-size: 14px; line-height: 1.5; }
.review p { margin: 4px 0 0; }
.suggest { margin-top: 8px; }
.suggest-field { font-size: 12px; color: var(--muted); }
.suggest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13.5px; }
.progress { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.prog { display: flex; gap: 10px; }
.prog-step { flex: 0 0 110px; color: var(--muted); }
.prog.ok .prog-step { color: #b6e0c8; }
.prog.bad .prog-step { color: #e8b4b4; }
.after { margin-top: 12px; }
.after a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.after .tb-label { margin-top: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.intake-page .hidden { display: none !important; }
@media (max-width: 900px) { .intake { grid-template-columns: 1fr; } .intake-side .panel { position: static; } .series-row { grid-template-columns: 24px 1fr 1fr; } .series-row input, .series-row select { grid-column: span 1; } }

/* ---------------------------------------------------------------------------
   The exam room on a phone (under 720px).

   Every other media query in this file serves a different page, and .exam-header,
   .chip and .tile are shared with index, lobby, portal, history, credits, setup,
   debrief and practice-picker. So every rule below is scoped to .exam-room, the
   class only <body> in exam.html carries, and no other page can be reached by it.

   The room stacks: a header whose chips scroll sideways, the image at full width,
   then the tool rail as a horizontal strip below it. The rail is in the flow, so
   it never covers the image. The two video tiles shrink and sit side by side in
   the bottom band with the transcript strip above them.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
    /* Header: one row, 44px, chips scrolling sideways rather than wrapping. */
    .exam-room .exam-header {
        gap: 10px;
        padding: 0 8px;
    }
    .exam-room .exam-header .brand {
        font-size: 11px;
        letter-spacing: 0.06em;
    }
    .exam-room .exam-header-left { gap: 8px; }
    .exam-room .exam-header .meta {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
    }
    .exam-room .exam-header .meta::-webkit-scrollbar { width: 0; height: 0; }
    .exam-room .exam-header .meta > * { flex: 0 0 auto; white-space: nowrap; }

    /* Stage: image first at full width, tool rail a strip under it. */
    .exam-room .stage-wrap { flex-direction: column; }
    .exam-room .image-box {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }
    /* The rail sits under the image so the tools are within reach of a thumb and the
       Radiopaedia credit stays directly below the header. */
    .exam-room .tool-rail {
        order: 2;
        flex: 0 0 auto;
        width: 100%;
        height: 52px;
        flex-direction: row;
        justify-content: flex-start;
        border-right: 0;
        border-top: 1px solid var(--line);
        padding: 0 8px;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .exam-room .tool-rail::-webkit-scrollbar { width: 0; height: 0; }
    .exam-room .tool-btn { flex: 0 0 auto; }

    /* Overlays inside the image box no longer have to clear a 48px left rail. The credit
       keeps the top of the box to itself and everything else starts below it: it is the
       Radiopaedia attribution and nothing may sit on top of it. */
    .exam-room .credit { left: 0; font-size: 12px; padding: 6px 8px; }
    .exam-room .image-box > .rehearsal {
        left: 8px;
        right: 8px;
        top: 56px;
        max-width: none;
    }
    .exam-room .slice-hud { top: 92px; right: 8px; }
    .exam-room .series-hud { left: 8px; top: 92px; bottom: auto; }

    /* Bottom band: transcript above, the two tiles side by side below it. */
    .exam-room .transcript-bar {
        left: 8px;
        right: 8px;
        bottom: 168px;
        max-height: 26%;
        font-size: 12px;
        padding-right: 52px;
    }
    .exam-room .transcript-bar .who { flex: 0 0 58px; }
    .exam-room .tiles {
        left: 8px;
        right: 8px;
        bottom: 8px;
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
    }
    /* The desktop tiles are fixed widths (240 / 160 mini / 360 large). On a phone the
       pair shares the row instead, so a resize from the tile bar cannot push one of
       them off the screen. */
    .exam-room .tiles .tile,
    .exam-room .tiles .tile.mini,
    .exam-room .tiles .tile.large {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }
    .exam-room .tiles .tile video,
    .exam-room .tiles .tile .avatar {
        aspect-ratio: auto;
        height: 62px;
    }
    /* The examiner face is drawn at 88px and only the mini tile shrank it; in a 62px-tall
       phone tile that cropped the head. Both tiles take the small face here. */
    .exam-room .tiles .tile .avatar .av-face { font-size: 34px; }
    .exam-room .tiles .tile canvas.wave { height: 18px; }
    .exam-room .tiles .tile .note,
    .exam-room .tiles .tile.mini .note {
        max-height: 30px;
        font-size: 11px;
        line-height: 1.3;
    }

    /* Full-screen panels: the copy needs the 24px inset at this width. */
    .exam-room .waiting { font-size: 20px; padding: 0 var(--space); text-align: center; }
    .exam-room .begin-gate,
    .exam-room .interlude,
    .exam-room .break-screen,
    .exam-room .mic-check,
    .exam-room .scoring-screen { padding: var(--space); }
    .exam-room .gate-card,
    .exam-room .mic-card { padding: var(--space); }
    .exam-room .gate-title,
    .exam-room .mic-title { font-size: 24px; }
    .exam-room .mic-ring { width: 132px; height: 132px; }
    .exam-room .mic-check-actions { flex-direction: column; }
    .exam-room .break-screen h1 { font-size: 24px; }
    .exam-room .break-clock { font-size: 40px; }

    /* Touch target: the way out is a borderless text button, so it can take the whole
       44px header row without looking like a box. The chips keep their own height. */
    .exam-room .leave-btn { min-height: 44px; display: inline-flex; align-items: center; }
    .exam-room .exam-header .chip-btn { padding: 7px 10px; }
}