/* ============================================================================
   StridorRT · ui/instructor.css — instructor console skin (Step 3)
   ----------------------------------------------------------------------------
   Loaded LAST on instructor.html only. Same two mechanisms as the student
   skin: (1) legacy-var re-point scoped to body[data-role="instructor"] so
   every pulse.css rule repaints onto the sim palette; (2) hard overrides of
   the shell (login, top bar, crumb, drawer nav) and the content primitives
   (.card .deckcard .seg .btn-go .input .fld) for the instrument-console look.

   DOM contract preserved: no id/class renamed. JS-toggled states kept as-is:
   body.nav-open, .app.hide, .nav-sec.open, .nav-item.on, .seg button.on,
   body.deckpres. Nav group tones use :nth-of-type on the static markup order
   (1 Lectures · 2 Live Polls · 3 Tools · 4 Cases · 5 Analytics).
   ========================================================================== */

body[data-role="instructor"]{
  /* -------- re-point pulse/shell vars onto tokens (palette unification) --- */
  --canvas:var(--s-bg-0);   --bg-2:var(--s-bg-1);
  --surface:var(--s-bg-2);  --surface-2:var(--s-bg-3);  --raise:var(--s-bg-4);
  --ink:var(--s-ink);  --sub:var(--s-ink-2);  --mute:var(--s-ink-3);  --faint:var(--s-ink-4);
  --hair:var(--s-line);  --hair-2:var(--s-line-2);
  --accent:var(--s-teal);  --accent-d:var(--s-teal-2);  --accent-ink:var(--s-on-teal);
  --good:var(--s-ok);  --mid:var(--s-warn);  --warn:var(--s-warn);  --risk:var(--s-danger);
  --r:var(--s-r-lg);  --sh:var(--s-elev-1);  --sh-lg:var(--s-elev-2);

  background:var(--s-page-glow);
  background-attachment:fixed;
}
body[data-role="instructor"] ::selection{background:rgba(var(--s-teal-rgb),.28)}

/* ============================ LOGIN ========================================
   First thing on screen — full instrument treatment.                        */
body[data-role="instructor"] .login{
  background:var(--s-page-glow);
}
body[data-role="instructor"] .login-card{
  position:relative;
  background:linear-gradient(180deg,var(--s-panel-hi),var(--s-panel-lo));
  border:1px solid var(--s-panel-line);
  border-radius:var(--s-r-xl);
  padding:34px 28px 28px;
  box-shadow:var(--s-elev-2),0 0 90px -30px rgba(var(--s-teal-rgb),.35);
}
body[data-role="instructor"] .login-card::before{      /* instrument tick */
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:56px;height:3px;border-radius:0 0 3px 3px;
  background:var(--s-teal);box-shadow:0 0 14px var(--s-teal);
}
body[data-role="instructor"] .login-logo{
  color:var(--s-teal);font:700 var(--s-fs-xs)/1 var(--s-font-mono);
  letter-spacing:var(--s-track-wide);
  text-shadow:0 0 16px rgba(var(--s-teal-rgb),.55);
}
body[data-role="instructor"] .login-h{
  font-size:var(--s-fs-xl);font-weight:800;letter-spacing:var(--s-track-tight);
}
body[data-role="instructor"] .login-input{
  background:var(--s-bg-1);border:1px solid var(--s-line-2);
  border-radius:var(--s-r-md);min-height:var(--s-ctl-h-lg);
  transition:border-color var(--s-dur-1) var(--s-ease),box-shadow var(--s-dur-2) var(--s-ease);
}
body[data-role="instructor"] .login-input:focus{
  border-color:var(--s-teal);box-shadow:0 0 0 3px rgba(var(--s-teal-rgb),.15);
}
body[data-role="instructor"] .login-btn{
  border-radius:var(--s-r-md);min-height:var(--s-ctl-h-lg);
  background:var(--s-teal);color:var(--s-on-teal);box-shadow:var(--s-glow-teal);
  transition:background var(--s-dur-1) var(--s-ease);
}
body[data-role="instructor"] .login-btn:hover{background:var(--s-teal-2)}
body[data-role="instructor"] .login-err{color:var(--s-danger-ink)}

/* ============================ TOP BAR ======================================
   From "row of gray buttons" to a command strip: dark deck, hairline base
   with a teal underglow, compact ghost controls, one blue COMMAND action
   (Present — it drives the room), and the class code as a monitored value. */
