/* ============================================================================
   StridorRT · ui/components.css — the shared component vocabulary (Step 1)
   ----------------------------------------------------------------------------
   Every class is namespaced `.ui-*` (verified unused across the repo), and
   every value is a token from ui/tokens.css — no raw hex in this file except
   alpha tints composed from token RGB triplets. Loading this file changes
   nothing until markup opts in, which happens surface-by-surface in Steps 2–5.

   Provenance: patterns generalized from sims/vent-trainer.html —
     .ui-btn        <- .btn / .tbtn            .ui-chip   <- .vb-chip
     .ui-panel      <- .panel                  .ui-stat   <- .met
     .ui-well       <- .scal / .loop           .ui-sec    <- .railsec + .sec-*
     .ui-seg        <- .modegrid/.modebtn      .ui-range  <- input[type=range]
     .ui-pill/.badge<- .pathbtn / shell .pill  .ui-note   <- .note
     .ui-modal      <- .zoom-bd / .zoom-x      .ui-eyebrow<- .eye
   ========================================================================== */

/* ============================== FOCUS ======================================
   One visible, consistent focus treatment for every interactive component.
   Keyboard-only (:focus-visible) so mouse clicks stay quiet, like the sim.  */
.ui-btn:focus-visible,.ui-seg__btn:focus-visible,.ui-tab:focus-visible,
.ui-input:focus-visible,.ui-select:focus-visible,.ui-range:focus-visible,
.ui-check:focus-visible,.ui-pill:where(a,button):focus-visible,
.ui-modal__x:focus-visible,.ui-chip:where(a,button):focus-visible{
  outline:none;box-shadow:var(--s-ring);
}

/* =============================== BUTTON ==================================== */
.ui-btn{
  appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;
  justify-content:center;gap:var(--s-sp-2);min-height:var(--s-ctl-h);
  padding:0 var(--s-sp-4);border-radius:var(--s-r-md);cursor:pointer;
  border:1px solid var(--s-line-2);background:var(--s-ctl-bg);color:var(--s-ink-2);
  font:600 var(--s-fs-sm)/1 var(--s-font-sans);letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;touch-action:manipulation;user-select:none;
  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),box-shadow var(--s-dur-2) var(--s-ease);
}
.ui-btn:hover{border-color:var(--s-line-2);color:var(--s-ink);background:var(--s-bg-3)}
.ui-btn:active{background:var(--s-bg-4)}
.ui-btn:disabled{opacity:.4;cursor:default;pointer-events:none}

/* Primary — the sim's solid-teal action (.btn.primary) */
.ui-btn--primary{
  border-color:transparent;background:var(--s-teal);color:var(--s-on-teal);
  font-weight:700;box-shadow:var(--s-glow-teal);
}
.ui-btn--primary:hover{background:var(--s-teal-2);color:var(--s-on-teal);border-color:transparent}
.ui-btn--primary:active{background:var(--s-teal-2)}

/* Command — the sim's blue "drive the room" family (--cmd). For push-to-class
   actions, visually distinct from local-only controls. */
.ui-btn--cmd{
  border-color:var(--s-cmd-line);color:var(--s-ink);
  background:linear-gradient(180deg,var(--s-cmd),var(--s-cmd-2));
}
.ui-btn--cmd:hover{border-color:var(--s-blue);background:linear-gradient(180deg,var(--s-cmd),var(--s-cmd-2))}

/* Danger — destructive/irreversible (end session, clear) */
.ui-btn--danger{
  border-color:rgba(var(--s-danger-rgb),.45);color:var(--s-danger-ink);
  background:rgba(var(--s-danger-rgb),.08);
}
.ui-btn--danger:hover{border-color:var(--s-danger);color:var(--s-ink);background:rgba(var(--s-danger-rgb),.14)}

/* Quiet — borderless text action */
.ui-btn--quiet{border-color:transparent;background:transparent}
.ui-btn--quiet:hover{background:var(--s-bg-3);border-color:transparent}

/* Toggled state — accent ring + tint, from .tbtn.on/.modebtn.on */
.ui-btn.is-on{
  border-color:var(--s-teal);color:var(--s-teal);
  background:rgba(var(--s-teal-rgb),.10);box-shadow:var(--s-onring-teal);
}

