/* Simulation remote — the phone that hosts the engine.
   Load order: basecoat.min.css -> tokens.css -> tool.css -> remote.css

   This file is LAYOUT ONLY. Every colour is a token; the accent is the
   sevoflurane yellow var(--primary). Basecoat supplies .btn .badge .card
   .input; tool.css supplies .site-header .wordmark .crumb .site-footer
   .sec-label .chip .field .acts .hint .hidden — none of that is restated here.

   The one exception is the block below: DATA colours, shared verbatim with
   monitor.css so a numeral means the same thing on both halves of the
   simulator. Clinical convention, not theme — never re-theme them. */
:root {

  --nav-h: 56px;
  --safe-b: env(safe-area-inset-bottom);
  --safe-l: env(safe-area-inset-left);
  --safe-r: env(safe-area-inset-right);
}

* { -webkit-tap-highlight-color: transparent; }

/* tokens.css insets the body for the notch and lets it scroll. The remote is a
   fixed instrument: it insets element by element so the header bleeds into the
   notch and only <main> ever scrolls. */
html, body { height: 100%; overscroll-behavior: none; }
body {
  display: flex; flex-direction: column;
  height: 100dvh; padding: 0; overflow: hidden;
  font-variant-numeric: tabular-nums;
}

/* Dragging a vital must never select text or raise the iOS callout. The
   pairing code and the event log stay selectable throughout. */
body.dragging { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.dragging #pin, body.dragging .log,
#pin, .log { -webkit-user-select: text; user-select: text; }

.btn, .chip, .item, #tabs button, .dchip > * { touch-action: manipulation; }

/* Hand-drawn glyph family (see the sprite in remote.html). stroke-width is
   pre-scaled from the viewBox so the rendered line lands on ~1.5px. */
.pglyph {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--muted-foreground);
}
.wm-mark {
  width: 26px; height: 13px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--primary);
}

/* --------------------------------------------------------------- pairing */
#pair {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; overflow-y: auto;
  background: var(--background);
  padding-top: env(safe-area-inset-top);
  padding-bottom: var(--safe-b);
}
.pair-inner { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 560px; margin: 0 auto; }
.pair-body {
  flex: 1; display: flex; align-items: center;
  padding: 16px max(16px, var(--safe-r)) 16px max(16px, var(--safe-l));
}
.pair-card { width: 100%; }
#pin.host-code {
  margin: 4px 0 10px;
  font-family: var(--font-data); font-size: clamp(52px, 19vw, 78px); font-weight: 700;
  letter-spacing: .16em; line-height: 1.05; text-align: center;
  color: var(--primary);
}
#pair-msg { min-height: 20px; font-size: 13px; line-height: 1.6; color: var(--destructive); }
#pair-msg:empty { display: none; }
#pair .acts .btn { flex: 1 1 auto; }
#pair .hint { margin-top: 12px; }
#pair .site-footer { margin-top: 0; }

/* ---------------------------------------------------------------- header */
#app-header {
  flex: none; position: static; gap: 8px;
  min-height: 48px;
  padding-top: calc(6px + env(safe-area-inset-top));
  padding-bottom: 6px;
  padding-left: max(12px, var(--safe-l));
  padding-right: max(12px, var(--safe-r));
  background: var(--background); backdrop-filter: none;
}
#app-header .wordmark { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
/* crumb sits with the mark; the pairing badge and Reset own the right edge */
#app-header .crumb { margin-left: 0; font-size: 12px; }

#link {
  flex: none; margin-left: auto; gap: 5px; padding: 3px 7px;
  font-family: var(--font-data); font-size: 10px; letter-spacing: .04em;
  color: var(--muted-foreground);
}
#link b { font-size: 14px; font-weight: 700; letter-spacing: .16em; color: var(--primary); }
#link #viewers::before { content: "·"; margin-right: 4px; opacity: .6; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--destructive); flex: none; }
.dot.on { background: var(--success); }

#hdr-reset { min-width: 0; padding-inline: 12px; }
#a-reset { min-width: 68px; }
/* Two-tap confirm — first tap arms, second tap fires. No window.confirm. */
#hdr-reset.armed, #a-reset.armed {
  color: var(--destructive);
  border-color: var(--destructive);
  background: color-mix(in oklab, var(--destructive) 16%, transparent);
}

/* Wake-lock / transport notes: quiet, never silent. */
#notice {
  flex: none; margin: 0;
  padding: 7px max(12px, var(--safe-r)) 7px max(12px, var(--safe-l));
  font-size: 12px; line-height: 1.5; color: var(--muted-foreground);
  background: color-mix(in oklab, var(--primary) 9%, transparent);
  border-bottom: 1px solid var(--border);
}

