/* Video oral-board PANEL — layout only. Reuses sim.css's :root vars, .hero,
   .solid-btn/.ghost-btn, the whole .ob-* record/timer/results/consent kit, and
   .ob-screen's backdrop + accent-blue theming. This file adds only the panel
   chrome: setup menu, the video stage, the examiner seats, the type-fallback. */

/* ---------- setup menu ---------- */
.panel-setup{max-width:760px;margin:0 auto;background:linear-gradient(160deg,color-mix(in srgb,var(--window) 26%,var(--panel)),var(--panel));
  border:1px solid var(--line);border-radius:16px;padding:26px 28px 30px}
.panel-how{margin:0 0 20px;padding-left:1.15em;display:grid;gap:10px;color:var(--ink);line-height:1.55;font-size:.98rem}
.panel-how li{padding-left:4px}
.panel-how b{color:color-mix(in srgb,var(--accent) 60%,#e8f0ff)}
.panel-mic-primer{display:flex;gap:12px;align-items:flex-start;background:color-mix(in srgb,var(--accent) 8%,var(--panel2));
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:11px;padding:13px 15px;margin-bottom:22px;
  font-size:.9rem;line-height:1.5;color:var(--ink-dim)}
.panel-mic-primer b{color:var(--ink)}
.pm-dot{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 24%,transparent)}
.panel-pick{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.panel-pick-label{font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.panel-select{background:#14131a;color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font:600 .92rem/1 var(--font);max-width:360px}
.panel-select:focus{outline:none;border-color:var(--accent)}
.panel-note{font:500 11.5px/1.45 var(--mono);color:var(--un);max-width:560px}
.panel-start-btn{font-size:14px;padding:14px 26px}

/* ---------- the video panel window ---------- */
.panel-window{position:relative;z-index:1;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(20,19,26,.58);backdrop-filter:blur(2px)}
.panel-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid var(--line)}
.panel-seats{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.panel-seat{font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  padding:6px 11px;border-radius:20px;border:1px solid var(--line);color:var(--un);background:transparent}
.panel-seat.active{color:#f3f8ff;background:var(--accent);border-color:var(--accent)}
.panel-top-right{text-align:right;margin-left:auto}

/* ---------- stage: video + question side by side ---------- */
.panel-stage{display:grid;grid-template-columns:minmax(280px,440px) 1fr;gap:22px;padding:22px}
.panel-video-wrap{position:relative;border-radius:14px;overflow:hidden;background:#0a0910;
  border:1px solid var(--line);aspect-ratio:1/1;min-height:280px}
.panel-video{width:100%;height:100%;object-fit:cover;display:block;background:#0a0910}
.panel-video-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;padding:22px;background:radial-gradient(120% 120% at 50% 30%,color-mix(in srgb,var(--window) 40%,#0a0910),#0a0910)}
.pvf-name{font:700 1.05rem/1.2 var(--font);color:var(--ink)}
.pvf-note{font:500 .82rem/1.5 var(--mono);color:var(--ink-dim);max-width:26ch}
.panel-nameplate{position:absolute;left:0;right:0;bottom:0;padding:9px 13px;
  background:linear-gradient(0deg,rgba(6,6,11,.86),transparent);
  font:700 11px/1.2 var(--mono);letter-spacing:.08em;color:#eaf2ff}
.panel-nameplate-role{color:color-mix(in srgb,var(--accent) 70%,#cfe0ff)}
.panel-qbox{display:flex;flex-direction:column;min-width:0}

/* ---------- type-instead break-glass fallback ---------- */
.panel-type-toggle{align-self:flex-start;background:none;border:none;cursor:pointer;padding:4px 0;
  font:600 12px/1.3 var(--mono);color:color-mix(in srgb,var(--accent) 55%,var(--ink-dim));text-decoration:underline;text-underline-offset:3px}
.panel-type-toggle:hover{color:color-mix(in srgb,var(--accent) 75%,#cfe0ff)}
.panel-type-wrap{display:flex;margin-top:10px}
/* keep the [hidden] attribute working: display:flex above (author style) beats the UA's
   [hidden]{display:none} regardless of specificity, which left the type box always visible
   and let oralboard.js's ta.focus() auto-scroll it into view on entering the room —
   shoving the examiner video above the fold on narrow viewports (7/15 QA note). Same
   class of bug as the panel-video-fallback fix in panel.js (2026-07-14); this one is
   fixable in pure CSS. sim.css uses this exact pattern for .consent-modal/.bcast-modal. */
.panel-type-wrap[hidden]{display:none}

@media(max-width:820px){
  .panel-stage{grid-template-columns:1fr;gap:16px;padding:16px}
  .panel-video-wrap{aspect-ratio:16/10;min-height:0}
  .panel-top{padding:12px 16px}
  .panel-top-right{margin-left:0}
  .panel-setup{padding:20px 18px 24px}
  .panel-start-btn{width:100%}
}