/* ============================================================================
   Candidate pages: the console design system (design.md) on the pages that
   are not the dashboard -- the interview runtime (passcode, not-open-yet,
   instructions, device setup, live interview, finish) and the public pages
   (careers, thank-you, 404, offline, privacy, terms).

   Loaded AFTER workspace/css/console.css, which brings the tokens (light and
   dark), the local Geist face and the shared components (.btn, .icon-btn,
   .toast, .field ...). This layer only maps each page's own markup onto those
   tokens. Every page keeps its layout, its ids and every class a script
   toggles: the rules below restyle those states, they never rename them.
   Scripts write Tailwind class strings onto some buttons as their state
   changes; rules here are keyed on ids and states (:disabled, .is-passed) so
   they outrank those utilities without touching the scripts.

   Body class `cx`. The theme follows the system or the viewer's choice for
   the session (shared/js/candidate-theme.js), like the dashboard.
   ========================================================================== */

/* ---------------------------------------------------------------- bridge
   Older page styles read theme.css and status.css tokens; point them at the
   design tokens so both themes stay in one palette. */
.cx{
  --app-bg:var(--bg); --page-gradient:none;
  --surface-elevated:var(--sunk); --surface-raised:var(--surface); --inset:var(--sunk);
  --text-primary:var(--text); --text-heading:var(--text); --text-muted:var(--text-2); --text-link:var(--brand);
  --border:var(--line); --border-hover:var(--line-2); --focus-ring:var(--brand);
  --btn-primary-bg:var(--brand); --btn-primary-bg-hover:var(--brand-hover); --btn-primary-text:var(--on-brand); --btn-primary-border:var(--brand);
  --success:var(--ok); --warning:var(--warn); --info:var(--brand);
  --status-dot-active:var(--brand); --status-dot-success:var(--ok); --status-dot-warning:var(--warn); --status-dot-error:var(--danger);
  --status-dot-success-ripple:rgba(17,130,75,.4); --status-dot-warning-ripple:rgba(164,90,0,.38); --status-dot-error-ripple:rgba(196,47,59,.4);
}
:root[data-theme="dark"] .cx{
  --status-dot-success-ripple:rgba(76,195,138,.45); --status-dot-warning-ripple:rgba(229,168,69,.45); --status-dot-error-ripple:rgba(240,112,122,.45);
}

/* ------------------------------------------------------------------ base */
body.cx{margin:0;background:var(--bg);color:var(--text);font:400 14px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.cx :is(h1,h2,h3){letter-spacing:-.018em}
.cx ::selection{background:var(--brand-soft)}
.cx :focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Text entry: focus is the 1px border turning brand, no outline or halo (design.md 4.22). */
.cx :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),select,textarea):focus-visible{outline:none}
.cx .hidden{display:none!important}
.cx .i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cx a.cx-link,.cx .cx-links a{color:var(--brand);text-decoration:none}
.cx a.cx-link:hover,.cx .cx-links a:hover{text-decoration:underline}
.cx .cx-links{color:var(--text-3);font-size:12.5px}

/* Tailwind utilities left in the markup, in the design's palette (both
   themes). Two classes beat one utility; hover variants tie and lose on order. */
.cx .bg-white{background-color:var(--surface)}
.cx .bg-gray-50,.cx .bg-slate-50,.cx .bg-gray-100,.cx .bg-slate-100{background-color:var(--sunk)}
.cx .text-gray-900,.cx .text-gray-800,.cx .text-slate-900,.cx .text-slate-800{color:var(--text)}
.cx .text-gray-700,.cx .text-gray-600,.cx .text-slate-700,.cx .text-slate-600{color:var(--text-2)}
.cx .text-gray-500,.cx .text-gray-400,.cx .text-slate-500,.cx .text-slate-400{color:var(--text-3)}
.cx .border-gray-100,.cx .border-gray-200,.cx .border-slate-100,.cx .border-slate-200{border-color:var(--line)}
.cx .text-blue-600,.cx .text-blue-700{color:var(--brand)}

