/* Lab Value Lanes — Nursia theme layer.
   Menus, intro, pause, debrief, end, the HUD strip, the guide hint and the
   critical-action sheet wear Nursia paper + ink. The canvas chute (the play
   surface) is drawn in JS and stays dark, so the Low / Normal / High lane
   colours and the tube cap colours keep reading the way the game teaches. */

/* ---------- layout: stack the bar above a stage that fits under it ---------- */
html:has(body[data-nursia-clinic="lab-lanes"]),
body[data-nursia-clinic="lab-lanes"] {
  background: var(--nc-paper);
  color: var(--nc-ink);
}
body[data-nursia-clinic="lab-lanes"] {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
[data-nursia-clinic="lab-lanes"] > .nc-bar {
  width: 100%;
  flex: none;
}
[data-nursia-clinic="lab-lanes"] #stage {
  flex: none;
  height: calc(100dvh - var(--nc-bar-h));
  border-left: 1px solid var(--nc-rule);
  border-right: 1px solid var(--nc-rule);
}
@media (max-width: 560px) {
  [data-nursia-clinic="lab-lanes"] #stage { border: 0; }
}
[data-nursia-clinic="lab-lanes"] #stage.w360 { box-shadow: none; }

/* ---------- HUD: a solid paper strip over the canvas's reserved 44px ---------- */
[data-nursia-clinic="lab-lanes"] #hud {
  background: var(--nc-paper);
  border-bottom: 1px solid var(--nc-rule);
  color: var(--nc-ink);
  font-family: var(--nc-font-mono);
  font-size: 13px;
  font-weight: 500;
}
[data-nursia-clinic="lab-lanes"] #hud-score {
  font-family: var(--nc-font-ui);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
[data-nursia-clinic="lab-lanes"] #hud-level,
[data-nursia-clinic="lab-lanes"] #hud-progress {
  color: var(--nc-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
[data-nursia-clinic="lab-lanes"] .mult {
  border-radius: var(--nc-radius-btn);
  background: transparent;
  border: 1px solid var(--nc-rule);
  color: var(--nc-ink-2);
  font-family: var(--nc-font-mono);
  font-size: 12px;
}
[data-nursia-clinic="lab-lanes"] .mult.on {
  background: var(--nc-highlight);
  border-color: var(--nc-highlight);
  color: var(--nc-ink);
}
[data-nursia-clinic="lab-lanes"] #hud-strikes i {
  background: var(--nc-paper-2);
  border-color: var(--nc-muted);
}
[data-nursia-clinic="lab-lanes"] #hud-strikes i.lit {
  background: var(--nc-wrong);
  border-color: var(--nc-wrong);
  box-shadow: none;
}
[data-nursia-clinic="lab-lanes"] .icon-btn {
  color: var(--nc-ink);
  font-family: var(--nc-font-ui);
  font-weight: 700;
  border-radius: var(--nc-radius-btn);
}
[data-nursia-clinic="lab-lanes"] .icon-btn:hover {
  background: var(--nc-paper-2);
  color: var(--nc-ink);
}
[data-nursia-clinic="lab-lanes"] .icon-btn:focus-visible {
  background: var(--nc-paper-2);
  color: var(--nc-ink);
  outline: 2px solid var(--nc-teal);
  outline-offset: -2px;
}

/* ---------- guide hint ---------- */
[data-nursia-clinic="lab-lanes"] #hint {
  background: var(--nc-highlight);
  color: var(--nc-ink);
  border-radius: var(--nc-radius-btn);
  font-family: var(--nc-font-ui);
  box-shadow: var(--nc-shadow);
}

