/* ============================================================
   PFC Scenario Dashboard — visual system
   Inspired by the TCCC Patient Treatment Dashboard chrome.
   ============================================================ */

:root {
  --bg-0: #07090a;
  --bg-1: #0c0f10;
  --bg-2: #0f1314;
  --panel: #0e1213;
  --panel-2: #131819;
  --panel-3: #1a2022;
  --border: #1f2628;
  --border-soft: #161c1e;
  --border-strong: #2a3236;

  --ink: #c8d0d3;
  --ink-bright: #e6ecee;
  --ink-mute: #6a7479;
  --ink-faint: #3a4145;
  --ink-line: #2f3639;

  --live: #6fd99a;       /* live / good */
  --warn: #f4b04a;       /* caution / amber */
  --danger: #ef5350;     /* critical */
  --info: #5ecae0;       /* cyan */
  --crit: #ff4a4a;
  --violet: #b16fd9;

  /* category accents */
  --acc-airway:        #ef5350;
  --acc-resus:         #f4b04a;
  --acc-procedure:     #5ecae0;
  --acc-monitoring:    #b16fd9;
  --acc-infection:     #ff7a59;
  --acc-special:       #ffd166;
  --acc-coord:         #6fd99a;
  --acc-triage:        #ff4a4a;
  --acc-eol:           #8a96a0;
  --acc-doc:           #c8d0d3;
  --acc-capstone:      #d4ff70;
  --acc-surgical:      #ff4a4a;
  --acc-nursing:       #5ecae0;
  --acc-assess:        #6fd99a;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ---------- LIGHT THEME / DAY MODE ----------
   Paper-on-glass clinical palette. Token names mirror dark theme. */
:root[data-theme="light"] {
  --bg-0: #eef2f4;
  --bg-1: #ffffff;
  --bg-2: #f4f7f9;
  --panel: #ffffff;
  --panel-2: #f5f8fa;
  --panel-3: #e9eef1;
  --border: #d4dbe0;
  --border-soft: #e6ebee;
  --border-strong: #b8c2c8;

  --ink: #1c2426;
  --ink-bright: #07090a;
  --ink-mute: #54616a;
  --ink-faint: #8a96a0;
  --ink-line: #c0c9cd;

  --live: #1f8a5b;
  --warn: #c78f1f;
  --danger: #c62828;
  --info: #1f7a99;
  --crit: #d11616;
  --violet: #7a3fa3;

  --acc-airway:        #c62828;
  --acc-resus:         #c78f1f;
  --acc-procedure:     #1f7a99;
  --acc-monitoring:    #7a3fa3;
  --acc-infection:     #c4441b;
  --acc-special:       #b4831a;
  --acc-coord:         #1f8a5b;
  --acc-triage:        #d11616;
  --acc-eol:           #54616a;
  --acc-doc:           #1c2426;
  --acc-capstone:      #4a8b1f;
  --acc-surgical:      #c62828;
  --acc-nursing:       #1f7a99;
  --acc-assess:        #1f8a5b;
}

html, body {
  transition: background 0.3s ease, color 0.3s ease;
}

/* ---------- DENSITY MODIFIERS ---------- */
body[data-density="compact"] .panel-body { padding: 10px; }
body[data-density="compact"] .panel-header { padding: 8px 12px; font-size: 10px; }
body[data-density="compact"] .hero { padding: 14px 16px; gap: 14px; }
body[data-density="compact"] .hero .ctl-big { font-size: 36px; }
body[data-density="compact"] .hero .h-title { font-size: 18px; }
body[data-density="compact"] .vital { padding: 9px 11px; min-height: 80px; }
body[data-density="compact"] .vital .num { font-size: 24px; }
body[data-density="compact"] .opqrst-cell { padding: 8px 10px; min-height: 80px; }
body[data-density="compact"] .opqrst-cell .letter { font-size: 18px; }
body[data-density="compact"] .action-item { padding: 8px 10px; }
body[data-density="compact"] .q-item { padding: 9px 11px; }

body[data-density="comfy"] .panel-body { padding: 18px; }
body[data-density="comfy"] .hero { padding: 22px 24px; }
body[data-density="comfy"] .vital { padding: 16px 18px; min-height: 110px; }
body[data-density="comfy"] .vital .num { font-size: 32px; }
body[data-density="comfy"] .opqrst-cell { padding: 14px 16px; min-height: 110px; }
body[data-density="comfy"] .action-item { padding: 12px 14px; }

/* ECG visibility */
body.no-ecg .ecg, body.no-ecg .pqrst-wrap { display: none !important; }
body.no-ecg .vital { min-height: auto; }

/* ============================================================
   PQRST · Interactive ECG monitor
   ============================================================ */
.ecg-panel-body { padding: 0 !important; }
.ecg-lead-rail {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg-0);
  border-bottom: 1px solid var(--border-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.ecg-lead-rail::-webkit-scrollbar { display: none; }
.ecg-lead-chip {
  flex: 0 0 auto;
  min-width: 36px;
  padding: 4px 8px;
  font: inherit;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  text-transform: uppercase;
}
.ecg-lead-chip:hover {
  color: var(--ink-bright);
  border-color: var(--ink-mute);
}
.ecg-lead-chip.on {
  color: var(--live);
  border-color: var(--live);
  background: rgba(111,217,154,0.10);
  box-shadow: 0 0 0 1px rgba(111,217,154,0.25) inset;
}
.ecg-lead-info {
  font-size: 10px;
  letter-spacing: 0.12em;
}
.ecg-lead-info b {
  color: var(--ink-bright);
  font-weight: 600;
  margin-right: 4px;
}
.ecg-monitor {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-soft);
}
.ecg-readout {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid var(--border-soft);
}
.ecg-readout .rd-lbl {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.ecg-readout .rd-val {
  font-size: 36px;
  font-weight: 600;
  color: var(--live);
  font-feature-settings: "tnum";
  line-height: 1;
  letter-spacing: -0.01em;
}
.ecg-readout .rd-val.warn { color: var(--warn); }
.ecg-readout .rd-val.bad { color: var(--danger); }
.ecg-readout .rd-unit {
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.12em;
}
.ecg-readout .rd-rhythm {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--info);
  text-transform: uppercase;
  margin-top: 4px;
  padding: 2px 6px;
  border: 1px solid rgba(94,202,224,0.3);
  border-radius: 2px;
  display: inline-block;
  align-self: flex-start;
}
.pqrst-wrap {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent 30%, transparent 70%, rgba(0,0,0,0.18));
  overflow: hidden;
}
.pqrst-svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.pqrst-grid line { stroke-width: 0.5; }
.pqrst-grid.fine line   { stroke: rgba(127, 217, 154, 0.04); }
.pqrst-grid.coarse line { stroke: rgba(127, 217, 154, 0.10); }
:root[data-theme="light"] .pqrst-grid.fine line   { stroke: rgba(31, 138, 91, 0.06); }
:root[data-theme="light"] .pqrst-grid.coarse line { stroke: rgba(31, 138, 91, 0.14); }

.pqrst-scroller {
  animation-name: pqrst-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: left center;
}
@keyframes pqrst-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--cycle-w, 100px) * -1)); }
}

/* interval bracket annotations */
.pqrst-anno line {
  stroke: var(--ink-faint);
  stroke-width: 0.4;
  opacity: 0.6;
}
.pqrst-anno text.anno-lbl {
  fill: var(--ink-mute);
  font-size: 2.2px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-anchor: middle;
  opacity: 0.7;
}
.pqrst-anno .anno-QRS line, .pqrst-anno .anno-PR line, .pqrst-anno .anno-QT line, .pqrst-anno .anno-P line {
  transition: opacity 0.15s, stroke 0.15s;
}
.pqrst-anno g.on line { stroke: var(--info); opacity: 1; }
.pqrst-anno g.on text { fill: var(--info); opacity: 1; }

.pqrst-seg {
  stroke-width: 0.6;
  fill: none;
  filter: drop-shadow(0 0 1.5px currentColor);
  vector-effect: non-scaling-stroke;
  transition: stroke-width 0.15s, opacity 0.15s;
  opacity: 0.95;
}
.pqrst-seg.seg-QRS { stroke-width: 1; }
.pqrst-seg.on {
  stroke-width: 1.6 !important;
  filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 6px currentColor);
}

/* fade the leading cycle so the loop seam isn't obvious */
.pqrst-scroller > g:first-of-type .pqrst-seg { opacity: 0.3; }
.pqrst-scroller > g:nth-of-type(2) .pqrst-seg { opacity: 0.7; }

