/* ============================================================
   Bedside Live — Nursia theme layer (Frame + UI).

   Wears Nursia: title / case select, handoff, chart, SBAR call, recheck,
   pause, credits and debrief cards; the clock + buttons in the HUD, the
   notepad, view switcher, action sheet, toasts, speech bubble, hotspot chips.
   Stays as the game draws it: the 3D room and the vital-signs readout
   (HR green / SpO2 cyan / RR yellow / BP red on a dark monitor panel), plus
   the debrief sparkline, which is drawn in those same monitor colours.
   ============================================================ */

/* --- layout: sit below the 48px bar -------------------------
   #app becomes the containing block for the game's position:fixed layers
   (transform), so the HUD, overlays and hotspot layer all start under the
   bar. The canvas keeps the full window height because game.js sizes the
   renderer and projects hotspot chips from innerWidth x innerHeight; a
   shorter canvas would squash the room and misplace the chips. The bottom
   48px of the room is clipped instead. */
[data-nursia-clinic="bedside-live"] #app {
  top: var(--nc-bar-h);
  bottom: 0;
  height: auto;
  overflow: hidden;
  transform: translateZ(0);
}
[data-nursia-clinic="bedside-live"] #gl {
  bottom: auto;
  height: 100vh;
  height: 100dvh;
}
[data-nursia-clinic="bedside-live"] .card {
  max-height: calc(100dvh - var(--nc-bar-h) - 32px);
}

/* --- overlay cards (title, chart, SBAR, debrief, pause …) ---- */
[data-nursia-clinic="bedside-live"] #ov {
  --panel: var(--nc-paper);
  --ink: var(--nc-ink);
  --mute: var(--nc-muted);
  --line: var(--nc-rule);
  --sp: var(--nc-teal);
  --hr: var(--nc-teal);
  --good: var(--nc-correct);
  --bad: var(--nc-wrong);
  --warn: #8a5a00;
  color-scheme: light;
  background: rgba(20, 22, 26, 0.45);
}
[data-nursia-clinic="bedside-live"] #ov .card {
  background: var(--nc-paper);
  color: var(--nc-ink);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  box-shadow: 0 24px 60px -24px rgba(20, 22, 26, 0.55);
  padding: 22px;
}
[data-nursia-clinic="bedside-live"] #ov .card h1 {
  font: 700 36px/1.05 var(--nc-font-ui);
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
[data-nursia-clinic="bedside-live"] #ov .card h2 {
  font: 700 22px/1.2 var(--nc-font-ui);
  letter-spacing: -0.02em;
}
[data-nursia-clinic="bedside-live"] #ov .card p,
[data-nursia-clinic="bedside-live"] #ov .card ul,
[data-nursia-clinic="bedside-live"] #ov .cols {
  font-family: var(--nc-font-body);
}
[data-nursia-clinic="bedside-live"] #ov .muted {
  color: var(--nc-muted);
}
/* the title card's "All games" link: the bar's "All cases" replaces it */
[data-nursia-clinic="bedside-live"] #ov a[href="../"] {
  display: none;
}
[data-nursia-clinic="bedside-live"] #ov .rule {
  border-left-color: var(--nc-teal);
  font-family: var(--nc-font-ui);
  font-weight: 600;
}
[data-nursia-clinic="bedside-live"] #ov .bar,
[data-nursia-clinic="bedside-live"] #ov .loadbar {
  border-radius: 2px;
}
[data-nursia-clinic="bedside-live"] #ov .bars {
  font-family: var(--nc-font-mono);
  font-size: 13px;
}
/* debrief sparkline: a strip of monitor, with its legend on the same glass */
[data-nursia-clinic="bedside-live"] #ov canvas.spark {
  background: #14161a;
  border-radius: var(--nc-radius) var(--nc-radius) 0 0;
  display: block;
}
[data-nursia-clinic="bedside-live"] #ov canvas.spark + p {
  --hr: #3ee07a;
  --sp: #3cc8f0;
  --bp: #ff6a5c;
  margin: 0 0 10px;
  padding: 4px 10px 6px;
  background: #14161a;
  color: #c4c8ce;
  border-radius: 0 0 var(--nc-radius) var(--nc-radius);
  font-family: var(--nc-font-mono);
  font-size: 12px !important;
}

