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

  /* shell.css — the shared app shell (chrome, lobby skeleton, deck container + video).
     Brand tokens (:root vars: --accent, --accent-soft, --navy, --cream, the --ui/--brand/
     --display/--serif fonts, the --radius-* / --lobby-left-bg chrome knobs) AND every slide
     (sd-*) style are per-school — defined in /static/schools/<slug>/theme.css, which is
     <link>ed after this file so its values win. Sensible fallbacks live at each use site
     via var(--x, fallback) so the shell still renders if a token is missing. */
  html, body { height: 100%; }
  body {
    font-family: var(--ui);
    background: #000;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }
  #root { height: 100vh; }

  /* ── APP SHELL ── */
  .app {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .app.dark {
    --bg: oklch(0.16 0.006 264);
    --surface: oklch(0.21 0.007 264);
    --surface-2: oklch(0.255 0.008 264);
    --border: oklch(0.30 0.008 264);
    --text: oklch(0.96 0.003 264);
    --text-dim: oklch(0.70 0.006 264);
    --text-faint: oklch(0.56 0.006 264);
    background: var(--bg);
    color: var(--text);
  }

  /* ── TOP BAR ── */
  .topbar {
    flex: none;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 13px;
    color: var(--text-dim);
  }
  .meet-title {
    display: flex; align-items: center; gap: 9px;
    font-weight: 500; color: var(--text); letter-spacing: .01em;
  }
  .dot-live {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-soft);
    box-shadow: 0 0 0 0 oklch(0.55 0.20 26 / .5);
    animation: pulse 2.2s infinite;
    flex-shrink: 0;
  }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 oklch(0.55 0.20 26 / .45); }
    70%  { box-shadow: 0 0 0 7px oklch(0.55 0.20 26 / 0); }
    100% { box-shadow: 0 0 0 0 oklch(0.55 0.20 26 / 0); }
  }
  .meet-meta { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
  .meet-meta .sep { width: 1px; height: 13px; background: var(--border); }

  /* ── STAGE ROW ── */
  .stage-row {
    flex: 1;
    display: flex;
    min-height: 0;
    padding: 0 14px 6px;
    gap: 14px;
  }
  .stage {
    flex: 1;
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
  }
  .share-frame {
    position: relative;
    /* Largest 16:9 box that fits the stage area, so the card *is* the slide
       (the slide deck is authored at 16:9). Without this the card filled the
       full stage area and the cream .sd-root showed as letterbox bands above
       and below the 16:9 .tamu-stage. Leftover space is the dark app bg. */
    width: min(100cqw, 177.7778cqh);
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 1px 0 var(--border) inset, 0 20px 50px oklch(0 0 0 / .45);
    display: flex; align-items: center; justify-content: center;
  }


  /* Right pane: participant tiles on top, optional chat stacked below. The pane owns the
     300px width; the tiles take their intrinsic height and chat takes the rest. */
  .right-pane {
    flex: none;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
  }
  .right-pane > .people-rail { width: 100%; }
  /* Tiles-only (chat closed): the rail fills the column. With chat open: hide the
     tiles entirely and let the chat panel own the full pane — stacking the two read
     cramped, and the tiles add nothing while you're typing. */
  .right-pane:not(.with-chat) > .people-rail { flex: 1; }
  .right-pane.with-chat > .people-rail { display: none; }
  .right-pane > .chat { flex: 1; width: 100%; min-height: 0; }

  /* ── CHAT PANEL ── */
  .chat {
    flex: none;
    width: 360px;
    background: var(--surface);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .chat:not(.chat-open) { display: none; }
  .chat-head {
    flex: none;
    height: 52px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 12px 0 18px;
    font-size: 15px; font-weight: 500;
    border-bottom: 1px solid var(--border);
  }
  .chat-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 16px;
  }
  .chat-empty {
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; gap: 14px;
    color: var(--text-faint);
  }
  .chat-empty-i {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
  }
  .chat-empty-i svg { stroke: var(--text-dim); fill: none; stroke-width: 1.7; }
  .chat-empty > p { font-size: 12.5px; max-width: 230px; line-height: 1.55; }

  /* program selector (lobby) */
  .program-select {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: var(--ui); font-size: 13px;
    background: var(--surface-2); color: var(--text);
    cursor: pointer; outline: none; width: 100%;
    transition: box-shadow .15s;
  }
  .program-select:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
  .btn-start-call {
    margin-top: 14px;
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius, 0);
    border: none; cursor: pointer;
    background: var(--accent);
    color: #fefefe;
    font-family: var(--btn-font, var(--display)); font-size: 15px; font-weight: var(--btn-weight, 500);
    text-transform: var(--btn-transform, uppercase); letter-spacing: var(--btn-spacing, .06em);
    transition: background .15s, opacity .15s;
  }
  .btn-start-call:hover { background: var(--accent-soft); }

  /* messages */
  .chat-list { display: flex; flex-direction: column; gap: 4px; }
  .msg { display: flex; flex-direction: column; align-items: flex-start; margin-top: 10px; }
  .msg:first-child { margin-top: 0; }
  .msg-self { align-items: flex-end; }
  .msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; padding: 0 2px; }
  .msg-from { font-size: 11.5px; font-weight: 600; color: var(--text); }
  .msg-self .msg-from { color: var(--text-dim); }
  .msg-time { font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
  .msg-bubble {
    max-width: 290px;
    padding: 9px 13px;
    border-radius: 13px;
    font-size: 12px; line-height: 1.45;
    background: var(--surface-2);
    color: var(--text);
    border-top-left-radius: 4px;
  }
  .msg-self .msg-bubble {
    background: var(--accent);
    color: #fff;
    border-top-left-radius: 13px;
    border-top-right-radius: 4px;
  }
  /* markdown inside bubbles */
  .msg-bubble p { margin-bottom: 6px; }
  .msg-bubble p:last-child { margin-bottom: 0; }
  .msg-bubble ul, .msg-bubble ol { padding-left: 18px; margin-bottom: 6px; }
  .msg-bubble li { margin-bottom: 2px; }
  .msg-bubble strong { font-weight: 600; }
  /* typing dots */
  .msg-typing { display: flex; gap: 4px; padding: 12px 14px; }
  .msg-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-faint);
    animation: blink 1.3s infinite both;
  }
  .msg-typing span:nth-child(2) { animation-delay: .2s; }
  .msg-typing span:nth-child(3) { animation-delay: .4s; }
  @keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

  /* chat input */
  .chat-input {
    flex: none;
    display: flex; align-items: center; gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border);
  }
  .chat-input input {
    flex: 1;
    height: 42px;
    border: none;
    border-radius: 21px;
    padding: 0 16px;
    font-family: var(--ui); font-size: 13.5px;
    background: var(--surface-2);
    color: var(--text);
    outline: none;
    transition: box-shadow .15s;
  }
  .chat-input input::placeholder { color: var(--text-faint); }
  .chat-input input:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
  .chat-input input:disabled { opacity: 0.5; cursor: not-allowed; }
  .send-btn {
    flex: none;
    width: 42px; height: 42px; border-radius: 50%;
    border: none; cursor: pointer;
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .1s;
  }
  .send-btn svg { stroke: none; fill: var(--text-faint); transition: fill .2s; }
  .send-btn.on { background: var(--accent); }
  .send-btn.on svg { fill: #fff; }
  .send-btn:active { transform: scale(.92); }
  .send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* ── PARTICIPANT RAIL (Google-Meet-style tiles, replaces chat panel) ── */
  .people-rail {
    flex: none;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
  }
  .ptile {
    flex: 1;
    position: relative;
    min-height: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 0 var(--border) inset, 0 14px 36px oklch(0 0 0 / .35);
    transition: border-color .18s, box-shadow .18s,
                flex-grow .55s cubic-bezier(.4, 0, .2, 1),
                margin .55s cubic-bezier(.4, 0, .2, 1),
                opacity .4s ease, transform .45s cubic-bezier(.4, 0, .2, 1);
  }
  /* Claire's tile on a normal finish: collapse its height to 0 (flex-grow 1→0, basis 0)
     and fade/scale out. The negative margin cancels the column gap so the remaining "You"
     tile reaches the top of the rail. overflow:hidden keeps the avatar from spilling as
     the tile shrinks. */
  .ptile-leaving {
    flex: 0 0 0;
    min-height: 0;
    margin-bottom: -14px;
    opacity: 0;
    transform: scale(.95);
    pointer-events: none;
  }
  /* "You" tile after Claire leaves: locked to half the rail (minus half the 14px gap) so it
     slides up into Claire's vacated slot at its original size instead of growing to fill. */
  .ptile-stay { flex: 0 0 calc(50% - 7px); }
  .ptile-speaking {
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent-soft), 0 0 26px oklch(0.55 0.20 26 / .30);
  }
  .ptile-avatar {
    width: 84px; height: 84px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ui); font-weight: 600; font-size: 30px;
    color: #fff; letter-spacing: .02em; user-select: none;
  }
  .ptile-speaking .ptile-avatar { animation: spk 1.7s ease-in-out infinite; }
  @keyframes spk {
    0%, 100% { box-shadow: 0 0 0 0 oklch(0.82 0 0 / .55); }
    50%      { box-shadow: 0 0 0 11px oklch(0.82 0 0 / 0); }
  }
  .ptile-name {
    position: absolute; left: 12px; bottom: 12px;
    display: flex; align-items: center; gap: 7px;
    max-width: calc(100% - 24px);
    padding: 5px 11px; border-radius: 8px;
    background: oklch(0 0 0 / .5);
    backdrop-filter: blur(6px);
    font-family: var(--ui); font-size: 12.5px; font-weight: 500; color: #fff;
    letter-spacing: .01em;
  }
  .ptile-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ptile-mic {
    position: absolute; top: 12px; right: 12px;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: oklch(0 0 0 / .5); backdrop-filter: blur(6px);
  }
  .ptile-mic svg { stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .ptile-mic-off { background: var(--accent); }
  /* "Thinking" — shows on the presenter tile in the gap after the student speaks
     and before the presenter starts talking. Pulses in brightness rhythmically. */
  .ptile-thinking {
    position: absolute; top: 12px; right: 12px;
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: var(--radius-pill, 999px);
    background: oklch(0 0 0 / .5); backdrop-filter: blur(6px);
    font-family: var(--ui); font-size: 12px; font-weight: 500; color: #fff;
    letter-spacing: .01em; pointer-events: none;
    animation: thinkPulse 1.6s ease-in-out infinite;
  }
  .ptile-thinking svg { stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  @keyframes thinkPulse {
    0%, 100% { opacity: .55; filter: brightness(.9); }
    50%      { opacity: 1;   filter: brightness(1.25); }
  }
  /* "Claire has left the meeting" — fixed bottom-right toast (was a top-of-rail notice).
     Decoupled from the rail so the tiles reflow underneath it; slides up + fades in. */
  .rail-toast {
    position: fixed;
    right: 22px; bottom: 22px;
    z-index: 100;
    display: flex; align-items: center; gap: 9px;
    padding: 13px 16px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: 0 10px 30px oklch(0 0 0 / .4);
    font-family: var(--ui); font-size: 13px; font-weight: 500;
    color: var(--text-dim);
    letter-spacing: .01em;
    animation: railToastIn .4s cubic-bezier(.2, .7, .2, 1) both;
  }
  .rail-toast::before { content: "\24d8"; font-size: 15px; opacity: .8; }
  @keyframes railToastIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── CONTROL BAR ── */
  .controls {
    flex: none;
    height: 78px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 22px;
  }
  .controls-left { font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 11px; font-variant-numeric: tabular-nums; }
  .cl-sep { width: 1px; height: 14px; background: var(--border); }
  /* Current-program label in the in-call bottom bar. Remounts (key=slug) on a mid-call switch,
     replaying a brief cardinal highlight so the change registers visually. */
  .cl-program {
    color: var(--text); font-weight: 600;
    padding: 2px 9px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface-2);
    animation: clProgramIn .9s ease;
  }
  @keyframes clProgramIn {
    0%   { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 30%, var(--surface-2)); color: #fff; }
    100% { border-color: var(--border); background: var(--surface-2); color: var(--text); }
  }
  .cl-code { color: var(--text-faint); }
  .controls-center { display: flex; align-items: flex-start; gap: 6px; justify-self: center; }
  .controls-right { display: flex; align-items: center; gap: 10px; justify-self: end; }

  /* Zoom-style stacked control: icon pill on top, text label beneath. State
     colors (mute / active / leave) live on the inner .ctrl-ico pill so the
     label below stays legible. */
  .ctrl {
    border: none; cursor: pointer; background: transparent;
    padding: 5px 10px 4px;
    border-radius: 12px;
    display: flex; flex-direction: column; align-items: center;
    gap: 5px;
    transition: background .18s;
  }
  .ctrl-ico {
    height: 44px; width: 44px;
    border-radius: 22px;
    background: var(--surface-2);
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, color .18s, transform .1s;
  }
  .ctrl svg { stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .ctrl-label {
    font-family: var(--ui);
    font-size: 11px; font-weight: 600; line-height: 1;
    letter-spacing: .01em;
    color: var(--text-dim);
    transition: color .18s;
  }
  .ctrl:hover .ctrl-ico { background: var(--border); }
  .ctrl:hover .ctrl-label { color: var(--text); }
  .ctrl:active .ctrl-ico { transform: scale(.92); }

  .ctrl-off .ctrl-ico { background: var(--accent); color: #fff; }
  .ctrl-off:hover .ctrl-ico { background: var(--accent-soft); }
  .ctrl-active .ctrl-ico { background: oklch(0.55 0.10 250); color: #fff; }
  .ctrl-active:hover .ctrl-ico { background: oklch(0.60 0.10 250); }
  .ctrl-danger .ctrl-ico { background: var(--accent); color: #fff; }
  .ctrl-danger:hover .ctrl-ico { background: oklch(0.50 0.21 26); }

  /* "Book meeting" — a peer of the other control-bar buttons (.ctrl icon-pill + label),
     parked at the right (.controls-right). Only accent is a 2px Zoom-blue ring on the icon
     pill; the label matches the other controls. Hover fills the pill blue with a white icon. */
  .bm-ring .ctrl-ico {
    background: var(--surface-2);
    border: 2px solid #2d8cff;
    color: var(--text);
  }
  .bm-ring:hover .ctrl-ico { background: #2d8cff; border-color: #2d8cff; color: #fff; }

  /* ── LEAVE SCREEN ── */
  .leave-screen {
    position: fixed; inset: 0; z-index: 50;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    animation: fade .25s ease;
  }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  .leave-card { text-align: center; }
  .leave-card h2 { font-family: var(--serif); font-weight: 400; font-size: 32px; color: var(--text); margin-bottom: 8px; }
  .leave-card p  { color: var(--text-dim); font-size: 14px; margin-bottom: 28px; }
  .leave-actions { display: flex; gap: 12px; justify-content: center; }
  .btn-primary, .btn-ghost {
    height: 44px; padding: 0 24px; border-radius: 22px;
    font-family: var(--ui); font-size: 14px; font-weight: 500; cursor: pointer;
    border: 1px solid transparent;
  }
  .btn-primary { background: var(--accent); color: #fff; border: none; }
  .btn-primary:hover { background: var(--accent-soft); }
  .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
  .btn-ghost:hover { background: var(--surface); }

  .guided-prompt {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 45;
    width: min(520px, calc(100vw - 40px));
    padding: 26px 30px 24px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 24px 60px oklch(0 0 0 / .28);
    animation: fade .18s ease;
  }
  .guided-prompt-close {
    position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px;
    border: none; border-radius: 17px;
    background: transparent;
    color: var(--text-faint);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .guided-prompt-close:hover { background: var(--surface-2); color: var(--text); }
  .guided-prompt-close svg { stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .guided-prompt h2 {
    margin: 0 0 10px;
    padding-right: 38px;
    color: var(--text);
    font-family: var(--ui);
    font-size: 21px;
    font-weight: 600;
  }
  .guided-prompt p {
    margin: 0 0 22px;
    color: var(--text-dim);
    font-size: 15px;
    line-height: 1.5;
  }
  .guided-prompt-actions { display: flex; gap: 12px; justify-content: flex-end; }
  .guided-prompt .btn-primary,
  .guided-prompt .btn-ghost { height: 44px; padding: 0 22px; border-radius: 22px; font-size: 14.5px; }

  /* ── ELIGIBILITY FILTER MODAL ──
     A two-page fit form that opens once early in a guided USC call. Same visual world as
     .guided-prompt (dark in-call surface). Selecting a row auto-advances; page 2's selection
     auto-submits. Backdrop is flat (no blur), matching the rest of the shell. */
  .elig-overlay {
    position: fixed; inset: 0; z-index: 55;
    background: oklch(0 0 0 / .55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: fade .18s ease;
  }
  .elig-modal {
    position: relative;
    width: min(520px, calc(100vw - 40px));
    padding: 26px 30px 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 24px 60px oklch(0 0 0 / .28);
    overflow: hidden;
    animation: fade .18s ease;
  }
  .elig-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
  .elig-step {
    font-family: var(--ui); font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
    color: var(--text-faint); text-transform: uppercase;
  }
  .elig-modal h2 {
    margin: 0 0 18px;
    color: var(--text);
    font-family: var(--ui); font-size: 20px; font-weight: 600; line-height: 1.3;
  }
  /* Horizontal two-page track: 200% wide, slides left by 50% for page 2. */
  .elig-viewport { overflow: hidden; }
  .elig-track {
    display: flex; width: 200%;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  }
  .elig-track.p2 { transform: translateX(-50%); }
  .elig-page { width: 50%; flex: 0 0 50%; box-sizing: border-box; padding-right: 2px; }
  .elig-opts { display: flex; flex-direction: column; gap: 10px; }
  .elig-opt {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 14px 16px;
    border: 1px solid var(--border); border-radius: 11px;
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--ui);
    transition: border-color .14s ease, background .14s ease, transform .06s ease;
  }
  .elig-opt:hover { border-color: var(--text-faint); }
  .elig-opt:active { transform: scale(.992); }
  .elig-opt.sel {
    border-color: var(--accent);
    background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  }
  .elig-opt-label { display: block; font-size: 15.5px; font-weight: 600; }
  .elig-opt-sub   { display: block; margin-top: 2px; font-size: 13px; color: var(--text-dim); }
  .elig-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 20px; min-height: 34px;
  }
  .elig-back {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-dim); font-family: var(--ui); font-size: 14px; font-weight: 500;
    padding: 6px 4px; display: inline-flex; align-items: center; gap: 6px;
  }
  .elig-back:hover { color: var(--text); }
  .elig-back svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .elig-skip {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-faint); font-family: var(--ui); font-size: 13px;
    text-decoration: underline; text-underline-offset: 3px;
    padding: 6px 4px; margin-left: auto;
  }
  .elig-skip:hover { color: var(--text-dim); }

  /* ── ALTERNATIVES PALETTE ──
     Shown after a mismatch verdict: real programs the student qualifies for, switchable in place.
     Reuses .elig-overlay / .elig-modal / .elig-head / .elig-foot; a touch wider and scrollable
     since it can list several options, all presented as equal peers (no "best match" — the two
     fit answers capture no topic preference, so there's no basis to rank one program above another). */
  .alt-modal { width: min(560px, calc(100vw - 40px)); }
  .alt-body { max-height: min(58vh, 460px); overflow-y: auto; margin: 6px -6px 0; padding: 0 6px; }
  .alt-lede {
    margin: 2px 0 16px; color: var(--text-dim);
    font-family: var(--ui); font-size: 14px; line-height: 1.5;
  }
  .alt-opt {
    display: block; width: 100%; text-align: left; cursor: pointer;
    position: relative;
    padding: 13px 16px; margin-bottom: 10px;
    border: 1px solid var(--border); border-radius: 11px;
    background: var(--surface-2);
    color: var(--text); font-family: var(--ui);
    transition: border-color .14s ease, background .14s ease, transform .06s ease;
  }
  .alt-opt:hover { border-color: var(--text-faint); }
  .alt-opt:active { transform: scale(.992); }
  .alt-opt-name  { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
  .alt-opt-blurb { display: block; margin-top: 3px; font-size: 13px; color: var(--text-dim); line-height: 1.4; }

  /* ── WALKTHROUGH OFFER MODAL ──
     Opt-in registration hand-off shown after the presenter wraps up. Same visual world as the
     eligibility / guided-prompt modals (dark surface card over a flat backdrop, primary + ghost
     actions) — replaces the old bare floating pill so the hand-off reads as an intentional dialog.
     Renders inside .elig-overlay (shared backdrop + centering). */
  .wt-modal {
    position: relative;
    width: min(460px, calc(100vw - 40px));
    padding: 28px 30px 24px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 24px 60px oklch(0 0 0 / .28);
    animation: fade .18s ease;
  }
  .wt-eyebrow {
    display: block; margin-bottom: 10px;
    font-family: var(--ui); font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
    color: var(--accent-soft); text-transform: uppercase;
  }
  .wt-title {
    margin: 0 0 10px;
    color: var(--text);
    font-family: var(--ui); font-size: 21px; font-weight: 600; line-height: 1.3;
  }
  .wt-body {
    margin: 0 0 24px;
    color: var(--text-dim);
    font-family: var(--ui); font-size: 15px; line-height: 1.55;
  }
  .wt-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
  .wt-actions .btn-primary,
  .wt-actions .btn-ghost { height: 44px; padding: 0 22px; border-radius: 22px; font-size: 14.5px; }
  .wt-actions .btn-primary:disabled,
  .wt-actions .btn-ghost:disabled { opacity: .55; cursor: default; }

  /* ── BOOK MEETING (Calendly) MODAL ── */
  .book-meeting-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: oklch(0 0 0 / .55);
    display: flex; align-items: center; justify-content: center;
    animation: fade .18s ease;
  }
  .book-meeting-modal {
    position: relative;
    width: min(960px, calc(100vw - 40px));
    height: min(760px, calc(100vh - 60px));
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px oklch(0 0 0 / .35);
    overflow: hidden;
  }
  .book-meeting-modal .guided-prompt-close { z-index: 1; }
  .book-meeting-frame { width: 100%; height: 100%; border: 0; display: block; }

  /* ── LOBBY / PRE-JOIN SCREEN ── */
  .lobby {
    /* lobby carries its own LIGHT palette, independent of the dark in-call app */
    --bg: var(--cream);                       /* warm off-white */
    --surface: #ffffff;                       /* card */
    --surface-2: oklch(0.975 0.002 78);       /* faint fill for inputs/selects */
    --border: oklch(0.89 0.004 78);
    --text: var(--navy);
    --text-dim: oklch(0.44 0.010 78);
    --text-faint: oklch(0.60 0.008 78);
    --blue: var(--accent-blue);                      /* accent line on the maroon panel */
    color: var(--text);
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: var(--cream);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: fade .3s ease;
  }
  .lobby-card {
    width: 100%; max-width: 880px;
    /* Locked height so mounting the pronunciation box doesn't resize the lobby.
       The form column is centered, so fields just re-center within this fixed box
       instead of growing it (and stretching the maroon panel). Sized to the tallest
       state: name + 3 pronunciation pills + custom input. */
    min-height: 593px;
    display: grid; grid-template-columns: 1.04fr .96fr;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 0);
    overflow: hidden;
    box-shadow: 0 1px 2px oklch(0.12 0.014 32 / .04), 0 18px 50px oklch(0.12 0.014 32 / .08);
  }
  /* Left: brand identity panel. White text/chips assume a dark panel. Schools set
     --lobby-left-bg (a solid brand color) in theme.css; a photo-hero school can add a
     `.lobby-left { background-image: ... }` override there. */
  .lobby-left {
    display: flex; flex-direction: column;
    background: var(--lobby-left-bg, var(--navy));
    background-size: cover; background-position: center;
  }
  .lobby-logobar {
    flex: none; background: transparent; padding: 26px 42px 8px;
    display: flex; align-items: center;
  }
  .lobby-logo { height: 54px; width: auto; display: block; }
  .lobby-left-body {
    flex: 1; display: flex; flex-direction: column;
    padding: 34px 42px 32px;
  }
  /* margin-top:auto here pairs with the one on .lobby-share: the spare height in
     the left column splits evenly above the title and above the share block, so
     the title/rule/desc cluster sits lower and the gap below the subheading shrinks. */
  .lobby-left .lobby-title { color: #fff; margin-top: auto; text-transform: uppercase; }
  .lobby-rule { height: 3px; width: 100%; background: var(--lobby-rule, var(--accent)); border-radius: var(--radius, 0); margin-top: 24px; }
  .lobby-left .lobby-desc { color: rgba(255,255,255,.92); }
  .lobby-left .lobby-share-label { color: rgba(255,255,255,.55); }
  .lobby-left .lobby-chip {
    border-color: rgba(255,255,255,.20);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.82);
  }
  .lobby-left .lobby-chip svg { stroke: rgba(255,255,255,.6); }
  .lobby-left .lobby-foot { border-top-color: rgba(255,255,255,.14); color: rgba(255,255,255,.5); }
  /* Right: the get-started form (warm neutral) */
  .lobby-right {
    display: flex; flex-direction: column; justify-content: center;
    padding: 46px 42px 40px;
    background: #fff;
  }
  .lobby-title {
    font-family: var(--display); font-weight: 500; font-size: 40px;
    line-height: 1.02; letter-spacing: 0; color: var(--text);
  }
  /* left-panel description of what the experience is */
  .lobby-desc {
    font-size: 14px; line-height: 1.6; color: var(--text-dim);
    margin-top: 14px; max-width: min(54ch, 100%);
  }
  /* right-panel form heading */
  .lobby-eyebrow {
    font-family: var(--ui); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent); font-weight: 700;
  }
  .lobby-sub {
    font-size: 13.5px; line-height: 1.55; color: var(--text-dim);
    margin-top: 6px; margin-bottom: 26px;
  }
  .lobby-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
  .lobby-label {
    font-family: var(--ui); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-faint); font-weight: 600;
  }
  .lobby-input {
    height: 46px; border: 1px solid var(--border); border-radius: var(--radius, 0);
    padding: 0 14px; font-family: var(--ui); font-size: 14.5px;
    background: var(--surface-2); color: var(--text);
    outline: none; transition: box-shadow .15s;
  }
  .lobby-input::placeholder { color: var(--text-faint); }
  .lobby-input:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
  .pronounce-box {
    display: flex; flex-direction: column; gap: 9px; margin: -4px 0 18px;
    animation: pron-reveal .34s cubic-bezier(.2,.7,.2,1);
  }
  @keyframes pron-reveal {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .pronounce-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pronounce-chip {
    min-height: 38px; border: 1px solid var(--border); border-radius: var(--radius, 0);
    background: var(--surface-2); color: var(--text-dim);
    font-family: var(--ui); font-size: 12.5px; font-weight: 600;
    cursor: pointer; transition: border-color .15s, background .15s, color .15s, opacity .15s;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 9px;
  }
  .pronounce-chip:hover { border-color: var(--accent-soft); color: var(--text); }
  .pronounce-chip-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, #fff); color: var(--accent); }
  .pronounce-chip:disabled {
    opacity: .4; cursor: not-allowed;
    border-color: var(--border); background: var(--surface-2); color: var(--text-dim);
  }
  .pronounce-chip-skel {
    min-height: 38px; border-radius: var(--radius, 0);
    background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--accent) 9%, var(--surface-2)) 50%, var(--surface-2) 75%);
    background-size: 200% 100%; animation: pron-shimmer 1.3s ease-in-out infinite;
  }
  @keyframes pron-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .pronounce-status { min-height: 16px; font-size: 12px; color: var(--text-faint); }
  .pronounce-status.err { color: var(--accent-soft); }
  .lobby .program-select { padding: 12px 14px; font-size: 14.5px; border-radius: var(--radius, 0); }
  .lobby-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
  .lobby-actions .btn-start-call { margin-top: 0; height: 48px; font-size: 14.5px; }
  .lobby-actions .btn-start-call:disabled { opacity: .45; cursor: not-allowed; }
  .lobby-hint { font-size: 12px; color: var(--text-faint); text-align: center; margin-top: 14px; }
  .lobby-focus { font-size: 12px; color: var(--accent-soft); text-align: center; margin-top: 14px; }

  /* Two-stage form: progress dots (rendered once, above the keyed stage) + a keyed
     cross-fade on the right column only. The card height is locked (.lobby-card
     min-height), so switching stages re-centers content instead of resizing the card. */
  .lobby-steps { display: flex; gap: 7px; margin-bottom: 20px; }
  .lobby-step-dot {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--border); transition: background .25s, transform .25s;
  }
  .lobby-step-dot.on { background: var(--accent); transform: scale(1.08); }
  .lobby-stage { display: flex; flex-direction: column; animation: lobby-stage-in .32s cubic-bezier(.2,.7,.2,1); }
  @keyframes lobby-stage-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .lobby-back {
    align-self: flex-start; background: none; border: 0; padding: 0; margin-bottom: 14px;
    cursor: pointer; font-family: var(--ui); font-size: 12px; font-weight: 600;
    letter-spacing: .04em; color: var(--text-faint); transition: color .15s;
  }
  .lobby-back:hover { color: var(--accent); }

  /* Share block — sits in the left panel, pushed toward the bottom */
  .lobby-share { margin-top: auto; padding-top: 28px; }
  .lobby-share-label {
    display: block; font-family: var(--ui); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-faint); font-weight: 600;
  }
  .lobby-share-sub { display: block; font-size: 12px; color: var(--text-dim); margin-top: 4px; }
  .lobby-channels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .lobby-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border: 1px solid var(--border); border-radius: var(--radius-pill, 0);
    background: var(--surface-2); color: var(--text-dim);
    font-family: var(--ui); font-size: 12px; line-height: 1; white-space: nowrap;
  }
  .lobby-chip svg { width: 14px; height: 14px; stroke: var(--text-faint); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .lobby-url-share {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px; padding: 8px 9px 8px 12px;
    border: 1px solid rgba(255,255,255,.20); border-radius: var(--radius, 0);
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.84);
    max-width: 100%;
  }
  .lobby-url-text {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--ui); font-size: 12px; letter-spacing: .01em;
  }
  .lobby-url-copy {
    flex: none; height: 28px; padding: 0 10px;
    border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius, 0);
    background: rgba(255,255,255,.12); color: #fff;
    font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; cursor: pointer;
  }
  .lobby-url-copy:hover { background: rgba(255,255,255,.18); }

  /* Always-on footer — anchored at the very bottom of the left panel */
  .lobby-foot {
    display: flex; align-items: center; gap: 7px;
    margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border);
    font-size: 11px; letter-spacing: .04em; color: var(--text-faint);
  }
  .lobby-foot-dot {
    width: 5px; height: 5px; border-radius: 999px; background: var(--accent);
    opacity: .55; flex: none; animation: footPulse 2.6s ease-in-out infinite;
  }
  @keyframes footPulse { 0%, 100% { opacity: .25; } 50% { opacity: .6; } }

  /* ── LOBBY — PREVIEW VARIANT (?lobby=preview) ─────────────────────────────
     Opt-in Meet-style pre-join. Reuses the .lobby light palette + every form
     control (.lobby-input / .program-select / .pronounce-* / .btn-start-call),
     so only the CARD LAYOUT, the left 16:9 preview "screen", and the copy are
     new here. The root carries both `.lobby lobbyp`, so .lobby-scoped rules
     (palette, .lobby .program-select padding) still apply; .lobbyp-* overrides
     win by source order. The classic .lobby markup is untouched. */
  .lobbyp-card {
    max-width: 1140px; min-height: 620px;
    grid-template-columns: 1.32fr .78fr;   /* wider preview | form */
  }
  /* Left: warm neutral mat so the cream cover slide reads as a framed screen. */
  .lobbyp-left {
    display: flex; flex-direction: column; gap: 15px;
    padding: 28px 30px 30px; background: #EEEBE3;
  }
  .lobbyp-logobar { display: flex; align-items: center; height: 30px; }
  .lobbyp-logobar .lobby-logo { height: 27px; }
  .lobbyp-screen {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: 14px; overflow: hidden; isolation: isolate;
    background: var(--cream);
    /* Pairs with the auto margin on .lobbyp-about: the column's spare height splits
       evenly above the screen and below the about block, centering the screen+about
       cluster between the logo and the panel bottom (not jammed under the logo). */
    margin-top: auto;
    /* Inset hairline instead of a real border — a bordered + rounded + clipped
       full-bleed image fringes ("corner bleed") at the corners; an inset ring
       follows the radius cleanly. */
    box-shadow: 0 0 0 1px rgba(29,26,23,.07) inset,
                0 14px 34px rgba(29,26,23,.18), 0 2px 6px rgba(29,26,23,.08);
  }
  .lobbyp-screen .sd-root { border-radius: inherit; }
  /* One-time boot spinner over the preview (first render only). Cream fill covers
     the cover until it fades out; sits above the control overlays while active. */
  .lobbyp-loading {
    position: absolute; inset: 0; z-index: 6; border-radius: inherit;
    display: flex; align-items: center; justify-content: center;
    /* Near-black so it reads as a live slide loading in. */
    background: #0d0b0b; transition: opacity .45s ease;
  }
  .lobbyp-loading.is-done { opacity: 0; pointer-events: none; }
  .lobbyp-spinner {
    width: 34px; height: 34px; border-radius: 999px;
    border: 3px solid rgba(255,255,255,.18);
    border-top-color: var(--gold, #fff);   /* gold where a school defines it (USC); white fallback (TAMU/BU) */
    animation: lobbyp-spin .8s linear infinite;
  }
  @keyframes lobbyp-spin { to { transform: rotate(360deg); } }
  /* "About this session" — subheading + dynamic first-person summary. margin-bottom
     auto pairs with the screen's margin-top auto to keep the screen+about cluster
     vertically centered between the logo and the panel bottom. */
  .lobbyp-about { display: flex; flex-direction: column; gap: 6px; margin-bottom: auto; margin-left: 10px; }
  .lobbyp-about-h {
    font-family: var(--ui); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent); font-weight: 700;
  }
  .lobbyp-about-body {
    font-size: 13.5px; line-height: 1.55; color: var(--text);
  }
  /* Floating session-control dock (mic + captions) — a glass bar that sits ON TOP
     of the deck, not part of it: dark translucent, blurred, lifted by a shadow.
     bottom-center. z-index clears the cover's own layers (cov-body z:2, cov-logo z:3). */
  .lobbyp-controls {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 6px; padding: 6px;
    border-radius: 999px; z-index: 5;
    /* Light frosted tray — lifts off the dark deck instead of blending into it. */
    background: rgba(255,255,255,.28);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 10px 26px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.45) inset;
  }
  .lobbyp-ctl {
    width: 36px; height: 36px; border-radius: 999px; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 1px 3px rgba(29,26,23,.18);
    transition: background .15s, transform .1s;
  }
  .lobbyp-ctl:hover { background: #fff; }
  .lobbyp-ctl:active { transform: scale(.92); }
  .lobbyp-ctl svg {
    width: 18px; height: 18px; fill: none; stroke: var(--accent);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  /* Pressed: cardinal fill (mic muted / captions on). */
  .lobbyp-ctl.is-active { background: var(--accent); border-color: var(--accent); }
  .lobbyp-ctl.is-active:hover { background: var(--accent-soft); }
  .lobbyp-ctl.is-active svg { stroke: #fff; }
  /* Ornamental kebab (top-right). Bare bright dots on the deck — no tray. Decorative. */
  .lobbyp-menu {
    position: absolute; top: 10px; right: 10px; pointer-events: none; z-index: 5;
    width: 30px; height: 30px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
  }
  .lobbyp-menu svg {
    width: 23px; height: 23px; fill: #fff;
    /* Layered shadow = a crisp dark rim so the dots read on light foliage too. */
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 1.5px rgba(0,0,0,.55));
  }
  /* Right: copy + the shared two-stage form. */
  .lobbyp-right {
    display: flex; flex-direction: column; justify-content: center;
    padding: 40px 40px 38px; background: #fff;
  }
  .lobbyp-copy { margin-bottom: 22px; }
  .lobbyp-hero {
    font-family: var(--display); font-weight: 600; font-size: 30px;
    line-height: 1.08; letter-spacing: -0.01em; color: var(--text);
  }
  .lobbyp-sub {
    font-size: 14px; line-height: 1.55; color: var(--text-dim);
    margin-top: 10px; max-width: 42ch;
  }
  /* Step dots + inline back on one row (back pushed right, stage 2 only). */
  .lobbyp-steprow { display: flex; align-items: center; margin-bottom: 20px; }
  .lobbyp-steprow .lobby-steps { margin-bottom: 0; }
  .lobbyp-back {
    margin-left: auto; background: none; border: 0; padding: 2px 0; cursor: pointer;
    font-family: var(--ui); font-size: 12.5px; font-weight: 600;
    color: var(--text-faint); transition: color .15s;
  }
  .lobbyp-back:hover { color: var(--accent); }
  /* Reassurance bullets under the Continue CTA — small accent check + muted label. */
  .lobbyp-assurances {
    list-style: none; padding: 0; margin: 16px 0 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  }
  .lobbyp-assurances li {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--ui); font-size: 12.5px; color: var(--text-dim);
  }
  .lobbyp-assurances svg {
    width: 15px; height: 15px; flex: none;
    fill: none; stroke: var(--accent); stroke-width: 2.6;
    stroke-linecap: round; stroke-linejoin: round;
  }

  /* Stack to a single column on narrow viewports */
  @media (max-width: 720px) {
    .lobby {
      align-items: flex-start;
      justify-content: flex-start;
      padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    }
    .lobby-card {
      grid-template-columns: 1fr;
      max-width: none;
      min-height: 0;
      border-radius: 16px;
    }
    .lobby-logobar { padding: 11px 24px; }
    .lobby-left-body { padding: 28px 24px 26px; }
    .lobby-right { padding: 30px 24px 34px; }
    .lobby-title { font-size: 32px; }
    .lobby-share { margin-top: 26px; }
  }

  .icon-btn { background: none; border: none; cursor: pointer; color: var(--text-dim); display: flex; padding: 8px; border-radius: 8px; }
  .icon-btn svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
  .icon-btn:hover { background: var(--surface-2); color: var(--text); }

  /* ── PRESENTATION DECK ── */
  .sd-root {
    position: absolute; inset: 0;
    background: var(--cream);
    color: oklch(0.12 0.014 32);
    font-family: var(--serif);
    overflow: hidden;
  }
  .sd-canvas { position: absolute; inset: 0; container-type: size; }
  .sd-slide {
    position: absolute; inset: 0;
    padding: 6.5cqh 8cqw;
    display: flex; flex-direction: column;
    animation: sdIn .5s cubic-bezier(.22, .61, .36, 1);
  }
  @keyframes sdIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  /* Mid-session video step — fills the deck frame, letterboxed on a black field. */
  .sd-video {
    position: absolute; inset: 0;
    background: #000;
    display: flex; align-items: center; justify-content: center;
    animation: sdIn .5s cubic-bezier(.22, .61, .36, 1);
  }
  .sd-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }
  /* Registration-walkthrough "shared browser window" — the muted narrated/poster clips are
     recordings of the live USC site captured WITH the full macOS window chrome (traffic lights,
     tab strip, URL bar) already in frame. We float them on a desktop backdrop with rounded corners
     + a drop shadow so they read as a shared browser window rather than a full-bleed video. No fake
     titlebar of our own — the window chrome is in the recording. */
  .sd-video--browser {
    padding: 3.5cqh 4cqw;
    /* A macOS-style landscape wallpaper (layered dusk mountains + setting sun) behind the shared
       window, so it reads as a real desktop rather than a flat panel. Inline SVG data URI —
       self-contained, crisp at any size, no bundled image asset. Dark fallback while it decodes. */
    background: #241a3a url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDEwMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIHNsaWNlIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InNreSIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzE3MTYzNCIvPjxzdG9wIG9mZnNldD0iMC40MCIgc3RvcC1jb2xvcj0iIzNjMmY3MCIvPjxzdG9wIG9mZnNldD0iMC42NCIgc3RvcC1jb2xvcj0iIzg2NGM4NCIvPjxzdG9wIG9mZnNldD0iMC44MCIgc3RvcC1jb2xvcj0iI2Q0N2E3NiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2YzYjA2YSIvPjwvbGluZWFyR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJzdW5HbG93IiBjeD0iMC41IiBjeT0iMC41IiByPSIwLjUiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZjNkMiIvPjxzdG9wIG9mZnNldD0iMC4zNSIgc3RvcC1jb2xvcj0iI2ZmZDY4ZiIgc3RvcC1vcGFjaXR5PSIwLjg1Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZkNjhmIiBzdG9wLW9wYWNpdHk9IjAiLz48L3JhZGlhbEdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iaGF6ZSIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2YzYjA2YSIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZjNiMDZhIiBzdG9wLW9wYWNpdHk9IjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSIxMDAwIiBmaWxsPSJ1cmwoI3NreSkiLz48IS0tIHN1biBuZWFyIHRoZSBob3Jpem9uIC0tPjxjaXJjbGUgY3g9IjEwMTAiIGN5PSI1NjUiIHI9IjI1MCIgZmlsbD0idXJsKCNzdW5HbG93KSIvPjxjaXJjbGUgY3g9IjEwMTAiIGN5PSI1NzUiIHI9IjUwIiBmaWxsPSIjZmZmMWNjIi8+PCEtLSBob3Jpem9uIGhhemUgLS0+PHJlY3QgeD0iMCIgeT0iNTYwIiB3aWR0aD0iMTYwMCIgaGVpZ2h0PSIyMzAiIGZpbGw9InVybCgjaGF6ZSkiLz48IS0tIG1vdW50YWluIHJpZGdlcywgZmFyIChoYXp5KSAtPiBuZWFyIChkYXJrKSAtLT48cGF0aCBkPSJNMCw2NDggQyAyNDAsNjAwIDQzMCw2MzIgNjQwLDYwNiBDIDg2MCw1NzggMTAxMCw1NDAgMTE4MCw1ODggQyAxMzMwLDYyOCAxNDcwLDYwNiAxNjAwLDU5MiBMMTYwMCwxMDAwIEwwLDEwMDAgWiIKICAgICAgICBmaWxsPSIjYjA2Zjk1IiBvcGFjaXR5PSIwLjUiLz48cGF0aCBkPSJNMCw3MTIgQyAyNjAsNjcyIDQ3MCw3MDAgNzAwLDY1NiBDIDk0MCw2MTIgMTA5MCw2NzggMTMwMCw2NTIgQyAxNDIwLDYzOCAxNTIwLDY2MCAxNjAwLDY1MCBMMTYwMCwxMDAwIEwwLDEwMDAgWiIKICAgICAgICBmaWxsPSIjNzM0ZDgzIiBvcGFjaXR5PSIwLjgyIi8+PHBhdGggZD0iTTAsNzkyIEMgMjIwLDc1MiA1MjAsODAyIDc2MCw3NDIgQyAxMDEwLDY4MiAxMTgwLDc2MCAxMzgwLDcyNCBDIDE0NzAsNzA4IDE1NDAsNzMyIDE2MDAsNzI0IEwxNjAwLDEwMDAgTDAsMTAwMCBaIgogICAgICAgIGZpbGw9IiM0MDJlNWEiLz48cGF0aCBkPSJNMCw4ODQgQyAzMjAsODQyIDYwMCw4OTIgOTAwLDg1MCBDIDExNjAsODE0IDEzODAsODY4IDE2MDAsODQ2IEwxNjAwLDEwMDAgTDAsMTAwMCBaIgogICAgICAgIGZpbGw9IiMyNDFhM2EiLz48L3N2Zz4=") center / cover no-repeat;
  }
  /* The wrapper is layout-transparent (display: contents) so the ROUNDED, shadowed element is the
     recording itself — its corners sit flush on the video with no white letterbox bands. The video
     sizes to the largest box that fits the padded stage while keeping its native 1440x790 aspect
     (max-width/height + auto), centered by the flex parent. The recording carries its own window
     chrome (traffic lights / URL bar), so this reads as a real shared browser window. */
  .sd-browser-window { display: contents; }
  .sd-browser-window video {
    display: block;
    width: auto; height: auto; max-width: 100%; max-height: 100%;
    object-fit: contain; background: #fff;
    border-radius: 1.8cqh;
    box-shadow: 0 4.5cqh 10cqh rgba(0,0,0,.48), 0 1cqh 2.5cqh rgba(0,0,0,.30);
  }
  /* Walkthrough boot placeholder: an empty window on the desktop backdrop while the intro's held
     frame loads over SSE. Pinned to the recording's native aspect so the loading frame and the real
     clip occupy the identical box (no resize jump when the frame lands). Soft neutral wash (not stark
     white) that blends into the recording's first frame, with a gentle breathing pulse. */
  .sd-browser-window--loading {
    display: block;
    width: 100%; aspect-ratio: 1440 / 790; max-height: 100%;
    border-radius: 1.8cqh; overflow: hidden;
    background: linear-gradient(180deg, #f6f7f9 0%, #eceef2 100%);
    box-shadow: 0 4.5cqh 10cqh rgba(0,0,0,.48), 0 1cqh 2.5cqh rgba(0,0,0,.30);
    animation: wtBootPulse 1.6s ease-in-out infinite;
  }
  @keyframes wtBootPulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .sd-browser-window--loading { animation: none; } }
  .sd-video-tap {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.45); cursor: pointer; border: 0;
  }
  /* Big, attention-drawing play button — only shown when the clip fails to start on its own
     (autoplay blocked or a wedged load that never rejected). Animates in + pulses so a student
     staring at a paused frame notices it and can tap to start playback. */
  .sd-video-play {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22cqh; height: 22cqh; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: 9cqh; line-height: 1; padding-left: 1.2cqh; /* nudge the ▶ optically centered */
    animation: sdVideoPlayIn .35s cubic-bezier(.22,.61,.36,1),
               sdVideoPlayPulse 1.8s ease-out .35s infinite;
  }
  @keyframes sdVideoPlayIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @keyframes sdVideoPlayPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
    70%  { box-shadow: 0 0 0 6cqh rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  }
  /* Manual skip — appears only after the clip has been playing a few seconds (see SKIP_AFTER_S). */
  .sd-video-skip {
    position: absolute; top: 2.4cqh; right: 2.6cqw;
    font-family: var(--ui); color: #fff; font-size: 1.9cqh; font-weight: 600;
    letter-spacing: .04em; cursor: pointer;
    background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px; padding: 1cqh 2.2cqw;
    animation: sdIn .4s cubic-bezier(.22,.61,.36,1);
  }
  .sd-video-skip:hover { background: rgba(0,0,0,.7); }
  /* Simple YouTube-style progress bar — only rendered while the video plays. */
  .sd-video-bar {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 1.6cqw;
    padding: 1.8cqh 2.6cqw;
    background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
    pointer-events: none;
  }
  .sd-video-bar-track {
    flex: 1; height: .7cqh; border-radius: 999px;
    background: rgba(255,255,255,.3); overflow: hidden;
  }
  .sd-video-bar-fill {
    height: 100%; background: var(--accent); border-radius: 999px;
    transition: width .2s linear;
  }
  .sd-video-bar-time {
    font-family: var(--ui); color: #fff; font-size: 2.0cqh; font-weight: 600;
    letter-spacing: .03em; font-variant-numeric: tabular-nums; white-space: nowrap;
  }

  /* Registration walkthrough CTA — the "Start your application" button on the final step (and on
     the session-complete card). Anchored bottom-center over the deck/clip, opens the real
     registration page in a new tab. */
  .sd-apply-cta {
    position: absolute; left: 50%; bottom: 5cqh; transform: translateX(-50%);
    z-index: 5;
    display: inline-flex; align-items: center;
    font-family: var(--ui); font-size: 2.4cqh; font-weight: 700; letter-spacing: .01em;
    color: #fff; text-decoration: none; white-space: nowrap;
    background: var(--accent); border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px; padding: 1.7cqh 3.6cqw;
    box-shadow: 0 6px 20px oklch(0 0 0 / .45);
    animation: sdIn .45s cubic-bezier(.22,.61,.36,1);
    cursor: pointer;
  }
  .sd-apply-cta:hover { filter: brightness(1.08); }
  button.sd-apply-cta:disabled { opacity: .55; cursor: default; filter: none; }

  /* Guided walkthrough advance button — the contextual "I found it →" / "I'm done →" control that
     paces a guided (no-mic) walkthrough. Anchored bottom-center over the clip, revealed only after
     the step's narration finishes; clicking it advances to the next step. */
  .sd-walkthrough-advance {
    position: absolute; left: 50%; bottom: 5cqh; transform: translateX(-50%);
    z-index: 6;
    display: inline-flex; align-items: center;
    font-family: var(--ui); font-size: 2.4cqh; font-weight: 700; letter-spacing: .01em;
    color: #fff; white-space: nowrap;
    background: var(--accent); border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px; padding: 1.7cqh 3.6cqw;
    box-shadow: 0 6px 20px oklch(0 0 0 / .45);
    animation: sdIn .45s cubic-bezier(.22,.61,.36,1);
    cursor: pointer;
  }
  .sd-walkthrough-advance:hover { filter: brightness(1.08); }
  .sd-walkthrough-advance:disabled { opacity: .55; cursor: default; filter: none; }
  /* After the click, the button shows a "thinking" three-dot animation while the next step is
     prepared — keep it at full strength (not the dimmed :disabled look) so it reads as WORKING,
     not deactivated. Higher specificity (two classes + :disabled) beats the plain :disabled rule. */
  .sd-walkthrough-advance.is-thinking,
  .sd-walkthrough-advance.is-thinking:disabled { opacity: 1; filter: none; cursor: default; }
  .sd-adv-dots { display: inline-flex; align-items: center; gap: .7cqh; }
  .sd-adv-dots span {
    width: 1cqh; height: 1cqh; border-radius: 50%;
    background: currentColor;
    animation: blink 1.3s infinite both;
  }
  .sd-adv-dots span:nth-child(2) { animation-delay: .2s; }
  .sd-adv-dots span:nth-child(3) { animation-delay: .4s; }

  /* "Apply Now" (beta) — the CTA on exec-ed decks that starts the guided registration walkthrough.
     Lives in the in-call TOP bar (meet-meta, beside the clock), NOT floating over the deck. It's the
     one gold element in the header, so it deliberately STANDS OUT — a filled, top-lit gold button
     with real depth — while its type matches the bar (var(--ui) 13px/600/.01em) so it still belongs.
     Bar geometry is px-based (the bar is not a container-query context), unlike the cqh deck overlays. */
  .apply-bar {
    display: inline-flex; align-items: center; gap: 8px;
    /* Match the bar's own type: var(--ui) 13px / 600 / .01em (like .controls-left + .cl-program), so
       it reads as part of the interface. The GOLD is what makes it stand out — not a heavier font. */
    font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: .01em;
    color: #2a0a10; white-space: nowrap; cursor: pointer;      /* dark ink on gold */
    background: linear-gradient(180deg, #FFD84D 0%, var(--gold, #FFCC00) 52%, #EFB700 100%);
    border: 1px solid rgba(90,50,0,.30);
    border-radius: 7px; padding: 8px 12px;
    /* Inset top bevel + tight contact + soft ambient drop → raised, tactile; pops off the dark bar. */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      0 1px 3px oklch(0 0 0 / .32),
      0 5px 16px oklch(0 0 0 / .34);
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  }
  .apply-bar:hover:not(:disabled) {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.6),
      0 2px 5px oklch(0 0 0 / .34),
      0 8px 22px oklch(0 0 0 / .44);
  }
  .apply-bar:active:not(:disabled) { transform: translateY(0); }
  .apply-bar:focus-visible { outline: 2px solid var(--gold, #FFCC00); outline-offset: 2px; }
  /* Beta chip — small, uppercase, quietly tinted so it caveats without shouting. */
  .apply-bar__beta {
    font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #3a0f16; background: rgba(42,10,16,.16);
    border-radius: 4px; padding: 2px 6px; line-height: 1;
  }
  /* Disabled = the course's walkthrough isn't wired yet ("coming soon"): muted, not interactive. */
  .apply-bar:disabled { opacity: .5; cursor: default; filter: none; box-shadow: none; }


  /* ── SLIDE PREVIEW GALLERY (?preview=slides — view all slides, no call) ── */
  .pv-wrap { height: 100vh; overflow-y: auto; background: #0d0d0f; padding: 30px 24px 60px; }
  .pv-head {
    max-width: 1100px; margin: 0 auto 22px; color: #fff;
    font-family: var(--ui); font-size: 17px; font-weight: 600; letter-spacing: .01em;
  }
  .pv-head span { color: rgba(255,255,255,.5); font-weight: 400; font-size: 14px; margin-left: 10px; }
  .pv-item { max-width: 1100px; margin: 0 auto 30px; }
  .pv-label {
    color: rgba(255,255,255,.55); font-family: var(--ui); font-size: 11.5px;
    letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: 9px;
  }
  .pv-frame {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: 10px; overflow: hidden; box-shadow: 0 12px 44px rgba(0,0,0,.45);
  }
  .pv-frame .sd-slide { animation: none; }


  .sd-livedot {
    position: absolute; top: 14px; right: 14px; z-index: 4;
    display: flex; align-items: center; gap: 6px;
    font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: .14em;
    color: #fff;
    background: oklch(0.12 0.01 32 / .55); padding: 5px 10px; border-radius: 7px;
    backdrop-filter: blur(6px);
  }
  .sd-livedot span {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-soft);
    box-shadow: 0 0 0 0 oklch(0.55 0.20 26 / .5);
    animation: pulse 2.2s infinite;
  }

  /* All slides use the light (cream) theme. The former navy `.sd-dark` variant is
     intentionally a no-op: if the class ever reappears on a slide, it still renders
     light rather than reverting to a dark background. */

  /* ── SUBTITLES ── */
  .subtitles {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    width: 78%;
    z-index: 5; pointer-events: none;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(8px);
    border-radius: 6px;
    padding: 5px 16px;
    animation: subIn .18s ease;
  }
  /* fixed 2-line viewport: the full agent text lives in the DOM but only the
     last 2 lines are visible; new lines scroll the oldest off the top */
  .subtitle-scroll {
    color: #fff;
    font-family: var(--ui); font-size: 13px; line-height: 1.45;
    text-align: center;
    height: 2.9em;          /* 2 lines × 1.45 line-height */
    overflow: hidden;
  }
  @keyframes subIn { from { opacity:0; transform: translateX(-50%) translateY(5px); } to { opacity:1; transform: translateX(-50%); } }
  .subtitle-speaker {
    font-weight: 700; font-size: 13px;
    color: oklch(0.82 0.12 26);
    margin-right: 7px;
  }

  /* ── AGENDA RAIL (left sidebar, outside the deck) ── */
  .agenda-rail {
    flex: none;
    width: 156px;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 0 0 6px;
  }
  .ar-hd {
    font-family: var(--ui); font-size: 10.5px; letter-spacing: .26em;
    text-transform: uppercase; color: var(--text-dim); font-weight: 700;
    margin-bottom: 18px;
  }
  .ar-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 8px 8px 10px;
    border-left: 2px solid oklch(1 0 0 / .14);
    transition: border-color .4s, background .4s;
  }
  .ar-done { border-left-color: oklch(0.55 0.20 26 / .45); }
  .ar-active {
    border-left-color: var(--accent-soft);
    background: oklch(0.55 0.20 26 / .12);
    border-radius: 0 8px 8px 0;
  }
  .ar-num {
    font-family: var(--ui); font-size: 10.5px; font-weight: 700;
    color: var(--text-dim); min-width: 16px; flex-shrink: 0; line-height: 1.5;
  }
  .ar-active .ar-num { color: var(--accent-soft); }
  .ar-title {
    font-family: var(--ui); font-size: 12.5px;
    color: oklch(0.82 0.006 264); line-height: 1.4; font-weight: 500;
  }
  .ar-active .ar-title { color: #fff; font-weight: 700; }
  .ar-done .ar-title { color: var(--text-dim); font-weight: 400; }

  @media (max-width: 880px) {
    /* Narrow screens: chat is a floating overlay, not a stacked pane. Override the
       stacked-layout rules so the tiles keep their full height and the chat docks. */
    .chat, .right-pane > .chat {
      position: fixed; right: 14px; left: 14px; bottom: 90px; top: 56px;
      width: auto; z-index: 30; box-shadow: 0 20px 60px oklch(0 0 0 / .5);
    }
    .right-pane.with-chat > .people-rail { display: flex; flex: 1; height: auto; }
    .controls-left { display: none; }
  }

/* ---- Unified slide stage: the 16:9 container-query host the slide-HTML renders into.
   Transparent so the per-school .sd-root deck background (cream/white) shows through for
   class-based decks (BU); fully inline-styled decks (TAMU/USC) paint their own backgrounds. ---- */
.sd-stage{position:absolute;inset:0;margin:auto;width:min(100cqw,177.7778cqh);aspect-ratio:16/9;container-type:size;overflow:hidden;}
.sd-stage *{box-sizing:border-box;}