.pqrst-tip {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -100%);
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
  font-size: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  z-index: 5;
  margin-top: -8px;
}
.pqrst-tip .t-id {
  color: var(--ink-bright);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.pqrst-tip .t-desc {
  color: var(--ink-mute);
  font-size: 9px;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.pqrst-legend {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 8px 14px;
  background: var(--bg-1);
  border-top: 1px solid var(--border-soft);
  align-items: center;
}
.pqrst-legend .leg-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  font-family: var(--mono);
}
.pqrst-legend .leg-stats span b {
  color: var(--ink-bright);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-right: 4px;
  text-transform: uppercase;
  font-size: 9px;
}
.pqrst-legend .leg-chips { display: flex; gap: 4px; flex-wrap: wrap; }

.leg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 5px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  text-transform: uppercase;
  cursor: default;
  transition: all 0.15s;
}
.leg-chip .leg-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--live);
}
.leg-chip:hover, .leg-chip.on {
  border-color: var(--live);
  color: var(--ink-bright);
  background: rgba(111,217,154,0.06);
}
.leg-chip:hover .leg-letter, .leg-chip.on .leg-letter {
  border-color: var(--live);
  background: rgba(111,217,154,0.15);
}

/* Topbar Tweaks/audio buttons */
.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  height: 26px;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.topbar-btn:hover {
  color: var(--ink-bright);
  border-color: var(--ink-mute);
  background: rgba(255,255,255,0.03);
}
.topbar-btn.tweaks { color: var(--info); border-color: rgba(94,202,224,0.4); }
.topbar-btn.tweaks:hover { color: var(--ink-bright); border-color: var(--info); background: rgba(94,202,224,0.08); }
.topbar-btn.tweaks.on { background: var(--info); color: #001620; border-color: var(--info); }
.topbar-btn .ico {
  font-size: 11px;
  letter-spacing: 0;
}

/* ---------- HEART PULSE INDICATOR ---------- */
.hr-pulse {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  opacity: 0.9;
}
.hr-pulse svg { width: 100%; height: 100%; }
.hr-pulse path {
  fill: currentColor;
  filter: drop-shadow(0 0 5px currentColor);
  transform-origin: center;
  animation-name: heart-beat;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.hr-pulse.good { color: var(--live); }
.hr-pulse.warn { color: var(--warn); }
.hr-pulse.bad  { color: var(--danger); }
body.no-pulse .hr-pulse path { animation: none !important; }
@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  15%      { transform: scale(1.35); }
  30%      { transform: scale(1.0); }
  45%      { transform: scale(1.18); }
  60%      { transform: scale(1.0); }
}

/* Sound activation banner */
.sound-prompt {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(14, 18, 19, 0.96);
  border: 1px solid var(--info);
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--info);
  text-transform: uppercase;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  animation: hint-fade 0.3s ease;
}
.sound-prompt .ico {
  width: 22px; height: 22px;
  border: 1px solid var(--info);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.sound-prompt button {
  background: var(--info);
  color: #001620;
  padding: 5px 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
}
.sound-prompt .dismiss { background: transparent; color: var(--ink-mute); border: 1px solid var(--border-strong); }
@keyframes hint-fade {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg-0); color: var(--ink); font-family: var(--mono); height: 100%; }
body {
  overflow-x: auto;
  min-width: 1280px;
  background:
    radial-gradient(1400px 700px at 10% -10%, rgba(111,217,154,0.025), transparent 70%),
    radial-gradient(1100px 600px at 110% 110%, rgba(94,202,224,0.02), transparent 70%),
    var(--bg-0);
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; background: none; border: 0; }
input:focus, textarea:focus { outline: none; }
::selection { background: rgba(111,217,154,0.25); color: var(--ink-bright); }

/* ---------- shell ---------- */
.app {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 420px;
  grid-auto-rows: min-content;
  gap: 10px;
  padding: 10px;
  min-height: 100vh;
}
.topbar-row { grid-column: 1 / -1; }

/* Left and right panels: sticky so they stay visible while scrolling the main column */
.col-left, .col-right {
  position: sticky;
  top: 10px;
  align-self: start;
  height: calc(100vh - 20px);
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  height: 48px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
}
.topbar .brand {
  color: var(--live);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.topbar .brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 12px rgba(111,217,154,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.topbar .sep { width: 1px; height: 16px; background: var(--ink-line); }
.topbar .right { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.topbar .pill {
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.14em;
}
.topbar .pill.live { color: var(--live); border-color: rgba(111,217,154,0.4); }
.topbar .pill.info { color: var(--info); border-color: rgba(94,202,224,0.4); }
.topbar .pill.warn { color: var(--warn); border-color: rgba(244,176,74,0.4); }
.topbar .clock {
  font-size: 13px;
  color: var(--ink-bright);
  letter-spacing: 0.18em;
  font-feature-settings: "tnum";
}
.topbar .clock-sub {
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.16em;
  padding: 2px 8px;
  border: 1px dashed var(--border-soft);
  border-radius: 3px;
}

/* ============================================================
   PANEL
   ============================================================ */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 0;
}
/* Sticky sidebars contain their inner panel — make sure the panel fills the column */
.col-left .panel, .col-right .panel { height: 100%; }
.panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
  flex-shrink: 0;
}
.panel-header .marker { color: var(--live); font-size: 9px; }
.panel-header .right {
  margin-left: auto;
  font-size: 10px;
  color: var(--ink-faint);
}
.panel-body {
  padding: 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.panel-body::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-thumb { background: #1c2123; border-radius: 4px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   LEFT — SCENARIO INDEX
   ============================================================ */
.idx-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}
.idx-stat {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  padding: 8px 10px;
}
.idx-stat .v {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-bright);
  font-feature-settings: "tnum";
  line-height: 1;
}
.idx-stat .l {
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 4px;
}
.idx-stat.crit .v { color: var(--danger); }
.idx-stat.warn .v { color: var(--warn); }
.idx-stat.live .v { color: var(--live); }

.idx-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
}
.idx-filter input {
  flex: 1;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-bright);
}
.idx-filter input::placeholder { color: var(--ink-faint); letter-spacing: 0.16em; }
.idx-filter .icon { font-size: 11px; color: var(--ink-faint); }

.idx-section-head {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin: 12px 0 6px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.idx-section-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

.idx-item {
  display: grid;
  grid-template-columns: 8px 56px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
}
.idx-item:hover {
  border-color: var(--ink-mute);
  background: var(--panel-2);
}
.idx-item .pri {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 6px rgba(111,217,154,0.4);
}
.idx-item .pri.p0 { background: var(--danger); box-shadow: 0 0 6px rgba(239,83,80,0.6); }
.idx-item .pri.p1 { background: var(--warn); box-shadow: 0 0 6px rgba(244,176,74,0.55); }
.idx-item .pri.p2 { background: var(--live); }
.idx-item .ctl {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-feature-settings: "tnum";
}
.idx-item .title {
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.idx-item .arrow {
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.idx-item.active {
  background: rgba(111,217,154,0.08);
  border-color: rgba(111,217,154,0.5);
}
.idx-item.active .ctl { color: var(--live); }
.idx-item.active .title { color: var(--ink-bright); }
.idx-item.active .arrow { color: var(--live); }

/* ============================================================
   CENTER — MAIN SCENARIO
   ============================================================ */
.main-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

/* Scenario hero card */
.hero {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(111,217,154,0.06), transparent 70%),
    radial-gradient(500px 200px at 100% 100%, rgba(94,202,224,0.04), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero .ctl-num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  font-feature-settings: "tnum";
}
.hero .ctl-big {
  font-size: 44px;
  font-weight: 600;
  color: var(--ink-bright);
  line-height: 1;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
  margin-top: 4px;
}
.hero .title-block { min-width: 0; }
.hero .h-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-bright);
  letter-spacing: -0.005em;
  line-height: 1.15;
  text-wrap: balance;
}
.hero .h-story {
  font-size: 13px;
  color: var(--info);
  letter-spacing: 0.06em;
  margin-top: 4px;
  font-style: italic;
}
.hero .h-meta {
  display: flex; gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.hero .tag {
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 3px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.hero .tag.cat {
  color: var(--live);
  border-color: rgba(111,217,154,0.4);
  background: rgba(111,217,154,0.06);
}
.hero .tag.loc {
  color: var(--ink);
  border-color: var(--border-soft);
}
.hero .h-status {
  display: flex; flex-direction: column; gap: 4px;
  text-align: right;
}
.hero .h-status .lbl {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.hero .h-status .val {
  font-size: 13px;
  color: var(--ink-bright);
  letter-spacing: 0.08em;
  font-feature-settings: "tnum";
}
.hero .h-status .val.crit { color: var(--danger); }
.hero .h-status .val.warn { color: var(--warn); }
.hero .h-status .val.ok { color: var(--live); }

/* Mechanism / context card */
.mech-card {
  background: linear-gradient(135deg, rgba(239,83,80,0.04), rgba(244,176,74,0.04));
  border: 1px solid var(--border-strong);
  border-left: 2px solid var(--warn);
  border-radius: 3px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.55;
}
.mech-card .mech-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.mech-card .mech-lbl {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--warn);
  text-transform: uppercase;
}
.mech-card .mech-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 4px;
}
.mech-card .mech-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dotted rgba(255,255,255,0.04);
}
.mech-card .mech-row:last-child { border-bottom: none; }
.mech-card .mech-k {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding-top: 1px;
}
.mech-card .mech-v {
  color: var(--ink);
  line-height: 1.5;
  text-wrap: pretty;
  font-size: 12px;
}

/* Characters strip */
.cast-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}
.cast-card {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: start;
}
.cast-card .avatar {
  width: 36px; height: 36px;
  border-radius: 3px;
  background: var(--panel-3);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-bright);
  letter-spacing: 0.06em;
}
.cast-card.patient .avatar {
  background: rgba(239,83,80,0.12);
  border-color: rgba(239,83,80,0.45);
  color: var(--danger);
}
.cast-card.medic .avatar {
  background: rgba(111,217,154,0.12);
  border-color: rgba(111,217,154,0.45);
  color: var(--live);
}
.cast-card.consult .avatar {
  background: rgba(94,202,224,0.12);
  border-color: rgba(94,202,224,0.45);
  color: var(--info);
}
.cast-card.student .avatar {
  background: rgba(244,176,74,0.10);
  border-color: rgba(244,176,74,0.4);
  color: var(--warn);
}
.cast-card .who {
  font-size: 11px;
  color: var(--ink-bright);
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 1.3;
}
.cast-card .role {
  font-size: 10px;
  color: var(--ink-mute);
  line-height: 1.45;
  margin-top: 3px;
  letter-spacing: 0.02em;
}
.cast-card .badge {
  font-size: 8px;
  letter-spacing: 0.16em;
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 6px;
  font-weight: 600;
}
.cast-card .badge.patient { background: rgba(239,83,80,0.15); color: var(--danger); }
.cast-card .badge.medic { background: rgba(111,217,154,0.15); color: var(--live); }
.cast-card .badge.consult { background: rgba(94,202,224,0.15); color: var(--info); }
.cast-card .badge.student { background: rgba(244,176,74,0.15); color: var(--warn); }
.cast-card .badge.casualty { background: rgba(255,74,74,0.18); color: var(--crit); }

