/* ============================================================
   Medcue — Viva Trainer + Partner mode.
   Consumes base.css tokens. The calm platform shell surrounds
   white "paper" cards (stimulus, examiner guide) that never
   darken — the exam-desk aesthetic is preserved.
   ============================================================ */

/* ---------- shell fixes scoped to viva pages ---------- */
/* base.css .timerchip sets display, which beats the UA [hidden] rule */
.timerchip[hidden]{display:none !important}
/* station cards are anchors — keep the sheet-calm, no underlines */
a.card{text-decoration:none; color:inherit}
.viva-examiner-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.viva-examiner-brand img{display:block;width:34px;height:34px;flex:none}
body.shell-dark > .topbar{position:sticky;top:0;z-index:50}

@media print{body.shell-dark > .topbar{position:static}}

/* ---------- mock picker (/app/viva) ---------- */
.viva-entry{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
  margin:0 0 28px;
}
.viva-entry-card.card{
  cursor:default; overflow:visible;
  border:2px solid var(--cue-blue,var(--acc));
  border-radius:16px 16px 16px 2px;
  box-shadow:var(--cue-shadow-quiet,var(--sh-1));
  padding:22px;
}
.viva-entry-card.card:hover{
  border-color:var(--cue-blue,var(--acc));
  box-shadow:var(--cue-shadow-quiet,var(--sh-1));
  transform:none;
}
.viva-entry-card.card::before{
  top:18px; bottom:auto; left:-2px; width:24px; height:7px;
  border-radius:0; background:var(--cue-citron,var(--acc-tint));
  border:2px solid var(--cue-blue,var(--acc)); border-left:0;
}
.viva-entry-card h2{
  margin:4px 0 8px; font-size:24px; line-height:1.1;
}
.viva-entry-kicker{
  margin:0; color:var(--cue-blue-deep,var(--acc-ink));
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.viva-entry-copy{
  margin:0 0 18px; color:var(--cue-ink-soft,var(--muted));
  font-size:14px; line-height:1.5;
}
.viva-entry-form{display:grid; gap:10px}
.viva-entry-form label{
  color:var(--cue-ink,var(--ink)); font-size:12px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
.viva-entry-form select,.viva-entry-form input{width:100%}
.viva-entry-form .beginbtn{width:100%; margin:2px 0 0}
.viva-join-code{
  text-align:center; text-transform:uppercase; font-weight:800;
  font-variant-numeric:tabular-nums; letter-spacing:.32em;
}
.viva-entry-message{
  min-height:20px; margin:10px 0 0;
  color:var(--cue-ink-soft,var(--muted)); font-size:13px; line-height:1.45;
}
.viva-entry-message.is-error{color:var(--wrong)}
.viva-session-result{
  display:grid; grid-template-columns:1fr auto; gap:8px 12px;
  align-items:center; margin-top:14px; padding:14px;
  background:var(--cue-paper,var(--bg-2));
  border:1px solid var(--cue-line-strong,var(--line)); border-radius:10px 10px 10px 0;
}
.viva-session-result[hidden]{display:none}
.viva-session-label{
  color:var(--cue-ink-soft,var(--muted)); font-size:11px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
}
.viva-session-code{
  grid-column:2; grid-row:1 / span 2;
  color:var(--cue-blue-deep,var(--acc-ink)); font-size:26px;
  font-variant-numeric:tabular-nums; letter-spacing:.16em; user-select:all;
}
.viva-session-link{
  min-width:0; margin:0; overflow-wrap:anywhere;
  color:var(--cue-ink-soft,var(--muted)); font-size:12px;
}
.viva-copy-button{grid-column:1 / -1; justify-self:start}
.viva-session-result .viva-entry-message{grid-column:1 / -1; margin:0; min-height:0}

.vt-mockhead{margin:0 0 12px}
.vt-mockhead h2{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:16px; letter-spacing:-.1px; color:var(--ink); margin:0;
}
.vt-mockhead h2::before{
  content:""; width:14px; height:2px; background:var(--acc); border-radius:2px; flex:none;
}
.vt-metarow{display:flex; flex-wrap:wrap; gap:7px; margin:8px 0 2px}
.vt-metachip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:var(--ink-2);
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:3px 10px;
  font-variant-numeric:tabular-nums;
}
.vt-metachip.done{background:var(--correct-bg); color:#136b3d; border-color:var(--correct-line)}
.vt-mocksub{color:var(--muted); font-size:13px; margin:2px 0 0}

/* station card = a .card; give the sub a discipline line + progress bar */
.vt-disc{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--acc-ink);
}
.vt-covbar{height:5px; border-radius:3px; background:var(--bg-2); overflow:hidden; margin-top:10px}
.vt-covbar > i{display:block; height:100%; background:var(--acc); border-radius:3px}
.vt-covbar.low > i{background:var(--wrong)}
.vt-covbar.mid > i{background:var(--flag)}

/* ---------- station shell (/app/viva-station) ---------- */
.vt-wrap{max-width:var(--maxw); margin:24px auto 72px; padding:0 16px}
.vt-toolbtn{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:7px 12px; cursor:pointer; font:inherit; font-weight:700; font-size:13px;
  color:var(--ink); min-height:38px; white-space:nowrap;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.vt-toolbtn:hover{border-color:var(--line-2); background:var(--bg-2)}
.vt-toolbtn.on{border-color:var(--acc-300); background:var(--acc-tint); color:var(--acc-ink)}

/* the big count-DOWN reading clock on the door */
.vt-readclock{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  font-weight:800; font-size:44px; letter-spacing:1px; line-height:1;
  color:var(--ink); text-align:center;
}
.vt-readclock.warn{color:var(--flag)}
.vt-readclock.done{color:var(--wrong)}
.vt-readlabel{text-align:center; color:var(--muted); font-size:12px; letter-spacing:.6px; text-transform:uppercase; margin-top:8px}

/* white "paper" card — stimulus + revealed data cards */
.vt-paper{
  background:#fff; color:#15171c; color-scheme:light;
  border:1px solid #d7dae1; border-radius:8px;
  box-shadow:var(--sh-1); padding:20px 22px; margin:16px 0;
}
.vt-paper .vt-paperlab{
  font-size:11px; font-weight:800; letter-spacing:.7px; text-transform:uppercase;
  color:var(--acc-ink); margin:0 0 10px;
}
.vt-paper .vt-findinglab{
  font-size:10.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase;
  color:var(--acc-ink); margin:12px 0 0; padding-top:9px; border-top:1px dashed var(--acc-300);
}
.vt-paper .vt-finding{font-size:13.5px; color:#000; line-height:1.55; margin:4px 0 0}
.vt-paper .imgwrap{margin:8px 0 0}
.vt-paper .imgwrap img{
  max-width:100%; width:auto; max-height:56vh; cursor:zoom-in;
  border:1px solid #c2c6cf; border-radius:4px;
}
/* data tables that arrive inside reveal data_html */
.vt-paper table.data,.vt-paper table{
  border-collapse:collapse; width:100%; margin:4px 0; font-size:13px; color:#000;
}
.vt-paper table.data th,.vt-paper table.data td,.vt-paper table th,.vt-paper table td{
  border:1px solid #c8ccd4; padding:7px 9px; text-align:left; vertical-align:top;
}
.vt-paper table.data th,.vt-paper table th{background:#f4f6f9; font-weight:700}
.vt-paper p{margin:8px 0; font-size:13.5px; color:#000; line-height:1.55}

/* setting / scenario block on the door */
.vt-brief{
  background:var(--bg-2); border:1px solid var(--line); border-left:3px solid var(--acc);
  border-radius:0 8px 8px 0; padding:14px 16px; margin:14px 0;
}
.vt-brief h3{margin:0 0 6px; font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:var(--acc-ink)}
.vt-brief p{margin:0; font-size:14.5px; line-height:1.6; color:var(--ink)}
.vt-notes{margin:10px 0 0; padding-left:20px}
.vt-notes li{font-size:13px; color:var(--ink-2); margin:4px 0; line-height:1.5}

/* ---------- questioning phase ---------- */
.vt-partnav{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 16px}
.vt-partdot{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line);
  background:#fff; color:var(--ink-2); font-weight:700; font-size:13px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.vt-partdot:hover{border-color:var(--acc-300)}
.vt-partdot.on{border-color:var(--acc); background:var(--acc-tint); color:var(--acc-ink)}
.vt-partdot.met{border-color:var(--correct-line); background:var(--correct-bg); color:#136b3d}
.vt-partdot.partial{border-color:var(--flag-line); background:var(--flag-bg); color:#8a6300}
.vt-partdot.missed{border-color:var(--wrong-line); background:var(--wrong-bg); color:var(--wrong)}

.vt-partprompt{
  font-size:19px; font-weight:700; line-height:1.45; color:var(--ink);
  letter-spacing:-.2px; margin:2px 0 4px;
}
.vt-partmeta{color:var(--muted); font-size:12px; letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px}

.vt-revealbtn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--acc); color:#fff; border:0; border-radius:var(--r-sm);
  padding:11px 17px; cursor:pointer; font:inherit; font-weight:700; font-size:14px;
  min-height:44px; margin:12px 0 2px;
  box-shadow:0 1px 2px rgba(12,83,71,.28), 0 6px 18px rgba(12,83,71,.18);
  transition:filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.vt-revealbtn:hover{filter:brightness(1.05)}
.vt-revealbtn:active{transform:translateY(1px)}
.vt-revealbtn::before{content:""; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.85)}

/* examiner guide reuses .rat (paper.css). segment question headers: */
.vt-guide{margin-top:14px}
.vt-guide .vt-seg + .vt-seg{margin-top:10px; padding-top:10px; border-top:1px dashed var(--acc-300)}
.vt-guide .vt-segq{font-weight:700; color:var(--acc-ink); font-size:13.5px; margin-bottom:4px}
.vt-guide ul{margin:4px 0; padding-left:18px}
.vt-guide li{margin:5px 0; font-size:13.5px; line-height:1.55; color:#000}
.vt-guide .vt-pearls{margin-top:10px; padding-top:9px; border-top:1px dashed var(--acc-300)}
.vt-guide .vt-pearls .vt-pk{font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--acc-ink)}
.vt-guide .vt-dx{margin-top:10px; font-weight:700; color:var(--acc-ink); font-size:14px}

/* self-mark segmented control */
.vt-markrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0 4px}
.vt-marklabel{font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); font-weight:700}
.vt-markseg{display:inline-flex; border:1.5px solid var(--line); border-radius:var(--r-pill); overflow:hidden; background:#fff}
.vt-markseg button{
  background:none; border:0; border-right:1.5px solid var(--line);
  padding:9px 15px; cursor:pointer; font:inherit; font-weight:700; font-size:13px;
  color:var(--ink-2); min-height:40px; transition:background var(--t-fast) var(--ease);
}
.vt-markseg button:last-child{border-right:0}
.vt-markseg button:hover{background:var(--bg-2)}
.vt-markseg button.met.on{background:var(--correct-bg); color:#136b3d}
.vt-markseg button.partial.on{background:var(--flag-bg); color:#8a6300}
.vt-markseg button.missed.on{background:var(--wrong-bg); color:var(--wrong)}

.vt-stepnav{display:flex; justify-content:space-between; gap:12px; margin:22px 0 0}

/* ---------- summaries ---------- */
.vt-sumhd{font-size:22px; font-weight:800; letter-spacing:-.3px; margin:2px 0 4px; color:var(--ink)}
.vt-scorebig{
  font-variant-numeric:tabular-nums; font-weight:800; font-size:40px; line-height:1;
  color:var(--acc-ink);
}
.vt-covgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:16px 0}
.vt-covcell{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; background:var(--bg-2);
}
.vt-covcell .k{font-size:12px; color:var(--muted); letter-spacing:.4px; text-transform:uppercase}
.vt-covcell .v{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:3px}
.vt-covcell.met .v{color:#136b3d}
.vt-covcell.partial .v{color:#8a6300}
.vt-covcell.missed .v{color:var(--wrong)}
.vt-tags{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0}

/* mock summary — per-station result list */
.vt-mslist{margin:16px 0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.vt-msrow{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 15px; border-top:1px solid var(--line); background:var(--bg);
}
.vt-msrow:first-child{border-top:0}
.vt-msrow.pending{background:var(--bg-2)}
.vt-msmain{min-width:0}
.vt-mstitle{font-size:14px; font-weight:700; color:var(--ink); line-height:1.35}
.vt-msdisc{
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--acc-ink); margin-top:2px;
}
.vt-msright{flex:none}
.vt-mspct{
  font-variant-numeric:tabular-nums; font-weight:800; font-size:17px; color:var(--acc-ink);
}

/* ---------- partner mode ---------- */
.vt-partner{
  border:1px solid var(--acc-300); border-radius:var(--r); background:var(--acc-tint);
  padding:16px 18px; margin:16px 0;
}
.vt-partner h3{margin:0 0 4px; font-size:15px; color:var(--acc-ink)}
.vt-partner p{margin:0 0 10px; font-size:13.5px; color:var(--ink-2); line-height:1.55}
.vt-code{
  font-variant-numeric:tabular-nums; font-weight:800; font-size:34px; letter-spacing:8px;
  color:var(--ink); background:#fff; border:1px dashed var(--acc-300); border-radius:var(--r-sm);
  padding:12px 18px 12px 26px; text-align:center; user-select:all;
}
.vt-codeurl{font-size:12px; color:var(--muted); margin-top:8px; word-break:break-all}
.vt-conn{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--muted)}
.vt-conn::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--muted)}
.vt-conn.live{color:#136b3d}
.vt-conn.live::before{background:var(--correct); box-shadow:0 0 0 3px var(--correct-bg)}

/* examiner page (public) */
.vt-exwrap{max-width:760px; margin:26px auto 80px; padding:0 16px}
.vt-joincard{
  max-width:420px; margin:60px auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:30px 28px;
}
.vt-joincard h1{font-size:22px; margin:0 0 6px}
.vt-joincard p{color:var(--ink-2); font-size:14px; line-height:1.55; margin:0 0 18px}
.vt-codeinput{
  width:100%; box-sizing:border-box; text-align:center; text-transform:uppercase;
  font-variant-numeric:tabular-nums; font-weight:800; font-size:30px; letter-spacing:10px;
  padding:14px 10px 14px 20px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink); background:#fff;
}
.vt-codeinput:focus-visible{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-tint)}
.vt-exhint{
  background:var(--flag-bg); border:1px solid var(--flag-line); border-radius:var(--r-sm);
  padding:10px 13px; font-size:12.5px; color:#7a5a00; margin:14px 0; line-height:1.5;
}
.vt-expart{
  border:1px solid var(--line); border-radius:var(--r); background:#fff; color:#15171c;
  color-scheme:light; padding:16px 18px; margin:12px 0;
}
.vt-expart.cur{border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-tint)}
.vt-expart .vt-exph{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.vt-expart .vt-exn{font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--acc-ink)}
.vt-expart .vt-exprompt{font-weight:700; font-size:15.5px; line-height:1.45; margin:4px 0 6px; color:#000}

/* dim non-current parts a touch to focus the examiner's eye */
.vt-expart.dim{opacity:.72}

.vt-diagbox{
  background:var(--acc-tint); border:1px solid var(--acc-300); border-radius:var(--r-sm);
  padding:11px 14px; margin:14px 0; color:var(--acc-ink); font-size:14px; font-weight:700;
}

@media (max-width:640px){
  .viva-entry{grid-template-columns:1fr}
  .viva-entry-card.card{padding:20px}
  .viva-session-result{grid-template-columns:1fr}
  .viva-session-code{grid-column:1; grid-row:auto}
  .vt-readclock{font-size:38px}
  .vt-code{font-size:26px; letter-spacing:5px; padding-left:20px}
  .vt-codeinput{font-size:24px; letter-spacing:6px}
  .vt-partprompt{font-size:17px}
}

@media (prefers-reduced-motion: reduce){
  .vt-revealbtn:active{transform:none}
}

/* ============================================================
   SPLASH generation — optimistic station picker, calm station desk
   ============================================================ */
body.splash-student .viva-entry { gap: 16px; margin-bottom: 34px; }
body.splash-student .viva-entry-card.card {
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--cc-separator);
  border-radius: var(--splash-r-card);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
}
body.splash-student .viva-entry-card.card::before {
  inset: 0 0 auto;
  width: auto;
  height: 5px;
  border: 0;
  border-radius: 0;
  background: var(--splash-grad-sunrise);
}
body.splash-student .viva-entry-kicker {
  color: var(--cc-primary);
  font-family: var(--cc-display-font);
}
body.splash-student .viva-entry-card h2 {
  color: var(--cc-ink);
  font-family: var(--cc-display-font);
  font-size: 25px;
  letter-spacing: -.02em;
}
body.splash-student .viva-session-result {
  border-color: var(--cc-separator);
  border-radius: 16px;
  background: var(--cc-surface-subtle);
}
body.splash-student .viva-session-code { color: var(--cc-primary); font-family: var(--cc-data-font); }
body.splash-student .vt-covbar { height: 8px; background: var(--splash-track); }
body.splash-student .vt-covbar > i { background: var(--splash-grad-mini); }

body.splash-student .vt-wrap { max-width: 900px; margin-top: 30px; }
body.splash-student .vt-paper {
  padding: clamp(20px, 3vw, 28px);
  border-color: #EADFD5;
  border-radius: var(--splash-r-card);
  background: var(--color-surface);
  box-shadow: 0 2px 10px rgba(43, 26, 18, .04);
}
body.splash-student .vt-brief {
  border-color: var(--cc-separator);
  border-left: 4px solid var(--cc-primary);
  border-radius: 0 16px 16px 0;
  background: var(--cc-surface);
}
body.splash-student :is(.vt-toolbtn, .vt-partdot) {
  border-color: var(--cc-separator-strong);
  border-radius: 999px;
  background: var(--cc-surface);
  color: var(--cc-ink-secondary);
}
body.splash-student .vt-partdot.on {
  border-color: var(--cc-primary);
  background: var(--cc-primary-soft);
  color: var(--cc-primary);
}
body.splash-student .vt-partprompt {
  color: var(--cc-ink);
  font-family: var(--cc-display-font);
  font-size: 21px;
}
body.splash-student .vt-revealbtn {
  border-radius: 999px;
  background: var(--cc-primary);
  color: var(--cc-primary-action-ink);
  font-family: var(--cc-display-font);
  box-shadow: var(--splash-shadow-cta);
}
body.splash-student .vt-markseg {
  border-color: var(--cc-separator-strong);
  background: var(--cc-surface);
}

/* Externalised from viva-station.html so the page remains CSP-clean. */
body.splash-student :is(
  .topbar .home, .topbar .mini, .vt-wrap .vt-toolbtn, .vt-wrap .vt-partdot,
  .vt-wrap .vt-markseg button, .vt-wrap .vt-revealbtn,
  .vt-wrap .vt-stepnav .btn, .vt-wrap .vt-stepnav .beginbtn
) {
  min-width: 44px;
  min-height: 44px;
}
body.splash-student > .topbar {
  min-height: 62px;
  border: 0 !important;
  border-bottom: 1px solid var(--cc-separator) !important;
  background: color-mix(in srgb, var(--cc-canvas) 94%, transparent) !important;
  box-shadow: none !important;
  color: var(--cc-ink) !important;
  backdrop-filter: blur(10px) !important;
}
body.splash-student > .topbar .runhead {
  color: var(--cc-ink-secondary) !important;
  font-family: var(--cc-display-font);
  font-size: 14px;
  text-transform: none;
}
body.splash-student > .topbar .runhead::after { background: var(--splash-grad-sunrise) !important; }
body.splash-student > .topbar .home,
body.splash-student > .topbar .mini {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 14px !important;
  border: 1px solid var(--cc-separator-strong) !important;
  border-radius: 999px !important;
  background: var(--cc-surface) !important;
  color: var(--cc-ink-secondary) !important;
  font-family: var(--cc-display-font);
  text-decoration: none;
}
body.splash-student > .topbar :is(.home, .mini):hover {
  border-color: var(--cc-primary) !important;
  background: var(--cc-primary-soft) !important;
  color: var(--cc-primary) !important;
}

body.splash-student > .topbar .viva-station-brand {
  gap: 7px;
  min-height: 44px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cc-ink) !important;
  font-size: 17px;
  font-weight: 800;
}
body.splash-student > .topbar .viva-station-brand:hover {
  background: transparent !important;
  color: var(--cc-primary) !important;
}
.viva-station-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
}
.viva-station-mark img {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}
.viva-station-mark__dark { display: none !important; }
html[data-theme="dark"] .viva-station-mark__light { display: none !important; }
html[data-theme="dark"] .viva-station-mark__dark { display: block !important; }