/* ------------------------------------------------------ header (design 4.4)
   One 64px bar on every step, a 1px rule under it, no shadow: brand on the
   left, the step tracker in the middle, the theme toggle on the right. */
.cx .page-header,.cx #setupHeader,.cx .result-head,.cx .live-head{min-height:64px;box-sizing:border-box;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:12px;border-bottom:1px solid var(--line);background:var(--bg);box-shadow:none}
.cx .page-header,.cx .result-head{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.cx-brand{display:flex;align-items:center;gap:10px;min-width:0}
.cx-brand img,.cx .live-brand img,.cx .result-head img{width:32px!important;height:32px!important;flex:none;border-radius:10px!important;object-fit:cover}
.cx-brand span,.cx .live-brand span,.cx .result-head span{font-size:16.5px!important;font-weight:600!important;line-height:1.3!important;letter-spacing:-.015em!important;color:var(--text)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-head-end{display:flex;align-items:center;justify-content:flex-end;gap:2px;min-width:0}

/* Theme toggle: a 34px round icon button (design 4.2 / 4.4). */
.cx-theme{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--text-2);cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),transform .25s var(--spring)}
.cx-theme:hover{background:var(--hover);color:var(--text)}
.cx-theme:active{transform:scale(.9)}
.cx-theme .i-sun{display:none}
:root[data-theme="dark"] .cx-theme .i-sun{display:block}
:root[data-theme="dark"] .cx-theme .i-moon{display:none}