/* OPQRST grid */
.opqrst-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
}
.opqrst-cell {
  background: var(--panel);
  padding: 10px 12px;
  min-height: 92px;
  position: relative;
}
.opqrst-cell .letter {
  font-size: 22px;
  font-weight: 700;
  color: var(--live);
  line-height: 1;
  font-feature-settings: "tnum";
}
.opqrst-cell .lbl {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 4px;
}
.opqrst-cell .val {
  font-size: 11px;
  color: var(--ink);
  margin-top: 6px;
  line-height: 1.4;
  text-wrap: pretty;
}
.opqrst-cell.cell-O .letter { color: var(--info); }
.opqrst-cell.cell-P .letter { color: var(--warn); }
.opqrst-cell.cell-Q .letter { color: var(--live); }
.opqrst-cell.cell-R .letter { color: var(--violet); }
.opqrst-cell.cell-S .letter { color: var(--danger); }
.opqrst-cell.cell-T .letter { color: var(--info); }

/* Vitals row */
.vitals-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
}
.vital {
  background: var(--panel);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  min-height: 96px;
}
.vital .lbl {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.vital .val {
  display: flex; align-items: baseline; gap: 5px;
  margin-top: auto;
}
.vital .num {
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-bright);
  font-feature-settings: "tnum";
  line-height: 1;
  letter-spacing: -0.01em;
}
.vital .num.good { color: var(--live); }
.vital .num.warn { color: var(--warn); }
.vital .num.bad { color: var(--danger); }
.vital .unit {
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}
.vital.empty .num {
  color: var(--ink-faint);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.vital .ecg {
  position: absolute;
  bottom: 4px; left: 8px; right: 8px;
  height: 18px;
  pointer-events: none;
  opacity: 0.6;
}
.vital.training {
  grid-column: 1 / -1;
  background: rgba(244,176,74,0.04);
  display: flex; flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 70px;
  padding: 14px;
}
.vital.training .train-icon {
  width: 24px; height: 24px;
  border: 1px dashed rgba(244,176,74,0.5);
  color: var(--warn);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  border-radius: 50%;
}
.vital.training .train-text {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--warn);
  text-transform: uppercase;
}
.vital.training .train-sub {
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.02em;
  font-style: italic;
}

/* Free-form vitals 'other' */
.vital-extra {
  background: var(--bg-1);
  border: 1px dashed var(--border-soft);
  border-radius: 3px;
  padding: 8px 10px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.vital-extra .lbl {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

/* Clinical assessment cards */
.assess-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.assess-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--ink-mute);
  border-radius: 3px;
  padding: 10px 12px;
}
.assess-row.l-very-high,
.assess-row.l-confirmed,
.assess-row.l-critical { border-left-color: var(--danger); }
.assess-row.l-high { border-left-color: var(--warn); }
.assess-row.l-moderate { border-left-color: var(--info); }
.assess-row.l-low { border-left-color: var(--ink-mute); }
.assess-row.l-current-status,
.assess-row.l-scenario { border-left-color: var(--live); }
.assess-row .nm {
  font-size: 12px;
  color: var(--ink-bright);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.assess-row .dt {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 3px;
  line-height: 1.45;
  letter-spacing: 0.02em;
}
.assess-row .lvl {
  font-size: 9px;
  letter-spacing: 0.16em;
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  align-self: start;
}
.lvl.l-very-high, .lvl.l-confirmed, .lvl.l-critical {
  background: rgba(239,83,80,0.18); color: var(--danger);
}
.lvl.l-high { background: rgba(244,176,74,0.18); color: var(--warn); }
.lvl.l-moderate { background: rgba(94,202,224,0.16); color: var(--info); }
.lvl.l-low { background: rgba(0,0,0,0.18); color: var(--ink-mute); border: 1px solid var(--border-strong); }
.lvl.l-current-status, .lvl.l-scenario {
  background: rgba(111,217,154,0.15); color: var(--live);
}

/* ============================================================
   SECTION TITLE — repeated lozenge bar
   ============================================================ */
.section-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.section-bar::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--live);
  border-radius: 50%;
}
.section-bar::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}
.section-bar .right {
  font-size: 9px;
  color: var(--ink-faint);
  letter-spacing: 0.16em;
}

/* ============================================================
   RIGHT — ACTIONS / QUESTIONS / RESOLUTION
   ============================================================ */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--border-soft);
}
.tab {
  flex: 1;
  padding: 12px 0;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-align: center;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  background: transparent;
}
.tab.active {
  color: var(--ink-bright);
  border-bottom-color: var(--live);
}
.tab:hover:not(.active) { color: var(--ink); }
.tab .count {
  margin-left: 6px;
  font-size: 9px;
  color: var(--ink-faint);
  padding: 1px 5px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
}
.tab.active .count { color: var(--live); border-color: rgba(111,217,154,0.4); }

/* Action checklist */
.action-list { display: flex; flex-direction: column; gap: 6px; }
.action-item {
  display: grid;
  grid-template-columns: 24px 22px 1fr;
  gap: 10px;
  align-items: start;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}
.action-item:hover { border-color: var(--ink-mute); }
.action-item .num {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  font-feature-settings: "tnum";
  padding-top: 2px;
}
.action-item .check {
  width: 16px; height: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
  flex-shrink: 0;
}
.action-item.done .check {
  background: var(--live);
  border-color: var(--live);
  color: #002613;
}
.action-item.done {
  border-color: rgba(111,217,154,0.4);
  background: rgba(111,217,154,0.05);
}
.action-item.done .num { color: var(--live); }
.action-item .txt {
  font-size: 11px;
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-wrap: pretty;
}
.action-item .txt .head {
  font-weight: 600;
  color: var(--ink-bright);
}

/* Socratic questions */
.q-list { display: flex; flex-direction: column; gap: 8px; }
.q-item {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  position: relative;
}
.q-item .qnum {
  font-size: 16px;
  font-weight: 600;
  color: var(--info);
  font-feature-settings: "tnum";
  line-height: 1;
  font-family: var(--mono);
}
.q-item .qtxt {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.5;
  text-wrap: pretty;
  letter-spacing: 0.01em;
}
.q-item.discussed { border-color: rgba(94,202,224,0.3); }
.q-item.discussed::after {
  content: "DISCUSSED";
  position: absolute;
  top: 8px; right: 12px;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--info);
  padding: 1px 6px;
  border: 1px solid rgba(94,202,224,0.4);
  border-radius: 2px;
}
.q-item button.toggle {
  position: absolute;
  bottom: 6px; right: 10px;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  padding: 3px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
}
.q-item button.toggle:hover { color: var(--ink-bright); border-color: var(--ink-mute); }