/* Sizes */
.ui-btn--sm{min-height:var(--s-ctl-h-sm);padding:0 var(--s-sp-3);font-size:var(--s-fs-xs)}
.ui-btn--lg{min-height:var(--s-ctl-h-lg);padding:0 var(--s-sp-5);font-size:var(--s-fs-md);border-radius:var(--s-r-lg)}
.ui-btn--tap{min-height:var(--s-tap)}   /* student-phone answer buttons */
.ui-btn--block{display:flex;width:100%}

/* =============================== PANEL ===================================== */
.ui-panel{
  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:var(--s-sp-4);box-shadow:var(--s-elev-2);
}
.ui-panel__h{
  margin:0 0 var(--s-sp-3);color:var(--s-ink-3);
  font:700 var(--s-fs-xs)/1 var(--s-font-mono);
  letter-spacing:var(--s-track-label);text-transform:uppercase;
}
.ui-panel__h .ui-panel__hint{color:var(--s-ink-4);text-transform:none;letter-spacing:.02em;font-weight:500;float:right}
.ui-panel--flush{padding:0}
.ui-panel--flush>.ui-panel__h{padding:var(--s-sp-4) var(--s-sp-4) 0}

/* Recessed well for canvases/plots (sim .scal/.loop) */
.ui-well{
  position:relative;background:radial-gradient(130% 120% at 0% 0%,var(--s-well-hi),var(--s-well-lo));
  border:1px solid var(--s-line);border-radius:var(--s-r-lg);
  padding:var(--s-sp-2) var(--s-sp-3);box-shadow:var(--s-inset-well);
}
.ui-well__label{
  position:absolute;top:9px;left:13px;z-index:2;color:var(--s-ink-2);
  font:700 var(--s-fs-xs)/1 var(--s-font-mono);letter-spacing:.10em;
  text-transform:uppercase;text-shadow:0 0 12px currentColor;
}

/* =========================== CHIP / STAT TILE ===============================
   The sim's monitored-value chip (.vb-chip) — THE reference pattern for any
   at-a-glance metric. Label over big mono numeral, optional unit + tone.    */
.ui-chip{display:inline-flex;flex-direction:column;gap:3px;min-width:82px;--chip:var(--s-ink-2)}
.ui-chip__k{
  color:var(--chip);font:700 var(--s-fs-xs)/1.1 var(--s-font-mono);
  letter-spacing:.08em;text-transform:uppercase;
}
.ui-chip__v{color:var(--s-ink);font:800 var(--s-fs-3xl)/1 var(--s-font-mono);white-space:nowrap;font-variant-numeric:tabular-nums}
.ui-chip__u{font-size:var(--s-fs-md);color:var(--s-ink-3);font-weight:500;margin-left:2px}
.ui-chip--sm .ui-chip__v{font-size:var(--s-fs-xl)}
.ui-chip--room .ui-chip__v{font-size:var(--s-fs-4xl)}          /* projector scale */
.ui-chip--room .ui-chip__k{font-size:var(--s-fs-sm)}
.ui-chip--teal{--chip:var(--s-teal)}   .ui-chip--amber{--chip:var(--s-amber)}
.ui-chip--blue{--chip:var(--s-blue)}   .ui-chip--violet{--chip:var(--s-violet)}
.ui-chip.is-alert .ui-chip__v{color:var(--s-danger-ink);text-shadow:0 0 12px rgba(var(--s-danger-rgb),.5)}

/* Boxed stat (sim .met) — for dense grids of metrics */
.ui-stat{background:var(--s-panel-lo);border:1px solid var(--s-line);border-radius:var(--s-r-md);padding:9px 11px}
.ui-stat__k{color:var(--s-ink-4);font:600 var(--s-fs-2xs)/1.2 var(--s-font-mono);letter-spacing:.04em;text-transform:uppercase}
.ui-stat__v{color:var(--s-ink);font:700 19px/1.1 var(--s-font-mono);margin-top:3px;font-variant-numeric:tabular-nums}
.ui-stat__v .ui-chip__u{font-size:var(--s-fs-xs)}
.ui-stat.is-alert{border-color:rgba(var(--s-danger-rgb),.4);background:rgba(var(--s-danger-rgb),.06)}
.ui-stat.is-alert .ui-stat__v{color:var(--s-danger)}