/* Step tracker (passcode -> instructions -> device setup). */
.cx-steps{display:flex;align-items:center;gap:8px}
.cx-step{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:999px;background:var(--sunk);color:var(--text-3);transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.cx-step svg{width:17px;height:17px}
.cx-step.is-done{background:var(--brand-soft);color:var(--brand)}
.cx-step.is-current{background:var(--brand);color:var(--on-brand);box-shadow:0 0 0 4px var(--brand-soft)}
.cx-step-line{width:28px;height:2px;flex:none;border-radius:2px;background:var(--line-2)}
.cx-step-line.is-done{background:var(--brand)}

/* -------------------------------------------------------- round go button
   The one action on the passcode and instructions steps. Scripts write its
   class list as it enables; the id rules below carry the look. */
.cx #passcodeButton,.cx #continueButton{display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:999px;box-shadow:none;transform:none;transition:background .15s var(--ease),color .15s var(--ease),transform .25s var(--spring),box-shadow .2s var(--ease)}
.cx #passcodeButton svg,.cx #continueButton svg{width:24px;height:24px}
.cx #passcodeButton:not(:disabled),.cx #continueButton:not(:disabled){background:var(--brand);color:var(--on-brand);cursor:pointer;box-shadow:0 8px 20px -8px rgba(37,99,235,.55)}
.cx #passcodeButton:not(:disabled):hover,.cx #continueButton:not(:disabled):hover{background:var(--brand-hover)}
.cx #passcodeButton:not(:disabled):active,.cx #continueButton:not(:disabled):active{transform:scale(.94)}
.cx #passcodeButton:disabled,.cx #continueButton:disabled{background:var(--sunk);color:var(--text-3);cursor:not-allowed}

/* --------------------------------------------------- flash (design 4.20)
   #flashToast becomes the design's toast: an inverse pill at the bottom
   centre whose icon carries the tone (success / error / warning / info). */
.cx .flash-toast{position:fixed;top:auto;right:auto;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:120;display:flex;align-items:center;gap:10px;min-width:0;width:max-content;max-width:calc(100vw - 32px);transform:translateX(-50%);padding:11px 14px 11px 14px;border:0;border-radius:999px;background:var(--toast-bg);color:var(--toast-ink);box-shadow:var(--shadow-pop);font-size:14px;font-weight:500;line-height:1.4;animation:cx-toast-in .45s var(--spring)}
.cx .flash-toast.hidden{display:none!important}
.cx .flash-toast.error,.cx .flash-toast.success,.cx .flash-toast.warning{border:0;background:var(--toast-bg)}
.cx .flash-toast > .flex-1{min-width:0}
.cx .flash-toast #flashMessage{margin:0;color:inherit!important;font-size:14px;font-weight:500}
.cx .flash-tone{display:none;width:18px;height:18px;flex:none;color:var(--toast-ink);opacity:.7}
.cx .flash-toast:not(.error):not(.success):not(.warning) .flash-tone--info{display:block}
.cx .flash-toast.success .flash-tone--success{display:block;color:var(--toast-ico);opacity:1}
.cx .flash-toast.error .flash-tone--error{display:block;color:var(--toast-err);opacity:1}
.cx .flash-toast.warning .flash-tone--warning{display:block;color:var(--toast-warn);opacity:1}
.cx .flash-close{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;margin:0 -4px 0 2px;padding:0;border:0;border-radius:999px;background:transparent;color:inherit;opacity:.6;cursor:pointer;transition:opacity .15s var(--ease)}
.cx .flash-close:hover{background:transparent;color:inherit;opacity:1}
.cx .flash-close svg{width:14px;height:14px}
@keyframes cx-toast-in{from{opacity:0;transform:translate(-50%,14px) scale(.95)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* ------------------------------------------------------- loading overlay
   An opaque veil (the design has no blur), a pop card and the skeleton
   shimmer in the design's skeleton tokens. */
.cx .loading-overlay{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none}
.cx .skeleton-card{border:1px solid var(--line);border-radius:24px;background:var(--pop);box-shadow:var(--shadow-pop)}
.cx .skeleton-line{background:linear-gradient(90deg,var(--skel-base) 25%,var(--skel-shine) 50%,var(--skel-base) 75%) var(--skel-base);background-size:220% 100%}
.cx .loading-title{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--text)}
.cx .loading-description,.cx .loading-message{font-size:13.5px;font-weight:400;color:var(--text-2)}
.cx .loading-message{font-weight:500}
.cx .loading-success{width:52px;height:52px;border-radius:17px;background:var(--ok-soft);color:var(--ok)}

/* ------------------------------------------------------ dialogs (4.21)
   The device-setup modals keep their markup and ids; they take the design's
   dialog card, scrim, and buttons. */
.cx .interview-modal{background:var(--scrim);padding:16px}
.cx .interview-modal.is-open .interview-modal__dialog{animation:cx-dlg-in .34s var(--spring)}
.cx .interview-modal__dialog{width:min(480px,100%);padding:22px 24px 20px;border:0;border-radius:24px;background:var(--pop);color:var(--text);box-shadow:var(--shadow-pop)}
.cx .interview-modal__dialog h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--text)}
.cx .interview-modal__dialog p{color:var(--text-2)!important;font-size:14px;line-height:1.55}
.cx .interview-modal__actions{flex-direction:column-reverse;gap:8px;padding-top:20px}
@media (min-width:640px){.cx .interview-modal__actions{flex-direction:row;justify-content:flex-end}.cx .interview-modal__actions > button{flex:0 0 auto}}
@keyframes cx-dlg-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* The design's button (4.1) for the buttons whose ids the scripts own. */
.cx :is(#preflightBlockCloseButton,#screenShareAgainButton,#screenShareEndButton,#confirmEndInterviewButton,#cancelEndInterviewButton,#testMicrophoneButton,.result-button){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:1px solid transparent;border-radius:999px;font:500 14px/1 var(--font);box-shadow:none;cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .25s var(--spring)}
.cx :is(#preflightBlockCloseButton,#screenShareAgainButton,#screenShareEndButton,#confirmEndInterviewButton,#cancelEndInterviewButton,#testMicrophoneButton,.result-button):active{transform:scale(.97)}
.cx :is(#preflightBlockCloseButton,#screenShareAgainButton,.result-button){background:var(--brand)!important;color:var(--on-brand)!important}
.cx :is(#preflightBlockCloseButton,#screenShareAgainButton,.result-button):hover{background:var(--brand-hover)!important}
.cx :is(#screenShareEndButton,#confirmEndInterviewButton){background:var(--danger)!important;color:#fff!important}
.cx :is(#screenShareEndButton,#confirmEndInterviewButton):hover{background:var(--danger)!important;filter:brightness(1.06)}
.cx :is(#cancelEndInterviewButton,#testMicrophoneButton){background:var(--surface)!important;color:var(--text)!important;border-color:var(--line-2)!important;--tw-ring-shadow:0 0 #0000}
.cx :is(#cancelEndInterviewButton,#testMicrophoneButton):hover{background:var(--hover)!important}
.cx #testMicrophoneButton:disabled{opacity:.5;cursor:not-allowed}

/* ------------------------------------------------ passcode (design 4.22) */
.cx .passcode-input{width:56px;height:64px;padding:0;text-align:center;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--text);font:600 26px/1 var(--font);font-variant-numeric:tabular-nums;caret-color:var(--brand);transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)}
.cx .passcode-input:hover{border-color:var(--text-3)}
.cx .passcode-input:focus{border-color:var(--brand);outline:none}
.cx .passcode-input.error{border-color:var(--danger);background:var(--danger-soft);animation:cx-shake .32s var(--ease)}
@keyframes cx-shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* A focal heading for a step page: larger than the dashboard title, same
   weight and tracking. */
.cx-title{margin:0;font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.022em;color:var(--text)}
.cx-lede{margin:8px 0 0;max-width:44ch;text-wrap:balance;font-size:14px;line-height:1.55;color:var(--text-2)}

/* ------------------------------------------------------------ panel card */
.cx-panel{border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.cx-tile{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:17px;background:var(--brand-soft);color:var(--brand)}
.cx-tile svg{width:24px;height:24px}

/* ------------------------------------------------------- instructions */
.cx-instructions-main{background:var(--bg)}
.cx .instruction-list-scroll{scrollbar-color:var(--line-2) transparent}
.cx .instruction-list-scroll::-webkit-scrollbar-thumb{background:var(--line-2)}
.cx-rule{display:flex;align-items:flex-start;gap:12px;color:var(--text-2);font-size:14px;line-height:1.55}
.cx-rule-ico{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:10px;background:var(--brand-soft);color:var(--brand)}
.cx-rule-ico svg{width:16px;height:16px}
.cx-rule > span{padding-top:4px}
.cx .instruction-emphasis{color:var(--text);font-weight:600}
.cx-aside{background:var(--rail)}
:root[data-theme="dark"] .cx-aside{background:var(--sunk)}
.cx-countdown-track{stroke:var(--line)}
.cx-countdown-bar{stroke:var(--brand)}
.cx #timerText{font-size:30px;font-weight:600;letter-spacing:-.025em;color:var(--text);font-variant-numeric:tabular-nums}
.cx-ack{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;transition:opacity .2s var(--ease),border-color .15s var(--ease)}
.cx-ack:hover{border-color:var(--line-2)}
.cx-ack span{font-size:13.5px;font-weight:500;color:var(--text)}
.cx-check{appearance:none;-webkit-appearance:none;display:inline-grid;place-items:center;width:18px;height:18px;flex:none;margin:0;border:1.5px solid var(--line-2);border-radius:6px;background:var(--surface);cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease)}
.cx-check:hover:not(:disabled){border-color:var(--text-3)}
.cx-check:checked{border-color:var(--brand);background:var(--brand)}
.cx-check:checked::after{content:"";width:9px;height:5px;margin-top:-2px;border-left:2px solid var(--on-brand);border-bottom:2px solid var(--on-brand);transform:rotate(-45deg)}
.cx-check:disabled{cursor:not-allowed}
.cx-check:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ------------------------------------------------------- device setup */
.cx .setup-shell-head p{font-size:14px;color:var(--text-2)}
.cx .setup-step-pill{min-width:0;height:26px;padding:0 12px;border-radius:999px;background:var(--brand-soft);box-shadow:none;font-size:12.5px;font-weight:500;color:var(--brand)}
.cx .setup-preview-card{border:1px solid var(--line);border-radius:20px;background:var(--sunk);box-shadow:none}
.cx .preview-video{background:var(--sunk)}
.cx #preflightPermissionOverlay h3{margin-bottom:24px;font-size:19px;font-weight:500;line-height:1.4;letter-spacing:-.015em;color:var(--text)}
.cx #enableDevicesButton{width:64px;height:64px;border:0;background:var(--brand);color:var(--on-brand);box-shadow:0 10px 24px -10px rgba(37,99,235,.6);transform:none;transition:background .15s var(--ease),transform .25s var(--spring)}
.cx #enableDevicesButton:hover{background:var(--brand-hover)}
.cx #enableDevicesButton:active{transform:scale(.94)}
.cx #enableDevicesButton svg{width:30px;height:30px}
.cx #preflightCameraFallback{font-size:15px;color:var(--text-3)}
/* On-video controls: solid (the design has no glass), white on near black,
   danger when off. */
.cx .gm-control{width:44px;height:44px;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 6px 16px -6px rgba(0,0,0,.45);transition:background .15s var(--ease),transform .25s var(--spring)}
.cx .gm-control:active{transform:scale(.9)}
.cx .gm-control.on{background:#1C1E23;color:#fff}
.cx .gm-control.off{background:var(--danger);color:#fff}
.cx .gm-control svg{width:22px;height:22px}
.cx .control-icon-stroke{stroke-width:1.75}
/* Device pickers: the design's filter chip (4.8) and menu (4.16). */
.cx .device-dropdown-trigger{height:40px;gap:8px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);box-shadow:none;color:var(--text-2)!important;font-size:13.5px!important;font-weight:500;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .25s var(--spring)}
.cx .device-dropdown-trigger:hover{background:var(--hover);color:var(--text)!important}
.cx .device-dropdown-trigger:active{transform:scale(.97)}
.cx .device-dropdown-trigger[aria-expanded="true"]{border-color:var(--text-3);color:var(--text)!important}
.cx .device-dropdown-label{font-size:13.5px}
.cx .device-dropdown-icon{width:16px;height:16px;color:var(--text-3)}
.cx .device-dropdown-chevron{width:15px;height:15px;color:var(--text-3);opacity:.7}
.cx .device-dropdown-icon,.cx .device-dropdown-chevron,.cx .setup-icon-stroke{stroke-width:1.75}
.cx .device-dropdown-menu{top:calc(100% + 6px);padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--pop);box-shadow:var(--shadow-pop);animation:cx-menu-in .18s var(--ease)}
.cx .device-dropdown-option{min-height:38px;padding:9px 10px;border-radius:10px;font-size:14px;line-height:1.35;color:var(--text)}
.cx .device-dropdown-option:hover{background:var(--hover);color:var(--text)}
:root[data-theme="dark"] .cx .device-dropdown-option:hover{background:var(--press)}
.cx .device-dropdown-option[aria-selected="true"]{background:var(--brand-soft);color:var(--brand)}
@keyframes cx-menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
/* Check cards: green once passed, red until then (interview.js
   syncIndicators), in the design's tones. */
.cx .setup-side-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:none}
.cx .setup-side-card .text-sm{font-size:14px;font-weight:600;color:var(--text)}
.cx .setup-side-card .text-xs{font-size:12.5px;color:var(--text-2)}
.cx .setup-check-card.is-passed{border-color:color-mix(in srgb,var(--ok) 55%,transparent);background:var(--ok-soft);box-shadow:none}
.cx .setup-check-card.is-failed{border-color:color-mix(in srgb,var(--danger) 45%,transparent);background:var(--danger-soft);box-shadow:none}
.cx .setup-check-card.is-passed .status-dot{--status-dot-success:var(--ok)}
.cx #micLevelBar{background:var(--brand)}
.cx #micLevelBar{border-radius:999px}
.cx #micCheckCard .bg-gray-200{background:var(--line)}
/* Screen share: disabled grey until the devices are on, a brand tile while
   it can be pressed, green once shared. */
.cx #shareScreenButton{width:64px;height:64px;border:0;border-radius:18px;box-shadow:none;transition:background .15s var(--ease),color .15s var(--ease),transform .25s var(--spring)}
.cx #shareScreenButton svg{width:28px;height:28px}
.cx #shareScreenButton:not(:disabled){background:var(--brand);color:var(--on-brand);cursor:pointer;box-shadow:0 10px 24px -10px rgba(37,99,235,.6)}
.cx #shareScreenButton:not(:disabled):hover{background:var(--brand-hover)}
.cx #shareScreenButton:not(:disabled):active{transform:scale(.94)}
.cx #shareScreenButton:disabled{background:var(--sunk);color:var(--text-3);cursor:not-allowed}
.cx #screenShareCard.is-passed #shareScreenButton{background:var(--surface);color:var(--ok);box-shadow:none;cursor:default}
.cx #screenShareSubtitle{margin-bottom:14px;font-size:12.5px;font-weight:500;color:var(--text-2)}
.cx #screenShareLabel{font-size:14px;font-weight:600;color:var(--text)}
.cx #screenShareCard:not(.is-passed) #shareScreenButton:disabled ~ div #screenShareLabel{color:var(--text-3)}
.cx #screenShareCard.is-passed #screenShareLabel{color:var(--ok)}
/* Start: the page's primary action, a 48px pill; quiet until every check
   has passed. */
.cx #joinInterviewButton{min-height:48px;padding:0 24px;border:0;border-radius:999px;box-shadow:none;transform:none;font:600 15px/1 var(--font);transition:background .15s var(--ease),color .15s var(--ease),transform .25s var(--spring),box-shadow .2s var(--ease)}
.cx #joinInterviewButton svg{width:18px;height:18px}
.cx #joinInterviewButton:not(:disabled){background:var(--brand);color:var(--on-brand);cursor:pointer;box-shadow:0 12px 26px -12px rgba(37,99,235,.7)}
.cx #joinInterviewButton:not(:disabled):hover{background:var(--brand-hover)}
.cx #joinInterviewButton:not(:disabled):active{transform:scale(.97)}
.cx #joinInterviewButton:disabled{background:var(--sunk);color:var(--text-3);cursor:not-allowed}

/* -------------------------------------------------------- live interview
   The live view already reads its own --live-* tokens; they now come from
   the design tokens, in both themes. */
.cx #liveStep{
  --live-brand:var(--brand); --live-brand-strong:var(--brand); --live-brand-wash:var(--brand-soft);
  --live-ok:var(--ok); --live-ok-wash:var(--ok-soft);
  --live-warn:var(--warn); --live-warn-wash:var(--warn-soft);
  --live-alarm:var(--danger); --live-alarm-wash:var(--danger-soft);
  --live-ground:var(--bg); --live-surface:var(--bg); --live-inset:var(--rail);
  --live-ink:var(--text); --live-ink-soft:var(--text-2); --live-hairline:var(--line);
  --live-video:var(--sunk); --live-stage:var(--bg);
  --live-stage-ink:var(--text); --live-stage-ink-soft:var(--text-2);
  --live-stage-brand:var(--brand); --live-stage-ok:var(--ok); --live-stage-alarm:var(--danger);
  --live-stage-shadow:0 1px 2px rgba(17,24,39,.05),0 12px 28px -14px rgba(17,24,39,.22);
}
:root[data-theme="dark"] .cx #liveStep{--live-inset:var(--rail);--live-video:var(--pop);--live-stage-shadow:0 12px 28px -14px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04)}
.cx .live-head{padding-left:max(24px,calc(24px + env(safe-area-inset-left)));padding-right:max(24px,calc(24px + env(safe-area-inset-right)))}
.cx :is(.live-stagelabel,.live-clock__value,.voice-copy__state,.self-view__name){font-family:var(--font)}
.cx .live-stagelabel{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.cx .live-clock__value{font-size:20px;font-weight:600;letter-spacing:-.025em}
.cx .live-clock__unit{font-size:12.5px;color:var(--text-3)}
.cx .net-indicator{height:28px;padding:0 10px;font-size:12.5px;font-weight:500}
.cx .stage-tile{border-radius:20px}
.cx .voice-copy__state{font-size:14px;font-weight:600}
.cx .voice-copy__hint{font-size:12.5px}
.cx .caption__who{font-size:12.5px;font-weight:500}
.cx .caption__text{font-size:14.5px}
.cx .live-alert__body{font-size:13.5px}
.cx .live-alert__body strong{font-weight:600}
.cx .live-button{min-height:40px;padding:0 18px;font:500 14px/1 var(--font);transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .25s var(--spring)}
.cx .live-button:active:not(:disabled){transform:scale(.97)}
.cx .live-button svg{width:17px;height:17px}
.cx .live-button--quiet{background:var(--surface);border-color:var(--line-2);color:var(--text)}
.cx .live-button--quiet:hover:not(:disabled){background:var(--hover)}
.cx .live-button--quiet[aria-pressed="true"]{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 50%,transparent);color:var(--warn)}
.cx .live-button--end{background:var(--danger);color:#fff}
.cx .live-button--end:hover:not(:disabled){background:var(--danger);filter:brightness(1.06)}
.cx #liveStep :focus-visible{border-radius:999px}

/* Proctoring notices: one card, the tone from the design's semantic pairs. */
.cx #warningToast{border:0;border-radius:20px;background:var(--pop);color:var(--text);box-shadow:var(--shadow-pop);font-size:15px;font-weight:600;letter-spacing:-.01em}
.cx #warningToast:is(.security-warning-red,.security-warning-rose){background:var(--danger-soft);color:var(--danger)}
.cx #warningToast:is(.security-warning-orange,.security-warning-amber,.security-warning-peach,.security-warning-yellow){background:var(--warn-soft);color:var(--warn)}
.cx #warningToast.security-warning-lime{background:var(--ok-soft);color:var(--ok)}
.cx #warningToast.security-warning-violet{background:var(--violet-soft);color:var(--violet)}
.cx #warningToast.security-warning-blue{background:var(--info-soft);color:var(--info)}
.cx #warningToast.security-warning-cyan{background:var(--teal-soft);color:var(--teal)}
:root[data-theme="dark"] .cx #warningToast[class*="security-warning-"]{box-shadow:var(--shadow-pop),inset 0 0 0 1px currentColor}

/* ---------------------------------------------------------------- finish */
.cx.result{background:var(--bg);color:var(--text);font-family:var(--font);font-feature-settings:normal}
.cx .result-card{border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:none}
.cx .result-mark{width:52px;height:52px;border-radius:17px;background:var(--ok-soft);color:var(--ok)}
.cx .result-mark svg{width:24px;height:24px}
.cx.result[data-outcome="unavailable"] .result-mark{background:var(--warn-soft);color:var(--warn)}
.cx.result[data-outcome="closed"] .result-mark{background:var(--sunk);color:var(--text-2)}
.cx .result-title{margin-top:20px;font-family:var(--font);font-size:24px;font-weight:600;letter-spacing:-.022em;color:var(--text)}
.cx .result-message{font-size:14.5px;line-height:1.6;color:var(--text-2)}
.cx .result-actions{border-top-color:var(--line)}
.cx .result-note{font-size:13px;color:var(--text-2)}
.cx .result-button svg{width:17px;height:17px}

/* ------------------------------------------------------ not open yet */
.cx .scheduled-card{border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:none}
.cx-when{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;box-sizing:border-box;padding:14px 18px;border-radius:16px;background:var(--sunk)}
.cx-when-label{font-size:13px;font-weight:500;color:var(--text-2)}
.cx #scheduledActivationTime{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--text);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .cx *,.cx *::before,.cx *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}