/* Resolution */
.resolution {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.res-narrative {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  padding: 14px 16px;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}
.res-narrative em.story-quote {
  display: block;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(94,202,224,0.05);
  border-left: 2px solid var(--info);
  font-style: italic;
  color: var(--info);
  font-size: 11.5px;
  line-height: 1.6;
}
.res-teach {
  background: linear-gradient(135deg, rgba(111,217,154,0.07), rgba(94,202,224,0.04));
  border: 1px solid rgba(111,217,154,0.3);
  border-radius: 3px;
  padding: 14px 16px;
  position: relative;
}
.res-teach .lbl {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--live);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.res-teach .lbl::before {
  content: "★";
  font-size: 11px;
  color: var(--live);
}
.res-teach .qt {
  font-size: 13px;
  color: var(--ink-bright);
  line-height: 1.55;
  font-style: italic;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}

/* ============================================================
   QUICK REFERENCE
   ============================================================ */
.quickref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px;
}
.quickref {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  padding: 10px 12px;
}
.quickref .qr-head {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--info);
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border-soft);
}
.quickref .qr-list { display: flex; flex-direction: column; gap: 3px; }
.quickref .qr-list li {
  font-size: 10.5px;
  color: var(--ink);
  list-style: none;
  letter-spacing: 0.01em;
  line-height: 1.4;
  padding-left: 10px;
  position: relative;
}
.quickref .qr-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}
.quickref .qr-list li b {
  color: var(--ink-bright);
  font-weight: 500;
}
.quickref .qr-list li .hi { color: var(--live); }
.quickref .qr-list li .hi.warn { color: var(--warn); }
.quickref .qr-list li .hi.bad { color: var(--danger); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.foot-strip .right { margin-left: auto; display: flex; gap: 16px; }

/* keyboard hint */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 2px 5px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background: var(--bg-1);
  color: var(--ink);
  font-size: 9px;
  letter-spacing: 0;
  font-family: var(--mono);
}

/* Subtle ECG svg (decorative) */
.ecg path {
  stroke: currentColor;
  stroke-width: 1;
  fill: none;
}


/* ============================================================
   TREATMENT DECISION POINT — interactive choice in Actions tab
   ============================================================ */
.tx-block {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border-soft);
}
.tx-block .section-bar { margin-bottom: 8px; }

.tx-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--ink-faint);
  border-radius: 3px;
  margin-bottom: 10px;
  font-family: var(--mono);
}
.tx-status .tx-pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.tx-status .tx-status-txt {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.tx-status .tx-status-meta {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.tx-status.tx-good { border-left-color: var(--live); }
.tx-status.tx-good .tx-pip { background: var(--live); box-shadow: 0 0 10px rgba(111,217,154,0.6); }
.tx-status.tx-good .tx-status-txt { color: var(--live); }

.tx-status.tx-warn { border-left-color: var(--warn); }
.tx-status.tx-warn .tx-pip { background: var(--warn); box-shadow: 0 0 10px rgba(244,176,74,0.5); }
.tx-status.tx-warn .tx-status-txt { color: var(--warn); }

.tx-status.tx-bad { border-left-color: var(--danger); }
.tx-status.tx-bad .tx-pip {
  background: var(--danger);
  box-shadow: 0 0 12px rgba(239,83,80,0.7);
  animation: txpulse 1.2s ease-in-out infinite;
}
.tx-status.tx-bad .tx-status-txt { color: var(--danger); }

@keyframes txpulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

.tx-prompt {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-bright);
  background: linear-gradient(180deg, rgba(94,202,224,0.04), transparent);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--info);
  border-radius: 3px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-family: var(--sans, var(--mono));
  text-wrap: pretty;
}

.tx-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tx-option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.06s;
  font-family: var(--mono);
}
.tx-option:hover:not(:disabled) {
  border-color: var(--ink-mute);
  background: rgba(255,255,255,0.02);
}
.tx-option:active:not(:disabled) { transform: translateY(1px); }
.tx-option:disabled { cursor: default; }

.tx-opt-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tx-letter {
  width: 22px; height: 22px;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-mute);
  flex-shrink: 0;
  letter-spacing: 0;
  background: var(--bg-2);
  font-family: var(--mono);
}
.tx-label {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink);
  flex: 1;
  text-wrap: pretty;
  letter-spacing: 0.01em;
}
.tx-badge {
  flex-shrink: 0;
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 3px 7px;
  border-radius: 2px;
  border: 1px solid currentColor;
  font-weight: 700;
  white-space: nowrap;
}
.tx-badge.oc-correct { color: var(--live); background: rgba(111,217,154,0.08); }
.tx-badge.oc-harmful { color: var(--danger); background: rgba(239,83,80,0.08); }
.tx-badge.oc-suboptimal { color: var(--warn); background: rgba(244,176,74,0.08); }

.tx-committed-flag {
  flex-shrink: 0;
  font-size: 8px;
  letter-spacing: 0.18em;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--info);
  color: #001620;
  font-weight: 700;
  white-space: nowrap;
}

/* Revealed states — colored borders + bg tinting */
.tx-option.revealed.oc-correct {
  border-color: rgba(111,217,154,0.45);
  background: linear-gradient(180deg, rgba(111,217,154,0.08), rgba(111,217,154,0.02));
}
.tx-option.revealed.oc-correct .tx-letter {
  border-color: var(--live);
  color: var(--live);
  background: rgba(111,217,154,0.12);
}
.tx-option.revealed.oc-harmful {
  border-color: rgba(239,83,80,0.45);
  background: linear-gradient(180deg, rgba(239,83,80,0.07), rgba(239,83,80,0.02));
}
.tx-option.revealed.oc-harmful .tx-letter {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(239,83,80,0.12);
}
.tx-option.revealed.oc-suboptimal {
  border-color: rgba(244,176,74,0.45);
  background: linear-gradient(180deg, rgba(244,176,74,0.07), rgba(244,176,74,0.02));
}
.tx-option.revealed.oc-suboptimal .tx-letter {
  border-color: var(--warn);
  color: var(--warn);
  background: rgba(244,176,74,0.12);
}

.tx-option.committed {
  box-shadow: inset 0 0 0 1px var(--info), 0 0 0 1px rgba(94,202,224,0.3);
}

.tx-reveal {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
  padding-left: 32px; /* align with text after letter chip */
}
.tx-reveal-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-bright);
  margin-bottom: 4px;
  text-transform: none;
  font-family: var(--mono);
}
.tx-option.revealed.oc-correct .tx-reveal-title { color: var(--live); }
.tx-option.revealed.oc-harmful .tx-reveal-title { color: var(--danger); }
.tx-option.revealed.oc-suboptimal .tx-reveal-title { color: var(--warn); }

.tx-reveal-detail {
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
  font-family: var(--sans, var(--mono));
  letter-spacing: 0.01em;
}

.tx-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 8px;
}
.tx-reset {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid var(--border-strong);
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--mono);
  flex-shrink: 0;
}
.tx-reset:hover:not(:disabled) {
  color: var(--ink-bright);
  border-color: var(--ink-mute);
  background: rgba(255,255,255,0.03);
}
.tx-reset:disabled { opacity: 0.4; cursor: default; }
.tx-hint {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  line-height: 1.5;
  font-family: var(--sans, var(--mono));
  flex: 1;
}

/* light-theme tweaks */
:root[data-theme="light"] .tx-option:hover:not(:disabled) {
  background: rgba(0,0,0,0.02);
}
:root[data-theme="light"] .tx-reset:hover:not(:disabled) {
  background: rgba(0,0,0,0.03);
}

/* ==================================================================
 * DOCS DASHBOARD — Scenario-specific Documentation Sheets
 * Tactical-paper aesthetic, cohesive with the dashboard chrome.
 * Layouts modeled on the actual PFC v25 Casualty Card.
 * ================================================================== */

/* ---- App-level layout swap ---- */
.app.docs-mode {
  grid-template-columns: 300px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "top  top"
    "rail stage"
    "foot foot";
}
.app.docs-mode .topbar-row { grid-area: top; }
.app.docs-mode .docs-rail   { grid-area: rail; min-height: 0; }
.app.docs-mode .docs-stage  { grid-area: stage; min-height: 0; }
.app.docs-mode .foot-strip  { grid-area: foot; }

/* ---- Left rail ---- */
.docs-rail {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
}
.docs-rail-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-bright);
  background: var(--panel-2);
  border-bottom: 1px solid var(--border-soft);
}
.docs-rail-head .marker { color: var(--live); font-size: 14px; }
.docs-rail-head .right { margin-left: auto; color: var(--ink-faint); font-size: 9px; letter-spacing: 0.18em; }

