/* Gown Up, Gown Down — Nursia theme layer.
   Start screen, top bar, buttons, cart items, overlays, debrief / level-end
   cards and dialogs wear Nursia paper + ink + teal. The play surface keeps its
   look: the mint isolation room, door and precaution sign, the mirror, the
   nurse figure and the PPE colours (yellow gown, blue nitrile gloves, purple
   germ splash) all carry meaning and stay as drawn. */

[data-nursia-clinic="gown-up"] {
  --font: var(--nc-font-ui);
  --ink: var(--nc-ink);
  --mute: var(--nc-muted);
}

body[data-nursia-clinic="gown-up"] {
  background: var(--nc-paper);
}
/* Fit below the bar: body is overflow:hidden, so a 100dvh app was losing its bottom 48px. */
[data-nursia-clinic="gown-up"] #app {
  height: calc(100dvh - var(--nc-bar-h));
  background: var(--nc-paper);
}
[data-nursia-clinic="gown-up"] h1,
[data-nursia-clinic="gown-up"] h2,
[data-nursia-clinic="gown-up"] h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
[data-nursia-clinic="gown-up"] :focus-visible {
  outline: 2px solid var(--nc-teal);
  outline-offset: 2px;
}

/* ---------- buttons ---------- */
[data-nursia-clinic="gown-up"] .btn {
  border: 1px solid var(--nc-ink);
  border-radius: var(--nc-radius-btn);
  background: transparent;
  color: var(--nc-ink);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
[data-nursia-clinic="gown-up"] .btn:hover {
  transform: none;
  box-shadow: none;
  background: var(--nc-ink);
  color: var(--nc-paper);
}
[data-nursia-clinic="gown-up"] .btn:active { transform: translateY(1px); }
[data-nursia-clinic="gown-up"] .btn-primary {
  background: var(--nc-teal);
  border-color: var(--nc-teal);
  color: #fff;
  font-weight: 700;
}
[data-nursia-clinic="gown-up"] .btn-primary:hover {
  background: var(--nc-teal-dark);
  border-color: var(--nc-teal-dark);
  color: #fff;
}
[data-nursia-clinic="gown-up"] .btn-big { font-size: 18px; }
[data-nursia-clinic="gown-up"] .btn-line {
  border-style: dashed;
  border-color: var(--nc-wrong);
  color: var(--nc-wrong);
  background: var(--nc-card);
}
[data-nursia-clinic="gown-up"] .btn-line:hover {
  background: var(--nc-wrong);
  border-color: var(--nc-wrong);
  color: #fff;
}
[data-nursia-clinic="gown-up"] .btn-enter { box-shadow: var(--nc-shadow); }

/* ---------- start ---------- */
[data-nursia-clinic="gown-up"] .start-copy h1 { color: var(--nc-ink); }
[data-nursia-clinic="gown-up"] .lede {
  font-family: var(--nc-font-body);
  color: var(--nc-ink-2);
  line-height: 1.5;
}
[data-nursia-clinic="gown-up"] .best-row {
  font-family: var(--nc-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nc-muted);
}
[data-nursia-clinic="gown-up"] .best-row span {
  background: var(--nc-card);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius-btn);
  padding: 4px 8px;
}
/* The mirror on the start screen is a preview of the play surface: keep its
   shape, but quiet the halo so it sits on paper. */
[data-nursia-clinic="gown-up"] .start-mirror {
  box-shadow: inset 0 0 0 4px #E9F4EF, var(--nc-shadow);
}