/* --------------------------------------------------------- status strip */
#strip {
  flex: none; display: flex;
  background: var(--card); border-block: 1px solid var(--border);
  padding-left: var(--safe-l); padding-right: var(--safe-r);
}
#strip .cell { flex: 1; min-width: 0; padding: 5px 8px; text-align: center; border-right: 1px solid var(--border); }
#strip .cell:last-child { border-right: none; }
#strip .k { font-size: 10px; letter-spacing: .1em; color: var(--muted-foreground); }
#strip .n { font-family: var(--font-data); font-size: 22px; font-weight: 700; line-height: 1.15; }
#strip .hr { color: var(--ecg); }
#strip .sat { color: var(--vital); }
#strip .bp { color: var(--art); }
#strip.alarm { animation: stripalarm 1s steps(1, end) infinite; }
@keyframes stripalarm { 50% { background: color-mix(in oklab, var(--destructive) 22%, var(--card)); } }
@media (prefers-reduced-motion: reduce) {
  #strip.alarm { animation: none; background: color-mix(in oklab, var(--destructive) 22%, var(--card)); }
}

/* ------------------------------------------------------- deviation bar */
/* Everything currently off baseline, always in view under the vitals. */
#devbar {
  flex: none; position: relative;
  background: var(--background); border-bottom: 1px solid var(--border);
}
#devscroll {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* right-edge fade: the strip is scrollable and must say so */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 26px), transparent 100%);
}
#devscroll::-webkit-scrollbar { display: none; }
#devscroll.no-fade { -webkit-mask-image: none; mask-image: none; }
#devchips {
  display: flex; align-items: stretch; gap: 8px; width: max-content;
  padding: 7px max(12px, var(--safe-r)) 7px max(12px, var(--safe-l));
}

.dchip {
  display: flex; align-items: stretch; min-height: 44px;
  background: var(--secondary); border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px); overflow: hidden;
}
.dchip > .go {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 4px 10px; min-height: 44px; min-width: 44px;
  background: none; border: 0; cursor: pointer; text-align: left; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--foreground);
}
.dchip > .go .s {
  font-size: 11px; font-weight: 400; letter-spacing: .04em;
  color: var(--muted-foreground);
}
.dchip > .x {
  flex: none; width: 44px; min-height: 44px;
  background: none; border: 0; border-left: 1px solid var(--border);
  font-size: 16px; line-height: 1; color: var(--muted-foreground); cursor: pointer;
}
.dchip > .x:active { background: var(--accent); }
.dchip.scenario { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 16%, transparent); }
.dchip.scenario > .go { color: var(--primary); }
.dchip.scenario > .x { border-left-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.dchip.warn { border-color: color-mix(in oklab, var(--destructive) 55%, var(--border)); }
.dchip.warn > .go { color: var(--destructive); }
.dchip .arrow { font-family: var(--font-data); }

.dchip.all { border-style: dashed; }
.dchip.all > .go { color: var(--muted-foreground); font-weight: 400; }

#dev-empty {
  margin: 0; padding: 9px max(12px, var(--safe-r)) 9px max(12px, var(--safe-l));
  font-size: 12px; color: var(--muted-foreground);
}

/* ------------------------------------------------------------- content */
#view {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px max(12px, var(--safe-r)) calc(var(--nav-h) + var(--safe-b) + 20px) max(12px, var(--safe-l));
}
.panel { display: none; flex-direction: column; gap: 10px; }
.panel.on { display: flex; }
.panel .sec-label { margin: 8px 2px -2px; }
.panel .sec-label:first-child { margin-top: 0; }
#view .site-footer { margin-top: 28px; padding-inline: 2px; padding-bottom: 0; }

/* Brief highlight when a deviation chip sends you to its control. */
@keyframes locate { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 3px var(--primary); } }
.locate { animation: locate 1.5s ease-out 1; border-color: var(--primary) !important; }
@media (prefers-reduced-motion: reduce) { .locate { animation: none; box-shadow: 0 0 0 3px var(--primary); } }

/* --------------------------------------------------------------- dials */
#dials { display: grid; grid-template-columns: 1fr; gap: 10px; }
.dial {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius);
  /* The CARD scrolls the page. Only the number below drags. */
  touch-action: pan-y;
}
.dial .meta { flex: 1; min-width: 0; }
.dial .name { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
.dial .hint { margin-top: 2px; font-size: 12px; color: var(--muted-foreground); }
.dial .track { height: 4px; margin-top: 8px; border-radius: 3px; background: var(--accent); overflow: hidden; }
.dial .track i { display: block; height: 100%; background: var(--primary); transition: width .12s linear; }

/* The number is the drag handle — and the only element that takes the gesture. */
.dial .num {
  min-width: 2.5em; padding: 2px 0;
  font-family: var(--font-data); font-size: 42px; font-weight: 700; line-height: 1;
  text-align: right; cursor: ns-resize;
  touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transform-origin: 100% 50%;
  transition: transform 60ms ease-out;
}
.dial .num.tick { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .dial .num { transition: none; } .dial .num.tick { transform: none; } }
.dial .unit { width: 2.6em; font-size: 12px; color: var(--muted-foreground); }
.dial.dragging { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 8%, var(--card)); }

/* Precision fallback: 44x44 with a real gap between them. */
.dial .step { display: flex; flex-direction: column; gap: 8px; flex: none; }
.dial .step button {
  width: 44px; height: 44px; min-height: 44px;
  display: grid; place-items: center;
  background: var(--secondary); border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  font-size: 20px; line-height: 1; color: var(--foreground); cursor: pointer;
}
.dial .step button:active { background: var(--accent); }