.docs-rail-tabs {
  display: flex; flex-direction: column;
  padding: 8px;
  gap: 4px;
  border-bottom: 1px solid var(--border-soft);
}
.docs-tab {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font: inherit;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-left: 3px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.docs-tab:hover { color: var(--ink-bright); border-color: var(--ink-mute); }
.docs-tab .docs-appx {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  padding: 2px 5px;
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  font-weight: 600;
}
.docs-tab .docs-name { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.docs-tab .docs-arrow { color: var(--live); }
.docs-tab.on {
  color: var(--ink-bright);
  border: 1px solid var(--live);
  border-left: 3px solid var(--live);
  background: rgba(111,217,154,0.08);
  box-shadow: 0 0 0 1px rgba(111,217,154,0.2) inset;
}
.docs-tab.on .docs-appx { color: var(--live); border-color: var(--live); }

.docs-rail-meta {
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  display: flex; flex-direction: column; gap: 6px;
}
.drm-row { display: grid; grid-template-columns: 80px 1fr; gap: 8px; }
.drm-row > span { color: var(--ink-faint); letter-spacing: 0.16em; font-size: 9px; text-transform: uppercase; }
.drm-row > b    { color: var(--ink); font-weight: 600; letter-spacing: 0.02em; }
.drm-row > b.crit { color: var(--crit); }
.drm-row > b.warn { color: var(--warn); }
.drm-row > b.ok   { color: var(--live); }
.docs-rail-note {
  padding: 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.55;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border-soft);
  margin-top: auto;
}
.docs-rail-note i { color: var(--live); font-style: normal; }

/* ---- Stage ---- */
.docs-stage {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
}
.docs-stage-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-bright);
  text-transform: uppercase;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border-soft);
}
.docs-stage-bar .marker { color: var(--info); font-size: 14px; }
.docs-stage-bar .right  { margin-left: auto; color: var(--ink-faint); font-size: 9px; letter-spacing: 0.18em; }
.docs-stage-body {
  flex: 1;
  overflow: auto;
  padding: 16px 20px 60px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.015), transparent 60%),
    var(--bg-0);
}

/* ============================================================
   SHEET — tactical-paper field form
   ============================================================ */
.sheet {
  --ink-paper: #e3e8e6;
  --ink-paper-dim: #aab3b1;
  --ink-paper-faint: #6e7775;
  --ink-paper-red: #ef6f6c;
  --ink-paper-blue: #5ecae0;
  --ink-paper-orange: #f4b04a;
  --paper-bg: #161a18;
  --paper-bg-2: #1c211e;
  --paper-line: rgba(140, 160, 150, 0.18);
  --paper-rule: rgba(140, 160, 150, 0.34);
  --paper-accent: #cfead4;
  --beige: rgba(244, 176, 74, 0.10);
  --shade: rgba(140, 160, 150, 0.08);

  background:
    repeating-linear-gradient(0deg, var(--paper-line), var(--paper-line) 1px, transparent 1px, transparent 24px),
    var(--paper-bg);
  border: 1px solid var(--paper-rule);
  border-radius: 4px;
  padding: 20px 22px 24px;
  color: var(--ink-paper);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  max-width: 1400px;
  margin: 0 auto;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4) inset,
    0 22px 60px rgba(0,0,0,0.45);
  position: relative;
}

.sheet-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--paper-rule);
  margin-bottom: 12px;
}
.sheet-id .dd-num {
  font-size: 9.5px; letter-spacing: 0.32em; color: var(--ink-paper-faint);
  text-transform: uppercase;
}
.sheet-id .dd-title {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: 0.10em;
  color: var(--ink-paper); text-transform: uppercase;
  margin-top: 2px;
}
.sheet-stamps { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.doc-stamp {
  display: inline-block;
  padding: 3px 8px;
  border: 1.5px solid var(--paper-rule);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 2px;
  color: var(--ink-paper-dim);
  background: rgba(0,0,0,0.18);
}
.doc-stamp.s-live {
  color: #b6efc7;
  border-color: rgba(140, 220, 160, 0.55);
  background: rgba(111,217,154,0.08);
  text-shadow: 0 0 6px rgba(111,217,154,0.35);
}

/* ---- field grid (shared) ---- */
.dd-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--paper-rule);
  margin-bottom: 12px;
}
.dd-grid.tight { margin-bottom: 8px; }
.fld {
  display: flex; flex-direction: column;
  padding: 4px 8px;
  border-right: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
  min-height: 32px;
  background: rgba(0,0,0,0.12);
}
.dd-grid .fld:last-child { border-right: 1px solid var(--paper-rule); }
.fld.w1 { grid-column: span 1; }
.fld.w2 { grid-column: span 2; }
.fld.w3 { grid-column: span 3; }
.fld.w4 { grid-column: span 4; }
.fld-l {
  font-size: 8px; letter-spacing: 0.22em; color: var(--ink-paper-faint);
  text-transform: uppercase; margin-bottom: 1px;
}
.fld-v { font-size: 11px; color: var(--ink-paper); letter-spacing: 0.02em; }

/* ---- form sections (shared) ---- */
.form-section {
  margin-bottom: 12px;
  border: 1px solid var(--paper-rule);
  background: rgba(0,0,0,0.08);
}
.form-section > header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 8px;
  border-bottom: 1px solid var(--paper-rule);
  background: rgba(0,0,0,0.22);
}
.form-section > header .form-section-bar {
  width: 3px; align-self: stretch; background: var(--paper-accent); opacity: 0.55;
}
.form-section > header h4 {
  margin: 0; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.2em;
  font-weight: 700; color: var(--ink-paper);
  text-transform: uppercase;
}
.form-section > header .form-section-meta {
  margin-left: auto; font-size: 9px; letter-spacing: 0.2em;
  color: var(--ink-paper-faint); text-transform: uppercase;
}
.form-section-body { padding: 8px 10px; }

/* ============================================================
   PFC CASUALTY CARD PG 1 — the iconic v25 graph paper
   ============================================================ */
.pfc-card {
  padding: 18px 18px 20px;
  max-width: 1400px;
}
.pfc-meta {
  grid-template-columns: repeat(8, 1fr);
}

.pfc-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--mono);
  margin-top: 8px;
  border: 1px solid var(--paper-rule);
  background: rgba(0,0,0,0.18);
}
.pfc-grid colgroup .cg-key { width: 110px; }
.pfc-grid colgroup .cg-val { width: 34px; }
.pfc-grid colgroup .cg-t   { width: auto; }
.pfc-grid colgroup .cg-rx  { width: 240px; }

.pfc-grid thead th {
  border: 1px solid var(--paper-rule);
  padding: 4px 4px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-paper-dim);
  background: var(--beige);
  text-align: center;
}
.pfc-grid thead th.hd-meta {
  background: rgba(244, 176, 74, 0.18);
  color: var(--ink-paper);
  font-weight: 700;
}
.pfc-grid thead th.hd-day-cell {
  background: rgba(244, 176, 74, 0.10);
  color: var(--ink-paper);
  font-weight: 600;
  letter-spacing: 0.16em;
}
.pfc-grid thead th.hd-h, .pfc-grid thead th.hd-m {
  font-size: 9px; color: var(--ink-paper-dim); font-weight: 500;
}
.pfc-grid thead th.tx-head {
  background: rgba(244, 176, 74, 0.18);
  text-align: left;
  padding-left: 8px;
  letter-spacing: 0.14em;
}

.pfc-grid tbody td {
  border: 1px solid var(--paper-line);
  padding: 0;
  height: 18px;
  text-align: center;
  font-size: 10px;
  color: var(--ink-paper-dim);
  vertical-align: middle;
  position: relative;
}
.pfc-grid tbody tr.shade td { background: var(--shade); }
.pfc-grid tbody tr.beige td { background: var(--beige); }

.pfc-grid .key-cell {
  background: rgba(0,0,0,0.28);
  vertical-align: middle;
  border-right: 1.5px solid var(--paper-rule);
  padding: 6px 8px;
  text-align: left;
  font-size: 9px;
  color: var(--ink-paper);
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.pfc-grid .key-cell .key-line {
  padding: 1px 0;
  color: var(--ink-paper);
  font-weight: 500;
}
.pfc-grid .key-cell .key-line:first-child { color: var(--paper-accent); font-weight: 700; letter-spacing: 0.14em; }

.pfc-grid .val-l, .pfc-grid .val-r {
  background: rgba(0,0,0,0.3);
  color: var(--ink-paper);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  font-family: var(--mono);
}

.pfc-grid .plot-cell {
  background: transparent;
}
.pfc-grid .plot-cell .plot {
  display: inline-block;
  margin: 0 0.5px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
  text-shadow: 0 0 4px currentColor;
  line-height: 1;
}
.pfc-grid .plot-cell .plot.plot-si { font-size: 7.5px; letter-spacing: 0.05em; }

.pfc-grid .rx-cell {
  background: rgba(0,0,0,0.18);
  color: var(--ink-paper-red);
  text-align: left;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-left: 1.5px solid var(--paper-rule);
}
.pfc-grid .rx-cell.empty { color: var(--ink-paper-faint); }

.pfc-legend-row {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--paper-rule);
  background: rgba(0,0,0,0.18);
}
.pfc-leg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.pfc-leg b {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 11px; font-weight: 700;
  text-shadow: 0 0 4px currentColor;
}
.pfc-leg span { color: var(--ink-paper-dim); letter-spacing: 0.08em; text-transform: uppercase; font-size: 9px; }