/* Partner examiner uses the same Clinical Folio shell as the candidate room. */
body.splash-student.viva-examiner .vt-exwrap {
  width: min(100%, 792px);
  margin: 36px auto 88px;
  padding: 0 clamp(16px, 3vw, 28px);
}
body.splash-student.viva-examiner .vt-joincard {
  position: relative;
  overflow: hidden;
  max-width: 460px;
  margin: clamp(36px, 9vh, 82px) auto;
  padding: clamp(24px, 5vw, 36px);
  border: 1px solid var(--cc-separator);
  border-radius: 18px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
}
body.splash-student.viva-examiner .vt-joincard::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--splash-grad-sunrise);
  content: "";
}
body.splash-student.viva-examiner .vt-exeyebrow {
  margin: 0 0 8px;
  color: var(--cc-primary);
  font-family: var(--cc-data-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body.splash-student.viva-examiner .vt-joincard h1 {
  margin: 0 0 10px;
  color: var(--cc-ink);
  font-family: var(--cc-display-font);
  font-size: clamp(28px, 5vw, 36px);
  line-height: 1.08;
  letter-spacing: -.025em;
}
body.splash-student.viva-examiner .vt-joincard > p:not(.vt-exeyebrow) {
  max-width: 34ch;
  margin: 0 0 24px;
  color: var(--cc-ink-secondary);
  font-size: 15px;
  line-height: 1.55;
}
body.splash-student.viva-examiner #joinform {
  display: grid;
  gap: 10px;
}
body.splash-student.viva-examiner #joinform .vt-marklabel {
  color: var(--cc-ink-secondary);
  font-family: var(--cc-data-font);
  font-size: 11px;
  letter-spacing: .07em;
}
body.splash-student.viva-examiner .vt-codeinput {
  min-height: 58px;
  border: 1px solid var(--cc-separator-strong);
  border-radius: 12px;
  background: var(--cc-canvas);
  color: var(--cc-ink);
  font-family: var(--cc-data-font);
  font-size: clamp(24px, 7vw, 30px);
  letter-spacing: .24em;
}
body.splash-student.viva-examiner .vt-codeinput:focus-visible {
  border-color: var(--cc-primary);
  outline: 3px solid color-mix(in srgb, var(--cc-primary) 28%, transparent);
  outline-offset: 2px;
  box-shadow: none;
}
body.splash-student.viva-examiner #joinform .beginbtn {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--cc-primary);
  color: var(--cc-primary-action-ink);
  font-family: var(--cc-display-font);
  box-shadow: var(--splash-shadow-cta);
}
body.splash-student.viva-examiner #examview {
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid var(--cc-separator);
  border-radius: var(--splash-r-card);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
}
body.splash-student.viva-examiner #examview:empty {
  display: none;
}
body.splash-student.viva-examiner #examview > .vt-partmeta:first-child {
  margin: 0 0 7px;
  color: var(--cc-primary);
  font-family: var(--cc-data-font);
  font-weight: 700;
  letter-spacing: .07em;
}
body.splash-student.viva-examiner #examview > h1 {
  margin: 0;
  color: var(--cc-ink);
  font-family: var(--cc-display-font);
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.08;
  letter-spacing: -.025em;
}
body.splash-student.viva-examiner .vt-exhint {
  margin: 20px 0 24px;
  padding: 10px 0 10px 15px;
  border: 0;
  border-left: 3px solid var(--cc-primary);
  border-radius: 0;
  background: transparent;
  color: var(--cc-ink-secondary);
  font-size: 14px;
  line-height: 1.5;
}
body.splash-student.viva-examiner .vt-expart {
  margin: 14px 0;
  padding: 18px;
  border: 1px solid var(--cc-separator);
  border-radius: 14px;
  background: var(--cc-canvas);
  box-shadow: none;
  opacity: 1;
}
body.splash-student.viva-examiner .vt-expart.cur {
  border: 2px solid var(--cc-primary);
  background: color-mix(in srgb, var(--cc-primary-soft) 42%, var(--cc-canvas));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-primary) 12%, transparent);
}
body.splash-student.viva-examiner .vt-expart.dim {
  border-color: var(--cc-separator);
  opacity: 1;
}
body.splash-student.viva-examiner .vt-expart .vt-exn {
  color: var(--cc-primary);
  font-family: var(--cc-data-font);
}
body.splash-student.viva-examiner .vt-expart .vt-exprompt {
  margin: 12px 0 8px;
  color: var(--cc-ink);
  font-family: var(--cc-display-font);
  font-size: 18px;
}
body.splash-student.viva-examiner .vt-markseg {
  border-color: var(--cc-separator-strong);
  background: var(--cc-surface);
}
body.splash-student.viva-examiner .vt-markseg button {
  min-width: 44px;
  min-height: 44px;
  padding: 9px 14px;
  border-color: var(--cc-separator-strong);
  font-family: var(--cc-display-font);
}
body.splash-student.viva-examiner .vt-conn {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--cc-separator);
  border-radius: 999px;
  background: var(--cc-surface);
  color: var(--cc-ink-secondary);
  font-family: var(--cc-data-font);
}
body.splash-student.viva-examiner .vt-codeurl {
  color: var(--cc-ink-tertiary);
  font-family: var(--cc-data-font);
  text-align: right;
}