/* ======================== SEGMENTED CONTROL / TABS ========================= */
.ui-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.ui-seg--wrap{display:flex;flex-wrap:wrap}
.ui-seg__btn{
  appearance:none;border:1px solid var(--s-line-2);background:var(--s-ctl-bg);
  color:var(--s-ink-2);border-radius:var(--s-r-md);padding:9px;cursor:pointer;
  font:600 var(--s-fs-sm)/1.12 var(--s-font-sans);text-align:center;
  touch-action:manipulation;
  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),box-shadow var(--s-dur-2) var(--s-ease);
}
.ui-seg__btn:hover{color:var(--s-ink)}
.ui-seg__btn .ui-seg__sub{display:block;font:500 9.5px/1.2 var(--s-font-mono);color:var(--s-ink-4);margin-top:3px}
.ui-seg__btn.is-on{
  border-color:var(--s-teal);background:rgba(var(--s-teal-rgb),.10);
  color:var(--s-ink);box-shadow:var(--s-onring-teal);
}
.ui-seg__btn.is-on .ui-seg__sub{color:var(--s-teal)}

/* Underline tabs for dense instructor views */
.ui-tabs{display:flex;gap:var(--s-sp-1);border-bottom:1px solid var(--s-line);overflow-x:auto}
.ui-tab{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;padding:10px 14px;cursor:pointer;color:var(--s-ink-3);
  font:600 var(--s-fs-sm)/1 var(--s-font-sans);white-space:nowrap;
  transition:color var(--s-dur-1) var(--s-ease),border-color var(--s-dur-1) var(--s-ease);
}
.ui-tab:hover{color:var(--s-ink-2)}
.ui-tab.is-on{color:var(--s-teal);border-bottom-color:var(--s-teal)}

/* ===================== TONED SECTION (sim .railsec/.sec-*) =================
   A grouped control section carrying one of the four instrument tones:
   colored tick + tinted border + faint gradient wash. Exact sim values.     */
