/* ============================================================
   Safety Sweep — Nursia theme layer.
   The 3D room keeps its colours, and so do the fix/miss stamps, the found
   dots and the timer ring (teal = fixed, coral = mistake). Panels, buttons,
   HUD chips, toasts and result lists wear Nursia.

   The canvas stays full-viewport on purpose: scene.js sizes the renderer
   and maps taps with innerWidth/innerHeight, so moving the canvas below the
   bar would shift every tap by 48px. Only the HTML layers move down; the
   bar covers the top 48px of the room (ceiling in every viewpoint).
   ============================================================ */

:root {
  --ink: var(--nc-ink);
  --vinyl: var(--nc-paper);
}

/* --- layout: HTML layers sit below the 48px bar ---------------- */
[data-nursia-clinic="safety-sweep"] .screen,
[data-nursia-clinic="safety-sweep"] .hud {
  top: var(--nc-bar-h);
}
[data-nursia-clinic="safety-sweep"] .reel-bar {
  top: calc(12px + var(--sat) + var(--nc-bar-h));
}
[data-nursia-clinic="safety-sweep"] .panel {
  max-height: calc(100dvh - var(--nc-bar-h) - 32px);
}

/* --- type ------------------------------------------------------ */
[data-nursia-clinic="safety-sweep"],
[data-nursia-clinic="safety-sweep"] button { font-family: var(--nc-font-ui); }
[data-nursia-clinic="safety-sweep"] h1,
[data-nursia-clinic="safety-sweep"] h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--nc-ink);
}
[data-nursia-clinic="safety-sweep"] h1::before {
  content: "Safety & infection control";
  display: block;
  margin-bottom: 10px;
  font-family: var(--nc-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nc-muted);
}
[data-nursia-clinic="safety-sweep"] .sub {
  color: var(--nc-ink);
  font-weight: 600;
}
[data-nursia-clinic="safety-sweep"] .how,
[data-nursia-clinic="safety-sweep"] #credits p {
  font-family: var(--nc-font-body);
  font-weight: 400;
  color: var(--nc-ink-2);
  font-size: 16px;
}
[data-nursia-clinic="safety-sweep"] .how b { font-family: var(--nc-font-ui); font-weight: 700; color: var(--nc-ink); }
[data-nursia-clinic="safety-sweep"] .best,
[data-nursia-clinic="safety-sweep"] .seed {
  font-family: var(--nc-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--nc-ink-2);
}
[data-nursia-clinic="safety-sweep"] a { color: var(--nc-teal); }
[data-nursia-clinic="safety-sweep"] .nc-bar a { color: inherit; }