/* ============================================================
   PFC CASUALTY CARD PG 2 — vent, drugs, nursing reminders
   ============================================================ */
.pfc-pg2-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

.bar-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--paper-rule);
  border-bottom: none;
  font-family: var(--mono);
  font-size: 11px;
}
.bar-row:last-child { border-bottom: 1px solid var(--paper-rule); }
.bar-row > span:first-child {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
}
.bar-row.out > span:first-child { color: var(--ink-paper-blue); }
.bar-row.in  > span:first-child { color: var(--ink-paper-blue); }
.bar-row.pain > span:first-child { color: var(--ink-paper-orange); }
.bar-row.neuro > span:first-child { color: var(--ink-paper-orange); }
.bar-row .row-fill { color: var(--ink-paper); }

.gcs-block {
  border: 1px solid var(--paper-rule);
  background: rgba(94,202,224,0.06);
  margin: 10px 0;
}
.gcs-block .gcs-line {
  display: grid;
  grid-template-columns: 1fr 60px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--paper-line);
  font-size: 11px;
}
.gcs-block .gcs-line:last-child { border-bottom: none; }
.gcs-block .gcs-line > span:first-child {
  color: var(--ink-paper-blue);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.gcs-block .gcs-line > span:last-child {
  text-align: right;
  color: var(--ink-paper);
  font-weight: 700;
  font-size: 12px;
}
.gcs-block .gcs-line.total {
  background: rgba(94,202,224,0.10);
  border-top: 1.5px solid var(--paper-rule);
}
.gcs-block .gcs-line.total > span:last-child { color: var(--paper-accent); font-size: 14px; }

.drug-table, .vent-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 10.5px;
}
.drug-table th, .drug-table td, .vent-table td {
  border: 1px solid var(--paper-rule);
  padding: 5px 8px;
  text-align: left;
}
.drug-table th {
  background: rgba(0,0,0,0.3);
  color: var(--ink-paper-faint);
  font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.drug-table td:first-child { color: var(--ink-paper-faint); width: 64px; }
.drug-table tr.empty-row td { color: var(--ink-paper-faint); height: 22px; }
.vent-table td:first-child {
  width: 50%;
  color: var(--ink-paper-faint);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.18);
  font-weight: 500;
}
.vent-table td:last-child { color: var(--ink-paper); font-weight: 600; }

.adj-list { display: flex; flex-direction: column; gap: 0; }
.adj-list .check-item { border-bottom: 1px dashed var(--paper-line); padding: 6px 4px; }
.adj-list .check-item:last-child { border-bottom: none; }

.nursing-groups { display: flex; flex-direction: column; gap: 4px; }
.nurse-grp {
  padding: 6px 10px;
  border: 1px solid var(--paper-rule);
  background: rgba(0,0,0,0.18);
}
.nurse-grp-head {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-paper-red);
  font-weight: 700;
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 3px; margin-bottom: 4px;
}
.nurse-line {
  font-size: 10.5px;
  color: var(--ink-paper-dim);
  padding: 2px 0;
}

.check-item {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 8px;
  padding: 4px;
  font-size: 10.5px;
  color: var(--ink-paper-dim);
  cursor: pointer;
  user-select: none;
}
.check-item input { display: none; }
.check-item .cb {
  width: 14px; height: 14px;
  border: 1px solid var(--paper-rule);
  border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: transparent;
  background: rgba(0,0,0,0.25);
  transition: all 0.12s;
}
.check-item.on .cb,
.check-item:has(input:checked) .cb {
  color: #0e1213;
  background: var(--paper-accent);
  border-color: var(--paper-accent);
  font-weight: 800;
}
.check-item.on .ct,
.check-item:has(input:checked) .ct { color: var(--ink-paper); }

.pfc-foot-link {
  text-align: center;
  margin-top: 10px;
  font-size: 9.5px;
  color: var(--ink-paper-blue);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ============================================================
   CARE PLAN (12-h & 24-h)
   ============================================================ */
.care-plan { padding: 18px 16px 22px; }
.care-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--paper-rule);
}
.care-table {
  width: 100%;
  min-width: 1300px;
  border-collapse: collapse;
  font-family: var(--mono);
  background: rgba(0,0,0,0.18);
}
.care-table colgroup .cg-cat   { width: 38px; }
.care-table colgroup .cg-act   { width: 280px; }
.care-table colgroup .cg-iv    { width: 60px; }
.care-table colgroup .cg-tcol  { width: 40px; }
.care-table th, .care-table td {
  border: 1px solid var(--paper-line);
  padding: 0;
  font-size: 9.5px;
  text-align: center;
  height: 22px;
  vertical-align: middle;
}
.care-table thead th {
  background: rgba(0,0,0,0.3);
  color: var(--ink-paper-dim);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 4px;
}
.care-table thead th.hd-act { text-align: left; padding-left: 10px; color: var(--ink-paper-red); }
.care-table thead th.hd-iv  { color: var(--ink-paper-orange); }
.care-table thead th.hd-tcol { font-size: 8.5px; color: var(--ink-paper-faint); writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 2px; height: 70px; }

.care-table .cat-cell {
  background: rgba(94,202,224,0.10);
  border-right: 1.5px solid var(--paper-rule);
  vertical-align: middle;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-paper-blue);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 4px 2px;
}
.care-table .act-cell {
  text-align: left;
  padding: 4px 10px;
  color: var(--ink-paper-red);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.care-table .iv-cell {
  color: var(--ink-paper-orange);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.care-table .grid-cell {
  background: transparent;
}
.care-table .grid-cell .grid-check {
  color: var(--paper-accent);
  font-weight: 800;
  font-size: 12px;
  text-shadow: 0 0 5px rgba(111,217,154,0.55);
}
.care-table tbody tr:nth-child(even) .grid-cell { background: rgba(255,255,255,0.012); }

/* ============================================================
   BASIC VITALS CHART
   ============================================================ */
.vitals-chart { padding: 18px 18px 24px; }
.bvc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-family: var(--mono);
  background: rgba(0,0,0,0.18);
}
.bvc-table th, .bvc-table td {
  border: 1px solid var(--paper-rule);
  padding: 5px 6px;
  font-size: 10.5px;
  text-align: center;
}
.bvc-table th {
  background: rgba(0,0,0,0.3);
  color: var(--ink-paper-dim);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.25;
}
.bvc-table td.t { color: var(--ink-paper-faint); font-size: 10px; letter-spacing: 0.04em; }
.bvc-table tr.now td {
  background: rgba(111,217,154,0.08);
  color: var(--paper-accent);
}

/* ============================================================
   VCCC TELEMED
   ============================================================ */
.vccc-banner {
  text-align: center;
  padding: 6px;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-paper-dim);
  border: 1px solid var(--paper-rule);
  background: rgba(0,0,0,0.18);
}
.callout-box {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--paper-rule);
  background: rgba(0,0,0,0.18);
  font-size: 10.5px;
  color: var(--ink-paper-red);
}
.callout-box .cb-num {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-accent);
  color: #0e1213;
  font-weight: 800;
  font-size: 11px;
  border-radius: 2px;
}
.pace-table { width: 100%; border-collapse: collapse; }
.pace-table th, .pace-table td {
  padding: 5px 10px;
  border: 1px solid var(--paper-rule);
  text-align: left;
  font-size: 10.5px;
}
.pace-table th {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-paper-faint);
  background: rgba(0,0,0,0.3);
}
.pace-table td:first-child {
  width: 24px; text-align: center;
  color: var(--paper-accent); font-weight: 800;
  background: rgba(0,0,0,0.15);
}
.vccc-fields {
  display: grid; grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--paper-rule);
}
.vccc-fields .fld { border-right: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule); }
.vccc-prose { margin: 0 0 8px; font-size: 11px; }
.vccc-inj { padding-top: 6px; }
.vccc-sub {
  font-size: 9px; letter-spacing: 0.2em; color: var(--ink-paper-faint);
  text-transform: uppercase; margin: 6px 0 2px;
}
.vccc-inj ul { padding-left: 18px; margin: 0 0 4px; }
.vccc-inj li { font-size: 10.5px; margin-bottom: 2px; }
.vccc-vit-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--paper-rule);
  margin-bottom: 8px;
}
.vccc-vit-row span { font-family: var(--mono); font-size: 11px; color: var(--ink-paper); }
.vccc-vit-row b { color: var(--ink-paper-faint); font-size: 9px; letter-spacing: 0.14em; margin-right: 4px; }
.vccc-exam {
  display: grid; grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--paper-rule);
}
.vccc-exam .fld { border-right: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule); }

