/* Clinic Console — the shell.
   One stylesheet, three layouts. The markup never changes shape; this file
   decides whether a pass is a column of chips under your thumb or a fields
   panel beside a cockpit. */

:root {
  --bg:        #04090a;
  --ink:       #dcebe9;
  --ink-2:     #c3ddda;
  --dim:       #7fa8a4;
  --dimmer:    #3f6b69;
  --faint:     #2d514f;
  --hush:      #23423f;

  --teal:      #4fd6c8;
  --teal-2:    #7fc4bd;
  --amber:     #e0a44a;
  --amber-ink: #e8dcc4;
  --red:       #e05a4a;
  --red-ink:   #f0a89c;

  --line:      rgba(79,214,200,0.13);
  --line-soft: rgba(79,214,200,0.09);
  --panel:     rgba(7,15,16,0.66);
  --panel-2:   rgba(5,10,11,0.55);

  --r:   10px;
  --r-l: 14px;

  --display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --serif:   "Newsreader", Georgia, serif;

  --tap: 44px;                       /* nothing tappable is smaller */
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* the shadow ladder — three depths and no more. Depth is information:
     z1 rests, z2 asks, z3 is the plane the whole hand goes to. */
  --z1: 0 10px 24px rgba(0,0,0,0.32);
  --z2: 0 22px 48px rgba(0,0,0,0.46);
  --z3: -34px 0 72px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background:
    radial-gradient(1400px 900px at 44% 34%, #0c1a1c 0%, #071012 58%, #04090a 100%),
    var(--bg);
  color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { display: flex; flex-direction: column; }

.mono  { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.dim   { color: var(--dimmer); }
.kicker {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; color: var(--teal);
}
.spacer { flex: 1 1 auto; }
.rule { width: 1px; height: 18px; background: rgba(79,214,200,0.18); flex: 0 0 auto; }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.dot-red   { background: var(--red); }
.dot-amber { background: var(--amber); }
.dot-teal  { background: var(--teal); }

/* the orb — the recording, and the one living thing on screen. Everything
   else that moves on this app is a person's finger. */
.pill-rec .dot {
  width: 14px; height: 14px;
  background: radial-gradient(circle at 36% 30%, #ffd9d3, #e05a4a 55%, #5e1d16 85%, #2a0d09);
  box-shadow: 0 0 9px rgba(224,90,74,0.5), inset 0 1px 3px rgba(255,255,255,0.28);
  animation: orb-breathe 2.8s ease-in-out infinite;
}
@keyframes orb-breathe {
  50% { box-shadow: 0 0 16px rgba(224,90,74,0.8), inset 0 1px 3px rgba(255,255,255,0.28); }
}

/* ── the gate ───────────────────────────────────────────────────────────── */
.gate {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(4,9,10,0.96);
}
/* THE hidden ATTRIBUTE WINS, everywhere. Four rules below name one element
each, and the fifth element with hidden -- the gate's "Open Telegram" link, a
.btn -- had none, so .btn's own display beat the UA default and a button that
led nowhere showed before a code existed. One rule, every element. */
[hidden] { display: none !important; }

/* The sign-in QR. The SVG paints its own white quiet zone -- a camera wants
   light behind dark, whatever the page around it looks like. 220px is large
   enough for a phone at arm's length from a laptop screen and small enough
   not to push the buttons below the fold on a phone. */
.gate-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.gate-qr-img { width: 220px; max-width: 70vw; border-radius: 6px; overflow: hidden; }
.gate-qr-img svg { display: block; width: 100%; height: auto; }
.gate-qr-cap { font: 500 10.5px/1.4 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.gate[hidden] { display: none; }
.gate-card {
  width: min(460px, 100%);
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px; border-radius: 16px;
  background: var(--panel); border: 1px solid rgba(79,214,200,0.2);
}
.gate-title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.gate-body  { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.65; color: var(--dim); }
.gate-state {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--amber);
}

.btn {
  min-height: var(--tap);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 18px; border-radius: var(--r-l);
  font-family: var(--display); font-size: 15px; font-weight: 500;
  border: 1px solid var(--line); background: transparent; color: var(--dim);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: rgba(79,214,200,0.14); border-color: rgba(79,214,200,0.44); color: var(--teal); font-weight: 600; }
.btn:active { transform: translateY(1px); }

/* ── the spine ──────────────────────────────────────────────────────────── */
.spine {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; min-height: 56px;
  border-bottom: 1px solid var(--line);
}
.spine[hidden] { display: none; }

.wordmark { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--teal); flex: 0 0 auto; }

.who { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79,214,200,0.14); border: 1px solid rgba(79,214,200,0.34);
  font-family: var(--mono); font-size: 10px; color: var(--teal);
}
.who-lines { display: flex; flex-direction: column; gap: 1px; }
.who-name { font-size: 12px; color: var(--ink-2); line-height: 1.1; }
.who-sub  { font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; color: #2d6b69; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  border: 1px solid var(--line); color: var(--dim); flex: 0 0 auto;
}
.pill[hidden] { display: none; }
.pill-teal  { background: rgba(79,214,200,0.10); border-color: rgba(79,214,200,0.3); color: var(--teal); }
.pill-rec   { background: rgba(224,90,74,0.12);  border-color: rgba(224,90,74,0.4);  color: #ff8a7a; }
.pill-alert { background: rgba(224,90,74,0.16);  border-color: rgba(224,90,74,0.5);  color: var(--red-ink); border-radius: 5px; }
.pill-ok    { background: rgba(79,214,200,0.09); border-color: rgba(79,214,200,0.28); color: var(--teal); border-radius: 5px; }

.patient {
  font-family: var(--display); font-size: 16px; font-weight: 600; color: #fff;
  background: none; border: 0; border-bottom: 1px dotted rgba(79,214,200,0.45);
  padding: 0 0 1px; cursor: help; flex: 0 0 auto;
}
.patient-sub { font-size: 12px; color: var(--dimmer); flex: 0 0 auto; }

.studies { display: flex; gap: 6px; flex: 0 0 auto; }
.study {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.study .mod    { font-family: var(--mono); font-size: 10px; color: var(--dim); }
.study .centre { font-size: 11px; color: var(--ink-2); }
.study .glyph  { font-family: var(--mono); font-size: 11px; }
.study.open  { background: rgba(79,214,200,0.07); border-color: rgba(79,214,200,0.22); }
.study.open  .glyph { color: var(--teal); }
.study.wait  { background: rgba(224,164,74,0.08); border-color: rgba(224,164,74,0.32); }
.study.wait  .glyph { color: var(--amber); }
.study.none  .glyph { color: var(--dimmer); }

.meter { font-family: var(--mono); font-size: 10px; color: var(--faint); flex: 0 0 auto; }

.patient-card {
  position: absolute; top: calc(100% + 6px); left: 16px; z-index: 40;
  width: min(420px, calc(100vw - 32px));
  display: none; flex-direction: column; gap: 7px;
  padding: 15px 17px; border-radius: var(--r);
  background: rgba(5,12,13,0.98); border: 1px solid rgba(79,214,200,0.26);
  box-shadow: 0 20px 48px rgba(0,0,0,0.7);
}
.patient-card.on { display: flex; }
.pc-row { display: flex; align-items: baseline; gap: 11px; }
.pc-k { font-size: 11px; color: var(--dimmer); width: 96px; flex: 0 0 auto; }
.pc-v { font-size: 12px; color: var(--ink-2); }

/* ── the body: one region, three layouts ────────────────────────────────── */
main {
  flex: 1 1 auto; min-height: 0;
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  grid-template-areas: "fields";
}
main[hidden] { display: none; }

.col { min-width: 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.col-sources { grid-area: sources; display: none; border-right: 1px solid var(--line); }
.col-note    { grid-area: note;    display: none; border-right: 1px solid var(--line); }
.col-fields  { grid-area: fields;  display: block; }

/* phone — the pass, and nothing else. Everything tappable in the lower half. */
@media (max-width: 767px) {
  .spine { flex-wrap: wrap; gap: 8px 10px; }
  .spine .rule, .spine .studies, .spine .meter, .spine .patient-sub { display: none; }
  .col-fields { padding: 0 16px calc(20px + var(--safe-b)); }
}

/* tablet — the note beside what it still needs */
@media (min-width: 768px) and (max-width: 1599px) {
  main { grid-template-columns: minmax(0,1fr) 380px; grid-template-areas: "note fields"; }
  .col-note   { display: block; padding: 18px 22px; }
  .col-fields { padding: 16px 18px; }
  /* the imaging chips belong to the cockpit; at this width they were pushing
     the spine past the viewport (measured: 1542px of spine at 1000px wide).
     What remains may still not fit a narrow tablet — and the allergy and the
     recording are not hideable, so the spine wraps rather than clips. */
  .spine { flex-wrap: wrap; row-gap: 6px; }
  .spine .meter, .spine .studies { display: none; }
}

/* widescreen — the cockpit */
@media (min-width: 1600px) {
  main { grid-template-columns: 380px minmax(0,1fr) 460px; grid-template-areas: "sources note fields"; }
  .col-sources { display: block; padding: 18px; }
  .col-note    { display: block; padding: 20px 26px; }
  .col-fields  { padding: 18px; }
}

/* ── depth: three planes, one perspective ───────────────────────────────────
   Depth is information — the plane that needs you sits closest. The room
   (plane 0) is atmosphere and never data; the record (plane 1) reads flat;
   the ask (plane 2) leans toward the hand. The phone stays flat: one column
   has no planes to separate, and its speed is the feature.

   Two facts this leans on: a tilted column may poke a few pixels past the
   viewport, so main clips instead of growing a scrollbar; and a scrolling
   column flattens preserve-3d, so a field that leans in does it with scale
   and shadow — same statement, no broken scroll. */
@media (min-width: 768px) {
  /* the spine never clips and never scrolls sideways: whatever this pass
     cannot fit on one row wraps to a second, allergy and recording included */
  .spine { flex-wrap: wrap; row-gap: 6px; }

  body::before {                       /* plane 0 — the room */
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(900px 520px at 78% 18%, rgba(79,214,200,0.05) 0%, rgba(79,214,200,0) 70%),
      radial-gradient(700px 700px at 12% 86%, rgba(79,214,200,0.03) 0%, rgba(79,214,200,0) 70%);
  }
  main { overflow: clip; }

  .field { transition: transform 0.16s ease, box-shadow 0.16s ease; }
  .field.open.stake {                  /* an open high-stake ask leans in */
    transform: scale(1.012);
    box-shadow: var(--z2), 0 0 0 1px rgba(224,164,74,0.14);
  }
}

@media (min-width: 768px) and (max-width: 1599px) {
  main { perspective: 2200px; perspective-origin: 46% 40%; }
  .col-fields {
    transform: rotateY(-1.5deg);
    transform-origin: left center;
    background: linear-gradient(168deg, rgba(16,32,34,0.42), rgba(8,17,19,0.5));
    border-left: 1px solid rgba(79,214,200,0.14);
    box-shadow: var(--z3);
  }
}

@media (min-width: 1600px) {
  main { perspective: 2600px; perspective-origin: 52% 40%; }
  .col-sources {                       /* plane 1, receding — reading only */
    transform: rotateY(1.6deg);
    transform-origin: right center;
    background: linear-gradient(168deg, rgba(10,20,22,0.5), rgba(5,10,11,0.35));
  }
  .col-fields {                        /* plane 2 — the ask sits closest */
    transform: rotateY(-2deg) translateZ(36px);
    transform-origin: left center;
    background: linear-gradient(168deg, rgba(16,32,34,0.5), rgba(8,17,19,0.58));
    border-left: 1px solid rgba(79,214,200,0.16);
    box-shadow: var(--z3);
  }
}

/* ── section furniture ──────────────────────────────────────────────────── */
.sec-head {
  display: flex; align-items: baseline; gap: 9px;
  padding: 14px 0 10px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; color: #2d6b69;
}
.sec-head .right { margin-left: auto; color: var(--faint); }
.sec-note { font-size: 11px; color: var(--dimmer); line-height: 1.5; padding-bottom: 10px; }

/* ── a field: the pass, made visible ────────────────────────────────────── */
.field {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 13px; margin-bottom: 9px;
  border-radius: var(--r); background: var(--panel); border: 1px solid var(--line);
}
.field.open  { background: rgba(224,164,74,0.06); border-color: rgba(224,164,74,0.3); }
.field.stake { border-left: 2px solid rgba(224,164,74,0.55); }

.field-head { display: flex; align-items: baseline; gap: 9px; }
.field-label { font-size: 14px; color: var(--ink-2); }
.field.open .field-label { color: var(--amber-ink); }
.field-unit { font-family: var(--mono); font-size: 9px; color: var(--faint); }
.field-state {
  margin-left: auto; font-family: var(--mono); font-size: 8px;
  letter-spacing: 0.07em; color: #2d6b69;
}
.field.open .field-state { color: var(--amber); }

.evidence {
  padding: 8px 11px; border-radius: 8px;
  background: rgba(79,214,200,0.05); border-left: 2px solid rgba(79,214,200,0.4);
  font-family: var(--serif); font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.evidence .src {
  display: block; font-family: var(--mono); font-size: 8px;
  letter-spacing: 0.12em; color: var(--teal); margin-bottom: 3px;
}

.opts { display: flex; flex-wrap: wrap; gap: 7px; }
.opt {
  min-height: var(--tap); flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(5,10,11,0.6); border: 1px solid var(--line);
  color: var(--dim); font-size: 15px; font-family: var(--display);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.opt[aria-pressed="true"] {
  background: rgba(79,214,200,0.16); border-color: rgba(79,214,200,0.5);
  color: #fff; font-weight: 600;
}
.opt:active { transform: translateY(1px); }

/* a value already known — agreed with, not chosen */
.confirm { display: flex; flex-direction: column; gap: 5px; padding: 16px; border-radius: 12px;
           background: rgba(5,10,11,0.6); border: 1px solid rgba(79,214,200,0.2); }
.confirm .big   { font-family: var(--mono); font-size: 28px; color: #fff; letter-spacing: 0.02em; }
.confirm .small { font-size: 14px; color: var(--ink-2); }
.confirm .src   { font-family: var(--mono); font-size: 10px; color: #2d6b69; padding-top: 3px; }

/* the alternatives behind a confirm — a different value goes in by slide */
.alts { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.alts[hidden] { display: none; }
.alt {
  min-height: var(--tap);
  display: flex; align-items: baseline; gap: 12px; text-align: left;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(5,10,11,0.6); border: 1px solid var(--line);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.alt .alt-code   { font-size: 15px; color: var(--ink-2); letter-spacing: 0.02em; }
.alt .alt-detail { font-size: 13px; color: var(--dim); }
.alt.on {
  background: rgba(224,164,74,0.10); border-color: rgba(224,164,74,0.5);
}
.alt.on .alt-code { color: var(--amber-ink); }

/* a suggestion — lit before anyone touched it, and it says so */
.opt.suggested {
  border-style: dashed; border-color: rgba(224,164,74,0.5);
  background: rgba(224,164,74,0.07); color: var(--amber-ink);
}

.btn-wide { width: 100%; margin-top: 9px; }
.slide-slot:empty { display: none; }
.slide-slot { padding-top: 8px; }

/* the ones a mis-tap must not decide — a real drag, end to end */
.slide {
  position: relative; height: 56px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center;
  background: rgba(224,90,74,0.10); border: 1px solid rgba(224,90,74,0.45);
}
.slide .knob { position: absolute; left: 0; top: 0; bottom: 0; width: 88px;
               border-radius: 11px; background: rgba(224,90,74,0.28);
               border: 1px solid rgba(224,90,74,0.6);
               cursor: grab; touch-action: none;
               transition: transform 0.16s ease; }
.slide .knob:active { cursor: grabbing; }
.slide .lab  { position: absolute; left: 104px; font-size: 14px; font-weight: 500; color: #ff8a7a; }
.slide.done  { background: rgba(79,214,200,0.10); border-color: rgba(79,214,200,0.45); }
.slide.done .knob { background: rgba(79,214,200,0.3); border-color: rgba(79,214,200,0.6); cursor: default; }
.slide.done .lab  { color: var(--teal); }

/* the body diagram — where it hurts, drawn on a body that turns */
.map-wrap { display: flex; flex-direction: column; gap: 9px; }
.map-stage { display: flex; justify-content: center; perspective: 900px; }
.map-svg {
  width: min(64%, 220px); height: auto; display: block;
  border-radius: 12px; background: rgba(5,10,11,0.6);
  border: 1px solid var(--line);
  /* INERT UNTIL ARMED. pan-y hands vertical gestures to the browser, so a
     finger scrolling the pass never reaches the drawing handlers. Only the
     DRAW tap flips this to none, and then the canvas owns the gesture. */
  touch-action: pan-y; cursor: default;
  transition: transform 0.095s ease-in-out, box-shadow 0.16s ease;
  transform-style: preserve-3d;
}
.map-svg.armed {
  touch-action: none; cursor: crosshair;
  border-color: rgba(224,90,74,0.45);
  box-shadow: 0 0 0 1px rgba(224,90,74,0.25), var(--z1);
}
.map-svg.done { cursor: default; }
.map-dial {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px; border-radius: 999px;
  background: rgba(5,10,11,0.55); border: 1px solid var(--line-soft);
  touch-action: none; cursor: ew-resize;
}
.map-arrow, .map-tick {
  min-height: 32px; padding: 5px 10px; border-radius: 999px;
  background: transparent; border: 1px solid transparent;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--dimmer); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.map-arrow { color: var(--dim); font-size: 12px; }
.map-tick.on { border-color: rgba(79,214,200,0.4); background: rgba(79,214,200,0.1); color: var(--teal); }
.map-body  { fill: rgba(220,235,233,0.05); stroke: #2d514f; stroke-width: 1.6; stroke-linejoin: round; }
.map-guides { stroke: rgba(79,214,200,0.14); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.map-ink path {
  fill: none; stroke: var(--red); stroke-opacity: 0.5;
  stroke-width: 13; stroke-linecap: round; stroke-linejoin: round;
}
.map-lab   { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--dimmer); }
.map-meter { font-size: 10px; color: var(--dim); text-align: center; }

/* not yours to answer */
.waiting {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 12px;
  background: rgba(5,10,11,0.6); border: 1px dashed rgba(79,214,200,0.22);
  color: var(--dim); font-size: 14px;
}

/* ── the note, as blocks ────────────────────────────────────────────────── */
.block {
  display: flex; gap: 11px; padding: 11px 12px; margin-bottom: 9px;
  border-radius: var(--r); background: var(--panel); border: 1px solid var(--line);
}
.block.out { background: rgba(5,10,11,0.3); border-color: rgba(79,214,200,0.06); }
.tick {
  width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px;
  border-radius: 4px; border: 1.5px solid rgba(79,214,200,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #04191a; cursor: pointer;
}
.tick.on { background: var(--teal); border-color: var(--teal); }
.block-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
.block-head { display: flex; align-items: baseline; gap: 8px; }
.kind {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.09em;
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid rgba(79,214,200,0.16); color: var(--dimmer);
}
.block-h { font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em; color: #2d6b69; }
.block-src { margin-left: auto; font-family: var(--mono); font-size: 8px; color: var(--hush); }
.block-t { font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.block.out .block-t { color: var(--dimmer); }

/* the section mic — dictation addressed to one heading */
.mic {
  margin-left: 8px; flex: 0 0 auto;
  min-width: 30px; height: 24px; padding: 0 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  background: transparent; border: 1px solid var(--line); color: var(--dimmer);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.block-src + .mic { margin-left: 8px; }
.block-head .mic { order: 9; }
.mic:hover { color: var(--red-ink); border-color: rgba(224,90,74,0.45); }
.mic.on {
  color: #ff8a7a; background: rgba(224,90,74,0.14);
  border-color: rgba(224,90,74,0.55);
}
.block.listening { border-color: rgba(224,90,74,0.5); box-shadow: 0 0 0 1px rgba(224,90,74,0.2), var(--z1); }

.take-section { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--amber); }

/* ── sources ────────────────────────────────────────────────────────────── */
.take {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; margin-bottom: 8px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line-soft); cursor: pointer;
}
.take.on { background: rgba(79,214,200,0.08); border-color: rgba(79,214,200,0.3); }
.take-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.take-where { font-size: 12px; color: var(--ink-2); }
.take-when  { font-size: 10px; color: var(--dimmer); }
.take-src   { font-family: var(--mono); font-size: 8px; letter-spacing: 0.05em; color: var(--faint); }

/* ── the foot ───────────────────────────────────────────────────────────── */
.footrule {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + var(--safe-b));
  border-top: 1px solid var(--line); background: rgba(4,9,10,0.72);
  font-size: 12px; color: var(--dimmer);
}
.footrule[hidden] { display: none; }

.file-bar { position: sticky; bottom: 0; padding-top: 10px;
            display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
            background: linear-gradient(180deg, rgba(4,9,10,0) 0%, rgba(4,9,10,0.92) 34%); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── what the phone can capture ──────────────────────────────────────────────
   The sections strip earns its place only where the note is hidden: below
   768px the mics on the block headings are off screen, so this is the only
   way to dictate into a heading. At 768 and up the note is right there, so
   the strip stands down and the paperclip stays. */
.capture { flex: 0 0 auto; }
.capture[hidden] { display: none; }

.cap-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid var(--line);
  background: rgba(4,9,10,0.82);
}

.cap-strip {
  display: flex; gap: 7px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cap-strip::-webkit-scrollbar { display: none; }
/* AND IT HAS TO LOOK SCROLLABLE. Seven section chips are 970px wide; a 390px
   phone shows three, the scrollbar is hidden on purpose, and nothing said the
   rest were there. The mask fades the last few pixels so the row reads as cut
   off rather than finished -- and it fades only while there IS more, because
   a permanent fade is decoration that teaches nothing. */
.cap-strip {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}
.cap-strip.ends {
  -webkit-mask-image: none;
          mask-image: none;
}

.sect {
  flex: 0 0 auto; min-height: 38px;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(5,10,11,0.6); border: 1px solid var(--line);
  font-family: var(--display); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sect-h { font-size: 11px; color: var(--dim); letter-spacing: 0.01em; white-space: nowrap; }
.sect-n { font-size: 10px; color: var(--faint); }

/* a section that has audio held for it */
.sect.has { background: rgba(79,214,200,0.08); border-color: rgba(79,214,200,0.3); }
.sect.has .sect-h { color: var(--ink-2); }
.sect.has .sect-n { color: var(--teal); }

/* a block still out of the note — the one nothing has been said about */
.sect.empty { border-color: rgba(224,164,74,0.32); background: rgba(224,164,74,0.06); }
.sect.empty .sect-h { color: var(--amber-ink); }

/* recording, right now */
.sect.rec { background: rgba(224,90,74,0.16); border-color: rgba(224,90,74,0.55); }
.sect.rec .sect-h { color: #ff8a7a; }
.sect.rec .sect-n { color: #ff8a7a; font-variant-numeric: tabular-nums; }

/* no microphone on this device — stated, never pretended around */
.sect.nomic { opacity: 0.5; }

.clip {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  background: rgba(79,214,200,0.1); border: 1px solid rgba(79,214,200,0.3);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.clip:active { transform: translateY(1px); }

/* the sheet — Telegram's arrangement: one clip, one sheet, three ways in */
.sheet {
  position: fixed; inset: 0; z-index: 55;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 10px calc(10px + var(--safe-b));
  background: rgba(4,9,10,0.72);
}
.sheet[hidden] { display: none; }
.sheet-card {
  width: min(460px, 100%);
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px; border-radius: 18px;
  background: rgba(7,15,16,0.98); border: 1px solid rgba(79,214,200,0.22);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.6);
}
.sheet-h { font-size: 9px; letter-spacing: 0.2em; color: #2d6b69; padding: 2px 4px 4px; }
.sheet-row {
  min-height: var(--tap);
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 11px 13px; border-radius: 12px;
  background: rgba(5,10,11,0.6); border: 1px solid var(--line);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sheet-g  { font-size: 18px; color: var(--teal); flex: 0 0 auto; }
.sheet-t  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheet-t1 { font-size: 15px; color: var(--ink-2); }
.sheet-t2 { font-size: 11.5px; color: var(--dimmer); }
.sheet-cancel {
  min-height: var(--tap); margin-top: 3px;
  padding: 11px; border-radius: 12px;
  background: transparent; border: 1px solid var(--line);
  font-family: var(--display); font-size: 14px; color: var(--dim);
  cursor: pointer;
}
.hidden-file { display: none; }

/* at 768 and up the note carries its own mics, so the strip stands down */
@media (min-width: 768px) {
  .cap-strip { display: none; }
  .cap-bar { justify-content: flex-end; }
}

/* What filing said. The button used to have no handler at all -- drawn,
   styled, and silent on a real phone after three recordings and a photo.
   Whatever happens now, it says so here: filed, or the rows still open, or
   the door out of reach. */
.file-said { font: 500 12px/1.5 "IBM Plex Mono", monospace; margin-top: 10px;
  padding: 9px 11px; border-radius: 6px; border: 1px solid var(--hush);
  color: var(--dim); background: var(--panel, #071214); }
.file-said.ok { color: var(--teal); border-color: var(--faint); }
.file-said.no { color: var(--amber); border-color: #4d3c22; }

/* PRESSED, VISIBLY. The only half of the feedback that cannot be refused by
   the WebView, so it carries the weight: every button and every tappable row
   moves under the finger. -webkit-tap-highlight-color is cleared because
   Android's default grey flash arrives late and reads as lag. */
.btn, .take, .chip, .tick { -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, filter .06s ease; }
.btn:active, .take:active, .chip:active, .tick:active {
  transform: scale(.97); filter: brightness(1.25); }
.btn:active { box-shadow: inset 0 2px 6px rgba(0,0,0,.45); }

/* What a recording said, opened by tapping it. */
.take-text { grid-column: 1 / -1; margin-top: 8px; padding: 9px 11px;
  border-radius: 6px; border: 1px solid var(--hush); background: rgba(0,0,0,.25);
  font: 400 13px/1.55 "Newsreader", Georgia, serif; color: var(--ink-2);
  white-space: pre-wrap; }

/* A CONTROL LOOKS LIKE ONE, AND ONLY IF IT IS ONE. Three pills in the header
   carried a border, a colour and a dot and had no listener at all -- which is
   a button as far as a thumb is concerned. The ones that act now say so. */
.tappable { cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, filter .06s ease; }
.tappable:active { transform: scale(.97); filter: brightness(1.25); }
.tappable:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* What a header control said when it was tapped. */
.spine-said { flex-basis: 100%; order: 99; font: 500 11px/1.5 "IBM Plex Mono", monospace;
  color: var(--amber); padding: 6px 0 0; }

/* ── recordings, numbered, with what they heard ──────────────────────────── */
.rec-list { display: flex; flex-direction: column; gap: 8px; }
.rec { border: 1px solid var(--hush); border-radius: 7px; padding: 10px 11px;
  background: var(--panel, #071214); display: flex; flex-direction: column; gap: 5px;
  flex: 1 1 auto; min-width: 0; }
.rec-bad { border-color: #4a2521; }
.rec-head { display: flex; align-items: baseline; gap: 10px; }
.rec-n { font-size: 10.5px; letter-spacing: .1em; color: var(--ink-2); font-weight: 600; }
.rec-state { font-size: 10px; letter-spacing: .07em; margin-left: auto; }
.rec-sub { font-size: 10.5px; color: var(--dim); }
.rec-text { font: 400 13px/1.55 "Newsreader", Georgia, serif; color: var(--ink);
  white-space: pre-wrap; padding: 8px 10px; border-radius: 6px;
  background: rgba(0,0,0,.28); border: 1px solid var(--hush); }
.rec-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rec-say { font-size: 10.5px; color: var(--dim); line-height: 1.5; }
.btn-small { font-size: 11.5px; padding: 6px 11px; }
/* WITHDRAWN, WHICH IS NOT DELETED. The row stays, dimmed and struck, because
   it is out of the note and still on the record -- and a row that vanished
   would claim a destruction this system does not do. Kept readable rather
   than ghosted: he may need to read what he took out. */
.rec-out { border-style: dashed; opacity: .72; }
.rec-struck { text-decoration: line-through; text-decoration-thickness: 1px;
  text-decoration-color: var(--dim); color: var(--dim); }
.tick-off { opacity: .35; cursor: default; }
.take-out { order: 2; }

/* Remove is the one control here that changes the record, so it is quiet
   until it is armed, and unmistakable once it is. */
.btn-quiet { color: var(--dim); border-color: var(--hush); background: transparent; }
.btn-quiet:hover { color: var(--ink-2); }
.btn-arm { color: var(--red-ink, #e07a6f); border-color: #4a2521;
  background: rgba(120,40,34,.14); }

/* The switch that spends money, beside the button that spends it. */
.file-auto { display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 11px; color: var(--dim); line-height: 1.45; }
.file-auto input { accent-color: var(--teal); width: 15px; height: 15px; flex: 0 0 auto; }

/* What else this encounter can produce, under the buttons that produce it. */
.letter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  flex: 1 1 100%; padding-top: 4px; }

/* The registration number on the strip: a glance on hover, the folder on a tap. */
.patient-mrn { font-size: 10px; letter-spacing: .06em; color: var(--teal);
  flex: 0 0 auto; padding: 2px 5px; border-radius: 4px;
  border: 1px solid transparent; }
.patient-mrn:hover, .patient-mrn:focus-visible { border-color: var(--hush);
  background: rgba(79,214,200,.07); }


/* the drawer a section chip opens */
.sect-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sect-open { font-size: 10.5px; letter-spacing: .06em; padding: 5px 9px;
  border: 1px solid var(--faint); border-radius: 6px; background: var(--panel, #071214);
  color: var(--teal-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sect-open:active { transform: scale(.97); filter: brightness(1.25); }
.sect-open:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* THE RECORDINGS DRAWER, FULL WIDTH, UNDER THE BAR.
   It used to be `.sect-drawer`, a flex line inside the chip's own wrap --
   which sits inside a strip that scrolls sideways, so on a 390px phone the
   transcript and its buttons rendered in a 160px column. Out here it has the
   width of the screen, which is what a transcript needs and what makes "shows
   all recording" mean anything on the device he carries. */
.cap-drawer {
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(4,9,10,0.82);
  max-height: 46vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cap-drawer[hidden] { display: none; }
.cap-drawer-h {
  font-size: 9px; letter-spacing: 0.18em; color: var(--dimmer);
  padding-bottom: 8px;
}
/* THE DOOR TO EVERY RECORDING. Pinned beside the paperclip rather than left
   among the section chips, so it never scrolls off the edge of the phone. */
.sect-all {
  flex: 0 0 auto; min-height: 38px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(79,214,200,0.34); background: rgba(79,214,200,0.07);
  color: var(--teal); font-size: 11px; letter-spacing: .06em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sect-all:active { transform: scale(.97); filter: brightness(1.25); }
.sect-all:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── the review, on the console (6 September) ─────────────────────────── */
.review { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid rgba(79,214,200,0.34);
  border-radius: 8px; background: rgba(79,214,200,0.06); }
.review-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-bottom: 8px; }
.review-t { font-weight: 600; color: var(--teal); }
.review-red { font-size: 11px; color: var(--amber); }
.review-row { display: flex; flex-wrap: wrap; gap: 8px; }
.review-frame { margin-top: 10px; }
.review-pdf { width: 100%; height: 70vh; border: 1px solid var(--faint); border-radius: 6px; background: #fff; }
.btn-danger { border-color: rgba(230,110,90,0.5); color: var(--red); }

/* ── the points the model flagged (commit 6) ──────────────────────────── */
.points { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--faint); border-radius: 8px; }
.points-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-bottom: 8px; }
.points-t { font-weight: 600; }
.points-n { font-size: 11px; color: var(--dim); }
.pt { padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.pt:first-of-type { border-top: 0; }
.pt-settled { opacity: 0.55; }
.pt-head { display: flex; gap: 8px; align-items: baseline; }
.pt-n { color: var(--dim); font-size: 11px; }
.pt-kind { font-size: 10px; letter-spacing: 0.06em; color: var(--red); }
.pt-offer .pt-kind { color: var(--teal); }
.pt-stop .pt-kind { color: var(--amber); }
.pt-was, .pt-mark { font-size: 10px; letter-spacing: 0.06em; color: var(--dim); }
.pt-text { margin: 3px 0; }
.pt-heard { font-size: 11.5px; margin: 2px 0; }
.pt-quote { color: var(--teal-2); }
.pt-heard-note { color: var(--dim); font-size: 10.5px; margin-left: 6px; }
.pt-sug { font-size: 12px; margin: 3px 0; }
.pt-sug-l { color: var(--dim); font-size: 10px; letter-spacing: 0.06em; margin-right: 6px; }
.pt-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pt-acts .btn.on { border-color: var(--teal); color: var(--teal); }
.pt-apply { margin-top: 10px; }
.pt-unc { font-size: 11.5px; margin-top: 3px; }

/* ── his own words on a point (commit 7) ──────────────────────────────── */
.say { margin-top: 10px; padding: 9px 10px; border: 1px solid rgba(230,180,90,0.4);
  border-radius: 7px; background: rgba(230,180,90,0.05); }
.say-t { font-weight: 600; color: var(--amber); margin-bottom: 5px; }
.say-q { font-size: 12px; margin: 2px 0; }
.say-box { width: 100%; margin: 7px 0; padding: 7px 8px; border-radius: 6px;
  border: 1px solid var(--faint); background: transparent; color: inherit;
  font: inherit; resize: vertical; }

/* -- the close (commit 8) -------------------------------------------- */
.close { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--faint); border-radius: 8px; }
.close-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.close-t { font-weight: 600; }
.close-n { font-size: 11px; color: var(--amber); }
.close-rows { display: flex; flex-direction: column; gap: 7px; }
.close-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.close-why { font-size: 11.5px; color: var(--dim); }
.close-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.close-date { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--faint);
  background: transparent; color: inherit; font: inherit; }

/* -- the waiting room (commit 9) --------------------------------------- */
.room { padding: 10px 14px; border-bottom: 1px solid var(--faint); }
.money { padding: 10px 14px; border-bottom: 1px solid var(--faint); }
.mn-title { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.mn-t { font-weight: 600; }
.mn-n { font-size: 11px; color: var(--dim); }
.mn-latest { font-size: 10px; color: var(--amber); text-transform: uppercase; letter-spacing: .08em; }
.mn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.mn-row:first-of-type { border-top: 0; }
.mn-l { flex: 1 1 auto; }
.mn-a { font-weight: 600; }
.mn-to { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.mn-vr { font-size: 10px; color: var(--amber); }
.mn-void .mn-l, .mn-void .mn-a { text-decoration: line-through; color: var(--faint); }
.mn-sum { display: flex; gap: 10px; align-items: baseline; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--faint); }
.mn-sum-k { font-weight: 600; flex: 1 1 auto; }
.mn-sum-v { font-weight: 600; }
.mn-sum-n { font-size: 11px; color: var(--dim); }
.wr-title { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.wr-t { font-weight: 600; }
.wr-n { font-size: 11px; color: var(--dim); }
.wr-row { padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.wr-row:first-of-type { border-top: 0; }
.wr-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.wr-who { font-weight: 600; }
.wr-lamp { font-size: 10px; }
.wr-lamp-green { color: var(--teal); }
.wr-lamp-red { color: var(--red); }
.wr-why { font-size: 12px; color: var(--dim); }
.wr-wait { font-size: 11px; color: var(--faint); margin-left: auto; }
.wr-note { font-size: 11.5px; margin-top: 2px; }
.wr-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.wr-type { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--faint);
  background: transparent; color: inherit; font: inherit; }

/* -- the walk-in (commit 10) ------------------------------------------- */
.wr-new { margin-top: 10px; }
.wr-new-t { cursor: pointer; font-size: 12px; color: var(--teal-2); }
.wr-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.wr-in { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--faint);
  background: transparent; color: inherit; font: inherit; min-width: 90px; }

/* -- putting one down (commit 11) -------------------------------------- */
.wr-down { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }

/* -- what is on: the day, the week, the month, the year (commit 12) ----- */
.day { padding: 10px 14px; border-bottom: 1px solid var(--faint); }
.dy-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dy-bar .is-on { color: var(--teal); border-color: var(--line); }
.dy-sum { font-size: 11.5px; color: var(--dim); margin: 6px 0 2px; }
.dy-why { font-size: 11px; color: var(--dimmer); margin-bottom: 4px; }
.dy-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.dy-day { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 6px; }
.dy-day:first-child { border-top: 0; }
.dy-today .dy-date { color: var(--teal); }
.dy-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.dy-date { font-weight: 600; font-size: 12.5px; }
.dy-away { font-size: 11px; color: var(--amber); }
.dy-call { font-size: 11px; color: var(--teal-2); }
.dy-count { font-size: 11px; color: var(--faint); margin-left: auto; }
.dy-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline;
  font-size: 12px; padding: 2px 0 2px 4px; }
.dy-at { font-size: 11px; color: var(--dim); min-width: 38px; }
.dy-icon { font-size: 11px; }
.dy-who { font-weight: 600; }
.dy-what { color: var(--dim); }
.dy-note { color: var(--dimmer); font-size: 11px; }
.dy-clip { font-size: 11px; color: var(--dimmer); }
.dy-more, .dy-empty { font-size: 11px; color: var(--dimmer); padding-left: 4px; }
/* A month of counts, and a year of twelve figures. */
.dy-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px; margin-top: 8px; }
.dy-month { display: flex; gap: 6px; align-items: baseline;
  border: 1px solid var(--hush); border-radius: var(--r); padding: 6px 8px; }

/* -- one patient's folder, read (commit 13) ---------------------------- */
.folder { padding: 10px 14px; border-bottom: 1px solid var(--faint); }
.fo-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.fo-who { font-weight: 600; }
.fo-mrn { font-size: 11px; color: var(--dim); }
.fo-allergy { font-size: 11px; color: var(--amber); }
.fo-allergy.is-known { color: var(--red-ink); }
.fo-test { font-size: 11px; color: var(--amber); }
.fo-bar .btn { margin-left: auto; }
.fo-h { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dimmer); margin: 10px 0 4px; }
.fo-fields { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.fo-f { display: contents; }
.fo-k { font-size: 11.5px; color: var(--dim); }
.fo-v { font-size: 12px; }
.fo-encs { display: flex; flex-direction: column; gap: 2px; }
.fo-enc { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.fo-enc-r { font-size: 11px; color: var(--dimmer); margin-left: auto; }
.fo-more, .fo-none { font-size: 11px; color: var(--dimmer); }
.fo-not { font-size: 10.5px; color: var(--dimmer); line-height: 1.45;
  padding-top: 6px; border-top: 1px solid var(--hush); margin-top: 8px; }

/* -- amending the note under review (commit 14) ------------------------ */
.ed { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hush); }
.ed-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-row .is-on { color: var(--teal); border-color: var(--line); }
.ed-on { font-size: 11.5px; color: var(--dim); margin: 6px 0 4px; }
.ed-box { width: 100%; box-sizing: border-box; padding: 7px 9px; border-radius: var(--r);
  border: 1px solid var(--faint); background: transparent; color: inherit;
  font: inherit; font-size: 12.5px; resize: vertical; }
.ed-note { font-size: 10.5px; color: var(--dimmer); margin-top: 4px; }

/* -- the three tags behind the chart (commit 15) ----------------------- */
.fo-ms { display: flex; flex-direction: column; gap: 2px; }
.fo-m { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12px; }
.fo-m-n { font-weight: 600; min-width: 90px; }
.fo-m-off { font-size: 11px; color: var(--red-ink); }
.fo-m.is-off .fo-m-v { color: var(--red-ink); }
.fo-m-un { font-size: 10.5px; color: var(--amber); }
.fo-m-w { font-size: 11px; color: var(--dimmer); margin-left: auto; }
.fo-m-t { font-size: 11px; color: var(--dim); padding: 0 0 3px 8px; }
.fo-enc.is-gone .fo-enc-l { text-decoration: line-through; color: var(--dimmer); }

/* -- correcting one field, read back first (commit 16) ----------------- */
.fo-fix { margin: 6px 0 8px; padding: 8px; border: 1px solid var(--faint);
  border-radius: var(--r); display: flex; flex-direction: column; gap: 6px; }
.fo-fix-h { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dim); }
.fo-fix-in { padding: 7px 9px; border-radius: 6px; border: 1px solid var(--faint);
  background: transparent; color: inherit; font: inherit; font-size: 12.5px; }
.fo-fix-note { font-size: 10.5px; color: var(--dimmer); }
.fo-fix-back { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  font-size: 12px; padding: 6px 0; border-top: 1px solid var(--hush); }
.fo-fix-was { color: var(--dimmer); text-decoration: line-through; }
.fo-fix-arrow { color: var(--dim); }
.fo-fix-now { color: var(--teal); font-weight: 600; }
.fo-fix-acts { display: flex; gap: 6px; flex-wrap: wrap; }
button.fo-v { background: transparent; border: 0; color: inherit; font: inherit;
  font-size: 12px; text-align: left; padding: 0; cursor: pointer; }
button.fo-v:hover { color: var(--teal-2); }
/* The front screen — the console's landing page (mirrors the bot's first screen). */
.home { padding: 18px 16px 24px; }
.home-title { display: flex; gap: 10px; align-items: baseline; margin-bottom: 16px; }
.home-t { font-weight: 600; font-size: 18px; }
.home-sub { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .12em; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.home-key { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px 14px 12px; border: 1px solid var(--faint); border-radius: 10px;
  background: var(--panel); color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s; min-height: 74px; }
.home-key:hover { border-color: var(--teal-2); background: rgba(79,214,200,0.06); }
.home-key:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.home-key-lab { font-weight: 600; font-size: 15px; }
.home-key-hint { font-size: 11.5px; color: var(--dim); line-height: 1.4; }
.home-key-away { cursor: default; opacity: .62; }
.home-key-away:hover { border-color: var(--faint); background: var(--panel); }
.home-key-tag { font-size: 9px; letter-spacing: .1em; color: var(--amber); margin-top: 2px; }
#homebar { padding: 8px 16px; border-bottom: 1px solid var(--faint); }
#homebtn { font-size: 13px; padding: 6px 14px; }
.home-resume { display: flex; align-items: baseline; gap: 12px; width: 100%;
  margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--teal); border-radius: 10px;
  background: rgba(79,214,200,0.10); color: var(--ink); cursor: pointer; text-align: left;
  transition: background .12s; }
.home-resume:hover { background: rgba(79,214,200,0.18); }
.home-resume:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.home-resume-lab { font-weight: 600; font-size: 15px; color: var(--teal); }
.home-resume-who { font-size: 13px; color: var(--ink-2); }

/* Front screen, clustered by clinic day. */
.home-cluster { margin-bottom: 18px; }
.home-cluster-h { display: flex; gap: 10px; align-items: baseline; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--hush); }
.home-cluster-t { font-weight: 600; font-size: 13.5px; color: var(--ink); letter-spacing: .01em; }
.home-cluster-note { font-size: 10.5px; color: var(--dimmer); }
.home-cluster .home-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.home-cluster .home-key { min-height: 0; padding: 11px 12px; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.home-cluster .home-key-lab { font-size: 13.5px; }
.home-dial-btn { margin-left: auto; font-size: 12px; padding: 5px 12px; border: 1px solid var(--teal); border-radius: 6px; color: var(--teal); background: transparent; cursor: pointer; }
.home-dial-btn:hover { background: rgba(79,214,200,0.10); }

/* THE PHONE'S SIX PLACES (home.js). One place is shown at a time and the foot
   switches between them, so a thumb reaches every part of the clinic without a
   thirty-two-button scroll. Offered below 900px only -- the desktop keeps the
   whole day down the page, which is what its room is for. */
.home-places { display: block; }
/* Room for the foot bar, so the last row of a place is never under it. */
.home { padding-bottom: 84px; }
/* FIXED, NOT STICKY, and that is a defect found by looking at it. `sticky;
   bottom: 0` only pins once the content is tall enough to scroll, so a place
   holding four buttons left the bar floating in the middle of the screen with
   dead space beneath it -- the one position a thumb bar must never be in.
   Fixed puts it at the foot whatever the place holds. Safe here because the
   only other fixed control, #homebar, is hidden on the home screen (app.js),
   and the capture strip and foot rule belong to the encounter view. */
.home-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--panel); border-top: 1px solid var(--hush);
}
.home-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px 6px; min-height: 52px;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--dim); cursor: pointer; font: inherit;
}
.home-tab:active { background: rgba(79,214,200,0.10); }
.home-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.home-tab-icon { font-size: 17px; line-height: 1; }
.home-tab-lab { font-size: 10.5px; letter-spacing: .02em; }
.home-tab-on { color: var(--teal); background: rgba(79,214,200,0.09); }
.home-tab-on .home-tab-lab { font-weight: 600; }

/* The desktop keeps the list and never draws a foot bar. */
@media (min-width: 900px) {
  .home { padding-bottom: 24px; }
  .home-tabs { display: none; }
}
/* wider real estate: more columns on a desktop, tighter rhythm */
@media (min-width: 900px) {
  .home { max-width: 1100px; margin: 0 auto; }
  .home-cluster .home-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
/* -- the cabinet's photographs (commit 17) ----------------------------- */
.fo-films { display: flex; flex-direction: column; gap: 6px; }
.fo-film { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.fo-film-b { font-size: 11.5px; text-align: left; }
.fo-film-n { font-size: 11.5px; color: var(--dimmer); }
.fo-film.is-gone .fo-film-n { text-decoration: line-through; }
.fo-film-x { font-size: 10.5px; color: var(--amber); }
.fo-film-img { max-width: 100%; border-radius: var(--r);
  border: 1px solid var(--hush); }

/* ── Stage 2: the desktop full-screen dial view ──────────────────────── */
.dial-view { min-height: 100vh; padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.dl-top { display: flex; align-items: baseline; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--faint); }
.dl-who { display: flex; gap: 12px; align-items: baseline; flex: 1 1 auto; flex-wrap: wrap; }
.dl-who-name { font-weight: 600; font-size: 18px; }
.dl-who-line { font-size: 12px; color: var(--dim); }
.dl-allergy { font-size: 10.5px; color: var(--red-ink); border: 1px solid #4a2521; padding: 2px 8px; border-radius: 4px; background: rgba(224,90,74,.07); }
.dl-close { font-size: 12px; padding: 6px 12px; border: 1px solid var(--faint); border-radius: 6px; color: var(--dim); background: transparent; cursor: pointer; white-space: nowrap; }
.dl-close:hover { border-color: var(--teal-2); color: var(--teal-2); }
.dl-grid { flex: 1 1 auto; display: grid; grid-template-columns: 300px 1fr 340px; gap: 12px; min-height: 0; }
.dl-left, .dl-right { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.dl-centre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.dl-corner { border: 1px solid var(--faint); border-radius: 10px; background: var(--panel); padding: 12px 14px; overflow: auto; flex: 1 1 0; min-height: 0; }
.dl-corner-h { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--hush); }
.dl-corner-t { font-weight: 600; font-size: 13px; }
.dl-corner-sub { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.dl-corner-body { display: flex; flex-direction: column; gap: 2px; }
.dl-wr-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.05); }
.dl-wr-row:first-child { border-top: 0; }
.dl-wr-who { font-size: 12.5px; font-weight: 500; }
.dl-wr-who::before { content: '\25cf'; font-size: 8px; margin-right: 6px; color: var(--dimmer); vertical-align: middle; }
.dl-lamp-green .dl-wr-who::before { color: var(--teal); }
.dl-lamp-amber .dl-wr-who::before { color: var(--amber); }
.dl-lamp-red .dl-wr-who::before { color: var(--red); }
.dl-wr-wait { font-size: 11px; color: var(--dim); }
.dl-dial { position: relative; width: 300px; height: 300px; }
.dl-dial-svg { width: 100%; height: 100%; display: block; }
.dl-hex-outer { fill: var(--panel); stroke: var(--faint); stroke-width: 1; }
.dl-ring { fill: none; stroke: var(--hush); stroke-width: 1; stroke-dasharray: 2 7; }
.dl-hex-inner { fill: rgba(79,214,200,.05); stroke: var(--teal); stroke-width: 1.5; }
.dl-needle { stroke: var(--amber); stroke-width: 2; stroke-linecap: round; }
.dl-hub { fill: var(--amber); }
.dl-dial-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dl-dial-t { font-weight: 600; font-size: 15px; color: var(--ink); }
.dl-dial-sub { font-size: 11px; color: var(--teal-2); margin-top: 4px; }
.dl-rec { width: 100%; max-width: 540px; text-align: center; padding: 12px; border: 1px solid var(--faint); border-radius: 8px; background: var(--panel); }
.dl-rec-t { font-size: 10.5px; color: var(--dim); letter-spacing: .06em; }
.dl-note-t { font-weight: 600; font-size: 13.5px; margin-bottom: 5px; color: var(--ink); }
.dl-list-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.05); }
.dl-list-row:first-child { border-top: 0; }
.dl-list-code { font-size: 11.5px; color: var(--dim); min-width: 58px; }
.dl-list-name { font-size: 12.5px; }
.dl-list-row.on .dl-list-code, .dl-list-row.on .dl-list-name { color: var(--teal); }
@media (max-width: 899px) { .dl-grid { grid-template-columns: 1fr; } .dl-centre { order: -1; } .dl-dial { width: 240px; height: 240px; } }

/* -- the theatre list (commit 18) -------------------------------------- */
.preclerk { padding: 10px 14px; border-bottom: 1px solid var(--faint); }
.pc-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.pc-t { font-weight: 600; }
.pc-n { font-size: 11px; color: var(--dim); }
.pc-row { padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.pc-row:first-of-type { border-top: 0; }
.pc-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12px; }
.pc-who { font-weight: 600; background: transparent; border: 0; color: inherit;
  font: inherit; font-weight: 600; padding: 0; cursor: pointer; }
.pc-who:hover { color: var(--teal-2); }
.pc-for { color: var(--dim); }
.pc-when { font-size: 11px; color: var(--ink-2); }
.pc-near { font-size: 11px; color: var(--dimmer); }
.pc-prog { font-size: 11px; color: var(--dimmer); margin-left: auto; }
.pc-prog.is-open { color: var(--amber); }
.pc-list { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 0 4px; }
.pc-task { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.pc-tick { background: transparent; border: 0; color: var(--dim); font-size: 14px;
  cursor: pointer; padding: 0; line-height: 1; }
.pc-tick.is-done { color: var(--teal); }
.pc-task-t.is-done { color: var(--dimmer); }
.pc-task-by { font-size: 10.5px; color: var(--dimmer); margin-left: auto; }
.pc-earlier { font-size: 10.5px; color: var(--dimmer); margin-top: 6px; }
.pc-earlier-l { font-size: 10.5px; color: var(--dimmer); padding-left: 8px; }
.pc-none { font-size: 11px; color: var(--dimmer); }
/* ── Stage 2b: the dial turns ────────────────────────────────────────── */
.dl-needle { transition: all .32s cubic-bezier(.34,1.4,.5,1); opacity: .35; }
.dl-needle.on { opacity: 1; }
.dl-mark { cursor: pointer; }
.dl-mark-dot { fill: var(--panel); stroke: var(--faint); stroke-width: 1.5; transition: fill .15s, stroke .15s; }
.dl-mark-n { fill: var(--dim); font-size: 11px; font-family: var(--mono, ui-monospace, monospace); pointer-events: none; }
.dl-mark:hover .dl-mark-dot { stroke: var(--teal-2); }
.dl-mark:focus-visible { outline: none; }
.dl-mark:focus-visible .dl-mark-dot { stroke: var(--teal); stroke-width: 2; }
.dl-mark.on .dl-mark-dot { fill: var(--teal); stroke: var(--teal); }
.dl-mark.on .dl-mark-n { fill: #04120f; font-weight: 600; }
.dl-list-row { width: 100%; background: transparent; border: 0; text-align: left; cursor: pointer; border-top: 1px solid rgba(255,255,255,.05); }
.dl-list-row:first-child { border-top: 0; }
.dl-list-row:hover { background: rgba(79,214,200,.06); }
.dl-list-row:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }
.dl-list-n { font-size: 10.5px; color: var(--dimmer); min-width: 14px; }
.dl-list-row.on .dl-list-n { color: var(--teal); }

/* ── Stage 5: Patient status — pain trend, body map, readings ────────── */
.dl-pain-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.dl-pain-v { font-size: 22px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dl-pain-n { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.dl-spark { width: 100%; height: 46px; display: block; margin-bottom: 4px; }
.dl-spark-area { fill: rgba(79,214,200,.10); stroke: none; }
.dl-spark-line { fill: none; stroke: var(--teal); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dl-spark-dot { fill: var(--teal); }
.dl-bodymap { margin: 8px 0; max-height: 230px; overflow: hidden; }
.dl-reads { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.dl-read { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.05); }
.dl-read:first-child { border-top: 0; }
.dl-read-n { font-size: 12px; color: var(--ink-2); }
.dl-read-v { font-size: 12px; font-weight: 600; }
.dl-read.ab .dl-read-v { color: var(--amber); }

/* ── Stage 6: the recording foot — waveform + running transcript ──────── */
.dl-rec { width: 100%; max-width: 560px; padding: 12px 14px; border: 1px solid var(--faint); border-radius: 8px; background: var(--panel); }
.dl-rec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dl-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dimmer); flex: none; }
.dl-rec-dot.live { background: var(--red); box-shadow: 0 0 0 3px rgba(224,90,74,.18); animation: dl-pulse 1.4s infinite; }
@keyframes dl-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.dl-rec-clock { font-size: 12px; color: var(--amber-ink); letter-spacing: .06em; }
.dl-rec-n { font-size: 10.5px; color: var(--dim); margin-left: auto; }
.dl-wave { width: 100%; height: 40px; display: block; }
.dl-wave-bar { fill: var(--amber); opacity: .5; }
.dl-transcript { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 132px; overflow: auto; text-align: left; }
.dl-tr-line { display: flex; flex-direction: column; gap: 2px; }
.dl-tr-line.on .dl-tr-text { color: var(--ink); }
.dl-tr-src { font-size: 9.5px; color: var(--dimmer); letter-spacing: .08em; text-transform: uppercase; }
.dl-tr-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.dl-takes { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.dl-take { display: flex; justify-content: space-between; padding: 3px 0; }
.dl-take.on .dl-take-src { color: var(--teal); }
.dl-take-src { font-size: 11px; color: var(--dim); }
.dl-take-meta { font-size: 10.5px; color: var(--dimmer); }

/* Stage 7: the dial's save status */
.dl-dial-status { font-size: 10px; margin-top: 4px; min-height: 12px; letter-spacing: .04em; }
.dl-dial-status.save { color: var(--dim); }
.dl-dial-status.ok { color: var(--teal); }
.dl-dial-status.no { color: var(--red-ink); }

/* ── Stage 8: the foot band — From the desk, and Your list ───────────── */
.dl-band { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dl-band .dl-corner { flex: none; max-height: 200px; }
.dl-desk-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; border-top: 1px solid var(--hush); }
.dl-desk-line:first-child { border-top: 0; }
.dl-desk-k { font-size: 12.5px; color: var(--ink); }
.dl-desk-v { font-size: 12px; color: var(--dim); text-align: right; }
.dl-task { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-top: 1px solid var(--hush); }
.dl-task:first-child { border-top: 0; }
.dl-task-mark { width: 13px; text-align: center; color: var(--faint); font-size: 12px; flex: 0 0 auto; }
.dl-task.done .dl-task-mark { color: var(--teal); }
.dl-task.done .dl-task-who { color: var(--dim); }
.dl-task-at { font-size: 11px; color: var(--dim); min-width: 44px; flex: 0 0 auto; }
.dl-task-who { font-size: 12.5px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-task.mine { background: var(--hush); border-radius: 6px; margin: 0 -6px; padding: 4px 6px; border-top-color: transparent; }
.dl-task.mine .dl-task-who { font-weight: 600; color: var(--teal); }
@media (max-width: 899px) { .dl-band { grid-template-columns: 1fr; } }

/* ── Stage 9: checking in — the picker that chooses nothing ──────────── */
.checkin { padding: 10px 14px; }
.ci-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.ci-t { font-weight: 600; }
.ci-where { font-size: 11px; color: var(--dim); margin-left: auto; }
.ci-list { display: flex; flex-direction: column; gap: 4px; }
.ci-row { width: 100%; display: flex; align-items: baseline; gap: 10px;
  text-align: left; padding: 9px 10px; border: 1px solid var(--faint);
  border-radius: 8px; background: var(--panel); color: inherit; font: inherit;
  cursor: pointer; }
.ci-row:hover { border-color: var(--teal-2); }
.ci-row:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }
/* THE ASKING STATE IS THE SECOND TAP, and it is the only row that changes:
   nothing is ever painted as chosen before he has chosen it. */
.ci-row.is-asking { border-color: var(--amber); }
.ci-row-main { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.ci-name { font-size: 13px; font-weight: 600; }
.ci-kind { font-size: 10.5px; color: var(--dimmer); text-transform: uppercase;
  letter-spacing: .06em; }
.ci-why { font-size: 11px; color: var(--dim); margin-left: auto; }
.ci-confirm { font-size: 11px; color: var(--amber-ink); margin-left: auto; }
.ci-status { font-size: 11px; margin-top: 8px; min-height: 14px;
  letter-spacing: .04em; }
.ci-status.busy { color: var(--dim); }
.ci-status.ask { color: var(--amber-ink); }
.ci-status.ok { color: var(--teal); }
.ci-status.no { color: var(--red-ink); }
.ci-none { font-size: 12px; color: var(--dim); padding: 6px 0; }

/* LISTING FOR AN OPERATION (commit 19). One block, two homes: under the
   chart on a folder, and under a row on the theatre list. The read-back is
   the only part that changes colour, because it is the only part that is
   about to cost something. */
.fo-pre, .pc-listing { margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06); }
.li-head { display: flex; gap: 10px; align-items: baseline; }
.li-t { font-weight: 600; font-size: 12px; }
.li-when { font-size: 11px; color: var(--ink-2); margin-left: auto; }
.li-for { font-size: 12px; color: var(--dim); margin-top: 2px; }
.li-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.li-in { flex: 1 1 180px; min-width: 0; padding: 7px 9px; font: inherit;
  font-size: 12px; color: inherit; background: var(--panel);
  border: 1px solid var(--faint); border-radius: 8px; }
.li-in-d { flex: 0 1 140px; }
.li-in:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }
.li-note { font-size: 10.5px; color: var(--dimmer); margin-top: 6px; }
.li-back { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--faint);
  border-radius: 8px; background: var(--panel); }
.li-was { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  font-size: 12px; padding: 2px 0; }
.li-was-l { font-size: 10.5px; color: var(--dimmer); flex: 0 0 96px; }
.li-was-a { color: var(--dim); text-decoration: line-through; }
.li-was-x { color: var(--dimmer); }
.li-was-b { font-weight: 600; }
.li-was-r { font-size: 10.5px; color: var(--dimmer); margin-left: auto; }
/* WHAT CONFIRMING COSTS. Amber, and never the same row as an ordinary
   change: re-listing clears every tick on the checklist. */
.li-warn { font-size: 11px; color: var(--amber-ink); margin-top: 6px; }
.li-btns { display: flex; gap: 6px; margin-top: 8px; }
/* ── Stage 9: the week as a grid — days across, his hours down ────────── */
.weekgrid { padding: 10px 14px; }
.wk-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.wk-t { font-weight: 600; font-size: 13px; }
.wk-grid { display: grid; gap: 1px; background: var(--hush);
  border: 1px solid var(--faint); border-radius: 8px; overflow: auto; }
.wk-corner, .wk-dh, .wk-rh, .wk-cell, .wk-band { background: var(--panel); }
.wk-dh { padding: 6px 4px; text-align: center; }
.wk-dh.is-today { background: rgba(79,214,200,.10); }
.wk-dh-d { display: block; font-size: 11px; color: var(--dim);
  text-transform: uppercase; letter-spacing: .06em; }
.wk-dh-n { display: block; font-size: 14px; font-weight: 600; }
.wk-rh { padding: 4px 6px; font-size: 10.5px; color: var(--dimmer);
  text-align: right; white-space: nowrap; }
.wk-rh.wk-edge { color: var(--amber-ink); }
.wk-cell { min-height: 26px; padding: 2px; display: flex;
  flex-direction: column; gap: 2px; }
/* AN ALL-DAY GROUND, NOT A BLOCK OVER THE APPOINTMENTS. A holiday or a
   leave day still has to show what is booked on it. */
.wk-cell.is-ph { background: rgba(96,150,220,.07); }
.wk-cell.is-leave { background: rgba(150,150,120,.07); }
.wk-band { min-height: 22px; padding: 3px; display: flex;
  flex-wrap: wrap; gap: 3px; align-content: flex-start; }
.wk-chip { font-size: 10px; padding: 1px 5px; border-radius: 999px;
  white-space: nowrap; border: 1px solid transparent; }
.wk-e { font-size: 11px; padding: 2px 4px; border-radius: 4px;
  border-left: 3px solid transparent; display: flex; gap: 4px;
  align-items: baseline; min-width: 0; }
.wk-e-i { flex: 0 0 auto; }
.wk-e-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.wk-e-w { color: var(--dim); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

/* The six, each with a cue that is not its colour. */
.wk-appt { background: rgba(79,214,200,.12); border-left-color: var(--teal); }
.wk-surg { background: rgba(224,168,74,.14); border-left-color: var(--amber); }
.wk-miss { background: rgba(224,90,74,.12); border-left-color: var(--red); }
.wk-miss .wk-e-n { text-decoration: line-through; }
.wk-ph { background: rgba(96,150,220,.16); color: #bcd4f2;
  border-color: rgba(96,150,220,.45); }
.wk-leave { background: rgba(150,150,120,.16); color: #d6d6bd;
  border-color: rgba(150,150,120,.45); }
.wk-call { background: rgba(168,120,214,.16); color: #ddc9f2;
  border-color: rgba(168,120,214,.45); }
/* The clash is loud on purpose: the roster is already asking which stands. */
.wk-clash { background: rgba(224,90,74,.18); color: var(--red-ink);
  border-color: rgba(224,90,74,.5); font-weight: 600; }

.wk-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
  font-size: 10.5px; color: var(--dim); }
.wk-lg { display: inline-flex; gap: 5px; align-items: center; }
.wk-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* Cancelled: struck and dated, below the clinic hours as a reference --
   the slot it held is free again, so it never sits in that cell. */
.wk-cancel { background: rgba(150,150,150,.10);
  border-left-color: var(--dimmer); }
.wk-cancel .wk-e-n { text-decoration: line-through; color: var(--dim); }
.wk-sw.wk-cancel { border: 1px solid var(--dimmer); }
.wk-more { font-size: 11px; color: var(--amber-ink); margin-top: 8px; }
.wk-none { font-size: 12px; color: var(--dim); padding: 8px 0; }
@media (max-width: 899px) { .wk-e-w { display: none; } }

/* THE FORMS PICKER (commit 20). Above "Write the note", because that is the
   moment the question belongs to: what should come out of this encounter,
   decided once the encounter is known rather than before it. */
.fm { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--faint);
  border-radius: 8px; background: var(--panel); }
.fm-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.fm-t { font-weight: 600; font-size: 12px; }
.fm-n { font-size: 10.5px; color: var(--dimmer); margin-left: auto; }
.fm-row { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }
.fm-tick { background: transparent; border: 0; color: var(--dim); font-size: 14px;
  cursor: pointer; padding: 0; line-height: 1; }
.fm-tick.is-on { color: var(--teal); }
.fm-tick:disabled { opacity: .5; cursor: default; }
.fm-name { font-size: 12px; }
.fm-note { font-size: 10.5px; color: var(--dimmer); margin-top: 4px; }

/* FINDING A PATIENT (commit 21). The front door: recent folders, and the
   bot's own search over the practice. A retired holding number is marked
   rather than hidden — it is off the browsable list already, and a
   tombstoned number that looks like a patient is worse than a missing one. */
.patients { padding: 12px 14px; }
.pt-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.pt-t { font-weight: 600; }
.pt-note { font-size: 10.5px; color: var(--dimmer); text-transform: uppercase;
  letter-spacing: .06em; margin-left: auto; }
.pt-form { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pt-in { flex: 1 1 200px; min-width: 0; padding: 7px 9px; font: inherit;
  font-size: 12px; color: inherit; background: var(--panel);
  border: 1px solid var(--faint); border-radius: 8px; }
.pt-in:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }
.pt-list { display: flex; flex-direction: column; }
.pt-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; }
.pt-row:first-child { border-top: 0; }
.pt-who { font-weight: 600; background: transparent; border: 0; color: inherit;
  font: inherit; font-weight: 600; padding: 0; cursor: pointer; }
.pt-who:hover { color: var(--teal-2); }
.pt-key { font-size: 10.5px; color: var(--dimmer); }
.pt-tag { font-size: 10px; color: var(--amber-ink); text-transform: uppercase;
  letter-spacing: .06em; }
.pt-row.is-retired .pt-who { color: var(--dim); }
.pt-n { font-size: 10.5px; color: var(--dimmer); margin-left: auto; }
.pt-when { font-size: 10.5px; color: var(--dimmer); }
.pt-none { font-size: 11.5px; color: var(--dim); padding: 8px 0; line-height: 1.5; }

/* WHAT IS OWED (commit 22). My Tasks, and the defaulters under it — the two
   questions the day ends on. Overdue is the one figure that changes colour,
   because it is the one that means something has to happen today. */
.tasks { padding: 12px 14px; }
.tk-head { display: flex; gap: 10px; align-items: baseline; margin: 10px 0 6px; }
.tk-head:first-child { margin-top: 0; }
.tk-t { font-weight: 600; }
.tk-n { font-size: 10.5px; color: var(--dimmer); margin-left: auto; }
.tk-late { font-size: 11px; color: var(--amber-ink); margin-bottom: 6px; }
.tk-tray { font-size: 11px; color: var(--ink-2); padding: 6px 8px; margin-bottom: 6px;
  border: 1px solid var(--faint); border-radius: 8px; background: var(--panel); }
.tk-group { display: flex; gap: 8px; align-items: baseline; font-size: 11px;
  color: var(--dim); margin: 10px 0 2px; letter-spacing: .02em; }
.tk-g-n { color: var(--dimmer); margin-left: auto; }
.tk-row { display: flex; gap: 8px; align-items: baseline; padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.06); }
.tk-tick { background: transparent; border: 0; color: var(--dim); font-size: 14px;
  cursor: pointer; padding: 0; line-height: 1; flex: 0 0 auto; }
.tk-tick:hover { color: var(--teal); }
.tk-tick:disabled { opacity: .5; cursor: default; }
.tk-body { min-width: 0; flex: 1 1 auto; }
.tk-what { font-size: 12px; }
.tk-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-top: 2px; }
.tk-key { font-size: 10.5px; background: transparent; border: 0; color: var(--dimmer);
  font-family: inherit; padding: 0; cursor: pointer; }
.tk-key:hover { color: var(--teal-2); }
.tk-from, .tk-tag { font-size: 10px; color: var(--dimmer); }
.tk-tag { text-transform: uppercase; letter-spacing: .06em; }
.tk-due { font-size: 10.5px; color: var(--dimmer); }
.tk-due.is-late, .tk-row.is-late .tk-what { color: var(--amber-ink); }
.tk-ns { margin-top: 14px; }
.tk-none { font-size: 11.5px; color: var(--dim); padding: 8px 0; }
/* THE DUTY BOARD (stage 9). Check-in's other half. Appended, never inserted:
   two sessions editing this file at once is how `main` came to ship it with
   conflict markers still in it -- neither `sweep` nor `attribution` parses
   CSS, so a stylesheet a browser cannot read past went green. */
.duty { padding: 10px 12px; }
.du-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.du-t { font-weight: 600; }
.du-board { display: flex; flex-direction: column; gap: 3px;
            padding: 8px 10px; margin-bottom: 10px;
            border: 1px solid var(--line); border-radius: 6px;
            background: var(--panel); }
.du-line { font-size: 12.5px; color: var(--dim); }
/* THE STATE IS NEVER COLOUR ALONE. Each line says what it is in words; the
   colour only agrees with the words. */
.du-doc.is-in { color: var(--teal); font-weight: 600; }
.du-doc.is-away { color: var(--amber-ink); font-weight: 600; }
.du-desk.is-in { color: var(--ink); }
.du-shut { color: var(--red-ink); font-weight: 600; }
.du-list { display: flex; flex-direction: column; gap: 4px; }
.du-act { width: 100%; display: flex; align-items: baseline; gap: 10px;
          padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px;
          background: var(--panel); color: var(--ink); text-align: left;
          font: inherit; cursor: pointer; }
.du-act:hover { border-color: var(--teal-2); }
.du-act:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }
/* THE TWO THAT CANNOT BE UNDONE BY TAPPING AGAIN read differently before
   they are tapped, not only after. */
.du-grave { border-style: dashed; }
.du-grave:hover { border-color: var(--red-ink); }
.du-act.is-asking { border-color: var(--amber); border-style: solid; }
.du-act-l { font-size: 13px; }
.du-act-w { font-size: 10.5px; color: var(--dimmer); text-transform: uppercase;
            letter-spacing: .04em; margin-left: auto; }
.du-act-c { font-size: 11px; color: var(--amber-ink); margin-left: auto; }
.du-status { font-size: 11px; margin-top: 8px; min-height: 14px; }
.du-status.busy { color: var(--dim); }
.du-status.ask { color: var(--amber-ink); }
.du-status.ok { color: var(--teal); }
.du-status.no { color: var(--red-ink); }
.du-none { font-size: 12px; color: var(--dim); padding: 6px 0; }

/* ── Stage 9: Safety Rules (Settings), read-only ─────────────────────── */
.safety { padding: 16px 18px 26px; max-width: 720px; margin: 0 auto; }
.sf-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.sf-title { font-size: 17px; font-weight: 600; color: var(--ink); }
.sf-sub { font-size: 11px; color: var(--dim); }
.sf-body { margin-top: 14px; display: flex; flex-direction: column; gap: 18px; }
.sf-section-h { font-size: 12px; font-weight: 600; color: var(--teal); letter-spacing: .02em; margin-bottom: 8px; }
.sf-rule { display: block; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--faint); border-radius: 9px; padding: 11px 13px; margin-bottom: 7px; cursor: pointer; transition: border-color .12s; }
.sf-rule:hover { border-color: var(--teal); }
.sf-rule.open { border-color: var(--teal); }
.sf-rule-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sf-rule-name { font-size: 13.5px; color: var(--ink); }
.sf-rule-chev { color: var(--dim); font-size: 15px; transition: transform .16s; }
.sf-rule.open .sf-rule-chev { transform: rotate(90deg); color: var(--teal); }
.sf-rule-detail { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--hush); font-size: 12.5px; color: var(--dim); line-height: 1.5; }

/* ── Stage 9: Providers (Team & tasks) — the referral directory, read-only ── */
.providers { padding: 16px 18px 26px; max-width: 760px; margin: 0 auto; }
.pv-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.pv-title { font-size: 17px; font-weight: 600; color: var(--ink); }
.pv-sub { font-size: 11px; color: var(--dim); }
.pv-filter { width: 100%; margin: 12px 0 14px; padding: 9px 12px; font-size: 13px; color: var(--ink); background: var(--panel); border: 1px solid var(--faint); border-radius: 8px; }
.pv-filter:focus { outline: none; border-color: var(--teal); }
.pv-body { display: flex; flex-direction: column; gap: 8px; }
.pv-cat { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background: var(--panel); border: 1px solid var(--faint); border-radius: 8px; padding: 10px 13px; cursor: pointer; }
.pv-cat:hover, .pv-cat.open { border-color: var(--teal); }
.pv-cat-n { font-size: 13px; font-weight: 600; color: var(--ink); }
.pv-cat-c { font-size: 11px; color: var(--dim); }
.pv-list { padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 9px; }
.pv-contact { border-left: 2px solid var(--hush); padding: 3px 0 3px 12px; }
.pv-contact-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pv-name { font-size: 13px; color: var(--ink); font-weight: 500; }
.pv-person { font-size: 12px; color: var(--dim); }
.pv-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; }
.pv-num { font-size: 12.5px; color: var(--teal); }
.pv-reason { font-size: 11.5px; color: var(--amber-ink); margin-top: 3px; }
.pv-panel { font-size: 11px; color: var(--dimmer); margin-top: 3px; }


/* ── Stage 9: Fee Schedule (Money) — the consultation rate card, read-only ── */
.fees { padding: 16px 18px 26px; max-width: 720px; margin: 0 auto; }
.fee-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.fee-title { font-size: 17px; font-weight: 600; color: var(--ink); }
.fee-sub { font-size: 11px; color: var(--dim); }
.fee-body { margin-top: 14px; display: flex; flex-direction: column; gap: 16px; }
.fee-place-h { font-size: 12.5px; font-weight: 600; color: var(--teal); margin-bottom: 4px; }
.fee-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; padding: 6px 0; border-top: 1px solid var(--hush); }
.fee-place .fee-rate:first-of-type { border-top: 0; }
.fee-payor { font-size: 13px; color: var(--ink); flex: 1 1 auto; min-width: 130px; }
.fee-fig { font-size: 12.5px; color: var(--dim); }
.fee-code { font-size: 11px; color: var(--teal); }
.fee-bad { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--amber-ink); border-radius: 8px; background: var(--panel); }
.fee-bad-h { font-size: 12px; color: var(--amber-ink); margin-bottom: 6px; }
.fee-bad-line { font-size: 11.5px; color: var(--dim); padding: 2px 0; }


/* ── Stage 9: National Schemes (Money) — the accreditation status, read-only ── */
.schemes { padding: 16px 18px 26px; max-width: 720px; margin: 0 auto; }
.sc-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.sc-title { font-size: 17px; font-weight: 600; color: var(--ink); }
.sc-sub { font-size: 11px; color: var(--dim); }
.sc-body { margin-top: 14px; display: flex; flex-direction: column; gap: 18px; }
.sc-section-h { font-size: 12px; font-weight: 600; color: var(--teal); margin-bottom: 8px; }
.sc-accred { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.sc-tick { width: 18px; font-size: 13px; text-align: center; }
.sc-accred-n { font-size: 13px; color: var(--dim); }
.sc-accred.held .sc-accred-n { color: var(--ink); }
.sc-act { font-size: 13px; color: var(--ink); }
.sc-blocked { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-top: 1px solid var(--hush); }
.sc-blocked:first-of-type { border-top: 0; }
.sc-blocked-n { font-size: 12.5px; color: var(--ink); }
.sc-blocked-why { font-size: 11.5px; color: var(--dim); }
.sc-nehr-line { font-size: 12.5px; color: var(--dim); padding: 2px 0; }


/* ── Stage 9: Inventory & Charges (Money) — the charge catalogue, read-only ── */
.inventory { padding: 16px 18px 26px; max-width: 760px; margin: 0 auto; }
.inv-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.inv-title { font-size: 17px; font-weight: 600; color: var(--ink); }
.inv-sub { font-size: 11px; color: var(--dim); }
.inv-filter { width: 100%; margin: 12px 0 14px; padding: 9px 12px; font-size: 13px; color: var(--ink); background: var(--panel); border: 1px solid var(--faint); border-radius: 8px; }
.inv-filter:focus { outline: none; border-color: var(--teal); }
.inv-body { display: flex; flex-direction: column; gap: 8px; }
.inv-cat { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background: var(--panel); border: 1px solid var(--faint); border-radius: 8px; padding: 10px 13px; cursor: pointer; }
.inv-cat:hover, .inv-cat.open { border-color: var(--teal); }
.inv-cat-n { font-size: 13px; font-weight: 600; color: var(--ink); }
.inv-cat-c { font-size: 11px; color: var(--dim); }
.inv-list { padding: 4px 2px 8px; display: flex; flex-direction: column; }
.inv-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; padding: 5px 2px; border-top: 1px solid var(--hush); }
.inv-list .inv-item:first-child { border-top: 0; }
.inv-code { font-size: 11px; color: var(--dim); min-width: 74px; }
.inv-name { font-size: 12.5px; color: var(--ink); flex: 1 1 auto; min-width: 120px; }
.inv-price { font-size: 12.5px; color: var(--teal); }
.inv-billto { font-size: 10.5px; color: var(--dimmer); }

/* THE BLANK-FORM LIBRARY (M5). Per-screen prefix, as every other console
   screen uses, so a rule here cannot reach a row on another. */
.pdfforms { padding: 16px 18px 26px; max-width: 720px; margin: 0 auto; }
.pf-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.pf-title { font-size: 17px; font-weight: 600; color: var(--ink); }
.pf-sub { font-size: 11px; color: var(--dim); margin-left: auto; }
.pf-section { margin-top: 14px; }
.pf-section-h { font-size: 12px; font-weight: 600; color: var(--teal);
                letter-spacing: .02em; margin-bottom: 8px; }
.pf-row { padding: 9px 0; border-top: 1px solid var(--hush); }
.pf-row:first-of-type { border-top: 0; }
.pf-row-top { display: flex; align-items: center; gap: 10px; }
.pf-name { flex: 1 1 auto; font-size: 13.5px; color: var(--ink); }
.pf-meta { display: block; font-size: 10.5px; color: var(--dim); margin-top: 2px; }
.pf-frame { margin-top: 8px; }
/* AN IFRAME NEEDS A TITLE -- it is an accessibility requirement, not a
   control, which is the false finding a control audit made against main. */
.pf-frame iframe { width: 100%; height: 70vh; border: 1px solid var(--faint);
                   border-radius: 8px; }

/* ============================================================ the last ten
 *
 * ⚙️ Settings and its four screens, 📨 Requests, 👥 Meeting, 📞 On call,
 * 🌴 Leave and 📚 Guides. Colour is never the only cue on any of them --
 * a finding's severity and a verdict's level both carry their word beside
 * the band, because six categories is past what colour carries and the
 * week grid settled that already.
 */
.settingsview, .doctorinfo, .clinicinfo, .performance, .auditview,
.requestsview, .meetingview, .oncallview, .leaveview, .guidesview {
  padding: 16px 18px 26px; max-width: 760px; margin: 0 auto; }

/* --- ⚙️ Settings, 👨‍⚕️ Doctor, 🏥 Clinic, 📈 Performance, 🔎 Audit --- */
.st-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.st-t { font-size: 17px; font-weight: 600; color: var(--ink); }
.st-sub { font-size: 11px; color: var(--dim); }
.st-section-t { font-size: 12px; font-weight: 600; color: var(--dim);
                text-transform: uppercase; letter-spacing: 0.04em;
                margin: 16px 0 6px; }
.st-menu { display: flex; flex-direction: column; gap: 6px; }
.st-menu-row { display: flex; align-items: center; justify-content: space-between;
               gap: 10px; background: var(--panel); border: 1px solid var(--faint);
               border-radius: 8px; padding: 9px 12px; font-size: 13px;
               color: var(--ink); }
.st-menu-chip { font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.st-card { background: var(--panel); border: 1px solid var(--faint);
           border-radius: 8px; padding: 11px 13px; margin-bottom: 10px; }
.st-card-t { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.st-card-foot { font-size: 10.5px; color: var(--dim); margin-top: 7px; }
.st-field { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.st-field-k { flex: 0 0 40%; font-size: 11.5px; color: var(--dim); }
.st-field-v { font-size: 13px; color: var(--ink); }
.st-status { font-size: 12px; color: var(--dim); margin: 6px 0; }
.st-none { font-size: 12px; color: var(--dim); font-style: italic; padding: 8px 0; }
.st-more { font-size: 11px; color: var(--dim); margin-top: 6px; }
.st-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.st-tab { font-size: 12px; padding: 5px 11px; border-radius: 999px;
          border: 1px solid var(--faint); background: var(--panel);
          color: var(--ink); cursor: pointer; }
.st-tab:hover, .st-tab.on { border-color: var(--teal); color: var(--teal); }
.st-lines { display: flex; flex-direction: column; gap: 3px; }
.st-line { font-size: 13px; color: var(--ink); }
.st-line-gap { height: 7px; }
.st-counts { font-size: 11.5px; color: var(--dim); margin: 8px 0 10px; }
.st-banner { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
             background: var(--panel); border: 1px solid var(--faint);
             border-left: 3px solid var(--teal); border-radius: 8px;
             padding: 9px 12px; margin-bottom: 12px; }
.st-banner-l { font-size: 11.5px; color: var(--dim); }
.st-banner-v { font-size: 13px; font-weight: 600; color: var(--ink); }
.st-banner-sched { font-size: 11px; color: var(--dim); width: 100%; }
/* THE WORD IS IN `.st-verdict-h`, always -- the band repeats it, it does
   not replace it. */
.st-verdict { border-radius: 8px; padding: 10px 13px; margin-bottom: 12px;
              border: 1px solid var(--faint); border-left-width: 3px;
              background: var(--panel); }
.st-verdict-h { font-size: 13px; font-weight: 600; color: var(--ink); }
.st-verdict-serious { border-left-color: var(--red); }
.st-verdict-check { border-left-color: var(--amber); }
.st-verdict-note { border-left-color: var(--teal); }
.st-findings { display: flex; flex-direction: column; gap: 7px; }
.st-finding { border-left: 3px solid var(--hush); padding: 4px 0 4px 11px; }
.st-finding-w { font-size: 11px; color: var(--dim); }
.st-finding-what { font-size: 12.5px; color: var(--ink); }
.st-finding-serious { border-left-color: var(--red); }
.st-finding-check { border-left-color: var(--amber); }
.st-finding-note { border-left-color: var(--teal); }
.st-sims { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.st-sim { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px;
          color: var(--ink); }
.st-sim-mark { flex: 0 0 auto; }
.st-sim-n { color: var(--dim); font-size: 11px; }

/* --- 📨 Requests --- */
.rq-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.rq-title { font-size: 17px; font-weight: 600; color: var(--ink); }
.rq-t { font-size: 13px; font-weight: 600; color: var(--ink); }
.rq-sub { font-size: 11px; color: var(--dim); }
.rq-n { font-size: 11px; color: var(--dim); }
.rq-list { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.rq-row { background: var(--panel); border: 1px solid var(--faint);
          border-radius: 8px; padding: 10px 13px; }
.rq-who { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rq-wants { font-size: 12.5px; color: var(--ink); margin-top: 3px; }
.rq-when { font-size: 11px; color: var(--dim); margin-top: 2px; }
.rq-note { font-size: 11.5px; color: var(--dim); margin-top: 5px; }
.rq-acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.rq-none { font-size: 12px; color: var(--dim); font-style: italic; padding: 10px 0; }

/* --- 👥 Meeting --- */
.mt-title { font-size: 17px; font-weight: 600; color: var(--ink); }
.mt-t { font-size: 13px; font-weight: 600; color: var(--ink); }
.mt-n { font-size: 11px; color: var(--dim); }
.mt-new { background: var(--panel); border: 1px solid var(--faint);
          border-radius: 8px; padding: 11px 13px; margin: 12px 0; }
.mt-new-t { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.mt-form { display: flex; flex-direction: column; gap: 7px; }
.mt-in { width: 100%; padding: 8px 11px; font-size: 13px; color: var(--ink);
         background: var(--bg); border: 1px solid var(--faint); border-radius: 8px; }
.mt-in:focus { outline: none; border-color: var(--teal); }
.mt-case { background: var(--panel); border: 1px solid var(--faint);
           border-radius: 8px; padding: 10px 13px; margin-bottom: 9px; }
.mt-case-head { display: flex; align-items: baseline; justify-content: space-between;
                gap: 10px; }
.mt-case-who { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mt-case-q { font-size: 12.5px; color: var(--ink); margin-top: 3px; }
.mt-rec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
              margin-top: 9px; }
.mt-none { font-size: 12px; color: var(--dim); font-style: italic; padding: 10px 0; }

/* --- 📞 On call, 🌴 Leave, 📚 Guides --- */
.rs-row { padding: 10px 0; border-bottom: 1px solid var(--hush); }
.rs-row:last-child { border-bottom: none; }
.rs-state { font-size: 13px; margin: 2px 0 4px; }
.rs-summary { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }

/* ==================================================== 💊 the mini button
 *
 * Dr Lau, 8 September: a favourite medicine, one tap, under the dictation.
 * PINNED beside the paperclip rather than in the scrolling strip -- see
 * capture.js: the section chips are a thousand pixels of row on a 390px
 * phone, and a control that answers "the drug I just named" cannot live off
 * the right-hand edge.
 */
.meds-btn { flex: 0 0 auto; padding: 5px 9px; font-size: 13px; line-height: 1;
            background: var(--panel); color: var(--ink);
            border: 1px solid var(--faint); border-radius: 999px;
            cursor: pointer; white-space: nowrap; }
.meds-btn:hover, .meds-btn.showing { border-color: var(--teal); }
/* THE COUNT IS ON THE BUTTON, so a note carrying three drugs does not look
   identical to one carrying none without opening anything. */
.meds-btn.on { border-color: var(--teal); color: var(--teal); font-weight: 600; }
.meds-drawer { display: flex; flex-direction: column; gap: 7px; padding: 2px 0 4px; }
.meds-h { font-size: 10px; color: var(--dim); letter-spacing: 0.06em; margin-top: 4px; }
.meds-list { display: flex; flex-direction: column; gap: 5px; }
.med-row { display: flex; align-items: center; gap: 6px; }
.med-chip { flex: 1 1 auto; display: flex; align-items: baseline; gap: 6px;
            text-align: left; padding: 7px 11px; font-size: 13px;
            color: var(--ink); background: var(--panel);
            border: 1px solid var(--faint); border-radius: 8px; cursor: pointer; }
.med-chip:hover { border-color: var(--teal); }
/* ✓ AND NOT COLOUR ALONE. The tick is the cue; the border repeats it. */
.med-chip.on { border-color: var(--teal); color: var(--teal); font-weight: 600; }
.med-chip:disabled { opacity: 0.55; cursor: default; }
.med-star { flex: 0 0 auto; padding: 6px 8px; font-size: 13px; line-height: 1;
            background: none; border: 1px solid transparent; border-radius: 8px;
            cursor: pointer; }
.med-star:hover { border-color: var(--faint); }
.meds-on { display: flex; flex-wrap: wrap; gap: 5px; }
.med-on { font-size: 11.5px; color: var(--teal); background: var(--panel);
          border: 1px solid var(--faint); border-radius: 999px; padding: 3px 9px; }
.meds-find { width: 100%; margin-top: 6px; padding: 7px 11px; font-size: 13px;
             color: var(--ink); background: var(--bg);
             border: 1px solid var(--faint); border-radius: 8px; }
.meds-find:focus { outline: none; border-color: var(--teal); }
.meds-classes { display: flex; flex-wrap: wrap; gap: 5px; }
.meds-class { font-size: 11.5px; color: var(--ink); background: var(--panel);
              border: 1px solid var(--faint); border-radius: 999px;
              padding: 4px 10px; cursor: pointer; }
.meds-class:hover { border-color: var(--teal); }

/* ============================== 🩻 Procedures and 💊 Medicines, as screens
 *
 * The last two front-screen buttons that pointed at nothing. Both are a
 * TICK that feeds the note — nothing here is generated and nothing is
 * delivered — so both read as lists of toggles rather than as forms.
 */
.procedures, .medicines { padding: 16px 18px 26px; max-width: 720px; margin: 0 auto; }

.pr-head, .meds-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.pr-t, .meds-t { font-size: 17px; font-weight: 600; color: var(--ink); }
.pr-sub, .meds-sub { font-size: 11.5px; color: var(--dim); }
.pr-list { display: flex; flex-direction: column; gap: 6px; }
.pr-row { display: flex; align-items: center; gap: 8px; }
.pr-tick { flex: 1 1 auto; text-align: left; padding: 9px 12px; font-size: 13.5px;
           color: var(--ink); background: var(--panel);
           border: 1px solid var(--faint); border-radius: 8px; cursor: pointer; }
.pr-tick:hover { border-color: var(--teal); }
/* ☑️ IS THE CUE; the border repeats it. Colour is never the only signal. */
.pr-tick.on { border-color: var(--teal); color: var(--teal); font-weight: 600; }
.pr-tick:disabled { opacity: 0.55; cursor: default; }
.pr-code { flex: 0 0 auto; font-size: 11px; color: var(--dim); }
.pr-note { font-size: 12px; color: var(--dim); background: var(--panel);
           border: 1px solid var(--faint); border-left: 3px solid var(--amber);
           border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; }
.pr-h { font-size: 10px; color: var(--dim); letter-spacing: 0.06em; margin: 14px 0 5px; }
.pr-others { display: flex; flex-wrap: wrap; gap: 5px; }
.pr-other { font-size: 11.5px; color: var(--teal); background: var(--panel);
            border: 1px solid var(--faint); border-radius: 999px; padding: 3px 9px; }
.pr-count { font-size: 11.5px; color: var(--dim); margin-top: 14px; }

/* The cancelled strip's heading carries the WEEK'S COUNT — a quality
   control indicator, and the only figure on the grid that is a rate rather
   than an event. Dr Lau, 2026-09-09: "a glance to see how many cancellation
   are there per week". */
.wk-rate { display: flex; align-items: baseline; justify-content: space-between;
           gap: 6px; }
.wk-rate-n { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
             background: var(--panel); border: 1px solid var(--faint);
             border-radius: 999px; padding: 0 6px; line-height: 1.5; }