/* --- screens and panels ---------------------------------------- */
[data-nursia-clinic="safety-sweep"] .screen.dim { background: rgba(20, 22, 26, 0.55); }
[data-nursia-clinic="safety-sweep"] #loading { background: var(--nc-paper); color: var(--nc-ink-2); }
[data-nursia-clinic="safety-sweep"] #loading p { font-family: var(--nc-font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; }
[data-nursia-clinic="safety-sweep"] .load-room { border-color: var(--nc-ink); }
[data-nursia-clinic="safety-sweep"] #loadFill { background: var(--nc-teal); }
[data-nursia-clinic="safety-sweep"] .panel,
[data-nursia-clinic="safety-sweep"] .door-card {
  background: var(--nc-card);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
  color: var(--nc-ink);
}
/* the door card's yellow top edge is the precaution sign — keep it */
[data-nursia-clinic="safety-sweep"] .door-card { border-top: 10px solid #f5c518; }
[data-nursia-clinic="safety-sweep"] .door-card .hint { color: var(--nc-ink-2); font-family: var(--nc-font-body); font-weight: 400; }

/* --- buttons --------------------------------------------------- */
[data-nursia-clinic="safety-sweep"] .btn {
  background: var(--nc-teal);
  color: #fff;
  border-radius: var(--nc-radius-btn);
  font-weight: 700;
  letter-spacing: -0.01em;
}
[data-nursia-clinic="safety-sweep"] .btn:hover { background: var(--nc-teal-dark); }
[data-nursia-clinic="safety-sweep"] .btn.ghost {
  background: var(--nc-card);
  color: var(--nc-ink);
  border: 1px solid var(--nc-ink);
  font-weight: 600;
}
[data-nursia-clinic="safety-sweep"] .btn.ghost:hover { background: var(--nc-paper-2); }
[data-nursia-clinic="safety-sweep"] .reel-bar .btn.ghost {
  background: transparent;
  color: var(--nc-paper);
  border-color: var(--nc-paper);
}
[data-nursia-clinic="safety-sweep"] .btn:focus-visible,
[data-nursia-clinic="safety-sweep"] .vchip:focus-visible,
[data-nursia-clinic="safety-sweep"] .icon-btn:focus-visible,
[data-nursia-clinic="safety-sweep"] .chip-card:focus-visible {
  outline: 3px solid var(--nc-highlight);
  outline-offset: 2px;
}
[data-nursia-clinic="safety-sweep"] .panel .btn:focus-visible { outline: 2px solid var(--nc-teal); }
[data-nursia-clinic="safety-sweep"] .toggle { font-weight: 600; }
[data-nursia-clinic="safety-sweep"] .toggle input { accent-color: var(--nc-teal); }

/* --- HUD chips over the room ----------------------------------- */
[data-nursia-clinic="safety-sweep"] .chip-dark,
[data-nursia-clinic="safety-sweep"] .dots,
[data-nursia-clinic="safety-sweep"] .icon-btn,
[data-nursia-clinic="safety-sweep"] .vchip {
  background: rgba(20, 22, 26, 0.88);
  color: var(--nc-paper);
  border-radius: var(--nc-radius-btn);
}
[data-nursia-clinic="safety-sweep"] .chip-dark {
  font-family: var(--nc-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 10px;
}
[data-nursia-clinic="safety-sweep"] .t-track { fill: rgba(20, 22, 26, 0.88); }
[data-nursia-clinic="safety-sweep"] .vchip { font-weight: 600; }
[data-nursia-clinic="safety-sweep"] .vchip .k { font-family: var(--nc-font-mono); opacity: 0.7; }
[data-nursia-clinic="safety-sweep"] .vchip.on {
  background: var(--nc-card);
  color: var(--nc-ink);
}
[data-nursia-clinic="safety-sweep"] .chip-card {
  border-radius: var(--nc-radius-btn);
  background: var(--nc-highlight);
  color: var(--nc-ink);
  font-weight: 700;
}
[data-nursia-clinic="safety-sweep"] .btn.leave { box-shadow: var(--nc-shadow); }
[data-nursia-clinic="safety-sweep"] .toast {
  background: var(--nc-card);
  color: var(--nc-ink);
  border: 1px solid var(--nc-rule);
  border-left: 6px solid var(--safe);
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
  font-family: var(--nc-font-body);
  font-weight: 400;
}
[data-nursia-clinic="safety-sweep"] .toast.grey { border-left-color: #8a9396; }
[data-nursia-clinic="safety-sweep"] .toast.miss { border-left-color: var(--alarm); }
[data-nursia-clinic="safety-sweep"] .toast b { font-family: var(--nc-font-ui); font-weight: 700; }
[data-nursia-clinic="safety-sweep"] .coach,
[data-nursia-clinic="safety-sweep"] .reel-bar {
  background: var(--nc-ink);
  color: var(--nc-paper);
  border-radius: var(--nc-radius-btn);
  font-weight: 600;
}

/* --- results --------------------------------------------------- */
[data-nursia-clinic="safety-sweep"] .stars { color: #c99a06; }
[data-nursia-clinic="safety-sweep"] .list li {
  background: var(--nc-paper);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius-btn);
  font-family: var(--nc-font-body);
  font-weight: 400;
}
[data-nursia-clinic="safety-sweep"] .list li .tag { font-family: var(--nc-font-ui); font-weight: 700; }
[data-nursia-clinic="safety-sweep"] .list li.ok .tag { color: var(--nc-correct); }
[data-nursia-clinic="safety-sweep"] .list li.miss .tag { color: var(--nc-wrong); }
[data-nursia-clinic="safety-sweep"] .list li small { color: var(--nc-ink-2); }
[data-nursia-clinic="safety-sweep"] .score-big { color: var(--nc-ink); font-weight: 700; letter-spacing: -0.02em; }
[data-nursia-clinic="safety-sweep"] .bar span { font-weight: 600; }
[data-nursia-clinic="safety-sweep"] .bar i { border-radius: 0; background: var(--nc-teal); }