.ts-fill {
  display: inline-block;
  border-bottom: 1px solid var(--paper-accent);
  padding: 0 4px 1px;
  margin: 0 2px;
  color: #e8f5ec;
  background: rgba(111,217,154,0.06);
}

.todo-list {
  list-style: none; padding: 0; margin: 0;
  counter-reset: t;
}
.todo-list li {
  counter-increment: t;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--paper-line);
}
.todo-list li::before {
  content: counter(t) ".";
  color: var(--ink-paper-faint);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.cap-grid { display: flex; flex-direction: column; gap: 4px; }
.cap-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--paper-rule);
  background: rgba(0,0,0,0.18);
}
.cap-l { font-size: 9px; letter-spacing: 0.18em; color: var(--paper-accent); font-weight: 700; }
.cap-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.cap-pill {
  font-size: 10px; padding: 2px 8px;
  border: 1px solid var(--paper-rule);
  border-radius: 999px;
  color: var(--ink-paper);
  background: rgba(0,0,0,0.2);
}

.vccc-plan { width: 100%; border-collapse: collapse; }
.vccc-plan th, .vccc-plan td {
  padding: 6px 10px;
  border: 1px solid var(--paper-rule);
  text-align: left;
  font-size: 10.5px;
}
.vccc-plan th {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-paper-faint);
  background: rgba(0,0,0,0.3);
}
.vccc-plan td:first-child { width: 30px; text-align: center; color: var(--ink-paper-faint); }
.plan-line {
  display: block;
  border-bottom: 1px solid var(--paper-accent);
  height: 14px;
  opacity: 0.55;
}

/* ---- Topbar Docs toggle ---- */
.topbar-btn.docs { color: var(--paper-accent); border-color: rgba(207, 234, 212, 0.4); }
.topbar-btn.docs:hover { border-color: var(--paper-accent); background: rgba(207, 234, 212, 0.06); }
.topbar-btn.docs.on {
  background: rgba(207, 234, 212, 0.12);
  border-color: var(--paper-accent);
  color: #f0fff5;
  box-shadow: 0 0 0 1px var(--paper-accent) inset;
}

@media (max-width: 1080px) {
  .app.docs-mode { grid-template-columns: 1fr; grid-template-areas: "top" "stage" "foot"; }
  .docs-rail { display: none; }
  .pfc-pg2-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   INTERACTIVITY · shared
   ============================================================ */

/* Hint bar above interactive sheets */
.pfc-trend-hint, .plan-hint {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 6px 12px;
  margin: 8px 0 6px;
  border: 1px solid var(--paper-rule);
  background: rgba(0,0,0,0.18);
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-paper-dim);
}
.pfc-trend-hint .th-l, .plan-hint .th-l {
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 9px; color: var(--ink-paper-faint);
}
.pfc-trend-hint .th-m, .plan-hint .th-m { color: var(--ink-paper-dim); }
.pfc-trend-hint .th-r, .plan-hint .th-r { color: var(--ink-paper); }
.pfc-trend-hint .th-r b, .plan-hint .th-r b { color: var(--paper-accent); }
.th-pip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 9px;
  letter-spacing: 0.2em;
  font-weight: 700;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--ink-paper-orange);
}
.th-pip.pat-sepsis      { color: var(--ink-paper-red); }
.th-pip.pat-hemorrhage  { color: var(--ink-paper-red); }
.th-pip.pat-shock       { color: var(--ink-paper-red); }
.th-pip.pat-burn        { color: var(--ink-paper-orange); }
.th-pip.pat-tbi         { color: #c89cf0; }
.th-pip.pat-respiratory { color: var(--ink-paper-blue); }
.th-pip.pat-cardiac     { color: var(--ink-paper-orange); }
.th-pip.pat-stable      { color: var(--paper-accent); }
.th-pip.pat-assessment  { color: var(--paper-accent); }
.th-pip.pat-baseline    { color: var(--ink-paper-faint); }
.ph-reset {
  font: inherit; font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.14em;
  color: var(--paper-accent);
  background: transparent;
  border: 1px solid var(--paper-rule);
  border-radius: 2px;
  padding: 2px 8px;
  cursor: pointer;
  text-transform: uppercase;
}
.ph-reset:hover { border-color: var(--paper-accent); background: rgba(207,234,212,0.08); }

/* Card I — interactive Tx prompts & cell taps */
.pfc-grid .plot-cell {
  cursor: crosshair;
  transition: background 0.08s;
}
.pfc-grid .plot-cell:hover { background: rgba(207,234,212,0.08); }
.pfc-grid .plot-cell.has-manual { background: rgba(207,234,212,0.06); }
.pfc-grid .plot-manual {
  font-weight: 800;
  text-shadow: 0 0 6px currentColor;
}
.pfc-grid .rx-cell.tappable { cursor: pointer; transition: color 0.1s, background 0.1s; }
.pfc-grid .rx-cell.tappable:hover { color: var(--paper-accent); background: rgba(207,234,212,0.08); }
.pfc-grid .rx-cell.done { color: var(--ink-paper-faint); text-decoration: line-through; }
.pfc-grid .rx-cell.done .tx-bullet { color: var(--paper-accent); text-decoration: none; display: inline-block; }
.pfc-grid .rx-cell .tx-bullet {
  display: inline-block;
  width: 12px; margin-right: 6px;
  color: var(--ink-paper-faint);
  text-align: center;
  font-weight: 700;
}

/* Card II — editable inputs */
.bar-row input.row-fill {
  font: inherit; font-family: var(--mono);
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--paper-line);
  color: var(--ink-paper);
  padding: 3px 6px;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.02em;
  width: 100%;
}
.bar-row input.row-fill:focus {
  outline: none; border-color: var(--paper-accent);
  background: rgba(207,234,212,0.04);
}
.gcs-input {
  font: inherit; font-family: var(--mono);
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--paper-line);
  color: var(--ink-paper);
  font-size: 12px; font-weight: 700;
  text-align: right;
  padding: 2px 6px; border-radius: 2px;
  width: 60px;
}
.gcs-input:focus { outline: none; border-color: var(--paper-accent); }

.drug-table input, .vent-table input {
  font: inherit; font-family: var(--mono);
  background: transparent;
  border: none;
  color: var(--ink-paper);
  font-size: 10.5px;
  padding: 2px 4px;
  width: 100%;
  letter-spacing: 0.02em;
}
.drug-table input:focus, .vent-table input:focus {
  outline: 1px solid var(--paper-accent);
  background: rgba(207,234,212,0.05);
}
.drug-table input::placeholder, .vent-table input::placeholder { color: var(--ink-paper-faint); }
.drug-table td:has(button.row-x), .drug-table th:last-child { width: 32px; text-align: center; }
.row-x {
  font: inherit; font-family: var(--mono);
  background: transparent; border: 1px solid var(--paper-rule);
  color: var(--ink-paper-faint);
  width: 22px; height: 22px; line-height: 1; padding: 0;
  border-radius: 2px; cursor: pointer;
  font-size: 14px;
}
.row-x:hover { color: var(--ink-paper-red); border-color: var(--ink-paper-red); }
.drug-table .add-row td { padding: 4px; background: rgba(0,0,0,0.2); }
.add-btn {
  font: inherit; font-family: var(--mono);
  background: transparent; border: 1px dashed var(--paper-rule);
  color: var(--paper-accent);
  padding: 4px 12px;
  font-size: 10px; letter-spacing: 0.12em;
  cursor: pointer; border-radius: 2px;
  width: 100%;
}
.add-btn:hover { border-color: var(--paper-accent); background: rgba(207,234,212,0.06); }

/* Nursing checklist tally */
.nurse-grp-head {
  display: flex; justify-content: space-between; align-items: center;
}
.nurse-count {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-paper-faint);
  font-weight: 600;
}
.nurse-line.check-item {
  padding: 3px 4px;
  cursor: pointer;
}
.nurse-line.check-item .ct { font-size: 10.5px; color: var(--ink-paper-dim); }
.nurse-line.check-item.on .ct { color: var(--ink-paper); }
.nursing-tally {
  margin-top: 6px;
  padding: 5px 10px;
  border-top: 1px dashed var(--paper-line);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-paper-faint);
  text-transform: uppercase;
}

/* Care plan cells clickable */
.care-table .grid-cell.tappable {
  cursor: pointer;
  transition: background 0.08s;
}
.care-table .grid-cell.tappable:hover { background: rgba(207,234,212,0.10) !important; }
.care-table .grid-cell.override { background: rgba(94,202,224,0.08) !important; }
.care-table .grid-cell.override.on { background: rgba(94,202,224,0.16) !important; }