.n-hr { color: var(--ecg); }
.n-spo2 { color: var(--vital); }
.n-sys, .n-dia { color: var(--art); }
.n-rr, .n-etco2 { color: var(--co2); }
.n-bis { color: var(--bis); }
.n-sevo { color: var(--primary); }
.n-temp, .n-fio2, .n-cvp { color: var(--foreground); }

/* --------------------------------------------------------------- chips */
/* tool.css owns .chip; the remote only needs them side by side and in a row
   layout, because our chips carry a glyph beside the label. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { flex-direction: row; align-items: center; gap: 8px; }
.chips .chip.on .pglyph { color: var(--primary); }
.chip.danger { border-color: color-mix(in oklab, var(--destructive) 55%, var(--border)); color: var(--destructive); }
.chip.danger.on { background: color-mix(in oklab, var(--destructive) 18%, transparent); border-color: var(--destructive); }

/* --------------------------------------------------------------- lists */
.list { display: flex; flex-direction: column; gap: 8px; }
.item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 9px 12px; text-align: left;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--foreground); cursor: pointer;
}
.item.static { cursor: default; }
.item:active { background: var(--accent); }
.item.on { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, var(--card)); }
.item .t { flex: 1; min-width: 0; }
.item .t b { display: block; font-size: 14px; font-weight: 700; }
.item .t span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--muted-foreground); }
.item .badge { flex: none; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.item .badge.cat-critical, .item .badge.cat-arrest { color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 55%, var(--border)); }
.item .badge.cat-airway, .item .badge.cat-respiratory { color: var(--pleth); }
.item .badge.cat-rhythm, .item .badge.cat-als { color: var(--ecg); }
.item .badge.give { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); }
.item.on .badge.give { background: var(--primary); color: var(--primary-foreground); }

/* ------------------------------------------------------------- actions */
.btn-grid { display: grid; gap: 8px; }
.btn-grid.two { grid-template-columns: 1fr 1fr; }
.btn-grid.three { grid-template-columns: repeat(3, 1fr); }
.btn-grid .btn { min-height: 48px; white-space: normal; line-height: 1.25; }
.btn.is-good {
  background: color-mix(in oklab, var(--success) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--success) 60%, var(--border));
  color: var(--success);
}
/* Toggle buttons announce state with the accent, same as .chip.on. */
.btn-grid .btn.on {
  background: color-mix(in oklab, var(--primary) 18%, transparent);
  border-color: var(--primary); color: var(--primary);
}

#st-field label { display: flex; align-items: baseline; gap: 6px; }
/* the label is uppercased by tool.css — the measured value must not be */
#st-field label .v { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--foreground); }
#st-field #st-val { font-family: var(--font-data); }
#st-range { width: 100%; height: 44px; accent-color: var(--primary); touch-action: pan-y; }

/* ----------------------------------------------------------- event log */
.log {
  max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-data); font-size: 12px; line-height: 1.75; color: var(--muted-foreground);
}
.log .e { display: flex; gap: 8px; }
.log .e time { flex: none; color: var(--muted-foreground); opacity: .75; }
.log .e span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-empty { margin: 0; color: var(--muted-foreground); opacity: .8; }

/* ------------------------------------------------------------ tab bar */
#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  padding-left: var(--safe-l); padding-right: var(--safe-r);
  background: var(--card); border-top: 1px solid var(--border);
}
#tabs button {
  flex: 1; min-width: 0; min-height: var(--nav-h);
  display: flex; align-items: center; justify-content: center;
  padding: 4px 2px;
  background: none; border: 0; border-top: 2px solid transparent;
  font-size: 12px; letter-spacing: .04em; color: var(--muted-foreground); cursor: pointer;
}
#tabs button.on { color: var(--primary); border-top-color: var(--primary); font-weight: 700; }
#tabs button:active { background: var(--accent); }

/* ---------------------------------------------------------- landscape */
/* A phone on its side: half the height, so two dial columns and a slim head. */
@media (max-height: 500px) and (orientation: landscape) {
  #dials { grid-template-columns: 1fr 1fr; }
  #app-header { min-height: 40px; padding-top: calc(2px + env(safe-area-inset-top)); padding-bottom: 2px; }
  #app-header .wordmark { font-size: 13px; }
  #strip .n { font-size: 18px; }
  #strip .cell { padding: 2px 8px; }
  .dial { padding: 8px 10px; }
  .dial .num { font-size: 30px; }
  .panel .sec-label { margin-top: 4px; }
  :root { --nav-h: 48px; }
}

/* Roomier phones and tablets */
@media (min-width: 480px) {
  #app-header { min-height: 52px; }
  #app-header .wordmark { font-size: 15px; }
  #app-header .crumb { font-size: 13px; }
}
@media (max-width: 479px) {
  /* The mark carries the brand; the crumb carries the page. Both stay. */
  #app-header .wm-text { display: none; }
}
@media (min-width: 640px) {
  #dials { grid-template-columns: 1fr 1fr; }
  #view { padding-inline: 20px; }
  .btn-grid.two, .btn-grid.three { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}