/* RC114 Live — shell chrome (top bar, breadcrumb, nav drawer, login, student gate).
   The lecture/lab/poll content is styled by the verbatim pulse.css; this only frames it. */
:root{ --canvas:#090d13; }
body.rc-shell{ margin:0; background:var(--canvas); color:var(--ink);
  font:14px/1.5 'Plus Jakarta Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; min-height:100vh; }
.hide{ display:none !important; }

/* ---------- login ---------- */
.login{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--canvas); z-index:200; }
.login-card{ width:min(92vw,360px); background:var(--surface); border:1px solid var(--hair-2); border-radius:18px; padding:30px 26px; text-align:center; }
.login-logo{ font:700 13px/1 'JetBrains Mono',monospace; letter-spacing:.16em; color:var(--accent); text-transform:uppercase; }
.login-h{ font-size:20px; font-weight:700; margin:14px 0 18px; }
.login-input{ width:100%; box-sizing:border-box; background:var(--canvas); border:1px solid var(--hair-2); color:var(--ink);
  border-radius:12px; padding:13px 14px; font-size:15px; outline:none; }
.login-input:focus{ border-color:var(--accent); }
.login-btn{ width:100%; margin-top:12px; background:var(--accent); color:var(--accent-ink); border:none; border-radius:12px;
  padding:13px; font-weight:700; font-size:15px; cursor:pointer; }
.login-err{ color:#f0816f; font-size:13px; min-height:18px; margin-top:10px; }

/* ---------- app frame ---------- */
.app{ min-height:100vh; }
#app{ display:block; min-height:100vh; }   /* override pulse.css .app{display:grid} collision */
.top{ position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:10px;
  padding:14px clamp(20px,2.6vw,44px) 10px; background:var(--canvas); }
.top-btn{ display:inline-flex; align-items:center; gap:7px; background:var(--surface-2); color:var(--ink);
  border:1px solid var(--hair-2); border-radius:13px; padding:10px 16px; font:600 14px/1 'Plus Jakarta Sans',sans-serif; cursor:pointer; }
.top-btn:hover{ border-color:var(--hair-2); background:#1f2935; }
.top-btn.icon{ padding:10px 13px; font-size:18px; line-height:1; }
.top-right{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.top-code-lbl{ color:var(--mute); font-size:13px; }
.top-code{ font:700 14px/1 'JetBrains Mono',monospace; letter-spacing:.12em; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 36%,transparent);
  border-radius:9px; padding:7px 12px; }

.crumbbar{ display:flex; align-items:center; gap:14px; padding:4px clamp(20px,2.6vw,44px) 16px; flex-wrap:wrap; }
.crumb{ font-size:21px; font-weight:700; letter-spacing:-.01em; }
.crumb-root{ color:var(--mute); }
.crumb-cur::before{ content:" \203A "; color:var(--mute); font-weight:500; }
.crumb-cur{ color:var(--ink); }
.pills{ display:flex; gap:9px; align-items:center; }
.pill{ font-size:13px; font-weight:600; border-radius:999px; padding:7px 14px; white-space:nowrap; }
.pill-amber{ color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 9%,transparent); }
.pill-term{ color:var(--sub); border:1px solid var(--hair-2); display:inline-flex; align-items:center; gap:7px; }
.pill-term i{ width:7px; height:7px; border-radius:50%; background:var(--good); display:inline-block; }

.view{ padding:0 clamp(20px,2.6vw,44px) 40px; }

/* ---------- nav drawer ---------- */
.nav-scrim{ position:fixed; inset:0; background:rgba(2,5,9,.62); opacity:0; pointer-events:none; transition:opacity .22s; z-index:95; backdrop-filter:blur(2px); }
body.nav-open .nav-scrim{ opacity:1; pointer-events:auto; }
.rcnav{ position:fixed; top:0; left:0; bottom:0; width:300px; max-width:84vw; background:#0b1118; border-right:1px solid var(--hair-2);
  z-index:100; transform:translateX(-100%); transition:transform .22s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; padding:20px 16px; box-sizing:border-box; box-shadow:18px 0 50px -20px rgba(0,0,0,.7); }
body.nav-open .rcnav{ transform:none; }
/* open drawer overlays the content (scrim dims it behind); content never shifts off-screen,
   so the right-side top bar and last column stay fully visible at every width */
.nav-head{ display:flex; align-items:center; gap:13px; padding:6px 6px 18px; }
.nav-close{ margin-left:auto; align-self:flex-start; flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--sub); border:1px solid var(--hair-2); border-radius:10px; font-size:14px; line-height:1; cursor:pointer; }
.nav-close:hover{ color:var(--ink); background:#1f2935; }
.nav-mark{ width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent-d));
  display:flex; align-items:center; justify-content:center; color:var(--accent-ink); font-size:20px; }
