/* ==========================================================================
   ATUNSE HEALTH — PROTOCOL PLATFORM
   Design language: a regulated clinical instrument, not a brochure.
   Dense, tabular, monospaced where the system is asserting a fact of record.
   ========================================================================== */

:root {
  /* Brand */
  --navy-900: #001428;
  --navy-800: #001f3d;
  --navy-700: #002f5f;
  --navy-600: #0a4079;
  --navy-500: #185da4;
  --gold-600: #a8811d;
  --gold-500: #c9a227;
  --gold-400: #e0bf4d;

  /* Canvas */
  --bg: #f4f5f7;
  --bg-warm: #fafaf8;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-sunk: #eef1f5;
  --line: #dfe4ec;
  --line-strong: #c6cedb;

  /* Ink */
  --ink: #10192a;
  --ink-2: #3c4759;
  --ink-3: #67718a;
  --ink-4: #94a0b5;

  /* Status */
  --ok: #1c7a45;
  --ok-bg: #e7f4ec;
  --ok-line: #a9d7bc;
  --warn: #9a6100;
  --warn-bg: #fdf3e0;
  --warn-line: #edcf95;
  --stop: #b02418;
  --stop-bg: #fdeceb;
  --stop-line: #f0b5b0;
  --live: #0a5ca8;
  --live-bg: #e6f0fa;
  --live-line: #a8c9e9;
  --held: #5a6376;
  --held-bg: #eef0f4;
  --held-line: #ccd2dd;

  --rail: 264px;
  --topbar: 56px;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(16, 25, 42, 0.05);
  --shadow: 0 2px 8px -2px rgba(16, 25, 42, 0.10), 0 1px 2px rgba(16, 25, 42, 0.04);
  --shadow-lg: 0 18px 44px -22px rgba(0, 31, 61, 0.45);

  font-family: var(--sans);
  font-feature-settings: "cv05" 1, "ss01" 1, "tnum" 1;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.011em; }
table { border-collapse: collapse; width: 100%; }
::selection { background: #fdeaa8; }

.mono { font-family: var(--mono); font-size: 0.92em; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.tiny { font-size: 11.5px; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }
/* Mobile chrome for this breakpoint lives in the MOBILE CHROME block below. */

.rail {
  background: var(--navy-900);
  color: #b8c6dc;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid #000a16;
}
.rail-head { padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); display: flex; align-items: center; gap: 10px; }
.rail-head img { width: 30px; height: 30px; object-fit: contain; }
.rail-head b { color: #fff; font-size: 13.5px; font-weight: 650; display: block; letter-spacing: -0.01em; }
.rail-head span { color: var(--gold-400); font-size: 9.5px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; }


.rail-nav { flex: 1; overflow-y: auto; padding: 10px 8px 16px; }
.rail-nav::-webkit-scrollbar { width: 6px; }
.rail-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
.nav-group { margin-bottom: 4px; }
.nav-group-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: #5d708d; padding: 13px 10px 5px; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-sm); font-size: 13px; color: #b8c6dc;
  margin-bottom: 1px; line-height: 1.35; transition: 0.1s;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nav-item.on { background: var(--navy-600); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--gold-500); }
.nav-item .pip { font-size: 10px; font-weight: 700; font-family: var(--mono); padding: 1px 6px; border-radius: 999px; flex: none; }
.pip.stop { background: var(--stop); color: #fff; }
.pip.warn { background: var(--gold-500); color: #241c00; }
.pip.live { background: #2f89e0; color: #fff; }

.rail-foot { padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.rail-env { font-size: 10px; color: #5d708d; text-align: center; font-family: var(--mono); }

/* Main column */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar); background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 22px; position: sticky; top: 0; z-index: 20;
}
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); min-width: 0; }
.crumbs b { color: var(--ink); font-weight: 620; font-size: 13.5px; }
.crumbs .sep { color: var(--ink-4); }
.topbar-right { display: flex; align-items: center; gap: 14px; flex: none; }
.env-chip { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink-3); background: var(--surface-sunk); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }

.page { padding: 24px 26px 64px; max-width: 1500px; width: 100%; }
.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 22px; letter-spacing: -0.022em; }
.page-head .sub { color: var(--ink-3); font-size: 13.5px; margin-top: 5px; max-width: 88ch; line-height: 1.6; }
.page-head .refline { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }

/* ==========================================================================
   PRIMITIVES
   ========================================================================== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.card + .card { margin-top: 16px; }
.card-head { padding: 13px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-2); }
.card-head h3 { font-size: 13px; font-weight: 650; letter-spacing: -0.005em; }
.card-head .hint { font-size: 11.5px; color: var(--ink-3); }
.card-body { padding: 16px; }
.card-body.flush { padding: 0; }
.card-note { padding: 11px 16px; background: var(--surface-2); border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); line-height: 1.55; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: 1.7fr 1fr; align-items: start; }
.g-1-2 { grid-template-columns: 1fr 1.7fr; align-items: start; }
@media (max-width: 1200px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-2-1, .g-1-2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* Chips / tags */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 650; padding: 2.5px 8px; border-radius: 999px;
  background: var(--surface-sunk); color: var(--ink-2); border: 1px solid var(--line);
  white-space: nowrap; letter-spacing: 0.005em;
}
.chip.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.chip.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.chip.stop { background: var(--stop-bg); color: var(--stop); border-color: var(--stop-line); }
.chip.live { background: var(--live-bg); color: var(--live); border-color: var(--live-line); }
.chip.held { background: var(--held-bg); color: var(--held); border-color: var(--held-line); }
.chip.ref { font-family: var(--mono); font-size: 10.5px; background: #fff; color: var(--ink-3); }
.chip.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Stat tiles */
.stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: var(--surface); padding: 14px 16px; min-width: 0; }
.stat .k { font-size: 11px; font-weight: 620; color: var(--ink-3); letter-spacing: 0.01em; }
.stat .v { font-size: 25px; font-weight: 680; letter-spacing: -0.03em; margin-top: 3px; font-variant-numeric: tabular-nums; color: var(--navy-700); line-height: 1.1; }
.stat .v.small { font-size: 18px; }
.stat .n { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; }
.stat.is-stop .v { color: var(--stop); }
.stat.is-warn .v { color: var(--warn); }
.stat.is-ok .v { color: var(--ok); }
.stat.is-live .v { color: var(--live); }