body[data-role="instructor"] .top{
  gap:8px;padding:10px clamp(20px,2.6vw,44px);
  background:linear-gradient(180deg,var(--s-bg-1),rgba(10,14,20,.86));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--s-line-2);
  box-shadow:0 1px 0 rgba(var(--s-teal-rgb),.14),0 12px 30px -18px rgba(0,0,0,.8);
}
body[data-role="instructor"] .top-btn{
  background:var(--s-ctl-bg);border:1px solid var(--s-line-2);color:var(--s-ink-2);
  border-radius:var(--s-r-md);padding:0 14px;min-height:var(--s-ctl-h-sm);
  font:600 var(--s-fs-sm)/1 var(--s-font-sans);
  transition:border-color var(--s-dur-1) var(--s-ease),color var(--s-dur-1) var(--s-ease),
             background var(--s-dur-1) var(--s-ease);
}
body[data-role="instructor"] .top-btn:hover{
  background:var(--s-bg-3);border-color:var(--s-line-2);color:var(--s-ink);
}
body[data-role="instructor"] .top-btn.icon{min-width:36px;padding:0 10px;font-size:17px}

/* Present = the room-driving command (sim blue) */
body[data-role="instructor"] #top-present{
  background:linear-gradient(180deg,var(--s-cmd),var(--s-cmd-2));
  border-color:var(--s-cmd-line);color:var(--s-ink);font-weight:700;
}
body[data-role="instructor"] #top-present:hover{border-color:var(--s-blue)}
/* New session is destructive-adjacent (rotates the code) */
body[data-role="instructor"] #new-session{
  border-color:rgba(var(--s-danger-rgb),.4);color:var(--s-danger-ink);
  background:rgba(var(--s-danger-rgb),.07);
}
body[data-role="instructor"] #new-session:hover{
  border-color:var(--s-danger);color:var(--s-ink);background:rgba(var(--s-danger-rgb),.13);
}
body[data-role="instructor"] #logout{background:transparent;border-color:transparent}
body[data-role="instructor"] #logout:hover{background:var(--s-bg-3)}

/* Class code → vb-chip: micro-label over a big glowing mono value */
body[data-role="instructor"] .top-right{gap:8px;align-items:center}
body[data-role="instructor"] .top-code-lbl{
  color:var(--s-ink-3);font:700 var(--s-fs-2xs)/1 var(--s-font-mono);
  letter-spacing:var(--s-track-label);text-transform:uppercase;
}
body[data-role="instructor"] .top-code{
  font:800 22px/1 var(--s-font-mono);letter-spacing:.14em;color:var(--s-teal);
  background:none;border:0;border-radius:0;padding:0 4px;
  text-shadow:0 0 16px rgba(var(--s-teal-rgb),.5);
}

/* ============================ CRUMB BAR ==================================== */
body[data-role="instructor"] .crumbbar{
  padding:16px clamp(20px,2.6vw,44px) 14px;
}
body[data-role="instructor"] .crumb{font-size:19px;font-weight:800;letter-spacing:var(--s-track-tight)}
body[data-role="instructor"] .crumb-root{
  color:var(--s-teal);font:700 var(--s-fs-xs)/1 var(--s-font-mono);
  letter-spacing:var(--s-track-wide);text-transform:uppercase;
  text-shadow:0 0 12px rgba(var(--s-teal-rgb),.4);
}
body[data-role="instructor"] .crumb-cur::before{content:" \203A ";color:var(--s-ink-4)}
body[data-role="instructor"] .pill{
  display:inline-flex;align-items:center;gap:7px;
  font:600 var(--s-fs-sm)/1 var(--s-font-sans);padding:6px 13px;
}
body[data-role="instructor"] .pill-amber{
  color:var(--s-amber);border:1px solid rgba(var(--s-amber-rgb),.4);
  background:rgba(var(--s-amber-rgb),.08);
}
body[data-role="instructor"] .pill-amber::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--s-amber);box-shadow:0 0 8px var(--s-amber);
}

/* ============================ NAV DRAWER ===================================
   Keeps the exact open/close mechanics (body.nav-open transform). Interior
   becomes the sim's control rail: glowing wordmark, toned group headers with
   the tick signature, items with slide-in accent, glowing footer action.   */
