/* AlphaBoard — high-contrast, glove-and-thumb, readable in sun and at night. */
:root {
  /* ===== Alpha brand — CHROME ONLY (top bar, login, buttons, accents) ===== */
  --alpha-red: #E61F36;     /* sampled from the Alpha logo */
  --alpha-blue: #112B4C;    /* sampled from the Alpha logo (navy) */
  --alpha-white: #FFFFFF;
  --alpha-blue-bright: #1E64D6; /* derived: interactive blue, pops on white, never confused w/ clinical */
  --alpha-blue-deep: #0A2E6E;   /* derived: deeper brand navy for strong headers */
  --alpha-red-deep: #b91528;    /* derived: brand-red press state */

  /* chrome surfaces — LIGHT theme (outdoor daytime; clinical colors pop harder on white) */
  --navy: var(--alpha-blue);
  --navy-2: var(--alpha-blue);  /* selected/active fills = brand navy with white text */
  --bg: #F4F6FA;                /* board / app background */
  --surface: #FFFFFF;           /* cards, columns, top bar */
  --panel: #FFFFFF;
  --panel-2: #F1F4FA;           /* subtle gray for chips / inputs / pills */
  --line: #E2E6EE;              /* thin light border (≈0.5px feel) */
  --text: #0f1b2d;              /* near-black navy — high contrast on white */
  --muted: #5b6b86;             /* muted blue-gray, still readable in sun */

  /* ===== CLINICAL SIGNALS — DO NOT REBRAND =====
     Acuity card stripes + station busyness badges. These are medical signals, not chrome.
     Note --red (#dc2626 clinical) is intentionally distinct from --alpha-red (#E61F36 brand). */
  --green: #16a34a;
  --green-d: #0c5c2c;
  --yellow: #eab308;
  --yellow-d: #7a5c04;
  --red: #dc2626;
  --red-d: #7a1414;
  --tap: 58px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#app { max-width: 760px; margin: 0 auto; min-height: 100%; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* header */
.hdr { display: flex; align-items: center; gap: 10px; padding: 14px 16px; position: sticky; top: 0;
  background: var(--surface); border-bottom: 3px solid var(--alpha-red); z-index: 5; box-shadow: 0 1px 3px rgba(10,30,60,.06); }
.hdr-title { font-weight: 700; font-size: 19px; flex: 1; color: var(--alpha-blue); }
.hdr-meta { color: var(--muted); font-size: 14px; }
.icon-btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  width: 40px; height: 40px; font-size: 26px; line-height: 1; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot.off { background: #64748b; }

.screen { padding: 0 14px 120px; }

/* start / login — clean white, red/white/blue, Alpha logo prominent */
.start { position: fixed; inset: 0; background: var(--alpha-white); color: var(--alpha-blue);
  overflow-y: auto; padding: 7vh 24px calc(40px + env(safe-area-inset-bottom)); display: flex; justify-content: center; }
.start::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--alpha-blue) 0 50%, var(--alpha-red) 50% 100%); } /* red/blue brand bar */
.start-inner { width: 100%; max-width: 380px; text-align: center; }
.start-logo { width: 168px; height: auto; margin: 4px auto 8px; display: block; }
.start-title { font-size: 26px; font-weight: 800; color: var(--alpha-blue); letter-spacing: .2px; }
.start-sub { color: var(--alpha-red); font-weight: 600; font-size: 14px; margin-top: 2px; letter-spacing: .3px; }
.lbl { display: block; text-align: left; margin: 18px 0 6px; color: var(--alpha-blue); font-size: 14px; font-weight: 600; }
.field { width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; font-size: 17px; }
.field.area { min-height: 90px; resize: vertical; }
/* inputs/button on the white login surface */
.start .field { background: #fff; color: var(--alpha-blue); border: 1.5px solid #c9d4e6; }
.start .field:focus { border-color: var(--alpha-blue-bright); outline: none; }
.start .btn-primary.big { background: var(--alpha-blue); }
.start .btn-primary.big:active { background: var(--alpha-blue-bright); }

/* shared bits */
.pid { font-weight: 800; font-size: 18px; letter-spacing: .3px; }
.pid.big { font-size: 22px; }
.since { color: var(--muted); font-variant-numeric: tabular-nums; }
.cc { font-size: 17px; font-weight: 600; }
.loc { color: var(--muted); font-size: 14px; }
.status-pill { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; font-size: 13px; font-weight: 600; }

/* board — live command board, station columns */
.board-screen { padding: 0 0 40px; }
/* sticky chrome = white top bar + view tabs, with the brand-red accent under the whole thing */
.chrome { position: sticky; top: 0; z-index: 5; background: var(--surface);
  border-bottom: 3px solid var(--alpha-red); box-shadow: 0 1px 3px rgba(10,30,60,.06); }
/* BUILD 26: mobile census-first chrome is hidden on desktop; shown only ≤480px (see media block). */
.m-census-h, .m-drawer, .m-fab { display: none; }
.board-topbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.tabs { display: flex; gap: 6px; padding: 0 14px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab { background: var(--panel-2); color: var(--alpha-blue); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.tab.active { background: var(--alpha-blue-bright); color: #fff; border-color: var(--alpha-blue-bright); }
.bt-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.bt-logo { height: 38px; width: auto; flex: 0 0 auto; display: block; } /* logo sits cleanly on the white bar, present not timid */
.bt-title { font-weight: 800; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--alpha-blue); }
.bt-count { color: var(--muted); font-size: 14px; white-space: nowrap; }
.bt-count::before { content: '· '; }
.bt-code { border: 1px solid var(--line, #d8dee6); background: #f4f7fb; color: var(--alpha-blue); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; cursor: pointer; }
.bt-code:hover { background: #e9f0fa; }
.join-banner { background: #eef6ff; border: 1px solid #cfe3fb; color: var(--alpha-blue); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 600; margin: 4px 0 10px; }
.code-chip-lg { display: inline-block; font-size: 22px; font-weight: 800; letter-spacing: 1px; color: var(--alpha-blue); background: #f4f7fb; border: 1px solid var(--line, #d8dee6); border-radius: 10px; padding: 6px 14px; }
.bt-actions { display: flex; gap: 8px; }
.btn-map { background: var(--surface); color: var(--alpha-blue-bright); border: 1.5px solid var(--alpha-blue-bright); border-radius: 10px; padding: 10px 14px; font-size: 15px; font-weight: 700; }
.btn-quicklog { background: var(--alpha-blue-bright); color: #fff; border: none; border-radius: 10px; padding: 10px 16px; font-size: 16px; font-weight: 800; }
.btn-quicklog:active { background: var(--alpha-blue); }

.stations { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 14px; align-items: start; }
@media (max-width: 520px) { .stations { grid-template-columns: 1fr; } } /* phones: stack vertically, same markup */
.station { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: 12px; overflow: hidden; }
.station.busy-green { border-top-color: var(--green); }
.station.busy-amber { border-top-color: var(--yellow); }
.station.busy-red { border-top-color: var(--red); }
.station-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.station-name { font-weight: 700; font-size: 15px; color: var(--alpha-blue); }
.count-badge { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.count-badge.busy-green { background: var(--green); color: #04210f; }
.count-badge.busy-amber { background: var(--yellow); color: #211800; }
.count-badge.busy-red { background: var(--red); color: #fff; }
.station-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.quiet { color: var(--muted); font-size: 13px; text-align: center; padding: 14px 0; opacity: .65; font-style: italic; }
.more-btn { background: var(--panel-2); color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; padding: 8px; font-size: 13px; font-weight: 600; }

.pcard { text-align: left; background: var(--surface); border: 1px solid var(--line); border-left: 8px solid var(--green);
  border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; color: var(--text);
  box-shadow: 0 1px 2px rgba(10,30,60,.05); }
.pcard:active { background: #eef2f8; }
.pcard.acuity-green { border-left-color: var(--green); }
.pcard.acuity-yellow { border-left-color: var(--yellow); }
.pcard.acuity-red { border-left-color: var(--red); background: linear-gradient(90deg, rgba(220,38,38,.10), #fff 55%); }
.pcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pcard .pid { font-size: 15px; }
.pcc { font-size: 15px; font-weight: 600; line-height: 1.2; }
.pstatus { color: var(--muted); font-size: 12px; text-transform: capitalize; }

/* buttons */
.btn-primary { background: var(--alpha-blue-bright); color: #fff; border: none; border-radius: 12px; padding: 14px; font-size: 17px; font-weight: 700; }
.btn-primary:active { background: var(--alpha-blue); }
/* brand focus ring (blue — never confused with clinical red/amber/green) */
:focus-visible { outline: 3px solid var(--alpha-blue-bright); outline-offset: 2px; border-radius: 6px; }
.btn-primary.big { width: 100%; padding: 18px; font-size: 19px; margin-top: 20px; }
.btn-line { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font-size: 16px; }

.prompt { font-size: 18px; font-weight: 700; margin: 16px 4px 12px; }
.steps { display: flex; gap: 8px; padding: 12px 2px 0; }
.step { flex: 1; text-align: center; font-size: 12px; color: var(--muted); padding: 8px 4px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.step.active { color: #fff; background: var(--navy-2); border-color: var(--navy-2); }
.step.done { color: var(--alpha-blue-bright); }

.tapgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tapgrid.small { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
@media (max-width: 420px) { .tapgrid.small { grid-template-columns: 1fr 1fr; } }
.tap { min-height: var(--tap); background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 14px; font-size: 17px; font-weight: 600; padding: 12px; }
.tap:active { background: #e7edf7; }
.tap.rx { border-color: var(--yellow-d); background: linear-gradient(180deg, rgba(234,179,8,.12), var(--panel)); }

.acuity-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.acuity-btn { min-height: 88px; border-radius: 16px; font-size: 17px; font-weight: 800; color: #fff; border: 3px solid transparent; }
.acuity-btn.acuity-green { background: var(--green-d); }
.acuity-btn.acuity-yellow { background: var(--yellow-d); }
.acuity-btn.acuity-red { background: var(--red-d); }
.acuity-btn.sel { border-color: #fff; }
.acuity-btn.acuity-green.sel { background: var(--green); }
.acuity-btn.acuity-yellow.sel { background: var(--yellow); color: #1a1300; }
.acuity-btn.acuity-red.sel { background: var(--red); }

.optlabel { color: var(--muted); font-size: 13px; margin: 16px 4px 8px; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 16px; font-size: 15px; font-weight: 600; min-height: 46px; }
.chip.wide { flex: 1 1 45%; }
.chip.sel { background: var(--navy-2); border-color: #6f86c9; color: #fff; }

/* chart */
.summary { border: 1px solid var(--line); border-left: 10px solid var(--green); background: var(--panel);
  border-radius: 14px; padding: 16px; margin-top: 14px; }
.summary.acuity-yellow { border-left-color: var(--yellow); }
.summary.acuity-red { border-left-color: var(--red); }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; }
.sum-meta { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.sect { margin-top: 18px; }
.sect-h { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--alpha-blue); font-weight: 700; margin: 0 4px 10px; }
.advance-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-status { flex: 1 1 40%; min-height: var(--tap); background: var(--navy-2); color: #fff; border: 1px solid #6f86c9;
  border-radius: 14px; font-size: 17px; font-weight: 700; }
.closed-banner { margin-top: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; text-align: center; color: var(--muted); font-weight: 700; letter-spacing: .5px; }
/* Reactivated (discharged patient brought back onto the board for continued charting) */
.reactivated-banner { background: #7a4e00; border-color: #b8791a; color: #ffe6b0; letter-spacing: .2px; }
.status-pill.reactivated { background: #7a4e00; border-color: #b8791a; color: #ffe6b0; }
.reactivate-btn { margin-top: 12px; }
/* Surge double-occupancy: a bed holding more than one patient */
.bed-row.bed-shared { border-left: 3px solid #b8791a; }
.bed-row.bed-shared .bed-n { color: #ffcf7a; font-weight: 700; }
.bed-pick.taken { opacity: 1; border-color: #b8791a; }
/* Tracker "Fast release" filter counter */
.counter.tappable { cursor: pointer; }
.counter.active { outline: 2px solid var(--accent, #3a7afe); outline-offset: -2px; }
.sect-h.with-action { display: flex; align-items: center; }

.vitals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vital { display: flex; flex-direction: column; gap: 6px; }
.vlbl { color: var(--muted); font-size: 13px; }
.vinp { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 17px; }
/* Multiple timed vitals sets (rechecks) */
.vitals-sets { display: flex; flex-direction: column; gap: 10px; }
.vset-list { display: flex; flex-direction: column; gap: 6px; }
.vset-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.vset-time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; color: var(--muted); min-width: 64px; }
.vset-vals { font-size: 15px; }
/* Edit a saved vitals set: the control sits at the far right of its row and stays out of the way. */
.vset-edit { margin-left: auto; padding: 2px 10px; font-size: 13px; min-height: 0; }
.vset-row.editing { border-color: var(--accent, #2b6cb0); }
.vset-edited { font-style: italic; }
.vset-editing-h { margin: 6px 0; }
.vitals .vital-spo2 { grid-column: 1 / -1; }
.o2-chips { margin-top: 4px; }
.chiprow { margin-top: 12px; }
.tf { display: block; margin-top: 10px; }

.given { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.given-pill { background: var(--alpha-blue-bright); color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 600; }

/* modal */
.modal-back { position: fixed; inset: 0; background: rgba(4,8,18,.7); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 22px;
  width: 100%; max-width: 760px; }
.modal-h { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.modal-actions { display: flex; gap: 12px; margin-top: 18px; }
.modal-actions .btn-primary { flex: 1; }

/* quick-log overlay sheet */
.modal.ql { max-height: 86vh; overflow-y: auto; }
.ql-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ql-h .modal-h { flex: 1; margin: 0; text-align: center; }
.ql-back-spacer { width: 40px; flex: 0 0 40px; }

/* station header staffing — brand/neutral, NEVER clinical acuity colors */
.station-meta { display: flex; align-items: center; gap: 6px; }
.staff-count { background: var(--panel-2); color: var(--alpha-blue); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cov-flag { background: #334155; color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 12px;
  font-weight: 700; white-space: nowrap; } /* neutral slate warning — distinct from green/amber/red */

/* generic secondary-view body */
.view-body { padding: 14px; }

/* tracker */
.counters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 560px) { .counters { grid-template-columns: repeat(4, 1fr); } }
.counter { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  text-align: center; box-shadow: 0 1px 2px rgba(10,30,60,.05); }
.counter-n { font-size: 30px; font-weight: 800; color: var(--alpha-blue); line-height: 1; }
.counter-l { color: var(--muted); font-size: 12px; margin-top: 6px; }
.feed { display: flex; flex-direction: column; gap: 2px; }
.feed-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.feed-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: #64748b; }
.feed-dot.logged { background: var(--alpha-blue-bright); }  /* brand/neutral, not clinical */
.feed-dot.status { background: #64748b; }
.feed-text { flex: 1; font-size: 14px; }
.feed-ago { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* staff roster */
.staff-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn-primary.staff-add { width: auto; padding: 10px 14px; font-size: 15px; margin: 0; }
.staff-station { margin-top: 16px; }
.staff-station-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px; }
.staff-row { width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; color: var(--text); }
.staff-row:active { background: #eef2f8; }
.staff-initials { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: var(--alpha-blue);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.staff-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.staff-name { font-weight: 700; }
.staff-sub { color: var(--muted); font-size: 13px; }
.staff-move { color: var(--alpha-blue-bright); font-weight: 700; font-size: 13px; white-space: nowrap; }

/* staff master view — inline-edit cards */
.coverage-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid #334155; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.gap-chip { background: #eef2f8; color: var(--alpha-blue); border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 600; }
.offshift-h { margin-top: 18px; opacity: .8; }
.staff-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.sc-top { display: flex; align-items: center; gap: 12px; }
.sc-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
@media (max-width: 380px) { .sc-controls { grid-template-columns: 1fr; } }
.sc-field { display: flex; flex-direction: column; gap: 4px; }
.sc-lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.inline-sel { width: 100%; background: #fff; color: var(--text); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 10px; font-size: 15px; min-height: 44px; -webkit-appearance: none; appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M2 4l4 4 4-4" stroke="%235b6b86" stroke-width="1.6" fill="none"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; }
.inline-sel:focus { border-color: var(--alpha-blue-bright); outline: none; }
.shift-toggle { flex: 0 0 auto; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.shift-toggle.on { background: var(--alpha-blue-bright); color: #fff; border-color: var(--alpha-blue-bright); }

/* records / search */
.search-input { margin-bottom: 6px; }
.search-hint { margin: 0 2px 12px; }
.results-count { margin: 4px 2px 8px; }
.results { display: flex; flex-direction: column; gap: 8px; }
.empty-results { padding: 30px 8px; text-align: center; }
.result { text-align: left; background: var(--surface); border: 1px solid var(--line); border-left: 8px solid var(--green);
  border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.result:active { background: #eef2f8; }
.result.acuity-green { border-left-color: var(--green); }
.result.acuity-yellow { border-left-color: var(--yellow); }
.result.acuity-red { border-left-color: var(--red); }
.result-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.result-top .pid { font-size: 16px; }
.result-status { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.result-status.closed { color: #fff; background: #334155; border-radius: 999px; padding: 2px 9px; } /* neutral, not acuity */
.result-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.return-tag { color: var(--alpha-blue-bright); font-weight: 700; font-size: 12px; }

/* return-visit link + read-only (immutable) chart */
.related-link { width: 100%; text-align: left; margin-top: 12px; background: var(--panel-2); color: var(--alpha-blue-bright);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-weight: 700; font-size: 14px; }
.return-btn { margin-top: 18px; }
.ro-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ro-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ro-row:last-child { border-bottom: none; }
.ro-k { color: var(--muted); font-size: 14px; }
.ro-v { font-weight: 600; text-align: right; }
.ro-narr { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; line-height: 1.4; }

/* dispatch — incident command. Neutral/brand only; priority uses brand-blue intensity, NOT acuity. */
.dispatch-strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px 14px 0; }
.dispatch-pill { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--alpha-blue-bright); border-radius: 999px;
  padding: 6px 12px; font-size: 13px; color: var(--text); }
.dp-status { font-weight: 700; color: var(--alpha-blue); }
.dp-dest { color: var(--muted); }
.dp-since { color: var(--muted); font-variant-numeric: tabular-nums; }
.inbound-chip { background: #e7edf7; color: var(--alpha-blue); border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; }

.dispatch-card { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.dispatch-card.prio-urgent { border-left-color: var(--alpha-blue-bright); }
.dispatch-card.prio-emergent { border-left-color: var(--alpha-blue); }
.dc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dc-dest { font-weight: 800; font-size: 16px; color: var(--alpha-blue); }
.dc-status { font-size: 12px; font-weight: 700; color: #fff; background: var(--alpha-blue-bright); border-radius: 999px; padding: 2px 10px; }
.dc-reason { font-size: 15px; font-weight: 600; margin-top: 4px; }
.dc-team { margin-top: 2px; }
.dc-trail { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.trail-item { background: var(--panel-2); color: var(--muted); border-radius: 6px; padding: 3px 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.dc-elapsed { color: var(--muted); font-size: 13px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.dc-intervals { margin-top: 8px; }

/* provider field status (neutral/brand, never clinical) */
.fstatus-chip { background: #334155; color: #fff; border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.self-panel { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--alpha-blue-bright);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.self-h { display: flex; align-items: baseline; gap: 8px; }
.self-you { font-weight: 800; color: var(--alpha-blue-bright); }
.self-name { font-weight: 700; color: var(--alpha-blue); }

/* ===== MCI mode — START triage. START colors ARE the intended clinical signal here. ===== */
:root { --tri-red: #dc2626; --tri-yellow: #eab308; --tri-green: #16a34a; --tri-black: #1f2937; }
.tab-mci.mci-on { background: var(--tri-red); color: #fff; border-color: var(--tri-red); animation: mcipulse 1.4s ease-in-out infinite; }
@keyframes mcipulse { 0%,100% { opacity: 1; } 50% { opacity: .65; } }
.chrome.mci-mode { border-bottom-color: var(--tri-red); }

.mci-activate { text-align: center; padding: 24px 12px; }
.mci-title { font-size: 22px; font-weight: 800; color: var(--alpha-blue); margin-bottom: 8px; }
.btn-mci-activate { margin-top: 20px; background: var(--tri-red); color: #fff; border: none; border-radius: 14px;
  padding: 18px 24px; font-size: 19px; font-weight: 800; width: 100%; box-shadow: 0 6px 18px rgba(220,38,38,.35); }

.mci-banner { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line);
  border-left: 5px solid var(--tri-red); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.mci-live { font-weight: 800; color: var(--tri-red); animation: mcipulse 1.4s ease-in-out infinite; }
.mci-exit { margin-left: auto; }

.triage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.triage-btn { min-height: 110px; border-radius: 16px; border: none; color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; font-weight: 800; }
.tb-tag { font-size: 24px; letter-spacing: .5px; }
.tb-label { font-size: 13px; font-weight: 600; opacity: .95; }
.tri-red { background: var(--tri-red); color: #fff; }
.tri-yellow { background: var(--tri-yellow); color: #1a1300; }
.tri-green { background: var(--tri-green); color: #fff; }
.tri-black { background: var(--tri-black); color: #fff; }

.count-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 380px) { .count-board { grid-template-columns: 1fr 1fr; } }
.count-tile { border-radius: 12px; padding: 12px 8px; text-align: center; color: #fff; }
.count-tile.tri-yellow { color: #1a1300; }
.count-tile.neutral { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.ct-n { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.ct-l { font-size: 12px; font-weight: 700; margin-top: 4px; }

.victim-row { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line);
  border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.tri-border-red { border-left-color: var(--tri-red); }
.tri-border-yellow { border-left-color: var(--tri-yellow); }
.tri-border-green { border-left-color: var(--tri-green); }
.tri-border-black { border-left-color: var(--tri-black); }
.vr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vr-tag { font-weight: 800; }
.vr-badge { color: #fff; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 800; }
.vr-badge.tri-yellow { color: #1a1300; }
.vr-dest { color: var(--alpha-blue); font-weight: 700; font-size: 13px; }
.retriage { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.rt-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; }
.rt-dot.sel { border-color: var(--alpha-blue); box-shadow: 0 0 0 2px #fff inset; }
.vr-transport { margin-top: 8px; }

/* unnamed-event prompt in the top bar */
.bt-unnamed { background: none; border: 1px dashed var(--alpha-blue-bright); color: var(--alpha-blue-bright);
  border-radius: 8px; padding: 4px 10px; font-weight: 800; font-size: 15px; }

/* per-system physical exam */
.exam { display: flex; flex-direction: column; gap: 8px; }
.all-normal { width: 100%; font-weight: 700; }
.all-normal.on { background: #eaf6ee; color: var(--green-d); border-color: #bfe3c8; }
.exam-row { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.exam-row.is-normal { background: #f4faf6; border-color: #d8ebde; }
.exam-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.exam-label { font-weight: 600; font-size: 14px; }
.exam-normal { flex: 0 0 auto; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; white-space: nowrap; min-height: 38px; }
.exam-normal.on { background: var(--green); color: #fff; border-color: var(--green); }
.exam-note { margin-top: 8px; }
.exam-prior { margin-top: 6px; }

/* consent forms */
.consent-row { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 8px; }
.consent-row.signed { border-left-color: var(--alpha-blue-bright); }
.consent-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.consent-title { font-weight: 700; }
.consent-status { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.consent-status.s-none { background: var(--panel-2); color: var(--muted); }
.consent-status.s-pending { background: #fff4e0; color: #8a5a00; }
.consent-status.s-stored { background: #e7edf7; color: var(--alpha-blue); }
.consent-acts { display: flex; gap: 8px; margin-top: 10px; }
.consent-sign { padding: 10px 16px; }
.consent-tag { color: var(--alpha-blue); font-weight: 700; font-size: 12px; }
.consent-modal .consent-doc { max-height: 30vh; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; font-size: 13px; white-space: pre-wrap; line-height: 1.45; margin-bottom: 12px; }
.unable-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 14px; }
.unable-row input { width: 20px; height: 20px; accent-color: var(--alpha-blue-bright); }
.consent-rel { margin-bottom: 10px; }
.sig-wrap { border: 2px dashed var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.sig-canvas { width: 100%; height: 200px; display: block; touch-action: none; }
.narrative-input { min-height: 110px; }

/* beds — drill-in chip + bed-by-bed view */
.beds-chip { background: #eef2f8; color: var(--alpha-blue); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.bed-head { display: grid; grid-template-columns: 40px 56px 1fr 56px 1.2fr; gap: 8px; padding: 6px 10px; color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.bed-row { display: grid; grid-template-columns: 40px 56px 1fr 56px 1.2fr; gap: 8px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: 10px;
  padding: 8px 10px; margin-top: 6px; }
.bed-row.acuity-green { border-left-color: var(--green); }
.bed-row.acuity-yellow { border-left-color: var(--yellow); }
.bed-row.acuity-red { border-left-color: var(--red); }
.bed-row.empty { color: var(--muted); grid-template-columns: 40px 1fr auto; }
.bed-n { font-weight: 800; font-size: 16px; color: var(--alpha-blue); }
.bed-pt { font-weight: 800; text-align: left; background: none; border: none; color: var(--text); }
.bed-cc { text-align: left; background: none; border: none; color: var(--text); font-weight: 600; font-size: 14px; }
.bed-los { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.bed-notes-inp { width: 100%; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-size: 13px; }
.bed-open { color: var(--muted); font-style: italic; }
.bed-group-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; margin: 14px 2px 4px; }
.bed-group-h.needs { color: #8a5a00; }
.bed-group-h.overflow { color: var(--alpha-blue); }
.bed-row.needs-row { grid-template-columns: 56px 1fr 56px auto; }
.bed-place { padding: 6px 12px; font-size: 13px; }
.bed-summary { margin: 6px 0 4px; }
.bed-alt { margin-top: 10px; }
/* exam normal language — green editable text the provider is attesting to */
.exam-note.normal-text { background: #f4faf6; border-color: #cfe6d6; min-height: 52px; }

/* quick-log fast-clear switch + bed pick */
.fastclear-switch { width: 100%; text-align: left; background: #f0faf2; color: var(--green-d); border: 1px solid #bfe3c8;
  border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.mode-grid { display: grid; gap: 12px; }
.mode-btn { text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.mode-btn.fast { border-left: 6px solid var(--green); }
.mode-btn.bedded { border-left: 6px solid var(--alpha-blue-bright); }
.mb-t { font-size: 18px; font-weight: 800; color: var(--alpha-blue); }
.mb-s { font-size: 13px; color: var(--muted); }
.tap.bed-pick.taken { opacity: .5; }

/* chart expandable Interventions / Meds tabs */
.expand-card { border: 1px solid var(--line); border-radius: 12px; margin-top: 14px; overflow: hidden; background: var(--surface); }
.tab-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px; background: var(--surface);
  color: var(--alpha-blue); font-weight: 800; font-size: 16px; }
.tab-head.open { border-bottom: 1px solid var(--line); }
.tab-caret { color: var(--muted); }
.expand-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.med-row { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.med-name { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px; background: var(--surface); color: var(--text); text-align: left; }
.med-name.open { background: var(--panel-2); }
.mn-name { font-weight: 700; }
.med-expand { padding: 10px 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.med-dr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.given.collapsed { padding: 0 14px 12px; }
.given-pill.rx { background: var(--alpha-blue); }

/* event setup */
.gear-btn { font-size: 20px; }
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; margin-bottom: 4px; }
.loc-row, .cfg-row { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.lr-top { display: flex; gap: 8px; align-items: center; }
.lr-top .field { flex: 1; }
.lr-remove { flex: 0 0 auto; color: var(--alpha-red); }
.lr-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 8px; }
@media (max-width: 420px) { .lr-controls { grid-template-columns: 1fr 1fr; } }
.age-exact { margin-top: 10px; }
.age-row { display: flex; gap: 8px; align-items: center; }
.age-row .vinp { flex: 1; }
.age-row .inline-sel { flex: 0 0 120px; }

/* staffing planner */
.planner-framing { display: flex; flex-direction: column; gap: 4px; background: #fff8e6; border: 1px solid #e7d9a8;
  border-left: 4px solid #b58a00; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.pf-tag { font-weight: 800; font-size: 12px; letter-spacing: .4px; color: #8a6d00; }
.pf-text { font-size: 13px; color: #5b5640; line-height: 1.4; }
.planner-inputs { margin-bottom: 8px; }
.planner-nums { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
@media (max-width: 420px) { .planner-nums { grid-template-columns: 1fr 1fr; } }
.planner-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.range-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; }
.rc-val { font-size: 22px; font-weight: 800; color: var(--alpha-blue); font-variant-numeric: tabular-nums; }
.rc-lbl { font-size: 13px; font-weight: 600; margin-top: 2px; }
.rc-sub { margin-top: 2px; }
.sect-sub { margin: 12px 2px 8px; }
.factor-list { display: flex; flex-wrap: wrap; gap: 6px; }
.factor-chip { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.factor-chip.cited { background: #e7edf7; color: var(--alpha-blue); }
.factor-chip.heuristic { background: var(--panel-2); color: var(--muted); border: 1px dashed var(--line); }
.access-callout { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--alpha-red); border-radius: 12px; padding: 12px 14px; margin-top: 16px; font-size: 14px; }
.ac-tag { background: var(--alpha-red); color: #fff; border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.checklist { display: flex; flex-direction: column; gap: 4px; }
.check-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.check-item input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--alpha-blue-bright); }
.sources { display: flex; flex-direction: column; gap: 10px; }
.source { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.src-title { font-weight: 700; color: var(--alpha-blue); }
.src-cite { margin: 2px 0 6px; word-break: break-word; }
.src-points { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.45; }
.src-points li { margin-bottom: 4px; }

/* Live GPS — display-only iframe of the provider-tracking command view */
.livegps-screen { padding: 0; }
.livegps-note { padding: 8px 14px 4px; }
.livegps-note a { font-weight: 700; }
.livegps-frame { display: block; width: 100%; height: calc(100dvh - 168px); min-height: 320px; border: 0; background: var(--surface); }

/* map view — venue map as a contained, responsive backdrop */
/* Map view: the container is the positioning context; the image fills it so pin %s align to the image. */
/* KSTARS/NEMSIS completeness strip on the open chart */
.kstars-strip { margin: 10px 14px 0; padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 13px; }
.kstars-strip.warn { background: #fff7e6; border: 1px solid #f0d9a8; color: #8a6d1a; }
.kstars-strip.ok { background: #eefaf0; border: 1px solid #cde9d3; color: #256c3a; }

.map-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 14px 0; }
.mswitch-btn { padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-weight: 700; font-size: 14px; cursor: pointer; color: var(--muted); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mswitch-btn.active { background: var(--alpha-blue); color: #fff; border-color: var(--alpha-blue); }
.map-upload { flex: 1 1 100%; }
.map-upload-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.map-thumb { height: 40px; width: auto; max-width: 88px; border: 1px solid var(--line); border-radius: 6px; object-fit: cover; }
.map-zones { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.map-zones svg { display: block; width: 100%; height: 100%; }
.map-chip.othermap { opacity: .7; }
.map-view { position: relative; display: block; margin: 14px; padding: 0; }
.map-img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.map-fallback { min-height: 46vh; }
.map-pin, .map-unit { position: absolute; transform: translate(-50%, -50%); font-size: 12px; font-weight: 800;
  padding: 3px 7px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
  cursor: pointer; white-space: nowrap; color: #fff; z-index: 2; }
.map-pin.acuity-red { background: #d32f2f; }
.map-pin.acuity-yellow { background: #f4b400; color: #1b1b1b; }
.map-pin.acuity-green { background: #2e7d32; }
.map-unit { background: #1668c1; border-radius: 6px; }
.map-unit.ustatus-en_route { background: #1668c1; }
.map-unit.ustatus-on_scene { background: #00796b; }
.map-unit.ustatus-transporting { background: #8e24aa; }
.map-unit.ustatus-out { opacity: .5; }
.map-place-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #eef6ff;
  border: 1px solid #cfe3fb; color: var(--alpha-blue); padding: 8px 12px; border-radius: 10px; margin: 10px 14px 0; font-weight: 600; }
.map-tray { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 14px; }
.map-chip { cursor: pointer; }
.map-pop-back { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 50; }
.map-pop { background: #fff; border-radius: 14px; padding: 16px; min-width: 240px; max-width: 88vw; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.mp-title { font-size: 20px; font-weight: 800; color: var(--alpha-blue); }
.mp-sub { color: var(--muted); margin: 2px 0 8px; }
.mp-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.mp-acuity { text-transform: uppercase; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: #fff; }
.mp-acuity.acuity-red { background: #d32f2f; }
.mp-acuity.acuity-yellow { background: #f4b400; color: #1b1b1b; }
.mp-acuity.acuity-green { background: #2e7d32; }
.mp-status { color: var(--muted); font-size: 13px; }
.mp-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 100px; transform: translate(-50%, 16px); opacity: 0;
  background: #fff; color: #111; padding: 12px 18px; border-radius: 12px; font-weight: 700; z-index: 30;
  transition: all .25s ease; box-shadow: 0 8px 24px rgba(0,0,0,.4); max-width: 90%; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===== Build 10: narrative draft + Save/Discharge + amendments + purge (light Alpha chrome) ===== */
.impr-other { margin-top: 8px; }
.narr-acts { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.narr-update { padding: 8px 14px; font-size: 14px; font-weight: 700; color: var(--alpha-blue-bright); }

/* Suggested protocol note — a suggestion ONLY. Outlined + greyed so it reads as "not yet recorded"; the
   text is inert until the medic taps Apply. This replaced auto-writing the protocol note into the chart. */
.narr-suggest { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line, #c8ccd4);
  border-radius: 10px; background: transparent; }
.narr-suggest-text { margin: 6px 0 8px; font-size: 14px; font-style: italic; color: var(--muted, #6b7280); }

/* Inline "keep it PHI-free" hint under a synced free-text field (Other complaint, bed notes). */
.field-hint { margin: 2px 0 6px; }

/* Read-only "needs review" surfacing for pre-v51 auto-filled protocol notes. Amber, purely advisory —
   nothing here edits a chart; it only helps a medic FIND charts whose narrative may assert care not given. */
.review-banner { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap;
  margin: 8px 0 4px; padding: 10px 12px; border: 1px solid #d9a400; border-radius: 10px;
  background: rgba(217,164,0,0.10); color: var(--ink, #1b2430); font-size: 14px; }
.review-banner.active { border-color: #b98600; background: rgba(217,164,0,0.18); }
.review-banner .btn-line { white-space: nowrap; color: #8a6400; font-weight: 700; }
.result.needs-review { box-shadow: inset 3px 0 0 #d9a400; }
.review-tag { color: #8a6400; font-weight: 700; }
.review-badge { margin: 0 0 8px; padding: 8px 10px; border: 1px solid #d9a400; border-left-width: 4px;
  border-radius: 8px; background: rgba(217,164,0,0.10); color: var(--ink, #1b2430); font-size: 13px; line-height: 1.35; }

.chart-actions { display: flex; gap: 10px; margin-top: 20px; align-items: stretch; }
.chart-actions .save-now { flex: 0 0 auto; margin-top: 0; }
.chart-actions .discharge-btn { flex: 1; margin-top: 0; }

/* Amendment trail — dated, attributed, beneath the as-charted original */
.amend-trail { display: flex; flex-direction: column; gap: 8px; }
.amend-row { background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--alpha-blue-bright); border-radius: 10px; padding: 10px 12px; }
.amend-head { color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.amend-body { font-size: 15px; line-height: 1.35; }
.amend-field { font-weight: 700; }
.amend-before { color: var(--muted); text-decoration: line-through; }
.amend-after { color: var(--alpha-blue-deep); font-weight: 700; }
.amend-arrow { color: var(--muted); }

.amend-editor { margin-top: 16px; }
.amend-toggle { width: 100%; text-align: left; font-weight: 700; }
.amend-toggle.open { border-color: var(--alpha-blue-bright); color: var(--alpha-blue-bright); }
.amend-editor-body { border: 1px solid var(--line); border-top: none; border-radius: 0 0 12px 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.amend-current { background: var(--panel-2); border-radius: 8px; padding: 8px 10px; }

/* Data retention — danger zone */
.danger-zone { margin-top: 26px; border: 1px solid var(--alpha-red); border-radius: 12px; padding: 14px; background: rgba(230,31,54,.04); }
.danger-h { color: var(--alpha-red-deep); margin-top: 0; }
.btn-danger { width: 100%; margin-top: 12px; background: var(--alpha-red); color: #fff; border: none; border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 800; }
.btn-danger:active { background: var(--alpha-red-deep); }
.btn-danger[disabled] { opacity: .6; }

/* Chart — allergies banner (safety-critical, sits directly under the summary) */
.allergy-banner { margin: 8px 12px; padding: 10px 12px; border-radius: 10px; font-weight: 800; font-size: 14px; letter-spacing: .3px;
  background: rgba(230,31,54,.10); border: 1px solid var(--alpha-red); color: var(--alpha-red-deep); }
.allergy-banner.nkda { background: rgba(22,140,90,.08); border-color: #168c5a; color: #0f6b45; }
.allergy-banner.none { background: rgba(230,31,54,.06); border-style: dashed; }

/* Chart — identity is not on this device (charted elsewhere, or the PHI store was cleared) */
.no-identity-banner { background: rgba(230,31,54,.06); border: 1px dashed var(--alpha-red); color: var(--alpha-red-deep); font-weight: 700; }

/* Chart — one-tap quick-set rows (NKDA / None / No PMH) */
.quick-set { gap: 8px; margin-bottom: 8px; }
.quick-set .btn-line.sel { background: var(--alpha-blue); color: #fff; border-color: var(--alpha-blue); }

/* Chart — past medical history fold-down */
.pmh-fold { border: 1px solid var(--line, #d8dee6); border-radius: 10px; padding: 8px 12px; background: var(--panel-2, #f7f9fb); }
.pmh-fold > summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.pmh-list { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 8px 0; }
@media (min-width: 620px) { .pmh-list { grid-template-columns: 1fr 1fr; } }
.pmh-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; }
.pmh-item.on { background: rgba(0,86,179,.08); font-weight: 600; }
.pmh-item input { width: 20px; height: 20px; }

/* Chart — transfer of care row (mirrors .consent-row) */
.toc-row { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line, #d8dee6); border-radius: 10px; }
.toc-row.signed { border-color: #168c5a; background: rgba(22,140,90,.05); }

/* Board top bar — "you are <name>" identity chip */
.bt-me { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--alpha-blue); background: #f4f7fb; border: 1px solid var(--line, #d8dee6); white-space: nowrap; }

/* Board — brand-new board (no history) vs. a wrong/typo'd code */
.newboard-note { margin: 10px 12px; padding: 12px 14px; border: 1px solid var(--line, #d8dee6); border-left: 4px solid var(--alpha-blue); border-radius: 10px; background: #f4f7fb; }
.nb-title { font-weight: 800; margin-bottom: 4px; }
.newboard-note .btn-line { margin-top: 10px; }

/* Event setup card — built-in provider PINs */
.pin-list { margin: 8px 0; border: 1px solid var(--line, #d8dee6); border-radius: 10px; overflow: hidden; }
.pin-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line, #d8dee6); }
.pin-row:first-child { border-top: none; }
.pin-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; font-weight: 800; letter-spacing: 2px; color: var(--alpha-blue); min-width: 4.5rem; }
.pin-name { flex: 1; font-weight: 600; }
.pin-dead .pin-code, .pin-dead .pin-name { opacity: .45; text-decoration: line-through; }
.invite-row { border-bottom: 1px solid var(--line, #d8dee6); padding-bottom: 6px; }

/* ============================================================
   COMMS — operational messaging (PHI-safe). Brand-navy chrome; broadcasts pop, ops messages read fast.
   ============================================================ */
.tab-comms { position: relative; }
.tab-badge { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; height: 18px; line-height: 18px;
  border-radius: 999px; background: var(--alpha-red); color: #fff; font-size: 11px; font-weight: 800; text-align: center; vertical-align: middle; }
.tab.active .tab-badge { background: #fff; color: var(--alpha-blue-bright); }

/* Board-level pinned broadcasts (high-visibility across the app) */
.board-broadcasts { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 0; }
.board-broadcast { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: #fff4d6; border: 1px solid #e6c766; border-left: 4px solid var(--alpha-red); border-radius: 12px; padding: 10px 12px; }
.board-broadcast .bb-ic { flex: 0 0 auto; font-size: 16px; }
.board-broadcast .bb-text { flex: 1; min-width: 0; font-weight: 700; color: #6a4e00; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-broadcast .bb-meta { flex: 0 0 auto; color: #927636; font-size: 12px; }

/* Comms screen layout: pinned banner + scrolling timeline + sticky composer */
.comms-screen { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.comms-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.comms-pins { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 4px; flex: 0 0 auto; }
.comms-pin { display: flex; align-items: flex-start; gap: 10px; background: #fff4d6; border: 1px solid #e6c766;
  border-left: 4px solid var(--alpha-red); border-radius: 12px; padding: 10px 12px; }
.comms-pin .pin-ic { font-size: 16px; }
.comms-pin .pin-main { flex: 1; min-width: 0; }
.comms-pin .pin-text { font-weight: 700; color: #6a4e00; }
.comms-pin .pin-meta { color: #927636; margin-top: 2px; }
.comms-pin .pin-x { flex: 0 0 auto; background: none; border: none; color: #927636; font-size: 22px; line-height: 1; padding: 0 4px; }

.comms-timeline { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.comms-empty { text-align: center; padding: 32px 20px; line-height: 1.5; }

.comms-bubble { max-width: 82%; align-self: flex-start; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 9px 12px; }
.comms-bubble.mine { align-self: flex-end; background: #eaf2ff; border-color: #cfe0fb; }
.comms-bubble .bub-text { color: var(--text); font-size: 15px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.comms-bubble .bub-meta { margin-top: 4px; }
.comms-bubble .bub-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .02em; margin-bottom: 4px;
  padding: 1px 7px; border-radius: 999px; }
.comms-bubble .bub-tag.broadcast { background: var(--alpha-red); color: #fff; }
.comms-bubble .bub-tag.ops { background: var(--panel-2); color: var(--alpha-blue); border: 1px solid var(--line); }
.comms-bubble.cat-broadcast { background: #fff4d6; border-color: #e6c766; align-self: stretch; max-width: 100%; }
.comms-bubble.cat-broadcast .bub-text { font-weight: 700; color: #6a4e00; }
.comms-bubble.hi.cat-preset { border-left: 3px solid var(--alpha-red); }

/* Composer */
.comms-composer { flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--surface); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
.comms-quick { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.comms-quick .qs { flex: 0 0 auto; background: var(--panel-2); color: var(--alpha-blue); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.comms-quick .qs-broadcast { background: var(--alpha-red); color: #fff; border-color: var(--alpha-red); }
.comms-quick .qs:active { background: var(--panel); }

.comms-free-lbl { margin: 2px 0 6px; }
.comms-input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px;
  font-size: 16px; font-family: inherit; color: var(--text); resize: none; background: var(--panel); }
.comms-input::placeholder { color: var(--muted); }
.comms-inbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.comms-inbar .flex-sp { flex: 1; }
.comms-inbar .btn-line.small { padding: 8px 12px; font-size: 14px; }
.comms-inbar .btn-primary { padding: 10px 20px; font-size: 15px; }

/* Preset slot picker */
.preset-picker { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--panel-2); }
.preset-picker .pp-h { display: flex; align-items: center; justify-content: space-between; font-weight: 800; color: var(--alpha-blue); }
.preset-picker .pp-x { background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 0 4px; }
.preset-picker .pp-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.preset-picker .pp-lbl { flex: 0 0 64px; font-size: 13px; font-weight: 700; color: var(--muted); }
.preset-picker .pp-chips { display: flex; gap: 6px; overflow-x: auto; flex: 1; }
.preset-picker .pp-chips .chip { flex: 0 0 auto; }
.preset-picker .pp-chips .chip.sel { background: var(--alpha-blue-bright); color: #fff; border-color: var(--alpha-blue-bright); }
.preset-picker .pp-preview { margin: 10px 0 8px; font-size: 15px; color: var(--text); }
.preset-picker .btn-primary { width: 100%; padding: 12px; font-size: 16px; }
.preset-picker .btn-primary[disabled] { opacity: .5; }

/* Mention-by-code picker */
.mention-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; margin: 6px 0; }
.mention-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.mention-row .m-code { font-weight: 800; color: var(--alpha-blue); font-size: 15px; }

/* PHI guard modal */
.modal-actions.col { flex-direction: column; }
.modal-actions.col .btn-primary, .modal-actions.col .btn-line { width: 100%; flex: none; }
.modal-h.phi-h { color: var(--alpha-red); }
.phi-hits { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.phi-hit { display: flex; align-items: center; gap: 8px; background: #fdeaea; border: 1px solid #f2c4c4; border-radius: 10px; padding: 8px 10px; }
.phi-hit .phi-badge { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--alpha-red); color: #fff; }
.phi-hit .phi-old { color: var(--red-d); text-decoration: line-through; }
.phi-hit .phi-arrow { color: var(--muted); }
.phi-hit .phi-code { font-weight: 800; color: var(--alpha-blue); }
.phi-preview { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 4px; }
.phi-preview .phi-fixed { font-size: 15px; color: var(--text); margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.btn-textdanger { background: none; border: none; color: var(--alpha-red); font-size: 14px; font-weight: 700; padding: 10px; margin-top: 2px; }

/* ============================================================
   COMMS two-way chat — sender identity bar, threaded replies, reply composer.
   ============================================================ */
.comms-sender { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); flex: 0 0 auto; }
.comms-sender .cs-lbl { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.comms-sender .cs-name { font-weight: 800; color: var(--alpha-blue); }
.comms-sender .cs-meta::before { content: '· '; }
.comms-sender .flex-sp { flex: 1; }
.comms-sender .btn-line.small { padding: 6px 12px; font-size: 13px; }

/* Sender + assignment header inside each bubble */
.comms-bubble .bub-head { display: flex; align-items: baseline; gap: 8px; }
.comms-bubble .bub-sender { font-weight: 800; color: var(--alpha-blue); font-size: 13px; }
.comms-bubble.mine .bub-sender { color: var(--alpha-blue-deep); }
.comms-bubble .bub-time { flex: 0 0 auto; margin-left: auto; }
.comms-bubble .bub-assign { margin-top: 1px; font-size: 12px; }
.comms-bubble .bub-text { margin-top: 4px; }
.comms-bubble.cat-broadcast .bub-sender { color: #6a4e00; }

/* Threads */
.comms-thread { display: flex; flex-direction: column; gap: 4px; }
.comms-thread .thread-replies { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0 18px; padding-left: 12px; border-left: 2px solid var(--line); }
.comms-bubble.reply { max-width: 100%; background: var(--panel-2); }
.comms-bubble.reply.mine { background: #eaf2ff; }
.reply-btn { align-self: flex-start; margin: 2px 0 4px; background: none; border: none; color: var(--alpha-blue-bright); font-size: 13px; font-weight: 700; padding: 2px 4px; }
.reply-btn:active { color: var(--alpha-blue); }

/* Pinned-broadcast reply button */
.comms-pin .pin-reply { flex: 0 0 auto; background: none; border: none; color: #927636; font-size: 15px; font-weight: 800; padding: 0 6px; }

/* Reply-target chip above the composer */
.reply-chip { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--alpha-blue-bright); border-radius: 10px; padding: 7px 10px; margin-bottom: 8px; }
.reply-chip .rc-ic { color: var(--alpha-blue-bright); font-weight: 800; }
.reply-chip .rc-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-chip .rc-prev { color: var(--text); }
.reply-chip .rc-x { flex: 0 0 auto; background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 0 4px; }

/* Selected sender in the picker */
.mention-row.sel { border-color: var(--alpha-blue-bright); background: #eaf2ff; }

/* ============================================================
   COMMS channels — event-wide + per-venue selector with per-channel unread.
   ============================================================ */
.comms-channels { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface); flex: 0 0 auto; -webkit-overflow-scrolling: touch; }
.comms-channels .chan { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); color: var(--alpha-blue); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.comms-channels .chan .chan-hash { color: var(--muted); font-weight: 800; }
.comms-channels .chan.active { background: var(--alpha-blue-bright); color: #fff; border-color: var(--alpha-blue-bright); }
.comms-channels .chan.active .chan-hash { color: #dbe8ff; }
.comms-channels .chan.home:not(.active) { border-color: var(--alpha-blue-bright); }
.comms-channels .chan .chan-badge { min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 999px; background: var(--alpha-red); color: #fff; font-size: 10px; font-weight: 800; text-align: center; }
.comms-channels .chan.active .chan-badge { background: #fff; color: var(--alpha-blue-bright); }

/* ============================================================
   Per-person invite links (Staff roster)
   ============================================================ */
.staff-card .sc-actions { display: flex; gap: 8px; margin-top: 10px; }
.staff-card .sc-invite { padding: 7px 12px; font-size: 13px; font-weight: 700; }
.staff-name .you-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--alpha-blue-bright); color: #fff; font-size: 10px; font-weight: 800; vertical-align: middle; }

/* ---- Clinical attachments (EKG / wound photo). LOCAL-ONLY: never synced, never uploaded. ---- */
.att-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.att-thumb { position: relative; width: 116px; }
.att-thumb-img { width: 116px; height: 88px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: zoom-in; display: block; }
.att-thumb-cap { margin-top: 3px; line-height: 1.2; }
.att-rm { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); font-size: 14px; line-height: 1; cursor: pointer; }
.att-input { display: none; }
.att-view { max-width: min(92vw, 900px); }
.att-full { width: 100%; height: auto; max-height: 72vh; object-fit: contain; border-radius: 8px; background: #fff; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE (phone widths only, ≤480px) — Build 24 presentation restyle.
   Dark theme matching the Alpha Responder shell, single-column, compact. Desktop
   (>480px) is untouched. PRESENTATION ONLY — no markup, sync, crypto or RTC changes.
   Acuity clinical colours (--green/--yellow/--red) are deliberately NOT rebranded.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root {
    /* chrome → dark, matching the Responder shell (#0d1117 / #161b22 / #30363d) */
    --bg: #0d1117;
    --surface: #161b22;
    --panel: #161b22;
    --panel-2: #1c2333;
    --line: #30363d;
    --text: #e6edf3;
    --muted: #8b949e;
    --navy: #1E64D6;
    --navy-2: #1E64D6;
    /* logo-navy is used as TEXT in many chrome bits; lighten it so it reads on dark */
    --alpha-blue: #58a6ff;
    --alpha-blue-bright: #388bfd;
  }
  body { background: var(--bg); color: var(--text); }

  /* the few hardcoded light surfaces that would flash white on dark */
  .pcard:active, .staff-row:active, .result:active, .tap:active { background: #1c2333; }
  .bt-code, .code-chip-lg { background: #1c2333; color: #58a6ff; border-color: var(--line); }
  .bt-code:hover { background: #22304a; }
  /* red-acuity card fades to WHITE on desktop; fade to the dark surface instead */
  .pcard.acuity-red { background: linear-gradient(90deg, rgba(220,38,38,.20), var(--surface) 60%); }
  .tab { color: #58a6ff; }

  /* BUILD 26 census-first: hide the desktop topbar + pill nav; use the compact census header + ☰ drawer. */
  .board-topbar, .tabs { display: none; }
  .m-census-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
  .m-menu { background: none; border: none; color: var(--alpha-blue); font-size: 22px; line-height: 1; padding: 2px 6px; cursor: pointer; }
  .m-census-t { font-weight: 800; font-size: 16px; color: var(--alpha-blue); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-census-pill { background: var(--panel-2); color: var(--alpha-blue); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
  .m-drawer { display: block; background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 12px; }
  .m-drawer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .m-drawer-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .m-drawer-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
  .m-drawer-tab { background: var(--panel-2); color: var(--alpha-blue); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 700; }
  .m-drawer-tab.active { background: var(--alpha-blue-bright); color: #fff; border-color: var(--alpha-blue-bright); }
  .m-census-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
  .m-fab { display: flex; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 999px; background: var(--alpha-blue-bright); color: #fff; border: none; font-size: 30px; line-height: 1; box-shadow: 0 4px 16px rgba(0,0,0,.5); }

  .bt-logo { height: 30px; }
  .bt-title { font-size: 16px; }

  /* sentence case: neutralise the ALL-CAPS section labels (mobile reads as sentences) */
  .sect-h, .sc-lbl, .start-sub { text-transform: none; letter-spacing: 0; }

  /* single column — patient cards stack (stations already do at 520px; make it explicit) */
  .stations, .results, .feed { grid-template-columns: 1fr !important; }

  /* Quick-log becomes a floating FAB, bottom-right, above the safe-area inset. */
  .btn-quicklog {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 60;
    border-radius: 999px;
    padding: 14px 18px;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
    font-size: 15px;
  }
  /* keep the last card clear of the FAB */
  #app { padding-bottom: 84px; }
}