/* Basic vitals chart — editable cells */
.bvc-table td input {
  font: inherit; font-family: var(--mono);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-paper);
  font-size: 10.5px;
  text-align: center;
  padding: 2px 4px;
  width: 100%;
  letter-spacing: 0.02em;
}
.bvc-table td input:hover { border-color: var(--paper-line); }
.bvc-table td input:focus {
  outline: none;
  border-color: var(--paper-accent);
  background: rgba(207,234,212,0.06);
}
.bvc-table tr.now td input { color: var(--paper-accent); font-weight: 600; }

/* Telemed — inline inputs & selects */
.ts-inline, .ts-textarea {
  font: inherit; font-family: var(--mono);
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-accent);
  color: var(--ink-paper);
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 0.02em;
  min-width: 120px;
  border-radius: 2px;
}
.ts-inline.tiny { min-width: 50px; max-width: 60px; text-align: center; }
.ts-inline.wide { min-width: 240px; width: 100%; }
.ts-inline:focus, .ts-textarea:focus {
  outline: none; border-color: var(--paper-accent);
  background: rgba(207,234,212,0.06);
}
select.ts-inline { cursor: pointer; }
select.ts-inline option {
  background: var(--paper-bg);
  color: var(--ink-paper);
}
.ts-textarea {
  width: 100%; min-height: 60px; resize: vertical;
  font-family: var(--mono); line-height: 1.45;
  display: block;
}
.plan-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 8px !important;
}
.plan-cell select { width: 100%; }

/* ============================================================
   LIGHT THEME OVERRIDES
   ============================================================ */
:root[data-theme="light"] .sheet {
  --ink-paper: #1c2426;
  --ink-paper-dim: #54616a;
  --ink-paper-faint: #8a96a0;
  --ink-paper-red: #b3241c;
  --ink-paper-blue: #14627a;
  --ink-paper-orange: #b07a1c;
  --paper-bg: #fbfaf6;
  --paper-bg-2: #f4f3ee;
  --paper-line: rgba(40, 40, 40, 0.14);
  --paper-rule: rgba(40, 40, 40, 0.40);
  --paper-accent: #1f7a4a;
  --beige: rgba(212, 154, 55, 0.18);
  --shade: rgba(80, 100, 90, 0.08);
}
:root[data-theme="light"] .sheet {
  background:
    repeating-linear-gradient(0deg, var(--paper-line), var(--paper-line) 1px, transparent 1px, transparent 24px),
    var(--paper-bg);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.06) inset,
    0 18px 50px rgba(0,0,0,0.10);
}

/* Darken on-sheet backgrounds (which used rgba(0,0,0,...)) in light mode */
:root[data-theme="light"] .sheet .form-section,
:root[data-theme="light"] .sheet .vit-chart-wrap,
:root[data-theme="light"] .sheet .vccc-banner,
:root[data-theme="light"] .sheet .callout-box,
:root[data-theme="light"] .sheet .cap-row,
:root[data-theme="light"] .sheet .pfc-trend-hint,
:root[data-theme="light"] .sheet .plan-hint,
:root[data-theme="light"] .sheet .care-table-wrap,
:root[data-theme="light"] .sheet .pfc-grid,
:root[data-theme="light"] .sheet .care-table,
:root[data-theme="light"] .sheet .bvc-table {
  background: var(--paper-bg-2) !important;
}
:root[data-theme="light"] .sheet .form-section > header,
:root[data-theme="light"] .sheet .drug-table th,
:root[data-theme="light"] .sheet .pace-table th,
:root[data-theme="light"] .sheet .vccc-plan th,
:root[data-theme="light"] .sheet .bvc-table thead th,
:root[data-theme="light"] .sheet .care-table thead th {
  background: rgba(60, 80, 70, 0.08) !important;
  color: var(--ink-paper-dim) !important;
}
:root[data-theme="light"] .sheet .fld,
:root[data-theme="light"] .sheet .pace-table td:first-child,
:root[data-theme="light"] .sheet .vccc-fields .fld,
:root[data-theme="light"] .sheet .vccc-exam .fld,
:root[data-theme="light"] .sheet .vccc-vit-row,
:root[data-theme="light"] .sheet .ts-vitals {
  background: rgba(255, 255, 255, 0.6) !important;
}
:root[data-theme="light"] .sheet .pfc-grid .val-l,
:root[data-theme="light"] .sheet .pfc-grid .val-r,
:root[data-theme="light"] .sheet .pfc-grid .key-cell {
  background: rgba(40, 40, 40, 0.06) !important;
  color: var(--ink-paper);
}
:root[data-theme="light"] .sheet .pfc-grid thead th,
:root[data-theme="light"] .sheet .pfc-grid thead th.hd-day-cell {
  background: rgba(212, 154, 55, 0.22) !important;
  color: var(--ink-paper) !important;
}
:root[data-theme="light"] .sheet .pfc-grid thead th.tx-head,
:root[data-theme="light"] .sheet .pfc-grid thead th.hd-meta {
  background: rgba(212, 154, 55, 0.28) !important;
}
:root[data-theme="light"] .sheet .pfc-grid .rx-cell {
  background: rgba(255, 255, 255, 0.55) !important;
}
:root[data-theme="light"] .sheet tr.shade td { background: rgba(40, 80, 60, 0.06) !important; }
:root[data-theme="light"] .sheet tr.beige td { background: rgba(212, 154, 55, 0.10) !important; }
:root[data-theme="light"] .sheet .bvc-table tr.now td,
:root[data-theme="light"] .sheet .vit-table tr.now td,
:root[data-theme="light"] .sheet .care-table .grid-cell.on {
  background: rgba(31, 122, 74, 0.08) !important;
}
:root[data-theme="light"] .sheet .doc-stamp {
  background: rgba(0,0,0,0.04);
  color: var(--ink-paper-dim);
}
:root[data-theme="light"] .sheet .doc-stamp.s-live {
  background: rgba(31, 122, 74, 0.10);
  color: var(--ink-paper);
  text-shadow: none;
}
:root[data-theme="light"] .sheet .ts-inline,
:root[data-theme="light"] .sheet .ts-textarea,
:root[data-theme="light"] .sheet .bar-row input.row-fill,
:root[data-theme="light"] .sheet .gcs-input {
  background: rgba(255, 255, 255, 0.75);
  border-color: var(--paper-line);
  border-bottom-color: var(--paper-accent);
  color: var(--ink-paper);
}
:root[data-theme="light"] .sheet .ts-inline:focus,
:root[data-theme="light"] .sheet .ts-textarea:focus {
  background: rgba(31, 122, 74, 0.06);
}
:root[data-theme="light"] .sheet .bvc-table td input {
  color: var(--ink-paper);
}
:root[data-theme="light"] .sheet .bvc-table td input:focus,
:root[data-theme="light"] .sheet .drug-table input:focus,
:root[data-theme="light"] .sheet .vent-table input:focus {
  background: rgba(31, 122, 74, 0.08);
}
:root[data-theme="light"] .sheet .check-item .cb {
  background: rgba(255, 255, 255, 0.7);
}
:root[data-theme="light"] .sheet .check-item.on .cb,
:root[data-theme="light"] .sheet .check-item:has(input:checked) .cb {
  background: var(--paper-accent);
  color: #fff;
}
:root[data-theme="light"] .sheet .cap-pill {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-paper);
}
:root[data-theme="light"] .sheet .grid-check {
  color: var(--paper-accent) !important;
  text-shadow: none !important;
}
:root[data-theme="light"] .sheet .pfc-grid .plot {
  text-shadow: 0 0 0.5px currentColor;
}
:root[data-theme="light"] .sheet .pfc-grid .plot-cell:hover {
  background: rgba(31, 122, 74, 0.08) !important;
}
:root[data-theme="light"] .sheet .pfc-grid .rx-cell.tappable:hover {
  background: rgba(31, 122, 74, 0.08) !important;
}
:root[data-theme="light"] .sheet .care-table .grid-cell.tappable:hover {
  background: rgba(31, 122, 74, 0.10) !important;
}

/* light-mode docs rail */
:root[data-theme="light"] .docs-tab {
  background: var(--panel-2);
}
:root[data-theme="light"] .docs-tab.on {
  background: rgba(31, 138, 91, 0.10);
  box-shadow: 0 0 0 1px rgba(31, 138, 91, 0.20) inset;
}
:root[data-theme="light"] .docs-stage-body {
  background: var(--bg-0);
}
:root[data-theme="light"] .topbar-btn.docs {
  color: var(--live);
  border-color: rgba(31, 138, 91, 0.40);
}
:root[data-theme="light"] .topbar-btn.docs.on {
  background: rgba(31, 138, 91, 0.10);
  color: var(--live);
}

/* Unified Tweaks panel accent */
:root{--tk-accent:#6fd99a}