body[data-role="instructor"] .rcnav{
  width:312px;padding:18px 14px;
  background:linear-gradient(180deg,var(--s-panel-hi),#080d13 55%,var(--s-bg-0));
  border-right:1px solid var(--s-panel-line);
  box-shadow:24px 0 70px -24px rgba(0,0,0,.85),inset -1px 0 0 rgba(var(--s-teal-rgb),.06);
  scrollbar-width:thin;scrollbar-color:var(--s-bg-4) transparent;
}
body[data-role="instructor"] .rcnav::-webkit-scrollbar{width:8px}
body[data-role="instructor"] .rcnav::-webkit-scrollbar-thumb{background:var(--s-bg-4);border-radius:8px}
body[data-role="instructor"] .nav-scrim{background:rgba(3,5,9,.72)}

body[data-role="instructor"] .nav-mark{
  background:linear-gradient(135deg,var(--s-teal),var(--s-teal-2));
  color:var(--s-on-teal);border-radius:var(--s-r-md);
  box-shadow:0 0 22px rgba(var(--s-teal-rgb),.45);
}
body[data-role="instructor"] .nav-title{font-weight:800;letter-spacing:var(--s-track-tight)}
body[data-role="instructor"] .nav-sub{color:var(--s-teal);letter-spacing:.08em;font-size:14px}
body[data-role="instructor"] .nav-close{
  background:var(--s-ctl-bg);border:1px solid var(--s-line-2);border-radius:var(--s-r-sm);
}
body[data-role="instructor"] .nav-close:hover{border-color:var(--s-teal);color:var(--s-ink);background:var(--s-bg-3)}

/* group headers: per-tone glowing tick (sim .railsec signature) */
body[data-role="instructor"] .nav-sec{--nav-tone:var(--s-teal);--nav-rgb:var(--s-teal-rgb)}
body[data-role="instructor"] .nav-sec:nth-of-type(2){--nav-tone:var(--s-amber);--nav-rgb:var(--s-amber-rgb)}   /* Live Polls */
body[data-role="instructor"] .nav-sec:nth-of-type(3){--nav-tone:var(--s-blue);--nav-rgb:var(--s-blue-rgb)}     /* Tools */
body[data-role="instructor"] .nav-sec:nth-of-type(4){--nav-tone:var(--s-violet);--nav-rgb:var(--s-violet-rgb)} /* Patient Cases */
body[data-role="instructor"] .nav-sec + .nav-sec{border-top:1px solid var(--s-line)}
body[data-role="instructor"] .nav-group{
  gap:9px;color:var(--nav-tone);
  font:800 16px/1.2 var(--s-font-mono);letter-spacing:.08em;
}
body[data-role="instructor"] .nav-group>span:first-child{display:flex;align-items:center;gap:9px}
body[data-role="instructor"] .nav-group>span:first-child::before{
  content:'';width:4px;height:13px;border-radius:3px;flex:none;
  background:var(--nav-tone);box-shadow:0 0 10px var(--nav-tone);
}
body[data-role="instructor"] .nav-group:hover{color:var(--nav-tone);filter:brightness(1.15)}
body[data-role="instructor"] .nav-caret{color:var(--s-ink-4)}

body[data-role="instructor"] .nav-item{
  color:var(--s-ink-2);border-radius:var(--s-r-sm);border-left:2px solid transparent;
  padding:9px 12px 9px 14px;font-size:var(--s-fs-md);
  transition:background var(--s-dur-1) var(--s-ease),color var(--s-dur-1) var(--s-ease),
             border-color var(--s-dur-1) var(--s-ease);
}
body[data-role="instructor"] .nav-item:hover{
  background:rgba(var(--nav-rgb),.07);color:var(--s-ink);
  border-left-color:rgba(var(--nav-rgb),.5);
}
body[data-role="instructor"] .nav-item.on{
  background:rgba(var(--nav-rgb),.11);color:var(--s-ink);
  border-left-color:var(--nav-tone);
  box-shadow:inset 0 0 0 1px rgba(var(--nav-rgb),.32),inset 0 0 22px rgba(var(--nav-rgb),.08);
}
body[data-role="instructor"] .nav-foot{border-top:1px solid var(--s-line)}
body[data-role="instructor"] .nav-proj{
  color:var(--s-teal);border:1px solid rgba(var(--s-teal-rgb),.4);
  border-radius:var(--s-r-md);min-height:var(--s-ctl-h);
  transition:background var(--s-dur-1) var(--s-ease),box-shadow var(--s-dur-2) var(--s-ease);
}
body[data-role="instructor"] .nav-proj:hover{
  background:rgba(var(--s-teal-rgb),.09);box-shadow:var(--s-onring-teal);
}
body[data-role="instructor"] .nav-copy{color:var(--s-ink-4);font-size:var(--s-fs-2xs)}

/* ========================= CONTENT PRIMITIVES ==============================
   The var re-point already recolors pulse.css; these upgrade the shapes.   */
body[data-role="instructor"] .card{
  background:linear-gradient(180deg,var(--s-panel-hi),var(--s-panel-lo));
  border:1px solid var(--s-panel-line);border-radius:var(--s-r-xl);
  box-shadow:var(--s-elev-2);
}
body[data-role="instructor"] .deckcard{
  background:linear-gradient(180deg,var(--s-panel-hi),var(--s-panel-lo));
  border:1px solid var(--s-panel-line);border-radius:var(--s-r-xl);
}
body[data-role="instructor"] .deckcard:hover{
  border-color:rgba(var(--s-teal-rgb),.4);
  box-shadow:var(--s-elev-2),0 0 30px -12px rgba(var(--s-teal-rgb),.35);
}
body[data-role="instructor"] .deckcard::before{width:3px;background:var(--s-teal);box-shadow:0 0 12px var(--s-teal)}
body[data-role="instructor"] .deckcard-wk{font-family:var(--s-font-mono);letter-spacing:var(--s-track-label)}

body[data-role="instructor"] .seg{
  background:var(--s-bg-1);border:1px solid var(--s-line-2);border-radius:var(--s-r-md);
}
body[data-role="instructor"] .seg button{color:var(--s-ink-3);border-radius:calc(var(--s-r-md) - 3px)}
body[data-role="instructor"] .seg button:hover{color:var(--s-ink)}
body[data-role="instructor"] .seg button.on{
  background:rgba(var(--s-teal-rgb),.12);color:var(--s-teal);
  box-shadow:inset 0 0 0 1px rgba(var(--s-teal-rgb),.4);
}

body[data-role="instructor"] .btn-go,
body[data-role="instructor"] .topbtn{
  background:var(--s-teal);color:var(--s-on-teal);border-radius:var(--s-r-md);
  box-shadow:var(--s-glow-teal);font-weight:700;
}
body[data-role="instructor"] .btn-go:hover,
body[data-role="instructor"] .topbtn:hover{background:var(--s-teal-2);filter:none}
body[data-role="instructor"] .btn-go.ghosty{
  background:var(--s-ctl-bg);color:var(--s-ink-2);border:1px solid var(--s-line-2);box-shadow:none;
}
body[data-role="instructor"] .btn-go.ghosty:hover{color:var(--s-ink);background:var(--s-bg-3)}
body[data-role="instructor"] .btn-ghost{
  background:var(--s-ctl-bg);border:1px solid var(--s-line-2);border-radius:var(--s-r-md);color:var(--s-ink-2);
}
body[data-role="instructor"] .btn-ghost:hover{color:var(--s-ink);background:var(--s-bg-3)}

body[data-role="instructor"] .input{
  background:var(--s-bg-1);border:1px solid var(--s-line-2);border-radius:var(--s-r-md);
}
body[data-role="instructor"] .input:focus-within{
  border-color:var(--s-teal);box-shadow:0 0 0 3px rgba(var(--s-teal-rgb),.15);
}
body[data-role="instructor"] .fld{
  color:var(--s-ink-3);font:700 var(--s-fs-2xs)/1.2 var(--s-font-mono);
  letter-spacing:var(--s-track-label);
}
body[data-role="instructor"] .fld input{
  background:var(--s-bg-1);border:1px solid var(--s-line-2);border-radius:var(--s-r-md);
}
body[data-role="instructor"] .fld input:focus{
  outline:none;border-color:var(--s-teal);box-shadow:0 0 0 3px rgba(var(--s-teal-rgb),.15);
}

/* ===================== FOCUS · SCROLL · MOTION ============================= */
body[data-role="instructor"] :is(button,input,select,a,[tabindex]):focus-visible{
  outline:none;box-shadow:var(--s-ring);
}
body[data-role="instructor"] .view{scrollbar-width:thin;scrollbar-color:var(--s-bg-4) transparent}
@media (prefers-reduced-motion:reduce){
  body[data-role="instructor"] *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============ Stridor 2.0 — console additions ============ */
.login-brand{display:block;width:150px;height:auto;margin:0 auto 12px;border-radius:12px}
.nav-mark-img{width:30px;height:30px;border-radius:8px;object-fit:cover}
.top-who{font:600 12px/1 "Plus Jakarta Sans",system-ui,sans-serif;color:#8fe6c8;margin-right:10px;letter-spacing:.02em;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* analytics: re-teach digest + early-data chips (n-gated views) */
.an-reteach{background:linear-gradient(180deg,rgba(224,82,82,.10),rgba(224,82,82,.03));border:1px solid rgba(224,82,82,.35);border-radius:14px;padding:14px 18px;margin:14px 0 18px}
.an-reteach-h{font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:.16em;color:#ff9b9b;margin-bottom:10px}
.an-reteach-row{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:14px;color:#e8f1f8}
.an-thin{margin:10px 0 2px;line-height:2.1;font-size:11px;color:#7d93a6}
.an-chip{display:inline-block;font-size:11.5px;color:#a9bccb;background:rgba(255,255,255,.04);border:1px solid #20323f;border-radius:999px;padding:3px 10px;margin:2px 3px 2px 0;white-space:nowrap}
.an-chip b{color:#cfe0ea}