/* Tables */
.tbl { font-size: 13px; }
.tbl th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-3); padding: 9px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0;
}
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td.mono { font-family: var(--mono); font-size: 12px; }
.tbl .t { font-weight: 600; color: var(--ink); }
.tbl .s { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
.tbl-wrap { overflow-x: auto; }
.tbl tr.is-stop { background: var(--stop-bg); }
.tbl tr.is-stop:hover { background: #fbe2e0; }
.tbl tr.is-warn { background: var(--warn-bg); }
.tbl tr.is-live { background: var(--live-bg); }

/* Definition rows */
.defs { display: grid; gap: 0; }
.def { display: grid; grid-template-columns: 210px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.def:last-child { border-bottom: 0; }
.def dt { font-weight: 600; color: var(--ink-2); font-size: 12.5px; }
.def dd { margin: 0; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 700px) { .def { grid-template-columns: 1fr; gap: 3px; } }

/* Callouts */
.note {
  border-radius: var(--r); padding: 12px 14px; font-size: 12.5px; line-height: 1.6;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
}
.note b { color: var(--ink); font-weight: 640; }
.note.stop { background: var(--stop-bg); border-color: var(--stop-line); color: #7d1c13; }
.note.stop b { color: #6d180f; }
.note.warn { background: var(--warn-bg); border-color: var(--warn-line); color: #6d4500; }
.note.warn b { color: #5a3900; }
.note.ok { background: var(--ok-bg); border-color: var(--ok-line); color: #14562f; }
.note.live { background: var(--live-bg); border-color: var(--live-line); color: #08447c; }
.note .lbl { display: block; font-size: 10px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 5px; opacity: 0.8; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  border-radius: var(--r-sm); padding: 8px 14px; font-size: 13px; font-weight: 620;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); transition: 0.13s;
}
.btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.btn.primary { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.btn.primary:hover { background: var(--navy-600); border-color: var(--navy-600); }
.btn.gold { background: var(--gold-500); border-color: var(--gold-600); color: #241c00; }
.btn.gold:hover { background: var(--gold-400); }
.btn.danger { background: var(--stop); border-color: var(--stop); color: #fff; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn[disabled], .btn.off { opacity: 0.48; cursor: not-allowed; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   THE GATE CHAIN — the protocol runner's signature element
   ========================================================================== */
.chain { display: flex; gap: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.chain-node {
  flex: 1 1 0; min-width: 150px; padding: 13px 15px; border-right: 1px solid var(--line);
  position: relative; transition: 0.14s;
}
.chain-node:last-child { border-right: 0; }
.chain-node .gk {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; margin-bottom: 8px;
  background: var(--surface-sunk); color: var(--ink-3); border: 1px solid var(--line);
}
.chain-node .gn { font-size: 12.5px; font-weight: 620; line-height: 1.3; color: var(--ink); }
.chain-node .gs { font-size: 11px; color: var(--ink-3); margin-top: 4px; font-variant-numeric: tabular-nums; }
.chain-node .gref { font-family: var(--mono); font-size: 10px; color: var(--ink-4); margin-top: 6px; }

.chain-node.done { background: var(--ok-bg); }
.chain-node.done .gk { background: var(--ok); color: #fff; border-color: var(--ok); }
.chain-node.done .gs { color: var(--ok); font-weight: 600; }
.chain-node.active { background: var(--live-bg); box-shadow: inset 0 -3px 0 var(--live); }
.chain-node.active .gk { background: var(--live); color: #fff; border-color: var(--live); }
.chain-node.active .gs { color: var(--live); font-weight: 650; }
.chain-node.blocked { background: var(--stop-bg); box-shadow: inset 0 -3px 0 var(--stop); }
.chain-node.blocked .gk { background: var(--stop); color: #fff; border-color: var(--stop); }
.chain-node.blocked .gs { color: var(--stop); font-weight: 650; }
.chain-node.locked { background: var(--surface); }
.chain-node.locked .gn, .chain-node.locked .gs { color: var(--ink-4); }

/* Check list inside a gate */
.checks { display: grid; }
.check {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 11px; align-items: start;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.check:last-child { border-bottom: 0; }
.check .box {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; font-size: 11px; font-weight: 800; margin-top: 1px; flex: none;
  background: var(--surface); color: transparent;
}
.check.yes .box { background: var(--ok); border-color: var(--ok); color: #fff; }
.check.no .box { background: var(--stop); border-color: var(--stop); color: #fff; }
.check.open .box { border-style: dashed; }
.check .cl { font-size: 13px; font-weight: 560; color: var(--ink); line-height: 1.45; }
.check .cm { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center; }
.check .why { margin-top: 7px; font-size: 12px; line-height: 1.55; background: var(--stop-bg); border: 1px solid var(--stop-line); color: #7d1c13; padding: 9px 11px; border-radius: var(--r-sm); }
.check .why b { display: block; font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 3px; }
.check.no { background: #fffafa; }
.src { font-family: var(--mono); font-size: 10px; font-weight: 650; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.02em; }
.src.system { background: var(--live-bg); color: var(--live); }
.src.human { background: var(--surface-sunk); color: var(--ink-3); }

/* Signature blocks */
.sigs { display: grid; gap: 10px; }
.sig {
  border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--surface-2);
}
.sig.signed { border-style: solid; border-color: var(--ok-line); background: var(--ok-bg); }
.sig.refused { border-style: solid; border-color: var(--stop-line); background: var(--stop-bg); }
.sig .sl { font-size: 12px; font-weight: 640; color: var(--ink-2); }
.sig .sv { font-size: 12.5px; font-family: var(--mono); color: var(--ink); margin-top: 3px; }
.sig .sw { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.sig.signed .sv { color: var(--ok); font-weight: 650; }
.sig.refused .sw { color: #7d1c13; }

/* Timeline */
.tl { position: relative; padding-left: 22px; }
.tl::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1.5px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: -21px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong);
}
.tl-item.ok::before { background: var(--ok); border-color: var(--ok); }
.tl-item.stop::before { background: var(--stop); border-color: var(--stop); }
.tl-item.live::before { background: var(--live); border-color: var(--live); box-shadow: 0 0 0 3px var(--live-bg); }
.tl-item.warn::before { background: var(--gold-500); border-color: var(--gold-600); }
.tl-when { font-size: 11px; font-family: var(--mono); color: var(--ink-3); }
.tl-what { font-size: 13px; font-weight: 600; margin-top: 2px; }
.tl-detail { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.55; }

/* Flow diagram (lifecycle / learning loop) */
.flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.flow-step {
  flex: 1 1 150px; min-width: 140px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px; position: relative;
}
.flow-step .fi { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--gold-600); letter-spacing: 0.08em; }
.flow-step .fn { font-size: 13px; font-weight: 640; margin-top: 4px; letter-spacing: -0.008em; }
.flow-step .fd { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.5; }
.flow-step.emph { border-color: var(--navy-600); box-shadow: inset 0 0 0 1px var(--navy-600); }
.flow-arrow { align-self: center; color: var(--ink-4); font-size: 15px; flex: none; }

/* Layer stack */
.layer {
  display: grid; grid-template-columns: 48px 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface);
}
.layer + .layer { margin-top: 8px; }
.layer .ln { background: var(--navy-800); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: 16px; font-weight: 700; }
.layer .lb { padding: 13px 16px; }
.layer .lt { font-size: 13.5px; font-weight: 650; letter-spacing: 0.01em; }
.layer .li { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.55; }
.layer .lx { font-size: 12px; color: var(--ink-3); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); line-height: 1.55; }

/* Meter bar */
.meter { height: 6px; border-radius: 3px; background: var(--surface-sunk); overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.meter i.warn { background: var(--gold-500); }
.meter i.stop { background: var(--stop); }
.meter i.live { background: var(--live); }

/* Clock */
.clock { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.clock .big { font-size: 17px; font-weight: 700; }
.clock .of { font-size: 12px; color: var(--ink-3); }

/* Patient tiles */
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.pt {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--held);
  border-radius: var(--r); padding: 14px 15px; transition: 0.14s; display: block;
}
.pt:hover { box-shadow: var(--shadow); border-color: var(--line-strong); transform: translateY(-1px); }
.pt.live { border-left-color: var(--live); }
.pt.blocked { border-left-color: var(--stop); }
.pt.halted { border-left-color: var(--stop); }
.pt.ok { border-left-color: var(--ok); }
.pt.followup { border-left-color: var(--navy-500); }
.pt.screening { border-left-color: var(--gold-500); }
.pt.excluded { border-left-color: var(--ink-4); }
.pt-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.pt-id { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.pt-nm { font-size: 14.5px; font-weight: 640; margin-top: 2px; letter-spacing: -0.012em; }
.pt-meta { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.pt-stage { font-size: 12.5px; color: var(--ink-2); margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); line-height: 1.5; }
.pt-why { font-size: 11.5px; line-height: 1.5; margin-top: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--stop-bg); color: #7d1c13; border: 1px solid var(--stop-line); }

/* Session dots */
.dots { display: flex; gap: 4px; margin-top: 9px; }
.dot {
  width: 26px; height: 22px; border-radius: 5px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; font-family: var(--mono);
  background: var(--surface-sunk); color: var(--ink-4); border: 1px solid var(--line);
}
.dot.done { background: var(--ok); color: #fff; border-color: var(--ok); }
.dot.now { background: var(--live); color: #fff; border-color: var(--live); }
.dot.held { background: var(--stop); color: #fff; border-color: var(--stop); }
.dot.stopped { background: var(--stop-bg); color: var(--stop); border-color: var(--stop-line); }

/* Form rendering (appendices) */
.form-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.form-hd { padding: 16px 18px; background: var(--navy-800); color: #fff; }
.form-hd .fk { font-family: var(--mono); font-size: 11px; color: var(--gold-400); letter-spacing: 0.08em; text-transform: uppercase; }
.form-hd h2 { font-size: 18px; margin-top: 4px; letter-spacing: -0.018em; }
.form-hd .fp { font-size: 12.5px; color: #a8bad4; margin-top: 6px; line-height: 1.55; max-width: 80ch; }
.form-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.form-meta > div { background: var(--surface-2); padding: 9px 14px; }
.form-meta .k { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.form-meta .v { font-size: 12.5px; font-weight: 560; margin-top: 2px; font-family: var(--mono); }
.form-sec { border-bottom: 1px solid var(--line); }
.form-sec:last-child { border-bottom: 0; }
.form-sec-hd { padding: 10px 18px; background: var(--surface-2); font-size: 12px; font-weight: 680; letter-spacing: 0.01em; border-bottom: 1px solid var(--line); }
.form-sec-body { padding: 14px 18px; }
.form-sec-body.flush { padding: 0; }
.crit { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 8px 18px; border-bottom: 1px solid var(--line); font-size: 13px; align-items: start; }
.crit:last-child { border-bottom: 0; }
.crit .bx { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-4); border: 1px solid var(--line-strong); border-radius: 4px; width: 26px; height: 20px; display: grid; place-items: center; }
.crit .bx.y { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.crit .bx.n { background: var(--surface-sunk); }
.rule-line { height: 1px; background: repeating-linear-gradient(to right, var(--line-strong) 0 6px, transparent 6px 12px); margin: 8px 0; }
.blank-box { border: 1px dashed var(--line-strong); border-radius: var(--r-sm); min-height: 66px; background: var(--surface-2); }
.sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.sig-slot { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; background: var(--surface-2); }
.sig-slot .sk { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); }
.sig-slot .sl2 { height: 24px; border-bottom: 1px solid var(--line-strong); margin-top: 8px; }
.sig-slot .sd { font-size: 10.5px; color: var(--ink-4); margin-top: 4px; }

/* Chat */
.chat { display: grid; gap: 11px; }
.bubble-row { display: flex; }
.bubble-row.me { justify-content: flex-end; }
.bubble { max-width: 78%; padding: 10px 13px; border-radius: 13px; font-size: 13px; line-height: 1.55; }
.bubble-row.me .bubble { background: var(--navy-700); color: #fff; border-bottom-right-radius: 4px; }
.bubble-row.ai .bubble { background: var(--surface-sunk); color: var(--ink); border-bottom-left-radius: 4px; }
.bubble-row.sys { justify-content: center; }
.bubble-row.sys .bubble { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); font-size: 11.5px; font-family: var(--mono); max-width: 100%; text-align: center; }
.bubble .who { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.65; margin-bottom: 4px; }

/* Phone frame for mobile section */
.phone {
  width: 300px; border: 9px solid var(--navy-900); border-radius: 30px; overflow: hidden;
  background: var(--bg); box-shadow: var(--shadow-lg); flex: none;
}
.phone-bar { background: var(--navy-800); color: #fff; padding: 8px 14px; font-size: 11px; display: flex; justify-content: space-between; font-family: var(--mono); }
.phone-body { padding: 12px; display: grid; gap: 9px; min-height: 380px; }
.phone-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 11px; }
.phone-card .pt2 { font-size: 12.5px; font-weight: 640; }
.phone-card .ps { font-size: 11px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }

/* Section divider */
.sec-title { font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin: 26px 0 12px; display: flex; align-items: center; gap: 10px; }
.sec-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.sec-title:first-child { margin-top: 0; }

/* Utility */
.stack { display: grid; gap: 16px; }
.stack-sm { display: grid; gap: 8px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hr { height: 1px; background: var(--line); margin: 16px 0; border: 0; }
.scroll-x { overflow-x: auto; }

@media print {
  .rail, .topbar { display: none; }
  .shell { grid-template-columns: 1fr; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* ==========================================================================
   SIGN IN — centred, branded
   ========================================================================== */
.signin-body {
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(24, 93, 164, 0.10) 0%, transparent 60%),
    var(--bg);
  min-height: 100%;
}
.signin { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.signin-card {
  width: 100%; max-width: 480px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; padding: 34px 32px 28px;
  box-shadow: var(--shadow-lg); text-align: center;
}
.signin-logo { width: 74px; height: 74px; object-fit: contain; display: block; margin: 0 auto 14px; }
.signin-card h1 { font-size: 21px; letter-spacing: -0.02em; }
.signin-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-600); margin: 4px 0 24px; }

.signin-form { display: grid; gap: 13px; text-align: left; }
.signin-form label { display: block; font-size: 11.5px; font-weight: 640; color: var(--ink-2); letter-spacing: 0.015em; margin-bottom: 6px; }
.signin-form input {
  width: 100%; height: 44px; padding: 0 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 14px; background: var(--surface); color: var(--ink);
}
.signin-form input:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(10, 64, 121, 0.12); }
.signin-form button {
  height: 45px; border: none; border-radius: var(--r-sm); background: var(--navy-700);
  color: #fff; font-weight: 640; font-size: 14.5px; margin-top: 3px;
}
.signin-form button:hover { background: var(--navy-600); }

.signin-group-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-4); text-align: left; margin: 4px 0 8px;
}
.signin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
@media (max-width: 480px) { .signin-grid { grid-template-columns: 1fr; } }
.signin-role {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px;
  background: var(--surface); transition: 0.14s; min-width: 0;
}
.signin-role:hover { border-color: var(--accent); background: var(--surface-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.signin-role.picked { border-color: var(--accent); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
.signin-role.picked .nm::after { content: ' ✓'; color: var(--accent); font-weight: 700; }
.signin-role .av {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent);
  color: #fff; display: grid; place-items: center; font-weight: 650; font-size: 11.5px; flex: none;
}
.signin-role .tx { min-width: 0; }
.signin-role .nm { display: block; font-size: 12.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signin-role .rl { display: block; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.signin-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; margin: 4px 0 0; }
.signin-foot { font-size: 11px; color: var(--ink-4); text-align: center; line-height: 1.7; margin-top: 22px; }

/* ==========================================================================
   ACCOUNT MENU (top right)
   ========================================================================== */
.hide-sm { display: inline-flex; }
@media (max-width: 900px) { .hide-sm { display: none; } }

.acct { position: relative; }
.acct-btn {
  display: flex; align-items: center; gap: 10px; background: transparent;
  border: 1px solid transparent; border-radius: 999px; padding: 4px 4px 4px 12px;
}
.acct-btn:hover { background: var(--surface-2); border-color: var(--line); }
.acct-txt { text-align: right; line-height: 1.2; }
@media (max-width: 700px) { .acct-txt { display: none; } }
.acct-nm { display: block; font-size: 12.5px; font-weight: 620; color: var(--ink); }
.acct-rl { display: block; font-size: 11px; color: var(--ink-3); }
.acct-av {
  width: 34px; height: 34px; border-radius: 50%; color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 680; flex: none; letter-spacing: 0.02em;
}
.acct-av.lg { width: 42px; height: 42px; font-size: 14px; }

.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 288px; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.acct-head { display: flex; gap: 11px; align-items: center; padding: 14px; border-bottom: 1px solid var(--line); }
.acct-nm2 { font-size: 13.5px; font-weight: 640; }
.acct-rl2 { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.acct-meta { padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.acct-meta > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 11.5px; }
.acct-meta span { color: var(--ink-3); }
.acct-meta b { font-weight: 600; font-size: 11px; }
.acct-item {
  display: block; padding: 11px 14px; font-size: 13px; font-weight: 620; color: var(--stop);
  text-align: center;
}
.acct-item:hover { background: var(--stop-bg); }

/* ==========================================================================
   DASHBOARD — hero band, ROI panel, charts
   ========================================================================== */
.hero {
  background: linear-gradient(150deg, var(--navy-800), var(--navy-900));
  border-radius: var(--r-lg); padding: 20px 22px; color: #fff; position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 100% at 100% 0%, rgba(201, 162, 39, 0.16), transparent 60%);
  pointer-events: none;
}
.hero-top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; flex-wrap: wrap; position: relative; }
.hero-k { font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-400); }
.hero h2 { font-size: 21px; margin-top: 6px; letter-spacing: -0.022em; color: #fff; }
.hero p { font-size: 13px; color: #a8bad4; margin: 7px 0 0; line-height: 1.6; max-width: 74ch; }
.hero-metrics { display: flex; gap: 26px; flex-wrap: wrap; position: relative; }
.hero-metric .hm-v { font-size: 27px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-metric .hm-k { font-size: 11px; color: #8fa4c2; margin-top: 5px; }
.hero-metric.stop .hm-v { color: #ff9d92; }
.hero-metric.ok .hm-v { color: #7fd3a3; }
.hero-metric.live .hm-v { color: #7cc0f7; }

.hero-chain { display: flex; gap: 5px; margin-top: 16px; position: relative; flex-wrap: wrap; }
.hero-gate {
  display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.11); font-size: 11.5px; color: #c3d1e6;
}
.hero-gate b { font-family: var(--mono); font-weight: 700; }
.hero-gate.done { background: rgba(127, 211, 163, 0.16); border-color: rgba(127, 211, 163, 0.4); color: #a9e6c4; }
.hero-gate.active { background: rgba(124, 192, 247, 0.2); border-color: rgba(124, 192, 247, 0.55); color: #b3dcff; font-weight: 600; }
.hero-gate.blocked { background: rgba(255, 157, 146, 0.18); border-color: rgba(255, 157, 146, 0.45); color: #ffc0b8; }

/* ROI / prevented band */
.roi { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.roi-item { background: var(--surface); padding: 15px 16px; }
.roi-item .rv { font-size: 22px; font-weight: 700; letter-spacing: -0.028em; color: var(--ok); font-variant-numeric: tabular-nums; line-height: 1.1; }
.roi-item .rv.stop { color: var(--stop); }
.roi-item .rv.warn { color: var(--warn); }
.roi-item .rk { font-size: 12px; font-weight: 620; margin-top: 5px; color: var(--ink); }
.roi-item .rd { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }

/* Sparkline / trend */
.spark { display: block; width: 100%; height: 44px; overflow: visible; }
.spark path.ln { fill: none; stroke: var(--navy-500); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.spark path.fillarea { fill: rgba(24, 93, 164, 0.10); stroke: none; }
.spark path.ln.ok { stroke: var(--ok); }
.spark path.ln.stop { stroke: var(--stop); }
.spark circle.pt { fill: var(--navy-500); }
.spark circle.pt.bad { fill: var(--stop); }
.spark line.thresh { stroke: var(--stop); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }

.bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; }
.bars .b { flex: 1; background: var(--navy-500); border-radius: 3px 3px 0 0; min-height: 3px; }
.bars .b.ok { background: var(--ok); }
.bars .b.stop { background: var(--stop); }
.bars .b.mut { background: var(--line-strong); }
.bars-x { display: flex; gap: 5px; margin-top: 5px; }
.bars-x span { flex: 1; text-align: center; font-size: 9.5px; color: var(--ink-4); font-family: var(--mono); }

/* Worklist rows */
.wl { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line); transition: 0.12s; }
.wl:last-child { border-bottom: 0; }
.wl:hover { background: var(--surface-2); }
.wl-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.wl-t { font-size: 13.5px; font-weight: 620; line-height: 1.35; }
.wl-s { font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.55; }
.wl-m { font-size: 11px; color: var(--ink-4); margin-top: 5px; font-family: var(--mono); }
.wl.pri { border-left: 3px solid var(--stop); }
.wl.act { border-left: 3px solid var(--gold-500); }
.wl.now { border-left: 3px solid var(--live); }
.wl.done { border-left: 3px solid var(--ok); }

/* Patient-facing */
.pf { max-width: 800px; }
.pf .card-body { padding: 20px; }
.pf p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.big-step {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--line); align-items: start;
}
.big-step:last-child { border-bottom: 0; }
.big-step .n {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-sunk); color: var(--ink-3); font-weight: 700; font-size: 13px;
}
.big-step.done .n { background: var(--ok); color: #fff; }
.big-step.now .n { background: var(--live); color: #fff; box-shadow: 0 0 0 4px var(--live-bg); }
.big-step .t { font-size: 15px; font-weight: 620; }
.big-step .d { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.6; }
.choice { display: flex; gap: 8px; flex-wrap: wrap; }
.choice button {
  flex: 1; min-width: 84px; border: 1.5px solid var(--line); background: var(--surface);
  border-radius: var(--r); padding: 14px 10px; font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.choice button:hover { border-color: var(--navy-600); background: var(--surface-2); }
.scale-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.scale-row:last-child { border-bottom: 0; }
.course-rail { display: flex; gap: 6px; align-items: center; }
.course-rail .seg {
  flex: 1; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center;
  font-size: 12px; font-weight: 700; font-family: var(--mono);
  background: var(--surface-sunk); color: var(--ink-4); border: 1px solid var(--line);
}
.course-rail .seg.done { background: var(--ok); color: #fff; border-color: var(--ok); }
.course-rail .seg.now { background: var(--live); color: #fff; border-color: var(--live); }

/* ==========================================================================
   OGAMI CHAT
   ========================================================================== */
.ogami { display: flex; flex-direction: column; background: var(--surface); }
.ogami-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.ogami-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ogami-nm { font-size: 13.5px; font-weight: 650; }
.ogami-rl { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.ogami-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-4); flex: none; }
.ogami-dot.live { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.ogami-dot.fallback { background: var(--gold-500); box-shadow: 0 0 0 3px var(--warn-bg); }

.ogami-log {
  display: grid; gap: 11px; padding: 16px; overflow-y: auto;
  min-height: 280px; max-height: 460px; background: var(--surface);
}
.bubble.urgent { background: var(--stop-bg) !important; color: #7d1c13 !important; border: 1px solid var(--stop-line); }
.bubble.typing { display: flex; gap: 4px; align-items: center; padding: 14px 16px; }
.bubble.typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4);
  animation: og-blink 1.3s infinite ease-in-out;
}
.bubble.typing span:nth-child(2) { animation-delay: 0.18s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes og-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

.ogami-chips { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 16px 12px; }
.og-chip {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 7px 13px; font-size: 12.5px; color: var(--ink-2); font-weight: 550;
}
.og-chip:hover { border-color: var(--navy-600); background: var(--surface-2); color: var(--navy-700); }

.ogami-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.ogami-input input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
}
.ogami-input input:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(10, 64, 121, 0.12); }
.ogami-input button { flex: none; min-height: 44px; }

/* ==========================================================================
   MOBILE CHROME — top bar (logo centred), bottom nav, sheet
   ========================================================================== */
.mbar { display: none; }
.bnav { display: none; }
.sheet, .sheet-scrim { display: none; }

@media (max-width: 1000px) {
  /* Rail is replaced wholesale by the bottom bar + sheet. */
  .rail { display: none; }
  .shell { grid-template-columns: 1fr; }
  .topbar { display: none; }

  .mbar {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    height: 56px;
    padding: 0 8px;
    padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
    background: var(--navy-900);
    position: sticky; top: 0; z-index: 40;
    border-bottom: 1px solid #000a16;
  }
  .mbar-side {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: transparent; border: 0; color: #b8c6dc; padding: 0;
  }
  .mbar-side:active { background: rgba(255, 255, 255, 0.1); }
  button.mbar-side.acct-av { color: #fff; font-size: 12px; font-weight: 680; width: 34px; height: 34px; justify-self: end; margin-right: 3px; }
  .mbar-logo { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
  .mbar-logo img { width: 26px; height: 26px; object-fit: contain; flex: none; }
  .mbar-logo span {
    color: #fff; font-size: 14.5px; font-weight: 650; letter-spacing: -0.012em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .bnav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 14px -8px rgba(16, 25, 42, 0.3);
  }
  .bnav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 8px 2px 7px; min-height: 56px; background: transparent; border: 0;
    color: var(--ink-3); font-size: 10.5px; font-weight: 600; position: relative; line-height: 1.2;
  }
  .bnav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .bnav-item.on { color: var(--navy-700); }
  .bnav-item.on svg { stroke-width: 2.1; }
  .bnav-item.on::before {
    content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 2.5px;
    background: var(--navy-700); border-radius: 0 0 3px 3px;
  }
  .bnav-item:active { background: var(--surface-2); }
  .bnav-pip {
    position: absolute; top: 7px; right: 50%; margin-right: -18px;
    width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--surface);
  }
  .bnav-pip.stop { background: var(--stop); }
  .bnav-pip.warn { background: var(--gold-500); }
  .bnav-pip.live { background: var(--live); }

  /* Content must clear the bottom bar. */
  .page { padding: 16px 14px calc(88px + env(safe-area-inset-bottom)); }

  /* Sheet */
  .sheet-scrim {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(2, 10, 22, 0.5); opacity: 0; transition: opacity 0.2s;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .sheet-scrim.in { opacity: 1; }
  .sheet {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    max-height: 86vh; background: var(--surface);
    border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px -12px rgba(0, 10, 25, 0.5);
    transform: translateY(100%); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sheet.up { transform: translateY(0); }
  .sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 9px auto 4px; flex: none; }
  .sheet-who { display: flex; gap: 12px; align-items: center; padding: 10px 18px 14px; border-bottom: 1px solid var(--line); flex: none; }
  .sheet-scroll { overflow-y: auto; padding: 6px 12px 16px; -webkit-overflow-scrolling: touch; }
  .sheet-group-label {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--ink-4); padding: 14px 8px 5px;
  }
  .sheet-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 12px; border-radius: var(--r-sm); font-size: 15px; color: var(--ink);
    min-height: 46px;
  }
  .sheet-item.on { background: var(--live-bg); color: var(--navy-700); font-weight: 640; }
  .sheet-item:active { background: var(--surface-2); }
  .sheet-meta { padding: 14px 12px 8px; margin-top: 10px; border-top: 1px solid var(--line); }
  .sheet-meta > div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12px; }
  .sheet-meta span { color: var(--ink-3); }
  .sheet-out {
    display: block; text-align: center; margin: 12px 0 4px; padding: 14px;
    border-radius: var(--r-sm); background: var(--stop-bg); color: var(--stop);
    font-weight: 640; font-size: 15px; border: 1px solid var(--stop-line);
  }
}

/* ==========================================================================
   RESPONSIVE PASS — everything below the rail breakpoint
   ========================================================================== */
@media (max-width: 1000px) {
  .page-head { margin-bottom: 16px; }
  .page-head h1 { font-size: 19px; }
  .page-head .sub { font-size: 13px; }

  /* Stat and ROI grids stack to two, then one. */
  .stats.g4, .stats.g3 { grid-template-columns: 1fr 1fr; }
  .roi.g3 { grid-template-columns: 1fr 1fr; }
  .grid.g-2-1, .grid.g-1-2, .grid.g3, .grid.g4 { grid-template-columns: 1fr; }

  /* Hero band */
  .hero { padding: 16px 16px; }
  .hero h2 { font-size: 18px; }
  .hero p { font-size: 12.5px; }
  .hero-top { gap: 14px; }
  .hero-metrics { gap: 18px; width: 100%; }
  .hero-metric .hm-v { font-size: 22px; }
  .hero-chain { gap: 4px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .hero-gate { flex: none; }

  /* Every wide surface scrolls inside itself, never the page. */
  .tbl-wrap, .scroll-x { -webkit-overflow-scrolling: touch; }
  .tbl th, .tbl td { padding: 9px 11px; }
  .tbl { font-size: 12.5px; }

  /* The gate chain is horizontal and stays horizontal — it is a chain. */
  .chain { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chain-node { min-width: 138px; }

  /* Cards and sections */
  .card-body { padding: 14px; }
  .card-head { padding: 12px 14px; }
  .card-note { padding: 11px 14px; }
  .sec-title { margin: 20px 0 10px; }

  /* Definition lists go single-column so labels are not squeezed. */
  .def { grid-template-columns: 1fr; gap: 3px; padding: 9px 0; }

  /* Checks / worklists */
  .check { grid-template-columns: 22px 1fr; padding: 11px 14px; }
  .check > .chip:last-child { grid-column: 2; justify-self: start; margin-top: 6px; }
  .wl { padding: 12px 14px; }
  .wl-top { flex-direction: column; gap: 8px; }
  .wl-top > .chip, .wl-top > span.chip { align-self: flex-start; }

  /* Session runner: tabs stack, signature rows stack */
  .sess-tab { min-width: 0; }
  .sig { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sig .btn { width: 100%; }

  /* Forms */
  .form-hd { padding: 14px; }
  .form-hd h2 { font-size: 16px; }
  .form-sec-body { padding: 13px 14px; }
  .form-sec-hd { padding: 10px 14px; }
  .crit { padding: 8px 14px; }
  .form-meta { grid-template-columns: 1fr 1fr; }

  /* Flow diagrams read as a column on a phone. */
  .flow { flex-direction: column; }
  .flow-step { min-width: 0; }
  .flow-arrow { transform: rotate(90deg); align-self: center; margin: -2px 0; }

  /* Layers */
  .layer { grid-template-columns: 38px 1fr; }
  .layer .ln { font-size: 14px; }
  .layer .lb { padding: 12px 13px; }

  /* Patient-facing */
  .pf .card-body { padding: 16px; }
  .big-step { grid-template-columns: 38px 1fr; gap: 11px; }
  .choice button { min-width: 0; flex: 1 1 30%; padding: 13px 6px; font-size: 13px; }
  .course-rail .seg { height: 36px; font-size: 13px; }

  /* Chat */
  .ogami-log { max-height: none; min-height: 240px; padding: 14px; }
  .bubble { max-width: 88%; }

  /* Phone mock is pointless on a phone — show the lists instead. */
  .phone { display: none; }

  /* Buttons reach the 44px touch target. */
  .btn { min-height: 42px; padding: 10px 15px; }
  .btn.sm { min-height: 36px; }
  .btn-row .btn { flex: 1 1 auto; }
}

@media (max-width: 640px) {
  .page { padding: 14px 12px calc(86px + env(safe-area-inset-bottom)); }
  .stats.g4, .stats.g3, .stats.g2 { grid-template-columns: 1fr 1fr; }
  .roi.g3 { grid-template-columns: 1fr; }
  .grid.g2 { grid-template-columns: 1fr; }
  .form-meta { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 18px; }
  .stat { padding: 12px 13px; }
  .stat .v { font-size: 21px; }
  .stat .v.small { font-size: 15px; }
  .hero-metrics { gap: 14px; }
  .hero-metric { min-width: 68px; }
  .chip { font-size: 10.5px; }
  .sess-tab { padding: 11px 12px !important; }
  .ogami-chips { padding: 0 14px 12px; }
  .og-chip { font-size: 12px; padding: 8px 12px; }
}

@media (max-width: 400px) {
  .bnav-item { font-size: 9.5px; }
  .bnav-item span { padding: 0; }
  .stats.g4, .stats.g3, .stats.g2 { grid-template-columns: 1fr; }
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .sheet { transition: none; }
  .sheet-scrim { transition: none; }
  .bubble.typing span { animation: none; opacity: 0.5; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   SESSION SWITCHER
   Three tabs sharing 336px is unreadable, so on a phone the strip scrolls
   instead of squashing. On desktop it fills the card as before.
   ========================================================================== */
.sess-tabs { display: flex; gap: 1px; background: var(--line); }
.sess-tab {
  flex: 1; text-align: left; padding: 13px 16px; background: var(--surface);
  border: 0; border-bottom: 3px solid transparent; min-width: 0;
}

/* ==========================================================================
   MOBILE FIXES — found by auditing the built output rather than assumed
   ========================================================================== */
@media (max-width: 1000px) {
  /* A 310px minimum track overflows a 360px phone once padding is taken off,
     which pushed the whole page sideways. One column below the rail. */
  .pt-grid { grid-template-columns: 1fr; }

  /* The switcher scrolls; each tab keeps a readable width. */
  .sess-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .sess-tab { flex: 0 0 auto; min-width: 190px; scroll-snap-align: start; }

  /* Hashes, keys and embed snippets are the longest unbreakable strings in
     the app. Inside a scrolling table that is fine; anywhere else it is not. */
  .def dd .mono, .note .mono, .acct-meta b, .stat .v.small { overflow-wrap: anywhere; }

  /* Belt and braces: nothing may scroll the page sideways. */
  html, body { overflow-x: hidden; }
  .main, .page { max-width: 100%; min-width: 0; }

  /* Sticky table headers fight a scrolling page on iOS; the wrapper scrolls
     instead, so the header does not need to stick. */
  .tbl th { position: static; }

  /* Signature grid and form meta share the row on a phone rather than
     stretching a single 210px track across the screen. */
  .sig-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Login card: 32px side padding on a 360px screen leaves 296px of content. */
  .signin-card { padding: 26px 18px 22px; border-radius: 14px; }
  .signin { padding: 22px 12px; }
  .signin-logo { width: 62px; height: 62px; }
  .signin-card h1 { font-size: 19px; }
  .signin-role { padding: 11px 12px; min-height: 52px; }
  .signin-foot { font-size: 10.5px; }

  /* Course rail: six segments plus gaps need room to stay legible. */
  .course-rail .seg { font-size: 12px; height: 34px; }

  /* Session dots on a patient card. */
  .dot { width: 24px; height: 21px; font-size: 10px; }
}

/* Larger phones in landscape and small tablets keep two columns where the
   content genuinely benefits from it. */
@media (min-width: 641px) and (max-width: 1000px) {
  .pt-grid { grid-template-columns: 1fr 1fr; }
  .roi.g3 { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   TABLES ON A PHONE
   ==========================================================================
   This app is 61 tables, several of them 8–12 columns wide. A horizontally
   scrolling 12-column grid on a 360px screen is not a mobile experience, it
   is a desktop table you have to drag. Below the rail breakpoint every record
   table becomes a stack of cards: one card per row, one labelled line per
   field, first cell promoted to the card heading.

   The layout is pure CSS, so it is correct before any script runs. The field
   labels are copied from each table's own <th> by a small script — a
   progressive enhancement, not a dependency.

   Matrix tables opt out with data-matrix: where the grid itself carries the
   meaning (an observation sheet is timepoint × vital sign) breaking it into
   cards would destroy the thing the reader is scanning for. Those keep the
   horizontal scroll and gain a scroll affordance instead.
   ========================================================================== */

@media (max-width: 1000px) {
  /* ---- Matrix tables: keep the grid, make the scroll obvious ---- */
  .tbl-wrap[data-matrix] {
    position: relative;
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(16, 25, 42, 0.14), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(16, 25, 42, 0.14), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 13px 100%, 13px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .tbl-wrap[data-matrix]::after {
    content: 'Scroll →';
    position: absolute; top: 6px; right: 8px;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--ink-4); background: var(--surface); padding: 2px 6px; border-radius: 999px;
    border: 1px solid var(--line); pointer-events: none;
  }
  .tbl[data-matrix] { font-size: 12px; }
  .tbl[data-matrix] th, .tbl[data-matrix] td { padding: 8px 10px; white-space: nowrap; }

  /* ---- Record tables: become cards ---- */
  .tbl-wrap:not([data-matrix]) { overflow-x: visible; }

  .tbl:not([data-matrix]) { display: block; }
  .tbl:not([data-matrix]) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .tbl:not([data-matrix]) tbody { display: block; }

  .tbl:not([data-matrix]) tr {
    display: block;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--r);
    background: var(--surface);
    padding: 11px 13px;
    margin-bottom: 9px;
  }
  .tbl:not([data-matrix]) tr:last-child { margin-bottom: 0; }
  .tbl:not([data-matrix]) tbody tr:hover { background: var(--surface); }

  /* Row status becomes a card accent rather than a wash of colour. */
  .tbl:not([data-matrix]) tr.is-stop { border-left-color: var(--stop); background: var(--stop-bg); }
  .tbl:not([data-matrix]) tr.is-warn { border-left-color: var(--gold-500); background: var(--warn-bg); }
  .tbl:not([data-matrix]) tr.is-live { border-left-color: var(--live); background: var(--live-bg); }

  .tbl:not([data-matrix]) td {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px solid rgba(16, 25, 42, 0.07);
    white-space: normal;
    font-size: 13px;
  }
  .tbl:not([data-matrix]) td:last-child { border-bottom: 0; padding-bottom: 0; }
  .tbl:not([data-matrix]) td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-4);
    line-height: 1.45;
  }
  /* An unlabelled cell (script not yet run, or a header-less column) still
     reads correctly — it simply spans the full width. */
  .tbl:not([data-matrix]) td:not([data-label])::before { content: none; }
  .tbl:not([data-matrix]) td:not([data-label]) { grid-template-columns: 1fr; }

  /* First cell is the card heading: full width, larger, no label. */
  .tbl:not([data-matrix]) td:first-child {
    grid-template-columns: 1fr;
    font-size: 14.5px;
    font-weight: 640;
    padding-top: 0;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .tbl:not([data-matrix]) td:first-child::before { content: none; }
  .tbl:not([data-matrix]) td:first-child .s { font-weight: 400; }

  /* Empty cells carry no information on a phone — drop them. */
  .tbl:not([data-matrix]) td:empty { display: none; }

  /* Right-aligned numerics go left with everything else. */
  .tbl:not([data-matrix]) td.n { text-align: left; white-space: normal; }
  .tbl:not([data-matrix]) td .meter { margin-top: 4px; }
  .tbl:not([data-matrix]) td[style*="max-width"] { max-width: none !important; }
  .tbl:not([data-matrix]) td[style*="width:"] { width: auto !important; }
}

@media (max-width: 640px) {
  .tbl:not([data-matrix]) td { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; }
  .tbl:not([data-matrix]) td::before { margin-bottom: 1px; }
  .tbl:not([data-matrix]) tr { padding: 11px 12px; }
}


/* ==========================================================================
   CONTENT ON A PHONE — the parts behind the navigation
   ========================================================================== */

@media (max-width: 1000px) {
  /* ---- The gate chain stays a chain, but snaps and shows there is more ---- */
  .chain { scroll-snap-type: x mandatory; border-radius: var(--r); }
  .chain-node { scroll-snap-align: start; min-width: 152px; padding: 12px 13px; }
  .chain-node .gn { font-size: 12px; }

  /* ---- Hero: four metrics become a 2×2 block instead of a squeezed row ---- */
  .hero-metrics {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; width: 100%;
    padding-top: 14px; margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .hero-metric .hm-v { font-size: 23px; }
  .hero-metric .hm-k { font-size: 10.5px; }
  .hero-top { flex-direction: column; align-items: stretch; }

  /* ---- Checks: the blocking/advisory chip belongs with the label ---- */
  .check .cm { gap: 4px 8px; }
  .check .cm .chip, .check .cm .src { font-size: 10px; }
  .check .why { font-size: 11.5px; padding: 8px 10px; }

  /* ---- Signature blocks ---- */
  .sig { padding: 12px; }
  .sig .sv { font-size: 12px; }

  /* ---- Stat tiles: tighter, and the caption is allowed to wrap ---- */
  .stat .n { font-size: 11px; }

  /* ---- ROI band ---- */
  .roi-item { padding: 14px; }
  .roi-item .rv { font-size: 20px; }

  /* ---- Worklist ---- */
  .wl-t { font-size: 13px; }
  .wl-s { font-size: 12px; }

  /* ---- Cards inside cards get thinner rules ---- */
  .card + .card { margin-top: 12px; }
  .grid { gap: 12px; }
  .stack { gap: 12px; }

  /* ---- Chips wrap instead of forcing width ---- */
  .chip { white-space: normal; }
  .chip-row { gap: 5px; }

  /* ---- Timeline ---- */
  .tl { padding-left: 19px; }
  .tl-detail { font-size: 12.5px; }

  /* ---- Appendix form sheet ---- */
  .crit { grid-template-columns: 28px 1fr; gap: 9px; font-size: 12.5px; }
  .sig-slot { padding: 10px 11px; }

  /* ---- Notes ---- */
  .note { font-size: 12px; padding: 11px 12px; }

  /* ---- Patient-facing: bigger targets, calmer type ---- */
  .pf p { font-size: 15px; }
  .big-step .t { font-size: 14.5px; }
  .big-step .d { font-size: 13px; }
  .scale-row { grid-template-columns: 1fr; gap: 6px; align-items: start; }

  /* ---- Ogami chat sizes to the viewport rather than a fixed box ---- */
  .ogami-log { max-height: 52vh; }
  .ogami-input { position: sticky; bottom: 0; }
}

@media (max-width: 640px) {
  .hero { padding: 15px 14px; }
  .hero h2 { font-size: 17px; }
  .chain-node { min-width: 140px; }
  .card-head { flex-wrap: wrap; gap: 8px; }
  .card-head h3 { font-size: 12.5px; }
  .sec-title { font-size: 11px; }
  .page-head .sub { font-size: 12.5px; }
  .roi-item .rv { font-size: 19px; }

  /* Two-up stat blocks keep their value legible at 360px. */
  .stat { padding: 11px 12px; }
  .stat .k { font-size: 10.5px; }
  .stat .v { font-size: 19px; }
}

/* ==========================================================================
   ACTION LAYER
   The screen has one job: get the signed-in person to the next action without
   making them read. Three rules hold this section together.
     1. One loudest thing per screen — .actbar. Nothing else competes with it.
     2. Every item that can be acted on carries a verb in a button, not a
        paragraph ending in a link.
     3. The reasoning is never deleted, only folded — .why. Leadership can open
        the clause; the clinician on the unit never has to.
   ========================================================================== */

/* ---- The single next action ------------------------------------------- */
.actbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-left: 4px solid var(--held); border-radius: var(--r-lg);
  padding: 15px 18px; box-shadow: var(--shadow);
}
.actbar.stop { border-left-color: var(--stop); background: linear-gradient(90deg, var(--stop-bg) 0%, var(--surface) 42%); }
.actbar.live { border-left-color: var(--live); background: linear-gradient(90deg, var(--live-bg) 0%, var(--surface) 42%); }
.actbar.ok   { border-left-color: var(--ok);   background: linear-gradient(90deg, var(--ok-bg) 0%, var(--surface) 42%); }
.actbar-body { flex: 1 1 320px; min-width: 0; }
.actbar-k {
  font-size: 10px; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3);
}
.actbar.stop .actbar-k { color: var(--stop); }
.actbar.live .actbar-k { color: var(--live); }
.actbar.ok   .actbar-k { color: var(--ok); }
.actbar-t { font-size: 19px; font-weight: 660; letter-spacing: -0.022em; line-height: 1.25; margin-top: 5px; }
.actbar-s { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.45; }
.actbar .btn { flex: none; }

/* ---- Folded reasoning -------------------------------------------------- */
.why { margin-top: 8px; }
.why > summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 11px; font-weight: 640; color: var(--ink-3);
  list-style: none; padding: 2px 0; user-select: none;
}
.why > summary::-webkit-details-marker { display: none; }
.why > summary::before {
  content: "›"; font-size: 13px; line-height: 1; transition: transform 0.14s;
  display: inline-block; color: var(--ink-4);
}
.why[open] > summary::before { transform: rotate(90deg); }
.why > summary:hover { color: var(--ink); }
.why-body {
  font-size: 12px; line-height: 1.6; color: var(--ink-2);
  margin-top: 7px; padding-left: 12px; border-left: 2px solid var(--line);
}
.why-body b { color: var(--ink); font-weight: 640; }
.why-body ul { margin: 6px 0 0; padding-left: 17px; line-height: 1.65; }
/* card-note folded into the card foot */
.card-note .why { margin-top: 0; }

/* ---- Worklist, action-first ------------------------------------------- */
.wl-act {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 9px;
}
.wl-line { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.wl-t { font-size: 15px; font-weight: 650; letter-spacing: -0.012em; }
/* A row that is only a link still has to look like one. */
.wl .btn { flex: none; }

/* ---- Check list: blockers first, verified folded ----------------------- */
.checks-fold { border-top: 1px solid var(--line); }
.checks-fold > summary {
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 9px 16px; font-size: 11.5px; font-weight: 620; color: var(--ink-3);
  background: var(--surface-2);
}
.checks-fold > summary::-webkit-details-marker { display: none; }
.checks-fold > summary::before { content: "›"; color: var(--ink-4); font-size: 13px; transition: transform 0.14s; }
.checks-fold[open] > summary::before { transform: rotate(90deg); }
.checks-fold > summary:hover { color: var(--ink); }

/* Check meta collapses to one quiet line; the chips no longer shout. */
.check .cm { font-size: 11px; color: var(--ink-4); gap: 4px 8px; }
.check .cm .chip.ref { border-color: transparent; background: transparent; padding: 0; color: var(--ink-4); }
.check .cm .src { background: transparent !important; color: var(--ink-4) !important; padding: 0; font-weight: 600; }

/* ---- Quieter chips: colour is reserved for genuine blockers ------------ */
.chip.ok   { font-weight: 600; }
.chip.held { font-weight: 600; }

@media (max-width: 640px) {
  .actbar { padding: 13px 14px; gap: 12px; }
  .actbar-t { font-size: 16px; }
  .actbar .btn { width: 100%; }
  .wl-t { font-size: 14px; }
}