.nav-title{ font-size:19px; font-weight:700; }
.nav-sub{ font:600 10px/1.3 'JetBrains Mono',monospace; letter-spacing:.12em; color:var(--mute); text-transform:uppercase; margin-top:3px; }
.nav-group{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; cursor:pointer; text-align:left;
  font:700 11.5px/1 'JetBrains Mono',monospace; letter-spacing:.14em; color:var(--sub); text-transform:uppercase; padding:15px 10px 9px; }
.nav-group:hover{ color:var(--ink); }
.nav-caret{ font-size:9px; color:var(--mute); transition:transform .2s ease; }
.nav-sec:not(.open) .nav-caret{ transform:rotate(-90deg); }
.nav-sec-body{ display:none; }
.nav-sec.open .nav-sec-body{ display:block; }
.nav-sec + .nav-sec{ border-top:1px solid var(--hair); }
.nav-item{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:none; color:var(--sub);
  border-radius:10px; padding:9px 12px; font-size:14px; font-weight:500; cursor:pointer; }
.nav-item:hover{ background:var(--surface); color:var(--ink); }
.nav-item.on{ background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent); }
.nav-foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--hair); }
.nav-course{ font-size:13px; color:var(--sub); line-height:1.5; padding:4px 6px 12px; }
.nav-course span{ color:var(--mute); }
.nav-proj{ width:100%; display:flex; align-items:center; justify-content:center; gap:9px; background:none; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); border-radius:12px; padding:13px; font-weight:700; font-size:14px; cursor:pointer; }
.nav-proj:hover{ background:color-mix(in srgb,var(--accent) 10%,transparent); }
.nav-copy{ font-size:11px; line-height:1.5; color:var(--mute); padding:14px 6px 2px; letter-spacing:.01em; }

/* present mode: hide all chrome, the engine takes the screen */
body.deckpres .top, body.deckpres .crumbbar{ display:none; }

/* ---------- projector ---------- */
body.proj-view, .proj-view{ padding:0; }
.proj-msg{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--sub); font-size:20px; padding:8vw; }