/* ---------- critical action sheet ---------- */
[data-nursia-clinic="lab-lanes"] #action {
  background: var(--nc-paper);
  border-top: 1px solid var(--nc-rule);
  box-shadow: 0 -10px 24px -18px rgba(20, 22, 26, 0.5);
}
[data-nursia-clinic="lab-lanes"] #action-title {
  color: var(--nc-wrong);
  font-family: var(--nc-font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
[data-nursia-clinic="lab-lanes"] #action-ring { background: var(--nc-rule); border-radius: 0; }
[data-nursia-clinic="lab-lanes"] #action-timer { background: var(--nc-wrong); }
[data-nursia-clinic="lab-lanes"] .chip {
  background: var(--nc-card);
  border: 1px solid var(--nc-rule);
  color: var(--nc-ink);
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
  font-family: var(--nc-font-body);
  font-size: 15px;
}
[data-nursia-clinic="lab-lanes"] .chip b {
  background: var(--nc-paper-2);
  color: var(--nc-ink-2);
  border-radius: 2px;
  font-family: var(--nc-font-mono);
}
[data-nursia-clinic="lab-lanes"] .chip:hover,
[data-nursia-clinic="lab-lanes"] .chip:focus-visible {
  border-color: var(--nc-ink);
}
[data-nursia-clinic="lab-lanes"] .chip:focus-visible {
  outline: 2px solid var(--nc-teal);
  outline-offset: 2px;
}
[data-nursia-clinic="lab-lanes"] .chip.right {
  background: #e7f3ec;
  border-color: var(--nc-correct);
}
[data-nursia-clinic="lab-lanes"] .chip.right b { background: var(--nc-correct); color: #fff; }
[data-nursia-clinic="lab-lanes"] .chip.picked-wrong {
  background: #f8e6e3;
  border-color: var(--nc-wrong);
}
[data-nursia-clinic="lab-lanes"] #action-why {
  color: var(--nc-ink-2);
  font-family: var(--nc-font-body);
  font-size: 14px;
}

/* ---------- screens (start, intro, pause, debrief, end, sources) ---------- */
[data-nursia-clinic="lab-lanes"] .screen {
  background: rgba(251, 250, 246, 0.985);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--nc-ink);
}
[data-nursia-clinic="lab-lanes"] h1,
[data-nursia-clinic="lab-lanes"] h2 {
  font-family: var(--nc-font-ui);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--nc-ink);
}
[data-nursia-clinic="lab-lanes"] .shift {
  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="lab-lanes"] .promise {
  font-weight: 600;
  letter-spacing: -0.01em;
}
[data-nursia-clinic="lab-lanes"] .how,
[data-nursia-clinic="lab-lanes"] #intro-rule,
[data-nursia-clinic="lab-lanes"] #debrief-sub,
[data-nursia-clinic="lab-lanes"] #sources p {
  color: var(--nc-ink-2);
  font-family: var(--nc-font-body);
  font-size: 16px;
  line-height: 1.5;
}
/* Lane words on paper: same hues, darkened to pass 4.5:1. */
[data-nursia-clinic="lab-lanes"] .screen .lo { color: #2457c5; }
[data-nursia-clinic="lab-lanes"] .screen .ok { color: var(--nc-correct); }
[data-nursia-clinic="lab-lanes"] .screen .hi { color: #9a5800; }
[data-nursia-clinic="lab-lanes"] .best,
[data-nursia-clinic="lab-lanes"] #end-best {
  color: var(--nc-ink-2);
}
[data-nursia-clinic="lab-lanes"] .controls {
  color: var(--nc-muted);
  font-family: var(--nc-font-mono);
  font-size: 12px;
}
[data-nursia-clinic="lab-lanes"] .primary {
  border-radius: var(--nc-radius-btn);
  background: var(--nc-teal);
  color: #fff;
  font-family: var(--nc-font-ui);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  min-height: 48px;
  transition: background-color 0.16s ease;
}
[data-nursia-clinic="lab-lanes"] .primary:hover,
[data-nursia-clinic="lab-lanes"] .primary:focus-visible {
  transform: none;
  background: var(--nc-teal-dark);
}
[data-nursia-clinic="lab-lanes"] .primary:focus-visible {
  outline: 2px solid var(--nc-teal);
  outline-offset: 3px;
}
[data-nursia-clinic="lab-lanes"] .primary:hover:not(:focus-visible) { outline: none; }
[data-nursia-clinic="lab-lanes"] .link {
  color: var(--nc-ink-2);
  font-family: var(--nc-font-ui);
  font-weight: 500;
  border-radius: var(--nc-radius-btn);
}
[data-nursia-clinic="lab-lanes"] .link:hover { color: var(--nc-ink); outline: none; }
[data-nursia-clinic="lab-lanes"] .link:focus-visible {
  color: var(--nc-ink);
  outline: 2px solid var(--nc-teal);
}
[data-nursia-clinic="lab-lanes"] .cap {
  background: var(--nc-card);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  color: var(--nc-ink);
}
[data-nursia-clinic="lab-lanes"] .cap i { box-shadow: inset 0 0 0 1px rgba(20, 22, 26, 0.15); }
[data-nursia-clinic="lab-lanes"] #debrief-list li,
[data-nursia-clinic="lab-lanes"] #end-levels li {
  background: var(--nc-card);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  color: var(--nc-ink);
  font-family: var(--nc-font-body);
  font-size: 15px;
}
[data-nursia-clinic="lab-lanes"] #debrief-list li b {
  font-family: var(--nc-font-ui);
  font-weight: 700;
}
[data-nursia-clinic="lab-lanes"] #debrief-list li .act,
[data-nursia-clinic="lab-lanes"] #debrief-list li.none {
  color: var(--nc-ink-2);
}
[data-nursia-clinic="lab-lanes"] .big {
  font-family: var(--nc-font-ui);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--nc-ink);
}
[data-nursia-clinic="lab-lanes"] code {
  font-family: var(--nc-font-mono);
  color: var(--nc-ink);
  background: var(--nc-paper-2);
  padding: 1px 4px;
  border-radius: 2px;
}