.ui-sec{--sec:var(--s-teal);--sec-line:#123a32;
  border:1px solid var(--sec-line);border-radius:var(--s-r-lg);
  padding:11px 13px 13px;background:linear-gradient(180deg,rgba(var(--sec-rgb,34,224,176),.06),transparent);
}
.ui-sec__h{
  display:flex;align-items:center;gap:9px;margin:0 0 11px;padding-bottom:9px;
  border-bottom:1px solid var(--sec-line);color:var(--sec);
  font:800 12px/1 var(--s-font-mono);letter-spacing:.13em;text-transform:uppercase;
}
.ui-sec__h::before{content:'';width:4px;height:14px;border-radius:3px;background:var(--sec);box-shadow:0 0 10px var(--sec)}
.ui-sec--teal  {--sec:#2ee0b0;--sec-rgb:46,224,176; --sec-line:#123a32}
.ui-sec--amber {--sec:#ffc94a;--sec-rgb:255,201,74; --sec-line:#3a3319}
.ui-sec--blue  {--sec:#63b6ff;--sec-rgb:99,182,255; --sec-line:#1c3350}
.ui-sec--violet{--sec:#c99bff;--sec-rgb:201,155,255;--sec-line:#2c2547}

/* ============================ FORM CONTROLS ================================ */
.ui-label{
  display:block;color:var(--s-ink-3);margin-bottom:6px;
  font:700 var(--s-fs-2xs)/1 var(--s-font-mono);
  letter-spacing:var(--s-track-label);text-transform:uppercase;
}
.ui-input,.ui-select{
  appearance:none;-webkit-appearance:none;width:100%;box-sizing:border-box;
  min-height:var(--s-ctl-h);padding:0 var(--s-sp-3);
  background:var(--s-bg-1);border:1px solid var(--s-line-2);border-radius:var(--s-r-md);
  color:var(--s-ink);font:500 var(--s-fs-md)/1.2 var(--s-font-sans);
  transition:border-color var(--s-dur-1) var(--s-ease),box-shadow var(--s-dur-2) var(--s-ease);
}
.ui-input::placeholder{color:var(--s-ink-4)}
.ui-input:hover,.ui-select:hover{border-color:var(--s-line-2)}
.ui-input:focus,.ui-select:focus{outline:none;border-color:var(--s-teal);box-shadow:0 0 0 3px rgba(var(--s-teal-rgb),.15)}
.ui-input[aria-invalid="true"],.ui-input.is-invalid{border-color:var(--s-danger);box-shadow:0 0 0 3px rgba(var(--s-danger-rgb),.15)}
.ui-select{
  padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23778a9b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.ui-help{margin-top:6px;color:var(--s-ink-3);font-size:var(--s-fs-sm);line-height:var(--s-lh-snug)}
.ui-error{margin-top:6px;color:var(--s-danger-ink);font-size:var(--s-fs-sm);line-height:var(--s-lh-snug)}

/* Class-code entry — mono, spaced, centered (student gate / join fields) */
.ui-input--code{
  font:700 var(--s-fs-xl)/1.2 var(--s-font-mono);text-align:center;
  letter-spacing:var(--s-track-wide);text-transform:uppercase;min-height:var(--s-ctl-h-lg);
}

/* Range — sim slider: hairline track, glowing accent thumb */
.ui-range{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;background:var(--s-bg-4);outline:none;margin:6px 0}
.ui-range::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--s-teal);cursor:pointer;border:2px solid var(--s-bg-0);box-shadow:0 0 9px rgba(var(--s-teal-rgb),.6)}
.ui-range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--s-teal);cursor:pointer;border:2px solid var(--s-bg-0);box-shadow:0 0 9px rgba(var(--s-teal-rgb),.6)}

/* Checkbox / radio — accent-tinted natives (consistent, zero-JS) */
.ui-check{accent-color:var(--s-teal);width:16px;height:16px;cursor:pointer}

/* =============================== TABLE ===================================== */
.ui-table{width:100%;border-collapse:collapse;font:500 var(--s-fs-md)/1.4 var(--s-font-sans);color:var(--s-ink-2)}
.ui-table th{
  text-align:left;color:var(--s-ink-3);padding:9px 12px;
  font:700 var(--s-fs-2xs)/1 var(--s-font-mono);letter-spacing:.10em;text-transform:uppercase;
  border-bottom:1px solid var(--s-line-2);white-space:nowrap;
}
.ui-table td{padding:10px 12px;border-bottom:1px solid var(--s-line)}
.ui-table tbody tr{transition:background var(--s-dur-1) var(--s-ease)}
.ui-table tbody tr:hover{background:rgba(var(--s-teal-rgb),.04)}
.ui-table--dense th,.ui-table--dense td{padding:6px 10px}
.ui-num{font-family:var(--s-font-mono);font-variant-numeric:tabular-nums;text-align:right}
th.ui-num{text-align:right}

/* ============================ BADGE / PILL ================================= */
.ui-pill{
  display:inline-flex;align-items:center;gap:7px;--pill:var(--s-ink-2);--pill-rgb:164,180,196;
  border:1px solid rgba(var(--pill-rgb),.4);color:var(--pill);
  background:rgba(var(--pill-rgb),.08);border-radius:var(--s-r-pill);
  padding:6px 13px;font:600 var(--s-fs-sm)/1 var(--s-font-sans);white-space:nowrap;
}
.ui-pill__dot{width:7px;height:7px;border-radius:50%;background:var(--pill);box-shadow:0 0 8px var(--pill)}
.ui-pill--teal{--pill:var(--s-teal);--pill-rgb:var(--s-teal-rgb)}
.ui-pill--amber{--pill:var(--s-amber-2);--pill-rgb:var(--s-warn-rgb)}
.ui-pill--blue{--pill:var(--s-blue);--pill-rgb:var(--s-blue-rgb)}
.ui-pill--violet{--pill:var(--s-violet);--pill-rgb:var(--s-violet-rgb)}
.ui-pill--danger{--pill:var(--s-danger);--pill-rgb:var(--s-danger-rgb)}
.ui-badge{
  display:inline-block;border-radius:7px;padding:3px 9px;
  color:var(--s-teal);background:rgba(var(--s-teal-rgb),.08);
  border:1px solid rgba(var(--s-teal-rgb),.28);
  font:600 var(--s-fs-xs)/1.4 var(--s-font-mono);white-space:nowrap;
}

/* ================================ NOTE ===================================== */
.ui-note{
  background:var(--s-panel-lo);border:1px solid var(--s-line);
  border-left:3px solid var(--s-teal);border-radius:var(--s-r-lg);
  padding:12px 14px;color:var(--s-ink-2);font-size:var(--s-fs-sm);line-height:var(--s-lh-body);
}
.ui-note b,.ui-note strong{color:var(--s-ink)}
.ui-note--warn{border-left-color:var(--s-warn)}
.ui-note--danger{border-left-color:var(--s-danger)}
.ui-note--info{border-left-color:var(--s-blue)}

/* ================================ MODAL ==================================== */
.ui-modal{
  position:fixed;inset:0;z-index:var(--s-z-modal);display:none;
  align-items:center;justify-content:center;padding:var(--s-sp-5);
  background:rgba(3,5,9,.74);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.ui-modal.is-open{display:flex}
.ui-modal__card{
  width:min(560px,100%);max-height:min(84vh,860px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--s-panel-hi),var(--s-panel-lo));
  border:1px solid var(--s-line-2);border-radius:var(--s-r-xl);box-shadow:var(--s-elev-3);
}
.ui-modal__h{
  display:flex;align-items:center;gap:var(--s-sp-3);
  padding:var(--s-sp-4) var(--s-sp-5);border-bottom:1px solid var(--s-line);
  color:var(--s-ink);font:700 var(--s-fs-lg)/1.2 var(--s-font-sans);letter-spacing:var(--s-track-tight);
}
.ui-modal__b{padding:var(--s-sp-4) var(--s-sp-5);overflow-y:auto;color:var(--s-ink-2);font-size:var(--s-fs-md);line-height:var(--s-lh-body)}
.ui-modal__f{display:flex;justify-content:flex-end;gap:var(--s-sp-2);padding:var(--s-sp-3) var(--s-sp-5) var(--s-sp-4);border-top:1px solid var(--s-line)}
.ui-modal__x{
  margin-left:auto;flex:none;width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:1px solid var(--s-line-2);background:var(--s-bg-2);color:var(--s-ink-2);
  font:600 15px/1 var(--s-font-mono);
  transition:border-color var(--s-dur-1) var(--s-ease),color var(--s-dur-1) var(--s-ease);
}
.ui-modal__x:hover{border-color:var(--s-teal);color:var(--s-ink)}
/* styleguide-only: render a modal inline, out of the fixed layer */
.ui-modal--demo{position:static;display:flex;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}

/* ================================ TOAST ==================================== */
.ui-toast-stack{
  position:fixed;right:var(--s-sp-4);bottom:var(--s-sp-4);z-index:var(--s-z-toast);
  display:flex;flex-direction:column;gap:var(--s-sp-2);max-width:min(92vw,380px);
}
.ui-toast{
  --tone:var(--s-teal);--tone-rgb:var(--s-teal-rgb);
  display:flex;align-items:flex-start;gap:10px;
  background:linear-gradient(180deg,var(--s-panel-hi),var(--s-panel-lo));
  border:1px solid var(--s-line-2);border-left:3px solid var(--tone);
  border-radius:var(--s-r-lg);box-shadow:var(--s-elev-2);
  padding:12px 14px;color:var(--s-ink);font:500 var(--s-fs-sm)/1.45 var(--s-font-sans);
  animation:ui-toast-in var(--s-dur-3) var(--s-ease-out);
}
.ui-toast__dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--tone);box-shadow:0 0 10px rgba(var(--tone-rgb),.8)}
.ui-toast b{font-weight:700}
.ui-toast--ok{--tone:var(--s-ok);--tone-rgb:var(--s-ok-rgb)}
.ui-toast--warn{--tone:var(--s-warn);--tone-rgb:var(--s-warn-rgb)}
.ui-toast--danger{--tone:var(--s-danger);--tone-rgb:var(--s-danger-rgb)}
.ui-toast--info{--tone:var(--s-blue);--tone-rgb:var(--s-blue-rgb)}
@keyframes ui-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================ SMALL PARTS ================================== */
.ui-eyebrow{
  color:var(--s-teal);font:700 var(--s-fs-xs)/1 var(--s-font-mono);
  letter-spacing:var(--s-track-wide);text-transform:uppercase;
}
.ui-kbd{
  display:inline-block;padding:2px 7px;border-radius:6px;
  border:1px solid var(--s-line-2);border-bottom-width:2px;background:var(--s-bg-2);
  color:var(--s-ink-2);font:600 var(--s-fs-xs)/1.4 var(--s-font-mono);
}
.ui-hr{border:0;height:1px;margin:var(--s-sp-4) 0;
  background:linear-gradient(90deg,transparent,var(--s-line-2),transparent)}
.ui-spin{
  display:inline-block;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(var(--s-teal-rgb),.25);border-top-color:var(--s-teal);
  animation:ui-spin 700ms linear infinite;
}
@keyframes ui-spin{to{transform:rotate(360deg)}}
.ui-scroll{scrollbar-width:thin;scrollbar-color:var(--s-bg-4) transparent}
.ui-scroll::-webkit-scrollbar{width:8px;height:8px}
.ui-scroll::-webkit-scrollbar-thumb{background:var(--s-bg-4);border-radius:8px}
.ui-visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  .ui-toast{animation:none}
  .ui-spin{animation-duration:1.4s}   /* keep meaning, drop the whirl */
}