/* ---------- student ---------- */
body.stu-shell{ display:flex; min-height:100vh; background:radial-gradient(1200px 800px at 50% -8%, #16284a 0%, #112038 38%, #0c1626 72%, #091020 100%); background-attachment:fixed; }
.stu{ flex:1; display:flex; align-items:center; justify-content:center; padding:20px; }
.stu-gate{ width:min(92vw,380px); text-align:center; }
.stu-logo{ font:700 14px/1 'JetBrains Mono',monospace; letter-spacing:.16em; color:var(--accent); text-transform:uppercase; }
.stu-gate-h{ font-size:24px; font-weight:700; margin:14px 0 20px; }
.stu-input{ width:100%; box-sizing:border-box; background:var(--surface); border:1px solid var(--hair-2); color:var(--ink);
  border-radius:13px; padding:15px 16px; font-size:18px; text-align:center; letter-spacing:.12em; outline:none; text-transform:uppercase; }
.stu-input:focus{ border-color:var(--accent); }
.stu-btn{ width:100%; margin-top:12px; background:var(--accent); color:var(--accent-ink); border:none; border-radius:13px;
  padding:15px; font-weight:700; font-size:16px; cursor:pointer; }
.stu-err{ color:#f0816f; font-size:14px; margin-top:12px; }

/* ---------- student "waiting" — full-bleed monitor screen ---------- */
.wait-screen{ width:100%; align-self:stretch; display:flex; flex-direction:column; text-align:center; }
.wait-top{ display:flex; align-items:center; justify-content:space-between; }
.wait-brand{ font-family:'JetBrains Mono',monospace; font-weight:600; letter-spacing:.16em; font-size:clamp(13px,3.2vw,16px); color:var(--sub,#abb7c4); }
.wait-main{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(18px,4.5vh,40px); }
.wait-title{ margin:0; font-weight:800; letter-spacing:.05em; font-size:clamp(44px,12vw,84px); line-height:1; color:#3df0b4;
  text-shadow:0 0 10px rgba(45,255,170,.45), 0 0 24px rgba(45,255,170,.2); animation:pulseGlow 1.7s ease-in-out infinite; }
@keyframes pulseGlow{
  0%,100%{ text-shadow:0 0 8px rgba(45,255,170,.30), 0 0 18px rgba(45,255,170,.12); transform:scale(1); }
  50%{ text-shadow:0 0 18px rgba(45,255,170,.85), 0 0 40px rgba(45,255,170,.42); transform:scale(1.04); } }
.wait-copy{ max-width:640px; }
.wait-h{ margin:0; font-size:clamp(28px,6.5vw,46px); font-weight:800; letter-spacing:-.02em; line-height:1.08; color:var(--ink,#eef3f8); }
.wait-sub{ margin:clamp(8px,1.6vh,15px) 0 0; font-size:clamp(16px,3.8vw,21px); line-height:1.45; color:var(--mute,#7b8896); }

.ecg{ position:relative; width:min(92vw,760px); aspect-ratio:690/300;
  border:1px solid rgba(65,255,174,.16); border-radius:16px; background-color:rgba(4,20,13,.5);
  background-image:
    repeating-linear-gradient(0deg, rgba(65,255,174,.07) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(65,255,174,.07) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg, rgba(65,255,174,.13) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(90deg, rgba(65,255,174,.13) 0 1px, transparent 1px 70px);
  overflow:hidden; box-shadow:inset 0 0 40px rgba(0,0,0,.55); }
.ecg-svg{ position:relative; width:100%; height:100%; display:block; }
.ecg-bright{ fill:none; stroke:#41ffae; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 3px #2bffa0) drop-shadow(0 0 7px rgba(43,255,160,.6)); }
.ecg-dot{ fill:#f2fff9;
  filter:drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 9px #43ffa0) drop-shadow(0 0 16px rgba(43,255,160,.75)); }

.stu-live{ display:inline-flex; align-items:center; gap:8px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  font-size:clamp(11px,2.8vw,13px); color:var(--accent,#24c9a0); padding:6px 14px; border-radius:999px;
  background:color-mix(in srgb,var(--accent) 13%,transparent); border:1px solid color-mix(in srgb,var(--accent) 32%,transparent); }
.stu-live-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent,#24c9a0);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent); animation:stuLivePulse 1.7s ease-out infinite; }
@keyframes stuLivePulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent); } 70%{ box-shadow:0 0 0 9px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }

/* projector: big class-code badge, top-right */
.proj-joincode{ position:fixed; top:22px; right:26px; z-index:90; display:flex; flex-direction:column; align-items:flex-end;
  background:rgba(8,16,26,.66); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(65,255,174,.28); border-radius:16px; padding:12px 20px 14px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.proj-joincode .pjc-lbl{ font:600 13px/1 'JetBrains Mono',monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--sub,#abb7c4); margin-bottom:6px; }
.proj-joincode .pjc-code{ font:800 clamp(34px,4.2vw,60px)/1 'JetBrains Mono',monospace; letter-spacing:.1em; color:#41ffae;
  text-shadow:0 0 18px rgba(65,255,174,.5); }

/* ---- instructor console: mobile layout ---- */
@media (max-width:760px){
  .top{ flex-wrap:wrap; gap:8px; padding:10px 12px 8px; }
  .top-btn{ padding:9px 12px; font-size:13px; }
  .top-btn.icon{ padding:9px 12px; }
  /* class code + New session + Log out drop to their own full-width row, all reachable */
  .top-right{ margin-left:0; width:100%; justify-content:flex-start; flex-wrap:wrap; gap:8px; }
  .top-code-lbl{ font-size:12px; }
}
/* present mode on a phone: scale the landscape slide up to fill the width */
@media (max-width:760px){
  body.deckpres #view, body.deckpres .view{ padding:8px; }
  body.deckpres .slide-in{ transform-origin:top center; }
}