/* --- buttons everywhere except the dark vitals panel ---------- */
[data-nursia-clinic="bedside-live"] button {
  border-radius: var(--nc-radius-btn);
  font-weight: 600;
  letter-spacing: -0.01em;
}
[data-nursia-clinic="bedside-live"] #ov button,
[data-nursia-clinic="bedside-live"] .clockbox button,
[data-nursia-clinic="bedside-live"] .hbtns button,
[data-nursia-clinic="bedside-live"] #views button,
[data-nursia-clinic="bedside-live"] #sheetBtns button,
[data-nursia-clinic="bedside-live"] #sheetX {
  background: var(--nc-card);
  color: var(--nc-ink);
  border: 1px solid var(--nc-rule);
}
[data-nursia-clinic="bedside-live"] #ov button:hover,
[data-nursia-clinic="bedside-live"] .clockbox button:hover,
[data-nursia-clinic="bedside-live"] .hbtns button:hover,
[data-nursia-clinic="bedside-live"] #views button:hover,
[data-nursia-clinic="bedside-live"] #sheetBtns button:hover,
[data-nursia-clinic="bedside-live"] #sheetX:hover {
  border-color: var(--nc-ink);
  background: var(--nc-card);
}
[data-nursia-clinic="bedside-live"] #ov button.primary,
[data-nursia-clinic="bedside-live"] #ov .tabs button.on,
[data-nursia-clinic="bedside-live"] #views button.on {
  background: var(--nc-teal);
  border-color: var(--nc-teal);
  color: #fff;
}
[data-nursia-clinic="bedside-live"] #ov button.primary:hover {
  background: var(--nc-teal-dark);
  border-color: var(--nc-teal-dark);
}
[data-nursia-clinic="bedside-live"] #ov .pick button.sel {
  background: #e3f0ee;
  border-color: var(--nc-teal);
  box-shadow: inset 3px 0 0 var(--nc-teal);
}
[data-nursia-clinic="bedside-live"] #ov .cases button[disabled] {
  opacity: 0.55;
}
[data-nursia-clinic="bedside-live"] button:focus-visible {
  outline: 2px solid var(--nc-teal);
  outline-offset: 2px;
}

/* --- HUD: clock + buttons wear Nursia, vitals stay a monitor --- */
[data-nursia-clinic="bedside-live"] #hud > .clockbox,
[data-nursia-clinic="bedside-live"] #hud > .hbtns {
  background: var(--nc-paper);
  color: var(--nc-ink);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
}
[data-nursia-clinic="bedside-live"] #clock {
  font-family: var(--nc-font-mono);
  font-weight: 600;
  font-size: 20px;
}
[data-nursia-clinic="bedside-live"] #hud > #vit {
  background: #14161a;
  border-radius: var(--nc-radius);
  font-family: var(--nc-font-mono);
}
[data-nursia-clinic="bedside-live"] #vit b {
  font-weight: 600;
}

/* --- notepad, view switcher, action sheet, toasts ------------- */
[data-nursia-clinic="bedside-live"] #notes,
[data-nursia-clinic="bedside-live"] #views,
[data-nursia-clinic="bedside-live"] #sheet,
[data-nursia-clinic="bedside-live"] #toast {
  --mute: var(--nc-muted);
  --line: var(--nc-rule);
  color-scheme: light;
  background: var(--nc-paper);
  color: var(--nc-ink);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  box-shadow: 0 10px 30px -12px rgba(20, 22, 26, 0.45);
}
[data-nursia-clinic="bedside-live"] #notesHead {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--nc-rule);
  color: var(--nc-ink);
  font-family: var(--nc-font-ui);
}
[data-nursia-clinic="bedside-live"] #notes.closed #notesHead {
  border-bottom: 0;
}
[data-nursia-clinic="bedside-live"] #noteList {
  font-family: var(--nc-font-body);
  padding-top: 2px;
}
[data-nursia-clinic="bedside-live"] #noteList li small {
  font-family: var(--nc-font-mono);
}
[data-nursia-clinic="bedside-live"] #sheetTitle {
  align-items: center;
  font-family: var(--nc-font-ui);
}
[data-nursia-clinic="bedside-live"] #sheetBtns button small {
  font-family: var(--nc-font-mono);
  color: var(--nc-muted);
}
[data-nursia-clinic="bedside-live"] #toast {
  border-left: 4px solid var(--nc-teal);
}
[data-nursia-clinic="bedside-live"] #toast.bad {
  border: 1px solid var(--nc-rule);
  border-left: 4px solid var(--nc-wrong);
  background: #fbecea;
  color: var(--nc-wrong);
}
[data-nursia-clinic="bedside-live"] #bubble {
  color: var(--nc-ink);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  font-family: var(--nc-font-body);
  box-shadow: 0 10px 30px -12px rgba(20, 22, 26, 0.45);
}

/* hotspot chips on the room */
[data-nursia-clinic="bedside-live"] .hs {
  background: rgba(255, 255, 255, 0.95);
  color: var(--nc-ink);
  border: 1px solid var(--nc-ink);
  border-radius: var(--nc-radius-btn);
  font-weight: 600;
}
[data-nursia-clinic="bedside-live"] .hs i {
  background: var(--nc-ink);
  color: #fff;
  border-radius: 2px;
}
[data-nursia-clinic="bedside-live"] .hs.glow {
  animation-name: nc-bl-glow;
}
@keyframes nc-bl-glow {
  50% { box-shadow: 0 0 0 6px rgba(11, 107, 98, 0.35); }
}

@media (max-width: 640px) {
  [data-nursia-clinic="bedside-live"] #clock {
    font-size: 16px;
  }
}