@media (max-width: 640px) {
  body.splash-student.viva-examiner .vt-exwrap {
    margin-top: 20px;
    padding-inline: 12px;
  }
  body.splash-student.viva-examiner .vt-joincard {
    margin-block: 24px;
    padding: 26px 20px 22px;
  }
  body.splash-student.viva-examiner #examview {
    padding: 20px 14px;
    border-radius: 16px;
  }
  body.splash-student.viva-examiner .vt-expart {
    padding: 15px 12px;
  }
  body.splash-student.viva-examiner .vt-expart .vt-exph {
    align-items: stretch;
  }
  body.splash-student.viva-examiner .vt-markseg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  body.splash-student.viva-examiner .vt-markseg button {
    min-width: 0;
    padding-inline: 7px;
  }
  body.splash-student.viva-examiner .vt-codeinput {
    padding-inline: 12px;
    letter-spacing: .18em;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.splash-student.viva-examiner *,
  body.splash-student.viva-examiner *::before,
  body.splash-student.viva-examiner *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keep access and persistence controls fully readable. */
.viva-access-panel { opacity: 1; padding: 24px; color: #202e35; background: var(--color-surface); }
.viva-access-panel .lede { color: #566570; }
.vt-save { max-width: 900px; margin: 16px auto 0; padding: 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: #566570; }
.vt-save p { margin: 0; }
.vt-partprompt { font-size: 1.65rem; line-height: 1.35; }
.vt-partner .btn { margin: 8px 8px 0 0; }
.vt-conn { color: #566570; }
.viva-session-result .beginbtn { display: inline-flex; margin: 8px 0; }
.viva-access-panel .upgradebtn { background: #bc4028; color: #fff; opacity: 1; }

/* Candidate practice has a stable reading surface and explicit phase controls. */
body.viva-station { background: var(--color-bg); color: var(--color-text); }
body.viva-station > .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-4); min-height: 4rem; padding: var(--space-3) var(--layout-gutter); background: var(--color-surface); border: 0; border-bottom: 1px solid var(--color-border-strong); box-shadow: none; backdrop-filter: none; }
body.viva-station .viva-station-brand { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; width: auto; max-width: none; margin: 0; padding: 0; color: var(--color-text); font-family: var(--font-wordmark); font-weight: var(--brand-wordmark-weight); font-size: var(--brand-wordmark-size); letter-spacing: var(--brand-tracking); text-decoration: none; }
body.viva-station .viva-station-brand::before { content: none; }
body.viva-station .viva-station-mark { display: block; width: 2rem; }
body.viva-station .viva-station-mark__dark { display: none; }
body.viva-station .runhead { display: block; flex: 1; min-width: 0; color: var(--color-text-secondary); font-size: var(--type-body-sm); font-weight: 500; text-transform: none; letter-spacing: 0; text-align: left; overflow-wrap: anywhere; white-space: normal; }
body.viva-station .runhead::after { content: none; }
body.viva-station .score { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2); margin-left: auto; }
body.viva-station #timerchip { min-height: var(--control-height); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: 600 var(--type-label)/1.4 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.viva-station #timerchip::before { content: none; }
body.viva-station #timerchip.paused { border-color: var(--color-warning); background: var(--color-warning-subtle); color: var(--color-warning); }
body.viva-station #timerchip.overtime { color: var(--color-error); }
body.viva-station .topbar .mini { display: inline-flex; align-items: center; min-height: var(--control-height); padding: var(--space-2) var(--space-3); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--type-label); text-decoration: none; }
body.viva-station .vt-save { width: min(calc(100% - var(--layout-gutter) * 2), var(--layout-prose)); padding: 0; margin: var(--space-4) auto 0; font-size: var(--type-caption); color: var(--color-text-secondary); }
body.viva-station #stage { width: min(calc(100% - var(--layout-gutter) * 2), var(--layout-prose)); max-width: none; margin: var(--space-6) auto var(--space-12); padding: 0; }
body.viva-station #stage > * + * { margin-top: var(--space-5); }
body.viva-station #stage :is(p, li) { font-family: var(--font-clinical); font-size: var(--type-clinical); line-height: var(--leading-clinical); color: var(--color-text); }
body.viva-station #stage :is(.vt-partmeta, .vt-timing-note, .vt-readlabel) { color: var(--color-text-secondary); font: 400 var(--type-body-sm)/var(--leading-body) var(--font-body); text-transform: none; letter-spacing: 0; }
body.viva-station #stage .vt-partprompt { font-family: var(--font-clinical); font-size: var(--type-h2); line-height: 1.4; text-wrap: pretty; }
body.viva-station #stage :is(.vt-brief, .vt-paper, .vt-candidate-context, .vt-guide) { padding: var(--space-5) 0 0; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: var(--color-surface); box-shadow: none; }
body.viva-station #stage :is(.vt-brief, .vt-candidate-context) h2 { font-size: var(--type-h3); margin: var(--space-4) 0 var(--space-2); }
body.viva-station #stage .vt-brief h2:first-child { margin-top: 0; }
body.viva-station #stage .vt-candidate-context > summary { min-height: var(--control-height); padding: var(--space-2) 0; color: var(--color-text); font-size: var(--type-label); font-weight: 600; }
body.viva-station #stage .vt-paperlab { margin: 0 0 var(--space-3); color: var(--color-text-secondary); font: 600 var(--type-label)/1.4 var(--font-body); text-transform: none; letter-spacing: 0; }
body.viva-station #stage .imgwrap { margin: 0; border: 0; background: var(--color-bg-subtle); }
body.viva-station #stage .imgwrap img { display: block; width: 100%; max-height: 26rem; object-fit: contain; padding: var(--space-3); box-shadow: none; }
body.viva-station #stage table { width: 100%; table-layout: auto; border-collapse: collapse; font-family: var(--font-clinical); font-size: var(--type-body); }
body.viva-station #stage :is(th, td) { padding: var(--space-2); border: 1px solid var(--color-border); color: var(--color-text); overflow-wrap: anywhere; }
body.viva-station #stage :is(th, td):first-child { min-width: 8ch; overflow-wrap: normal; }
body.viva-station #stage th { background: var(--color-bg-subtle); }
body.viva-station #stage .vt-readclock { color: var(--color-text); font-family: var(--font-body); font-size: var(--type-h1); font-variant-numeric: tabular-nums; }
body.viva-station #stage .vt-partnav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
body.viva-station #stage :is(.beginbtn, .btn, .vt-toolbtn, .vt-revealbtn, .vt-partdot, .vt-markseg button, .learner-inspect) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: var(--control-height); min-height: var(--control-height); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: none; background: var(--color-surface); color: var(--color-text); font: 600 var(--type-label)/1.4 var(--font-body); text-decoration: none; white-space: normal; transform: none; filter: none; }
body.viva-station #stage :is(.beginbtn, .vt-partdot.on) { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-inverse); }
body.viva-station #stage .vt-revealbtn::before { content: none; }
body.viva-station #stage .vt-markseg { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; border: 0; background: transparent; box-shadow: none; }
body.viva-station #stage .vt-markseg button[aria-pressed='true'] { background: var(--color-bg-subtle); outline: 2px solid currentColor; outline-offset: -3px; }
body.viva-station #stage .vt-stepnav { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; padding-top: var(--space-5); border-top: 1px solid var(--color-border-strong); }
body.viva-station #stage .vt-timing-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
body.viva-station #stage .vt-timing-tools p { flex: 1 1 18rem; }
body.viva-station #stage :disabled { background: var(--color-disabled-bg); color: var(--color-disabled); cursor: not-allowed; }
body.viva-station .foot { width: min(calc(100% - var(--layout-gutter) * 2), var(--layout-prose)); margin: 0 auto var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: var(--type-caption); }
@media (max-width: 600px) {
  body.viva-station > .topbar { flex-wrap: wrap; gap: var(--space-2); }
  body.viva-station .runhead { order: 3; flex-basis: 100%; }
  body.viva-station #stage .vt-stepnav > button { flex: 1 1 40%; }
}
@media (hover: hover) and (pointer: fine) {
  body.viva-station #stage :is(.btn, .vt-toolbtn, .vt-revealbtn, .learner-inspect):hover { background: var(--color-bg-subtle); border-color: var(--color-text-secondary); }
  body.viva-station #stage .beginbtn:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
}

body.splash-student.viva-examiner > .topbar .viva-station-brand { gap: var(--brand-gap); font-family: var(--font-wordmark) !important; font-weight: var(--brand-wordmark-weight) !important; font-size: var(--brand-wordmark-size); letter-spacing: var(--brand-tracking); }