/* ---------- top bar (HUD) ---------- */
[data-nursia-clinic="gown-up"] .topbar {
  background: var(--nc-paper);
  border-bottom: 1px solid var(--nc-rule);
  padding-top: 10px;
}
[data-nursia-clinic="gown-up"] .tb-level {
  font-family: var(--nc-font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
[data-nursia-clinic="gown-up"] .tb-patient {
  color: var(--nc-ink-2);
  font-family: var(--nc-font-body);
}
[data-nursia-clinic="gown-up"] .streak-x {
  background: var(--nc-ink);
  border-radius: 2px;
  font-family: var(--nc-font-mono);
  font-size: 13px;
}
[data-nursia-clinic="gown-up"] .streak-x.hot {
  background: var(--nc-highlight);
  color: var(--nc-ink);
}
[data-nursia-clinic="gown-up"] .streak-n { font-family: var(--nc-font-mono); }
[data-nursia-clinic="gown-up"] .tb-score {
  font-weight: 700;
  letter-spacing: -0.02em;
}
[data-nursia-clinic="gown-up"] .timer,
[data-nursia-clinic="gown-up"] .meter-track {
  background: var(--nc-paper-2);
  border-radius: 0;
}
[data-nursia-clinic="gown-up"] .timer i { background: var(--nc-teal); }
[data-nursia-clinic="gown-up"] .timer i.low { background: var(--nc-wrong); }
[data-nursia-clinic="gown-up"] .meter {
  font-family: var(--nc-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- cart items + worn list (tappable UI) ---------- */
[data-nursia-clinic="gown-up"] .hook {
  background: var(--nc-card);
  border: 1px solid var(--nc-ink);
  border-radius: var(--nc-radius);
  font-weight: 600;
}
[data-nursia-clinic="gown-up"] .hook:hover {
  transform: translateY(-1px);
  box-shadow: var(--nc-shadow);
}
[data-nursia-clinic="gown-up"] .hook.selected {
  background: #E3E6FA;
  border-color: var(--nitrile);
  box-shadow: 0 0 0 2px var(--nitrile);
}
[data-nursia-clinic="gown-up"] .hook.used:hover { box-shadow: none; }
[data-nursia-clinic="gown-up"] .hook kbd {
  font-family: var(--nc-font-mono);
  border-radius: 2px;
}
[data-nursia-clinic="gown-up"] .worn-title {
  font-family: var(--nc-font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- in-room helper text ---------- */
[data-nursia-clinic="gown-up"] .hint {
  background: var(--nc-card);
  border: 1px solid var(--nc-ink);
  border-radius: var(--nc-radius-btn);
  box-shadow: var(--nc-shadow);
}
[data-nursia-clinic="gown-up"] .np-switch {
  border: 1px solid var(--nc-ink);
  border-radius: var(--nc-radius-btn);
  background: var(--nc-card);
}
[data-nursia-clinic="gown-up"] .rule-card {
  border-radius: var(--nc-radius);
  font-family: var(--nc-font-body);
  line-height: 1.45;
}
[data-nursia-clinic="gown-up"] .rule-card::before {
  background: var(--nc-highlight);
  border-radius: 0;
}
[data-nursia-clinic="gown-up"] .drop-hint {
  border-radius: var(--nc-radius-btn);
}

/* ---------- overlays (sign pick, hand hygiene, level intro) ---------- */
[data-nursia-clinic="gown-up"] .overlay {
  background: rgba(251, 250, 246, 0.94);
  backdrop-filter: blur(3px);
}
[data-nursia-clinic="gown-up"] .sp-title,
[data-nursia-clinic="gown-up"] .intro-k,
[data-nursia-clinic="gown-up"] .card-k {
  color: var(--nc-muted);
  font-family: var(--nc-font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
[data-nursia-clinic="gown-up"] .sp-ask,
[data-nursia-clinic="gown-up"] #wash-line,
[data-nursia-clinic="gown-up"] #intro-teach {
  font-family: var(--nc-font-body);
  font-size: 17px;
  color: var(--nc-ink-2);
}
/* The sign buttons are precaution signs (header colour = precaution type). */
[data-nursia-clinic="gown-up"] .sign-btn {
  border: 1px solid var(--nc-ink);
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
}
[data-nursia-clinic="gown-up"] .sign-btn small { color: var(--nc-ink-2); }
[data-nursia-clinic="gown-up"] .chip {
  background: var(--nc-card);
  border: 1px solid var(--nc-ink);
  border-radius: var(--nc-radius-btn);
  font-size: 14px;
}
[data-nursia-clinic="gown-up"] .chip.ok { border-color: var(--nc-correct); color: var(--nc-correct); }
[data-nursia-clinic="gown-up"] .chip.bad { border-color: var(--germ); color: #7d2f9c; }

/* ---------- debrief / level end / end cards ---------- */
[data-nursia-clinic="gown-up"] .card {
  background: var(--nc-card);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
}
[data-nursia-clinic="gown-up"] .order-label {
  font-family: var(--nc-font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
[data-nursia-clinic="gown-up"] .why {
  font-family: var(--nc-font-body);
  line-height: 1.5;
}
[data-nursia-clinic="gown-up"] .mnemonic {
  font-family: var(--nc-font-mono);
  font-size: 13px;
  color: var(--nc-ink);
}
[data-nursia-clinic="gown-up"] .mnemonic:not(:empty) {
  display: inline-block;
  background: var(--nc-highlight);
  padding: 2px 6px;
  border-radius: 2px;
}
[data-nursia-clinic="gown-up"] .muted { color: var(--nc-ink-2); }
[data-nursia-clinic="gown-up"] .stars i { background: var(--nc-rule); }
[data-nursia-clinic="gown-up"] .stars i.lit { background: var(--gown); }
[data-nursia-clinic="gown-up"] .score-big {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- dialogs ---------- */
[data-nursia-clinic="gown-up"] dialog {
  font-family: var(--nc-font-ui);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  background: var(--nc-card);
  color: var(--nc-ink);
  box-shadow: var(--nc-shadow);
}
[data-nursia-clinic="gown-up"] dialog::backdrop { background: rgba(20, 22, 26, 0.4); }
[data-nursia-clinic="gown-up"] dialog ol,
[data-nursia-clinic="gown-up"] dialog p {
  font-family: var(--nc-font-body);
  color: var(--nc-ink-2);
  line-height: 1.5;
}

@container (max-width: 640px) {
  [data-nursia-clinic="gown-up"] .best-row { justify-content: center; }
}