/* 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:        #091418;
  --ink:       #f4fbfa;
  --ink-2:     #d8e8e6;
  --dim:       #c1d5d2;

  --dimmer:    #afc7c3;
  --faint:     #a0bbb7;
  --hush:      #304c51;
  --rule:      #73999b;
  --label:     #d4e8e5;

  --teal:      #72e5d5;
  --teal-2:    #a3e4dc;
  --amber:     #ffd17a;
  --amber-ink: #ffe5b2;
  --red:       #ff9a8d;
  --red-ink:   #ffc7bf;
  --red-solid: #b52b26;

  --line:      #405c62;
  --line-soft: #304c51;
  --panel:     #13282b;
  --panel-2:   #102125;
  --sunk:      #0b1c20;
  --map-numb:  #91bdff;

  color-scheme: dark;

  --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;
  --safe-b: env(safe-area-inset-bottom, 0px);

  --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);
  /* Shared with the front desk: opaque grounds and readable secondary text. */
  --panel-hover: #1b3236;
  --selected-bg: #193b3a;
  --accent-ink: #06221e;
}

* { box-sizing: border-box; }

/* A BUTTON NEVER FALLS BACK TO THE BROWSER'S OWN GREY (24 Sept, "the
   contrast is hard to see"). Under color-scheme: dark Chromium paints an
   unstyled <button> rgb(107,107,107), and a row built as a button that set
   no background of its own -- the day's schedule, the tasks, the Diary
   chip -- drew its teal-grey text on that grey at 2.0:1. :where() weighs
   nothing, so every class that paints a button still wins. */
:where(button) { background-color: transparent; color: inherit; }
/* SELECTED TEXT STAYS READABLE (4 Oct 2026, his report: the patient-ID chip
   went white-on-bright-blue). No ::selection existed anywhere, so a double-click
   or a drag painted the SYSTEM highlight -- blue under white text on this dark
   ground. The theme's own pair instead: --teal under --bg, ~11:1 at night and
   ~5:1 by day (verify_brand_and_selection measures both). */
::selection { background: var(--teal); color: var(--bg); }
/* A LINK WITH NO CLASS of its own was the browser's #0000EE on a near-black
   ground. :where() keeps it at zero specificity: every styled link wins. */
:where(a) { color: var(--teal); }

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); }
.tiny  { font-size: var(--tiny, 11px); }  /* dom.js's tiny(): the size it was given, until the desktop's scale raises it */
.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; }
/* THE S-EMR MARK, drawn ON the wordmark and the front desk's brand (4 Oct 2026).
   The patient (after Leonardo) in the record's circle, linked to the care team
   at a hexagon's points -- app/tools/semr-mark.svg, the small-size drawing.
   Two stencils, so each part takes the THEME's own colour (ink and teal, day
   and night) where a picture would be one colour in both. Pseudo-elements, not
   markup: the phone bar's grid has a "brand" cell for exactly one element, a
   harness reads the wordmark's text, and a click on the mark is a click on the
   wordmark -- the way home. */
.wordmark, .fd-brand { position: relative; padding-left: calc(var(--bm, 20px) + 8px); }
.wordmark { --bm: 20px; }
.fd-brand { --bm: 30px; }
@media (min-width: 1100px) { .wordmark { --bm: 24px; } }  /* beside the 12px kicker */
.wordmark::before, .wordmark::after, .fd-brand::before, .fd-brand::after {
  content: ''; position: absolute; left: 0; top: 50%; width: var(--bm); height: var(--bm);
  transform: translateY(-50%); pointer-events: none;
  -webkit-mask: var(--bm-mask) center / contain no-repeat; mask: var(--bm-mask) center / contain no-repeat; }
.wordmark::before, .fd-brand::before { background: var(--ink);
  --bm-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22 fill=%22none%22%3E%3Cpath d=%22M32 5 L55.38 18.5 V45.5 L32 59 L8.62 45.5 V18.5 Z%22 stroke=%22%23000%22 stroke-width=%223%22 stroke-linejoin=%22round%22%3E%3C/path%3E%3Ccircle cx=%2255.38%22 cy=%2218.5%22 r=%222.6%22 fill=%22%23000%22%3E%3C/circle%3E%3Ccircle cx=%2232%22 cy=%2259%22 r=%222.6%22 fill=%22%23000%22%3E%3C/circle%3E%3Ccircle cx=%228.62%22 cy=%2218.5%22 r=%222.6%22 fill=%22%23000%22%3E%3C/circle%3E%3Cg transform=%22translate(13.308 15.925) scale(0.18692)%22%3E%3Cpath d=%22M 104.80 38.80 C 105.20 41.40 105.40 43.20 106.40 44.60 C 109.00 46.40 113.40 46.80 118.60 47.20 C 120.60 46.60 122.40 46.20 124.40 46.20 C 129.00 45.60 134.60 45.40 140.00 45.60 C 144.00 45.80 147.40 46.00 150.60 45.80 C 155.00 45.40 159.00 45.20 163.00 45.40 C 166.00 45.60 168.60 45.80 171.20 46.00 C 174.00 45.60 176.40 45.40 179.00 45.80 C 181.60 46.20 184.00 46.40 185.00 47.40 C 185.60 48.20 185.00 48.80 183.60 49.00 C 181.80 49.40 180.20 49.60 179.00 50.20 C 177.00 51.20 174.00 50.80 171.20 50.00 C 167.00 50.40 162.40 51.00 157.80 51.80 C 154.60 52.20 151.80 51.60 149.20 51.40 C 145.00 52.00 141.00 52.80 137.40 53.80 C 132.00 55.20 127.40 56.80 123.60 58.80 C 123.80 64.60 122.40 70.40 120.00 75.40 C 117.80 80.20 116.40 85.00 116.80 89.60 C 117.20 94.20 118.60 98.80 118.40 104.00 C 118.20 113.60 116.60 124.60 114.20 134.00 C 113.40 137.40 113.20 140.20 113.60 143.20 C 114.80 151.00 114.00 160.00 110.80 168.00 C 109.40 172.00 108.80 176.00 109.40 179.60 C 111.60 181.00 114.00 182.00 114.40 184.00 C 114.40 185.40 111.00 185.60 104.00 185.40 C 102.20 185.20 101.60 184.00 101.80 181.60 C 102.20 176.00 101.80 170.00 101.40 163.00 C 101.00 156.00 101.60 149.00 102.40 143.00 C 102.80 138.00 102.20 132.00 101.60 126.00 C 101.20 119.00 100.80 112.00 100.00 107.00 L 100.00 107.00 C 99.20 112.00 98.80 119.00 98.40 126.00 C 97.80 132.00 97.20 138.00 97.60 143.00 C 98.40 149.00 99.00 156.00 98.60 163.00 C 98.20 170.00 97.80 176.00 98.20 181.60 C 98.40 184.00 97.80 185.20 96.00 185.40 C 89.00 185.60 85.60 185.40 85.60 184.00 C 86.00 182.00 88.40 181.00 90.60 179.60 C 91.20 176.00 90.60 172.00 89.20 168.00 C 86.00 160.00 85.20 151.00 86.40 143.20 C 86.80 140.20 86.60 137.40 85.80 134.00 C 83.40 124.60 81.80 113.60 81.60 104.00 C 81.40 98.80 82.80 94.20 83.20 89.60 C 83.60 85.00 82.20 80.20 80.00 75.40 C 77.60 70.40 76.20 64.60 76.40 58.80 C 72.60 56.80 68.00 55.20 62.60 53.80 C 59.00 52.80 55.00 52.00 50.80 51.40 C 48.20 51.60 45.40 52.20 42.20 51.80 C 37.60 51.00 33.00 50.40 28.80 50.00 C 26.00 50.80 23.00 51.20 21.00 50.20 C 19.80 49.60 18.20 49.40 16.40 49.00 C 15.00 48.80 14.40 48.20 15.00 47.40 C 16.00 46.40 18.40 46.20 21.00 45.80 C 23.60 45.40 26.00 45.60 28.80 46.00 C 31.40 45.80 34.00 45.60 37.00 45.40 C 41.00 45.20 45.00 45.40 49.40 45.80 C 52.60 46.00 56.00 45.80 60.00 45.60 C 65.40 45.40 71.00 45.60 75.60 46.20 C 77.60 46.20 79.40 46.60 81.40 47.20 C 86.60 46.80 91.00 46.40 93.60 44.60 C 94.60 43.20 94.80 41.40 95.20 38.80 Z%22 fill=%22%23000%22%3E%3C/path%3E%3Cellipse cx=%22100%22 cy=%2228%22 rx=%2210.4%22 ry=%2212.6%22 fill=%22%23000%22%3E%3C/ellipse%3E%3Crect x=%2296%22 y=%2236%22 width=%228%22 height=%2210%22 fill=%22%23000%22%3E%3C/rect%3E%3C/g%3E%3C/svg%3E"); }
.wordmark::after, .fd-brand::after { background: var(--teal);
  --bm-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22 fill=%22none%22%3E%3Cpath d=%22M32 12 L32 5 M49.32 42 L55.38 45.5 M14.68 42 L8.62 45.5%22 stroke=%22%23000%22 stroke-width=%222.6%22 stroke-linecap=%22round%22%3E%3C/path%3E%3Ccircle cx=%2232%22 cy=%225%22 r=%223.4%22 fill=%22%23000%22%3E%3C/circle%3E%3Ccircle cx=%2255.38%22 cy=%2245.5%22 r=%223.4%22 fill=%22%23000%22%3E%3C/circle%3E%3Ccircle cx=%228.62%22 cy=%2245.5%22 r=%223.4%22 fill=%22%23000%22%3E%3C/circle%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%2220%22 stroke=%22%23000%22 stroke-width=%222.4%22%3E%3C/circle%3E%3Cg transform=%22translate(13.308 15.925) scale(0.18692)%22%3E%3C/g%3E%3C/svg%3E"); }

.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: var(--label); }

.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; }
/* NOT ON FILE is not "fine": nobody has asked. Amber, as main's card drew it. */
.pill-unasked { background: rgba(224,164,74,0.08); border-color: rgba(224,164,74,0.45); color: var(--amber-ink); 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; }
/* The check-in route is not a patient chart. If a clinician arrived here
   from an open encounter, remove the registration identity strip and its
   hover card for the duration of this focused action. */
.spine.is-checkin #patient-rule,
.spine.is-checkin #patient-name,
.spine.is-checkin #patient-mrn,
.spine.is-checkin #patient-sub,
.spine.is-checkin #allergy,
.spine.is-checkin #studies,
.spine.is-checkin #patient-card,
.spine.is-registration #patient-rule,
.spine.is-registration #patient-name,
.spine.is-registration #patient-mrn,
.spine.is-registration #patient-sub,
.spine.is-registration #allergy,
.spine.is-registration #studies,
.spine.is-registration #patient-card { display: none !important; }
.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); }

.demo-banner {
  flex: 0 0 auto; padding: 7px 12px;
  border-bottom: 1px solid rgba(224,164,74,.5);
  background: rgba(224,164,74,.14); color: var(--amber-ink);
  font: 700 12px/1.35 var(--mono); letter-spacing: .08em;
  text-align: center;
}
.demo-banner[hidden] { display: none; }

/* ── the encounter workspace ─────────────────────────────────────────────
   One compact, persistent route around the current encounter. It reports
   server state; the destination renderers still own every clinical action. */
.enc-workspace {
  flex: 0 0 auto; min-width: 0;
  display: flex; align-items: stretch; gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(4,9,10,0.88);
}
.enc-workspace[hidden] { display: none; }
.ew-patient {
  width: 190px; min-width: 190px;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 4px 10px 4px 4px;
  border-right: 1px solid var(--line);
}
.ew-kicker { font: 500 11px/1.25 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.ew-name { font-size: 13px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.ew-detail { font: 500 11px/1.35 var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.ew-actions {
  min-width: 0; flex: 1 1 auto;
  display: grid; grid-template-columns: repeat(8, minmax(96px, 1fr)); gap: 6px;
}
.ew-action {
  min-width: 0; min-height: var(--tap);
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-family: var(--display); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ew-action.is-review { border-color: rgba(79,214,200,.45); background: rgba(79,214,200,.12); }
.ew-action:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.ew-action:active { transform: translateY(1px); }
.ew-action[disabled] { opacity: .7; cursor: default; }   /* its state line says WHY it is off, so it must still be read */
.ew-icon { width: 18px; flex: 0 0 auto; text-align: center; font-size: 15px; color: var(--teal); }
.ew-words { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ew-label { font-size: 12px; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
.ew-state { font: 500 11px/1.3 var(--mono); color: var(--dim); overflow-wrap: anywhere; }

@media (max-width: 1399px) {
  .ew-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .enc-workspace { flex-direction: column; padding: 6px 7px; gap: 6px; }
  .ew-patient { width: 100%; min-width: 0; padding: 2px 4px 6px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ew-action { min-width: 0; padding: 6px; }
  .ew-icon { display: none; }
}

.load-failed {
  width: min(440px, 100%); margin: 24px auto; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid rgba(224,90,74,.42); border-radius: var(--r-l);
  background: var(--panel);
}
.load-failed-t { font-size: 17px; font-weight: 600; color: var(--red-ink); }
.load-failed-s { font: 500 11px/1.5 var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.load-failed-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.load-failed-actions .btn { flex: 1 1 160px; }

/* ── 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: var(--label);
}
.sec-head .right { margin-left: auto; color: var(--faint); }
.sec-note { font-size: 11px; color: var(--dimmer); line-height: 1.5; padding-bottom: 10px; }
/* the visit before this one, on a follow-up (W2.10): read, never edited */
.precis { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--rule); }
.precis-h { font-weight: 600; color: var(--label); margin-bottom: 6px; }
.precis-row { margin-bottom: 6px; }
.precis-k { color: var(--dimmer); }
.precis-v { color: var(--ink); line-height: 1.45; white-space: pre-wrap; }

/* ── 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: var(--label);
}
.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: var(--sunk); 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);
  /* the same fault: a pressed option was #fff on a pale teal in day, 1.10:1 */
  color: var(--ink); 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: var(--sunk); border: 1px solid rgba(79,214,200,0.2); }
/* THE VALUE HE IS ABOUT TO CONFIRM, and it was WHITE ON WHITE in day view:
   `.confirm` grounds itself on --sunk, which the day palette makes #ffffff,
   while this literal stayed #fff -- 1.00:1, an empty box where the TOSP
   code, the level or the side should be. --ink is near-white in dark, so
   the shipped design is unchanged and day gets a colour. */
.confirm .big   { font-family: var(--mono); font-size: 28px; color: var(--ink); letter-spacing: 0.02em; }
.confirm .small { font-size: 14px; color: var(--ink-2); }
.confirm .src   { font-family: var(--mono); font-size: 10px; color: var(--label); 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: var(--sunk); 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: var(--sunk);
  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: var(--rule); 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; }
/* A SKIN ENTRY'S MARK ON THE BODY (nursing, owed inside block 4): the same
   outline, small, the point in the clinic's red. */
.body-mark { width: 48px; height: auto; flex: none; }
.body-pick { width: 160px; height: auto; cursor: crosshair; touch-action: manipulation; }
.body-mark-dot { fill: var(--red); stroke: var(--bg); stroke-width: 3; }
/* THE TWO INKS: red for pain, blue for numbness. The kind is on the stroke,
   so the colour reads the same wherever the drawing is rendered. */
.map-ink path {
  fill: none; stroke-opacity: 0.5;
  stroke-width: 13; stroke-linecap: round; stroke-linejoin: round;
}
.map-ink path.ink-pain { stroke: var(--red); }
.map-ink path.ink-numb { stroke: var(--map-numb); }
.map-svg.erasing { cursor: cell; border-color: rgba(224,164,74,0.45); }
/* the ink buttons carry their own colour, so the choice is seen not read */
.map-ink-btn.ink-pain[aria-pressed="true"] { border-color: rgba(224,90,74,0.6);
  background: rgba(224,90,74,0.14); color: var(--red-ink); }
.map-ink-btn.ink-numb[aria-pressed="true"] { border-color: rgba(90,162,255,0.6);
  background: rgba(90,162,255,0.14); color: #b8d2ff; }
.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; }
/* THE PLANE: the same card, bigger, over the page (the depth rules' z2). */
.map-plane { position: fixed; inset: 0; z-index: 54; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,9,10,0.72); }
.map-plane-card { width: min(560px, 100%); max-height: 92vh; overflow: auto;
  padding: 16px; border-radius: 16px; background: rgba(7,15,16,0.98);
  border: 1px solid rgba(79,214,200,0.22); box-shadow: var(--z2); }
.map-wrap.is-big .map-svg { width: min(340px, 78vw); }
.map-wrap.is-big .map-tick { min-height: 36px; font-size: 11px; }

/* not yours to answer */
.waiting {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 12px;
  background: var(--sunk); 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: var(--label); }
/* WHERE A BLOCK OF THE NOTE CAME FROM. --hush is A DIVIDER in the day
   palette by its own comment, and this is text -- 1.3:1, and at 13.3px
   since the type scale, so it is large as well as unreadable. --faint is
   the dim TEXT token: near-identical in dark, 4.7:1 in day. */
.block-src { margin-left: auto; font-family: var(--mono); font-size: 8px; color: var(--faint); }
.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);
}
/* typed into one section (wave 4, B4) -- the box beside the mic */
.block-head .typed-pen { order: 10; margin-left: 4px; }
.typed-pen:hover { color: var(--teal); border-color: var(--teal); }
.typed-take { display: flex; gap: 6px; align-items: flex-end; margin: 6px 0 2px; }
.typed-take[hidden] { display: none; }
.typed-words {
  flex: 1 1 auto; min-width: 0; resize: vertical; font: inherit;
  background: var(--sunk); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px;
}
.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: var(--sunk); 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: var(--label); 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: var(--sunk); 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(--rule); }
.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 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(--rule); 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(--rule); 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(--rule); 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(--rule); background: transparent; color: inherit;
  font: inherit; resize: vertical; }

/* -- the close (commit 8) -------------------------------------------- */
.close, .close-owed { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--rule); 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); }
/* W2.1: the order composed in his own words, on the medication question. */
.close-order { display: flex; flex-direction: column; gap: 8px; margin-top: 6px;
  padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; }
.close-rb { color: var(--ink); }
.close-hits { display: flex; flex-wrap: wrap; gap: 6px; }
.close-words { flex: 1 1 220px; min-width: 0; padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--rule); background: var(--sunk); color: var(--ink); }
/* W2.4: the ward. */
.wd-row { border: 1px solid var(--rule); border-radius: 9px; padding: 10px 11px;
  margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.wd-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.wd-where { color: var(--dim); }
.wd-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-outcome { display: flex; flex-direction: column; gap: 6px; }
.wd-owed { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.close-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.close-date { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--rule);
  background: transparent; color: inherit; font: inherit; }

/* -- the waiting room (commit 9) --------------------------------------- */
.room { padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.money { padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.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(--rule); }
.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: nowrap; gap: 8px; align-items: baseline; min-width: 0; }
.wr-who { font-weight: 600; flex: none; }
/* New case yellow, follow-up green (24 Sept). Dark ink on its own fill, so
   it reads the same on the dark and the day theme. */
.wr-visit { padding: 1px 6px; border-radius: 4px; color: #10181a; }
.wr-visit-new { background: #f2d24b; }
.wr-visit-followup { background: #5cc98a; }
.wr-head .wr-why, .wr-head .wr-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wr-head .wr-why { flex: 0 1 auto; }
.wr-head .wr-note { flex: 1 1 0; color: var(--dim); }
.wr-head .wr-lamp, .wr-head .wr-wait { flex: none; }
/* The second line holds the acts; the type picker gives way first so the
   buttons stay on it rather than wrapping into a third. */
.wr-acts > * { flex: none; }
.wr-acts > .wr-type { flex: 1 1 0; min-width: 72px; max-width: 220px; text-overflow: ellipsis; }
.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; }
.wr-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.wr-type { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--rule);
  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(--rule);
  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(--rule); }
.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); }
/* THE DESK SHORT-HANDED. Neutral, and deliberately not .dy-away's amber:
   that chip means there is no clinic, this means there is one and the
   counter is thin. A token, like both of its neighbours here, so it follows
   the day/dark toggle -- unlike the week grid's chips, which were literals
   and were invisible in day view until 17 September. */
.dy-deskshort { font-size: 11px; color: var(--dim); }
.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(--rule); }
.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); }
/* A folder opened from the Review tile: said once, under the bar, in the
   amber the console keeps for "read this before acting". */
.fo-review { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; padding: 8px 12px;
  border: 1px solid rgba(224,164,74,0.45); border-radius: var(--r); background: rgba(224,164,74,0.08); }
.fo-review-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--amber); flex: 0 0 auto; }
.fo-review-t { font-size: 13px; color: var(--amber-ink); }
.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); }

/* ─── THE DESKTOP FOLDER (24 September) ─── two header lines, six tiles in
   three columns and two rows, and a bar down the right. The page is the
   viewport: the tiles scroll inside themselves, never the page. */
#folder.fo-desk { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 72px);
  padding: 10px 14px 14px; overflow: hidden; position: relative; }
#folder.fo-desk[hidden] { display: none; }
.fv-h1, .fv-h2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.fv-h1 .fo-who { font-size: 20px; font-weight: 600; }
.fv-h1 .fo-mrn { font-size: 13px; color: var(--dim); }
.fv-who { font-size: 14px; color: var(--ink-2); }
.fv-h1 .fo-allergy { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--amber); }
.fv-h1 .fo-allergy.is-known { color: var(--red-ink); }
.fv-review { display: inline-flex; align-items: baseline; gap: 8px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(224,164,74,0.45); background: rgba(224,164,74,0.08); }
.fv-review-t { font-size: 12.5px; color: var(--amber-ink); }
.fv-h2 { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.fv-kv { display: inline-flex; align-items: baseline; gap: 6px; }
.fv-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.fv-v { font-size: 14px; color: var(--ink); }
.fv-prog { font-size: 12px; padding: 3px 10px; border-radius: 999px; color: var(--teal);
  border: 1px solid rgba(79,214,200,0.4); background: rgba(79,214,200,0.08); }
.fv-hbtn { padding: 4px 12px; font-size: 13px; }
/* THE FOLDER'S BODY (25 September): a rail down the LEFT holding everything
   but the encounters, and the encounters as the main panel. Expanded, the
   rail steps aside and the encounters take the whole body. */
.fv-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 10px; }
.fv-body.is-expanded { grid-template-columns: minmax(0, 1fr); }
.fv-body.is-expanded .fv-rail { display: none; }
/* THE RAIL SCROLLS AS ONE COLUMN, so a tile inside it is its content's
   height -- the flex:1 / min-height:0 that let a tile share a grid cell
   would squash every one of them to nothing in a column. */
.fv-rail { min-height: 0; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-l); background: var(--panel-2); display: flex; flex-direction: column; gap: 10px; }
.fv-rail-in > .fv-tile { flex: 0 0 auto; min-height: auto; }
.fv-rail-in > .fv-tile > .fv-tile-b { flex: 0 0 auto; overflow: visible; }
/* THE RAIL FOLDS (26 September). Folded, a thin strip with one button. */
.fv-rail-in { display: flex; flex-direction: column; gap: 10px; }
.fv-rail-fold { align-self: flex-end; padding: 3px 10px; font-size: 12px; }
.fv-body.rail-folded { grid-template-columns: 44px minmax(0, 1fr); }
.fv-body.rail-folded .fv-rail { padding: 8px 2px; align-items: center; overflow: hidden; }
.fv-body.rail-folded .fv-rail-in { display: none; }
.fv-body.rail-folded .fv-rail-fold { align-self: center; }
.fv-main { min-height: 0; display: flex; flex-direction: column; }
.fv-main > .fv-tile { flex: 1 1 auto; }
.fv-tile { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line);
  border-radius: var(--r-l); background: var(--panel); }
.fv-tile-h { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.fv-tile-t { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.fv-tile-s { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.fv-tile-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.fv-sub { margin-top: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label); }
.fv-sub:first-child { margin-top: 0; }
.fv-none { font-size: 12.5px; color: var(--dimmer); }
.fv-enc { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.fv-enc:last-child { border-bottom: 0; }
.fv-enc-top { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; width: 100%;
  padding: 0; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fv-enc-top:hover .fv-enc-what { color: var(--teal-2); }
.fv-enc-when { font-size: 12px; color: var(--dim); }
.fv-enc-what { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fv-enc-by { font-size: 12px; color: var(--dim); margin-left: auto; }
/* THE SPECIALTY IN THE MIDDLE OF THE ROW (27 September), the doctor at its
   end: it takes the room between the date and the name and centres in it. */
.fv-enc-spec { flex: 1 1 auto; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--teal-2); }
.fv-enc-spec:empty { flex: 1 1 auto; }
/* NEHR'S SHELVES ON THE FOLDER'S RAIL (27 September): a row of tabs over
   rows the door already sent. */
.fv-shelf { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; }
.fv-shelf-b { padding: 4px 9px; font-size: 11.5px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--dim); cursor: pointer; font-family: inherit; }
.fv-shelf-b.is-on { border-color: var(--teal-2); color: var(--teal-2); font-weight: 600; }
/* The appointments sheet's past visits: date, what, specialty, doctor. */
.fv-appt-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 5px 0;
  border-bottom: 1px solid var(--line-soft); }
.fv-appt-when { font-size: 12px; color: var(--dim); }
.fv-appt-what { font-size: 13px; color: var(--ink); font-weight: 600; }
.fv-appt-spec { flex: 1 1 auto; text-align: center; font-size: 12.5px; color: var(--teal-2); }
.fv-appt-by { font-size: 12px; color: var(--dim); margin-left: auto; }
/* THE CARD, ASKED FIRST IN THE PATIENT'S PROGRAMMES (27 September). */
.smf { margin: 4px 0 10px; }
.smf-q { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.smf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.smf-chip { padding: 6px 12px; font-size: 13px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); cursor: pointer; font-family: inherit; }
.smf-chip.is-on { border-color: var(--teal-2); color: var(--teal-2); font-weight: 600; }
.smf-chip.is-ask { border-color: var(--amber); }
.smf-say { margin-top: 6px; font-size: 12px; color: var(--dim); }
/* A NEW ENCOUNTER FROM THE FOLDER: the room's own types, or the admin one. */
.fv-ne-note { font-size: 13px; color: var(--dim); margin-bottom: 10px; }
.fv-ne-types { display: flex; flex-wrap: wrap; gap: 8px; }
.fv-ne-b { padding: 8px 14px; font-size: 13px; }
.fv-ne-say { margin-top: 10px; font-size: 12.5px; color: var(--ink); }
/* ONE LINE UNDER EACH ENCOUNTER, THE DIAGNOSIS. Hidden while the row is
   open, because the whole note below it says it already. */
.fv-enc-dx { margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-enc.is-open .fv-enc-dx { display: none; }
/* Expand and Copy, in the panel's own header. */
.fv-enc-ctl { margin-left: 6px; padding: 3px 10px; font-size: 12px; }
/* Right-aligned by the count when there is one (it carries margin-left:auto);
   with no count the first control takes that job -- two auto margins would
   split the space and float the count into the middle. */
.fv-tile-h > .fv-tile-t + .fv-enc-ctl, .fv-tile-h > .fv-tile-t + .fv-ver { margin-left: auto; }
/* THE THREE VERSIONS (26 September): one switch on the panel's head. */
.fv-ver { display: inline-flex; margin-left: 10px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.fv-ver-b { padding: 3px 12px; border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--dim); cursor: pointer; }
.fv-ver-b + .fv-ver-b { border-left: 1px solid var(--line); }
.fv-ver-b.is-on { background: var(--teal); color: var(--bg); font-weight: 600; }
.fv-enc-sum { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.fv-sum-pt { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.4; }
.fv-sum-k { color: var(--label); font-weight: 600; }
.fv-sum-v { color: var(--ink); }
.fv-sum-from { margin-top: 2px; font-size: 11.5px; color: var(--dimmer); font-style: italic; }
.fv-enc-summary.is-open .fv-enc-sum { display: none; }
/* THE COMPLETE VERSION, laid out: the heading underlined, a subheading
   sharp, a point "Label — text" with its label bold. */
.fv-cn-h { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; text-transform: none; letter-spacing: 0; }
.fv-cn-h:first-child { margin-top: 0; }
.fv-cn-body { margin-top: 3px; display: flex; flex-direction: column; gap: 2px; }
.fv-cn-sub { margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--teal-2); }
.fv-cn-pt { padding-left: 12px; font-size: 13px; line-height: 1.45; color: var(--ink); text-indent: -10px; }
.fv-cn-pt::before { content: '•'; margin-right: 6px; color: var(--dim); }
.fv-cn-k { font-weight: 600; }
.fv-cn-p { font-size: 13px; line-height: 1.45; color: var(--ink); }
/* THE SUMMARY FOLDER, in the rail. */
.fv-sum-said { padding: 4px 12px 0; font-size: 12px; color: var(--dim); }
.fv-sum-said:empty { display: none; }
.fv-sum { padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.fv-sum:last-child { border-bottom: 0; }
.fv-sum-h { cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.fv-sum-on { font-size: 12px; color: var(--ink); font-weight: 600; }
.fv-sum-n { margin-left: auto; font-size: 11.5px; color: var(--dim); }
.fv-sum-l { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.fv-enc-detail { margin-top: 6px; padding: 8px 10px; border-left: 2px solid var(--teal); background: var(--panel-2); border-radius: 6px; }
.fv-sec-h { margin-top: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--label); }
.fv-sec-h:first-child { margin-top: 0; }
.fv-sec-t { font-size: 13px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; }
.fv-pdf { margin-top: 8px; }
.fv-pdf-said { margin-left: 8px; font-size: 12px; color: var(--dim); }
.fv-sheet { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px; background: rgba(0,0,0,0.45); }
.fv-sheet-card { width: min(640px, 92%); max-height: 75%; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg); box-shadow: var(--z2); }
.fv-sheet-top { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.fv-sheet-t { font-size: 15px; font-weight: 600; }
.fv-sheet-top .btn { margin-left: auto; }
.fv-sheet-body { overflow-y: auto; padding: 12px 14px; }
[data-theme="day"] .fv-sheet { background: rgba(20,50,47,0.25); }

/* ─── SETTINGS, ONE PAGE (24 September) ─── a bar of sections down the left,
   the section's panels beside it, a close in the top-right corner. The page
   is the viewport; only a panel scrolls. */
#setdeskview.sd-page { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px;
  height: calc(100vh - 72px); padding: 12px 14px 14px; overflow: hidden; }
#setdeskview.sd-page[hidden] { display: none; }
.sd-bar { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; min-height: 0; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel-2); }
.sd-bar-h { padding: 4px 10px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--label); }
.sd-nav { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 6px 10px;
  border: 1px solid transparent; border-radius: var(--r); font: inherit; font-size: 14px; color: var(--ink-2);
  text-align: left; cursor: pointer; }
.sd-nav:hover { border-color: var(--line); color: var(--ink); }
.sd-nav.is-on { border-color: rgba(79,214,200,0.5); background: rgba(79,214,200,0.12); color: var(--teal); font-weight: 600; }
.sd-nav-i { flex: 0 0 22px; text-align: center; }
.sd-more { margin-top: auto; }
.sd-main { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.sd-top { display: flex; align-items: center; gap: 12px; }
.sd-title { font-size: 20px; font-weight: 600; }
.sd-close { margin-left: auto; width: var(--tap); height: var(--tap); border-radius: 50%; font-size: 18px;
  border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.sd-close:hover { border-color: var(--teal); color: var(--teal); }
.sd-body { flex: 1 1 auto; min-height: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.sd-body.sd-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-body.sd-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* TAB VIEW (25 September): one panel across the page, its content flowing
   into columns rather than down, so a tab reads without scrolling. */
.sd-view { display: inline-flex; gap: 2px; margin-left: auto; border: 1px solid var(--rule);
  border-radius: 999px; padding: 2px; }
.sd-view-b { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 0;
  background: none; color: var(--dim); cursor: pointer; white-space: nowrap; }
.sd-view-b.is-on { background: rgba(79,214,200,.14); color: var(--ink); }
.sd-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.sd-tab { font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 8px 8px 0 0;
  border: 1px solid var(--rule); border-bottom-color: transparent; background: none;
  color: var(--dim); cursor: pointer; }
.sd-tab.is-on { color: var(--ink); background: rgba(79,214,200,.10); border-color: var(--teal); }
.sd-body.sd-tabbed { grid-template-columns: minmax(0, 1fr); }
.sd-tabbed .sd-panel[hidden] { display: none; }
.sd-tabbed .sd-panel-b { columns: 340px; column-gap: 28px; column-fill: auto; overflow: auto; }
/* NO HEADING AT THE FOOT OF A COLUMN (26 September: "on-call (a header)
   starts at the bottom of a page -- this is a sin in design"). A block in a
   tab's flow is never split, and a heading never parts from what follows. */
.sd-tabbed .sd-panel-b > * { break-inside: avoid; }
.sd-tabbed .sd-panel-b :is(h1, h2, h3, h4, .st-h, .st-card-t) { break-after: avoid; }
/* A panel of stacks (Doctor · On call · Leave) is laid as COLUMNS OF ITS OWN,
   one stack each, never flowed; the Clinic tab is laid by its sub-tabs. */
.sd-tabbed .sd-panel-b:has(> .sd-stack) { columns: auto; display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.sd-tabbed .sd-panel-b:has(> .sd-stack) > .sd-stack + .sd-stack { margin-top: 0; padding-top: 0; border-top: 0;
  padding-left: 20px; border-left: 1px solid var(--line-soft); }
.sd-tabbed .sd-panel-b:has(.st-sub) { columns: auto; }
.sd-top .sd-tabs { margin-left: 18px; flex-wrap: nowrap; }
.sd-top .sd-tab { border-radius: 8px; }
/* THE CLINIC SUB-TABS: one clinic, or the desk's hours, at a time. */
.su-k { font-size: 12px; color: var(--dim); margin-top: 6px; }
.st-subs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 8px; }
.st-subtab { font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: none; color: var(--dim); }
.st-subtab.is-on { color: var(--ink); border-color: var(--teal); background: rgba(79,214,200,.10); }
.st-sub > [hidden] { display: none; }
.sd-tabbed .st-sub .st-card-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 22px; align-items: start; }
/* CHECKING PATIENTS IN (25 September), above the place picker. */
.ci-arr { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; margin: 8px 0 14px; }
.ci-arr-h { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 6px; }
.ci-arr-t { font-weight: 600; font-size: 14px; }
.ci-arr-sub { font-size: 12px; color: var(--dim); }
.ci-arr-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }
.ci-arr-row { display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 6px 8px; border-radius: 8px; background: var(--sunk); }
.ci-arr-row.is-overdue { border-left: 3px solid var(--amber); }
.ci-arr-who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; }
.ci-arr-reg { font-size: 13px; }
.ci-arr-name { font-size: 13px; }
.ci-arr-how { font-size: 12px; color: var(--dim); }
.ci-arr-said { font-size: 12px; margin-top: 6px; }
.ci-arr-none { font-size: 12.5px; color: var(--dim); }
.ci-arr-said.ok { color: var(--teal); }
.ci-arr-said.no { color: var(--red); }
.sd-body.sd-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.sd-panel { min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: var(--r-l); background: var(--panel); }
/* THE DOCTOR'S PANEL HOLDS THREE SCREENS (25 September): who he is, his
   on-call dates, his leave. Each paints its own host; this only spaces them
   and rules a line between, so they read as parts of one panel. */
.sd-stack + .sd-stack { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.sd-panel-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; }
/* a screen painted into a panel un-hides itself; inside a panel that is right */
.sd-panel-b > [hidden] { display: none; }
.sd-note { font-size: 13px; color: var(--dim); margin-bottom: 10px; }
/* ASK TWICE (asktwice.ts): the read-back line under every write on the
   Settings page and the template builders. */
.ask-line { min-height: 16px; margin-top: 6px; font-size: 12px; color: var(--dim); line-height: 1.45; }
.ask-line.is-ok { color: var(--teal); }
.ask-line.is-no { color: var(--red-ink); }
.ask-line.is-ask { padding: 8px 10px; border-left: 3px solid var(--amber); background: rgba(224,164,74,.08); color: var(--amber-ink); }
.ask-q { margin-bottom: 6px; }
.ask-acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* THE TEMPLATE BUILDERS (tplbuild.ts, shortcuts.ts, pdftpl.ts) and the
   patient's forms & email sheet (patientmail.ts), 24 September. */
.tb-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.tb-add { margin-bottom: 8px; }
.tb-list { display: flex; flex-direction: column; gap: 6px; }
/* PDF FORM TEMPLATES -- field kinds and source hints (26 September).
 * Prefix `pfs-`, grepped absent from app/app.css before it was claimed
 * (`.pt-` is three modules' already). Fold under the PDF templates block. */
.pfs-kind { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px;
  font-family: inherit; font-size: 10.5px; letter-spacing: 0.02em; color: var(--dim);
  border: 1px solid var(--line, rgba(127,127,127,0.35)); vertical-align: 1px; }
.pfs-hint { grid-column: 1 / -1; font-size: 11px; color: var(--dim); line-height: 1.35; }
.pfs-hint[hidden] { display: none; }
@media (min-width: 1100px) {
  .pfs-kind { font-size: 11px; }
  .pfs-hint { font-size: 13.3px; }
}
/* ── scheme membership (Dr Lau, 26 September: the scheme's second component,
   whether the PATIENT is a member, captured at registration) ──────────────
   Fragment for the integrator to fold into app/app.css. Prefix `smb-`,
   checked absent from app.css before it was claimed. Colours are tokens
   only, so both palettes follow. */
.smb-group .smb-row { display: flex; flex-direction: column; gap: 3px; }
.smb-q { font-size: 11px; color: var(--dim); line-height: 1.4; }
.smb-not-here { margin-left: 6px; font-size: 10.5px; color: var(--amber); }
.smb-elsewhere .smb-select { border-style: dashed; }
.smb-toggle { margin-top: 6px; align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--teal); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.smb-more { margin-top: 6px; }
.smb-none { color: var(--faint); }
.smb-section .smb-line { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-top: 1px solid var(--hush); }
.smb-section .smb-line:first-of-type { border-top: 0; }
.smb-line-n { font-size: 12.5px; color: var(--ink); }
.smb-line-q { font-size: 11.5px; color: var(--dim); }
.smb-line.smb-elsewhere .smb-line-q { color: var(--amber); }
.smb-look { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.smb-who { flex: 1 1 220px; min-width: 0; }
.smb-editor { margin-top: 10px; }
.smb-say { margin-top: 6px; }
/* PRE-BUILT PATIENT FORMS (26 September): the licence and source lines, and restore. */
.tb-head { gap: 8px; flex-wrap: wrap; }
.tb-licence { font-size: 12px; color: var(--amber); white-space: normal; margin-top: 2px; }
.tb-src { font-size: 11.5px; color: var(--dim); white-space: normal; margin-top: 2px; }
.tb-restore { margin-bottom: 8px; }
.tb-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); }
.tb-item .ask-line { grid-column: 1 / -1; }
.tb-item-name { font-size: 13.5px; color: var(--ink); }
.tb-item-sub { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-item-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.tb-form { display: flex; flex-direction: column; gap: 6px; }
.tb-form-h { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }
.tb-l { font: 11px var(--mono); color: var(--label); letter-spacing: .04em; margin-top: 6px; }
.tb-in { width: 100%; min-height: 32px; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--rule);
  border-radius: 7px; background: var(--panel-2); color: var(--ink); font: 13px var(--display); }
.tb-area { resize: vertical; }
.tb-rows { display: flex; flex-direction: column; gap: 8px; }
.tb-row { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 8px 38px 8px 8px;
  border: 1px dashed var(--rule); border-radius: var(--r); }
.tb-row-tools { position: absolute; right: 4px; top: 4px; display: flex; flex-direction: column; gap: 3px; }
.tb-mini { width: 28px; height: 26px; border: 1px solid var(--rule); border-radius: 6px; color: var(--dim); cursor: pointer; font-size: 12px; }
.tb-mini:hover { color: var(--teal); border-color: var(--teal); }
.tb-scale { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
.tb-num { width: 64px; }
.tb-form-acts { display: flex; gap: 8px; margin-top: 8px; }
.pt-grid { display: flex; flex-direction: column; gap: 5px; max-height: none; }
.pt-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 8px; align-items: center; }
.pt-field { font-size: 11.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.pt-ess-l { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.pm-to { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
/* RELATED FOLDERS (relatives.ts) -- first-degree relatives, under the number */
.fv-rel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.fv-rel[hidden] { display: none; }
.rel-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.rel-chip { min-height: 28px; padding: 3px 10px; border-radius: 999px; font-size: 12px; color: var(--teal); cursor: pointer;
  border: 1px solid rgba(79,214,200,0.4); background: rgba(79,214,200,0.08); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-box { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rel-h { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.rel-none { font-size: 12px; color: var(--dim); }
.rel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; }
.rel-row .ask-line { grid-column: 1 / -1; }
.rel-row .ask-line:empty, .rel-form > .ask-line:empty { display: none; }
.rel-open { display: flex; align-items: baseline; gap: 8px; min-width: 0; min-height: 34px; padding: 4px 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink); font: inherit; }
.rel-rel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); flex: 0 0 auto; }
.rel-name { font-size: 13px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-key { font-size: 12px; color: var(--dim); flex: 0 0 auto; }
.rel-add { align-self: flex-start; }
.rel-form { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed var(--rule); border-radius: 8px; }
.rel-form[hidden] { display: none; }
.rel-search, .rel-pickrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.rel-q { flex: 1 1 200px; min-width: 0; min-height: 34px; box-sizing: border-box; padding: 6px 9px;
  border: 1px solid var(--rule); border-radius: 7px; background: var(--panel-2); color: var(--ink); font: 13px var(--display); }
.rel-pick { min-height: 34px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 7px; background: var(--panel-2); color: var(--ink); }
/* PARENT / GUARDIAN (guardians.ts, GP Phase 0) -- relatives' own shape */
.gd-box { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gd-h { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.gd-none { font-size: 12px; color: var(--dim); }
.gd-needed { font-size: 13px; color: var(--amber, #e0a33a); padding: 6px 10px; border: 1px solid currentColor; border-radius: 8px; }
.gd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.gd-row .ask-line, .gd-basis { grid-column: 1 / -1; }
.gd-row .ask-line:empty, .gd-form > .ask-line:empty { display: none; }
.gd-who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.gd-rel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.gd-name { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.gd-phone, .gd-email { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.gd-basis { font-size: 12px; color: var(--ink-2); }
.gd-stale { color: var(--amber, #e0a33a); }
.gd-add { align-self: flex-start; }
.gd-form { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed var(--rule); border-radius: 8px; }
.gd-form[hidden], .gd-field[hidden] { display: none; }
.gd-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.gd-field input, .gd-pick { min-height: 34px; box-sizing: border-box; padding: 6px 9px; min-width: 0; border: 1px solid var(--rule); border-radius: 7px; background: var(--panel-2); color: var(--ink); font: 13px var(--display); }
.dk-guardian { margin-top: 8px; }
/* GP MODE (gp.ts, GP Phase 0): the GP strip under the first page's actions */
.dk-gp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dk-gp[hidden] { display: none; }
.dk-gp-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
/* THE TWO-MINUTE VISIT (gpvisit.ts, GP Phase 1) */
.gv-box { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 4px 2px; }
.gv-who { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.gv-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.gv-h { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.gv-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.gv-chips[hidden] { display: none; }
.gv-cwrap { display: inline-flex; gap: 4px; align-items: center; }
.gv-chip { min-height: 32px; padding: 4px 10px; border-radius: 999px; font-size: 12px; cursor: pointer; color: var(--ink); border: 1px solid var(--rule); background: var(--panel-2); }
.gv-chip.is-on { color: var(--teal); border-color: rgba(79,214,200,0.6); background: rgba(79,214,200,0.12); }
.gv-days { width: 4.5em; min-height: 32px; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--rule); border-radius: 7px; background: var(--panel-2); color: var(--ink); }
.gv-days[hidden], .gv-text[hidden] { display: none; }
.gv-text, .gv-date, .gv-pick { min-height: 34px; box-sizing: border-box; padding: 6px 9px; min-width: 0; border: 1px solid var(--rule); border-radius: 7px; background: var(--panel-2); color: var(--ink); font: 13px var(--display); }
.gv-vitals { display: grid; grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); gap: 6px; }
.gv-vital { min-height: 34px; box-sizing: border-box; padding: 6px 9px; min-width: 0; border: 1px solid var(--rule); border-radius: 7px; background: var(--panel-2); color: var(--ink); font: 13px var(--display); }
.gv-exam { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.gv-sys { flex: 0 0 7em; font-size: 12px; color: var(--ink-2); }
.gv-finds { flex: 1 1 100%; }
.gv-dx { display: flex; flex-wrap: wrap; gap: 6px; }
.gv-mc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gv-none { font-size: 12px; color: var(--dim); }
.gv-flags { display: flex; flex-direction: column; gap: 4px; }
.gv-flag { font-size: 13px; color: var(--amber, #e0a33a); }
.gv-workings { display: flex; flex-direction: column; gap: 2px; }
.gv-working { font-family: var(--mono); font-size: 11px; color: var(--dim); overflow-wrap: anywhere; }
.gv-note { margin: 0; padding: 10px; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 var(--mono); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; }
.gv-note.is-wait { color: var(--dim); }
.gv-file { align-self: flex-start; }
.gv-prints { display: flex; flex-wrap: wrap; gap: 8px; }
/* WHO PAYS AT A GP PRACTICE (gppayers.ts, GP Phase 2) */
.gpp-split { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; padding: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.gpp-h { font-size: 13px; font-weight: 600; color: var(--ink); }
.gpp-who { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.gpp-pick, .gpp-act, .gpp-panelform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.gpp-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; min-width: 0; }
.gpp-k { color: var(--ink-2); overflow-wrap: anywhere; }
.gpp-v { font-family: var(--mono); color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.gpp-scheme .gpp-v { color: var(--teal); }
.gpp-patient { font-weight: 600; border-top: 1px solid var(--rule); padding-top: 4px; }
.gpp-cap .gpp-v { color: var(--dim); font-size: 12px; }
.gpp-dim { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.gpp-warn { font-size: 12px; color: var(--amber, #e0a33a); overflow-wrap: anywhere; }
.gpp-claimed { font-size: 12px; color: var(--teal); overflow-wrap: anywhere; }
.gpp-ask { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gpp-rb { flex: 1 1 100%; font-size: 12px; color: var(--ink); }
.gpp-sub { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.gpp-sources { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; }
.gpp-panel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.gpp-in { min-width: 0; max-width: 100%; }
.gpp-table { width: 100%; min-height: 12em; font: 11px/1.4 var(--mono); }
/* VACCINATION (gpvax.ts, GP Phase 3): the due list, the dose form */
.gx-list { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gx-due { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; min-width: 0; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.gx-st { flex: 0 0 7.5em; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.gx-due.is-overdue .gx-st { color: var(--red, #e06c5a); }
.gx-due.is-due .gx-st, .gx-due.is-review .gx-st { color: var(--amber, #e0a33a); }
.gx-due.is-cannot-tell .gx-st { color: var(--amber, #e0a33a); }
.gx-what { font-size: 13px; font-weight: 600; color: var(--ink); }
.gx-why { flex: 1 1 100%; font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.gx-more summary { cursor: pointer; font-size: 12px; color: var(--dim); }
.gx-unread { font-size: 12px; color: var(--amber, #e0a33a); overflow-wrap: anywhere; }
.gx-src { font-family: var(--mono); font-size: 11px; color: var(--dim); overflow-wrap: anywhere; }
.gx-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); gap: 6px; min-width: 0; }
.gx-prod { grid-column: 1 / -1; }
.gx-hist { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.gx-here { font-size: 11px; color: var(--teal); }
.gx-past { font-size: 11px; color: var(--amber, #e0a33a); }
.gx-again[hidden] { display: none; }
/* 🧪 Quick bloods (GP Phase 4): order sets, point-of-care entry, graded results. */
.gb-sets .gb-set { font-weight: 600; }
.gb-said { display: flex; flex-direction: column; gap: 3px; }
.gb-said-ok { font-size: 12px; color: var(--teal); }
.gb-said-miss { font-size: 12px; color: var(--amber, #e0a33a); }
.gb-panel { min-width: 0; }
.gb-group { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 4px; }
.gb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); gap: 6px; }
.gb-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gb-cell-l { font-size: 12px; color: var(--dim); }
.gb-results { display: flex; flex-direction: column; gap: 4px; }
.gb-res { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); }
.gb-res-l { font-size: 13px; color: var(--ink); min-width: 9em; }
.gb-res-v { font-size: 13px; color: var(--ink); }
.gb-res-g { font-size: 12px; font-weight: 600; color: var(--dim); }
.gb-res-ref, .gb-res-why { font-size: 11px; color: var(--dim); flex-basis: 100%; overflow-wrap: anywhere; }
.gb-borderline .gb-res-g, .gb-abnormal .gb-res-g { color: var(--amber, #e0a33a); }
.gb-critical { border-color: var(--amber, #e0a33a); }
.gb-critical .gb-res-g { color: var(--amber, #e0a33a); text-transform: uppercase; }
.gb-normal .gb-res-g { color: var(--teal); }
/* Referrals through S-EMR (GP Phase 5b/5c): the consent form under a kept
   letter, and the Referrals in page. */
.gb-send { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 8px; }
.gb-crosses, .gb-from, .gb-consent { color: var(--dim); }
.gb-giver.is-dim { opacity: .5; }
.gb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.gb-row, .gb-outrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gb-state { color: var(--teal); }
.gb-replytext { border-left: 3px solid var(--teal); padding-left: 8px; white-space: pre-wrap; }
.gb-reply { min-height: 90px; }
.gb-attach { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
/* The session dashboard (GP Phase 6): counts, time per patient, one row per
   visit (a button: it opens the folder), the owed lists. A missing time is
   dim, never filled. */
.gs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.gs-head .pv-title { margin-right: auto; }
.gs-day { color: var(--ink); }
.gs-counts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.gs-count { border: 1px solid var(--rule); border-radius: 8px; padding: 8px; background: var(--panel-2); }
.gs-count-n { font-size: 22px; color: var(--ink); }
.gs-count-l { font-size: 12px; color: var(--dim); }
.gs-c-held .gs-count-n, .gs-c-left_unpaid .gs-count-n { color: var(--amber, #e0a33a); }
.gs-avg { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.gs-avg-l { min-width: 70px; color: var(--dim); }
.gs-avg-n, .gs-note { font-size: 12px; color: var(--dim); }
.gs-row { display: grid; grid-template-columns: 2fr 2fr repeat(5, 0.8fr) 2fr; gap: 6px; align-items: center;
  width: 100%; text-align: left; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--ink); font: inherit; cursor: pointer; }
.gs-row-h { cursor: default; color: var(--dim); font-size: 12px; }
.gs-s-held .gs-state, .gs-s-left_unpaid .gs-state { color: var(--amber, #e0a33a); }
.gs-s-in_room .gs-state { color: var(--teal); }
.gs-miss { color: var(--dim); opacity: .7; }
.gs-flags { font-size: 12px; color: var(--dim); }
.gs-owedgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 10px; }
.gs-who { text-align: left; border: 0; background: none; color: var(--ink); font: inherit; padding: 2px 0; cursor: pointer; }
@media (max-width: 760px) {
  .gs-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gs-row { grid-template-columns: 1fr 1fr; }
  .gs-row-h { display: none; }
}
/* Chronic care (GP Phase 7): the register, one card per enrolled condition
   (a measure per row: reading, target, status, due), the annual checks, the
   care plan; and the 📋 recall list (a row is a button: it opens the folder).
   A status is a word and a symbol, never colour alone. */
.gc-hsg, .gc-left { font-size: 12px; color: var(--dim); }
.gc-said { font-size: 12px; color: var(--teal); }
.gc-warn { font-size: 12px; color: var(--amber, #e0a33a); display: flex; gap: 8px; align-items: center; }
.gc-cond { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.gc-cond-l { min-width: 160px; color: var(--ink); }
.gc-on { color: var(--teal); }
.gc-m, .gc-chk { display: grid; grid-template-columns: 1.2fr 1.6fr 1.2fr 1.2fr 1.8fr; gap: 6px; align-items: center;
  padding: 4px 0; border-bottom: 1px solid var(--line); }
.gc-chk { grid-template-columns: 1.6fr 1.4fr 1.8fr auto; }
.gc-m-l { color: var(--ink); }
.gc-m-t, .gc-m-d { font-size: 12px; color: var(--dim); }
.gc-s-above .gc-m-s, .gc-s-below .gc-m-s, .gc-s-unit .gc-m-s { color: var(--amber, #e0a33a); }
.gc-s-at .gc-m-s { color: var(--teal); }
.gc-sub { margin-top: 8px; }
.gc-bloods { margin-top: 8px; }
.gc-goals { margin: 4px 0 8px 18px; }
.gc-review { font-size: 12px; color: var(--dim); }
.gc-src { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 12px; }
.gc-src-a { color: var(--dim); }
.gr-row { display: grid; grid-template-columns: 1.4fr 1fr 3fr; gap: 6px; align-items: center; width: 100%;
  text-align: left; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--line); background: none;
  color: var(--ink); font: inherit; cursor: pointer; }
.gr-conds, .gr-items { font-size: 12px; color: var(--dim); }
@media (max-width: 760px) {
  .gc-m, .gc-chk, .gr-row { grid-template-columns: 1fr 1fr; }
}

/* 💉 Vaccination, the owed items: withdraw beside a dose, the withdrawn struck, certificates kept. */
.gx-hrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.gx-hrow .gx-hist { flex: 1 1 14em; }
.gx-wd { min-height: 28px; padding: 2px 10px; font-size: 12px; }
.gx-wslot { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.gx-wslot:empty { display: none; }
.gx-wslot .gx-wwhy { flex: 1 1 16em; }
.gx-wyes[hidden] { display: none; }
.gx-wsaid { flex: 1 1 100%; font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.gx-gone { font-size: 13px; color: var(--dim); overflow-wrap: anywhere; }
.gx-gone-why { font-size: 12px; color: var(--amber, #e0a33a); }
.gx-cert-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.gx-dayacts { align-items: center; }

/* 📝 The clinic's GP lists (GP owed items): the seed beside the clinic's own. */
.gl-page { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 16px; }
.gl-head { display: flex; align-items: center; gap: 8px; }
.gl-title { margin-right: auto; font-size: 16px; font-weight: 600; color: var(--ink); }
.gl-note, .gl-meta { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.gl-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; min-width: 0; }
.gl-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gl-table { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-height: 60vh; overflow: auto; }
.gl-srow { font-size: 12px; color: var(--ink-2); padding: 3px 0; border-bottom: 1px dashed var(--line); overflow-wrap: anywhere; }
.gl-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; padding: 4px 0; border-bottom: 1px solid var(--line); }
.gl-in { flex: 1 1 8em; min-width: 6em; font-size: 12px; }
textarea.gl-in { flex-basis: 100%; min-height: 4.5em; resize: vertical; }
.gl-problem { font-size: 12px; color: var(--amber, #e0a33a); overflow-wrap: anywhere; }
.gl-rb { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.gl-yes[hidden], .gl-yes-revert[hidden], .gl-revert[hidden] { display: none; }
@media (max-width: 760px) {
  .gl-cols { grid-template-columns: minmax(0, 1fr); }
}

/* A lab report read into a chart (E10): the panel in the folder's sheet. */
.lc-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lc-h { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.lc-means, .lc-note { font-size: 12px; color: var(--dim); }
.lc-note.is-no { color: var(--red); }
.lc-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.lc-grade { font-size: 12px; color: var(--amber); }
.lc-list { display: flex; flex-direction: column; gap: 2px; }
.lc-row { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--ink); }
.lc-row.is-unsure .lc-val { color: var(--red); }
.lc-unsure { font-family: var(--mono); font-size: 11px; color: var(--red); }
.lc-fix { min-height: 90px; width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--rule);
  border-radius: 7px; background: var(--panel-2); color: var(--ink); font: 13px var(--mono); }
.lc-who, .lc-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.lc-chip { min-height: 34px; padding: 3px 10px; border-radius: 999px; font-size: 12px; color: var(--teal); cursor: pointer;
  border: 1px solid rgba(79,214,200,0.4); background: rgba(79,214,200,0.08); }
.lc-key, .lc-date { min-height: 34px; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--rule); border-radius: 7px;
  background: var(--panel-2); color: var(--ink); font: 13px var(--display); }
.lc-chosen { font-size: 12px; color: var(--ink-2); }
/* EXERCISE PRESCRIPTION (4 Oct, behind its flag): the library, the programme
   and its doses. Fields wrap into as many columns as fit, so one card reads
   as two columns on a phone and a single row on a desktop. */
.ex-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ex-h { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ex-note { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.ex-note.is-no { color: var(--red); }
.ex-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.ex-postop { font-size: 12px; color: var(--amber); border: 1px solid var(--amber); border-radius: 7px; padding: 6px 9px; }
.ex-chips, .ex-acts { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.ex-chip { min-height: 34px; padding: 3px 10px; border-radius: 999px; font-size: 12px; color: var(--teal); cursor: pointer;
  border: 1px solid rgba(79,214,200,0.4); background: transparent; }
.ex-chip.is-on { background: rgba(79,214,200,0.16); color: var(--ink); }
.ex-find, .ex-in { min-height: 34px; box-sizing: border-box; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 7px;
  background: var(--panel-2); color: var(--ink); font: 13px var(--display); width: 100%; min-width: 0; }
.ex-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow: auto; }
.ex-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 7px; min-width: 0; }
.ex-row-t { min-width: 0; flex: 1 1 auto; font-size: 12.5px; color: var(--ink); }
.ex-name { font-size: 13px; color: var(--ink); }
.ex-doc { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.ex-cat { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.ex-row-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ex-diagram { display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.ex-pic { width: 100%; max-width: 240px; }
.ex-pic svg { display: block; width: 100%; height: auto; }
.ex-prog { display: flex; flex-direction: column; gap: 6px; }
.ex-item { border: 1px solid var(--rule); border-radius: 9px; padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; }
.ex-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ex-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; min-width: 0; }
.ex-f { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-fl { font-size: 11px; color: var(--dim); }
.ex-warn { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--amber); }
.fv-enc-ex { margin-top: 3px; font-size: 12px; color: var(--teal-2); overflow-wrap: anywhere; }
.rel-hits { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
.rel-hit { text-align: left; min-height: 30px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: transparent; color: var(--ink); font-size: 12.5px; cursor: pointer; overflow-wrap: anywhere; }
.rel-chosen { font-size: 12px; color: var(--ink-2); }
.dk-related { margin: 10px 0; }
.pm-to .pm-k { font: 11px var(--mono); color: var(--label); margin-right: 8px; }
.pm-to .pm-v { font-size: 14px; color: var(--ink); }
/* THE ENCOUNTER HEADER'S TABS (encounter-patient.ts, 24 September):
   registration, the bio-social profile, medication, correspondence. */
.ep-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 10px; }
.ep-block { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; }
.ep-h { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--label); margin-bottom: 6px; }
.ep-kv { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 10px; padding: 3px 0; font-size: 13px; }
.ep-k { color: var(--dim); }
.ep-v { color: var(--ink); overflow-wrap: anywhere; }
.ep-kv.is-past .ep-k, .ep-kv.is-past .ep-v { text-decoration: line-through; color: var(--dimmer); }
.ep-kv.is-avoid .ep-k { color: var(--amber-ink); }
.ep-none { font-size: 12.5px; color: var(--dimmer); }
.ep-line { font-size: 13px; color: var(--ink); padding: 2px 0; }
.ep-dim { color: var(--dimmer); }
.ep-bs, .ep-doc { padding: 6px 0; border-top: 1px solid var(--line); }
.ep-bs:first-of-type, .ep-doc:first-of-type { border-top: 0; }
.ep-bs-top { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.ep-bs-top .ep-k { flex: 0 0 34%; }
.ep-bs-top .ep-v { flex: 1 1 auto; min-width: 0; }
.ep-when { font: 11px var(--mono); color: var(--dim); white-space: nowrap; }
.ep-add { width: 28px; height: 26px; border: 1px solid var(--rule); border-radius: 6px; color: var(--teal); cursor: pointer; }
.ep-earlier { font-size: 12px; color: var(--dim); padding-left: 34%; }
.ep-addform { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 0 34%; }
.ep-addform .tb-in { flex: 1 1 200px; }
.ep-addform .ask-line { flex: 1 1 100%; }
.ep-syn { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin-top: 3px; }
.ep-doc.is-past .ep-k { text-decoration: line-through; }
/* SETUP (setup.ts) */
.su-block { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.su-block > .btn { align-self: flex-start; }
.su-h { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.su-sub { font: 11px var(--mono); color: var(--label); letter-spacing: .04em; margin: 8px 0 3px; }
.su-now { font-size: 13px; color: var(--ink); }
.su-dim { color: var(--dimmer); }
.su-note { font-size: 11.5px; color: var(--dim); margin: 4px 0; line-height: 1.45; }
.su-routes { margin-top: 10px; }
.su-route { border: 1px solid var(--rule); border-radius: 8px; padding: 7px 10px; margin: 5px 0; }
.su-route.is-on { border-color: var(--teal); }
.su-route.is-off { opacity: .75; }
.su-route-h { font-weight: 600; font-size: 12.5px; }
.su-warn { font-size: 12px; color: var(--amber-ink); margin: 4px 0; }
.su-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.su-in { flex: 1 1 auto; min-width: 0; min-height: 34px; box-sizing: border-box; padding: 6px 9px;
  border: 1px solid var(--rule); border-radius: 7px; background: var(--panel-2); color: var(--ink); font: 13px var(--display); }
textarea.su-in { resize: vertical; }
.su-logo { margin-bottom: 10px; }
.su-logo-pic { min-height: 48px; display: flex; align-items: center; font-size: 12px; color: var(--dim); margin: 4px 0 6px; }
.su-logo-pic img { max-height: 64px; max-width: 100%; background: #fff; border-radius: 4px; padding: 4px; }
/* A speedinsert's diagram and its [[ ]] blanks (25 September). The text sizes
   come from the classes these sit beside -- tb-item-sub, su-note, su-logo-pic --
   so the generated desktop type scale needs nothing new. */
.spd-blanks { color: var(--teal); font-family: var(--mono); }
.spd-tags { color: var(--label); }
.spd-shape { display: flex; gap: 6px; margin-top: 6px; }
.spd-under { display: flex; flex-direction: column; gap: 6px; }
.spd-diagram { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.spd-pic img { max-height: 240px; }
.sd-coming { display: flex; flex-direction: column; gap: 6px; }
.sd-coming-row { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 10px 12px; border: 1px dashed var(--rule); border-radius: var(--r); }
.sd-coming-t { font-size: 14px; color: var(--ink); }
.sd-coming-s { font-size: 13px; color: var(--dim); }
.reg-schemes { max-height: 50vh; overflow-y: auto; }
.reg-schemes .reg-card-head .btn { margin-left: auto; }
.sd-coming-tag { font-size: 10.5px; letter-spacing: 0.12em; color: var(--amber); }
.fv-row { padding: 3px 0; }
.fv-row-t { font-size: 13px; color: var(--ink); }
.fv-row-s { font-size: 11.5px; color: var(--dim); }
/* In the tiles and the bar the section's SOURCE note ("the medication tag")
   is the old page's provenance line; here it crowds the drug it annotates. */
#folder.fo-desk .fo-h-r { display: none; }
#folder.fo-desk .fo-enc-l { flex: 0 1 auto; min-width: 0; }
#folder.fo-desk .fo-enc-r { margin-left: auto; flex: 0 0 auto; color: var(--dim); }
.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(--rule); 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); }

/* -- monitored conditions, pinned by the doctor (24 September) --------- */
.mo-body { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.mo-card { border: 1px solid var(--rule); border-radius: var(--r); padding: 6px 8px;
  display: flex; flex-direction: column; gap: 4px; }
.mo-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.mo-t { font-weight: 600; font-size: 12px; }
.mo-s { font-size: 11px; color: var(--dim); }
.mo-line-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.mo-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.mo-name { font-size: 12px; }
.mo-latest { font-size: 11px; color: var(--ink); }
.mo-band-words { font-size: 10.5px; color: var(--dim); }
.mo-chart { flex: 0 0 150px; width: 150px; height: 44px; }
.mo-svg { width: 100%; height: 44px; display: block; overflow: visible; }
.mo-band { fill: var(--teal); fill-opacity: .10; }
.mo-p50 { stroke: var(--teal); stroke-width: 1; stroke-dasharray: 3 2; stroke-opacity: .6;
  vector-effect: non-scaling-stroke; }
.mo-line { stroke: var(--teal-2); stroke-width: 1.2; stroke-opacity: .8; vector-effect: non-scaling-stroke; }
.mo-dot { fill: var(--teal-2); fill-opacity: .75; }
.mo-dot.is-last { fill: var(--teal); fill-opacity: 1; }
.mo-nopoints { font-size: 11px; color: var(--dimmer); }
.mo-acts { display: flex; gap: 6px; }
.mo-form, .mo-pin, .mo-cal { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mo-pin { border-top: 1px solid var(--rule); padding-top: 6px; }
.mo-form .tb-in, .mo-pin .tb-in { width: auto; flex: 1 1 120px; }
.mo-cal .tb-in { flex: 0 1 90px; min-width: 70px; }
.mo-k { font-size: 11px; color: var(--dim); }
.mo-why { font-size: 11px; color: var(--dimmer); width: 100%; }
.mo-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mo-gone { font-size: 11px; color: var(--dimmer); text-decoration: line-through; }

/* -- correcting one field, read back first (commit 16) ----------------- */
.fo-fix { margin: 6px 0 8px; padding: 8px; border: 1px solid var(--rule);
  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(--rule);
  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(--rule); 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(--rule); background: var(--panel); }
.home-key-tag { font-size: 9px; letter-spacing: .1em; color: var(--amber); margin-top: 2px; }
/* THE PANEL CHROME (24 September) -- the web app's one template: ⛶ full
   view and × close, top right, small icons whose HIT AREA is the 44px floor
   (the transparent ::before), never the drawing. On a router screen it rides
   a zero-height row where the Home bar was, so the screen below keeps every
   pixel it had; the icons sit over its top-right corner. */
.pc-view { position: relative; height: 0; z-index: 250; }
.pc-view > .pc-chrome { position: absolute; top: 6px; right: 12px; }
.pc-chrome { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.pc-btn { position: relative; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hush); border-radius: 7px; background: var(--panel);
  color: var(--dim); font: 16px/1 var(--display, inherit); cursor: pointer; }
.pc-btn::before { content: ''; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%); }
.pc-btn:hover { border-color: var(--teal-2); color: var(--teal-2); }
.pc-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pc-btn[aria-pressed="true"] { color: var(--teal); border-color: var(--teal); }
/* FULL VIEW, when the browser will not go fullscreen: the panel is a fixed
   overlay over the whole viewport; and a router screen made full folds the
   top bar and the encounter strip away so the screen is the page. */
.pc-overlay { position: fixed !important; inset: 0 !important; z-index: 300 !important;
  max-height: none !important; width: auto !important; border-radius: 0 !important;
  background: var(--panel); overflow: auto; display: flex; flex-direction: column; }
.is-fullview:fullscreen { background: var(--panel); overflow: auto; display: flex;
  flex-direction: column; width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
body.pc-page-full #spine, body.pc-page-full #encworkspace,
body.pc-page-full #demobanner { display: none !important; }
.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 control over a screen, #viewchrome, 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(--rule); }
.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(--rule); 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(--rule); 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(--rule); 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(--rule); 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(--rule); }
.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(--rule); 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(--rule); 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-close {
  flex: 0 0 auto; width: 32px; height: 32px; margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--dim); font: 22px/1 var(--display);
  cursor: pointer;
}
.ci-close:hover { color: var(--ink); border-color: var(--teal-2); }
.ci-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── the dedicated registration page ─────────────────────────────────── */
.registration { min-height: 0; overflow: auto; padding: 18px 22px 28px; }
.reg-page { width: min(1240px, 100%); margin: 0 auto; }
.reg-head { display: flex; align-items: flex-start; gap: 18px; }
.reg-title { min-width: 0; }
.reg-kicker { color: var(--teal); font-size: 10px; letter-spacing: .18em; }
.reg-title h1 { margin: 3px 0 2px; font-size: 24px; font-weight: 600; color: var(--ink-2); }
.reg-sub { margin: 0; max-width: 760px; color: var(--dim); font-size: 12px; line-height: 1.5; }
.reg-close {
  margin-left: auto; flex: 0 0 auto; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--dim); font: 23px/1 var(--display); cursor: pointer;
}
.reg-close:hover { color: var(--ink); border-color: var(--teal-2); }
.reg-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.reg-tools { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; }
.reg-mode, .reg-tool { min-height: 32px; padding: 6px 11px; border-radius: 8px; font: 11px var(--mono); }
.reg-mode { border: 1px solid var(--teal); color: var(--teal); background: var(--line); }
.reg-mode-dot { display: inline-block; width: 7px; height: 7px; margin-right: 3px; border-radius: 50%; background: var(--teal); }
.reg-tool { border: 1px dashed var(--rule); color: var(--dimmer); background: transparent; }
.reg-tool:disabled { opacity: .72; cursor: not-allowed; }
.reg-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px; align-items: start; }
.reg-card { min-width: 0; padding: 15px 16px; border: 1px solid var(--rule); border-radius: var(--r-l); background: var(--panel); }
.reg-core { grid-row: span 2; }
.reg-standard { grid-column: 1 / -1; }
.reg-card-head { display: flex; align-items: baseline; gap: 10px; }
.reg-card h2 { margin: 0; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.reg-card h3 { margin: 0 0 8px; color: var(--teal); font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.reg-required, .reg-optional { margin-left: auto; font-size: 9px; letter-spacing: .12em; }
.reg-required { color: var(--amber); }
.reg-optional { color: var(--dimmer); }
.reg-help { margin: 7px 0 12px; color: var(--dim); font-size: 11px; line-height: 1.5; }
.reg-core-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.reg-active-field, .reg-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.reg-field-label { color: var(--dim); font: 10px var(--mono); letter-spacing: .05em; }
.reg-active-input, .reg-transcript, .reg-input {
  width: 100%; min-height: 38px; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: 7px; background: var(--panel-2);
  color: var(--ink); font: 13px var(--display);
}
.reg-active-input:focus-visible, .reg-transcript:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.reg-active-input.bad { border-color: var(--red-ink); }
.reg-preview { grid-column: 1 / -1; min-height: 34px; display: flex; align-items: center; padding: 8px 10px; border: 1px solid var(--hush); border-radius: 7px; color: var(--teal); background: var(--line); font-size: 11px; }
/* The date of birth: a typed box with a calendar button; the native date
   input sits under the button, invisible, so its picker opens there and is
   narrowed by the age (24 September). */
.reg-dob-box { position: relative; display: flex; align-items: stretch; }
.reg-dob-box .reg-dob-text { padding-right: 44px; }
.reg-dob-text.bad { border-color: var(--red-ink); }
.reg-dob-cal { position: absolute; right: 0; top: 0; bottom: 0; width: 40px; min-height: 38px;
  border: 0; border-left: 1px solid var(--rule); border-radius: 0 7px 7px 0; background: transparent;
  color: var(--ink-2); font-size: 15px; cursor: pointer; z-index: 1; }
.reg-dob-cal:hover, .reg-dob-cal:focus-visible { background: var(--line); outline: none; }
.reg-dob-pick { position: absolute; right: 0; bottom: 0; width: 40px; height: 38px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.reg-age-note { color: var(--amber-ink); font-size: 10.5px; line-height: 1.35; }
.reg-dob-error { grid-column: 1 / -1; margin-top: -5px; color: var(--red-ink); font-size: 10.5px; line-height: 1.35; }
.reg-commit { margin-top: 12px; width: 100%; }
.reg-status { min-height: 16px; margin-top: 10px; color: var(--dim); font-size: 11px; }
.reg-status.is-ok { color: var(--teal); }
.reg-rec-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.reg-rec-row .btn { min-height: 38px; padding: 7px 11px; font-size: 11px; }
.reg-record { color: var(--red-ink); border-color: rgba(224,90,74,.4); }
.reg-review-btn { color: var(--teal); }
.reg-readback { margin-top: 10px; padding: 9px 10px; border-left: 3px solid var(--amber); color: var(--amber-ink); background: rgba(224,164,74,.08); font-size: 11px; line-height: 1.45; }
.reg-readback.is-complete { border-left-color: var(--teal); color: var(--teal); background: var(--line); }
.reg-readback.is-error { border-left-color: var(--red-ink); color: var(--red-ink); background: rgba(224,90,74,.08); }
/* THE PATIENT'S DETAILS (24 September), live: groups of chart fields. */
.reg-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; }
.reg-detail-group { min-width: 0; }
.reg-detail-group.reg-wide { grid-column: span 2; }
.reg-detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.reg-req { margin-left: 6px; padding: 0 5px; border-radius: 4px; color: var(--red-ink); background: rgba(224,90,74,.1); font-size: 9.5px; }
.reg-covers { display: flex; flex-direction: column; gap: 6px; }
.reg-cover { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr auto; gap: 6px; align-items: center; }
.reg-cover-x { width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 50%; color: var(--dim); cursor: pointer; }
.reg-link { margin-top: 6px; padding: 4px 0; border: 0; background: none; align-self: flex-start; color: var(--teal); text-decoration: underline; font-size: 12px; cursor: pointer; }
@media (max-width: 1100px) {
  .reg-main { grid-template-columns: 1fr; }
  .reg-core { grid-row: auto; }
  .reg-standard { grid-column: auto; }
  .reg-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .registration { padding: 12px; }
  .reg-core-fields, .reg-detail-grid, .reg-detail-fields, .reg-cover { grid-template-columns: 1fr; }
  .reg-detail-group.reg-wide { grid-column: auto; }
  .reg-rec-row { grid-template-columns: 1fr; }
  .reg-rec-row .btn, .reg-transcript { width: 100%; }
}
.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(--rule);
  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(--rule); 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(--rule);
  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(--rule); 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; min-width: 0; }
.wk-dh.is-today { background: rgba(79,214,200,.10); }
.wk-dh.is-today .wk-dh-d { color: var(--ink-2); }   /* --dim on the lit column read 2.8:1 */
.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; overflow: hidden; text-overflow: ellipsis; }   /* a row header that will not fit gives way, never clips (the cancelled row's own count did) */
.wk-rh.wk-edge { color: var(--amber-ink); }
.wk-cell { min-height: 26px; padding: 2px; display: flex;
  flex-direction: column; gap: 2px; min-width: 0; }
/* 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; }
/* A CHIP STAYS IN ITS DAY. The type scale took it from 10px to 13.3px on a
   desktop, and "On call · Gleneagles" measured 134px in a ~102px column: it
   ran over Wednesday and 32px over Saturday's "Annual leave". The clamp was
   the phone's alone. It is every width's now, and week.ts puts the whole
   text on each chip's title so nothing is lost to the ellipsis. */
.wk-band { min-width: 0; }
.wk-band .wk-chip { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* A CHIP THAT IS A CONTROL. Only the chrome a browser adds is taken off:
   the border, background, colour and padding belong to .wk-chip and
   .wk-deskleave, and zeroing them inline would leave the pill with one
   edge and the wrong font. No width, because a chip sizes to its text --
   a full-width one would push the on-call chips onto a line of their own. */
button.wk-chip { font-family: inherit; text-align: left; cursor: pointer;
                 appearance: none; }
.wk-e { min-height: 28px; font-size: 11px; padding: 2px 4px; border-radius: 4px;
  border-left: 3px solid transparent; display: flex; gap: 4px;
  align-items: center; 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 DESK SHORT-HANDED -- neutral, and deliberately not .wk-leave's olive.
   The two chips mean opposite things to a patient trying to book: his leave
   says there is no clinic that day, this says there is one and the counter
   is thin. Built on TOKENS rather than this block's hand-picked literals,
   so it follows the day/dark toggle. */
.wk-deskleave { background: rgba(140,140,140,.16); color: var(--dim);
  border-color: rgba(140,140,140,.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; }
/* THE LEGEND STAYS IN VIEW -- Dr Lau, 25 September, pointing at this row:
   "these are the legends - fix it at the bottom for easy reference".
   Measured in Chromium at 1440x900 before this rule: the week overflowed the
   carousel's card by 104px and the legend sat at y=939 under a card that
   ends at 887 -- out of sight exactly while the colours were being read.
   Sticky to the bottom of whatever scrolls. ITS GROUND IS THE PANEL'S TINT
   LAID OVER THE OPAQUE PAGE: --panel alone is translucent glass (0.66 dark,
   0.82 day), and the first version of this rule used it bare -- the 16:00
   label and Saturday's column showed straight through the legend, which a
   position check could not see and a screenshot did. Laid over --bg it is
   the card's own colour and solid, in both themes. DESKTOP ONLY: on the
   phone the week is one card in a scrolling column, where a pinned legend
   would float over the cards below it. */
@media (min-width: 1100px) {
  .wk-legend { position: sticky; bottom: 0; z-index: 2;
    background: linear-gradient(var(--panel), var(--panel)), var(--bg);
    padding: 8px 2px 4px; border-top: 1px solid var(--rule); }
  /* A STICKY BOX STOPS AT ITS SCROLLER'S PADDING, so in the carousel the week
     went on scrolling, visibly, in the 12px strip beneath the legend -- the
     second thing the screenshot showed. It reaches down over that padding,
     and its own padding keeps the words where they were. */
  .dk-car-body .wk-legend { bottom: calc(-1 * var(--car-pad-b));
    padding-bottom: calc(4px + var(--car-pad-b)); }
}
.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 WEEK IN THE CAROUSEL is ~800px across; the entry's "what" is hidden
   there as it is below 900px, so a name reads whole and the grid, with
   minmax(0,1fr) columns and min-width:0 cells, never scrolls sideways. */
.dk-car .wk-e-w { display: none; }
/* AND THE WEEK FILLS THE CARD, on the desktop only. Its grid stood at its
   content height, so on a screen taller than the 1440x900 this project has
   always measured at, the carousel drew eight hour bands and left the rest
   of the page black -- about 45% of the viewport at 1900x950, measured off
   his own screen on 17 September. The panel takes the card's height and
   week.js's own `1fr` hour rows share it, so the grid grows with the screen
   instead of the page growing a void. Scoped to `.dk-car`: on the phone the
   week is a card in a scrolling column and must keep its natural height. */
.dk-car-panel[data-panel="week"] { height: 100%; min-height: 0;
  display: flex; flex-direction: column; }
/* AND IT FITS THE CARD, NEVER MORE (25 September). With the grid sized to its
   content an hour holding two patients made every `1fr` hour that tall, and
   the week scrolled inside its frame. A zero flex basis gives the grid the
   card's height and no more; a busy hour lays its entries side by side and
   counts the rest on a "+N" (week.ts's fillCell), so no hour is taller than
   its share and nobody is dropped without a count. */
.dk-car-panel[data-panel="week"] .wk-grid { flex: 1 1 0; min-height: 0; overflow: hidden; }
.wk-over { display: none; }
.dk-car .wk-cell { overflow: hidden; min-height: 0; }
.dk-car .wk-cell > .wk-e { flex: 0 0 auto; min-height: 19px; padding: 0 4px; }
.dk-car .wk-cell > .wk-e-over { display: none; }
.dk-car .wk-over { display: inline-flex; align-items: center; font-size: 11px;
  padding: 0 6px; border-radius: 999px; color: var(--amber-ink);
  border: 1px solid var(--rule); cursor: default; }
/* THE ORDERING PANEL (25 September): the home page's top-right corner, two
   faces on its header -- Orders and the front desk -- and inside Orders
   three tabs, one link bar and the tab's form. The corner scrolls inside
   itself, as every corner does; "wide ↗" opens the same panel across the
   grid. */
.dk-faces { display: flex; gap: 4px; flex: 0 1 auto; min-width: 0; }
.dk-face { font: inherit; font-size: 11px; letter-spacing: .06em; padding: 3px 6px;
  border-radius: 999px; border: 1px solid transparent; background: none;
  color: var(--dim); cursor: pointer; white-space: nowrap; }
.dk-face.is-on { color: var(--teal); border-color: var(--rule); background: rgba(79,214,200,.08); }
.dk-orders-body { overflow: auto; }
.dk-face-orders .dk-corner-sub, .dk-face-orders .dk-corner-open:not(.dk-orders-wide) { display: none; }
.dk-tr:not(.dk-face-orders) .dk-orders-wide { display: none; }
.or { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.or-tabs { display: flex; gap: 4px; }
.or-tab { flex: 1 1 0; font: inherit; font-size: 12px; padding: 6px 4px; border-radius: 8px;
  border: 1px solid var(--rule); background: none; color: var(--dim); cursor: pointer; }
.or-tab.is-on { color: var(--ink); border-color: var(--teal); background: rgba(79,214,200,.10); }
.or-link { border: 1px dashed var(--rule); border-radius: 8px; padding: 6px 8px; }
.or-unlinked { font-size: 12px; color: var(--amber-ink); margin-bottom: 4px; }
.or-who { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.or-reg { font-size: 12px; padding: 1px 6px; border-radius: 6px; background: rgba(79,214,200,.12); }
.or-name { font-size: 12.5px; }
.or-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.or-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.or-k { font-size: 11px; color: var(--dim); }
.or-in { font: inherit; font-size: 12.5px; padding: 5px 7px; border-radius: 6px; min-width: 0;
  border: 1px solid var(--rule); background: var(--sunk); color: var(--ink); width: 100%; box-sizing: border-box; }
.or-area { min-height: 44px; resize: vertical; }
.or-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.or-when { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.or-find { display: flex; flex-direction: column; gap: 4px; }
.or-hits { display: flex; flex-direction: column; gap: 2px; max-height: 160px; overflow: auto; }
.or-hit { font: inherit; font-size: 12px; text-align: left; padding: 5px 7px; border-radius: 6px;
  border: 1px solid var(--rule); background: none; color: var(--ink); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-none { font-size: 12px; color: var(--dim); }
.or-portal { margin: -2px 0 8px; }
.or-portal:empty { display: none; }
.or-chosen { display: flex; gap: 6px; align-items: center; min-width: 0; }
.or-desc { font-size: 12px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-ai { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.or-ai-said { font-size: 12px; color: var(--dim); }
.or-ai-said:empty { display: none; }
.or-ai-picks { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.or-ai-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; min-width: 0; }
.or-ai-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.or-ai-words .or-desc { white-space: normal; }
.or-ai-why { font-size: 11px; color: var(--dim); font-style: italic; }
.or-fee { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--rule); }
.or-v { font-size: 12.5px; }
.or-plan { color: var(--teal); }
.or-dim { color: var(--dim); }
.or-no { color: var(--red); }
.or-tests { display: flex; flex-wrap: wrap; gap: 4px; }
.or-test { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; padding: 2px 4px 2px 8px;
  border-radius: 999px; border: 1px solid var(--rule); }
.or-x { font: inherit; font-size: 11px; background: none; border: 0; color: var(--dim); cursor: pointer; }
.or-send { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.dk-full-orders { display: flex; flex-direction: column; }
.dk-orders-wide-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 16px;
  max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box; }
/* One page per tab: two columns, and the search hits drop OVER the page
   rather than pushing it down into a scroll. */
.or-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; align-items: start; }
.or-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.or-col > *, .or-body > * { flex-shrink: 0; }
.or-hits > * { flex-shrink: 0; }
.or-find { position: relative; }
.or-hits:not(:empty) { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 2px;
  max-height: 280px; padding: 4px; border: 1px solid var(--rule); border-radius: 8px;
  background: linear-gradient(var(--panel), var(--panel)), var(--bg); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
/* Each hit is read WHOLE -- two spine codes differ only at the end of a long
   description, so an ellipsis hides exactly what he chooses between. On the
   wide page the list spans both columns and takes most of the height. */
.or-hits .or-hit { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.or-cols .or-hits:not(:empty) { right: calc(-100% - 18px); max-height: 60vh; }
.or-cols .or-area { min-height: 120px; }
.or-clin-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.or-clin-h .or-k { flex: 1 1 auto; }
.or-prec { min-height: 38px; resize: vertical; }
/* the patient's preparation, to the desk -- pre-filled, editable (2 Oct) */
.or-instr { min-height: 38px; resize: vertical; }
.or-form { display: flex; flex-direction: column; gap: 4px; }
.or-total { font-size: 12.5px; color: var(--teal); }
.or-totals { gap: 4px; }
.or-tline { display: flex; gap: 8px; justify-content: space-between; font-size: 12.5px; }
.or-tline .or-tk { color: var(--dim); flex: none; }
.or-tline .or-tv { text-align: right; }
.or-tline.is-total { font-weight: 600; color: var(--teal); border-top: 1px solid var(--rule); padding-top: 4px; }
/* The stay and the vendors (2 October): day surgery or an admission, its
   days ward by ward with the rate beside each, and one card per vendor. */
.or-seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; align-self: flex-start; }
.or-seg-b { font: inherit; font-size: 12.5px; padding: 5px 12px; border: 0; background: none; color: var(--dim); cursor: pointer; }
.or-seg-b.is-on { background: rgba(79,214,200,.16); color: var(--teal); font-weight: 600; }
.or-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.or-rate { font-size: 11px; color: var(--dim); }
.or-chk { display: flex; gap: 6px; align-items: center; font-size: 12.5px; }
.or-vendor { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-top: 1px dashed var(--rule); }
.or-vendor-top { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.or-contact { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.or-contact a { color: var(--teal); text-decoration: none; }
.or-src { font-size: 11px; color: var(--dim); display: flex; flex-direction: column; gap: 1px; }
@media (max-width: 560px) { .or-days { grid-template-columns: 1fr; } }

/* ── stats.css — 📊 Clinic statistics, under Settings (26 September) ── */
/* New visits, follow-up visits and revenue over a period, by clinic, and the
   no-shows beneath. The prefix is `cs-`, grepped against app/app.css before
   it was claimed (only `recs-` contains the letters, and it is not a match).

   Values are app.css's own tokens throughout, so the day/dark toggle carries
   this screen with everything else and nothing here has a literal colour.
   The no-shows block reuses My Tasks' own `tk-` rows, so it needs no rule. */

.cs-head { display: flex; gap: 10px; align-items: baseline; margin: 10px 0 8px; }
.cs-head:first-child { margin-top: 0; }
.cs-title { font-weight: 600; }
.cs-n { color: var(--dim); }

.cs-periods, .cs-custom, .cs-clinics {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px;
}
.cs-tab, .cs-btn {
  min-height: var(--tap, 44px); padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ink); font: inherit; cursor: pointer;
}
.cs-tab.is-active { border-color: var(--teal); color: var(--teal); font-weight: 600; }
.cs-btn { color: var(--teal); }
.cs-lbl { color: var(--dim); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.cs-date {
  min-height: var(--tap, 44px); padding: 0 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--sunk); color: var(--ink);
}
.cs-chk {
  display: inline-flex; gap: 6px; align-items: center; min-height: var(--tap, 44px);
  padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.cs-chk.is-unknown { border-style: dashed; color: var(--dim); }

.cs-status { color: var(--dim); font-size: 12px; margin: 0 0 8px; min-height: 1.4em; }
.cs-status.is-warn, .cs-note.is-warn, .cs-tr > .is-warn { color: var(--amber); }

.cs-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.cs-fig { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); min-width: 0; }
.cs-fig-v { font-size: 22px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-fig-l { color: var(--dim); font-size: 12px; margin-top: 2px; }
.cs-fig-s { color: var(--dim); font-size: 11px; margin-top: 2px; }

.cs-table { display: grid; gap: 0; margin: 0 0 10px; }
.cs-tr {
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
  gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.cs-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-th { color: var(--dim); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.cs-tr.is-unknown .cs-name { color: var(--dim); font-style: italic; }
.cs-sub { color: var(--dim); font-size: 11px; padding: 0 0 6px 12px; }
.cs-none { color: var(--dim); font-size: 12px; padding: 6px 0; }
.cs-notes { margin: 0 0 12px; }
.cs-note { color: var(--dim); font-size: 12px; line-height: 1.45; margin: 2px 0; }

@media (max-width: 700px) {
  .cs-figs { grid-template-columns: minmax(0, 1fr); }
  .cs-tr { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .cs-tr > span:last-child { display: none; }
}
.or-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.or-qchip { display: inline-flex; gap: 6px; align-items: baseline; font: inherit; font-size: 12.5px; cursor: pointer;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule); background: none; color: var(--ink); }
.or-qchip:hover { border-color: var(--teal-2); }
.or-qtag { font-size: 10px; letter-spacing: .08em; color: var(--teal); }
.or-code { font-size: 12px; color: var(--teal); font-family: var(--mono); }
.or-picks { display: flex; flex-direction: column; gap: 3px; max-height: 190px; overflow: auto; }
.or-picks > * { flex-shrink: 0; }
.or-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
  font: inherit; font-size: 12.5px; text-align: left; padding: 4px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--hush); background: none; color: var(--ink); }
.or-pick.is-on { border-color: var(--teal); background: rgba(79,214,200,.10); }
.or-pick-c { font-size: 11px; color: var(--teal); }
.or-pick-p { color: var(--dim); }
.or-form-row { display: flex; gap: 6px; flex-wrap: wrap; }
.or-print { position: fixed; width: 0; height: 0; border: 0; left: -9999px; }
.or-launch { display: flex; flex-direction: column; gap: 8px; }
.or-tile { display: flex; gap: 10px; align-items: center; text-align: left; font: inherit;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule); background: none;
  color: var(--ink); cursor: pointer; }
.or-tile:hover { border-color: var(--teal-2); }
.or-tile-i { font-size: 20px; }
.or-tile-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.or-tile-l { font-weight: 600; font-size: 13px; }
.or-tile-s { font-size: 11px; color: var(--dim); }

/* 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(--rule);
  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; max-width: 720px; }
.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(--rule); border-radius: 8px; }
.pt-in:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }
.pt-list { display: flex; flex-direction: column; }
/* Cards in a grid, grouped by when last seen (24 Sept): name, number, visits
   and date together rather than strung across the whole screen. */
.pt-group { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--label); margin: 10px 0 6px; }
.pt-group:first-child { margin-top: 0; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.pt-row { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--panel);
  font-size: 12px; cursor: pointer; min-width: 0; text-align: left; align-items: stretch; }
.pt-row:hover { border-color: var(--teal-2); }
.pt-who { font-weight: 600; background: transparent; border: 0; color: inherit; text-align: left;
  font: inherit; font-weight: 600; padding: 0; cursor: pointer; min-height: 24px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
.pt-foot > span { white-space: nowrap; }
.pt-n { font-size: 10.5px; color: var(--dimmer); }
.pt-when { font-size: 10.5px; color: var(--dim); }
.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(--rule); 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; }
/* SEARCHING THE CATALOGUES, on the Guides screen. Dr Lau, 17 September:
   "pls ensure all the guides are searchable - TOSP and medications within
   inventory." The tabs wrap rather than scroll sideways, because a
   catalogue the thumb cannot see is one he does not know he can search. */
.gs-box { margin: 10px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.gs-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-tab { font: inherit; font-size: 11px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--hush); background: transparent; color: var(--dim);
  cursor: pointer; white-space: nowrap; }
.gs-tab:hover { border-color: var(--teal-2); color: var(--teal-2); }
.gs-tab.is-on { border-color: rgba(79,214,200,.4); background: rgba(79,214,200,.1);
  color: var(--teal); }
.gs-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.gs-bar { display: flex; gap: 6px; }
.gs-find { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12.5px;
  padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--hush);
  background: var(--sunk); color: var(--ink); }
.gs-find:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.gs-go { font: inherit; font-size: 12px; padding: 8px 14px; border-radius: var(--r);
  border: 1px solid var(--hush); background: transparent; color: var(--dim);
  cursor: pointer; white-space: nowrap; }
.gs-go:hover { border-color: var(--teal-2); color: var(--teal-2); }
.gs-go:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.gs-out { display: flex; flex-direction: column; gap: 6px; }
.gs-count { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--dimmer); text-transform: uppercase; }
.gs-wait, .gs-none { font-size: 11.5px; color: var(--dim); padding: 6px 0; }
.gs-row { padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--panel); display: flex; flex-direction: column; gap: 3px; }
.gs-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.gs-sub { font-size: 11px; color: var(--dim); }
.gs-fact { display: flex; gap: 8px; font-size: 11px; align-items: baseline; }
.gs-fl { flex: 0 0 auto; min-width: 86px; color: var(--dimmer);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; }
.gs-fv { flex: 1 1 auto; min-width: 0; color: var(--ink-2); }
.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(--rule); 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(--rule); 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(--rule); 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; }
/* The referral details (4 Oct): the line, his own marked, and the edit. */
.pv-ref { font-size: 11px; color: var(--dim); margin-top: 3px; }
.pv-his { color: var(--teal); font-weight: 600; }
.pv-ref-edit { margin-top: 6px; }
.pv-ref-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-width: 420px; }
/* PROVIDERS & CONTACTS, EDITED (25 September): his four groups, each entry
   with its Edit and Remove, the form opening beneath the row it edits.
   prt-, because pt- was taken three times over -- the points checklist,
   the PDF templates and the patient list all style it. */
.prt-group { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.prt-group-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.prt-group-n { font-size: 11px; color: var(--dim); }
.prt-none { font-size: 12px; color: var(--dim); }
.prt-row { border-left: 2px solid var(--hush); padding: 3px 0 3px 12px; display: flex; flex-direction: column; gap: 3px; }
.prt-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.prt-name { font-size: 13px; color: var(--ink); font-weight: 500; }
.prt-cat { font-size: 11px; color: var(--dim); }
.prt-reach { font-size: 12.5px; color: var(--teal); overflow-wrap: anywhere; }
.prt-reach.su-dim { color: var(--dim); }
.prt-acts { display: flex; gap: 6px; }
.prt-form { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; }
.prt-field { display: flex; align-items: center; gap: 8px; }
.prt-field-k { flex: 0 0 72px; font-size: 12px; color: var(--dim); }
.prt-field .su-in { flex: 1 1 auto; min-width: 0; }
.prt-form > .btn, .prt-add { align-self: flex-start; }


/* ── 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(--rule); 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(--rule); 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); }

/* STOCK ON HAND (2 October) -- stock.js, mounted under Inventory & Charges
   and behind the front desk's Stock button. Its own prefix, as every screen. */
.inv-onhand { font-size: 11px; color: var(--dim); }
.inv-onhand.is-flag { color: var(--amber-ink); }
.inv-stock { margin: 10px 0 16px; padding: 12px; border: 1px solid var(--rule); border-radius: 8px; }
.stk-body { display: flex; flex-direction: column; gap: 8px; }
.stk-tools { display: flex; gap: 8px; align-items: center; }
.stk-tools .inv-filter { margin: 6px 0; }
.stk-which { padding: 8px; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; }
.stk-list { display: flex; flex-direction: column; }
.stk-row { display: flex; flex-wrap: wrap; width: 100%; align-items: baseline; gap: 4px 10px; padding: 7px 4px; text-align: left; background: none; border: 0; border-top: 1px solid var(--hush); color: var(--ink); cursor: pointer; }
.stk-row.open { background: var(--panel); }
.stk-code { font-size: 11px; color: var(--dim); min-width: 74px; }
.stk-name { font-size: 12.5px; flex: 1 1 auto; min-width: 120px; }
.stk-qty { font-size: 13px; color: var(--teal); min-width: 40px; text-align: right; }
.stk-qty.is-neg { color: var(--red-ink); }
.stk-marks { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.stk-flag { font-size: 10.5px; padding: 1px 6px; border-radius: 9px; border: 1px solid var(--rule); color: var(--dim); }
.stk-count, .stk-expired { color: var(--red-ink); border-color: var(--red-ink); }
.stk-low, .stk-expiring { color: var(--amber-ink); border-color: var(--amber); }
.stk-detail { padding: 6px 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.stk-lots, .stk-soon { display: flex; flex-direction: column; gap: 3px; }
.stk-lot { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 12px; color: var(--ink); }
.stk-lot.is-soon { color: var(--amber-ink); }
.stk-lot.is-expired { color: var(--red-ink); }
.stk-lot-q { min-width: 36px; text-align: right; }
.stk-lot-b { font-size: 11px; color: var(--dim); }
.stk-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.stk-form { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.stk-form-h, .stk-hist-h { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.stk-field { display: flex; flex-direction: column; gap: 2px; }
.stk-field-l { font-size: 11.5px; color: var(--dim); }
.stk-input { padding: 7px 9px; font-size: 13px; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; }
.stk-hist { display: flex; flex-direction: column; gap: 2px; }
.stk-move { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: 12px; padding: 3px 0; border-top: 1px solid var(--hush); }
.stk-move-w { font-size: 11px; color: var(--dim); min-width: 130px; }
.stk-move-n { font-size: 11px; color: var(--dim); }

/* 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(--rule);
                   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(--rule);
               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(--rule);
           border-radius: 8px; padding: 11px 13px; margin-bottom: 10px; }
.st-card-t { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.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; }
/* A CLINIC'S CARD, EDITABLE (25 September): each field's row carries its
   own Edit, and the box opens beneath it -- so what is being changed is
   read beside the box that changes it. */
.st-edit { padding: 2px 0; }
.st-edit .st-field { align-items: baseline; }
/* An address is lines: the building, the street, the postcode. */
.st-edit .st-field-v { white-space: pre-line; }
.st-edit-b { margin-left: auto; flex: 0 0 auto; }
.st-edit-form { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; }
.st-edit-form .su-in { width: 100%; box-sizing: border-box; }
.st-edit-form > .btn { align-self: flex-start; }
/* The hours as three rows: the day, then its times. */
.su-day { align-items: center; }
.su-day-l { flex: 0 0 64px; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.su-day-in { flex: 1 1 auto; min-width: 0; }
.st-add { margin: 4px 0 10px; }
.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(--rule); 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(--rule);
             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(--rule); 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(--rule);
          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(--rule);
          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(--rule); border-radius: 8px; }
.mt-in:focus { outline: none; border-color: var(--teal); }
.mt-case { background: var(--panel); border: 1px solid var(--rule);
           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(--rule); 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(--rule); 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(--rule); }
.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(--rule); 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(--rule); 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(--rule); 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(--rule); 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(--rule); 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(--rule); 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(--rule);
             border-radius: 999px; padding: 0 6px; line-height: 1.5; }
/* ── the desktop's first page (9 September) ───────────────────────────────
   Dr Lau: "Desktop: large screen - responsive - to fill the page without
   the need to scroll up and down." The region takes the viewport below the
   spine and clips; each corner scrolls inside itself. Appended, never
   inserted, for the reason the duty board's block gives above. Below
   DESK_MIN (desktop.js) none of this applies: the class is not put on. */
.home.is-desk, .deskenc { --dk-side-width: minmax(268px, 21%); --dk-rail-width: 38px;
  max-width: none; margin: 0; padding: 10px 12px 12px;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: grid; gap: 10px;
  grid-template-columns: var(--dk-left-track, var(--dk-side-width)) minmax(0, 1fr) var(--dk-right-track, var(--dk-side-width));
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "tl centre tr" "bl centre br"; }
/* A CORNER OPENED FULL (Dr Lau, 10 September, points 4-6): the grid keeps
   every corner as it was and hides them under the one full host dkfull.js
   paints, so ↙ is a class removed and nothing repainted. */
.home.is-desk.dk-expanded, .deskenc.dk-expanded { display: flex; flex-direction: column; }
.dk-expanded > :not(.dk-full) { display: none !important; }
.dk-corner { display: flex; flex-direction: column; min-height: 0; min-width: 0;
  overflow: hidden; padding: 11px 13px; border: 1px solid var(--rule);
  border-radius: 12px; background: var(--panel); }
.dk-tl { grid-area: tl; } .dk-bl { grid-area: bl; }
/* THE ENCOUNTER PAGE (24 September): the bill down the whole left side, no
   waiting room. */
.dk-enc-layout > .dk-billside { grid-area: auto; grid-column: tl-start / tl-end; grid-row: tl-start / bl-end; }
.dk-tr { grid-area: tr; } .dk-br { grid-area: br; }
.dk-centre { grid-area: centre; display: flex; flex-direction: column; gap: 10px;
  min-height: 0; min-width: 0; }
/* THE HEADER WRAPS, AND THE SUB GIVES WAY FIRST. A nowrap row inside a
   corner that clips pushes whatever sits at its end outside the box once the
   type scale raises the title (measured 31px out at 1300px, LE-58), and the
   corner's ↗ sits at that end. The sub truncates before the row wraps. */
.dk-corner-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--hush); }
.dk-corner-t { font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: var(--teal); }
.dk-corner-sub { font-size: 10.5px; color: var(--dim); margin-left: auto;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-corner-open { font: inherit; font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--hush); background: transparent; color: var(--dim);
  cursor: pointer; white-space: nowrap; }
.dk-corner-open:hover { border-color: var(--teal-2); color: var(--teal-2); }
.dk-corner-open:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dk-corner-body { flex: 1 1 auto; min-height: 0; overflow: auto;
  -webkit-overflow-scrolling: touch; }
.dk-corner:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* THE LEFT EDGE FOLDS without covering the centre. The two clinical panels
   leave the grid and a narrow, keyboard-operable rail takes their column;
   the weekly schedule and encounter workspace receive the released width. */
.dk-side-rail { display: none; min-height: 0; min-width: 0; padding: 6px 3px;
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--panel); overflow-x: hidden; overflow-y: auto;
  flex-direction: column; align-items: stretch; gap: 8px; }
.dk-left-rail { grid-column: 1; grid-row: 1 / -1; }
.dk-right-rail { grid-column: 3; grid-row: 1 / -1; }
.dk-left-collapsed, [data-left-rail="collapsed"] {
  --dk-left-track: var(--dk-rail-width); }
.dk-right-collapsed, [data-right-rail="collapsed"] {
  --dk-right-track: var(--dk-rail-width); }
.dk-left-collapsed > .dk-tl,
.dk-left-collapsed > .dk-bl { display: none; }
.dk-right-collapsed > .dk-tr,
.dk-right-collapsed > .dk-br { display: none; }
.dk-left-collapsed > .dk-left-rail { display: flex; }
.dk-right-collapsed > .dk-right-rail { display: flex; }
.dk-side-toggle, .dk-side-rail-tab { border: 1px solid var(--hush);
  background: transparent; color: var(--dim); font: inherit; cursor: pointer; }
.dk-side-toggle { display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 4px 8px; border-radius: 9px; font-size: 20px;
  line-height: 1; }
.dk-side-rail > .dk-side-toggle { width: 100%; min-width: 0; padding-inline: 0; }
.dk-side-rail > .dk-side-rail-tab { min-width: 0; }
.dk-side-collapse { min-width: 32px; min-height: 28px; margin-left: 2px;
  padding: 1px 7px; font-size: 17px; }
.dk-side-rail-tab { flex: 1 1 0; min-block-size: 88px; padding: 8px 4px;
  border-radius: 9px; color: var(--ink-2); font-family: var(--mono);
  font-size: 9px; font-weight: 600; letter-spacing: .12em;
  line-height: 1.3; text-transform: uppercase; writing-mode: vertical-rl;
  transform: rotate(180deg); }
.dk-right-rail .dk-side-rail-tab { transform: none; }
.dk-side-toggle:hover, .dk-side-rail-tab:hover {
  border-color: var(--teal-2); color: var(--teal-2); }
.dk-side-toggle:focus-visible, .dk-side-rail-tab:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px; }
.dk-expanded > .dk-side-rail { display: none !important; }
/* THE WAITING ROOM AS THE LIGHT SYSTEM — one list, the lamp its own, the
   rows COMPACT so a corner holds four before it scrolls rather than one.
   The room's own row is 146px at the phone's size; at ~30px controls it is
   about 86px, which is what lets a corner this tall show more than one. */
.dk-lane-none { font-size: 10.5px; color: var(--faint); padding-top: 2px; }
.dk-lights { display: flex; flex-direction: column; }
.dk-lights .wr-row { padding: 7px 0 6px; border-top: 1px solid rgba(255,255,255,.05); }
.dk-lights .wr-row:first-child { border-top: 0; }
.dk-lights .wr-head { gap: 6px; }
.dk-lights .wr-acts { gap: 5px; margin-top: 5px; }
.dk-lights .wr-acts .btn { min-height: 30px; padding: 3px 9px; font-size: 11px; }
.dk-lights .wr-type { min-height: 30px; padding: 3px 6px; font-size: 11px; }
/* the tasks corner keeps its counts and drops its second title */
.dk-corner .tk-head:first-child .tk-t { display: none; }
.dk-corner .tk-head:first-child { margin-top: 0; }
/* the front desk */
.dk-notice { display: flex; gap: 8px; padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,.05); }
.dk-notice:first-child { border-top: 0; }
.dk-notice-i { flex: 0 0 auto; font-size: 13px; }
.dk-notice-b { min-width: 0; }
.dk-notice-t { font-size: 12px; color: var(--ink); }
.dk-notice-m { font-size: 10px; color: var(--dimmer); margin-top: 1px; }
.dk-notice-n { font-size: 11px; color: var(--dim); margin-top: 2px; }
.dk-desk-room { font-size: 11px; color: var(--dim); padding: 8px 0 2px; }
/* the functional icons */
.dk-icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dk-tile { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 64px; padding: 8px 6px; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--panel-2); color: var(--ink-2);
  font: inherit; font-size: 11.5px; cursor: pointer; text-align: center; }
.dk-tile:hover { border-color: var(--teal-2); background: rgba(79,214,200,.06); }
.dk-tile:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dk-tile-i { font-size: 20px; line-height: 1; }
.dk-tile-pair { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; min-height: 64px; }
.dk-tile-pair .dk-tile { min-height: 0; flex-direction: row; gap: 6px; padding: 4px 6px; }
.dk-tile-pair .dk-tile-i { font-size: 14px; }
/* the centre */
.dk-lead { min-height: 0; }
.dk-lead .home-resume { margin: 0; }
.dk-last { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--dim); padding: 2px 4px; }
.dk-last .tk-key { font-size: 12px; color: var(--ink-2); }
/* Selecting a schedule entry gives context in the centre without opening an
   encounter. A checked-in patient is directed to the one existing room row,
   keeping encounter opening an explicit, server-owned action. */
.dk-schedule-context { display: flex; flex-direction: column; gap: 6px;
  padding: 9px 11px; border: 1px solid rgba(79,214,200,.32);
  border-radius: 10px; background: rgba(79,214,200,.06); }
.dk-schedule-context[hidden] { display: none; }
.dk-schedule-select-kicker { font: 600 9px/1.2 var(--mono); letter-spacing: .16em;
  color: var(--teal); }
.dk-schedule-select-head { display: flex; align-items: baseline; gap: 8px; }
.dk-schedule-select-name { min-width: 0; margin-right: auto; font-size: 13px;
  font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.dk-schedule-select-facts { font-size: 10.5px; color: var(--dim); overflow-wrap: anywhere; }
.dk-schedule-select-action { display: flex; flex-direction: column; gap: 5px; }
.dk-schedule-select-action .wr-row { padding: 6px 0 0; }
.dk-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dk-actions .dk-action { gap: 6px; padding-left: 9px; padding-right: 8px; }
.dk-actions .dk-action-i { font-size: 18px; }
/* NO DEAD ENDS (26 Sept): the router's own card over a page that drew nothing. */
.deadend { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); }
.deadend-card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 420px;
  padding: 20px 22px; border-radius: 14px; border: 1px solid var(--rule);
  background: linear-gradient(var(--panel), var(--panel)), var(--bg); box-shadow: var(--z2); }
.deadend-t { font-weight: 600; font-size: 15px; }
.deadend-s { font-size: 12.5px; color: var(--dim); }
#spine .wordmark[role="link"] { cursor: pointer; }
/* Five tiles in the row since Patient check-in joined (26 Sept): the label
   wraps rather than being cut, at the size the row was drawn for. */
.dk-actions .dk-action-l { font-size: 14px; white-space: normal; overflow: visible; }
.dk-actions .dk-action-s { font-size: 11.5px; }
@media (max-width: 1360px) {
  .dk-actions .dk-action-l { font-size: 13px; }
  .dk-actions .dk-action-i { display: none; }
}
.dk-action { display: flex; align-items: center; gap: 10px; min-height: 58px;
  padding: 10px 14px; border: 1px solid rgba(79,214,200,.3); border-radius: 12px;
  background: rgba(79,214,200,.08); color: var(--ink); font: inherit;
  text-align: left; cursor: pointer; }
.dk-action:hover { background: rgba(79,214,200,.14); border-color: var(--teal); }
.dk-action.is-on { border-color: var(--teal); background: rgba(79,214,200,.18); }
.dk-action:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dk-action-i { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.dk-action-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dk-action-l { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-action-s { font-size: 10.5px; color: var(--dim); }
.dk-reg { padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--panel); }
.dk-reg-h { font-weight: 600; font-size: 12.5px; margin-bottom: 4px; }
.dk-reg .wr-form { margin-top: 8px; }
/* the carousel */
.dk-car { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--panel);
  overflow: hidden; }
.dk-car-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid var(--hush); }
.dk-car-tab { padding: 5px 12px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--dim); font: inherit; font-size: 12px;
  cursor: pointer; }
.dk-car-tab:hover { color: var(--ink-2); }
.dk-car-tab.is-on { border-color: rgba(79,214,200,.4); background: rgba(79,214,200,.1);
  color: var(--teal); font-weight: 600; }
.dk-car-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dk-car-arrow { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hush);
  background: transparent; color: var(--dim); font: inherit; cursor: pointer; }
.dk-car-arrow:hover { border-color: var(--teal-2); color: var(--teal-2); }
.dk-car-arrow:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dk-car-n { margin-left: auto; font-size: 10px; color: var(--dimmer); }
.dk-car-tools { margin-left: auto; display: flex; align-items: center; min-width: 0; }
.dk-car-tools + .dk-car-n { margin-left: 8px; }
.dk-car-tools .wk-head { margin: 0; gap: 4px; }
.dk-car-tools .btn { min-height: 0; padding: 3px 10px; font-size: 12px; }
.dk-car-tools .wk-t { font-size: 12px; white-space: nowrap; }
/* The foot padding is a variable because the week's pinned legend has to
   reach past it: a sticky box stops at its scroller's padding. */
.dk-car-body { --car-pad-b: 12px; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 12px var(--car-pad-b); }
.dk-car-wait, .dk-car-none { font-size: 11.5px; color: var(--dim); padding: 8px 0; }
/* the tools along the foot */
.dk-tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.dk-tool { display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 58px; padding: 8px 6px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--panel); color: var(--ink-2); font: inherit; font-size: 11.5px;
  cursor: pointer; text-align: center; }
.dk-tool:hover { border-color: var(--teal-2); background: rgba(79,214,200,.06); }
.dk-tool:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dk-tool-i { font-size: 20px; line-height: 1; }
/* everything else, as a sheet */
.dk-sheet { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(4,9,10,0.72); }
.dk-sheet-card { width: min(760px, 100%); max-height: 90vh; overflow: auto;
  display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px;
  background: rgba(7,15,16,0.98); border: 1px solid rgba(79,214,200,0.22);
  box-shadow: var(--z2); }
.dk-sheet-h { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--teal); }
.dk-sheet-c { font-size: 11px; color: var(--dimmer); margin-top: 6px; }
.dk-sheet-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.dk-sheet-k { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--panel);
  color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.dk-sheet-k:hover { border-color: var(--teal-2); }
.dk-sheet-k:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dk-sheet-k.away { opacity: .62; cursor: default; }
/* the top bar's two new things: the appointment bot's line, and the clock */
.clock { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--dim);
  white-space: nowrap; flex: 0 0 auto; }
.apptbar { display: inline-flex; align-items: center; gap: 7px; max-width: 380px; min-width: 0;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--dim); font-family: var(--display);
  font-size: 11.5px; cursor: pointer; text-align: left; }
.apptbar-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apptbar.has { border-color: rgba(224,164,74,.45); color: var(--amber-ink);
  background: rgba(224,164,74,.08); }
.apptbar:hover { border-color: var(--teal-2); }
.apptbar:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 1099px) { .spine .clock, .spine .apptbar { display: none; } }

/* ── the desktop's encounter page (9 September, page 2) ───────────────────
   The same frame; the centre is the note. The phone's own columns are moved
   in and laid out two-up here, flat -- the tilted planes are the widescreen
   cockpit's and would fight a centre that is already a third of the screen. */
.dk-areas { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--panel); color: var(--dim); font: inherit; font-size: 12px;
  cursor: pointer; }
.dk-tab:hover { color: var(--ink-2); border-color: var(--teal-2); }
.dk-tab.is-on { border-color: rgba(79,214,200,.45); background: rgba(79,214,200,.12);
  color: var(--teal); font-weight: 600; }
.dk-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dk-tab-n { font-size: 10.5px; color: var(--dimmer); }
.dk-tab.is-on .dk-tab-n { color: var(--teal); }
.dk-area { display: flex; flex-direction: column; min-height: 0; max-height: 42%;
  border: 1px solid rgba(79,214,200,.3); border-radius: 12px; background: var(--panel);
  overflow: hidden; }
.dk-area-h { display: flex; align-items: baseline; gap: 8px; padding: 7px 12px;
  border-bottom: 1px solid var(--hush); }
.dk-area-t { font-weight: 600; font-size: 12.5px; color: var(--teal); }
.dk-area-hint { font-size: 10.5px; color: var(--dimmer); margin-right: auto; }
.dk-area-b { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 12px 12px;
  display: flex; flex-direction: column; gap: 8px; }
.dk-body-gone { font-size: 11px; color: var(--dimmer); padding: 8px 10px;
  border: 1px dashed var(--rule); border-radius: 8px; }
.dk-area-b .field { margin-bottom: 0; }
.dk-area-b .map-svg { width: min(52%, 320px); }
/* A TRANSCRIPT ROW IS `dk-trow`, NOT `dk-tr`. It was `dk-tr`, the top-right
   corner's own seat class, and sitting later in the file it won: both pages
   drew that corner with `padding: 6px 0` and its text ran into the border.
   Measured in Chromium on 23 September, found by the render check. */
.dk-trow { padding: 6px 0; border-top: 1px solid rgba(255,255,255,.05); }
.dk-trow:first-child { border-top: 0; }
.dk-trow-h { font-size: 10px; color: var(--dimmer); letter-spacing: .06em; }
.dk-trow-t { font: 400 13px/1.55 "Newsreader", Georgia, serif; color: var(--ink-2);
  white-space: pre-wrap; margin-top: 3px; }
.dk-trow.is-out .dk-trow-t { text-decoration: line-through; color: var(--dim); }
.dk-tosp .pr-head { margin-bottom: 8px; }
/* the imaging screen within the screen */
.dk-img-studies { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-img-study { display: inline-flex; gap: 7px; align-items: center; padding: 3px 9px;
  border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2);
  font-size: 11px; color: var(--ink-2); }
.dk-img-study .mono { font-size: 10px; color: var(--dim); }
.dk-img-bar { display: flex; gap: 6px; align-items: center; }
.dk-img-frame { width: 100%; min-height: 220px; flex: 1 1 auto; border: 1px solid var(--rule);
  border-radius: 8px; background: #fff; }
.dk-img-portal { flex: 1 1 auto; min-width: 0; padding: 7px 9px; font: inherit; font-size: 12px;
  color: inherit; background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; }
.dk-img-portal:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }
.dk-img-none { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px;
  border: 1px dashed var(--rule); border-radius: 8px; font-size: 11.5px; color: var(--dim); }
.dk-img-paste { padding: 10px 12px; border: 1px dashed rgba(79,214,200,.45); border-radius: 8px;
  font-size: 11.5px; color: var(--dim); text-align: center; cursor: text; }
.dk-img-paste:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px;
  color: var(--ink-2); }
/* the documents */
.dk-docs { display: flex; flex-direction: column; gap: 2px; }
.dk-doc { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; }
.dk-doc.away { opacity: .62; }
.dk-doc-tick { background: transparent; border: 0; color: var(--dim); font-size: 15px;
  cursor: pointer; padding: 0; line-height: 1; }
.dk-doc-tick.is-on { color: var(--teal); }
.dk-doc-tick:disabled { opacity: .5; cursor: default; }
.dk-doc-t { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.dk-doc-l { font-size: 12.5px; }
.dk-doc-s { font-size: 10.5px; color: var(--dimmer); }
.dk-doc-pdf { margin-top: 6px; }
/* the note, moved in: two columns, flat */
.dk-enc-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); overflow: hidden; }
.dk-enc-main .capture { flex: 0 0 auto; }
.dk-enc-main main { flex: 1 1 auto; min-height: 0; overflow: hidden; perspective: none;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 42%); grid-template-areas: "note fields"; }
.dk-enc-main .col-sources { display: none; }
.dk-enc-main .col-note { display: block; padding: 12px 16px; transform: none;
  background: none; }
.dk-enc-main .col-fields { padding: 12px 14px; transform: none; box-shadow: none;
  background: none; border-left: 1px solid var(--line); }
.dk-enc-main .footrule { flex: 0 0 auto; padding: 7px 14px; }
.dk-enc-main .cap-strip { display: none; }
/* THE STAGE: the note+pass box and any open holding area share one row. With
   no area open the area is [hidden] and the box fills the row. */
.dk-enc-stage { display: flex; gap: 10px; flex: 1 1 auto; min-height: 0; min-width: 0; }
.dk-enc-stage .dk-area { max-height: none; flex: 1 1 0; min-width: 0; }
/* AN OPEN AREA TAKES THE NOTE'S SEAT: the box narrows to just the pass and
   the note column is hidden, so the area gets the note's full-height width. */
.dk-enc-stage.area-open .dk-enc-main { flex: 0 0 clamp(340px, 40%, 460px); }
.dk-enc-stage.area-open .dk-enc-main main {
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "fields"; }
.dk-enc-stage.area-open .dk-enc-main .col-note { display: none; }
.close.is-flash { box-shadow: 0 0 0 2px var(--teal); transition: box-shadow .2s; }
/* the foot: Done, Pend, Close, Cancel */
.dk-enc-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; }
.dk-act { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 8px 12px;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--panel);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dk-act:hover { border-color: var(--teal-2); }
.dk-act:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dk-act.is-done { border-color: rgba(79,214,200,.44); background: rgba(79,214,200,.12); }
.dk-act.is-done .dk-act-l { color: var(--teal); }
.dk-act.is-quiet { color: var(--dim); }
.dk-act.is-off { opacity: .62; }
.dk-act-i { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.dk-act-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dk-act-l { font-weight: 600; font-size: 13px; }
.dk-act-s { font-size: 10px; color: var(--dim); }
.dk-pend { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; margin-top: 6px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); }
/* under the note: the type, and the two speed buttons */
.dk-under { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dk-types { display: flex; flex-wrap: wrap; gap: 5px; }
.dk-type { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--hush);
  color: var(--dimmer); white-space: nowrap; }
.dk-type.is-on { border-color: rgba(79,214,200,.45); background: rgba(79,214,200,.1);
  color: var(--teal); font-weight: 600; }
.dk-speed { display: flex; gap: 6px; margin-left: auto; }
.dk-speed-b { border-color: rgba(224,164,74,.4); color: var(--amber-ink); }
.dk-speed-b.is-on { border-color: var(--amber); background: rgba(224,164,74,.14); color: var(--amber-ink); }
.dk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dk-two-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dk-two-h { font-weight: 600; font-size: 12.5px; }
/* the bill, top right of the encounter page */
.dk-bill-kinds { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.dk-bill-kind { display: inline-flex; gap: 6px; align-items: baseline; font-size: 10.5px;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--hush); color: var(--dimmer); }
.dk-bill-kind.has { border-color: rgba(79,214,200,.35); color: var(--ink-2); }
.dk-bill-kind-n { color: var(--teal); }
.dk-bill .mn-title { margin-bottom: 4px; }
/* help and about, small, under the clinic's tiles */
.dk-small { display: flex; gap: 12px; justify-content: flex-end; padding-top: 8px; }
.dk-small-b { background: transparent; border: 0; padding: 2px 4px; font: inherit; font-size: 10.5px;
  color: var(--dimmer); cursor: pointer; text-decoration: underline dotted; }
.dk-small-b:hover { color: var(--teal-2); }
.dk-small-b:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dk-info-t { font-weight: 600; font-size: 13px; margin-top: 6px; }
.dk-info-l { font-size: 11.5px; color: var(--ink-2); font-family: var(--mono); }

/* ── DAY VIEW — the desktop's light theme (Dr Lau, 10 September) ───────────
   "allow the toggle on desktop view between darkview and day view - follow
   best practices on contrast and visual colour management."

   Dark is the default and is UNCHANGED by this block: every rule here is an
   override that only bites when the toggle sets data-theme="day" on <html>.
   The palette is measured to WCAG AA (verify_theme_contrast.py drives it):
   body text is >= 4.5:1 on its ground, and every accent keeps its MEANING --
   teal primary, amber warning, red alert and pain, blue numbness -- darkened
   until it is legible on a light ground rather than glowing on a dark one.
   Accents that were bright-on-dark (the teal tints) become dark-on-pale, so
   a chip that read as a teal glow reads as a teal label; nothing is invented.

   Only the tokens and a handful of dark LITERAL grounds are repainted here;
   the great majority of surfaces already draw through var(--...) tokens and
   flip for free. */
:root[data-theme="day"] {
  color-scheme: light;

  --bg:        #f0f5f5;
  --ink:       #152a2c;
  --ink-2:     #223c40;
  --dim:       #375357;
  --dimmer:    #435f63;
  --faint:     #4e6a6f;
  --hush:      #c6d5d7;
  --rule:      #55797d;
  --label:     #24484c;

  --teal:      #006b60;
  --teal-2:    #155f58;
  --amber:     #78520c;
  --amber-ink: #674816;
  --red:       #b72d26;
  --red-ink:   #8c2924;
  --map-numb:  #225bad;

  --line:      #b5c9cc;
  --line-soft: #d5e1e2;
  --panel:     #ffffff;
  --panel-2:   #f4f8f8;
  --sunk:      #f4f8f8;

  --z1: 0 8px 22px rgba(20,50,47,0.10);
  --z2: 0 18px 44px rgba(20,50,47,0.14);
  --z3: -30px 0 64px rgba(20,50,47,0.16);
  /* Shared with the front desk: opaque grounds and readable secondary text. */
  --panel-hover: #edf5f3;
  --selected-bg: #deefea;
  --accent-ink: #ffffff;
}

/* the page ground: a light radial rather than the dark one */
:root[data-theme="day"],
:root[data-theme="day"] body {
  background:
    radial-gradient(1400px 900px at 44% 34%, #edf1ef 0%, #e5ebe8 58%, #dde4e1 100%),
    var(--bg);
}
/* THE PATIENT CARD ON A DAY PAGE (LE-58, Parcel M's finding): its ground was
   a literal near-black, the one card the day block had not repainted. */
[data-theme="day"] .patient-card { background: var(--panel); color: var(--ink); border-color: var(--hush); }


/* the tilted depth planes (the widescreen cockpit) go pale, not dark */
[data-theme="day"] .col-fields {
  background: linear-gradient(168deg, rgba(243,246,244,0.9), rgba(229,235,232,0.7)); }
[data-theme="day"] .col-sources {
  background: linear-gradient(168deg, rgba(243,246,244,0.75), rgba(229,235,232,0.5)); }

/* raised cards (sheets, the body plane) go white */
[data-theme="day"] .map-plane-card,
[data-theme="day"] .sheet-card,
[data-theme="day"] .dk-sheet-card,
[data-theme="day"] .ch-sheet { background: #f6f8f7; }

/* modal scrims dim the page but stay light-appropriate, not near-black */
[data-theme="day"] .map-plane,
[data-theme="day"] .sheet,
[data-theme="day"] .dk-sheet,
[data-theme="day"] .ch-sheet-wrap { background: rgba(23,38,36,0.42); }

/* the sign-in ground is a whole page, so a light ground rather than a scrim */
[data-theme="day"] .gate { background: rgba(238,243,242,0.96); }

/* bands and bars: the foot, the capture strip, the drawer, the chat brand */
[data-theme="day"] .footrule,
[data-theme="day"] .cap-bar,
[data-theme="day"] .cap-drawer { background: rgba(255,255,255,0.86); }
[data-theme="day"] .ch-brand { background: var(--panel); }
[data-theme="day"] .file-bar {
  background: linear-gradient(180deg, rgba(238,243,242,0) 0%, rgba(238,243,242,0.94) 34%); }

/* the map dial, and a left-out block */
[data-theme="day"] .map-dial { background: rgba(255,255,255,0.7); }
[data-theme="day"] .block.out { background: rgba(20,50,47,0.05); }

/* the pain/numbness inks a touch stronger on white, so a wide 0.5 stroke
   still reads clearly as red or blue */
[data-theme="day"] .map-ink path { stroke-opacity: 0.62; }

/* ── the toggle itself, in the desktop top bar ──────────────────────────── */
.themebtn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--dim);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  cursor: pointer; white-space: nowrap; }
.themebtn:hover { border-color: var(--teal-2); color: var(--ink-2); }
.themebtn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 1099px) { .spine .themebtn { display: none; } }

/* ── room.js's own (LE-49, Parcel E) — the registration guard's inline
   sentence, folded in from its fragment ─────────────────────────────────
   His mock-up, point 7 / board FbRegisterGuard: a bad date of birth is
   said HERE, under the whole field row, before anything is sent, in the
   door's own words -- read off `console_room.dob()` and echoed by
   `app/room.js`'s `walkInForm`, never spelled by this stylesheet or that
   screen. Values off the board; the red already in the palette
   (`--red` / `--red-ink`), which is what carries the correct colour
   under the day theme too. */

/* the date field itself, while the guard holds */
.wr-in.bad {
  border-color: var(--red);
  color: var(--red-ink);
  box-shadow: 0 0 0 2px rgba(224,90,74,.18);
}

/* the sentence, a sibling below the form row -- .wr-err */
.wr-err {
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: 6px;
  border: 1px solid rgba(224,90,74,.5);
  background: rgba(224,90,74,.08);
  color: var(--red-ink);
  font: 500 12px/1.5 var(--mono);
}

/* Register, disabled for exactly as long as the guard holds -- the same
   dimmed convention this sheet already gives a disabled control elsewhere
   (.cho-btn:disabled and the rest), scoped to this form so it touches no
   other button on the page. */
.wr-form .btn:disabled { opacity: .45; cursor: default; }

/* ── a corner, opened full: the four expansions (LE-49, Parcel C) ─────────
   A FRAGMENT. The integrator appends this to app/app.css under its own
   marker; it is not loaded on its own and it declares no token of its own.
   Every colour, radius and size below is app.css's -- so the dark and day
   palettes both follow with nothing to keep in step, and an expansion
   cannot drift from the corner it grew out of.

   IT STYLES ONLY WHAT app/dkfull.js DRAWS: the prefixes are `dk-full`,
   `dk-quad`, `dk-back`, `dk-q` and `q-`. The rows inside a quarter are the
   borrowed modules' own (`wr-`, `tk-`, `fo-`, `rq-`, `st-`) and are styled
   by app.css already; the only rules here that name them are the two
   COMPACTIONS at the foot, which are scoped under `.dk-quad` so nothing
   outside an expansion can be reached by them.

   THE PAGE NEVER SCROLLS. `.dk-full` is the region below the top bar and
   clips; each quarter scrolls inside itself, exactly as a corner does. The
   values are the mock-up's own, measured at 1440x900 --
   design/FbRoomFull.dc.html, FbTasksFull, FbDeskFull, FbClinicFull. */

/* THE HOST. The integrator paints an expansion into the page's own region,
   which is a grid (`.home.is-desk`, `.deskenc`); the grid placement below
   lets the expansion span the whole of it while the corners are hidden, so
   opening one is a class and a paint rather than a second layout. */
.dk-full {
  grid-column: 1 / -1; grid-row: 1 / -1;
  flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
}

/* the header: what is open, how much of it there is, and the way back */
.dk-full-h {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; border: 1px solid var(--rule);
  border-radius: 12px; background: var(--panel);
}
.dk-full-t { font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--teal); }
.dk-full-sub { font-size: 12px; color: var(--dim); }
.dk-back {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(79, 214, 200, .44); background: rgba(79, 214, 200, .12);
  color: var(--teal); font: inherit; font-size: 12px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.dk-back:hover { border-color: var(--teal); }
.dk-back:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* the four parts: two by two, each one the frame's own corner */
.dk-quad {
  flex: 1 1 auto; min-height: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
/* a quarter is a `.dk-corner` and takes its box from app.css; what it must
   NOT take is the corner's own grid area, or all four would stack in one */
.dk-quad .dk-corner { grid-area: auto; }

/* what a quarter says about itself */
.q-foot { margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 10.5px; color: var(--dimmer); line-height: 1.5; }
.q-empty { font-size: 11px; color: var(--faint); padding: 6px 0; }
/* A ROW THIS PAGE HAD NO RULE FOR, kept and named -- amber, because it is
   something to look at rather than something wrong. */
.q-odd { margin-top: 8px; font-size: 10.5px; color: var(--amber);
  line-height: 1.5; }
/* a painter its module does not export yet, named rather than blank */
.dk-full-seam { font-size: 11px; color: var(--amber-ink);
  border: 1px solid rgba(224, 164, 74, .45); background: rgba(224, 164, 74, .08);
  border-radius: 8px; padding: 8px 10px; line-height: 1.5; }

/* the clinic corner's remaining tiles, beneath the audit */
.q-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.q-link { display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 5px 11px; border-radius: 10px;
  border: 1px solid var(--rule); background: var(--panel);
  color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; }
.q-link:hover { border-color: var(--teal-2); color: var(--teal-2); }
.q-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.q-link-i { font-size: 14px; line-height: 1; }
.q-link-l { white-space: nowrap; }

/* ── the two compactions, scoped inside a quarter and nowhere else ────────
   A quarter is about half a corner's width and half the page's height, so
   the borrowed rows come down a size, and the borrowed painters' OWN
   headings go: the quarter's header already says which screen this is, and
   two headings one above the other is the mock-up's one measured misfit. */
.dk-quad .wr-row { padding: 7px 0 6px; }
.dk-quad .wr-acts { gap: 5px; margin-top: 5px; }
.dk-quad .wr-acts .btn { min-height: 30px; padding: 3px 9px; font-size: 11px; }
.dk-quad .wr-type { min-height: 30px; padding: 3px 6px; font-size: 11px; }
.dk-quad .tk-row { padding: 5px 0; }
.dk-quad .tk-what { font-size: 12.5px; }
.dk-quad .tk-group { margin: 6px 0 1px; }
.dk-quad .fo-enc { padding: 6px 0; }
.dk-quad .rq-row { padding: 7px 0; }
.dk-quad .st-card { margin-bottom: 8px; }
.dk-quad .st-field-k { flex: 0 0 44%; }

/* THE BORROWED PAINTER'S OWN TITLE GOES, AND ONLY THE TITLE. The quarter's
   header already says which screen this is, and two headings one above the
   other is the mock-up's one measured misfit -- but the COUNT beside a
   title is a fact the quarter's own header does not carry (how many are
   waiting; which encounter the basket belongs to; that it is the latest
   rather than the open one), so each is left standing. `.tk-head` is left
   whole: in the fourth quarter it is what separates the defaulters from
   the tray above them. */
.dk-quad .st-head,
.dk-quad .rq-title .rq-t,
.dk-quad .mn-title .mn-t { display: none; }

/* THE REGISTRATION FORM under the desk's quarter: the same drawer the
   first page opens, sitting in a quarter rather than in the centre. */
.dk-quad .dk-reg { margin-top: 8px; }

/* ── fb_folder.css — the folder's new sections (LE-49, Parcel D) ─────────
   A DELIVERY VEHICLE, NOT A SECOND STYLESHEET. `app/app.css` is one of the
   eight files the integrator alone touches (LE-37), and it is not parsed by
   either required check — so a parcel that edited it would be the shape
   that put conflict markers on `main`. This block is folded in under the
   marker line above; `verify_console_folder.py` reads it back out of
   app.css by that marker once it has been, and out of this file until then.
   Both markers are load-bearing: the slice is BOUNDED AT BOTH ENDS, so
   whatever is appended after it later cannot be swallowed into it — the
   LE-48 lesson, where a block appended at end-of-file joined the last
   parcel.

   Nothing here restyles a class the folder already had. `.fo-h`, `.fo-enc`,
   `.fo-enc-l`, `.fo-enc-r`, `.fo-encs` and `.fo-enc.is-gone` are the
   folder's own and are reused as they are; what follows is only what the
   five new sections need. Fold it beside the commit-13 folder block. */

/* A HEAD THAT NAMES ITS SOURCE. "the medication tag", "the cabinet, by
   kind", "off each encounter's DIAGNOSIS" — a panel that says where a row
   came from can be checked against the tag it came from, which is the
   habit the rest of these screens already have. It is a SEPARATE class
   rather than a change to `.fo-h`, so every head the folder already draws
   renders exactly as it did. */
.fo-h2 { display: flex; align-items: baseline; gap: 8px; }
.fo-h-r { margin-left: auto; font-size: 10px; letter-spacing: 0.04em;
  text-transform: none; color: var(--dimmer); text-align: right;
  max-width: 58%; line-height: 1.35; }

/* THE FLAG A RESULT ARRIVES WITH. Never raised here — `flagged` is what
   the record carries, and the door passes it through. Amber rather than
   red: this marks a row to READ, it does not grade a result. */
.fo-flag { font-size: 11px; color: var(--amber); flex: 0 0 auto; }

/* The films' seat, claimed while the page paints and filled when the
   cabinet answers, so an async list cannot land under a section drawn
   after it. It lays out nothing of its own. */
.fo-films-slot { display: contents; }

/* A LONG LEFT-HAND CELL MUST NOT PUSH THE DATE OFF THE ROW. A diagnosis, a
   drug with its schedule and a stay with its operation are all longer than
   an encounter label, and `.fo-enc` is a flex row whose right cell is
   pushed out by `margin-left: auto`. Wrapping the left cell keeps the
   stamp where the eye looks for it, at the right, on every width. */
.fo-enc-l { min-width: 0; overflow-wrap: anywhere; }
.fo-enc-r { flex: 0 0 auto; white-space: nowrap; }

/* THE FOLDER AS A CORNER OF THE ENCOUNTER PAGE. `paintFolderInto` draws
   the same rows into a quarter of a 1440-wide page, where the room is
   vertical and not horizontal: the type steps down, the heads sit closer,
   and the corner scrolls INSIDE itself so the page never does. Under the
   desktop width only — the phone's folder is unchanged. */
@media (min-width: 1100px) {
  .dk-corner-body .fo-h { margin: 8px 0 3px; }
  .dk-corner-body .fo-h:first-child { margin-top: 0; }
  .dk-corner-body .fo-enc { font-size: 11.5px; line-height: 1.35; }
  .dk-corner-body .fo-enc-r { font-size: 10.5px; }
  .dk-corner-body .fo-m { font-size: 11.5px; }
  .dk-corner-body .fo-m-n { min-width: 0; }
  .dk-corner-body .fo-fields { gap: 2px 8px; }
}
/* ── end fb_folder.css ──────────────────────────────────────────────── */

/* ── fb_checkin.css — the check-in, grouped by kind (LE-49, Parcel A) ─────
   A FRAGMENT, NOT A SECOND STYLESHEET. `app/app.css` is one of the eight
   files the integrator alone touches (LE-37); this text is folded into it
   under the marker line above, appended to the EXISTING check-in block
   that begins at `.checkin { padding: 10px 14px; }` rather than dropped at
   end-of-file — the LE-48 lesson, that a block after the last marker joins
   the last parcel, is why this file is bounded at both ends rather than
   left to trail off at EOF.

   NOTHING HERE RESTYLES A CLASS THE SCREEN ALREADY HAD FOR A DIFFERENT
   REASON. `.ci-head`, `.ci-t`, `.ci-where`, `.ci-why`, `.ci-none` and
   `.ci-status` (with its four state classes) are app.css's own, already
   token-driven, and still correct for the new markup — only `.ci-t` gets
   one line here, because the board's card carries a larger title than the
   list it replaces. `.ci-row`, `.ci-list`, `.ci-kind`, `.ci-confirm` and
   `.is-asking` are the OLD list's, now unused by app/checkin.js; left in
   place rather than pruned, because pruning app.css is not this parcel's
   file to touch.

   EVERYTHING BELOW IS NEW, FOR THE THREE-GROUP CARD design/FbCheckin.dc.html
   DRAWS: `.ci` (the card), `.ci-cols` (the three columns), `.ci-group` /
   `.ci-g-t` (a group and its heading), `.ci-entity` (a group's own
   sub-heading, by who invoices — added after delivery, on a coordinator
   follow-up: the board's own look, `#c3ddda` bold, which is `var(--ink-2)`
   exactly), `.ci-places` / `.ci-place` (the wrapping row of name-sized
   buttons — 44px tall, `var(--tap)`), its three marks `.is-here` /
   `.is-ask` / `.is-expected`, `.ci-hint` (the "Opens …" line under a
   group) and `.ci-foot`.

   TOKENS, NOT THE BOARD'S OWN HEX. The board was drawn dark-only, before
   this session's dark/day toggle (also 10 September, same desktop PR);
   every colour below is one of app.css's existing `var(--…)` tokens so
   this card flips with the rest of the page for free, exactly as the
   toggle's own commit made the rest of the shell do — a fragment that
   pasted the board's literals back in would be the one corner of the
   desktop the toggle does not reach. The one deliberate exception is
   `.is-ask`'s ring, a low-alpha decorative box-shadow with no text sitting
   on it, so it is not a contrast question the way a background or a
   border is.

   `.ci-cols` STACKS BELOW THE DESKTOP WIDTH (1099px, `.spine`'s own
   breakpoint) because `app/checkin.js` is the phone's check-in screen
   too — the mock-up is the desktop's, the module is not. */

.ci-t { font-size: 16px; }

.ci {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  gap: 10px; padding: 14px 16px; border: 1px solid var(--rule);
  border-radius: var(--r-l); background: var(--panel);
}
.ci-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; flex: 1 1 auto; min-height: 0;
}
.ci-group {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border: 1px solid var(--hush); border-radius: var(--r);
  background: var(--panel-2); min-height: 0;
}
.ci-g-t {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: var(--teal);
}
/* A GROUP'S OWN SUB-HEADING, BY WHO INVOICES — drawn only when checkin.js
   decides there is more than one entity, or one worth naming, in this
   group; never drawn over a lone hospital or a day surgery centre with
   none. First of a run gets no extra gap above it; app.css's own
   `.ci-group { gap: 8px }` already spaces every child evenly, including
   this one from the `.ci-places` before it. */
.ci-entity { font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.ci-places { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-place {
  display: inline-flex; flex-direction: column; gap: 2px;
  min-height: var(--tap); justify-content: center; padding: 7px 14px;
  border-radius: var(--r); border: 1px solid var(--rule);
  background: var(--panel); color: var(--ink); font: 500 13px var(--display);
  text-align: left; cursor: pointer;
}
.ci-place:hover { border-color: var(--teal-2); }
.ci-place:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }
.ci-place .ci-why { font-size: 10px; color: var(--dimmer); font-weight: 400; }

/* WHERE HE IS. A filled teal tint — `--line`, already theme-adapted, not
   the board's dark-only rgba — and the strongest of the three marks that
   is not mid-confirmation. */
.ci-place.is-here { border-color: var(--teal); background: var(--line); color: var(--teal); }
.ci-place.is-here .ci-why { color: var(--dim); }

/* WHAT THE ROSTER EXPECTS, and not also where he is — a dashed outline
   only, so it reads as a suggestion rather than a state. */
.ci-place.is-expected { border-style: dashed; border-color: var(--amber); }
.ci-place.is-expected .ci-why { color: var(--amber-ink); }

/* THE SECOND TAP IS PENDING HERE. Outranks the other two marks — a row
   asking to be confirmed says so over anything else it also happens to
   be — and carries the strongest signal: a solid border, ink-toned text,
   and a ring with nothing sitting on it for its colour to have to clear. */
.ci-place.is-ask {
  border-color: var(--amber); color: var(--amber-ink);
  box-shadow: 0 0 0 2px rgba(224,164,74,.2);
}
.ci-place.is-ask .ci-why { color: var(--amber); }

.ci-hint {
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--hush);
  font-size: 10.5px; color: var(--dim); line-height: 1.5;
}
.ci-hint b { color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.ci-foot { font-size: 11px; color: var(--dimmer); line-height: 1.5; }

/* THE BOTTOM HALF: two columns under the picker. His layout, 24 September --
   "1 on top (check in), 2 columns at the bottom". The picker keeps the whole
   width above; checking out and who is on the desk share the row below. */
.ci-bottom {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.ci-bcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ci-b-t {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dimmer); margin-bottom: 2px;
}
.ci-b-none { font-size: 12px; color: var(--dimmer); line-height: 1.5; }
/* EVERY CONTROL CLEARS THE 44px FLOOR without being DRAWN at 44px, which is
   what `verify_desktop_tap_targets` measures: the hit area grows, the row
   does not, so two columns still fit under the picker at 1440. */
.ci-act, .ci-desk {
  position: relative; text-align: left; font: inherit; font-size: 12px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--sunk); color: var(--ink);
}
.ci-act::before, .ci-desk::before {
  content: ''; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); height: 44px;
}
.ci-act:hover:not(:disabled), .ci-desk:hover:not(:disabled) {
  border-color: var(--teal);
}
.ci-act-end { border-color: var(--amber-ink); color: var(--amber-ink); }
.ci-act-cover { border-style: dashed; }
/* THE STATE IT IS IN reads as a fact, not as a button you failed to press. */
.ci-desk.is-now { border-color: var(--teal); color: var(--teal); }
.ci-desk.is-off { opacity: .45; cursor: default; }

@media (max-width: 1099px) {
  .ci-cols { grid-template-columns: 1fr; }
  /* ONE COLUMN ON A PHONE. Two 12px columns at 390px clip his longest desk
     label -- "No receptionist required (App not activated)" -- and a label
     cut mid-word is the fault the render pass found on the encounter page. */
  .ci-bottom { grid-template-columns: 1fr; }
}
/* ── end fb_checkin.css ─────────────────────────────────────────────── */
/* ── end fb_checkin.css ─────────────────────────────────────────────── */

/* ── the week grid's chips in day view ─────────────────────────────
   MEASURED 17 SEPTEMBER, AND THEY WERE INVISIBLE. The day/dark toggle of 10
   September was measured to WCAG AA across the palette -- but it works on
   TOKENS, and .wk-ph, .wk-leave and .wk-call are hand-picked literals from
   before that toggle existed, so nothing ever checked them. Their pale text
   on a near-white panel measures about 1.26:1 against the 4.5:1 AA asks for:
   drawn, and unreadable.

   Found while adding a fourth chip beside them, and fixed rather than
   matched -- one legible chip next to three invisible ones is worse than
   either state. DARK IS UNTOUCHED: this only bites under
   [data-theme="day"], so the default renders exactly as it did. Each ink is
   a darkened version of that chip's own hue, so what the colour MEANS is
   unchanged and only its legibility moves.

   PLACED HERE, ABOVE THE CHAT SECTIONS, and not at end-of-file where it was
   first written: verify_console_chatenc slices the chat fragment
   marker-to-EOF, so anything appended after the last marker is read as part
   of that fragment and fails its purity checks -- appending at EOF is not
   free in this file. Source order does not change the result;
   [data-theme="day"] .wk-ph outranks a bare .wk-ph wherever it sits. */
:root[data-theme="day"] .wk-ph { color: #1c4a86; border-color: rgba(96,150,220,.55); }
:root[data-theme="day"] .wk-leave { color: #55551f; border-color: rgba(150,150,120,.6); }
:root[data-theme="day"] .wk-call { color: #5a2d86; border-color: rgba(168,120,214,.55); }
:root[data-theme="day"] .wk-deskleave { color: var(--dim); }

/* ── fb_spine.css — the top bar (LE-49, Parcel B) ─────────────────────────
   Folded whole from reference/fragments/fb_spine.css, between its own BEGIN and
   END markers; above the chat sections because verify_console_chatenc slices
   marker-to-EOF. ─────────────────────────────────────────────────────────── */
/* ============================ 👩‍⚕️ THE NURSES (5 October)
   Settings -> Nurses and the per-patient nurse control (app/nurses.ts).
   Above the marked chat sections, not at end-of-file: a block after the last
   marker joins the last parcel (the LE-48 lesson). `.nr-` was free --
   searched before it was claimed. */
.nr-block { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.nr-t { font-weight: 700; font-size: 13px; color: var(--ink); }
.nr-needs .nr-t { color: var(--amber); }
.nr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); padding: 4px 0; }
.nr-row.is-off { opacity: .6; }
.nr-name { font-weight: 600; color: var(--ink); }
.nr-sub { color: var(--dim); }
.nr-in { min-height: var(--tap); box-sizing: border-box; width: 100%; max-width: 420px; }
.nr-care:empty { display: none; }
.nr-care { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.nr-chart { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.nr-entry { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--ink-2); }
.nr-entry.is-flagged .nr-entry-t { color: var(--amber); }
.nr-entry.is-withdrawn .nr-entry-t { text-decoration: line-through; color: var(--dim); }
.nr-medform { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 420px; }
.nr-sub.is-withdrawn { text-decoration: line-through; }
.nr-photos { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.nr-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); }
.nr-row.is-urgent .nr-name { color: var(--red); }
.nr-msg { width: 100%; color: var(--ink); white-space: pre-wrap; }
.nr-notes { display: flex; flex-direction: column; gap: 8px; }
.nr-note { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.nr-note.is-withdrawn .nr-msg { text-decoration: line-through; color: var(--dim); }
.nr-note.is-flagged .nr-msg { color: var(--amber); }
.nr-record { margin-top: 6px; }
.nr-trend { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 8px; }
.nr-trend-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nr-trend-t { min-width: 120px; color: var(--ink); font-weight: 600; }
.nr-spark { width: 160px; height: 32px; flex: none; }
.nr-spark-line { fill: none; stroke: var(--teal); stroke-width: 1.5; }
.nr-spark-flag { fill: var(--amber); }
.nr-spark-last { fill: var(--teal); }
.fv-nurse:empty { display: none; }
.fv-nurse { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.fv-nurse-t { font-weight: 700; color: var(--ink); }
.fv-nurse-b { color: var(--ink-2); }
.fv-nurse-b.is-red { color: var(--red); font-weight: 600; }
.fv-nurse-b.is-amber { color: var(--amber); }

/* ============================ RECORDINGS & TRANSCRIPTS, on the console
   Deliberately ABOVE the marked parcels: every fragment below is sliced by
   its own BEGIN/END markers, and a block appended at end-of-file joins
   whichever parcel was last -- the fault the day-theme layer met on
   10 September. This belongs to no parcel, so it sits before them all.

   The screen's point is the gap between two numbers -- files kept, against
   transcripts the model can be given -- so a row with no words is marked
   rather than merely quieter: a file that contributes nothing to the note
   is the one thing he has to be able to see at a glance. */
.rc-open { width: 100%; text-align: left; margin-top: 10px; }
.rc-open.is-open { color: var(--teal); }
.rc-area { margin-top: 8px; }

.rc-top { margin-bottom: 8px; }
.rc-title { margin: 0 0 2px; font-size: 14px; }
.rc-count { font-size: 12px; color: var(--dim); }
.rc-gap { font-size: 12px; color: var(--amber); margin-top: 2px; }

.rc-list { display: flex; flex-direction: column; gap: 8px; }
.rc-row { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
          background: var(--sunk); }
/* NOT COLOUR ALONE: the row carries the words "No words yet" as well as the
   edge, because six states is past what colour carries and a clinician
   reading quickly must not have to infer it from a shade. */
.rc-row.is-silent { border-left: 3px solid var(--amber); }

.rc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
           font-size: 11px; color: var(--dim); }
.rc-n { font-weight: 600; color: var(--ink); font-size: 12px; }
.rc-secs, .rc-when { font-variant-numeric: tabular-nums; }
.rc-held { margin-left: auto; }

.rc-words { margin-top: 6px; font-size: 13px; line-height: 1.45;
            white-space: pre-wrap; word-break: break-word; }
.rc-none { color: var(--dim); font-style: italic; }

.rc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rc-audio { width: 100%; margin-top: 8px; }
.rc-why { margin-top: 6px; font-size: 12px; color: var(--dim); }

.rc-all { margin-top: 12px; }
.rc-all-b { width: 100%; }
.rc-note { margin-top: 4px; font-size: 11px; color: var(--dim); }
.rc-confirm { border: 1px solid var(--amber); border-radius: 8px;
              padding: 10px; margin-top: 4px; }
.rc-confirm-say { font-size: 13px; line-height: 1.45; }
.rc-yes { background: var(--amber); }

/* ==== fb_spine BEGIN — the top bar (LE-49 Parcel B) ==== */

/* ── the doctor is a button ─────────────────────────────────────────────
   It was a label. Same block, same three lines, now with the affordance a
   control owes: a ring, a hover, and a focus outline a keyboard can see. */
.who.is-btn {
  padding: 3px 10px 3px 3px; border-radius: 999px;
  border: 1px solid var(--line); background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.who.is-btn:hover { border-color: var(--teal-2); }
.who.is-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.who-lines { display: flex; flex-direction: column; gap: 1px; }
/* where the block goes, said on the block */
.who-sub .go { color: var(--teal); }

/* ── the place, as the check-in door answers it ─────────────────────────
   Two states, and the second is not a failure: amber says the clinic has
   not been told yet, which is a thing to finish. Red would say something
   is wrong, and nothing is. */
.pill-place {
  background: rgba(79,214,200,0.10); border-color: rgba(79,214,200,0.3);
  color: var(--teal);
}
.pill-place .dot { box-shadow: 0 0 6px rgba(79,214,200,0.55); }
/* the KIND, quieter than the name it qualifies */
.pill-place .pk, .pill-nowhere .pk { color: var(--dim); }
.pill-nowhere {
  background: rgba(224,164,74,0.08); border-color: rgba(224,164,74,0.45);
  color: var(--amber-ink);
}

/* ── one recording control, three faces ─────────────────────────────────
   Ready, recording, and off-with-its-reason sit in the same place, so the
   eye finds one spot whatever the state. The status line beneath carries
   what is happening, which is why the button itself can say one word. */
.recwrap {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 2px; flex: 0 0 auto;
}
.recbtn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 28px; padding: 3px 12px; border-radius: 999px;
  border: 1px solid rgba(224,90,74,0.5); background: none;
  color: var(--red-ink); font: inherit; font-size: 12px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.recbtn:hover { border-color: var(--red); }
.recbtn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* NEVER COLOUR ALONE: the face is a shape as well as a hue — a filled
   circle to start, a square to stop — so the control reads for a colour
   blind clinician and in a photocopy of a screenshot. */
.recbtn .rdot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--red); box-shadow: 0 0 6px rgba(224,90,74,0.5);
}
.recbtn.is-on {
  background: rgba(224,90,74,0.18); border-color: var(--red); color: #fff;
  box-shadow: 0 0 0 3px rgba(224,90,74,0.16), 0 0 16px rgba(224,90,74,0.5);
}
.recbtn.is-on .rsq {
  width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; background: #fff;
}
/* DIMMED WITH ITS REASON, not hidden — his ruling, 10 September. A control
   that vanishes teaches him to hunt for it; one that stays and says why is
   an answer. */
.recbtn.dis {
  opacity: .55; border-color: var(--line); color: var(--dim);
  box-shadow: none; cursor: default;
}
.recbtn.dis .rdot { background: var(--dim); box-shadow: none; }

.rec-status {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em;
  color: var(--dimmer); white-space: nowrap;
}
.rec-status.on { color: var(--red-ink); }
/* THE ONE LIVING THING ON THE BAR. Everything else that moves on this app
   is a person's finger — the same reason the old REC orb breathed. */
.rec-status .glow {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 8px rgba(224,90,74,.9);
  margin-right: 4px; vertical-align: middle;
  animation: rec-breathe 2.8s ease-in-out infinite;
}
@keyframes rec-breathe { 50% { box-shadow: 0 0 14px rgba(224,90,74,1); } }
@media (prefers-reduced-motion: reduce) { .rec-status .glow { animation: none; } }

/* ── the appointment line folds to its count with a patient on the bar ──
   Measured, not guessed: 1440px holds the patient or the sentence, not
   both. spine.js sets `has-patient`; desktop.js sets `data-count` to how
   many wait and leaves the whole sentence in the button's own title, so
   nothing is lost — it is a hover away and on the front desk. With no
   `data-count` set the line still reads whole, which is the safe direction
   to be un-wired in. */
.spine.has-patient .apptbar[data-count] { max-width: none; }
.spine.has-patient .apptbar[data-count] .apptbar-t { display: none; }
.spine.has-patient .apptbar[data-count]::after { content: "\1F4E8  " attr(data-count); }
/* AND THE HOME PAGE FOLDS THE SAME WAY BELOW THE WIDTH IT NEEDS. With the
   mail pill added the bar wanted ~1504px on home, so at 1440 the theme toggle
   wrapped onto a second row and the bar grew from 64px to 96px, taking 32px
   off every corner; at 1280 the clock went too. Measured in Chromium, 23
   September. Below 1536px the mail pill and the theme toggle fold as they do
   beside a patient; below 1440px the appointment line folds to its count as
   well. Every word is still in the controls' own titles. */
@media (min-width: 1100px) and (max-width: 1535px) {
  .spine .pill-mail .mw { display: none; }
  .spine .tb-w { display: none; }
}
@media (min-width: 1100px) and (max-width: 1439px) {
  .spine .apptbar[data-count] { max-width: none; }
  .spine .apptbar[data-count] .apptbar-t { display: none; }
  .spine .apptbar[data-count]::after { content: "\1F4E8  " attr(data-count); }
}
/* AND A QUEUE THAT COULD NOT BE READ IS NOT A QUEUE OF NONE. Folded, the
   unreadable case rendered "📨 0" -- identical to "nobody waiting", which is
   the one reading a doctor would act on. It says "?" now, and the whole
   sentence is in the title where this comment always claimed it was. */

/* ── the narrow bar ─────────────────────────────────────────────────────
   The clock, the appointment line and the theme toggle already leave below
   1100px. The record control STAYS — it presses the same one recorder, and
   the phone is the device most likely to be in a hand during a case — but
   its caption goes, because eight-point mono under a button is what makes
   a 390px bar wrap. */
@media (max-width: 1099px) {
  .spine .rec-status { display: none; }
}

/* ── day view ───────────────────────────────────────────────────────────
   Dark is unchanged: every rule here bites only when the toggle sets
   data-theme="day" on <html>. The accents keep their MEANING and are
   darkened until they are legible on a light ground — day --red is
   #c0342a (~4.8:1) and --red-ink #a62a1e (~6.4:1), both already measured by
   verify_theme_contrast; what needs repainting is the three GLOW literals,
   which are a dark-ground effect, and the white square, which disappears on
   a pale button. */
[data-theme="day"] .recbtn { background: rgba(255,255,255,0.7); }
[data-theme="day"] .recbtn .rdot { box-shadow: none; }
[data-theme="day"] .recbtn.is-on {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 0 0 3px rgba(192,52,42,0.18);
}
[data-theme="day"] .recbtn.is-on .rsq { background: #fff; }
[data-theme="day"] .rec-status .glow { box-shadow: none; }
/* 0.10 put the place name at 4.49:1 and the mail count at 4.43:1 in day
   view, measured in Chromium on 23 September: a hair under AA both. A
   lighter tint, and the count in the day palette's amber INK. */
[data-theme="day"] .pill-place { background: rgba(11,114,102,0.07); }
[data-theme="day"] .pill-mail.has .mn { color: var(--amber-ink); }
[data-theme="day"] .pill-place .dot { box-shadow: none; }
[data-theme="day"] .pill-nowhere { background: rgba(138,94,12,0.10); }
[data-theme="day"] .who.is-btn { background: rgba(255,255,255,0.55); }

/* ==== fb_spine END — the top bar (LE-49 Parcel B) ==== */

/* ==== apk_frame BEGIN — the phone's frame and its class vocabulary (LE-57, Parcel A) ==== */
/* THE ANDROID FRAME. Dr Lau, 10 September, accepting the 23-board mock-up:
   one top bar, one capture bar, one six-seat footer on every page, and no
   page that scrolls at 412x867.

   WHERE THESE RULES BITE, AND NOWHERE ELSE. Every selector below begins
   `body.is-phone` — the class the router sets from isDesktop() (desktop.js,
   DESK_MIN = 1100px). Width is decided ONCE, in JavaScript, so there is no
   @media rule here re-deciding it: two width tests that can disagree is how
   a bar ends up half laid out. Take the class away and the desktop is
   pixel-identical to what it was before this block existed.

   The one exception is the token block that opens the file. A custom
   property paints nothing on its own; it is defined at :root because the
   phone's lamps are the same green wherever they are drawn.

   THE VOCABULARY IS THE MOCK-UP'S, PREFIXED. design/tools/apk-boards.mjs
   lines 98-366 are the classes all 23 boards share; each becomes `.ph-<x>`
   here, once, and no other parcel redefines one. That is the whole reason
   page 23's row cannot drift from page 1's.

   AND THE COLOURS ARE app.css's OWN. Every value below is a token or one of
   the palette's own colours at another alpha — the house convention (see
   .btn-primary). The single new colour is the lamp, declared and named. */

:root {
  /* THE TRAFFIC LIGHT'S GREEN, and deliberately NOT the brand teal: a lamp
     that is the same colour as every heading and every chip reads as
     decoration, and this one is a clinical fact about where a patient is.
     No day-theme value: the toggle is desktop-only and the phone is always
     dark, so this token never renders on a light ground. */
  --lamp: #43d17a;
}

/* ── 1 · the page is a column ────────────────────────────────────────────
   <body> is already a flex column at full height. On the phone it holds,
   in order: the spine, the ONE region the router is showing, the capture
   bar where a page has one, the footrule where a page has one, and the six
   seats. The region takes what is left and CLIPS — a page that scrolls as
   a whole is the one thing his first principle rules out. What may scroll
   is one region inside it, and that region says so with data-scroll. */
body.is-phone { overflow: hidden; }
body.is-phone > section:not([hidden]),
body.is-phone > main:not([hidden]) {
  flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
/* The view chrome belongs to the desktop; on the phone the Now seat is the
   way home and the router's back button the way back, and two of them is
   two answers. */
body.is-phone #viewchrome { display: none; }

/* THE CHECK-IN PICKER'S CLOSE CONTROL MEETS THE TAP FLOOR ON A PHONE.
   `.ci-close` is 32x32 -- fine under a mouse, and 12px under `--tap`, whose
   own comment three thousand lines above reads "nothing tappable is
   smaller". Found by _phone_measure.mjs on the merged tree, not by a sweep:
   no harness measures a rendered box. Scoped to the phone because that is
   where the floor is a finger rather than a pointer, so the desktop header
   this control was drawn for is left exactly as it is. The circle stays
   32px; what grows is the box around it. */
body.is-phone .ci-close {
  position: relative; width: var(--tap); height: var(--tap); border: 0;
}
body.is-phone .ci-close::before {
  content: ""; position: absolute; width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 50%;
}

/* ── 2 · the top bar: two rows, and a third only with a patient ──────────
   Built from the spine's own elements by CSS alone (app/index.html lines
   78-157) — no second bar, no second painter. A grid rather than wrapping
   flex, because a bar that wraps by accident is not a design (LE-48). */
body.is-phone .spine {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "brand who   clock"
    "place place rec"
    "said  said  said";
  align-items: center;
  gap: 2px 8px;
  padding: calc(2px + env(safe-area-inset-top, 0px)) 12px 4px;
  min-height: 0;
}
body.is-phone .spine.has-patient {
  grid-template-areas:
    "brand who   clock"
    "place place rec"
    "pkey  pline allergy"
    "said  said  said";
}
/* WHAT A CLOSE STILL OWES takes a row of its own, and only while anything
   is owed (5 Oct): the whole width, so the word is never folded here. */
body.is-phone .spine.has-owed {
  grid-template-areas:
    "brand who   clock"
    "place place rec"
    "owed  owed  owed"
    "said  said  said";
}
body.is-phone .spine.has-owed.has-patient {
  grid-template-areas:
    "brand who   clock"
    "place place rec"
    "pkey  pline allergy"
    "owed  owed  owed"
    "said  said  said";
}
body.is-phone .spine > #owedbtn { grid-area: owed; justify-self: stretch; justify-content: center;
                                  min-height: var(--tap); }

body.is-phone .spine > .wordmark  { grid-area: brand; align-self: center; }
body.is-phone .spine > #who       { grid-area: who; justify-self: start; min-width: 0; max-width: 100%;
                                    padding: 1px 8px 1px 2px; }
body.is-phone #who .avatar        { width: 20px; height: 20px; font-size: 9px; }
body.is-phone #who .who-name      { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ONE LINE, NOT TWO. The board's first row is the name and nothing else;
   "SIGNED IN 07:52 · DOCTOR" is on the Doctor card this block opens, one
   tap away, which is where the board puts it. */
body.is-phone #who .who-sub       { display: none; }
body.is-phone #who .who-lines     { min-width: 0; }

body.is-phone .spine > #clock     { grid-area: clock; justify-self: end; display: inline-block;
                                    font-size: 10px; letter-spacing: 0.06em; color: var(--dim); white-space: nowrap; }

body.is-phone .spine > #checkin   { grid-area: place; justify-self: stretch; min-width: 0; max-width: 100%;
                                    min-height: var(--tap); padding: 4px 12px; }
body.is-phone #checkin > span     { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.is-phone #checkin .dot      { flex: 0 0 auto; }
/* the qualifier gives way four times faster than the label, so NOT CHECKED IN
   reads whole before PICK WHERE YOU ARE does (the render at 360 read NO...) */
body.is-phone #checkin .pk       { flex: 0 4 auto; }

body.is-phone .spine > #rec       { grid-area: rec; justify-self: end; max-width: 46%; }
/* THE CAPTION COMES BACK ON THE PHONE. app.css hides it below 1100px
   because eight-point mono under a button is what made a 390px bar wrap —
   but that was a bar laid out in one flex row. In this grid the control has
   a column of its own, the caption sits under the button inside it, and the
   board's own top-right state (WAIT / LIVE 00:42) is what a clinician mid-
   case is actually looking for. It ellipsises rather than pushing. */
body.is-phone .spine .rec-status  { display: block; max-width: 100%; overflow: hidden;
                                    text-overflow: ellipsis; white-space: nowrap; }

body.is-phone .spine > #patient-mrn { grid-area: pkey; justify-self: start; font-size: 11px;
                                      letter-spacing: 0.04em; color: var(--teal); white-space: nowrap; }
body.is-phone .spine > #patient-sub { grid-area: pline; justify-self: start; display: block; min-width: 0;
                                      max-width: 100%; font-size: 11px; color: var(--ink-2);
                                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.is-phone .spine > #allergy     { grid-area: allergy; justify-self: end; min-width: 0; max-width: 52%;
                                      font-size: 9px; padding: 3px 8px; }
body.is-phone #allergy > span       { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.is-phone .spine > #spine-said  { grid-area: said; justify-self: start; min-width: 0; max-width: 100%; }

/* WHAT THE PHONE BAR HAS NO ROOM FOR. Not "less important" — reached
   somewhere else: the appointment line is the Tasks seat's Requests screen,
   the theme toggle is desktop-only by his ruling, the clinic's mailbox is
   mounted on the desktop alone (app.js), the films are the
   folder's Imaging tile, and the patient's NAME is on the page under the
   bar rather than twice. The number stays, because it is the thing a
   clinician checks a document against. */
body.is-phone .spine > .spacer,
body.is-phone .spine > #apptbar,
body.is-phone .spine > #mailbtn,
body.is-phone .spine > #themebtn,
body.is-phone .spine > #studies,
body.is-phone .spine > #meter,
body.is-phone .spine > #patient-rule,
body.is-phone .spine > #patient-name { display: none; }

/* ── 3 · the capture bar sits ABOVE the foot ─────────────────────────────
   On the desktop it rules off the top of the note; on the phone it is the
   composer, so the rule moves to its top edge. capture.js is untouched. */
body.is-phone #capture { flex: 0 0 auto; }
body.is-phone .cap-bar { border-bottom: 0; border-top: 1px solid var(--line); padding: 6px 12px; }
/* the footrule is inside the encounter page here, and the foot below it
   already carries the gesture-bar inset — counting it twice leaves a band
   of nothing above the seats */
body.is-phone .footrule { padding: 8px 12px; }

/* ── 4 · the six seats ───────────────────────────────────────────────────
   The 24px band Android paints its gesture bar in is NOT drawn: the page is
   given viewport-fit=cover by index.html, so the inset is added as padding
   and the seats sit above whatever the phone puts there. */
body.is-phone .ph-foot {
  flex: 0 0 auto; display: flex;
  height: calc(60px + var(--safe-b)); padding-bottom: var(--safe-b);
  border-top: 1px solid var(--line); background: rgba(4,9,10,0.88);
}
/* THE ONE RULE THAT IS NOT UNDER body.is-phone, and it takes nothing away
   from the desktop: <nav> defaults to display:block, so a foot left over
   from a phone-width session would paint as six stacked buttons the moment
   the window crossed 1100px. The element is this parcel's own and did not
   exist before, so hiding it where it does not belong is the guarantee
   that the desktop is unchanged, not an exception to it. */
body:not(.is-phone) #phonefoot { display: none; }
body.is-phone .ph-seat {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--tap);
  background: none; border: 0; color: var(--dimmer);
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body.is-phone .ph-seat .l {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
}
body.is-phone .ph-seat.on { color: var(--teal); }
/* the lit seat carries a bar as well as a colour, so it reads for a colour
   blind clinician — the record button's rule, one row down */
body.is-phone .ph-seat.on::before {
  content: ""; position: absolute; top: -1px; left: 22%; right: 22%;
  height: 2px; background: var(--teal); border-radius: 0 0 2px 2px;
}
body.is-phone .ph-seat .bdg {
  position: absolute; top: 6px; left: 50%; margin-left: 6px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--red-solid); color: #ffffff;
  font-family: var(--mono); font-size: 9px;
  display: flex; align-items: center; justify-content: center;
}
body.is-phone .ph-seat:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
body.is-phone .ph-seat:active { transform: translateY(1px); }

/* ── 5 · the class vocabulary every page shares ──────────────────────────
   apk-boards.mjs lines 98-366, prefixed. Nobody redefines one of these. */

body.is-phone .ph-ic { display: block; flex: 0 0 auto; }
/* an icon name this set does not hold draws an empty box rather than
   nothing at all — a blank is indistinguishable from a layout fault */
body.is-phone .ph-ic-missing { outline: 1px dashed var(--rule); }

/* the page's own column, inside the region */
body.is-phone .ph-content {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px; padding: 8px 12px;
}
body.is-phone .ph-work {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 0;
}
/* THE ONE REGION THAT MAY SCROLL, and it says which it is. The attribute
   is what the integrator's headless measurement reads, so carrying it is
   also what gives the region its behaviour — one act, not two. */
body.is-phone .ph-scroll,
body.is-phone [data-scroll] { overflow-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
body.is-phone .ph-scroll::-webkit-scrollbar,
body.is-phone [data-scroll]::-webkit-scrollbar { display: none; }
body.is-phone [data-hscroll] { overflow-x: auto; scrollbar-width: none; }
body.is-phone [data-hscroll]::-webkit-scrollbar { display: none; }

/* a page title, with the close his brief puts top right */
body.is-phone .ph-ttl { display: flex; align-items: center; gap: 10px; height: var(--tap); flex: 0 0 auto; }
body.is-phone .ph-ttl .h1 { font-size: 18px; font-weight: 600; color: #ffffff; letter-spacing: -0.01em; white-space: nowrap; }
body.is-phone .ph-ttl .sub { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.is-phone .ph-ttl .x {
  margin-left: auto; flex: 0 0 var(--tap); width: var(--tap); height: var(--tap);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--dim); border: 1px solid var(--line); background: var(--sunk); cursor: pointer;
}

/* a section head */
body.is-phone .ph-sh { display: flex; align-items: baseline; gap: 8px; min-height: 18px; flex: 0 0 auto; }
body.is-phone .ph-sh .kicker { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--teal); white-space: nowrap; }
body.is-phone .ph-sh .kicker.amber { color: var(--amber); }
body.is-phone .ph-sh .kicker.red { color: var(--red-ink); }
body.is-phone .ph-sh .n { font-size: 10.5px; color: var(--dimmer); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.is-phone .ph-sh .r { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--dim); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }

/* the two grids the tiles sit in */
body.is-phone .ph-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.is-phone .ph-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* a tile */
body.is-phone .ph-tile {
  height: 62px; display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 6px 10px; border-radius: var(--r); background: var(--panel);
  border: 1px solid var(--line); color: var(--teal); min-width: 0;
  font: inherit; text-align: left; cursor: pointer;
}
body.is-phone .ph-tile .tr { display: flex; align-items: center; gap: 6px; }
body.is-phone .ph-tile .b { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--teal); max-width: calc(100% - 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* the place is never shortened in JS -- now.js -- so it is ellipsised here, never wrapped */
body.is-phone .ph-tile .b.red { color: var(--red-ink); }
body.is-phone .ph-tile .t { font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.is-phone .ph-tile .s { font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.is-phone .ph-tile.tall { height: 66px; }
body.is-phone .ph-tile.f { height: 72px; }
body.is-phone .ph-tile.wide { grid-column: span 2; }
/* DIMMED IS 0.8 ON THE PHONE, NOT 0.5 (24 Sept): a dimmed tile still
   carries words -- NOT BUILT, IN TELEGRAM -- and half opacity put them
   under 3:1. The dashed edge says "not live"; the fade only has to hint. */
body.is-phone .ph-tile.dimmed { opacity: 0.8; border-style: dashed; }

/* a band of rows */
body.is-phone .ph-band { display: flex; flex-direction: column; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); overflow: hidden; flex: 0 0 auto; min-height: 0; }
body.is-phone .ph-band-h { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 10px; background: var(--panel-2); font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--dim); white-space: nowrap; flex: 0 0 auto; }
body.is-phone .ph-band-h .r { margin-left: auto; color: var(--dimmer); display: inline-flex; align-items: center; gap: 4px; letter-spacing: 0.08em; }
body.is-phone .ph-band-h .r.go { color: var(--teal); }
body.is-phone .ph-band-h .r.red { color: var(--red-ink); }
body.is-phone .ph-band-h .pg { display: inline-flex; gap: 4px; align-items: center; }
body.is-phone .ph-band-h .pg i { width: 5px; height: 5px; border-radius: 50%; background: rgba(79,214,200,0.25); display: block; }
body.is-phone .ph-band-h .pg i.on { background: var(--teal); }

/* a row */
body.is-phone button.ph-row { border: 0; border-top: 1px solid var(--line-soft); font-family: inherit; text-align: left; width: 100%; cursor: pointer; }
body.is-phone .ph-row { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 10px; border-top: 1px solid var(--line-soft); font-size: 12.5px; min-width: 0; }
body.is-phone .ph-row .tm { font-family: var(--mono); font-size: 10.5px; color: var(--dim); width: 38px; flex: 0 0 auto; }
body.is-phone .ph-row .nm { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.is-phone .ph-row .nm b { font-weight: 600; }
body.is-phone .ph-row .wh { font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 0 auto; max-width: 42%; }   /* the name wraps, the day or the kind does not squeeze to N... */
body.is-phone .ph-row .rt { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--dim); white-space: nowrap; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
body.is-phone .ph-row .rt.teal { color: var(--teal); }
body.is-phone .ph-row .rt.amber { color: var(--amber); }
body.is-phone .ph-row .rt.red { color: var(--red-ink); }
body.is-phone .ph-row .two { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
body.is-phone .ph-row.short { min-height: 36px; }
body.is-phone .ph-row.seen .nm { color: var(--dim); }
body.is-phone .ph-row.dimmed { opacity: 0.8; }   /* dimmed, still read: 0.55 put its words under 3:1 */
body.is-phone .ph-row.wrap .nm { white-space: normal; line-height: 1.25; font-size: 12px; }
body.is-phone .ph-row.personal { border-left: 3px dashed rgba(90,162,255,0.6); }

/* the lamp — the room's own light system, four states */
body.is-phone .ph-lp { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
body.is-phone .ph-lp.g { background: var(--lamp); box-shadow: 0 0 6px rgba(67,209,122,0.55); }
body.is-phone .ph-lp.r { background: var(--red); box-shadow: 0 0 6px rgba(224,90,74,0.55); }
body.is-phone .ph-lp.a { background: var(--amber); box-shadow: 0 0 6px rgba(224,164,74,0.5); }
body.is-phone .ph-lp.o { background: transparent; border: 1.5px solid var(--dimmer); }

/* the way into a row */
body.is-phone .ph-open {
  min-height: 36px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--teal); background: rgba(79,214,200,0.14);
  border: 1px solid rgba(79,214,200,0.45); white-space: nowrap; flex: 0 0 auto; font-family: inherit; cursor: pointer;
}
body.is-phone .ph-open.hit { min-height: var(--tap); }
body.is-phone .ph-open.quiet { color: var(--dim); background: var(--sunk); border-color: var(--line); font-weight: 500; }
body.is-phone .ph-open.amber { color: var(--amber-ink); background: rgba(224,164,74,0.10); border-color: rgba(224,164,74,0.4); }

/* chips */
body.is-phone .ph-chips { display: flex; flex-wrap: wrap; gap: 7px; }
body.is-phone .ph-chips.hscroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.is-phone .ph-chips.hscroll::-webkit-scrollbar { display: none; }
body.is-phone .ph-chips.hscroll > .ph-chip { flex: 0 0 auto; }
body.is-phone .ph-chip {
  min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line);
  font-size: 13px; font-family: inherit; color: var(--ink); white-space: nowrap; cursor: pointer;
}
body.is-phone .ph-chip.on { background: rgba(79,214,200,0.16); border-color: rgba(79,214,200,0.5); color: var(--teal); font-weight: 600; }
body.is-phone .ph-chip.sq { border-radius: var(--r); }
body.is-phone .ph-chip.sm { padding: 6px 11px; font-size: 12.5px; }
body.is-phone .ph-chip.num { min-width: var(--tap); justify-content: center; padding: 0 8px; }
body.is-phone .ph-chip .n { font-family: var(--mono); font-size: 10.5px; color: var(--teal); }
body.is-phone .ph-chip.amber { background: rgba(224,164,74,0.08); border-color: rgba(224,164,74,0.35); color: var(--amber-ink); }
body.is-phone .ph-chip.red { background: rgba(224,90,74,0.10); border-color: rgba(224,90,74,0.4); color: var(--red-ink); }
body.is-phone .ph-chip.blue { background: rgba(90,162,255,0.10); border-color: rgba(90,162,255,0.45); color: var(--map-numb); }
/* NOT BUILT is dashed and faded, never absent: a control that says why it
   cannot act is an answer, and a missing one is a hunt (his ruling, 10 Sept) */
body.is-phone .ph-chip.dimmed { opacity: 0.8; border-style: dashed; }   /* the NOT BUILT tag on it must still be read */

/* a segmented control */
body.is-phone .ph-seg { display: flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--sunk); height: var(--tap); flex: 0 0 auto; }
body.is-phone .ph-seg > * { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--dim); white-space: nowrap; border-left: 1px solid var(--line); background: none; cursor: pointer; }
body.is-phone .ph-seg > *:first-child { border-left: 0; }
body.is-phone .ph-seg > .on { background: rgba(79,214,200,0.16); color: var(--teal); font-weight: 600; }
body.is-phone .ph-seg.h36 { height: 36px; }

/* two things side by side */
body.is-phone .ph-split { display: flex; gap: 8px; min-width: 0; }
body.is-phone .ph-split > * { flex: 1 1 0; min-width: 0; }

/* the encounter's tool row, and the review's three tabs */
body.is-phone .ph-tabs { display: flex; gap: 6px; padding: 8px 12px 0; flex: 0 0 auto; }
body.is-phone .ph-tab {
  flex: 1 1 0; min-width: 0; height: var(--tap); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--sunk); color: var(--dim);
  font: inherit; cursor: pointer;
}
body.is-phone .ph-tab .l { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; white-space: nowrap; }
body.is-phone .ph-tab.on { background: rgba(79,214,200,0.16); border-color: rgba(79,214,200,0.5); color: var(--teal); }
/* SOMETHING GATHERED, marked with a tick and not only a colour */
body.is-phone .ph-tab.done .l::after { content: " \2713"; }

/* a drawing tool — the body map's inks and its eraser */
body.is-phone .ph-tool {
  width: var(--tap); height: var(--tap); border-radius: var(--r); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--line);
  background: var(--sunk); color: var(--dim); font: inherit; cursor: pointer; flex: 0 0 auto;
}
body.is-phone .ph-tool .l { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em; }
body.is-phone .ph-tool.on { border-color: rgba(79,214,200,0.5); background: rgba(79,214,200,0.14); color: var(--teal); }
body.is-phone .ph-tool.pain { color: var(--red-ink); }
body.is-phone .ph-tool.pain.on { border-color: rgba(224,90,74,0.55); background: rgba(224,90,74,0.14); }
body.is-phone .ph-tool.numb { color: var(--map-numb); }
body.is-phone .ph-tool.numb.on { border-color: rgba(90,162,255,0.55); background: rgba(90,162,255,0.14); }

/* a card */
body.is-phone .ph-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
body.is-phone .ph-card .t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
body.is-phone .ph-card .p { font-family: var(--serif); font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
body.is-phone .ph-card.tight { gap: 4px; padding: 8px 12px; }
body.is-phone .ph-card.ask { background: rgba(224,164,74,0.06); border-color: rgba(224,164,74,0.3); }
body.is-phone .ph-card.red { background: rgba(224,90,74,0.06); border-color: rgba(224,90,74,0.35); }
body.is-phone .ph-card.blue { background: rgba(90,162,255,0.06); border-color: rgba(90,162,255,0.3); }

/* a labelled field */
body.is-phone .ph-fld { height: var(--tap); display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r); background: var(--sunk); border: 1px solid var(--line); min-width: 0; }
body.is-phone .ph-fld .k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--dimmer); white-space: nowrap; flex: 0 0 auto; }
body.is-phone .ph-fld .v { font-family: var(--mono); font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.is-phone .ph-fld .v.ph { color: var(--dimmer); }
body.is-phone .ph-fld.ok { border-color: rgba(79,214,200,0.35); }
body.is-phone .ph-fld.bad { border-color: rgba(224,90,74,0.5); }

/* an unclear point, on its own row */
body.is-phone .ph-pt { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 10px; border-radius: 8px; background: var(--sunk); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink); min-width: 0; }
body.is-phone .ph-pt .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.is-phone .ph-pt .bx { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--rule); display: flex; align-items: center; justify-content: center; color: var(--teal); flex: 0 0 auto; }
body.is-phone .ph-pt .bx.on { border-color: var(--teal); background: rgba(79,214,200,0.16); }
body.is-phone .ph-pt .n { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--dim); flex: 0 0 auto; }

/* the acts across the foot of a page */
body.is-phone .ph-acts { flex: 0 0 auto; display: flex; gap: 8px; padding: 6px 12px 8px; }
body.is-phone .ph-btn {
  flex: 1 1 0; min-width: 0; height: var(--tap); display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0 8px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--sunk); font-size: 13px; font-family: inherit; color: var(--ink);
  white-space: nowrap; overflow: hidden; cursor: pointer;
}
body.is-phone .ph-btn.go { background: rgba(79,214,200,0.16); border-color: rgba(79,214,200,0.5); color: var(--teal); font-weight: 600; }
body.is-phone .ph-btn.warn { background: rgba(224,164,74,0.08); border-color: rgba(224,164,74,0.35); color: var(--amber-ink); }
body.is-phone .ph-btn.stop { background: rgba(224,90,74,0.10); border-color: rgba(224,90,74,0.4); color: var(--red-ink); }
body.is-phone .ph-btn.blue { background: rgba(90,162,255,0.10); border-color: rgba(90,162,255,0.45); color: var(--map-numb); }
body.is-phone .ph-btn.quiet { color: var(--dim); }
body.is-phone .ph-btn.dimmed { opacity: 0.8; }
body.is-phone .ph-btn.grow2 { flex: 1.6 1 0; }
/* A BUTTON INSIDE THE WORKING AREA KEEPS ITS OWN SIZE. `.ph-btn` is
   `flex: 1 1 0` so a row of them shares the width evenly; the same class in
   a COLUMN would stretch to fill the page — the Send button that grew to
   its whole column at 412 (the mock-up's own measurement). */
body.is-phone .ph-work > .ph-btn,
body.is-phone .ph-btn.own { flex: 0 0 auto; }

/* the small answers under a point */
body.is-phone .ph-mini { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: var(--tap); padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid var(--line); background: var(--sunk); color: var(--ink); flex: 1 1 0; min-width: 0; font-family: inherit; cursor: pointer; }
body.is-phone .ph-mini.ok { color: var(--teal); border-color: rgba(79,214,200,0.45); background: rgba(79,214,200,0.12); }
body.is-phone .ph-mini.no { color: var(--dim); }
body.is-phone .ph-mini.say { color: var(--amber-ink); border-color: rgba(224,164,74,0.4); background: rgba(224,164,74,0.08); }
body.is-phone .ph-mini.bin { color: var(--red-ink); border-color: rgba(224,90,74,0.35); background: rgba(224,90,74,0.08); }

/* a hint, and a tag */
body.is-phone .ph-hint { font-size: 11px; line-height: 1.4; color: var(--dim); }
body.is-phone .ph-hint.serif { font-family: var(--serif); font-size: 13px; color: var(--ink-2); }
body.is-phone .ph-hint.red { color: var(--red-ink); }
body.is-phone .ph-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; color: var(--dim); border: 1px solid var(--line); white-space: nowrap; }
body.is-phone .ph-tag.amber { color: var(--amber-ink); border-color: rgba(224,164,74,0.4); background: rgba(224,164,74,0.08); }
body.is-phone .ph-tag.red { color: var(--red-ink); border-color: rgba(224,90,74,0.4); background: rgba(224,90,74,0.10); }
body.is-phone .ph-tag.teal { color: var(--teal); border-color: rgba(79,214,200,0.35); }
body.is-phone .ph-tag.blue { color: var(--map-numb); border-color: rgba(90,162,255,0.4); }

/* a tick list, and the bar above it */
body.is-phone .ph-prog { height: 4px; border-radius: 2px; background: rgba(79,214,200,0.12); overflow: hidden; }
body.is-phone .ph-prog i { display: block; height: 100%; background: var(--teal); }
body.is-phone .ph-tick { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 10px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink); }
body.is-phone .ph-tick .bx { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--rule); display: flex; align-items: center; justify-content: center; color: var(--teal); flex: 0 0 auto; }
body.is-phone .ph-tick .bx.on { border-color: var(--teal); background: rgba(79,214,200,0.16); }
body.is-phone .ph-tick .who { font-family: var(--mono); font-size: 9px; color: var(--dimmer); margin-left: auto; }
body.is-phone .ph-tick.done { color: var(--dim); }

/* the recordings strip */
body.is-phone .ph-recs { flex: 0 0 auto; margin: 0 12px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
body.is-phone .ph-recs .r { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--teal); display: inline-flex; align-items: center; gap: 3px; }

/* key and value */
body.is-phone .ph-kv { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 5px 10px; align-items: baseline; }
body.is-phone .ph-kv .k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--dimmer); }
body.is-phone .ph-kv .v { font-size: 13px; color: var(--ink); }
body.is-phone .ph-kv .v.mono { font-family: var(--mono); font-size: 12.5px; }

/* money — every figure the door's own string, never computed here */
body.is-phone .ph-money { font-family: var(--mono); font-size: 13px; color: #ffffff; white-space: nowrap; }
body.is-phone .ph-money.dim { color: var(--dim); font-size: 11px; }
body.is-phone .ph-tot { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px 0; }
body.is-phone .ph-tot .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--dim); }
body.is-phone .ph-tot .v { margin-left: auto; font-family: var(--mono); font-size: 20px; color: #ffffff; }

/* a bottom sheet — the check-in picker, and anything else that asks over a
   page. FIXED rather than the mock-up's absolute: in the app the phone IS
   the viewport. Above the foot, below the gate, which is the one thing
   that must cover everything. */
body.is-phone .ph-veil { position: fixed; inset: 0; z-index: 50; background: rgba(4,9,10,0.62); }
body.is-phone .ph-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  max-height: calc(100% - 48px); display: flex; flex-direction: column; gap: 10px;
  padding: 10px 12px calc(14px + var(--safe-b));
  border-radius: 18px 18px 0 0; background: var(--panel-2);
  border-top: 1px solid rgba(79,214,200,0.2); box-shadow: var(--z2);
}
body.is-phone .ph-sheet .grab { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: rgba(79,214,200,0.25); flex: 0 0 auto; }
body.is-phone .ph-sheet .sheet-t { font-weight: 600; font-size: 16px; color: #ffffff; }

/* ── 6 · the three schedule grids ────────────────────────────────────────
   Rows are minmax(0, 1fr) so the grid shrinks to the height it has rather
   than pushing the page taller — the week grid's own lesson, twice. */
body.is-phone .ph-wk { display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)); grid-template-rows: 30px 18px repeat(10, minmax(0, 1fr)); gap: 2px; min-width: 0; flex: 1 1 auto; min-height: 0; }
body.is-phone .ph-wk .dh { height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--dim); }
body.is-phone .ph-wk .dh b { font-size: 12px; color: var(--ink); font-weight: 600; }
body.is-phone .ph-wk .dh.today b { color: var(--teal); }
body.is-phone .ph-wk .hr { min-height: 0; font-family: var(--mono); font-size: 9px; color: var(--dimmer); display: flex; align-items: flex-start; justify-content: flex-end; padding-right: 4px; }
body.is-phone .ph-wk .cell { min-height: 0; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line-soft); min-width: 0; padding: 2px 3px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
body.is-phone .ph-wk .cell.off { background: repeating-linear-gradient(135deg, rgba(79,214,200,0.03) 0 4px, transparent 4px 8px); }
body.is-phone .ph-e { height: 14px; border-radius: 3px; padding: 0 3px; font-family: var(--mono); font-size: 8.5px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.is-phone .ph-e.book { background: rgba(79,214,200,0.18); color: var(--teal); }
body.is-phone .ph-e.seen { background: rgba(79,214,200,0.08); color: var(--dim); }
body.is-phone .ph-e.op { background: rgba(224,164,74,0.22); color: var(--amber-ink); }
body.is-phone .ph-e.pers { background: transparent; border: 1px dashed rgba(90,162,255,0.6); color: var(--map-numb); }
body.is-phone .ph-e.clash { background: rgba(224,90,74,0.22); color: var(--red-ink); }
body.is-phone .ph-e.cancel { background: transparent; color: var(--dimmer); text-decoration: line-through; }
body.is-phone .ph-e.def { background: rgba(224,90,74,0.10); color: var(--red-ink); text-decoration: line-through; }
/* THE DUTY BAND IS DECLARED AT THE TOP LEVEL, not inside the week grid.
   Scoped to .wk in the mock-up's first draft, the month's own LEAVE band
   inherited the day cell's font and read at the wrong size — measured, and
   fixed here rather than repeated. */
body.is-phone .ph-band-c { height: 18px; border-radius: 3px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em; line-height: 18px; text-align: center; white-space: nowrap; overflow: hidden; }
body.is-phone .ph-band-c.leave { background: rgba(224,164,74,0.14); color: var(--amber-ink); border: 1px solid rgba(224,164,74,0.35); }
body.is-phone .ph-band-c.oncall { background: rgba(90,162,255,0.14); color: var(--map-numb); border: 1px solid rgba(90,162,255,0.4); }
/* a public holiday. `hol`, not the mock-up's `ph`: `.ph` is already the
   placeholder modifier on a field's value, and one stylesheet cannot hold
   two meanings for one class. */
body.is-phone .ph-band-c.hol { background: rgba(220,235,233,0.08); color: var(--ink-2); border: 1px solid rgba(220,235,233,0.2); }
body.is-phone .ph-band-c.none { border: 1px dashed rgba(79,214,200,0.08); }

body.is-phone .ph-mo { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 18px repeat(5, minmax(0, 1fr)); gap: 3px; flex: 1 1 auto; min-height: 0; }
body.is-phone .ph-mo .dow { height: 18px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--dimmer); text-align: center; line-height: 18px; }
body.is-phone .ph-mo .d { min-height: 0; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line-soft); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
body.is-phone .ph-mo .d.out { opacity: 0.35; }
body.is-phone .ph-mo .d.today { border-color: rgba(79,214,200,0.5); }
body.is-phone .ph-mo .d.leave { background: rgba(224,164,74,0.10); border-color: rgba(224,164,74,0.3); }
body.is-phone .ph-mo .d.hol { background: rgba(220,235,233,0.05); }
body.is-phone .ph-mo .dn { font-family: var(--mono); font-size: 11px; color: var(--ink); }
body.is-phone .ph-mo .d.today .dn { color: var(--teal); font-weight: 600; }
body.is-phone .ph-mo .m { height: 13px; border-radius: 3px; padding: 0 2px; font-family: var(--mono); font-size: 7.5px; line-height: 13px; white-space: nowrap; overflow: hidden; }

body.is-phone .ph-yr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; flex: 1 1 auto; min-height: 0; }
body.is-phone .ph-yr .mc { min-height: 0; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); padding: 8px 9px; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; }
body.is-phone .ph-yr .mc.now { border-color: rgba(79,214,200,0.45); }
body.is-phone .ph-yr .mn { font-size: 12.5px; font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 6px; }
body.is-phone .ph-yr .mn .y { font-family: var(--mono); font-size: 9px; color: var(--dimmer); font-weight: 400; }
body.is-phone .ph-yr .st { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.is-phone .ph-yr .st b { color: var(--ink); font-weight: 500; }
body.is-phone .ph-yr .bars { display: flex; gap: 3px; margin-top: auto; }
body.is-phone .ph-yr .bars i { display: block; height: 6px; border-radius: 2px; flex: 0 0 auto; }

/* the legend under a grid — colour is never the only cue, so every band is
   named in words beside its swatch */
body.is-phone .ph-legend { display: flex; flex-wrap: wrap; gap: 5px 10px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--dim); }
body.is-phone .ph-legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
body.is-phone .ph-legend i { width: 10px; height: 8px; border-radius: 2px; display: block; }
/* THE BAR, MEASURED ON THE REAL APP AFTER THE FOLD (the integrator, LE-57).
   At 412x915 the grid's first column was sized by the registration number
   in the THIRD row (111px), so the name in the first row got what was left
   beside a 152px clock and ellipsised; the Record button (84px) overflowed
   its own 70px wrap and the caption under it was cut; the allergy pill
   wrapped to two lines under a percentage cap that resolved against its own
   auto-sized column; the who-button, the number and the allergy pill sat
   under the 44px tap floor; and at 360x800 the body had no definite height,
   so the column grew with its content and the document scrolled 20px.
   Every rule below is the fit that measurement asked for, and nothing else. */
body.is-phone { height: 100vh; height: 100dvh; }
body.is-phone .spine > .wordmark { width: auto; padding-right: 4px; }
body.is-phone .spine > #who { min-height: var(--tap); justify-self: stretch; }
/* the avatar's two letters cost 26px of a 412px row that has to hold a name and a clock */
body.is-phone #who .avatar { display: none; }
body.is-phone .spine > #clock { font-size: 9.5px; }
body.is-phone .spine > #rec { display: flex; flex-direction: column; align-items: flex-end;
                              gap: 2px; width: auto; max-width: none; min-width: 0; }
body.is-phone .spine #recbtn { min-height: var(--tap); flex: 0 0 auto; }
/* THE CAPTION ONLY WHILE RECORDING. Beside the button it widened the third
   column to 177px at 360 and starved the name; under it while READY it said
   what the button already says. spine.js marks the caption .on while a take
   runs, so the timer shows under Stop and nothing shows under Record. */
body.is-phone .spine .rec-status { display: none; min-width: 0; max-width: 110px; }
body.is-phone .spine .rec-status.on { display: block; }
/* the number at 10px keeps the first column narrow enough for the name above it */
body.is-phone .spine > #patient-mrn { font-size: 10px; min-height: var(--tap); display: inline-flex; align-items: center; }
body.is-phone .spine > #patient-sub { align-self: center; min-height: var(--tap); display: inline-flex; align-items: center; }
body.is-phone .spine > #allergy { white-space: nowrap; min-height: var(--tap); display: inline-flex; align-items: center;
                                  max-width: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* A BUTTON IS A TAP TARGET, measured on Now and the schedule after the fold:
   a row that navigates was drawn 36px (the short row is for reading), day.js's
   name buttons are 21px on the phone, and a segment's buttons sat 2px under the
   floor inside the segment's own border. Properties, not pages. */
body.is-phone button.ph-row, body.is-phone .ph-row[role="button"] { min-height: var(--tap); }
body.is-phone .ph-seg { height: calc(var(--tap) + 2px); }
body.is-phone .dy-who { min-height: var(--tap); display: inline-flex; align-items: center; }
body.is-phone button.ph-row.short, body.is-phone .ph-row.short[role="button"] { min-height: var(--tap); }
/* day.js's name button under the frame: a row's name, not a grey box */
body.is-phone .dy-who { background: transparent; border: 0; padding: 0 4px; }
/* THE MODULES' OWN CONTROLS UNDER THE FRAME, measured on the encounter,
   the patients page and the body map after the fold: the capture strip's
   section chips (38px, and the row clipped rather than sliding), note.js's
   section mics (30x24), the body map's arrows and ticks (30x32), the
   medicines' stars (30 wide) and patients.js's name buttons (18px). The
   frame gives each the floor and lets the strip slide, the way it laid the
   spine out -- the modules are untouched. */
body.is-phone .cap-strip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
body.is-phone .cap-strip .sect, body.is-phone .cap-strip .sect-open, body.is-phone .cap-strip .sect-all,
body.is-phone .cap-bar .meds-btn, body.is-phone .cap-bar .clip { min-height: var(--tap); min-width: var(--tap); }
body.is-phone .blk .mic, body.is-phone button.mic { min-width: var(--tap); min-height: var(--tap); }
body.is-phone .map-arrow, body.is-phone .map-tick { min-height: var(--tap); min-width: var(--tap); }
body.is-phone .med-star { min-width: var(--tap); }
body.is-phone .pt-who { min-height: var(--tap); display: inline-flex; align-items: center; }
body.is-phone .cap-bar .sect-all, body.is-phone .cap-bar .sect-open { min-height: var(--tap); }
body.is-phone .tk-key { min-height: var(--tap); display: inline-flex; align-items: center; }
/* a row's label gives way to its tag rather than clipping (the folder's utilities at 360) */
body.is-phone .ph-row > .nm, body.is-phone .ph-row > .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* a square chip's label gives way to its tag rather than clipping (the folder's utilities at 360) */
body.is-phone .ph-chip.sq { min-width: 0; }
body.is-phone .ph-chip.sq > span:not(.ph-tag) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
body.is-phone .ph-chip.sq > .ph-tag { flex: 0 0 auto; }
/* a button's label gives way with an ellipsis rather than clipping ("Pend → room" at 412, measured) */
body.is-phone .ph-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* THE BODY MAP'S ⤢ BIGGER IS NOT FOR THE PHONE. The tool page already fills
   the stage, and the plane it opens is appended to the body outside the
   router -- so the back button would move the page beneath it and leave the
   plane standing. Hidden under the phone frame; the desktop keeps it. */
body.is-phone .bm-big { display: none; }

/* A SCREEN SHORTER THAN A PAGE'S OWN ROWS -- a phone turned sideways in a
   browser (the APK itself is portrait-only). The encounter page's tabs,
   recordings strip, capture bar and acts are 207px on their own, the whole
   column at 412px tall, the folder's header and tiles are 8px over the same
   column and the bill's 3px; so those three pages scroll as a whole there
   (each marked on its section in index.html) rather than clipping what
   nothing can reach.
   The limit is well under any portrait height, so nothing changes where the
   pages were measured. */
@media (max-height: 560px) {
  body.is-phone #phoneenc,
  body.is-phone #folder,
  body.is-phone #money { overflow-y: auto; }
}

/* THE BODY MAP SIDE BY SIDE, as board 11 draws it: the body in the left
   column, the dial, the inks and the acts in the right, so the tools are
   never below a fold the drawing hand has to scroll past -- the whole-app
   render measured 450-540px of scroll before Send to note. The card's own
   children are placed by grid area; nothing is redrawn. */
body.is-phone .tl-body .map-wrap {   /* the tools pane's seat (enctools.js); the classes are bodymap.js's own */
  display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  grid-template-areas: "stage tools" "stage dial" "stage meter" "hint hint";
  column-gap: 10px; row-gap: 8px; align-items: start;
}
body.is-phone .tl-body .map-stage { grid-area: stage; }
body.is-phone .tl-body .map-stage .map-svg { width: 100%; }
body.is-phone .tl-body .map-tools { grid-area: tools; }
body.is-phone .tl-body .map-dial { grid-area: dial; flex-wrap: wrap; min-width: 0; }   /* four ticks and two arrows on two lines, never past the edge */
body.is-phone .tl-body .map-meter { grid-area: meter; }
body.is-phone .tl-body .map-wrap > span:last-child { grid-area: hint; }

/* THE WEEK'S BAND CHIPS STAY IN THEIR CELLS: an on-call or leave chip is
   nowrap and a phone's day column is ~50px, so it bled into the next day
   in the whole-app render; it ellipsises in its own cell instead. */
body.is-phone .wk-band { min-width: 0; }
body.is-phone .wk-band .wk-chip { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* THE FOOT STAYS AT THE FOOT. While the check-in sheet is up nothing is in
   flow between the bar and the foot (the sheet is fixed, every other page
   hidden), and a flex column with nothing to grow lets its last child rise
   -- the six seats showed through the sheet's top in the whole-app render.
   An automatic top margin keeps the foot at the bottom whatever is in flow. */
body.is-phone #phonefoot { margin-top: auto; }

/* THE WEEK'S CANCELLED COUNT reads on two lines in a phone's 56px row
   header -- "cancelled" over the number -- rather than as "cancelled1"
   clipped to nothing; the count is the row's whole point (his 9 September
   ruling: a glance at how many cancellations a week had). */
body.is-phone .wk-rh.wk-rate { white-space: normal; line-height: 1.25; }

/* ==== apk_frame END — the phone's frame and its class vocabulary (LE-57, Parcel A) ==== */

/* ==== apk_tools BEGIN — the five tools' panes (LE-57 Parcel C2) ==== */

body.is-phone .tl-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;                 /* the pane clips; one region inside scrolls */
}

/* THE ONE SCROLLING REGION. Every element the module marks `data-scroll`
   scrolls inside itself and takes the slack; the heads, hints and buttons
   above and below it stay put. */
body.is-phone .tl-pane [data-scroll] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
body.is-phone .tl-pane [data-scroll]::-webkit-scrollbar { display: none; }

body.is-phone .tl-quiet { color: var(--dimmer); }

/* ── a control with no door behind it ───────────────────────────────────── */

body.is-phone .tl-nb { display: flex; flex-direction: column; gap: 6px; }
body.is-phone .tl-nb-b {
  min-height: var(--tap, 44px);
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
  opacity: 0.55;
  border-style: dashed;
}
body.is-phone .tl-nb-l {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.is-phone .tl-nb-tag { margin-left: auto; flex: 0 0 auto; }
/* THE SENTENCE A TAP REVEALS. It wraps — it is the whole reason the control
   is dimmed rather than absent, and a clipped explanation explains nothing. */
body.is-phone .tl-said { white-space: normal; }

/* ── 11 · the body map, moved in ────────────────────────────────────────── */

body.is-phone .tl-body { display: flex; flex-direction: column; min-width: 0; }
/* The card is the pass's own `.field`; it fills the seat it was moved into
   and keeps its own internals untouched. */
body.is-phone .tl-body > .field { margin: 0; min-width: 0; }
body.is-phone .tl-body-gone {
  font-size: 11px;
  color: var(--dimmer);
  padding: 8px 0;
}

/* ── 12 · medication ────────────────────────────────────────────────────── */

body.is-phone .tl-allergy {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--amber);
  border: 1px solid rgba(224, 164, 74, 0.4);
  background: rgba(224, 164, 74, 0.08);
}
body.is-phone .tl-allergy.known {
  color: var(--red-ink);
  border-color: rgba(224, 90, 74, 0.5);
  background: rgba(224, 90, 74, 0.14);
}
body.is-phone .tl-allergy-l {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-phone .tl-meds { min-width: 0; }
body.is-phone .tl-back { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }

/* A COMPACTION, scoped inside the pane. meds.js draws its own rows for the
   desktop's holding area; on a phone the same rows need the tap floor and no
   more width than the pane has. Nothing outside `.tl-meds` is reached. */
body.is-phone .tl-meds .med-chip,
body.is-phone .tl-meds .med-star,
body.is-phone .tl-meds .meds-class {
  min-height: var(--tap, 44px);
}
body.is-phone .tl-meds .meds-find {
  min-height: var(--tap, 44px);
  width: 100%;
  min-width: 0;
}
body.is-phone .tl-meds .med-chip {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 13 · procedure ─────────────────────────────────────────────────────── */

body.is-phone .tl-procs { min-width: 0; }
/* The same compaction for procedures.js's own ticks. */
body.is-phone .tl-procs .pr-tick { min-height: var(--tap, 44px); min-width: 0; }
body.is-phone .tl-procs .pr-row { gap: 6px; min-width: 0; }

body.is-phone .tl-tosp { flex: 0 0 auto; }
body.is-phone .tl-listing { flex: 0 0 auto; min-width: 0; }
/* listing.js's form is two fields and a button; at 360px they stack rather
   than clipping the date. */
body.is-phone .tl-listing .li-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
body.is-phone .tl-listing .li-in {
  flex: 1 1 100%;
  min-width: 0;
  min-height: var(--tap, 44px);
}
body.is-phone .tl-listing .btn { min-height: var(--tap, 44px); }

/* ── 14 · plan ──────────────────────────────────────────────────────────── */

body.is-phone .tl-said-list { min-width: 0; }
body.is-phone .tl-said-list .rec-list { min-width: 0; }

/* ── 15 · diagnosis ─────────────────────────────────────────────────────── */

/* THE RAIL SLIDES SIDEWAYS rather than wrapping to three rows: the pane's
   height is the screen's, and the folder's diagnoses are a list to browse,
   not a list to read at once. `ph-chips.hscroll` is Parcel A's; what is here
   is only what a folder chip needs. */
body.is-phone .tl-dx { flex: 0 0 auto; }
body.is-phone .tl-dx-c {
  min-height: var(--tap, 44px);
  max-width: 74vw;
  flex: 0 0 auto;
  gap: 6px;
}
body.is-phone .tl-dx-l {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==== apk_tools END — the five tools' panes (LE-57 Parcel C2) ==== */

/* ==== apk_review BEGIN — the phone's review and close (LE-57 Parcel D) ==== */

/* THE PANE FILLS THE WORK HOST AND NEVER SCROLLS AS A WHOLE. One region
   inside it scrolls (`.rv-scroll`, marked `data-scroll`), so the tabs above
   and the three acts below stay under the thumb at 360 as well as 412. */
body.is-phone .rv-pane {
  display: flex; flex-direction: column; gap: 8px;
  flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden;
}
body.is-phone .rv-scroll {
  display: flex; flex-direction: column; gap: 8px;
  flex: 1 1 auto; min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
body.is-phone .rv-scroll::-webkit-scrollbar { display: none; }

/* the wrapper for the shape of `ic()` that hands back markup rather than a
   node. Parcel A's ships a node, so this is the path that is not taken —
   kept because an icon set is a dependency and a clinical screen must not
   turn on which of two shapes it hands back. */
body.is-phone .rv-ic { display: inline-flex; flex: 0 0 auto; }

/* the seat a borrowed node leaves behind in the pass's own column */
body.is-phone .rv-seat { display: none; }

/* ── the PDF row (board 17's card, board 18's row) ── */
body.is-phone .rv-pdf { min-height: var(--tap); }
body.is-phone .rv-open { margin-left: auto; flex: 0 0 auto; }

/* ── the blocks this page borrows from pass.js's column ──
   Moved, never redrawn. What changes here is spacing and the size of a
   thumb: every control inside is brought up to 44px, because the same
   button that is fine under a mouse is not fine under a thumb. */
body.is-phone .rv-host { min-width: 0; display: block; }
body.is-phone .rv-host .points,
body.is-phone .rv-host .review,
body.is-phone .rv-host .close { margin: 0; padding: 8px 10px; }
body.is-phone .rv-host .btn { min-height: var(--tap); }
body.is-phone .rv-host .pt-acts { gap: 8px; }
body.is-phone .rv-host .pt-acts .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
body.is-phone .rv-host .review-row { gap: 8px; }
body.is-phone .rv-host .review-row .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
body.is-phone .rv-host .review-pdf { height: 52vh; }
body.is-phone .rv-host .close-grid { gap: 8px; }
body.is-phone .rv-host .close-grid .btn { flex: 1 1 auto; justify-content: center; }
body.is-phone .rv-host .close-line { align-items: center; gap: 8px; }
body.is-phone .rv-host .close-date { min-height: var(--tap); flex: 1 1 auto; min-width: 0; }
body.is-phone .rv-host .say-box,
body.is-phone .rv-host .ed-box { min-height: 76px; }

/* ── plan: the collect row ── */
body.is-phone .rv-collect { min-height: var(--tap); border-radius: 10px; }
body.is-phone .rv-collect.dimmed { opacity: 0.8; }
body.is-phone .rv-tappable { cursor: pointer; }

/* ── schedule: drawn, dimmed, and tagged — never a button into nothing ── */
body.is-phone .rv-sched { gap: 8px; }

/* ── the disposition, and the intervals on his grid ── */
body.is-phone .rv-answers { gap: 8px; }
body.is-phone .rv-answer { justify-content: center; }
body.is-phone .rv-intervals { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* THE UNIT SWITCH IS A BUTTON IN A SEGMENT, and Parcel A's `.ph-seg > *`
   already gives any child the typography, the divider and the lit state --
   so all that is added here is the 44px each one owes a thumb, and the one
   state A's segment has no word for: a unit the door offers nothing in. */
body.is-phone .rv-unit { min-height: var(--tap); }
body.is-phone .rv-unit.dimmed { opacity: 0.8; }
body.is-phone .rv-nums { gap: 8px; }
body.is-phone .rv-rest { gap: 8px; }

/* ── the acts, at the foot, in the board's weights ── */
body.is-phone .rv-acts { margin-top: auto; }
body.is-phone .rv-grow { flex: 1.6 1 0; }
body.is-phone .rv-narrow { flex: 0.8 1 0; }
body.is-phone .rv-dim { opacity: 0.8; }

body.is-phone .rv-said { margin-top: 0; }

/* ==== apk_review END — the phone's review and close (LE-57 Parcel D) ==== */

/* ==== apk_enc BEGIN — the phone's encounter page (LE-57 Parcel C1) ==== */

/* the page: a column between the top bar and the capture bar, clipped --
   the page never scrolls, one region inside it does */
body.is-phone #phoneenc {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* THE ONE SCROLLING REGION on the NOTE state (marked data-scroll): the
   note, what has been gathered and what comes out, with the tabs, the
   strip, the capture bar, the acts and the foot staying put. */
body.is-phone .enc-state {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
body.is-phone .enc-state::-webkit-scrollbar { display: none; }

/* the note column, moved in. Shown (app.css hides .col-note below 768px)
   and stripped of the desktop's seat, and NOT a scroller of its own. */
body.is-phone .enc-note { flex: 0 0 auto; min-width: 0; }
body.is-phone .enc-note > .col-note {
  display: block;
  grid-area: auto;
  border-right: 0;
  padding: 0;
  min-height: 0;
  overflow: visible;
}
/* the seat it came out of, kept so it can go back: it draws nothing */
body.is-phone .enc-note-gone { display: none; }

/* what has been gathered: one row per tool, so it never needs to scroll */
body.is-phone .enc-gathered { flex: 0 0 auto; }
body.is-phone .enc-empty {
  color: var(--dim);
  font: 400 12px/1.4 var(--display);
  white-space: normal;
}

/* the recordings strip's own text and its one control */
body.is-phone .enc-recs-t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.is-phone .enc-recs-b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--tap);
  padding: 0 2px;
}

/* the one list of recordings, when it is not in the NOTE state's own seat */
body.is-phone .enc-drawer {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 12px;
  scrollbar-width: none;
}
body.is-phone .enc-drawer::-webkit-scrollbar { display: none; }
body.is-phone .enc-recseat { flex: 0 1 auto; min-height: 0; }

/* the capture bar's seat: capture.js's one strip, where the board puts it */
body.is-phone .enc-cap { flex: 0 0 auto; min-width: 0; }

/* WHERE THE PASS WAITS. `#app` and `#footrule` are moved in here and are
   never drawn: pass.js paints `#col-fields` by id and this page presses its
   Done through it, so the columns must stay IN the document. Parcel D moves
   the review out of here into its own pane, and a node moved out of a
   display:none ancestor draws normally. */
body.is-phone .enc-hold { display: none; }

/* the acts, the reasons the room offered, and the one sentence */
body.is-phone .enc-acts { flex: 0 0 auto; }
body.is-phone .enc-pend {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 12px 6px;
}
body.is-phone .enc-said {
  flex: 0 0 auto;
  margin: 0 12px 6px;
  font: 500 11.5px/1.45 var(--mono);
  color: var(--dim);
}
body.is-phone .enc-said.ok { color: var(--teal); }
body.is-phone .enc-said.no { color: var(--red-ink); }
body.is-phone .enc-wait {
  color: var(--dimmer);
  font: 500 11px/1.45 var(--mono);
}

/* while the model has the note there is nothing to press, so the acts give
   way to one line at the same height -- the row does not jump */
body.is-phone .enc-writing {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 12px 8px;
  color: var(--teal);
  font: 500 13px/1.4 var(--display);
}

/* what comes out of this encounter */
body.is-phone .enc-output {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Parcel A's glyph, in its own seat, so an icon that cannot be drawn leaves
   a gap rather than collapsing the row it is in */
body.is-phone .enc-ic {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* ==== apk_enc END — the phone's encounter page (LE-57 Parcel C1) ==== */

/* ==== apk_now BEGIN ==== */
/* LE-57 Parcel B — Now, Schedule and Diary. Fold into `app/app.css` ABOVE
 * the chat sections (LE-49: a marker-to-EOF slice swallows anything after
 * the last marker), and AFTER `apk_frame` — see the cascade note below.
 * Keep the two markers so the harness can read the block back out.
 *
 * IT ADDS WHAT THESE THREE PAGES ALONE NEED AND NOTHING ELSE. Every selector
 * names at least one `.now-` class of this parcel's own, and no rule's last
 * compound is a bare `ph-*`: the vocabulary is Parcel A's. Where a page
 * wanted something A already spells, the MARKUP was changed to use A's class
 * rather than a rule added here — `.ph-content` for the page column,
 * `.ph-row.seen` for a seen patient, `.ph-row.wrap` for a line that wraps,
 * `.ph-seg.h36` for the short segment, `.ph-btn.own` for a button that keeps
 * its own width, `.ph-mo .d.hol` for a public holiday.
 *
 * THE CASCADE, MEASURED RATHER THAN ASSUMED. Every rule in `apk_frame.css`
 * is scoped `body.is-phone .ph-…`, which outranks a bare `.now-…`. So each
 * rule below that has to BEAT one of A's carries the same scope and one
 * class more — `body.is-phone .ph-band.now-pad`, not `.now-pad`. Rules that
 * set something A does not set are left unscoped.
 *
 * IT DECLARES NO TOKEN. No `:root`, no custom property: every colour is
 * app.css's own, so both palettes follow without this file being told.
 */

/* ── the page ─────────────────────────────────────────────────────────── */
/* `.now-page` is `.ph-content` with a name of its own, so these pages can
   be found; the column, the gutter and the gap are A's. */
.now-tiles,
.now-car,
.now-chips,
.now-nbs { flex: 0 0 auto; }

/* A 44px TARGET INSIDE AN 18px ROW. The mock-up's own trick (its `.who` on
   the top bar): full height, pulled back by margin, so a section head keeps
   its height and the thumb still gets its 44px. Scoped to beat A's
   `.ph-sh .r`, which is the same element on the Diary link. */
body.is-phone .ph-sh .r.now-hit,
.now-hit {
  height: var(--tap);
  margin: -13px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--teal);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  border: 0; padding: 0 2px;   /* a button: no browser outline around the link */
}
.now-hit:active { opacity: 0.7; }

/* ── Now (board 1) ────────────────────────────────────────────────────── */
.now-sched {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.now-more { padding: 6px 10px; }

/* NOT BUILT, and it looks it: a dimmed band with a tag, no rows, and a tap
   that says why -- never a control into nothing. A `.ph-chip` already has
   `.dimmed`; a band has not, so this is the one that is added. */
body.is-phone .ph-band.now-nb { opacity: 0.8; border-style: dashed; }
.now-nb-say { color: var(--dim); font-size: 11.5px; }
.now-nbs { display: flex; flex-wrap: wrap; gap: 7px; }

/* ── the carousel (boards 6–9) ────────────────────────────────────────── */
.now-car { display: flex; align-items: center; gap: 8px; min-width: 0; }
.now-arrow {
  flex: 0 0 var(--tap);
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--sunk);
  color: var(--dim);
  cursor: pointer;
}
.now-arrow:active { background: var(--panel-2); }
.now-seg { flex: 2.2 1 0; min-width: 0; }
.now-lbl-r { display: inline-flex; align-items: center; gap: 8px; }
.now-nb-tag { opacity: 1; }   /* its band is already dimmed; two fades compound to unreadable */

/* the body of whichever scope is on: one region, and only the day scrolls */
.now-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* THE CAROUSEL IS THE SCOPE BAR ON THE PHONE, so the two hosted painters'
   own bars are hidden rather than drawn twice. Both drive the same `ask`,
   so they cannot come to disagree about which day is on screen. */
.now-body .dy-bar,
.now-body .wk-head { display: none; }
.now-body .dy-sum,
.now-body .dy-why { font-size: 11px; color: var(--dim); }
.now-body .dy-list { display: flex; flex-direction: column; gap: 8px; }
.now-body .dy-row { min-height: var(--tap); }
.now-body .wk-grid { flex: 1 1 auto; min-height: 0; }

/* the month's own marks — the colour says what kind of fact it is, and
   every figure in a square is a count the door sent for that day */
.now-m-pt { color: var(--teal); }
.now-m-call { color: var(--map-numb); }
.now-m-lv { color: var(--amber-ink); }
.now-m-ph { color: var(--ink-2); }
.now-m-def { color: var(--red-ink); text-decoration: line-through; }
.now-m-can { color: var(--dimmer); text-decoration: line-through; }

/* the year's twelve cards */
.now-st-pt { color: var(--ink); }
.now-st-lv { color: var(--amber-ink); }

/* the legend's swatches: A sizes the box, this says what each one means */
.now-legend i { border: 1px solid transparent; }
.now-l-pt { background: rgba(79, 214, 200, 0.24); }
.now-l-call { background: rgba(90, 162, 255, 0.24); }
.now-l-lv { background: rgba(224, 164, 74, 0.24); }
.now-l-ph { background: rgba(220, 235, 233, 0.12); }
.now-l-def { border-color: var(--red); }
.now-l-can { border-color: var(--dimmer); }

/* ── the diary (board 10) ─────────────────────────────────────────────── */
/* a `.ph-band` is `flex: 0 0 auto`; these two have to give and grow, so
   both carry A's scope and one class more */
body.is-phone .ph-split > .now-roster { flex: 1 1 0; min-width: 0; }
.now-bad { padding: 4px 10px 8px; color: var(--amber-ink); }
.now-chip { flex: 1 1 0; min-width: 0; justify-content: center; }
body.is-phone .ph-chip.now-conflicts {
  flex: 0 0 auto;
  justify-content: flex-start;
  border-color: rgba(79, 214, 200, 0.45);
}
.now-conflicts .n { margin-left: auto; }
body.is-phone .ph-chip.now-conflicts.red {
  border-color: rgba(224, 90, 74, 0.45);
  color: var(--red-ink);
}

/* ── the note pad ─────────────────────────────────────────────────────── */
body.is-phone .ph-band.now-pad {
  flex: 1 1 auto;
  min-height: 0;
}
.now-pad-new {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 10px;
}
/* NOT `.ph-split`: its `> *` would give the three boxes one width each. */
.now-pad-line { display: flex; gap: 7px; min-width: 0; }
.now-pad-text,
.now-pad-when {
  height: var(--tap);
  min-width: 0;
  font-family: var(--display);
  font-size: 13px;
  color: var(--ink);
}
.now-pad-text { flex: 2.4 1 0; }
.now-pad-when { flex: 1 1 0; font-family: var(--mono); font-size: 12px; }
.now-pad-add { padding: 0 12px; }
.now-pad-rows {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.now-pad-row { padding-block: 4px; }
.now-pad-edit,
.now-pad-rm {
  width: var(--tap);
  height: var(--tap);
  margin: -8px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  cursor: pointer;
}
.now-pad-rm { color: var(--red-ink); }
/* THE READ-BACK, and it is the whole point of the second asking: what
   stands now, beside what would replace it. */
.now-pad-back {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 10px 8px;
  padding: 9px 11px;
  border-radius: var(--r);
  border: 1px solid rgba(224, 164, 74, 0.35);
  background: rgba(224, 164, 74, 0.06);
}
.now-pad-back-h { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.now-pad-back-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 12px; }
.now-pad-back-l .was { color: var(--dim); text-decoration: line-through; }
.now-pad-back-l .arrow { color: var(--dimmer); }
.now-pad-back-l .now { color: var(--ink); font-weight: 500; }
.now-pad-back-l .when { color: var(--amber-ink); font-family: var(--mono); font-size: 11px; }
.now-pad-back-a { display: flex; gap: 7px; }

/* ── 360×752: the same pages, tighter ─────────────────────────────────── */
@media (max-height: 780px) {
  .now-sched { gap: 8px; }
  .now-pad-new { gap: 6px; padding: 6px 10px; }
}
/* the segment grows between the arrows: A's .ph-seg is flex 0 0 auto at a
   higher specificity than .now-seg, so the class pair is named (integrator) */
body.is-phone .ph-seg.now-seg { flex: 2.2 1 0; }
/* A SECTION HEADER THAT CARRIES A TAP -- the schedule's Diary chip -- is as
   tall as the tap and centres it, where an 18px header let the 44px chip
   overhang the band below (the whole-app render). Headers without one keep
   their 18px. */
body.is-phone .now-sh:has(.now-hit) { align-items: center; min-height: var(--tap); }

/* ==== apk_now END ==== */

/* ==== apk_arrivals BEGIN — the arrivals pages (LE-57, Parcel E1) ==== */
/* THE ARRIVALS PAGES ON THE PHONE: the check-in picker as a bottom sheet
   over Now, the pre-clerk's phone layout, the waiting room's five lanes,
   and the registration page. `checkin.js`, `preclerk.js`, `listing.js` and
   `room.js` are UNCHANGED by this parcel -- everything below styles their
   EXISTING markup, or lays out the two new modules (`roomlanes.js`,
   `register.js`) that paint NEW markup of their own under the `.ar-`
   prefix, per the letter's one-vocabulary rule (section 2).

   EVERY SELECTOR BEGINS `body.is-phone`, the same discipline Parcel A's
   frame keeps: take the class away and the desktop -- `.checkin`, `#room`,
   `#preclerk`, `.ci-*`, `.pc-*`, `.li-*`, `.wr-*` -- is pixel-identical to
   what it was before this file existed. Nothing here redefines a `ph-`
   rule; the `.ar-` prefix is this parcel's own, and the handful of `.wr-`
   / `.ci-` / `.pc-` / `.li-` overrides below are scoped under an id or a
   class this parcel's pages own (#room, #registerview, #checkinview,
   #preclerk), never bare.

   TOKENS, NOT LITERALS -- the house rule (see apk_frame.css's own note):
   every colour below is one of app.css's `var(--…)` tokens, so this page
   is dark on the phone today and would flip for free if the toggle ever
   reached it. */

/* ── 1 · the check-in picker, as a bottom sheet over Now ──────────────────
   `checkin.js` is not this parcel's to edit (LE-57 section 3's hard rule),
   and it paints `.ci` directly into `#checkinview` -- a plain region the
   router shows and hides like any other. So the sheet look is built on the
   EXISTING id and the EXISTING `.ci` card rather than on Parcel A's
   `.ph-veil` / `.ph-sheet` classes, which nothing in checkin.js's own
   markup carries and which this parcel cannot add without touching
   `index.html` or `checkin.js`. The declared VALUES are copied from those
   two classes verbatim (apk_frame.css, "a bottom sheet -- the check-in
   picker, and anything else that asks over a page"), so the two surfaces
   read as the same design language even though they are not, structurally,
   the same two elements.

   PREFERRED, IF THE INTEGRATOR WOULD RATHER: give `#checkinview` the
   literal classes `ph-sheet` and add a sibling `<div class="ph-veil"
   hidden>` that app.js shows and hides in lockstep with it (index.html and
   app.js are the integrator's own files). Nothing below breaks if that is
   done instead -- an id selector and a class selector setting the same
   properties is a harmless duplicate, not a conflict. Until then, this
   fragment is what makes the picker read as a sheet. */
body.is-phone #checkinview {
  /* STARTS UNDER THE BAR, WHATEVER THE BAR'S HEIGHT: the router measures
     #spine on every paint and writes it to --spine-h (99px, or 145 with a
     patient), so the sheet can never paint over the bar's own text -- which
     a sheet fixed at the top did, at every size, in the whole-app render of
     10 September. The veil beneath still covers the bar. */
  position: fixed; inset: var(--spine-h, 0px) 0 0 0; z-index: 51;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; background: transparent;
}
/* the veil -- a pseudo-element rather than a second real node, because
   this parcel draws no new markup into a file it does not own */
body.is-phone #checkinview::before {
  content: ""; position: fixed; inset: 0; z-index: 50;
  background: rgba(4, 9, 10, 0.62);
}
body.is-phone #checkinview .ci {
  position: relative; z-index: 51; width: 100%;
  max-height: calc(100% - 16px);   /* the bar is outside this box now, so only the handle's own headroom */
  margin: 0; padding: 10px 12px calc(14px + var(--safe-b));
  border-radius: 18px 18px 0 0;
  border: 1px solid rgba(79, 214, 200, 0.2); border-bottom: 0;
  background: var(--panel-2); box-shadow: var(--z2);
}
/* a decorative grab handle, the sheet's own affordance -- CSS content, so
   no new element is needed for it either */
body.is-phone #checkinview .ci::before {
  content: ""; align-self: center; order: -1;
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(79, 214, 200, 0.25); flex: 0 0 auto;
}
/* ONE REGION SCROLLS INSIDE THE SHEET: the groups of places, never the
   sheet itself. `.ci-head`, `.ci-status` stay put above and below it. */
body.is-phone #checkinview .ci-head,
body.is-phone #checkinview .ci-status { flex: 0 0 auto; }
body.is-phone #checkinview .ci-cols {
  grid-template-columns: 1fr; overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; min-height: 0;
}
body.is-phone #checkinview .ci-cols::-webkit-scrollbar { display: none; }
/* THE EXPLANATORY PARAGRAPH IS THE DRAWER'S, not the sheet's -- a compact
   sheet reached with one tap needs the places, not a paragraph about them;
   the same sentence is still on the desktop's drawer underneath it. */
body.is-phone #checkinview .ci-foot { display: none; }

/* ── 2 · the pre-clerk's phone layout ──────────────────────────────────────
   `preclerk.js` and `listing.js` are unchanged; the theatre list, the
   progress bar, the ticks and Add a task are exactly their own markup
   (`.pc-*`, `.li-*`), sized here for a thumb rather than a mouse. */
body.is-phone #preclerk { padding: 8px 12px; overflow-y: auto; }
body.is-phone #preclerk .pc-head { padding-top: 2px; }
body.is-phone #preclerk .pc-t { font-size: 16px; }
body.is-phone #preclerk .pc-row { padding: 10px 0; }
body.is-phone #preclerk .pc-line { font-size: 13px; }
body.is-phone #preclerk .pc-who,
body.is-phone #preclerk .pc-list .pc-task-t {
  min-height: var(--tap); display: inline-flex; align-items: center;
}
/* a checkbox glyph alone is well under the 44px floor -- the tap area
   grows around it without moving the glyph off its baseline */
body.is-phone #preclerk .pc-tick {
  min-width: var(--tap); min-height: var(--tap); font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
body.is-phone #preclerk .pc-task { align-items: center; }
body.is-phone #preclerk .li-in,
body.is-phone #preclerk .li-in-d { min-height: var(--tap); font-size: 14px; }
body.is-phone #preclerk .li-form { gap: 8px; }

/* ── 3 · the waiting room's five lanes (roomlanes.js) ──────────────────────
   `#room` is the existing section; on a phone the integrator seats
   `paintRoomLanes` into it instead of `paintRoom` (this parcel's message,
   §3). Every ROW below is `personRow`'s own `.wr-*` markup, unchanged --
   only the band chrome and a couple of tap targets are this file's. */
body.is-phone #room { padding: 8px 12px; }
body.is-phone .ar-room-title {
  display: flex; align-items: baseline; gap: 10px; height: var(--tap);
  flex: 0 0 auto;
}
body.is-phone .ar-room-t { font-size: 18px; font-weight: 600; color: #ffffff; }
body.is-phone .ar-room-n { font-size: 11px; color: var(--dim); }
body.is-phone .ar-lanes { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
/* `.ph-band` / `.ph-band-h` are Parcel A's own (apk_frame.css); `.ar-lane`
   and `.ar-lane-h` add nothing that rule does not already draw -- they are
   hooks for the two phone-only tweaks below, not a second definition of
   the band's look. */
body.is-phone .ar-lane-h { text-transform: uppercase; }
body.is-phone .ar-lane-b { display: flex; flex-direction: column; padding: 0 2px; }
/* THE ROOM'S OWN ROWS, sized for a thumb. `.wr-acts .btn` already meets
   --tap through app.css's base `.btn` rule; what does not is the type
   picker, which has no min-height of its own outside the desktop's
   compact corners (`.dk-lights` / `.dk-quad`), neither of which wraps
   #room on the phone. */
body.is-phone #room .wr-row { padding: 8px 4px; }
body.is-phone #room select.wr-type { min-height: var(--tap); font-size: 13px; padding: 4px 8px; }
body.is-phone #room .wr-acts { gap: 8px; }
body.is-phone #room .wr-new { display: none; } /* the walk-in lives on its own page here (register.js) */

/* ── 4 · the registration page (register.js) ───────────────────────────────
   `walkInForm` is room.js's own, hosted whole; the assisted card and the
   Singpass section are this parcel's, under `.ar-`. */
body.is-phone #registerview { padding: 0; }
body.is-phone .ar-register {
  display: flex; flex-direction: column; gap: 12px; padding: 8px 12px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* THE TYPED FORM'S OWN FIELDS, sized for a thumb -- the desktop's compact
   corners (`.dk-lights` / `.dk-quad`) do not reach this page, so nothing
   here shrinks anything the desktop relies on. */
body.is-phone #registerview .wr-form { gap: 10px; align-items: stretch; }
body.is-phone #registerview .wr-in,
body.is-phone #registerview select.wr-type,
body.is-phone #registerview select { min-height: var(--tap); font-size: 14px; padding: 0 12px; }
body.is-phone #registerview .wr-walkin { display: flex; flex-direction: column; gap: 8px; }

body.is-phone .ar-dob-hint { margin-top: -2px; }

body.is-phone .ar-assist,
body.is-phone .ar-singpass { display: flex; flex-direction: column; gap: 8px; }
/* THE "SAY IT" AND "SCAN SINGPASS" CONTROLS read as full-width rows in the
   mock (a name-sized chip would read as decorative for an action this
   central) -- `.ph-chip.sq` still gives the corner radius, this is only
   the width and the internal alignment. */
body.is-phone .ar-say-btn,
body.is-phone .ar-nb {
  width: 100%; justify-content: flex-start; min-height: var(--tap);
  gap: 10px;
}
body.is-phone .ar-say-btn .n,
body.is-phone .ar-nb .ph-tag { margin-left: auto; }
/* recording is a state, not decoration -- a distinct tint from the plain
   `.ph-chip.on` selection highlight every chip already carries */
body.is-phone .ar-say-btn.on {
  background: rgba(224, 90, 74, 0.14); border-color: rgba(224, 90, 74, 0.45);
  color: var(--red-ink);
}
body.is-phone .ar-say-typed { display: flex; gap: 8px; }
body.is-phone .ar-say-in { flex: 1 1 auto; min-width: 0; min-height: var(--tap); font-size: 14px; }
body.is-phone .ar-say-send { flex: 0 0 auto; }
body.is-phone .ar-card { gap: 10px; }
body.is-phone .ar-heard i { color: var(--ink-2); font-style: italic; }
body.is-phone .ar-key { font-size: 12px; color: var(--teal); }
body.is-phone .ar-fixes { margin-top: 2px; }
body.is-phone .ar-tick { width: 100%; }
/* ==== apk_arrivals END — the arrivals pages (LE-57, Parcel E1) ==== */

/* ==== apk_folder BEGIN — the folder, patients, billing, tasks & settings (LE-57 Parcel E2) ==== */

/* ── the nine tiles (board 20) and one section open (board 21) ───────────── */

body.is-phone .fd-tiles { flex: 1 1 auto; min-height: 0; align-content: start; }

body.is-phone .fd-section-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.is-phone .fd-section-body .fo-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--dim);
  padding: 6px 2px 2px;
}
body.is-phone .fd-section-body .fo-h2 { display: flex; align-items: baseline; gap: 8px; }
body.is-phone .fd-section-body .fo-h-r { margin-left: auto; color: var(--dimmer); font-size: 9px; }

body.is-phone .fd-section-body .fo-fields,
body.is-phone .fd-section-body .fo-encs,
body.is-phone .fd-section-body .fo-ms,
body.is-phone .fd-section-body .fo-films { display: flex; flex-direction: column; gap: 6px; }

body.is-phone .fd-section-body .fo-f,
body.is-phone .fd-section-body .fo-enc,
body.is-phone .fd-section-body .fo-m {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap, 44px);
  padding: 0 10px;
  border-radius: var(--r, 10px);
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
  min-width: 0;
}
body.is-phone .fd-section-body .fo-k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--dimmer);
  flex: 0 0 auto;
}
body.is-phone .fd-section-body .fo-v,
body.is-phone .fd-section-body .fo-enc-l,
body.is-phone .fd-section-body .fo-m-n {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.is-phone .fd-section-body .fo-enc-r,
body.is-phone .fd-section-body .fo-m-v,
body.is-phone .fd-section-body .fo-m-w {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--dim);
}
body.is-phone .fd-section-body .fo-m-off { color: var(--red-ink); font-size: 11px; }
body.is-phone .fd-section-body .fo-m-un { color: var(--amber-ink); font-size: 10px; }
body.is-phone .fd-section-body .fo-m-t { font-size: 10.5px; color: var(--dimmer); padding-left: 2px; }
body.is-phone .fd-section-body .fo-flag { color: var(--red-ink); }
body.is-phone .fd-section-body .is-gone .fo-enc-l,
body.is-phone .fd-section-body .is-off .fo-m-n { text-decoration: line-through; opacity: 0.6; }
body.is-phone .fd-section-body .fo-none,
body.is-phone .fd-section-body .fo-not,
body.is-phone .fd-section-body .fo-more {
  font-size: 12.5px;
  color: var(--dim);
  padding: 6px 2px;
}

/* the photographs (the Imaging tile): a grid of cards, not rows — a film is
   looked at, not read. The BY MODALITY chips hide a card by toggling
   `hidden` on it (phonefolder.js's own filter); `[hidden]` already means
   "gone" everywhere in this app. */
body.is-phone .fd-section-body .fo-films {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.is-phone .fd-section-body .fo-film {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  border-radius: var(--r, 10px);
  border: 1px solid var(--line);
  background: var(--sunk);
  padding: 6px;
}
body.is-phone .fd-section-body .fo-film-n { font-size: 11.5px; color: var(--ink); white-space: normal; }
body.is-phone .fd-section-body .fo-film-x { font-size: 10px; color: var(--dim); }
body.is-phone .fd-section-body .fo-film-b { min-height: var(--tap, 44px); font-size: 12px; }
body.is-phone .fd-section-body .fo-film-img { max-width: 100%; border-radius: 6px; display: block; }

/* the correction box — reached only if a caller ever opens 'bio' or
   'background' through this same drill-down. This parcel's nine tiles do
   not (see apk_folder.md); the styling costs nothing to have ready and
   keeps the read-back legible if a later tile ever reaches it. */
body.is-phone .fd-section-body .fo-fix { display: flex; flex-direction: column; gap: 8px; }
body.is-phone .fd-section-body .fo-fix-in { min-height: var(--tap, 44px); font-size: 14px; width: 100%; }
body.is-phone .fd-section-body .fo-fix-acts { display: flex; gap: 8px; }
body.is-phone .fd-section-body .fo-fix-acts .btn { min-height: var(--tap, 44px); flex: 1 1 0; }
body.is-phone .fd-section-body .fo-fix-back { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }

/* the pre-clerk listing (the Upcoming tile) — listing.js's own form */
body.is-phone .fd-section-body .fo-pre { display: flex; flex-direction: column; gap: 8px; }
body.is-phone .fd-section-body .li-in,
body.is-phone .fd-section-body .li-form .btn,
body.is-phone .fd-section-body .li-add .btn { min-height: var(--tap, 44px); }
body.is-phone .fd-section-body .li-form { display: flex; flex-wrap: wrap; gap: 6px; }
body.is-phone .fd-section-body .li-was { display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }

/* ── the bill (board 23): the mock-up's own bands and rows ────────────────── */

body.is-phone .fd-money-lines { flex: 1 1 auto; min-height: 0; }

/* ── patients.js, unchanged, phone-sized (board 22) ───────────────────────── */

body.is-phone #patients { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 6px; min-height: 0; }
body.is-phone #patients .pt-head { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; }
body.is-phone #patients .pt-t { font-size: 18px; font-weight: 600; color: var(--ink); }
body.is-phone #patients .pt-note { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--dim); }
body.is-phone #patients .pt-form { display: flex; gap: 8px; flex: 0 0 auto; }
body.is-phone #patients .pt-in { flex: 1 1 auto; min-width: 0; min-height: var(--tap, 44px); font-size: 14px; }
body.is-phone #patients .pt-form .btn { min-height: var(--tap, 44px); flex: 0 0 auto; }
body.is-phone #patients .pt-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.is-phone #patients .pt-list::-webkit-scrollbar { display: none; }
body.is-phone #patients .pt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap, 44px);
  padding: 0 10px;
  border-radius: var(--r, 10px);
  border: 1px solid var(--line);
  background: var(--sunk);
  min-width: 0;
}
body.is-phone #patients .pt-who {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--ink);
}
body.is-phone #patients .pt-key { font-size: 10px; color: var(--dim); flex: 0 0 auto; }
body.is-phone #patients .pt-tag {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--amber-ink);
  flex: 0 0 auto;
}
body.is-phone #patients .pt-n,
body.is-phone #patients .pt-when { font-family: var(--mono); font-size: 10px; color: var(--dim); flex: 0 0 auto; }
body.is-phone #patients .pt-none { padding: 10px 2px; color: var(--dim); font-size: 13px; }
body.is-phone #patients .is-retired { opacity: 0.7; border-style: dashed; }

/* ── tasks.js, unchanged, phone-sized ──────────────────────────────────────── */

body.is-phone #tasks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
body.is-phone #tasks::-webkit-scrollbar { display: none; }
body.is-phone #tasks .tk-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
body.is-phone #tasks .tk-t { font-size: 16px; font-weight: 600; color: var(--ink); }
body.is-phone #tasks .tk-n { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--dim); }
body.is-phone #tasks .tk-late { color: var(--red-ink); font-size: 12.5px; }
body.is-phone #tasks .tk-tray { font-size: 12px; color: var(--amber-ink); }
body.is-phone #tasks .tk-group { display: flex; align-items: center; gap: 8px; padding-top: 6px; font-size: 11.5px; color: var(--dim); }
body.is-phone #tasks .tk-g-l { display: flex; align-items: center; gap: 6px; }
body.is-phone #tasks .tk-g-n { margin-left: auto; font-family: var(--mono); }
body.is-phone #tasks .tk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap, 44px);
  padding: 6px 4px;
  border-top: 1px solid var(--line-soft);
  min-width: 0;
}
body.is-phone #tasks .tk-tick {
  min-width: var(--tap, 44px);
  min-height: var(--tap, 44px);
  font-size: 18px;
  text-align: center;
  flex: 0 0 auto;
}
body.is-phone #tasks .tk-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.is-phone #tasks .tk-what { font-size: 13.5px; color: var(--ink); }
body.is-phone #tasks .tk-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.is-phone #tasks .tk-key,
body.is-phone #tasks .tk-from,
body.is-phone #tasks .tk-due,
body.is-phone #tasks .tk-tag { font-size: 10px; color: var(--dim); }
body.is-phone #tasks .tk-due.is-late { color: var(--red-ink); }
body.is-phone #tasks .is-late .tk-what { color: var(--red-ink); }
body.is-phone #tasks .tk-none { padding: 10px 2px; color: var(--dim); font-size: 13px; }
body.is-phone #tasks .tk-ns { padding-top: 4px; }

/* ── settings.js, unchanged, phone-sized ───────────────────────────────────── */

body.is-phone #settingsview,
body.is-phone #doctorinfo,
body.is-phone #clinicinfo,
body.is-phone #performance,
body.is-phone #auditview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
body.is-phone #settingsview::-webkit-scrollbar,
body.is-phone #doctorinfo::-webkit-scrollbar,
body.is-phone #clinicinfo::-webkit-scrollbar,
body.is-phone #performance::-webkit-scrollbar,
body.is-phone #auditview::-webkit-scrollbar { display: none; }

body.is-phone .st-head { flex: 0 0 auto; }
body.is-phone .st-t { font-size: 18px; font-weight: 600; color: var(--ink); }
body.is-phone .st-sub { font-size: 12px; color: var(--dim); }
body.is-phone .st-menu { display: flex; flex-direction: column; gap: 6px; }
body.is-phone .st-menu-row { display: flex; flex-wrap: wrap; gap: 6px; }
body.is-phone .st-menu-chip {
  min-height: var(--tap, 44px);
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--sunk);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink);
}
body.is-phone .st-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--r, 10px);
  border: 1px solid var(--line);
  background: var(--panel);
}
body.is-phone .st-card-t { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
body.is-phone .st-card-foot { font-size: 10.5px; color: var(--dim); }
body.is-phone .st-field { display: flex; align-items: baseline; gap: 8px; min-height: 32px; flex-wrap: wrap; }
body.is-phone .st-field-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--dimmer); flex: 0 0 auto; }
body.is-phone .st-field-v { font-size: 13px; color: var(--ink); }
body.is-phone .st-banner { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: var(--r, 10px); background: var(--panel); border: 1px solid var(--line); }
body.is-phone .st-banner-l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--dim); }
body.is-phone .st-banner-v { font-size: 15px; color: var(--ink); }
body.is-phone .st-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
body.is-phone .st-tab {
  min-height: var(--tap, 44px);
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--sunk);
  font-size: 12.5px;
  color: var(--dim);
}
body.is-phone .st-tab.is-active { color: var(--teal); border-color: rgba(79,214,200,0.5); background: rgba(79,214,200,0.14); }
body.is-phone .st-line { font-family: var(--mono); font-size: 12px; color: var(--ink); padding: 3px 2px; }
body.is-phone .st-line-gap { height: 6px; }
body.is-phone .st-verdict { padding: 10px 12px; border-radius: var(--r, 10px); border: 1px solid var(--line); background: var(--panel); }
body.is-phone .st-verdict-h { font-size: 14px; color: var(--ink); }
body.is-phone .st-counts { font-size: 11.5px; color: var(--dim); }
body.is-phone .st-section-t { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--dim); padding-top: 6px; }
body.is-phone .st-sim { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 12.5px; }
body.is-phone .st-sim-n { flex: 1 1 auto; min-width: 0; }
body.is-phone .st-finding { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
body.is-phone .st-finding-w { font-size: 12px; }
body.is-phone .st-finding-what { font-size: 13px; color: var(--ink); }
body.is-phone .st-more,
body.is-phone .st-none { font-size: 12.5px; color: var(--dim); padding: 6px 2px; }

/* the everything-else row: the shared row class used as a button here
   (elsewhere it is a `<div>`, so it carries no button reset of its own) —
   appended after the settings menu paints, see apk_folder.md */
body.is-phone .fd-everything-else {
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px solid var(--line-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-top: 6px;
}

/* ==== apk_folder END — the folder, patients, billing, tasks & settings (LE-57 Parcel E2) ==== */


/* ── fb2_util.css — the three utility planes (LE-58, Parcel U) ── */
/* A FRAGMENT, NOT A SECOND STYLESHEET. `app/app.css` is one of the eight
   files the integrator alone touches (LE-37); this text is folded into it
   under the marker line above and is bounded at BOTH ends, because a block
   left to trail off at EOF joins whatever parcel came last — LE-48's own
   lesson, which cost `verify_console_chatenc` a red run.

   WHERE IT GOES: anywhere among the desktop blocks, and NOT after the last
   chat marker. It reads tokens only and defines none, so
   `verify_theme_contrast.py`, which parses both palettes out of app.css,
   has nothing new to weigh; every colour below is a var() that already
   exists in the dark palette and is already repainted in the day one.

   IT STYLES ONLY WHAT app/utility.js DRAWS. Every selector is prefixed
   `ut-`, and the two shared classes it leans on — `.mono` and `.tappable` —
   are app.css's own and are not touched here.

   THE PAGE NEVER SCROLLS. The plane is fixed over the encounter grid at the
   depth ladder's z2 — the same plane the body map opens on — and the CARD
   scrolls inside itself, exactly as `.map-plane-card` does. Nothing here
   makes the page longer. */

.ut-plane {
  position: fixed; inset: 0; z-index: 54;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(4,9,10,0.72);
}
.ut-card {
  width: min(820px, 100%); max-height: 92vh;
  display: flex; flex-direction: column;
  border-radius: 16px; background: rgba(7,15,16,0.98);
  border: 1px solid rgba(79,214,200,0.22); box-shadow: var(--z2);
  overflow: hidden;
}
/* EACH UTILITY ASKS FOR A DIFFERENT MEASURE, and the card's own kind class
   is where that is said. A précis is a page of monospaced prose and reads
   badly across 820px; a trend is four columns and wants the width; a
   medication review sits between them, its alert sentences wrapping under
   each drug. Three contents, three measures — not one width and a shrug. */
.ut-card.ut-summary   { width: min(700px, 100%); }
.ut-card.ut-trend     { width: min(880px, 100%); }
.ut-card.ut-medreview { width: min(780px, 100%); }

.ut-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line-soft);
}
.ut-i  { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.ut-ht { flex: 1 1 auto; min-width: 0; }
.ut-t  { font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
         color: var(--ink-2); }
.ut-s  { font-size: 11px; color: var(--dim); margin-top: 2px; }
.ut-back {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--dim); font-family: var(--mono); font-size: 11px;
  white-space: nowrap;
}
.ut-back:hover { border-color: var(--teal-2); color: var(--ink-2); }
.ut-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px; }
.ut-wait { font-family: var(--mono); font-size: 11px; color: var(--dimmer); }
.ut-no   { padding: 10px 12px; border-radius: var(--r);
           border: 1px dashed rgba(224,90,74,0.35); color: var(--red-ink);
           font-size: 12.5px; }
.ut-note { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--r);
           background: var(--sunk); border: 1px solid var(--line-soft);
           color: var(--dim); font-size: 11.5px; line-height: 1.5; }
.ut-h    { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
           color: var(--dimmer); margin: 14px 0 6px; }
.ut-h:first-child { margin-top: 0; }

/* ── 📜 the summary: a PAGE, so it is set as one ───────────────────────── */
/* The précis is a document with its own layout — precis.render_lines
   indents its rows with spaces — so it is set monospaced and `pre-wrap`,
   never re-flowed. A blank line in the middle of it is the page's own
   paragraph break; collapsing it would be re-typesetting a document that
   already has a typesetter. */
.ut-lines { padding: 12px 14px; border-radius: var(--r);
            background: var(--sunk); border: 1px solid var(--line-soft); }
.ut-line  { font-size: 12px; line-height: 1.62; color: var(--ink-2);
            white-space: pre-wrap; min-height: 1em; }
.ut-line.ut-lh { color: var(--teal-2); letter-spacing: .1em; margin-top: 8px; }
.ut-lines + .tiny { display: block; margin-top: 8px; }

/* ── 📈 the trend: one row per series ──────────────────────────────────── */
.ut-series { display: flex; flex-direction: column; gap: 2px; }
.ut-row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  grid-template-areas: "name spark fig dir" "foot foot foot foot";
  padding: 7px 8px; border-radius: var(--r);
  border-bottom: 1px solid var(--line-soft);
}
.ut-row:hover { background: var(--panel-2); }
.ut-name  { grid-area: name; min-width: 0; }
.ut-n     { display: block; font-size: 12.5px; color: var(--ink); }
.ut-q     { display: block; font-family: var(--mono); font-size: 10px;
            color: var(--dimmer); }
.ut-spark { grid-area: spark; width: 148px; height: 34px; flex: 0 0 auto;
            display: flex; align-items: center; }
.ut-svg   { width: 100%; height: 34px; display: block; overflow: visible; }
.ut-nopoints { font-family: var(--mono); font-size: 10px; color: var(--faint); }
/* THE BAND IS THE CLINIC'S RANGE, and it is drawn as ground rather than as
   a verdict: no point is coloured for being outside it. Whether a reading is
   abnormal is the folder's own word, and a red dot decided here would be a
   second opinion about a lab result. */
.ut-band     { fill: var(--teal); fill-opacity: .10; }
.ut-linepath { stroke: var(--teal-2); stroke-width: 1.2; stroke-opacity: .8;
               vector-effect: non-scaling-stroke; }
.ut-dot      { fill: var(--teal-2); fill-opacity: .75; }
.ut-dot.is-last { fill: var(--teal); fill-opacity: 1; }
.ut-fig    { grid-area: fig; text-align: right; min-width: 84px; }
.ut-latest { font-size: 12.5px; color: var(--ink); }
.ut-when   { font-size: 10px; color: var(--dimmer); }
.ut-dir    { grid-area: dir; min-width: 74px; text-align: right; }
.ut-arrow  { font-size: 14px; color: var(--dim); }
.ut-arrow.is-up   { color: var(--amber); }
.ut-arrow.is-down { color: var(--teal); }
/* ONE READING IS A NUMBER. It is said in words rather than drawn as a flat
   arrow, because a flat arrow is a direction and there is not one. */
.ut-once   { font-family: var(--mono); font-size: 9.5px; color: var(--faint);
             letter-spacing: .06em; }
.ut-rowfoot { grid-area: foot; display: flex; flex-wrap: wrap; gap: 10px;
              padding-top: 2px; }
.ut-range  { font-size: 10px; color: var(--dimmer); }
.ut-skip   { font-size: 10px; color: var(--faint); }

/* ── 💊 the review ─────────────────────────────────────────────────────── */
.ut-allergy {
  padding: 7px 11px; border-radius: 999px; align-self: flex-start;
  display: inline-block; margin-bottom: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--dim);
}
/* KNOWN AND NOT NONE is the only state that shouts. NKDA and NOT ON FILE are
   different facts and neither is an alarm — one is an answer, the other is a
   silence, and the plane says which in words above the list. */
.ut-allergy.has { border-color: rgba(224,90,74,0.45);
                  background: rgba(224,90,74,0.12); color: var(--red-ink); }
.ut-meds { display: flex; flex-direction: column; gap: 6px; }
.ut-med  { padding: 8px 10px; border-radius: var(--r);
           background: var(--sunk); border: 1px solid var(--line-soft); }
.ut-med.is-gone { opacity: .62; }
.ut-med.is-gone .ut-med-i { text-decoration: line-through; }
.ut-med-h { display: flex; align-items: baseline; gap: 10px; }
.ut-med-i { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--ink); }
.ut-med-w { flex: 0 0 auto; font-size: 10px; color: var(--dimmer); }
.ut-med-r { font-size: 11px; color: var(--dim); margin-top: 2px; }
/* THE ALERT SITS UNDER ITS OWN MEDICINE. A list at the foot would make him
   match a warning to a drug by reading, which is the fault the per-point
   checklist was rebuilt to remove on 3 September. */
.ut-alert { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
            margin-top: 6px; padding: 6px 8px; border-radius: 8px;
            border: 1px solid rgba(224,164,74,0.3);
            background: rgba(224,164,74,0.08); }
.ut-alert-r { flex-basis: 100%; font-size: 11px; color: var(--dim); font-style: italic; }  /* the rule's own words, said under the alert */
.ut-alert-k { flex: 0 0 auto; font-size: 9.5px; letter-spacing: .1em;
              color: var(--amber-ink); white-space: nowrap; }
.ut-alert-t { flex: 1 1 auto; min-width: 0; font-size: 11.5px;
              color: var(--ink-2); line-height: 1.5; }
.ut-alert.is-allergy { border-color: rgba(224,90,74,0.4);
                       background: rgba(224,90,74,0.10); }
.ut-alert.is-allergy .ut-alert-k { color: var(--red-ink); }
.ut-avoid { display: flex; flex-direction: column; gap: 4px; }
.ut-av    { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
            padding: 6px 8px; border-radius: 8px;
            border-left: 2px solid rgba(224,90,74,0.45);
            background: var(--panel-2); }
.ut-av-i  { font-size: 12.5px; color: var(--ink); }
.ut-av-w  { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--dim); }
.ut-av-s  { flex: 0 0 auto; font-size: 10px; color: var(--dimmer); }
/* `basis` is the point of the screen, not small print under it. */
.ut-basis { margin-top: 14px; padding: 9px 11px; border-radius: var(--r);
            border: 1px dashed var(--line); background: var(--panel-2);
            color: var(--dim); font-size: 11.5px; line-height: 1.55; }

/* ── the day view ──────────────────────────────────────────────────────── */
/* The same two rules app.css already applies to `.map-plane` and its card:
   the raised card goes white, the scrim dims the page without going
   near-black. Everything else follows the tokens. */
:root[data-theme="day"] .ut-plane { background: rgba(23,38,36,0.42); }
:root[data-theme="day"] .ut-card  { background: #ffffff; }

/* ── narrow ────────────────────────────────────────────────────────────── */
/* The plane is desktop work, but the encounter page is reachable at any
   width and a card that overflows its own scrim is a card nobody can close.
   The sparkline gives up its fixed width first; the figure and the
   direction wrap under the name rather than squeezing the analyte's own. */
@media (max-width: 720px) {
  .ut-plane { padding: 10px; }
  .ut-row { grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas: "name fig" "spark dir" "foot foot"; }
  .ut-spark { width: 100%; }
  .ut-dir { text-align: left; }
}
/* ── end fb2_util.css ── */


/* ── fb2_mail.css — ✉ the clinic's own mailbox, under the top bar (LE-58, Parcel M) ── */
/* A FRAGMENT, NOT A SECOND STYLESHEET. `app/app.css` is one of the files the
   integrator alone touches (LE-37); this text is folded in under the marker
   line above and is never loaded on its own.

   FOR THE INTEGRATOR — WHERE IT GOES. Anywhere ABOVE the chat sections, and
   NOT at end-of-file: `verify_console_chatenc` reads the chat's CSS fragment
   as "its marker to the next chat marker or EOF", so a block appended after
   the last chat marker is swallowed into that slice and trips its purity
   checks (10 September's own regression, recorded in CLAUDE.md). Next to the
   spine's own block, where `.patient-card` is, is the natural seat: this
   popover hangs off the same `position: relative` header.

   IT DECLARES NO TOKEN OF ITS OWN. Every colour, radius, font and shadow
   below is app.css's, so the day palette (`[data-theme="day"]`) follows with
   nothing to keep in step — a hard-coded `#05...` here would be a black
   popover on a white page, which is the one way this fragment could break a
   theme it never mentions. The three literal rgba() values are the ones the
   board draws and the ones `.patient-card` already uses verbatim beside it;
   they are the popover's own GROUND, and they are redefined in the day block
   at the foot for exactly that reason.

   DESKTOP ONLY, like the theme toggle. ✉ is a desktop control (Parcel B hides
   the button below the desktop width), and a 480px popover has nowhere to
   hang on a 390px phone — so below 1100px it is laid out as a sheet across
   the width instead of a card off the right edge, rather than being hidden:
   `mountMail` falls back to `document.body` where there is no spine, and a
   popover that mounted and could not be seen would be worse than one that
   was never mounted. */

.mail-pop {
  position: absolute; top: calc(100% + 6px); right: 16px; z-index: 40;
  width: min(480px, calc(100vw - 32px));
  max-height: min(70vh, 640px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border-radius: var(--r-l);
  background: rgba(5,12,13,0.98);
  border: 1px solid rgba(79,214,200,0.26);
  box-shadow: var(--z2);
}
/* THE BRIDGE. The popover hangs 6px below the bar; without this the pointer
   moving down into it crosses empty space and a hover-driven neighbour closes
   under it. Same `::before` the patient card grew for the same reason. */
.mail-pop::before {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
}

.mail-h { display: flex; align-items: baseline; gap: 10px; }
.mail-addr { font-family: var(--mono); font-size: 14px; color: var(--teal); }
.mail-tag {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--dimmer); text-align: right;
}

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

.mail-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--line-soft);
}
.mail-from { flex: 0 0 150px; font-size: 14px; font-weight: 600; color: var(--ink); }
.mail-sub  { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--ink-2); }
.mail-sub-t { display: block; }
.mail-when { font-family: var(--mono); font-size: 12px; color: var(--dimmer); }
/* Unseen is BOLD, and it is not the only cue: the row keeps its ink while a
   read one dims, because weight alone is a poor signal at a glance and
   colour alone is no signal at all to some eyes. */
.mail-row.is-new .mail-sub { color: var(--ink); font-weight: 600; }
.mail-row:not(.is-new) .mail-from { color: var(--dim); font-weight: 500; }
.mail-where {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  overflow-wrap: anywhere;
}

/* An attachment, and the way to file it. */
.mail-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px 160px; }
.mail-att {
  display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
  padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--hush); background: var(--sunk);
}
.mail-att-n {
  flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink-2);
  overflow-wrap: anywhere;
}
.mail-file { flex: 0 0 auto; }
.mail-reply { flex: 0 0 auto; }

/* The ask-twice boxes — filing one attachment, and composing. Same shape as
   folder.js's `.fo-fix`, because it is the same gesture: type it, Check it,
   read it back, Confirm. */
.mail-fix, .mail-compose {
  margin: 6px 0 8px; padding: 9px 10px;
  border: 1px solid var(--rule); border-radius: var(--r);
  display: flex; flex-direction: column; gap: 6px;
}
.mail-fix-h {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dim);
}
.mail-f { display: flex; align-items: baseline; gap: 10px; }
.mail-f-k {
  flex: 0 0 84px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--dimmer);
}
.mail-in {
  flex: 1 1 auto; min-width: 0;
  padding: 7px 9px; border-radius: 6px; border: 1px solid var(--rule);
  background: transparent; color: inherit; font: inherit; font-size: 13px;
}
.mail-in:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
textarea.mail-text { resize: vertical; min-height: 44px; font-family: var(--display); }
.mail-fix-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* THE READ-BACK. It is the door's sentence, and it is drawn as the one thing
   in the box that is not a control — nothing reaches a folder, or leaves the
   clinic, from a screen of ticks alone. */
.mail-back {
  font-size: 13px; line-height: 1.45; color: var(--amber-ink);
  padding: 8px 10px; border-radius: 6px;
  border: 1px solid #4d3c22; background: var(--panel);
}
.mail-said {
  font: 500 12px/1.5 var(--mono); margin-top: 4px;
  padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--hush); color: var(--dim); background: var(--panel);
}
.mail-said.ok { color: var(--teal); border-color: var(--rule); }
.mail-said.no { color: var(--amber); border-color: #4d3c22; }
/* What the door said about the act he just confirmed, kept OUTSIDE the box
   that asked so the re-read it triggers cannot wipe it. */
.mail-done {
  font: 500 12px/1.5 var(--mono); margin-bottom: 6px;
  padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--rule); color: var(--teal); background: var(--panel);
}

/* Not linked, and unreachable: the sentence is the door's. */
.mail-none {
  padding: 10px 0; font-size: 13px; line-height: 1.5; color: var(--dim);
  display: flex; flex-direction: column; gap: 6px;
}
.mail-none-t { font-size: 14px; font-weight: 600; color: var(--amber-ink); }
.mail-none-d { color: var(--dim); }
.mail-settings { display: flex; flex-wrap: wrap; gap: 6px; }
.mail-set {
  font-family: var(--mono); font-size: 11.5px; color: var(--teal);
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--sunk);
}

.mail-foot {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line-soft);
}
.mail-foot .tiny { flex: 1 1 200px; min-width: 0; }
.mail-new[disabled] { opacity: 0.45; cursor: default; }

/* Below the desktop width the popover is a sheet across the page rather than
   a 480px card hanging off an edge that is not there. */
@media (max-width: 1099px) {
  .mail-pop {
    position: fixed; top: auto; left: 8px; right: 8px; bottom: 8px;
    width: auto; max-height: 78vh;
  }
  .mail-from { flex-basis: 100%; }
  .mail-acts { padding-left: 0; }
}

/* DAY VIEW. Only the grounds and the two borders that were literal above are
   repainted; every other rule reads a token and follows on its own. */
[data-theme="day"] .mail-pop {
  background: #ffffff;
  border-color: rgba(11,114,102,0.24);
}
[data-theme="day"] .mail-back { border-color: #d8bd86; }
[data-theme="day"] .mail-said.no { border-color: #d8bd86; }
/* ── end fb2_mail.css ── */


/* =========================================================================
   fb2_spine.css — LE-58 Parcel B, the top bar drawn a third time (Dr Lau,
   10 September evening, point 2; board design/Fb2Topbar.dc.html, accepted).

   FOR THE INTEGRATOR — WHERE THIS GOES. Fold it into app/app.css directly
   AFTER the `fb_spine` block (LE-49's), and still ABOVE the chat markers.
   NOT at EOF: verify_console_chatenc reads the chat fragment as ITS MARKER
   TO THE NEXT CHAT MARKER OR EOF, so anything appended at the end of the
   file joins that parcel and trips its purity checks.

   AFTER fb_spine RATHER THAN INSTEAD OF IT. This parcel OVERRIDES rather
   than duplicates: `.pill-place .pk` and the whole record control stay
   LE-49's, and only what his second feedback moved is written again here.
   Two selectors below deliberately restate a rule app.css already has —
   `.pc-k` and `.pc-v` — because app.css defines `.pc-row` twice (the
   patient card's at ~202 and the pre-clerk screen's at ~1085) and the
   later one already reaches this card. Later wins on equal specificity, so
   this block must sit after both; it does.

   EVERY VALUE IS THE BOARD'S, AND THE BOARD'S ARE app.css's — colours
   through the existing tokens so the day theme follows and
   verify_theme_contrast keeps measuring the palette it already measures.

   SIZES ARE TODAY'S, NOT THE BOARD'S. The board is drawn at the stepped-up
   scale (LE-58 §1: base 10pt), and the type scale is the integrator's and
   is done LAST, over the whole stylesheet. Nothing here is padded for it.
   The ONE size that moves on its own account is the registration number:
   it was a 10px caption beside a 16px name, and it is the bar's primary
   identity now, so it takes the name's role at 12px — today's band, which
   the integrator's mapping steps with everything else.
   ========================================================================= */
/* ==== fb2_spine BEGIN — the top bar, third drawing (LE-58 Parcel B) ==== */

/* ── the patient, by number ─────────────────────────────────────────────
   The number leads: it is what the desk, the bill and the letter carry.
   The dotted underline is the name's old affordance, moved with the job —
   it says "there is more under this" without making a pill look like a
   button that navigates. */
.pill-reg {
  background: rgba(79,214,200,0.10); border-color: rgba(79,214,200,0.34);
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  border-bottom: 1px dotted rgba(79,214,200,0.6);
  cursor: help;
}
.pill-reg:hover, .pill-reg:focus-visible { background: rgba(79,214,200,0.16); }
.pill-reg:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* the pass's own line, beside the number rather than under a name */
.spine .patient-sub { color: var(--ink-2); }

/* ── ✉ the clinic's own mailbox ─────────────────────────────────────────
   Quiet with nothing waiting, amber with something — the appointment
   line's own vocabulary in the same bar, so two things that both mean
   "somebody is waiting for you" do not read as two different systems. */
.pill-mail {
  background: rgba(79,214,200,0.06); color: var(--dim);
  cursor: pointer; font: inherit; font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em;
}
.pill-mail:hover { border-color: var(--teal-2); }
.pill-mail:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pill-mail.has {
  border-color: rgba(224,164,74,.45); color: var(--amber-ink);
  background: rgba(224,164,74,.08);
}
.pill-mail .mg { font-size: 11px; line-height: 1; }
.pill-mail .mn { color: var(--teal); font-weight: 600; }
.pill-mail.has .mn { color: var(--amber); }
/* IT FOLDS TO ITS GLYPH AND ITS COUNT with a patient on the bar. Measured:
   the spine with a patient on it came to 1560px against 1440, and the word
   is the part that carries no information the count does not. The whole
   sentence stays in the button's own title. */
.spine.has-patient .pill-mail .mw { display: none; }

/* ── 📅 what a close still owes, carried onto every screen (5 Oct) ───────
   Dr Lau: "carry the owed date onto the next screen". Amber, because it is
   an answer somebody is waiting on -- the mail pill's own vocabulary for
   that. It names no patient (owed.js); the questions open over the page. */
.pill-owed {
  background: rgba(224,164,74,.10); border-color: rgba(224,164,74,.5);
  color: var(--amber-ink); cursor: pointer; font: inherit; font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em;
}
.pill-owed:hover { border-color: var(--amber); }
.pill-owed:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.pill-owed .og { font-size: 11px; line-height: 1; }
.pill-owed .on { color: var(--amber); font-weight: 600; }
[data-theme="day"] .pill-owed .on { color: var(--amber-ink); }
/* THE WORD FOLDS WHERE THE MAIL'S DOES: beside a patient, and on a desktop
   narrower than the bar needs. The count stays; the sentence is the title. */
@media (min-width: 1100px) {
  .spine.has-patient .pill-owed .ow { display: none; }
}
@media (min-width: 1100px) and (max-width: 1535px) {
  .spine .pill-owed .ow { display: none; }
}
.ut-card.ut-owed { width: min(560px, 100%); }
.owed-body { overflow: auto; }
.owed-one { padding: 10px 0 2px; border-top: 1px solid var(--rule); }
.owed-one:first-child { border-top: 0; padding-top: 0; }
.owed-who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.owed-name { font-weight: 600; color: var(--ink); }
.owed-mrn { font-size: 11px; color: var(--teal); letter-spacing: .04em; }
.owed-what { font-size: 10.5px; color: var(--dim); margin-top: 2px; }
.owed-none { color: var(--dim); }

/* ── the who-line drops SIGNED IN with a patient on the bar ─────────────
   Two spans, and the separator travels with the first, so what is left
   reads "DOCTOR ▸" rather than "· DOCTOR ▸". */
.spine.has-patient .who-sub .wl-in { display: none; }

/* ── THE CARD THAT STAYS ────────────────────────────────────────────────
   His point 2, and the whole of why it was elusive: the card hangs 6px
   below the bar, and the pointer moving DOWN into it left the number and
   closed the thing it was reaching for. Three parts, and the other two are
   spine.js's (it holds itself open on `mouseenter`, and closes on a ~150ms
   grace). THIS is the third: there is no gap to fall through at all.

   THE BRIDGE IS 8px FOR A 6px GAP, and no more. It is an invisible strip
   above the card, and it sits in the spine's own bottom padding — the
   controls end well above it — so nothing on the bar loses a click to it.
   It exists only while the card is `.on`; `.patient-card` is `display:
   none` otherwise and paints no pseudo-element. */
.patient-card.on::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -8px; height: 8px;
}

/* the head: who this is, with the allergy beside the name */
.pc-h {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 2px;
}
.pc-name { font-family: var(--display); font-size: 15px; font-weight: 600;
  color: #fff; white-space: nowrap; }
.pc-h .pill { font-size: 10px; }
.pc-pin { margin-left: auto; font-family: var(--mono); font-size: 9px;
  letter-spacing: .12em; color: var(--teal); }

/* the rows. The key column is wider than app.css's 96px because "Date of
   birth" and "Next of kin" wrap at that width once the labels are the
   chart's own rather than this card's four. */
.patient-card .pc-k { width: 104px; font-family: var(--mono);
  letter-spacing: .04em; text-transform: uppercase; }
.patient-card .pc-v { color: var(--ink-2); }
.patient-card .pc-v.payor { color: var(--amber-ink); }

/* the foot: the way into the folder, the pin, and how it closes */
.pc-foot {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 6px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.pc-note { font-size: 10.5px; color: var(--dim); margin-left: auto; }

/* ── day view ───────────────────────────────────────────────────────────
   Dark is unchanged: every rule here bites only when the toggle sets
   data-theme="day" on <html>. The accents keep their MEANING and are
   darkened until they are legible on a light ground — day --teal is
   #0b7266 and --amber-ink #8a5e0c, both already measured by
   verify_theme_contrast. What needs repainting is the two tinted grounds,
   which are dark-ground washes, and the number's white ink, which
   disappears on a pale pill. */
[data-theme="day"] .pill-reg {
  background: rgba(11,114,102,0.10); color: var(--ink);
  border-bottom-color: rgba(11,114,102,0.55);
}
[data-theme="day"] .pill-reg:hover, [data-theme="day"] .pill-reg:focus-visible {
  background: rgba(11,114,102,0.18);
}
[data-theme="day"] .pill-mail { background: rgba(11,114,102,0.06); }
[data-theme="day"] .pill-mail.has { background: rgba(138,94,12,0.10); }
[data-theme="day"] .pc-name { color: var(--ink); }

/* ==== fb2_spine END — the top bar, third drawing (LE-58 Parcel B) ==== */




/* ── fb2_forms.css — the PDF forms library in four groups (LE-58, Parcel P) ── */
/* His point 9, 10 September: "the PDF forms library in four groups" -- a.
   Memo, b. Parkway forms + brace ordering + X-ray, c. Essential, d. School
   children -- TWO BY TWO, each form the size of its name with a `how` line
   under it, and what is new drawn dashed.

   Values are app.css's own tokens throughout, so the day/dark toggle carries
   this page with everything else and nothing here has a literal colour.
   Sizes are today's; the type scale is the integrator's and is done last. */

.fl-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 2px 0 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.fl-title {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--teal);
  flex: 0 0 auto;
}
.fl-sub {
  font-size: 11.5px;
  color: var(--dim);
  flex: 1 1 240px;
  min-width: 0;
  line-height: 1.45;
}
.fl-back {
  flex: 0 0 auto;
  min-height: 0;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  font-size: 11.5px;
  cursor: pointer;
}
.fl-back:hover { color: var(--teal); border-color: rgba(79,214,200,0.34); }

/* The page fills its host and never scrolls itself: `min-height: 0` down the
   chain is what lets a group scroll INSIDE its own box instead of pushing the
   grid past the fold. */
.fl-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1 1 auto;
}
/* TWO BY TWO -- the half of his point 9 that a fake DOM cannot measure. */
.fl-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fl-group {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden auto;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sunk);
}
.fl-group-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.fl-group-t {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--teal);
}
.fl-group-sub {
  font-size: 11px;
  color: var(--dim);
  margin-top: 5px;
  line-height: 1.4;
}

/* EACH FORM THE SIZE OF ITS NAME: two per row inside a group, wrapping to one
   column when the group is narrow, and never wider than its box. */
.fl-forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.fl-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  padding: 9px 12px;
  text-align: left;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.fl-form:hover:not([disabled]) { border-color: rgba(79,214,200,0.34); }
.fl-form-l { overflow-wrap: anywhere; }
.fl-form .fl-how {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--faint);
  overflow-wrap: anywhere;
}
/* WHAT IS NEW IS DASHED, and its `how` line is the warning colour: the
   difference between what is there and what he has asked for is the whole
   point of drawing the missing ones at all. */
.fl-form.new {
  border-style: dashed;
  cursor: default;
  opacity: 1;
}
.fl-form.new .fl-how { color: var(--amber); }
/* AND WHAT NEEDS AN ENCOUNTER SAYS SO. Dimmed rather than hidden, so the
   answer to "where is the insurance memo" is on the screen either way. */
.fl-form.fl-dim { opacity: 0.55; cursor: default; }
.fl-form .fl-need {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--amber);
}

/* The free memo's one line, on its own full-width row inside the group's
   grid -- it belongs to the button above it and must not shrink to a column. */
.fl-ask {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(79,214,200,0.34);
  border-radius: 10px;
  background: var(--panel);
}
.fl-ask-l {
  font-size: 11.5px;
  color: var(--dim);
  flex: 0 0 auto;
}
.fl-ask-in {
  flex: 1 1 160px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--sunk);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.fl-more-t {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--faint);
}
.fl-foot {
  margin-top: auto;
  padding-top: 8px;
  font-size: 11.5px;
  color: var(--faint);
  line-height: 1.45;
}

.fl-said {
  font-size: 12px;
  color: var(--dim);
  padding: 6px 2px 0;
}
.fl-said.ok { color: var(--teal); }
.fl-said.no { color: var(--red-ink); }

/* The blank itself, opened in the page under the grid. */
.fl-pdf {
  flex: 0 0 auto;
  height: 44vh;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--sunk);
}
.fl-pdf iframe { width: 100%; height: 100%; border: 0; }

/* Below the desktop width the four groups stack one to a row and scroll,
   because two columns of two-column forms is not readable on a phone -- and
   the library is reachable from the phone's own list. */
@media (max-width: 1099px) {
  .fl-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .fl-forms { grid-template-columns: minmax(0, 1fr); }
}
/* ── end fb2_forms.css ── */


/* ── fb2_home.css — the clinic's tiles filling their seat and the folding
   theme toggle (LE-58, Parcel H) ──

   THE WEEK'S OPENABLE ENTRIES ARE NOT HERE EITHER: main's week already
   opens an entry's folder through its schedule-context panel.

   THE CORNERS' ⋯ MENU (close, move, swap) IS NOT HERE. Dr Lau, 23 Sept:
   main's collapsible side rails are how a corner gets out of the way, and a
   second mechanism for the same thing is not kept beside them.

   FOR THE INTEGRATOR — WHERE THIS GOES. Fold it into `app/app.css` after
   the desktop block that ends with `.dk-last` (the `.dk-*` rules at ~1745
   to ~1825), and ABOVE the chat markers. NOT at EOF: verify_console_chatenc
   reads the chat fragment as its marker TO THE NEXT CHAT MARKER OR EOF, so
   anything appended at the end of the file joins that parcel and trips its
   purity checks (LE-49 recorded this; it costs a red harness, not a bug).

   EVERY COLOUR IS A TOKEN, NO LITERALS. The day theme redefines the tokens
   and nothing here needs a `[data-theme="day"]` rule of its own — which is
   also why verify_theme_contrast has nothing new to weigh.

   AND EVERY SIZE IS TODAY'S, NOT THE BOARD'S. The boards are drawn at the
   stepped-up scale (11.5px reads 13.3px there); LE-58 §1 says the type
   scale is the integrator's and is done last, so these are the sizes the
   stylesheet has now and none of them is padded for it.
   ─────────────────────────────────────────────────────────────────────── */

/* ── the clinic's tiles fill their seat (points 7 and 10) ──
   Two columns rather than three-across with air under them. The rows are
   named for the nine the corner holds AND `grid-auto-rows` repeats the
   measure, so a tile added later gets a sized row instead of overflowing a
   corner that clips. */
.dk-corner-body.col { display: flex; flex-direction: column; }
.dk-icons.fill { flex: 1 1 auto; min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr); align-content: stretch; }
.dk-icons.fill .dk-tile { min-height: 0; height: 100%; padding: 4px 6px; gap: 2px; }
.dk-icons.fill .dk-tile-i { font-size: 18px; }
.dk-icons.fill .dk-tile-pair { min-height: 0; gap: 4px; }
.dk-icons.fill .dk-tile-pair .dk-tile { flex-direction: row; gap: 6px; }
.dk-icons.fill .dk-tile-pair .dk-tile-i { font-size: 13px; }
/* Help and About open a SHEET, not a screen: marked, quietly. */
.dk-tile-info .dk-tile-l { color: var(--dim); }

/* ── the theme toggle folds beside a patient ──
   The spine measured 1560px against 1440 with a patient on the bar, so the
   words go and the glyph stays. What the tap does is still on the button's
   title and aria-label, so nothing is said only in the span that hides. */
.tb-i { flex: 0 0 auto; }
.tb-w { white-space: nowrap; }
.spine.has-patient .tb-w { display: none; }


/* ── end fb2_home.css ── */

/* ── the encounter page's info bar (LE-58, Parcel E, kept) ──
   `dk-ibar`, not #481's `dk-info`: the desktop's About card is already
   `dk-info`, and #481's rules for the bar restyled that card's ground and
   let the week show through it (measured in the browser, 23 Sept).
   Dr Lau, 23 Sept: main's encounter page stays and #481's six tiles do
   not; what came across is the bar of the chart's own facts under the
   patient header, and the three utilities at its right end. */
/* ── the info bar, under the top bar ── */
.dk-ibar { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px 22px;
  align-items: baseline; padding: 8px 14px; border: 1px solid var(--rule);
  border-radius: 12px; background: var(--panel); }
.dk-ibar-item { display: inline-flex; align-items: baseline; white-space: nowrap; }
.dk-ibar-k { font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  color: var(--dimmer); text-transform: uppercase; margin-right: 6px; }
.dk-ibar-v { font-size: 12px; color: var(--ink); }
.dk-ibar-links { display: inline-flex; gap: 8px; margin-left: auto; }
.dk-ibar-b { font: inherit; font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--hush); background: transparent; color: var(--dim);
  cursor: pointer; white-space: nowrap; }
.dk-ibar-b:hover { border-color: var(--teal-2); color: var(--teal-2); }
.dk-ibar-b:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* ── end of the encounter info bar ── */

/* fb2_reg.css (LE-58, Parcel R -- the registration drawer by voice) is NOT
   folded: Dr Lau, 23 Sept, kept main's registration PAGE, which already
   records the three facts and reads them back. Its rules would also have
   restyled that page's own `.reg-status`. */


/* ── fb2_folder.css — the folder's five new sections (LE-58, Parcel F) ───
   A DELIVERY VEHICLE, NOT A SECOND STYLESHEET. `app/app.css` is one of the
   files the integrator alone touches (LE-37, LE-58 §2), and it is parsed by
   neither required check — so a parcel that edited it would be the shape
   that put conflict markers on `main`. This block is folded in under the
   marker line above; `verify_console_folder.py` §20 reads it back out of
   app.css by that marker once it has been, and out of this file until then.
   BOTH MARKERS ARE LOAD-BEARING: the slice is bounded at both ends, so
   whatever is appended after it later cannot be swallowed into it — LE-48's
   lesson, where a block appended at end-of-file joined the last parcel.

   Fold it AFTER `fb_folder.css`'s block, which is Parcel D's and is not
   touched here. Nothing below restyles a class the folder already had:
   `.fo-h`, `.fo-h2`, `.fo-encs`, `.fo-enc`, `.fo-enc-l`, `.fo-enc-r` and
   `.fo-enc.is-gone` are reused exactly as they are, so every section drawn
   before today renders exactly as it did. Three new classes, and nothing
   else.

   THE TYPE SCALE IS THE INTEGRATOR'S AND IS DONE LAST (LE-58 §1.1). These
   sizes are today's — 11px beside the folder's own 11px — and step up with
   the rest of the folder when the scale lands. Nothing here is padded for
   it in advance. */

/* WHAT HE MUST NOT BE GIVEN. Red-ink rather than red: the row has to read
   as a warning across a consulting room and must not shout louder than the
   allergy pill on the top bar, which is the one line above it in the
   hierarchy. The colour is a token, so the day theme repaints it with the
   rest — `--red-ink` is the legible-on-either-ground pair of `--red`.

   IT IS A CLASS ON THE ROW, NOT A RULE ABOUT A SOURCE. Which rows are
   avoid rows was decided by the door; the stylesheet colours what it is
   given and asks no question of its own. */
.fo-avoid .fo-enc-l { color: var(--red-ink); }
.fo-avoid .fo-enc-r { color: var(--dimmer); white-space: nowrap; }

/* STILL OUT. Amber, and set as a kicker so "PENDING" reads as a state
   rather than as a date in the column where dates live. Amber rather than
   red for the reason the flag beside a lab result is amber: this marks a
   row to CHASE, it does not grade a result. */
.fo-enc.is-pend .fo-enc-r {
  color: var(--amber); font-size: 10px; letter-spacing: 0.06em;
}

/* THE LINE UNDER A ROW: a blood series' own direction, a scheme's own
   sentence about itself. Shaped exactly like `.fo-m-t`, the trail the
   measurements have carried since commit 15, so a second kind of sub-line
   does not read as a second kind of thing. It sits INSIDE the list beside
   the row it belongs to, which is why it indents rather than aligns. */
.fo-sub { font-size: 11px; color: var(--dim); padding: 0 0 3px 8px; }
/* ── end fb2_folder.css ─────────────────────────────────────────────── */












/* ── desktop tap targets: the hit area, not the drawing ──────────────────
   Dr Lau, 23 September: "Tap targets under 44px". The app's own floor is
   --tap, 44px, and on a desktop about forty controls a page sat under it --
   measured in Chromium, 16px to 38px tall. Drawing them all 44px tall would
   push both pages past the screen, which his first rule forbids.

   So the CLICKABLE area grows and the drawing does not: a transparent box
   centred on the control, never smaller than 44x44, and only on controls
   with room around them. A hit area that reaches a neighbour's own box would
   take a click meant for that neighbour, which is worse than a small target,
   so every selector here was measured for the free space around it first.
   Densely packed lists (the week's entries, the room row's buttons, the
   carousel's tabs, the body map's buttons) are not here: they have 2-9px
   between them and no room to grow without changing the layout. */
@media (min-width: 1100px) {
  #who, #checkin, #recbtn, #mailbtn, #owedbtn, #apptbar, #themebtn,
  .dk-patient-close, .dk-patient-tab, .dk-ibar-b, .dk-side-toggle,
  .deskenc .dk-tab, .dk-corner-open, .tk-tick, .tk-key { position: relative; }
  #who::before, #checkin::before, #recbtn::before, #mailbtn::before, #owedbtn::before,
  #apptbar::before, #themebtn::before,
  .dk-patient-close::before, .dk-patient-tab::before, .dk-ibar-b::before,
  .dk-side-toggle::before, .deskenc .dk-tab::before,
  .dk-corner-open::before, .tk-tick::before, .tk-key::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, var(--tap)); height: max(100%, var(--tap));
    transform: translate(-50%, -50%);
  }
  /* The tick sits against its corner's left edge, which clips a centred box
     to 23px wide; its area runs RIGHT from the glyph instead, over the
     task's own words, which are not a control. */
  .tk-tick::before { left: 0; transform: translate(0, -50%); }
  /* And squeezed between that edge and the patient's key 8px to its right,
     it had 23px of width no hit area could add to without taking the key's
     clicks. The button has no ground and no border, so widening it widens
     nothing anybody sees but the gap before the task's words. */
  .tk-tick { min-width: 38px; text-align: left; }
}

































































































/* ── desktop type scale — base 10pt = 13.3px (LE-58, the integrator's parcel) ──
   GENERATED by tools/desktop_type_scale.py from every px font-size above that
   can reach a desktop -- regenerate after a stylesheet change, never edit here.
   The phone keeps the base sizes: this applies at the desktop's width alone.
   1201 selectors; text never under 13.3px, a kicker never under 11px. ── */
@media (min-width: 1100px) {
  .kicker { font-size: 12px; }  /* kicker, was 10px */
  .btn { font-size: 17px; }  /* was 15px */
  .wordmark { font-size: 12px; }  /* kicker, was 10px */
  .avatar { font-size: 13.3px; }  /* was 10px */
  .who-name { font-size: 14px; }  /* was 12px */
  .who-sub { font-size: 11px; }  /* kicker, was 8px */
  .pill { font-size: 12px; }  /* kicker, was 10px */
  .patient { font-size: 18px; }  /* was 16px */
  .patient-sub { font-size: 14px; }  /* was 12px */
  .study .mod { font-size: 13.3px; }  /* was 10px */
  .study .centre { font-size: 13.3px; }  /* was 11px */
  .study .glyph { font-size: 13.3px; }  /* was 11px */
  .meter { font-size: 13.3px; }  /* was 10px */
  .pc-k { font-size: 13.3px; }  /* was 11px */
  .pc-v { font-size: 14px; }  /* was 12px */
  .demo-banner { font-size: 13.3px; }  /* kicker, was 12px */
  .ew-kicker { font-size: 12px; }  /* kicker, was 11px */
  .ew-name { font-size: 15px; }  /* was 13px */
  .ew-detail { font-size: 13.3px; }  /* was 11px */
  .ew-icon { font-size: 17px; }  /* was 15px */
  .ew-label { font-size: 14px; }  /* was 12px */
  .ew-state { font-size: 13.3px; }  /* was 11px */
  .load-failed-s { font-size: 13.3px; }  /* was 11px */
  .sec-head { font-size: 11px; }  /* kicker, was 9px */
  .sec-note { font-size: 13.3px; }  /* was 11px */
  .field-label { font-size: 16px; }  /* was 14px */
  .field-unit { font-size: 13.3px; }  /* was 9px */
  .field-state { font-size: 11px; }  /* kicker, was 8px */
  .evidence { font-size: 15px; }  /* was 13px */
  .evidence .src { font-size: 11px; }  /* kicker, was 8px */
  .opt { font-size: 17px; }  /* was 15px */
  .confirm .small { font-size: 16px; }  /* was 14px */
  .confirm .src { font-size: 13.3px; }  /* was 10px */
  .alt .alt-detail { font-size: 15px; }  /* was 13px */
  .slide .lab { font-size: 16px; }  /* was 14px */
  .map-arrow, .map-tick { font-size: 12px; }  /* kicker, was 10px */
  .map-arrow { font-size: 14px; }  /* was 12px */
  .map-lab { font-size: 11px; }  /* kicker, was 9px */
  .map-meter { font-size: 13.3px; }  /* was 10px */
  .map-wrap.is-big .map-tick { font-size: 13.3px; }  /* was 11px */
  .waiting { font-size: 16px; }  /* was 14px */
  .tick { font-size: 13.3px; }  /* was 10px */
  .kind { font-size: 11px; }  /* kicker, was 8px */
  .block-h { font-size: 11px; }  /* kicker, was 9px */
  .block-src { font-size: 13.3px; }  /* was 8px */
  .block-t { font-size: 16px; }  /* was 14px */
  .mic { font-size: 12px; }  /* kicker, was 10px */
  .take-section { font-size: 11px; }  /* kicker, was 9px */
  .take-where { font-size: 14px; }  /* was 12px */
  .take-when { font-size: 13.3px; }  /* was 10px */
  .take-src { font-size: 11px; }  /* kicker, was 8px */
  .footrule { font-size: 14px; }  /* was 12px */
  .sect-h { font-size: 12px; }  /* kicker, was 11px */
  .sect-n { font-size: 13.3px; }  /* was 10px */
  .sheet-h { font-size: 11px; }  /* kicker, was 9px */
  .sheet-t1 { font-size: 17px; }  /* was 15px */
  .sheet-t2 { font-size: 13.3px; }  /* was 11.5px */
  .sheet-cancel { font-size: 16px; }  /* was 14px */
  .file-said { font-size: 14px; }  /* was 12px */
  .take-text { font-size: 15px; }  /* was 13px */
  .spine-said { font-size: 13.3px; }  /* was 11px */
  .rec-n { font-size: 12px; }  /* kicker, was 10.5px */
  .rec-state { font-size: 12px; }  /* kicker, was 10px */
  .rec-sub { font-size: 13.3px; }  /* was 10.5px */
  .rec-text { font-size: 15px; }  /* was 13px */
  .rec-say { font-size: 13.3px; }  /* was 10.5px */
  .btn-small { font-size: 13.3px; }  /* was 11.5px */
  .file-auto { font-size: 13.3px; }  /* was 11px */
  .sect-open { font-size: 12px; }  /* kicker, was 10.5px */
  .cap-drawer-h { font-size: 11px; }  /* kicker, was 9px */
  .sect-all { font-size: 12px; }  /* kicker, was 11px */
  .review-red { font-size: 13.3px; }  /* was 11px */
  .points-n { font-size: 13.3px; }  /* was 11px */
  .pt-n { font-size: 13.3px; }  /* was 10.5px */
  .pt-kind { font-size: 12px; }  /* kicker, was 10px */
  .pt-was, .pt-mark { font-size: 12px; }  /* kicker, was 10px */
  .pt-heard { font-size: 13.3px; }  /* was 11.5px */
  .pt-heard-note { font-size: 13.3px; }  /* was 10.5px */
  .pt-sug { font-size: 14px; }  /* was 12px */
  .pt-sug-l { font-size: 12px; }  /* kicker, was 10px */
  .pt-unc { font-size: 13.3px; }  /* was 11.5px */
  .say-q { font-size: 14px; }  /* was 12px */
  .close-n { font-size: 13.3px; }  /* was 11px */
  .close-why { font-size: 13.3px; }  /* was 11.5px */
  .mn-n { font-size: 13.3px; }  /* was 11px */
  .mn-latest { font-size: 12px; }  /* kicker, was 10px */
  .mn-to { font-size: 12px; }  /* kicker, was 10px */
  .mn-vr { font-size: 13.3px; }  /* was 10px */
  .mn-sum-n { font-size: 13.3px; }  /* was 11px */
  .wr-n { font-size: 13.3px; }  /* was 11px */
  .wr-lamp { font-size: 13.3px; }  /* was 10px */
  .wr-why { font-size: 14px; }  /* was 12px */
  .wr-wait { font-size: 13.3px; }  /* was 11px */
  .wr-note { font-size: 13.3px; }  /* was 11.5px */
  .wr-new-t { font-size: 14px; }  /* was 12px */
  .dy-sum { font-size: 13.3px; }  /* was 11.5px */
  .dy-why { font-size: 13.3px; }  /* was 11px */
  .dy-date { font-size: 14px; }  /* was 12.5px */
  .dy-away { font-size: 13.3px; }  /* was 11px */
  .dy-call { font-size: 13.3px; }  /* was 11px */
  .dy-deskshort { font-size: 13.3px; }  /* was 11px */
  .dy-count { font-size: 13.3px; }  /* was 11px */
  .dy-row { font-size: 14px; }  /* was 12px */
  .dy-at { font-size: 13.3px; }  /* was 11px */
  .dy-icon { font-size: 13.3px; }  /* was 11px */
  .dy-note { font-size: 13.3px; }  /* was 11px */
  .dy-clip { font-size: 13.3px; }  /* was 11px */
  .dy-more, .dy-empty { font-size: 13.3px; }  /* was 11px */
  .fo-mrn { font-size: 13.3px; }  /* was 11px */
  .fo-allergy { font-size: 13.3px; }  /* was 11px */
  .fo-test { font-size: 13.3px; }  /* was 11px */
  .fo-review-k { font-size: 12px; }  /* kicker, was 11px */
  .fo-review-t { font-size: 15px; }  /* was 13px */
  .fo-h { font-size: 12px; }  /* kicker, was 11px */
  .fo-k { font-size: 13.3px; }  /* was 11.5px */
  .fo-v { font-size: 14px; }  /* was 12px */
  .fo-enc { font-size: 14px; }  /* was 12px */
  .fo-enc-r { font-size: 13.3px; }  /* was 11px */
  .fo-more, .fo-none { font-size: 13.3px; }  /* was 11px */
  .fv-h1 .fo-mrn { font-size: 15px; }  /* was 13px */
  .fv-who { font-size: 16px; }  /* was 14px */
  .fv-h1 .fo-allergy { font-size: 13.3px; }  /* kicker, was 12px */
  .fv-review-t { font-size: 14px; }  /* was 12.5px */
  .fv-k { font-size: 12px; }  /* kicker, was 11px */
  .fv-v { font-size: 16px; }  /* was 14px */
  .fv-prog { font-size: 14px; }  /* was 12px */
  .fv-hbtn { font-size: 15px; }  /* was 13px */
  .fv-rail-fold { font-size: 14px; }  /* was 12px */
  .fv-tile-t { font-size: 12px; }  /* kicker, was 11px */
  .fv-tile-s { font-size: 13.3px; }  /* was 11px */
  .fv-sub { font-size: 12px; }  /* kicker, was 10.5px */
  .fv-none { font-size: 14px; }  /* was 12.5px */
  .fv-enc-when { font-size: 14px; }  /* was 12px */
  .fv-enc-what { font-size: 15px; }  /* was 13.5px */
  .fv-enc-by { font-size: 14px; }  /* was 12px */
  .fv-enc-spec { font-size: 15px; }  /* was 13px */
  .fv-shelf-b { font-size: 13.3px; }  /* was 11.5px */
  .fv-appt-when { font-size: 14px; }  /* was 12px */
  .fv-appt-what { font-size: 15px; }  /* was 13px */
  .fv-appt-spec { font-size: 14px; }  /* was 12.5px */
  .fv-appt-by { font-size: 14px; }  /* was 12px */
  .smf-q { font-size: 15px; }  /* was 13px */
  .smf-chip { font-size: 15px; }  /* was 13px */
  .smf-say { font-size: 14px; }  /* was 12px */
  .fv-ne-note { font-size: 15px; }  /* was 13px */
  .fv-ne-b { font-size: 15px; }  /* was 13px */
  .fv-ne-say { font-size: 14px; }  /* was 12.5px */
  .fv-enc-dx { font-size: 14px; }  /* was 12.5px */
  .fv-enc-ctl { font-size: 14px; }  /* was 12px */
  .fv-ver-b { font-size: 14px; }  /* was 12px */
  .fv-sum-pt { font-size: 15px; }  /* was 13px */
  .fv-sum-from { font-size: 13.3px; }  /* was 11.5px */
  .fv-cn-h { font-size: 13.3px; }  /* kicker, was 13.5px */
  .fv-cn-sub { font-size: 15px; }  /* was 13px */
  .fv-cn-pt { font-size: 15px; }  /* was 13px */
  .fv-cn-p { font-size: 15px; }  /* was 13px */
  .fv-sum-said { font-size: 14px; }  /* was 12px */
  .fv-sum-on { font-size: 14px; }  /* was 12px */
  .fv-sum-n { font-size: 13.3px; }  /* was 11.5px */
  .fv-sum-l { font-size: 14px; }  /* was 12.5px */
  .fv-sec-h { font-size: 12px; }  /* kicker, was 10.5px */
  .fv-sec-t { font-size: 15px; }  /* was 13px */
  .fv-pdf-said { font-size: 14px; }  /* was 12px */
  .fv-sheet-t { font-size: 17px; }  /* was 15px */
  .sd-bar-h { font-size: 12px; }  /* kicker, was 11px */
  .sd-nav { font-size: 16px; }  /* was 14px */
  .sd-view-b { font-size: 14px; }  /* was 12px */
  .sd-tab { font-size: 15px; }  /* was 13px */
  .su-k { font-size: 14px; }  /* was 12px */
  .st-subtab { font-size: 14px; }  /* was 12.5px */
  .ci-arr-t { font-size: 16px; }  /* was 14px */
  .ci-arr-sub { font-size: 14px; }  /* was 12px */
  .ci-arr-reg { font-size: 15px; }  /* was 13px */
  .ci-arr-name { font-size: 15px; }  /* was 13px */
  .ci-arr-how { font-size: 14px; }  /* was 12px */
  .ci-arr-said { font-size: 14px; }  /* was 12px */
  .ci-arr-none { font-size: 14px; }  /* was 12.5px */
  .sd-note { font-size: 15px; }  /* was 13px */
  .ask-line { font-size: 14px; }  /* was 12px */
  .pfs-kind { font-size: 13.3px; }  /* was 11px */
  .pfs-hint { font-size: 15px; }  /* was 13.3px */
  .smb-q { font-size: 13.3px; }  /* was 11px */
  .smb-not-here { font-size: 13.3px; }  /* was 10.5px */
  .smb-toggle { font-size: 14px; }  /* was 12px */
  .smb-line-n { font-size: 14px; }  /* was 12.5px */
  .smb-line-q { font-size: 13.3px; }  /* was 11.5px */
  .tb-licence { font-size: 14px; }  /* was 12px */
  .tb-src { font-size: 13.3px; }  /* was 11.5px */
  .tb-item-name { font-size: 15px; }  /* was 13.5px */
  .tb-item-sub { font-size: 13.3px; }  /* was 11.5px */
  .tb-form-h { font-size: 16px; }  /* was 14px */
  .tb-l { font-size: 12px; }  /* kicker, was 11px */
  .tb-in { font-size: 15px; }  /* was 13px */
  .tb-mini { font-size: 14px; }  /* was 12px */
  .tb-scale { font-size: 14px; }  /* was 12px */
  .pt-field { font-size: 13.3px; }  /* was 11.5px */
  .pt-ess-l { font-size: 13.3px; }  /* was 11.5px */
  .rel-k { font-size: 12px; }  /* kicker, was 11px */
  .rel-chip { font-size: 14px; }  /* was 12px */
  .rel-h { font-size: 15px; }  /* was 13px */
  .rel-none { font-size: 14px; }  /* was 12px */
  .rel-rel { font-size: 12px; }  /* kicker, was 11px */
  .rel-name { font-size: 15px; }  /* was 13px */
  .rel-key { font-size: 14px; }  /* was 12px */
  .rel-q { font-size: 15px; }  /* was 13px */
  .gd-h { font-size: 15px; }  /* was 13px */
  .gd-none { font-size: 14px; }  /* was 12px */
  .gd-needed { font-size: 15px; }  /* was 13px */
  .gd-rel { font-size: 12px; }  /* kicker, was 11px */
  .gd-name { font-size: 15px; }  /* was 13px */
  .gd-phone, .gd-email { font-size: 14px; }  /* was 12px */
  .gd-basis { font-size: 14px; }  /* was 12px */
  .gd-k { font-size: 12px; }  /* kicker, was 11px */
  .gd-field input, .gd-pick { font-size: 15px; }  /* was 13px */
  .dk-gp-h { font-size: 12px; }  /* kicker, was 11px */
  .gv-who { font-size: 15px; }  /* was 13px */
  .gv-h { font-size: 12px; }  /* kicker, was 11px */
  .gv-chip { font-size: 14px; }  /* was 12px */
  .gv-text, .gv-date, .gv-pick { font-size: 15px; }  /* was 13px */
  .gv-vital { font-size: 15px; }  /* was 13px */
  .gv-sys { font-size: 14px; }  /* was 12px */
  .gv-none { font-size: 14px; }  /* was 12px */
  .gv-flag { font-size: 15px; }  /* was 13px */
  .gv-working { font-size: 13.3px; }  /* was 11px */
  .gv-note { font-size: 14px; }  /* was 12px */
  .gpp-h { font-size: 15px; }  /* was 13px */
  .gpp-who { font-size: 14px; }  /* was 12px */
  .gpp-row { font-size: 15px; }  /* was 13px */
  .gpp-cap .gpp-v { font-size: 14px; }  /* was 12px */
  .gpp-dim { font-size: 14px; }  /* was 12px */
  .gpp-warn { font-size: 14px; }  /* was 12px */
  .gpp-claimed { font-size: 14px; }  /* was 12px */
  .gpp-rb { font-size: 14px; }  /* was 12px */
  .gpp-sub { font-size: 14px; }  /* was 12px */
  .gpp-sources { font-size: 13.3px; }  /* was 11px */
  .gpp-panel { font-size: 14px; }  /* was 12px */
  .gpp-table { font-size: 13.3px; }  /* was 11px */
  .gx-st { font-size: 12px; }  /* kicker, was 11px */
  .gx-what { font-size: 15px; }  /* was 13px */
  .gx-why { font-size: 14px; }  /* was 12px */
  .gx-more summary { font-size: 14px; }  /* was 12px */
  .gx-unread { font-size: 14px; }  /* was 12px */
  .gx-src { font-size: 13.3px; }  /* was 11px */
  .gx-hist { font-size: 15px; }  /* was 13px */
  .gx-here { font-size: 13.3px; }  /* was 11px */
  .gx-past { font-size: 13.3px; }  /* was 11px */
  .gb-said-ok { font-size: 14px; }  /* was 12px */
  .gb-said-miss { font-size: 14px; }  /* was 12px */
  .gb-group { font-size: 14px; }  /* was 12px */
  .gb-cell-l { font-size: 14px; }  /* was 12px */
  .gb-res-l { font-size: 15px; }  /* was 13px */
  .gb-res-v { font-size: 15px; }  /* was 13px */
  .gb-res-g { font-size: 14px; }  /* was 12px */
  .gb-res-ref, .gb-res-why { font-size: 13.3px; }  /* was 11px */
  .gs-count-l { font-size: 14px; }  /* was 12px */
  .gs-avg-n, .gs-note { font-size: 14px; }  /* was 12px */
  .gs-row-h { font-size: 14px; }  /* was 12px */
  .gs-flags { font-size: 14px; }  /* was 12px */
  .gc-hsg, .gc-left { font-size: 14px; }  /* was 12px */
  .gc-said { font-size: 14px; }  /* was 12px */
  .gc-warn { font-size: 14px; }  /* was 12px */
  .gc-m-t, .gc-m-d { font-size: 14px; }  /* was 12px */
  .gc-review { font-size: 14px; }  /* was 12px */
  .gc-src { font-size: 14px; }  /* was 12px */
  .gr-conds, .gr-items { font-size: 14px; }  /* was 12px */
  .gx-wd { font-size: 14px; }  /* was 12px */
  .gx-wsaid { font-size: 14px; }  /* was 12px */
  .gx-gone { font-size: 15px; }  /* was 13px */
  .gx-gone-why { font-size: 14px; }  /* was 12px */
  .gx-cert-row { font-size: 15px; }  /* was 13px */
  .gl-title { font-size: 18px; }  /* was 16px */
  .gl-note, .gl-meta { font-size: 14px; }  /* was 12px */
  .gl-srow { font-size: 14px; }  /* was 12px */
  .gl-in { font-size: 14px; }  /* was 12px */
  .gl-problem { font-size: 14px; }  /* was 12px */
  .gl-rb { font-size: 14px; }  /* was 12px */
  .lc-h { font-size: 15px; }  /* was 13px */
  .lc-means, .lc-note { font-size: 14px; }  /* was 12px */
  .lc-k { font-size: 12px; }  /* kicker, was 11px */
  .lc-grade { font-size: 14px; }  /* was 12px */
  .lc-row { font-size: 15px; }  /* was 13px */
  .lc-unsure { font-size: 13.3px; }  /* was 11px */
  .lc-fix { font-size: 15px; }  /* was 13px */
  .lc-chip { font-size: 14px; }  /* was 12px */
  .lc-key, .lc-date { font-size: 15px; }  /* was 13px */
  .lc-chosen { font-size: 14px; }  /* was 12px */
  .ex-h { font-size: 15px; }  /* was 13px */
  .ex-note { font-size: 14px; }  /* was 12px */
  .ex-k { font-size: 12px; }  /* kicker, was 11px */
  .ex-postop { font-size: 14px; }  /* was 12px */
  .ex-chip { font-size: 14px; }  /* was 12px */
  .ex-find, .ex-in { font-size: 15px; }  /* was 13px */
  .ex-row-t { font-size: 14px; }  /* was 12.5px */
  .ex-name { font-size: 15px; }  /* was 13px */
  .ex-doc { font-size: 14px; }  /* was 12px */
  .ex-cat { font-size: 13.3px; }  /* was 11px */
  .ex-fl { font-size: 13.3px; }  /* was 11px */
  .ex-warn { font-size: 14px; }  /* was 12px */
  .fv-enc-ex { font-size: 14px; }  /* was 12px */
  .rel-hit { font-size: 14px; }  /* was 12.5px */
  .rel-chosen { font-size: 14px; }  /* was 12px */
  .pm-to .pm-k { font-size: 13.3px; }  /* was 11px */
  .pm-to .pm-v { font-size: 16px; }  /* was 14px */
  .ep-h { font-size: 12px; }  /* kicker, was 11px */
  .ep-kv { font-size: 15px; }  /* was 13px */
  .ep-none { font-size: 14px; }  /* was 12.5px */
  .ep-line { font-size: 15px; }  /* was 13px */
  .ep-bs-top { font-size: 15px; }  /* was 13px */
  .ep-when { font-size: 13.3px; }  /* was 11px */
  .ep-earlier { font-size: 14px; }  /* was 12px */
  .ep-syn { font-size: 14px; }  /* was 12.5px */
  .su-h { font-size: 15px; }  /* was 13px */
  .su-sub { font-size: 12px; }  /* kicker, was 11px */
  .su-now { font-size: 15px; }  /* was 13px */
  .su-note { font-size: 13.3px; }  /* was 11.5px */
  .su-route-h { font-size: 14px; }  /* was 12.5px */
  .su-warn { font-size: 14px; }  /* was 12px */
  .su-in { font-size: 15px; }  /* was 13px */
  .su-logo-pic { font-size: 14px; }  /* was 12px */
  .sd-coming-t { font-size: 16px; }  /* was 14px */
  .sd-coming-s { font-size: 15px; }  /* was 13px */
  .sd-coming-tag { font-size: 12px; }  /* kicker, was 10.5px */
  .fv-row-t { font-size: 15px; }  /* was 13px */
  .fv-row-s { font-size: 13.3px; }  /* was 11.5px */
  .fo-not { font-size: 13.3px; }  /* was 10.5px */
  .ed-on { font-size: 13.3px; }  /* was 11.5px */
  .ed-box { font-size: 14px; }  /* was 12.5px */
  .ed-note { font-size: 13.3px; }  /* was 10.5px */
  .fo-m { font-size: 14px; }  /* was 12px */
  .fo-m-off { font-size: 13.3px; }  /* was 11px */
  .fo-m-un { font-size: 13.3px; }  /* was 10.5px */
  .fo-m-w { font-size: 13.3px; }  /* was 11px */
  .fo-m-t { font-size: 13.3px; }  /* was 11px */
  .mo-t { font-size: 14px; }  /* was 12px */
  .mo-s { font-size: 13.3px; }  /* was 11px */
  .mo-name { font-size: 14px; }  /* was 12px */
  .mo-latest { font-size: 13.3px; }  /* was 11px */
  .mo-band-words { font-size: 13.3px; }  /* was 10.5px */
  .mo-nopoints { font-size: 13.3px; }  /* was 11px */
  .mo-k { font-size: 13.3px; }  /* was 11px */
  .mo-why { font-size: 13.3px; }  /* was 11px */
  .mo-gone { font-size: 13.3px; }  /* was 11px */
  .fo-fix-h { font-size: 12px; }  /* kicker, was 11px */
  .fo-fix-in { font-size: 14px; }  /* was 12.5px */
  .fo-fix-note { font-size: 13.3px; }  /* was 10.5px */
  .fo-fix-back { font-size: 14px; }  /* was 12px */
  button.fo-v { font-size: 14px; }  /* was 12px */
  .home-sub { font-size: 12px; }  /* kicker, was 11px */
  .home-key-lab { font-size: 17px; }  /* was 15px */
  .home-key-hint { font-size: 13.3px; }  /* was 11.5px */
  .home-key-tag { font-size: 11px; }  /* kicker, was 9px */
  .pc-btn { font-size: 18px; }  /* was 16px */
  .home-resume-lab { font-size: 17px; }  /* was 15px */
  .home-resume-who { font-size: 15px; }  /* was 13px */
  .home-cluster-t { font-size: 13.3px; }  /* kicker, was 13.5px */
  .home-cluster-note { font-size: 13.3px; }  /* was 10.5px */
  .home-cluster .home-key-lab { font-size: 15px; }  /* was 13.5px */
  .home-dial-btn { font-size: 14px; }  /* was 12px */
  .home-tab-lab { font-size: 12px; }  /* kicker, was 10.5px */
  .fo-film-b { font-size: 13.3px; }  /* was 11.5px */
  .fo-film-n { font-size: 13.3px; }  /* was 11.5px */
  .fo-film-x { font-size: 13.3px; }  /* was 10.5px */
  .dl-who-line { font-size: 14px; }  /* was 12px */
  .dl-allergy { font-size: 13.3px; }  /* was 10.5px */
  .dl-close { font-size: 14px; }  /* was 12px */
  .dl-corner-t { font-size: 15px; }  /* was 13px */
  .dl-corner-sub { font-size: 12px; }  /* kicker, was 10px */
  .dl-wr-who { font-size: 14px; }  /* was 12.5px */
  .dl-wr-who::before { font-size: 13.3px; }  /* was 8px */
  .dl-wr-wait { font-size: 13.3px; }  /* was 11px */
  .dl-dial-t { font-size: 17px; }  /* was 15px */
  .dl-dial-sub { font-size: 13.3px; }  /* was 11px */
  .dl-rec-t { font-size: 12px; }  /* kicker, was 10.5px */
  .dl-note-t { font-size: 15px; }  /* was 13.5px */
  .dl-list-code { font-size: 13.3px; }  /* was 11.5px */
  .dl-list-name { font-size: 14px; }  /* was 12.5px */
  .pc-n { font-size: 13.3px; }  /* was 11px */
  .pc-line { font-size: 14px; }  /* was 12px */
  .pc-when { font-size: 13.3px; }  /* was 11px */
  .pc-near { font-size: 13.3px; }  /* was 11px */
  .pc-prog { font-size: 13.3px; }  /* was 11px */
  .pc-task { font-size: 14px; }  /* was 12px */
  .pc-tick { font-size: 16px; }  /* was 14px */
  .pc-task-by { font-size: 13.3px; }  /* was 10.5px */
  .pc-earlier { font-size: 13.3px; }  /* was 10.5px */
  .pc-earlier-l { font-size: 13.3px; }  /* was 10.5px */
  .pc-none { font-size: 13.3px; }  /* was 11px */
  .dl-mark-n { font-size: 13.3px; }  /* was 11px */
  .dl-list-n { font-size: 13.3px; }  /* was 10.5px */
  .dl-pain-n { font-size: 12px; }  /* kicker, was 10px */
  .dl-read-n { font-size: 14px; }  /* was 12px */
  .dl-read-v { font-size: 14px; }  /* was 12px */
  .dl-rec-clock { font-size: 13.3px; }  /* kicker, was 12px */
  .dl-rec-n { font-size: 13.3px; }  /* was 10.5px */
  .dl-tr-src { font-size: 11px; }  /* kicker, was 9.5px */
  .dl-tr-text { font-size: 14px; }  /* was 12.5px */
  .dl-take-src { font-size: 13.3px; }  /* was 11px */
  .dl-take-meta { font-size: 13.3px; }  /* was 10.5px */
  .dl-dial-status { font-size: 12px; }  /* kicker, was 10px */
  .dl-desk-k { font-size: 14px; }  /* was 12.5px */
  .dl-desk-v { font-size: 14px; }  /* was 12px */
  .dl-task-mark { font-size: 14px; }  /* was 12px */
  .dl-task-at { font-size: 13.3px; }  /* was 11px */
  .dl-task-who { font-size: 14px; }  /* was 12.5px */
  .ci-where { font-size: 13.3px; }  /* was 11px */
  .reg-kicker { font-size: 12px; }  /* kicker, was 10px */
  .reg-sub { font-size: 14px; }  /* was 12px */
  .reg-mode, .reg-tool { font-size: 13.3px; }  /* was 11px */
  .reg-card h2 { font-size: 17px; }  /* was 15px */
  .reg-card h3 { font-size: 12px; }  /* kicker, was 10px */
  .reg-required, .reg-optional { font-size: 11px; }  /* kicker, was 9px */
  .reg-help { font-size: 13.3px; }  /* was 11px */
  .reg-field-label { font-size: 12px; }  /* kicker, was 10px */
  .reg-active-input, .reg-transcript, .reg-input { font-size: 15px; }  /* was 13px */
  .reg-preview { font-size: 13.3px; }  /* was 11px */
  .reg-dob-cal { font-size: 17px; }  /* was 15px */
  .reg-age-note { font-size: 13.3px; }  /* was 10.5px */
  .reg-dob-error { font-size: 13.3px; }  /* was 10.5px */
  .reg-status { font-size: 13.3px; }  /* was 11px */
  .reg-rec-row .btn { font-size: 13.3px; }  /* was 11px */
  .reg-readback { font-size: 13.3px; }  /* was 11px */
  .reg-req { font-size: 13.3px; }  /* was 9.5px */
  .reg-link { font-size: 14px; }  /* was 12px */
  .ci-name { font-size: 15px; }  /* was 13px */
  .ci-kind { font-size: 12px; }  /* kicker, was 10.5px */
  .ci-why { font-size: 13.3px; }  /* was 11px */
  .ci-confirm { font-size: 13.3px; }  /* was 11px */
  .ci-status { font-size: 12px; }  /* kicker, was 11px */
  .ci-none { font-size: 14px; }  /* was 12px */
  .li-t { font-size: 14px; }  /* was 12px */
  .li-when { font-size: 13.3px; }  /* was 11px */
  .li-for { font-size: 14px; }  /* was 12px */
  .li-in { font-size: 14px; }  /* was 12px */
  .li-note { font-size: 13.3px; }  /* was 10.5px */
  .li-was { font-size: 14px; }  /* was 12px */
  .li-was-l { font-size: 13.3px; }  /* was 10.5px */
  .li-was-r { font-size: 13.3px; }  /* was 10.5px */
  .li-warn { font-size: 13.3px; }  /* was 11px */
  .wk-t { font-size: 15px; }  /* was 13px */
  .wk-dh-d { font-size: 12px; }  /* kicker, was 11px */
  .wk-dh-n { font-size: 16px; }  /* was 14px */
  .wk-rh { font-size: 13.3px; }  /* was 10.5px */
  .wk-chip { font-size: 13.3px; }  /* was 10px */
  .wk-e { font-size: 13.3px; }  /* was 11px */
  .wk-legend { font-size: 13.3px; }  /* was 10.5px */
  .wk-more { font-size: 13.3px; }  /* was 11px */
  .wk-none { font-size: 14px; }  /* was 12px */
  .dk-car .wk-over { font-size: 13.3px; }  /* was 11px */
  .dk-face { font-size: 12px; }  /* kicker, was 11px */
  .or-tab { font-size: 14px; }  /* was 12px */
  .or-unlinked { font-size: 14px; }  /* was 12px */
  .or-reg { font-size: 14px; }  /* was 12px */
  .or-name { font-size: 14px; }  /* was 12.5px */
  .or-k { font-size: 13.3px; }  /* was 11px */
  .or-in { font-size: 14px; }  /* was 12.5px */
  .or-hit { font-size: 14px; }  /* was 12px */
  .or-none { font-size: 14px; }  /* was 12px */
  .or-desc { font-size: 14px; }  /* was 12px */
  .or-ai-said { font-size: 14px; }  /* was 12px */
  .or-ai-why { font-size: 13.3px; }  /* was 11px */
  .or-v { font-size: 14px; }  /* was 12.5px */
  .or-test { font-size: 14px; }  /* was 12px */
  .or-x { font-size: 13.3px; }  /* was 11px */
  .or-total { font-size: 14px; }  /* was 12.5px */
  .or-tline { font-size: 14px; }  /* was 12.5px */
  .or-seg-b { font-size: 14px; }  /* was 12.5px */
  .or-rate { font-size: 13.3px; }  /* was 11px */
  .or-chk { font-size: 14px; }  /* was 12.5px */
  .or-contact { font-size: 14px; }  /* was 12px */
  .or-src { font-size: 13.3px; }  /* was 11px */
  .cs-lbl { font-size: 12px; }  /* kicker, was 11px */
  .cs-status { font-size: 14px; }  /* was 12px */
  .cs-fig-l { font-size: 14px; }  /* was 12px */
  .cs-fig-s { font-size: 13.3px; }  /* was 11px */
  .cs-th { font-size: 12px; }  /* kicker, was 11px */
  .cs-sub { font-size: 13.3px; }  /* was 11px */
  .cs-none { font-size: 14px; }  /* was 12px */
  .cs-note { font-size: 14px; }  /* was 12px */
  .or-qchip { font-size: 14px; }  /* was 12.5px */
  .or-qtag { font-size: 12px; }  /* kicker, was 10px */
  .or-code { font-size: 14px; }  /* was 12px */
  .or-pick { font-size: 14px; }  /* was 12.5px */
  .or-pick-c { font-size: 13.3px; }  /* was 11px */
  .or-tile-l { font-size: 15px; }  /* was 13px */
  .or-tile-s { font-size: 13.3px; }  /* was 11px */
  .fm-t { font-size: 14px; }  /* was 12px */
  .fm-n { font-size: 13.3px; }  /* was 10.5px */
  .fm-tick { font-size: 16px; }  /* was 14px */
  .fm-name { font-size: 14px; }  /* was 12px */
  .fm-note { font-size: 13.3px; }  /* was 10.5px */
  .pt-note { font-size: 12px; }  /* kicker, was 10.5px */
  .pt-in { font-size: 14px; }  /* was 12px */
  .pt-group { font-size: 12px; }  /* kicker, was 10.5px */
  .pt-row { font-size: 14px; }  /* was 12px */
  .pt-key { font-size: 13.3px; }  /* was 10.5px */
  .pt-tag { font-size: 12px; }  /* kicker, was 10px */
  .pt-when { font-size: 13.3px; }  /* was 10.5px */
  .pt-none { font-size: 13.3px; }  /* was 11.5px */
  .tk-n { font-size: 13.3px; }  /* was 10.5px */
  .tk-late { font-size: 13.3px; }  /* was 11px */
  .tk-tray { font-size: 13.3px; }  /* was 11px */
  .tk-group { font-size: 12px; }  /* kicker, was 11px */
  .tk-tick { font-size: 16px; }  /* was 14px */
  .tk-what { font-size: 14px; }  /* was 12px */
  .tk-key { font-size: 13.3px; }  /* was 10.5px */
  .tk-from, .tk-tag { font-size: 13.3px; }  /* was 10px */
  .tk-due { font-size: 13.3px; }  /* was 10.5px */
  .tk-none { font-size: 13.3px; }  /* was 11.5px */
  .du-line { font-size: 14px; }  /* was 12.5px */
  .gs-tab { font-size: 13.3px; }  /* was 11px */
  .gs-find { font-size: 14px; }  /* was 12.5px */
  .gs-go { font-size: 14px; }  /* was 12px */
  .gs-count { font-size: 12px; }  /* kicker, was 10px */
  .gs-wait, .gs-none { font-size: 13.3px; }  /* was 11.5px */
  .gs-title { font-size: 14px; }  /* was 12.5px */
  .gs-sub { font-size: 13.3px; }  /* was 11px */
  .gs-fact { font-size: 13.3px; }  /* was 11px */
  .gs-fl { font-size: 11px; }  /* kicker, was 9.5px */
  .du-act-l { font-size: 15px; }  /* was 13px */
  .du-act-w { font-size: 12px; }  /* kicker, was 10.5px */
  .du-act-c { font-size: 13.3px; }  /* was 11px */
  .du-status { font-size: 13.3px; }  /* was 11px */
  .du-none { font-size: 14px; }  /* was 12px */
  .sf-sub { font-size: 13.3px; }  /* was 11px */
  .sf-section-h { font-size: 13.3px; }  /* kicker, was 12px */
  .sf-rule-name { font-size: 15px; }  /* was 13.5px */
  .sf-rule-chev { font-size: 17px; }  /* was 15px */
  .sf-rule-detail { font-size: 14px; }  /* was 12.5px */
  .pv-sub { font-size: 13.3px; }  /* was 11px */
  .pv-filter { font-size: 15px; }  /* was 13px */
  .pv-cat-n { font-size: 15px; }  /* was 13px */
  .pv-cat-c { font-size: 13.3px; }  /* was 11px */
  .pv-name { font-size: 15px; }  /* was 13px */
  .pv-person { font-size: 14px; }  /* was 12px */
  .pv-num { font-size: 14px; }  /* was 12.5px */
  .pv-reason { font-size: 13.3px; }  /* was 11.5px */
  .pv-panel { font-size: 13.3px; }  /* was 11px */
  .pv-ref { font-size: 13.3px; }  /* was 11px */
  .prt-group-h { font-size: 15px; }  /* was 13px */
  .prt-group-n { font-size: 13.3px; }  /* was 11px */
  .prt-none { font-size: 14px; }  /* was 12px */
  .prt-name { font-size: 15px; }  /* was 13px */
  .prt-cat { font-size: 13.3px; }  /* was 11px */
  .prt-reach { font-size: 14px; }  /* was 12.5px */
  .prt-field-k { font-size: 14px; }  /* was 12px */
  .fee-sub { font-size: 13.3px; }  /* was 11px */
  .fee-place-h { font-size: 14px; }  /* was 12.5px */
  .fee-payor { font-size: 15px; }  /* was 13px */
  .fee-fig { font-size: 14px; }  /* was 12.5px */
  .fee-code { font-size: 13.3px; }  /* was 11px */
  .fee-bad-h { font-size: 14px; }  /* was 12px */
  .fee-bad-line { font-size: 13.3px; }  /* was 11.5px */
  .sc-sub { font-size: 13.3px; }  /* was 11px */
  .sc-section-h { font-size: 14px; }  /* was 12px */
  .sc-tick { font-size: 15px; }  /* was 13px */
  .sc-accred-n { font-size: 15px; }  /* was 13px */
  .sc-act { font-size: 15px; }  /* was 13px */
  .sc-blocked-n { font-size: 14px; }  /* was 12.5px */
  .sc-blocked-why { font-size: 13.3px; }  /* was 11.5px */
  .sc-nehr-line { font-size: 14px; }  /* was 12.5px */
  .inv-sub { font-size: 13.3px; }  /* was 11px */
  .inv-filter { font-size: 15px; }  /* was 13px */
  .inv-cat-n { font-size: 15px; }  /* was 13px */
  .inv-cat-c { font-size: 13.3px; }  /* was 11px */
  .inv-code { font-size: 13.3px; }  /* was 11px */
  .inv-name { font-size: 14px; }  /* was 12.5px */
  .inv-price { font-size: 14px; }  /* was 12.5px */
  .inv-billto { font-size: 13.3px; }  /* was 10.5px */
  .inv-onhand { font-size: 13.3px; }  /* was 11px */
  .stk-code { font-size: 13.3px; }  /* was 11px */
  .stk-name { font-size: 14px; }  /* was 12.5px */
  .stk-qty { font-size: 15px; }  /* was 13px */
  .stk-flag { font-size: 13.3px; }  /* was 10.5px */
  .stk-lot { font-size: 14px; }  /* was 12px */
  .stk-lot-b { font-size: 13.3px; }  /* was 11px */
  .stk-form-h, .stk-hist-h { font-size: 14px; }  /* was 12.5px */
  .stk-field-l { font-size: 13.3px; }  /* was 11.5px */
  .stk-input { font-size: 15px; }  /* was 13px */
  .stk-move { font-size: 14px; }  /* was 12px */
  .stk-move-w { font-size: 13.3px; }  /* was 11px */
  .stk-move-n { font-size: 13.3px; }  /* was 11px */
  .pf-sub { font-size: 13.3px; }  /* was 11px */
  .pf-section-h { font-size: 13.3px; }  /* kicker, was 12px */
  .pf-name { font-size: 15px; }  /* was 13.5px */
  .pf-meta { font-size: 13.3px; }  /* was 10.5px */
  .st-sub { font-size: 13.3px; }  /* was 11px */
  .st-section-t { font-size: 13.3px; }  /* kicker, was 12px */
  .st-menu-row { font-size: 15px; }  /* was 13px */
  .st-menu-chip { font-size: 13.3px; }  /* was 10.5px */
  .st-card-t { font-size: 15px; }  /* was 13px */
  .st-card-foot { font-size: 13.3px; }  /* was 10.5px */
  .su-day-l { font-size: 14px; }  /* was 12px */
  .st-field-k { font-size: 13.3px; }  /* was 11.5px */
  .st-field-v { font-size: 15px; }  /* was 13px */
  .st-status { font-size: 14px; }  /* was 12px */
  .st-none { font-size: 14px; }  /* was 12px */
  .st-more { font-size: 13.3px; }  /* was 11px */
  .st-tab { font-size: 14px; }  /* was 12px */
  .st-line { font-size: 15px; }  /* was 13px */
  .st-counts { font-size: 13.3px; }  /* was 11.5px */
  .st-banner-l { font-size: 13.3px; }  /* was 11.5px */
  .st-banner-v { font-size: 15px; }  /* was 13px */
  .st-banner-sched { font-size: 13.3px; }  /* was 11px */
  .st-verdict-h { font-size: 15px; }  /* was 13px */
  .st-finding-w { font-size: 13.3px; }  /* was 11px */
  .st-finding-what { font-size: 14px; }  /* was 12.5px */
  .st-sim { font-size: 14px; }  /* was 12.5px */
  .st-sim-n { font-size: 13.3px; }  /* was 11px */
  .rq-t { font-size: 15px; }  /* was 13px */
  .rq-sub { font-size: 13.3px; }  /* was 11px */
  .rq-n { font-size: 13.3px; }  /* was 11px */
  .rq-who { font-size: 15px; }  /* was 13.5px */
  .rq-wants { font-size: 14px; }  /* was 12.5px */
  .rq-when { font-size: 13.3px; }  /* was 11px */
  .rq-note { font-size: 13.3px; }  /* was 11.5px */
  .rq-none { font-size: 14px; }  /* was 12px */
  .mt-t { font-size: 15px; }  /* was 13px */
  .mt-n { font-size: 13.3px; }  /* was 11px */
  .mt-new-t { font-size: 14px; }  /* was 12px */
  .mt-in { font-size: 15px; }  /* was 13px */
  .mt-case-who { font-size: 15px; }  /* was 13.5px */
  .mt-case-q { font-size: 14px; }  /* was 12.5px */
  .mt-none { font-size: 14px; }  /* was 12px */
  .rs-state { font-size: 15px; }  /* was 13px */
  .meds-btn { font-size: 15px; }  /* was 13px */
  .meds-h { font-size: 12px; }  /* kicker, was 10px */
  .med-chip { font-size: 15px; }  /* was 13px */
  .med-star { font-size: 15px; }  /* was 13px */
  .med-on { font-size: 13.3px; }  /* was 11.5px */
  .meds-find { font-size: 15px; }  /* was 13px */
  .meds-class { font-size: 13.3px; }  /* was 11.5px */
  .pr-sub, .meds-sub { font-size: 13.3px; }  /* was 11.5px */
  .pr-tick { font-size: 15px; }  /* was 13.5px */
  .pr-code { font-size: 13.3px; }  /* was 11px */
  .pr-note { font-size: 14px; }  /* was 12px */
  .pr-h { font-size: 12px; }  /* kicker, was 10px */
  .pr-other { font-size: 13.3px; }  /* was 11.5px */
  .pr-count { font-size: 13.3px; }  /* was 11.5px */
  .dk-corner-t { font-size: 12px; }  /* kicker, was 10px */
  .dk-corner-sub { font-size: 13.3px; }  /* was 10.5px */
  .dk-corner-open { font-size: 13.3px; }  /* was 10.5px */
  .dk-side-rail-tab { font-size: 11px; }  /* kicker, was 9px */
  .dk-lane-none { font-size: 13.3px; }  /* was 10.5px */
  .dk-lights .wr-acts .btn { font-size: 13.3px; }  /* was 11px */
  .dk-lights .wr-type { font-size: 13.3px; }  /* was 11px */
  .dk-notice-i { font-size: 15px; }  /* was 13px */
  .dk-notice-t { font-size: 14px; }  /* was 12px */
  .dk-notice-m { font-size: 13.3px; }  /* was 10px */
  .dk-notice-n { font-size: 13.3px; }  /* was 11px */
  .dk-desk-room { font-size: 13.3px; }  /* was 11px */
  .dk-tile { font-size: 13.3px; }  /* was 11.5px */
  .dk-tile-pair .dk-tile-i { font-size: 16px; }  /* was 14px */
  .dk-last { font-size: 13.3px; }  /* was 11.5px */
  .dk-last .tk-key { font-size: 14px; }  /* was 12px */
  .dk-schedule-select-kicker { font-size: 11px; }  /* kicker, was 9px */
  .dk-schedule-select-name { font-size: 15px; }  /* was 13px */
  .dk-schedule-select-facts { font-size: 13.3px; }  /* was 10.5px */
  .deadend-t { font-size: 17px; }  /* was 15px */
  .deadend-s { font-size: 14px; }  /* was 12.5px */
  .dk-actions .dk-action-l { font-size: 15px; }  /* was 13px */
  .dk-actions .dk-action-s { font-size: 13.3px; }  /* was 11.5px */
  .dk-action-l { font-size: 16px; }  /* was 14px */
  .dk-action-s { font-size: 13.3px; }  /* was 10.5px */
  .dk-reg-h { font-size: 14px; }  /* was 12.5px */
  .dk-car-tab { font-size: 14px; }  /* was 12px */
  .dk-car-n { font-size: 13.3px; }  /* was 10px */
  .dk-car-tools .btn { font-size: 14px; }  /* was 12px */
  .dk-car-tools .wk-t { font-size: 14px; }  /* was 12px */
  .dk-car-wait, .dk-car-none { font-size: 13.3px; }  /* was 11.5px */
  .dk-tool { font-size: 13.3px; }  /* was 11.5px */
  .dk-sheet-h { font-size: 12px; }  /* kicker, was 10px */
  .dk-sheet-c { font-size: 13.3px; }  /* was 11px */
  .dk-sheet-k { font-size: 15px; }  /* was 13px */
  .clock { font-size: 12px; }  /* kicker, was 11px */
  .apptbar { font-size: 13.3px; }  /* was 11.5px */
  .dk-tab { font-size: 14px; }  /* was 12px */
  .dk-tab-n { font-size: 13.3px; }  /* was 10.5px */
  .dk-area-t { font-size: 14px; }  /* was 12.5px */
  .dk-area-hint { font-size: 13.3px; }  /* was 10.5px */
  .dk-body-gone { font-size: 13.3px; }  /* was 11px */
  .dk-trow-h { font-size: 12px; }  /* kicker, was 10px */
  .dk-trow-t { font-size: 15px; }  /* was 13px */
  .dk-img-study { font-size: 13.3px; }  /* was 11px */
  .dk-img-study .mono { font-size: 13.3px; }  /* was 10px */
  .dk-img-portal { font-size: 14px; }  /* was 12px */
  .dk-img-none { font-size: 13.3px; }  /* was 11.5px */
  .dk-img-paste { font-size: 13.3px; }  /* was 11.5px */
  .dk-doc-tick { font-size: 17px; }  /* was 15px */
  .dk-doc-l { font-size: 14px; }  /* was 12.5px */
  .dk-doc-s { font-size: 13.3px; }  /* was 10.5px */
  .dk-act-l { font-size: 15px; }  /* was 13px */
  .dk-act-s { font-size: 13.3px; }  /* was 10px */
  .dk-type { font-size: 13.3px; }  /* was 10.5px */
  .dk-two-h { font-size: 14px; }  /* was 12.5px */
  .dk-bill-kind { font-size: 13.3px; }  /* was 10.5px */
  .dk-small-b { font-size: 13.3px; }  /* was 10.5px */
  .dk-info-t { font-size: 15px; }  /* was 13px */
  .dk-info-l { font-size: 13.3px; }  /* was 11.5px */
  .themebtn { font-size: 12px; }  /* kicker, was 11px */
  .wr-err { font-size: 14px; }  /* was 12px */
  .dk-full-t { font-size: 12px; }  /* kicker, was 11px */
  .dk-full-sub { font-size: 14px; }  /* was 12px */
  .dk-back { font-size: 14px; }  /* was 12px */
  .q-foot { font-size: 13.3px; }  /* was 10.5px */
  .q-empty { font-size: 13.3px; }  /* was 11px */
  .q-odd { font-size: 13.3px; }  /* was 10.5px */
  .dk-full-seam { font-size: 13.3px; }  /* was 11px */
  .q-link { font-size: 14px; }  /* was 12px */
  .q-link-i { font-size: 16px; }  /* was 14px */
  .dk-quad .wr-acts .btn { font-size: 13.3px; }  /* was 11px */
  .dk-quad .wr-type { font-size: 13.3px; }  /* was 11px */
  .dk-quad .tk-what { font-size: 14px; }  /* was 12.5px */
  .fo-h-r { font-size: 12px; }  /* kicker, was 10px */
  .fo-flag { font-size: 13.3px; }  /* was 11px */
  .dk-corner-body .fo-enc { font-size: 13.3px; }  /* was 11.5px */
  .dk-corner-body .fo-enc-r { font-size: 13.3px; }  /* was 10.5px */
  .dk-corner-body .fo-m { font-size: 13.3px; }  /* was 11.5px */
  .ci-t { font-size: 18px; }  /* was 16px */
  .ci-g-t { font-size: 12px; }  /* kicker, was 10px */
  .ci-entity { font-size: 13.3px; }  /* was 11.5px */
  .ci-place { font-size: 15px; }  /* was 13px */
  .ci-place .ci-why { font-size: 13.3px; }  /* was 10px */
  .ci-hint { font-size: 13.3px; }  /* was 10.5px */
  .ci-foot { font-size: 13.3px; }  /* was 11px */
  .ci-b-t { font-size: 12px; }  /* kicker, was 11px */
  .ci-b-none { font-size: 14px; }  /* was 12px */
  .ci-act, .ci-desk { font-size: 14px; }  /* was 12px */
  .nr-t { font-size: 15px; }  /* was 13px */
  .nr-row { font-size: 14px; }  /* was 12px */
  .nr-entry { font-size: 14px; }  /* was 12px */
  .rc-title { font-size: 16px; }  /* was 14px */
  .rc-count { font-size: 14px; }  /* was 12px */
  .rc-gap { font-size: 14px; }  /* was 12px */
  .rc-head { font-size: 13.3px; }  /* was 11px */
  .rc-n { font-size: 14px; }  /* was 12px */
  .rc-words { font-size: 15px; }  /* was 13px */
  .rc-why { font-size: 14px; }  /* was 12px */
  .rc-note { font-size: 13.3px; }  /* was 11px */
  .rc-confirm-say { font-size: 15px; }  /* was 13px */
  .recbtn { font-size: 14px; }  /* was 12px */
  .rec-status { font-size: 11px; }  /* kicker, was 8.5px */
  body.is-phone #who .avatar { font-size: 13.3px; }  /* was 9px */
  body.is-phone #who .who-name { font-size: 13.3px; }  /* was 11.5px */
  body.is-phone .spine > #clock { font-size: 13.3px; }  /* was 9.5px */
  body.is-phone .spine > #patient-mrn { font-size: 13.3px; }  /* was 10px */
  body.is-phone .spine > #patient-sub { font-size: 13.3px; }  /* was 11px */
  body.is-phone .spine > #allergy { font-size: 13.3px; }  /* was 9px */
  body.is-phone .ph-seat .l { font-size: 11px; }  /* kicker, was 9px */
  body.is-phone .ph-seat .bdg { font-size: 13.3px; }  /* was 9px */
  body.is-phone .ph-ttl .sub { font-size: 13.3px; }  /* was 11px */
  body.is-phone .ph-sh .kicker { font-size: 11px; }  /* kicker, was 9.5px */
  body.is-phone .ph-sh .n { font-size: 13.3px; }  /* was 10.5px */
  body.is-phone .ph-sh .r { font-size: 11px; }  /* kicker, was 9.5px */
  body.is-phone .ph-tile .b { font-size: 13.3px; }  /* was 10px */
  body.is-phone .ph-tile .t { font-size: 14px; }  /* was 12.5px */
  body.is-phone .ph-tile .s { font-size: 13.3px; }  /* was 10px */
  body.is-phone .ph-band-h { font-size: 11px; }  /* kicker, was 9px */
  body.is-phone .ph-row { font-size: 14px; }  /* was 12.5px */
  body.is-phone .ph-row .tm { font-size: 13.3px; }  /* was 10.5px */
  body.is-phone .ph-row .wh { font-size: 13.3px; }  /* was 10.5px */
  body.is-phone .ph-row .rt { font-size: 13.3px; }  /* was 10px */
  body.is-phone .ph-row.wrap .nm { font-size: 14px; }  /* was 12px */
  body.is-phone .ph-open { font-size: 14px; }  /* was 12px */
  body.is-phone .ph-chip { font-size: 15px; }  /* was 13px */
  body.is-phone .ph-chip.sm { font-size: 14px; }  /* was 12.5px */
  body.is-phone .ph-chip .n { font-size: 13.3px; }  /* was 10.5px */
  body.is-phone .ph-seg > * { font-size: 12px; }  /* kicker, was 10px */
  body.is-phone .ph-tab .l { font-size: 11px; }  /* kicker, was 8.5px */
  body.is-phone .ph-tool .l { font-size: 11px; }  /* kicker, was 7.5px */
  body.is-phone .ph-card .t { font-size: 15px; }  /* was 13.5px */
  body.is-phone .ph-card .p { font-size: 15px; }  /* was 13.5px */
  body.is-phone .ph-fld .k { font-size: 11px; }  /* kicker, was 9px */
  body.is-phone .ph-fld .v { font-size: 16px; }  /* was 14px */
  body.is-phone .ph-pt { font-size: 14px; }  /* was 12.5px */
  body.is-phone .ph-pt .n { font-size: 13.3px; }  /* was 10px */
  body.is-phone .ph-btn { font-size: 15px; }  /* was 13px */
  body.is-phone .ph-mini { font-size: 14px; }  /* was 12px */
  body.is-phone .ph-hint { font-size: 13.3px; }  /* was 11px */
  body.is-phone .ph-hint.serif { font-size: 15px; }  /* was 13px */
  body.is-phone .ph-tag { font-size: 11px; }  /* kicker, was 8.5px */
  body.is-phone .ph-tick { font-size: 15px; }  /* was 13px */
  body.is-phone .ph-tick .who { font-size: 13.3px; }  /* was 9px */
  body.is-phone .ph-recs { font-size: 14px; }  /* was 12px */
  body.is-phone .ph-recs .r { font-size: 13.3px; }  /* was 10px */
  body.is-phone .ph-kv .k { font-size: 11px; }  /* kicker, was 9px */
  body.is-phone .ph-kv .v { font-size: 15px; }  /* was 13px */
  body.is-phone .ph-kv .v.mono { font-size: 14px; }  /* was 12.5px */
  body.is-phone .ph-money { font-size: 15px; }  /* was 13px */
  body.is-phone .ph-money.dim { font-size: 13.3px; }  /* was 11px */
  body.is-phone .ph-tot .k { font-size: 11px; }  /* kicker, was 9.5px */
  body.is-phone .ph-sheet .sheet-t { font-size: 18px; }  /* was 16px */
  body.is-phone .ph-wk .dh { font-size: 11px; }  /* kicker, was 9px */
  body.is-phone .ph-wk .dh b { font-size: 14px; }  /* was 12px */
  body.is-phone .ph-wk .hr { font-size: 13.3px; }  /* was 9px */
  body.is-phone .ph-e { font-size: 13.3px; }  /* was 8.5px */
  body.is-phone .ph-band-c { font-size: 11px; }  /* kicker, was 8px */
  body.is-phone .ph-mo .dow { font-size: 11px; }  /* kicker, was 9px */
  body.is-phone .ph-mo .dn { font-size: 13.3px; }  /* was 11px */
  body.is-phone .ph-mo .m { font-size: 13.3px; }  /* was 7.5px */
  body.is-phone .ph-yr .mn { font-size: 14px; }  /* was 12.5px */
  body.is-phone .ph-yr .mn .y { font-size: 13.3px; }  /* was 9px */
  body.is-phone .ph-yr .st { font-size: 11px; }  /* kicker, was 9px */
  body.is-phone .ph-legend { font-size: 11px; }  /* kicker, was 8.5px */
  body.is-phone .tl-body-gone { font-size: 13.3px; }  /* was 11px */
  body.is-phone .tl-allergy { font-size: 13.3px; }  /* was 11.5px */
  body.is-phone .enc-empty { font-size: 14px; }  /* was 12px */
  body.is-phone .enc-said { font-size: 13.3px; }  /* was 11.5px */
  body.is-phone .enc-wait { font-size: 13.3px; }  /* was 11px */
  body.is-phone .enc-writing { font-size: 15px; }  /* was 13px */
  body.is-phone .ph-sh .r.now-hit, .now-hit { font-size: 11px; }  /* kicker, was 9.5px */
  .now-nb-say { font-size: 13.3px; }  /* was 11.5px */
  .now-body .dy-sum, .now-body .dy-why { font-size: 13.3px; }  /* was 11px */
  .now-pad-text, .now-pad-when { font-size: 15px; }  /* was 13px */
  .now-pad-when { font-size: 14px; }  /* was 12px */
  .now-pad-back-h { font-size: 14px; }  /* was 12.5px */
  .now-pad-back-l { font-size: 14px; }  /* was 12px */
  .now-pad-back-l .when { font-size: 13.3px; }  /* was 11px */
  body.is-phone #preclerk .pc-t { font-size: 18px; }  /* was 16px */
  body.is-phone #preclerk .pc-line { font-size: 15px; }  /* was 13px */
  body.is-phone #preclerk .li-in, body.is-phone #preclerk .li-in-d { font-size: 16px; }  /* was 14px */
  body.is-phone .ar-room-n { font-size: 13.3px; }  /* was 11px */
  body.is-phone #room select.wr-type { font-size: 15px; }  /* was 13px */
  body.is-phone #registerview .wr-in, body.is-phone #registerview select.wr-type, body.is-phone #registerview select { font-size: 16px; }  /* was 14px */
  body.is-phone .ar-say-in { font-size: 16px; }  /* was 14px */
  body.is-phone .ar-key { font-size: 14px; }  /* was 12px */
  body.is-phone .fd-section-body .fo-h { font-size: 12px; }  /* kicker, was 10px */
  body.is-phone .fd-section-body .fo-h-r { font-size: 13.3px; }  /* was 9px */
  body.is-phone .fd-section-body .fo-f, body.is-phone .fd-section-body .fo-enc, body.is-phone .fd-section-body .fo-m { font-size: 15px; }  /* was 13px */
  body.is-phone .fd-section-body .fo-k { font-size: 11px; }  /* kicker, was 9px */
  body.is-phone .fd-section-body .fo-enc-r, body.is-phone .fd-section-body .fo-m-v, body.is-phone .fd-section-body .fo-m-w { font-size: 13.3px; }  /* was 11px */
  body.is-phone .fd-section-body .fo-m-off { font-size: 13.3px; }  /* was 11px */
  body.is-phone .fd-section-body .fo-m-un { font-size: 13.3px; }  /* was 10px */
  body.is-phone .fd-section-body .fo-m-t { font-size: 13.3px; }  /* was 10.5px */
  body.is-phone .fd-section-body .fo-none, body.is-phone .fd-section-body .fo-not, body.is-phone .fd-section-body .fo-more { font-size: 14px; }  /* was 12.5px */
  body.is-phone .fd-section-body .fo-film-n { font-size: 13.3px; }  /* was 11.5px */
  body.is-phone .fd-section-body .fo-film-x { font-size: 13.3px; }  /* was 10px */
  body.is-phone .fd-section-body .fo-film-b { font-size: 14px; }  /* was 12px */
  body.is-phone .fd-section-body .fo-fix-in { font-size: 16px; }  /* was 14px */
  body.is-phone .fd-section-body .fo-fix-back { font-size: 15px; }  /* was 13px */
  body.is-phone .fd-section-body .li-was { font-size: 14px; }  /* was 12.5px */
  body.is-phone #patients .pt-note { font-size: 13.3px; }  /* was 10px */
  body.is-phone #patients .pt-in { font-size: 16px; }  /* was 14px */
  body.is-phone #patients .pt-who { font-size: 16px; }  /* was 14px */
  body.is-phone #patients .pt-key { font-size: 13.3px; }  /* was 10px */
  body.is-phone #patients .pt-tag { font-size: 11px; }  /* kicker, was 8.5px */
  body.is-phone #patients .pt-n, body.is-phone #patients .pt-when { font-size: 13.3px; }  /* was 10px */
  body.is-phone #patients .pt-none { font-size: 15px; }  /* was 13px */
  body.is-phone #tasks .tk-t { font-size: 18px; }  /* was 16px */
  body.is-phone #tasks .tk-n { font-size: 13.3px; }  /* was 10px */
  body.is-phone #tasks .tk-late { font-size: 14px; }  /* was 12.5px */
  body.is-phone #tasks .tk-tray { font-size: 14px; }  /* was 12px */
  body.is-phone #tasks .tk-group { font-size: 13.3px; }  /* was 11.5px */
  body.is-phone #tasks .tk-what { font-size: 15px; }  /* was 13.5px */
  body.is-phone #tasks .tk-key, body.is-phone #tasks .tk-from, body.is-phone #tasks .tk-due, body.is-phone #tasks .tk-tag { font-size: 13.3px; }  /* was 10px */
  body.is-phone #tasks .tk-none { font-size: 15px; }  /* was 13px */
  body.is-phone .st-sub { font-size: 14px; }  /* was 12px */
  body.is-phone .st-menu-chip { font-size: 14px; }  /* was 12.5px */
  body.is-phone .st-card-t { font-size: 16px; }  /* was 14px */
  body.is-phone .st-card-foot { font-size: 13.3px; }  /* was 10.5px */
  body.is-phone .st-field-k { font-size: 11px; }  /* kicker, was 9.5px */
  body.is-phone .st-field-v { font-size: 15px; }  /* was 13px */
  body.is-phone .st-banner-l { font-size: 11px; }  /* kicker, was 9px */
  body.is-phone .st-banner-v { font-size: 17px; }  /* was 15px */
  body.is-phone .st-tab { font-size: 14px; }  /* was 12.5px */
  body.is-phone .st-line { font-size: 14px; }  /* was 12px */
  body.is-phone .st-verdict-h { font-size: 16px; }  /* was 14px */
  body.is-phone .st-counts { font-size: 13.3px; }  /* was 11.5px */
  body.is-phone .st-section-t { font-size: 12px; }  /* kicker, was 10px */
  body.is-phone .st-sim { font-size: 14px; }  /* was 12.5px */
  body.is-phone .st-finding-w { font-size: 14px; }  /* was 12px */
  body.is-phone .st-finding-what { font-size: 15px; }  /* was 13px */
  body.is-phone .st-more, body.is-phone .st-none { font-size: 14px; }  /* was 12.5px */
  .ut-t { font-size: 13.3px; }  /* kicker, was 12px */
  .ut-s { font-size: 13.3px; }  /* was 11px */
  .ut-back { font-size: 13.3px; }  /* was 11px */
  .ut-wait { font-size: 13.3px; }  /* was 11px */
  .ut-no { font-size: 14px; }  /* was 12.5px */
  .ut-note { font-size: 13.3px; }  /* was 11.5px */
  .ut-h { font-size: 12px; }  /* kicker, was 10px */
  .ut-line { font-size: 14px; }  /* was 12px */
  .ut-n { font-size: 14px; }  /* was 12.5px */
  .ut-q { font-size: 13.3px; }  /* was 10px */
  .ut-nopoints { font-size: 13.3px; }  /* was 10px */
  .ut-latest { font-size: 14px; }  /* was 12.5px */
  .ut-when { font-size: 13.3px; }  /* was 10px */
  .ut-arrow { font-size: 16px; }  /* was 14px */
  .ut-once { font-size: 11px; }  /* kicker, was 9.5px */
  .ut-range { font-size: 13.3px; }  /* was 10px */
  .ut-skip { font-size: 13.3px; }  /* was 10px */
  .ut-allergy { font-size: 12px; }  /* kicker, was 11px */
  .ut-med-i { font-size: 14px; }  /* was 12.5px */
  .ut-med-w { font-size: 13.3px; }  /* was 10px */
  .ut-med-r { font-size: 13.3px; }  /* was 11px */
  .ut-alert-r { font-size: 13.3px; }  /* was 11px */
  .ut-alert-k { font-size: 11px; }  /* kicker, was 9.5px */
  .ut-alert-t { font-size: 13.3px; }  /* was 11.5px */
  .ut-av-i { font-size: 14px; }  /* was 12.5px */
  .ut-av-w { font-size: 13.3px; }  /* was 11.5px */
  .ut-av-s { font-size: 13.3px; }  /* was 10px */
  .ut-basis { font-size: 13.3px; }  /* was 11.5px */
  .mail-addr { font-size: 16px; }  /* was 14px */
  .mail-tag { font-size: 12px; }  /* kicker, was 11px */
  .mail-from { font-size: 16px; }  /* was 14px */
  .mail-sub { font-size: 16px; }  /* was 14px */
  .mail-when { font-size: 14px; }  /* was 12px */
  .mail-where { font-size: 14px; }  /* was 12px */
  .mail-att-n { font-size: 15px; }  /* was 13px */
  .mail-fix-h { font-size: 12px; }  /* kicker, was 11px */
  .mail-f-k { font-size: 12px; }  /* kicker, was 11px */
  .mail-in { font-size: 15px; }  /* was 13px */
  .mail-back { font-size: 15px; }  /* was 13px */
  .mail-said { font-size: 14px; }  /* was 12px */
  .mail-done { font-size: 14px; }  /* was 12px */
  .mail-none { font-size: 15px; }  /* was 13px */
  .mail-none-t { font-size: 16px; }  /* was 14px */
  .mail-set { font-size: 13.3px; }  /* was 11.5px */
  .pill-reg { font-size: 13.3px; }  /* kicker, was 12px */
  .pill-mail { font-size: 12px; }  /* kicker, was 10px */
  .pill-mail .mg { font-size: 13.3px; }  /* was 11px */
  .pill-owed { font-size: 12px; }  /* kicker, was 10px */
  .pill-owed .og { font-size: 13.3px; }  /* was 11px */
  .owed-mrn { font-size: 12px; }  /* kicker, was 11px */
  .owed-what { font-size: 13.3px; }  /* was 10.5px */
  .pc-name { font-size: 17px; }  /* was 15px */
  .pc-h .pill { font-size: 13.3px; }  /* was 10px */
  .pc-pin { font-size: 11px; }  /* kicker, was 9px */
  .pc-note { font-size: 13.3px; }  /* was 10.5px */
  .fl-title { font-size: 13.3px; }  /* kicker, was 12px */
  .fl-sub { font-size: 13.3px; }  /* was 11.5px */
  .fl-back { font-size: 13.3px; }  /* was 11.5px */
  .fl-group-t { font-size: 12px; }  /* kicker, was 10.5px */
  .fl-group-sub { font-size: 13.3px; }  /* was 11px */
  .fl-form { font-size: 16px; }  /* was 14px */
  .fl-form .fl-how { font-size: 12px; }  /* kicker, was 11.5px */
  .fl-form .fl-need { font-size: 12px; }  /* kicker, was 10.5px */
  .fl-ask-l { font-size: 13.3px; }  /* was 11.5px */
  .fl-ask-in { font-size: 15px; }  /* was 13px */
  .fl-more-t { font-size: 12px; }  /* kicker, was 10px */
  .fl-foot { font-size: 13.3px; }  /* was 11.5px */
  .fl-said { font-size: 14px; }  /* was 12px */
  .dk-icons.fill .dk-tile-pair .dk-tile-i { font-size: 15px; }  /* was 13px */
  .dk-ibar-k { font-size: 11px; }  /* kicker, was 9px */
  .dk-ibar-v { font-size: 14px; }  /* was 12px */
  .dk-ibar-b { font-size: 13.3px; }  /* was 10.5px */
  .fo-enc.is-pend .fo-enc-r { font-size: 12px; }  /* kicker, was 10px */
  .fo-sub { font-size: 13.3px; }  /* was 11px */
  .fd-hdr-seg { font-size: 14px; }  /* was 12.5px */
  button.fd-hdr-loc { font-size: 13.3px; }  /* kicker, was 12.5px */
  .fd-hdr-clock { font-size: 14px; }  /* was 12px */
  .fd-hdr-act { font-size: 14px; }  /* was 12px */
  .fd-tag { font-size: 11px; }  /* kicker, was 9px */
  .fd-rail-tab { font-size: 13.3px; }  /* kicker, was 12px */
  .fd-rail-badge { font-size: 12px; }  /* kicker, was 11px */
  .fd-side-t { font-size: 12px; }  /* kicker, was 10px */
  .fd-away-block { font-size: 13.3px; }  /* was 11.5px */
  .fd-side-note { font-size: 13.3px; }  /* was 11.5px */
  .fd-side-sec-h { font-size: 12px; }  /* kicker, was 10px */
  .fd-ftr-item { font-size: 14px; }  /* was 12px */
  .fd-ftr-detail { font-size: 13.3px; }  /* was 11px */
  .fd-set-h { font-size: 11px; }  /* kicker, was 9.5px */
  .fd-set-row { font-size: 14px; }  /* was 12px */
  .fd-sc-sum { font-size: 13.3px; }  /* was 11.5px */
  .fd-sc-why { font-size: 13.3px; }  /* was 11px */
  .fd-sc-none { font-size: 14px; }  /* was 12px */
  .fd-sc-gap { font-size: 13.3px; }  /* was 11px */
  .fd-sc-dh-d { font-size: 13.3px; }  /* was 11px */
  .fd-sc-dh-n { font-size: 15px; }  /* was 13px */
  .fd-sc-rh { font-size: 13.3px; }  /* was 10.5px */
  .fd-sc-chip { font-size: 13.3px; }  /* was 10px */
  .fd-sc-e { font-size: 13.3px; }  /* was 11px */
  .fd-sc-e-clip { font-size: 13.3px; }  /* was 10px */
  .fd-sc-e .dfc-bell { font-size: 14px; }  /* was 12px */
  .fd-sc-more { font-size: 13.3px; }  /* was 10.5px */
  .fd-sc-lg-t { font-size: 13.3px; }  /* was 10.5px */
  .fd-dl-h { font-size: 12px; }  /* kicker, was 11px */
  .fd-dl-row { font-size: 14px; }  /* was 12px */
  .fd-dl-x { font-size: 13.3px; }  /* was 11px */
  .fd-dl-none { font-size: 14px; }  /* was 12px */
  .fd-dl-bad { font-size: 13.3px; }  /* was 11.5px */
  .fd-dl-note { font-size: 13.3px; }  /* was 11.5px */
  .fd-dl-in { font-size: 14px; }  /* was 12px */
  .fd-dl-far { font-size: 13.3px; }  /* was 11px */
  .fd-bk-h { font-size: 12px; }  /* kicker, was 11px */
  .fd-bk-in { font-size: 14px; }  /* was 12px */
  .fd-bk-note { font-size: 13.3px; }  /* was 11.5px */
  .fd-sc-count-d { font-size: 13.3px; }  /* was 11px */
  .fd-sc-count-n { font-size: 17px; }  /* was 15px */
  .fd-sc-count-marks span { font-size: 13.3px; }  /* was 9.5px */
  .fda-btn { font-size: 15px; }  /* was 13px */
  .fda-link { font-size: 14px; }  /* was 12px */
  .fda-means { font-size: 14px; }  /* was 12px */
  .fda-note { font-size: 14px; }  /* was 12px */
  .fda-co-title { font-size: 13.3px; }  /* kicker, was 13px */
  .fda-co-sub { font-size: 14px; }  /* was 12px */
  .fd-doc-input { font-size: 14px; }  /* was 12.5px */
  .fd-wk-title { font-size: 15px; }  /* was 13px */
  .fd-wk-count { font-size: 13.3px; }  /* was 11px */
  .fd-wk-none { font-size: 13.3px; }  /* was 11.5px */
  .fd-wk-group-t { font-size: 12px; }  /* kicker, was 11.5px */
  .fd-wk-task-sub { font-size: 13.3px; }  /* was 10.5px */
  .fd-wk-instr { font-size: 14px; }  /* was 12px */
  .fd-wk-btn { font-size: 14px; }  /* was 12.5px */
  .fd-wk-when { font-size: 14px; }  /* was 12.5px */
  .fd-wk-said { font-size: 14px; }  /* was 12px */
  .fd-wk-lane-t { font-size: 13.3px; }  /* kicker, was 12px */
  .fd-wk-chip { font-size: 13.3px; }  /* was 11px */
  .fd-wk-log-row { font-size: 14px; }  /* was 12.5px */
  .fd-wk-log-when { font-size: 13.3px; }  /* was 11.5px */
  .fd-wk-form-t { font-size: 12px; }  /* kicker, was 11px */
  .fd-wk-sel, .fd-wk-date { font-size: 14px; }  /* was 12.5px */
  .fd-wk-hint { font-size: 14px; }  /* was 12px */
  .fd-wk-de-t { font-size: 13.3px; }  /* kicker, was 12px */
  .fd-wk-de-line { font-size: 14px; }  /* was 12.5px */
  .fd-wk-de-row { font-size: 14px; }  /* was 12.5px */
  .fd-sum-badge { font-size: 15px; }  /* was 13px */
  .fd-sum-days-t { font-size: 15px; }  /* was 13px */
  .fd-sum-day { font-size: 16px; }  /* was 14px */
  .fd-sum-h { font-size: 13.3px; }  /* kicker, was 12px */
  .fd-sum-who { font-size: 14px; }  /* was 12.5px */
  .fd-sum-what { font-size: 16px; }  /* was 14px */
  .fd-sum-sub { font-size: 14px; }  /* was 12px */
  .fd-sum-late { font-size: 14px; }  /* was 12px */
  .fd-sum-none, .fd-sum-later { font-size: 15px; }  /* was 13px */
  .fd-wk-gap-t { font-size: 12px; }  /* kicker, was 11px */
  .fd-wk-gap-row { font-size: 13.3px; }  /* was 11.5px */
  .fd-wk-tag { font-size: 11px; }  /* kicker, was 9.5px */
  .fd-bot-title { font-size: 15px; }  /* was 13px */
  .fd-bot-tag { font-size: 11px; }  /* kicker, was 9.5px */
  .fd-bot-dim-note { font-size: 13.3px; }  /* was 11.5px */
  .fd-chat-title { font-size: 15px; }  /* was 13px */
  .fd-chat-count { font-size: 13.3px; }  /* was 11px */
  .fd-chat-honest { font-size: 13.3px; }  /* was 11px */
  .fd-chat-empty { font-size: 13.3px; }  /* was 11.5px */
  .fd-chat-warn { font-size: 14px; }  /* was 12px */
  .fd-chat-row-sub { font-size: 13.3px; }  /* was 10.5px */
  .fd-chat-tag { font-size: 11px; }  /* kicker, was 9.5px */
  .fd-chat-back { font-size: 14px; }  /* was 12px */
  .fd-chat-turn-who { font-size: 13.3px; }  /* was 10.5px */
  .fd-chat-turn-at { font-size: 13.3px; }  /* was 10px */
  .fd-chat-turn-said { font-size: 15px; }  /* was 13px */
  .fd-chat-reply-status { font-size: 13.3px; }  /* was 11.5px */
  .fd-chat-reply-quote { font-size: 13.3px; }  /* was 11.5px */
  .fd-chat-input { font-size: 15px; }  /* was 13px */
  .fd-chat-btn { font-size: 14px; }  /* was 12.5px */
  .fd-chat-said { font-size: 14px; }  /* was 12px */
  .mm-sub { font-size: 15px; }  /* was 13.3px */
  .mm-name { font-size: 16px; }  /* was 14px */
  .mm-l { font-size: 12px; }  /* kicker, was 11px */
  .mm-intent { font-size: 15px; }  /* was 13.3px */
  .mm-b { font-size: 15px; }  /* was 13.3px */
  .mm-say { font-size: 14px; }  /* was 12.5px */
  .mm-was { font-size: 14px; }  /* was 12.5px */
  .mm-now { font-size: 14px; }  /* was 12.5px */
  .outsideview .ow-fld .k { font-size: 11px; }  /* kicker, was 9px */
  .outsideview .ow-in { font-size: 17px; }  /* was 15px */
  .outsideview .ow-figs { font-size: 14px; }  /* was 12px */
  .fr-intro { font-size: 14px; }  /* was 12.5px */
  .fr-h { font-size: 16px; }  /* was 14px */
  .fr-blurb { font-size: 14px; }  /* was 12px */
  .fr-when { font-size: 15px; }  /* was 13px */
  .fr-tag { font-size: 12px; }  /* kicker, was 10.5px */
  .fr-what { font-size: 14px; }  /* was 12px */
  .fr-up-h { font-size: 14px; }  /* was 12.5px */
  .fr-hint { font-size: 13.3px; }  /* was 11px */
  .dfc-bell { font-size: 17px; }  /* was 15px */
  .dfc-sub { font-size: 15px; }  /* was 13px */
  .dfc-kind-chip { font-size: 12px; }  /* kicker, was 11px */
  .dfc-kind-t { font-size: 15px; }  /* was 13px */
  .dfc-clash-t { font-size: 16px; }  /* was 14px */
  .dfc-clash-line { font-size: 15px; }  /* was 13px */
  .dfc-sec-t { font-size: 12px; }  /* kicker, was 11px */
  .dfc-sec-n { font-size: 13.3px; }  /* was 11px */
  .dfc-none { font-size: 15px; }  /* was 13px */
  .dfc-badge { font-size: 14px; }  /* was 12px */
  .prefs-intro { font-size: 17px; }  /* was 15px */
  .prefs-description { font-size: 16px; }  /* was 14px */
  .prefs-label { font-size: 16px; }  /* was 14px */
  .prefs-form .su-in { font-size: 17px; }  /* was 15px */
  .prefs-help { font-size: 15px; }  /* was 13px */
  .prefs-status { font-size: 15px; }  /* was 13px */
  .prefs-form .btn { font-size: 16px; }  /* was 14px */
  .pr-tosp { font-size: 15px; }  /* was 13px */
  .pr-tosp-source { font-size: 14px; }  /* was 12px */
  .report-intro { font-size: 17px; }  /* was 15px */
  .report-tile-meta { font-size: 15px; }  /* was 13px */
  .report-host .st-tab, .stats-host .cs-tab, .stats-host .cs-btn { font-size: 16px; }  /* was 14px */
  .report-status { font-size: 16px; }  /* was 14px */
  .report-metric-label, .stats-host .cs-fig-l { font-size: 16px; }  /* was 14px */
  .audit-host .st-sim-n { font-size: 16px; }  /* was 14px */
  .audit-host .st-finding-what { font-size: 16px; }  /* was 14px */
  .stats-host .cs-chk { font-size: 15px; }  /* was 13px */
  .stats-host .cs-date-label { font-size: 14px; }  /* was 12px */
  .stats-host .cs-date { font-size: 16px; }  /* was 14px */
  .stats-host .cs-status { font-size: 14px; }  /* was 12px */
  .stats-host .cs-fig-s { font-size: 14px; }  /* was 12px */
  .stats-host .cs-tr > span { font-size: 15px; }  /* was 13px */
  .stats-host .cs-th > span { font-size: 13.3px; }  /* was 11px */
  .stats-host .cs-note, .stats-host .cs-none, .stats-host .cs-sub { font-size: 14px; }  /* was 12px */
  .stats-host .cs-n { font-size: 16px; }  /* was 14px */
  .procedure-host .pr-sub { font-size: 17px; }  /* was 15px */
  .procedure-host .meds-find { font-size: 17px; }  /* was 15px */
  .procedure-host .pr-note { font-size: 15px; }  /* was 13px */
  .procedure-host .pr-count { font-size: 15px; }  /* was 13px */
  .procedure-host .pr-tick { font-size: 16px; }  /* was 14px */
  .procedure-host .pr-open { font-size: 16px; }  /* was 14px */
  .procedure-host .pr-tosp { font-size: 14px; }  /* was 12px */
  .pr-template-field { font-size: 15px; }  /* was 13px */
  .pr-template-input { font-size: 16px; }  /* was 14px */
  .pr-level { font-size: 15px; }  /* was 13px */
  .pr-template-group > summary, .pr-template-advanced > summary { font-size: 16px; }  /* was 14px */
  .pr-code-confirm { font-size: 15px; }  /* was 13px */
  .pr-template-preview { font-size: 15px; }  /* was 13px */
  .pr-template-status { font-size: 15px; }  /* was 13px */
  .note-host .tb-in { font-size: 16px; }  /* was 14px */
  .note-host .btn, .fee-host .btn { font-size: 15px; }  /* was 13px */
  .note-library-status { font-size: 15px; }  /* was 13px */
  .note-complaint-name { font-size: 16px; }  /* was 14px */
  .note-pagination { font-size: 15px; }  /* was 13px */
  .note-name-label { font-size: 15px; }  /* was 13px */
  .note-heading-tab { font-size: 14px; }  /* was 12px */
  .note-editor-field { font-size: 16px; }  /* was 14px */
  .note-enable { font-size: 15px; }  /* was 13px */
  .memo-library-host .mm-name, .memo-library-host .tb-in, .memo-library-host textarea { font-size: 16px; }  /* was 14px */
  .mm-field { font-size: 15px; }  /* was 13px */
  .mm-hint { font-size: 14px; }  /* was 12px */
  .pdf-library-host .tb-item-name { font-size: 16px; }  /* was 14px */
  .fee-host .fr-description > summary, .fee-host .fr-history > summary { font-size: 15px; }  /* was 13px */
  .fee-host .fr-when { font-size: 16px; }  /* was 14px */
  .fee-host .fr-up-h { font-size: 16px; }  /* was 14px */
  .fee-host .fr-up .or-in { font-size: 16px; }  /* was 14px */
  .fee-host .fr-hint { font-size: 15px; }  /* was 13px */
  .fee-host .fr-blurb, .fee-host .fr-what { font-size: 15px; }  /* was 13px */
  .safety-host .sf-rule-name { font-size: 16px; }  /* was 14px */
  .safety-host .sf-rule-detail { font-size: 15px; }  /* was 13px */
  .fr-source-meta, .contact-meta { font-size: 15px; }  /* was 13px */
  .fr-source-action { font-size: 15px; }  /* was 13px */
  .fr-current { font-size: 15px; }  /* was 13px */
  .fr-review-date { font-size: 15px; }  /* was 13px */
  .fee-workspace .su-in { font-size: 16px; }  /* was 14px */
  .fr-rate-table { font-size: 16px; }  /* was 14px */
  .fr-rate-table th { font-size: 14px; }  /* was 12px */
  .fr-paging { font-size: 15px; }  /* was 13px */
  .contact-host .prt-name { font-size: 17px; }  /* was 15px */
  .contact-host .prt-reach, .contact-host .prt-none { font-size: 15px; }  /* was 13px */
  .contact-host .prt-field-k { font-size: 15px; }  /* was 13px */
  .contact-host .su-in { font-size: 16px; }  /* was 14px */
  .procedure-workspace .pr-workspace-intro { font-size: 16px; }  /* was 14px */
  .procedure-workspace .pr-count { font-size: 15px; }  /* was 13px */
  .procedure-workspace .meds-find { font-size: 16px; }  /* was 14px */
  .pr-family-description { font-size: 15px; }  /* was 13px */
  .pr-family-meta { font-size: 14px; }  /* was 12px */
  .pr-workspace-scope, .pr-selected-count { font-size: 14px; }  /* was 12px */
  .pr-mode, .pr-section { font-size: 16px; }  /* was 14px */
  .pr-variant-label { font-size: 15px; }  /* was 13px */
  .procedure-workspace .pr-template-input { font-size: 16px; }  /* was 14px */
  .pr-workspace-help { font-size: 14px; }  /* was 12px */
  .pr-wording-view, .pr-section-preview { font-size: 16px; }  /* was 14px */
  .pr-field-index span { font-size: 14px; }  /* was 12px */
  .procedure-workspace .pr-template-field { font-size: 15px; }  /* was 13px */
  .pr-wording-edit { font-size: 16px; }  /* was 14px */
  .procedure-workspace .pr-level { font-size: 14px; }  /* was 12px */
  .pr-preview-tile summary { font-size: 15px; }  /* was 13px */
  .pr-preview-tile .pr-section-preview { font-size: 15px; }  /* was 13px */
  .procedure-workspace .pr-template-status { font-size: 15px; }  /* was 13px */
  .pr-candidate { font-size: 14px; }  /* was 12px */
  .stats-host .report-intro { font-size: 16px; }  /* was 14px */
  .stats-host .report-tile-heading .report-tile-meta { font-size: 14px; }  /* was 12px */
  .stats-host .report-card-title { font-size: 17px; }  /* was 15px */
  .stats-host .cs-clinics > .cs-lbl { font-size: 14px; }  /* was 12px */
  .stats-host .cs-tab, .stats-host .cs-btn { font-size: 15px; }  /* was 13px */
  .stats-host .cs-fig-l { font-size: 15px; }  /* was 13px */
  .stats-host .cs-noshows .cs-title { font-size: 17px; }  /* was 15px */
  .cs-pager { font-size: 14px; }  /* was 12px */
  .stats-host .cs-no-show-list .tk-group { font-size: 14px; }  /* was 12px */
  .stats-host .cs-no-show-list .tk-key { font-size: 15px; }  /* was 13px */
  .stats-host .cs-no-show-list .tk-tag { font-size: 13.3px; }  /* was 10px */
  .hs-lede, .hs-hint { font-size: 15px; }  /* was 13.3px */
  .hs-btn { font-size: 16px; }  /* was 14px */
  .hs-in { font-size: 16px; }  /* was 14px */
  .hs-ta { font-size: 16px; }  /* was 14px */
  .hs-h3 { font-size: 17px; }  /* was 15px */
  .hs-lab { font-size: 12px; }  /* kicker, was 11px */
  .hs-row-s { font-size: 14px; }  /* was 12px */
  .hs-pline { font-size: 15px; }  /* was 13px */
  .hs-pkg-a { font-size: 14px; }  /* was 12.5px */
  .hs-tick { font-size: 15px; }  /* was 13.5px */
  .hs-sched-r { font-size: 15px; }  /* was 13px */
  .hs-sched-t { font-size: 14px; }  /* was 12px */
  .hs-sched-s { font-size: 13.3px; }  /* was 11.5px */
  .hs-chip { font-size: 14px; }  /* was 12px */
  .hs-panel { font-size: 15px; }  /* was 13.5px */
  .hs-res-n { font-size: 16px; }  /* was 14px */
  .hs-unit-l { font-size: 14px; }  /* was 12.5px */
  .hs-res-f { font-size: 15px; }  /* was 13px */
  .hs-res-r { font-size: 14px; }  /* was 12px */
  .hs-prev { font-size: 13.3px; }  /* was 11.5px */
  .hs-note { font-size: 14px; }  /* was 12px */
  .hs-crit-done { font-size: 15px; }  /* was 13px */
  .hs-due-r { font-size: 15px; }  /* was 13.5px */
  .hs-dirty { font-size: 15px; }  /* was 13px */
  .hs-say { font-size: 15px; }  /* was 13.5px */
  .tiny { font-size: 13.3px; }  /* dom.js tiny(): the floor */
}
/* ── end desktop type scale ────────────────────────────────────────── */

/* ── THE PHONE AS A CHAT (Dr Lau, 9 September; LE-48) ────────────────────
   Two regions that ARE the viewport on a phone, like the desktop's two
   pages: the chat scrolls inside itself, the composer stays at the foot, the
   page never scrolls. chat.js's own classes (ch-) and chatenc.js's (ce-)
   follow; these are the front screen's own (cho-). */
.chathome, .chatenc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.chathome[hidden], .chatenc[hidden] { display: none; }
.cho-eg { font-size: 12px; color: var(--teal); }
.cho-line { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0;
  font: inherit; color: var(--ink); cursor: pointer; }
.cho-back { display: flex; }
.cho-btn { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 0;
  padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--sunk);
  font-family: var(--display); font-size: 14px; color: var(--ink); cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent; }
.cho-btn:disabled { opacity: 0.45; cursor: default; }
.cho-go { background: rgba(79,214,200,0.16); border-color: rgba(79,214,200,0.5); color: var(--teal); font-weight: 600; }
.cho-quiet { opacity: 0.6; min-height: 38px; }
.cho-away { opacity: 0.55; }
.cho-who { font-size: 12px; color: var(--ink-2); }
.cho-readback, .cho-done, .cho-next { display: flex; flex-direction: column; gap: 8px; }
.cho-row { display: flex; gap: 8px; }
.cho-k { display: block; }
.cho-heard { font-family: var(--serif); font-size: 13.5px; color: var(--ink-2); }
.cho-kv { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 10px; align-items: baseline; }
.cho-kk { font-size: 12px; color: var(--dim); }
.cho-kv-v { font-size: 15px; color: #fff; }
.cho-miss { color: var(--amber-ink); font-size: 12px; font-style: italic; }
.cho-key { font-size: 12px; color: var(--teal); }
.cho-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cho-chip { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  background: var(--sunk); border: 1px solid var(--line); font-family: var(--display); font-size: 13px; color: var(--ink); cursor: pointer; }
.cho-chip.on { background: rgba(79,214,200,0.16); border-color: rgba(79,214,200,0.5); color: var(--teal); font-weight: 600; }
.cho-done-h { display: flex; align-items: center; gap: 8px; }
.cho-tick { color: var(--teal); }
.cho-tag { font-size: 8.5px; letter-spacing: 0.14em; color: var(--faint); }
.cho-detail { font-size: 12.5px; color: var(--dim); }

/* ===================== THE FRONT DESK'S DESKTOP (LE-50) =====================
   Five parcels' fragments, folded under one hand, ABOVE THE CHAT SECTIONS.
   That placement is load-bearing and it is not a style choice:
   verify_console_chatenc reads chatenc's fragment as its marker TO EOF, so
   anything appended after the last chat marker is swallowed into that slice
   and judged by its purity rules. This block declares two variables of its
   own and touches the side rail's `dk-` classes, both of which that slice
   forbids -- so appended at the end it turned the chat harness red. The
   estate already records this exact fault from 10 September, and the
   fb_spine block thirty lines above carries the same note. Specificity is
   unaffected: nothing here and nothing there share a selector. Every colour here is a :root token -- three parcel
   harnesses and verify_frontdesk section 10 all refuse an invented one.
   ========================================================================= */

/* ==== fd_frame BEGIN (LE-50) ==== */
/* ==== fd_frame BEGIN — the front desk's desktop frame (LE-50 Parcel A) ====
 * Folded whole into app.css by the integrator, between its own BEGIN and
 * END markers (rule 2 of LE-50 section 3: fragments, never edits).
 *
 * EVERY VALUE HERE IS A TOKEN app.css ALREADY DEFINES -- none invented, so
 * the day/dark toggle (`[data-theme="day"]`, app.css:2216) moves this frame
 * with the rest of the app for free. One custom property is this
 * fragment's OWN, `--fd-rail-w`, the width of the strip of tabs down each
 * edge -- under its own name so this frame never reads the doctor's.
 *
 * TWO RAILS, NOT FOUR CORNERS (Dr Lau, 2 October: "Vertical bar x 2 on both
 * sides"). The corners' collapse-to-rail borrowed desktop-side-rail.js and
 * its `.dk-*` classes; a rail of tabs IS the collapsed state now, so neither
 * appears on this page any more and nothing here depends on the doctor's
 * frame at all.
 */

/* THE HOST, and its absence is the whole of "the panels should stretch near
 * the full height of the screen". `.fd-desk` below asks for `height: 100%`,
 * and 100% of an AUTO-HEIGHT parent is auto -- so every corner shrank to its
 * own content and a busy waiting room scrolled inside a 200px box with the
 * screen half empty beneath it. `#fd-board` carried no rule at all.
 *
 * This is the one line fdframe.js's own header says it cannot write for
 * itself -- "giving `host` a definite height inside a full-height flex
 * column ... is the integrator's" -- and it was never written. `body` is
 * already `display: flex; flex-direction: column` at full height
 * (app.css:50-61), so the host only has to claim the rest of it.
 * `min-height: 0` is what lets it SHRINK below its content, which is what
 * makes the corners' own `overflow: auto` bite instead of the page growing. */
.fd-deskhost {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.fd-deskhost[hidden] { display: none; }

.fd-desk {
  --fd-rail-w: 52px;
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; height: 100%; overflow: hidden;
  font-family: var(--display); color: var(--ink);
}

/* ── the header: S-EMR, the user, the clinic, the e-mail, the clock ──────── */
.fd-hdr {
  flex: 0 0 auto;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hush);
}
.fd-brand {
  font-family: var(--mono); font-weight: 700; font-size: 18px;
  letter-spacing: .04em; color: var(--teal);
}
.fd-hdr-seg { font-size: 12.5px; color: var(--ink-2); }
.fd-hdr-loc { color: var(--ink); }
/* THE DESK'S CHECK-IN PILL (2 October): the doctor's CHECKED IN pill, on
   the desk's header. A button, so it is reachable by keyboard; drawn as a
   pill, so it reads as the place it is and not as a call to action. */
button.fd-hdr-loc {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 12.5px; letter-spacing: .04em;
  padding: 4px 10px; min-height: 32px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--sunk); color: var(--ink);
}
button.fd-hdr-loc:hover, button.fd-hdr-loc:focus-visible { border-color: var(--teal); }
.fd-hdr-pk { color: var(--dim); }
.fd-hdr-clock { margin-left: auto; font-size: 12px; color: var(--dim); white-space: nowrap; }
/* Refresh and Sign out, handed in by the page. `--tap` is this stylesheet's
   own minimum target: a counter is used standing up, often with one hand. */
.fd-hdr-act {
  font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--hush); background: transparent; color: var(--ink-2);
  cursor: pointer; min-height: var(--tap);
}
.fd-hdr-act:hover { border-color: var(--teal-2); color: var(--ink); }
.fd-hdr-act:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* A present-dimmed-named fact: never invented, never silently dropped.
 * `--amber` is this stylesheet's own warning/notice tone (used the same
 * way by `home.js`'s "IN TELEGRAM" tag, app.css:1070), reused for the same
 * meaning rather than a colour of this fragment's own invention. */
.fd-away { opacity: .62; }
.fd-tag {
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber); margin-left: 6px;
}

/* ── the body: left strip, left panel, the centre, right panel, right strip
 *    (Dr Lau, 2 October: "a slim strip of labelled tabs down each edge.
 *    Tapping a tab slides its panel open beside the strip ... The calendar
 *    in the middle gets the space back when panels are closed.") A flex
 *    row, so a closed panel (`[hidden]`) simply takes no width and the
 *    centre's `flex: 1 1 0` has all of it. */
.fd-body {
  flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden;
  display: flex; flex-direction: row; align-items: stretch; gap: 10px;
  padding: 10px 12px;
  position: relative;
}
.fd-centre {
  flex: 1 1 0;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0; min-width: 0; overflow: hidden;
}
/* WHAT THE CENTRE HOLDS, and neither class had a rule until now -- because
 * until now nothing ever painted into the centre at all (see fdframe.js's
 * own note). The acts row keeps its height; the schedule takes the rest and
 * scrolls inside itself, so a twelve-hour week never pushes the footer off
 * the bottom of the screen. */
.fd-centre-acts {
  flex: 0 0 auto; min-height: 0;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel); padding: 10px 12px;
}
.fd-centre-grid {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel); padding: 10px 12px;
}

/* ── a rail: the strip of tabs down one edge ─────────────────────────────
 * Read sideways, the way a book's spine is: the left strip from the bottom
 * up, the right one from the top down, so each reads toward the board.
 * Every tab is at least --tap both ways -- a counter is used standing up. */
.fd-rail {
  flex: 0 0 var(--fd-rail-w);
  display: flex; flex-direction: column; gap: 6px;
  min-height: 0; overflow-y: auto; overflow-x: hidden;
}
.fd-rail-tab {
  font: inherit; font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  writing-mode: vertical-rl;
  min-width: var(--tap); min-height: var(--tap); padding: 14px 8px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel); color: var(--ink-2); cursor: pointer;
}
.fd-rail-left .fd-rail-tab { transform: rotate(180deg); }
.fd-rail-tab:hover { border-color: var(--teal-2); color: var(--ink); }
.fd-rail-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* OPEN IS SAID TWICE: the colour, and the tab joined to its panel by the
   sunk ground they share -- never colour alone. */
.fd-rail-tab.is-open {
  border-color: var(--teal); color: var(--teal); background: var(--sunk);
}
.fd-rail-label { white-space: nowrap; }
.fd-rail-badge {
  font-size: 11px; letter-spacing: 0; color: var(--amber);
  writing-mode: horizontal-tb;
}

/* ── a side panel: the open tab's own screen, as wide as the desk dragged
 *    it (the width is set on the element; these are its bounds) ────────── */
.fd-side {
  position: relative;
  flex: 0 0 auto; min-width: 280px; max-width: 60%;
  display: flex; flex-direction: column; min-height: 0; overflow: visible;
  padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel);
}
.fd-side-h {
  display: flex; align-items: center; gap: 8px; padding-bottom: 6px;
  margin-bottom: 6px; border-bottom: 1px solid var(--hush);
}
.fd-side-t {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal);
}
.fd-side-body {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.fd-away-block { font-size: 11.5px; color: var(--dim); opacity: .74; line-height: 1.5; }
.fd-side-empty { opacity: .84; }

/* THE GRIP, on the panel's inner edge and centred on the gap between the
 * panel and the board, so it never covers a panel's own scrollbar. Wide
 * enough to find with a finger; drawn as a line only when it is found. */
.fd-side-grip {
  position: absolute; top: 0; bottom: 0; width: 14px;
  cursor: col-resize; touch-action: none; z-index: 2;
}
.fd-side-left .fd-side-grip { right: -12px; }
.fd-side-right .fd-side-grip { left: -12px; }
.fd-side-grip::after {
  content: ""; position: absolute; top: 12px; bottom: 12px; left: 6px;
  width: 2px; border-radius: 2px; background: transparent;
}
.fd-side-grip:hover::after,
.fd-side-grip.is-dragging::after,
.fd-side-grip:focus-visible::after { background: var(--teal); }
.fd-side-grip:focus-visible { outline: none; }

/* ── what the Enquiries panel holds: three parts, each its own screen ── */
.fd-side-note {
  margin: 0 0 8px; font-size: 11.5px; color: var(--dim); font-style: italic;
}
.fd-side-sec { padding: 8px 0 10px; border-top: 1px solid var(--hush); }
.fd-side-sec:first-of-type { border-top: 0; padding-top: 0; }
.fd-side-sec-h {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 6px;
}
.fd-side-owed { margin-top: 10px; }

/* ── the footer: provider / vendor / hospital contacts, Setting ─────────── */
.fd-ftr {
  flex: 0 0 auto; padding: 8px 14px; border-top: 1px solid var(--hush);
}
.fd-ftr-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.fd-ftr-cell { position: relative; display: flex; flex-direction: column; gap: 2px; }
.fd-ftr-item {
  font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  cursor: pointer; display: inline-flex; align-items: center; white-space: nowrap;
}
.fd-ftr-item:hover { border-color: var(--teal-2); color: var(--teal-2); }
.fd-ftr-item:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.fd-away.fd-ftr-item { color: var(--dim); }
.fd-away.fd-ftr-item:hover { border-color: var(--teal-2); }
.fd-ftr-detail {
  font-size: 11px; color: var(--dim); line-height: 1.4; max-width: 260px;
  margin-top: 2px;
}

/* the Setting sheet: user's info, system's info -- never `/api/settings`,
 * which a scheduler may not reach (roles.py:57). Opens upward from the
 * footer, because the footer sits at the foot of the page. */
.fd-setting-sheet {
  position: absolute; bottom: 100%; right: 0; margin-bottom: 8px;
  width: min(320px, 90vw); padding: 12px 14px; border-radius: var(--r-l);
  border: 1px solid var(--rule); background: var(--panel); box-shadow: var(--z2);
  z-index: 5;
}
.fd-set-h {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); margin: 10px 0 6px;
}
.fd-set-h:first-child { margin-top: 0; }
.fd-set-row {
  display: flex; justify-content: space-between; gap: 10px; padding: 4px 0;
  font-size: 12px;
}
.fd-set-k { color: var(--dim); }
.fd-set-v { color: var(--ink); text-align: right; }
.fd-set-v.fd-away { color: var(--dimmer); font-style: italic; opacity: .9; }

/* ── phone width: this frame is desktop-only. The integrator's page picks
 *    it by width the way app.js picks the doctor's (DESK_MIN, 1100px); this
 *    rule is a second line of defence, not the switch itself. */
@media (max-width: 1099px) {
  .fd-desk { display: none; }
}
/* ==== fd_frame END — the front desk's desktop frame (LE-50 Parcel A) ==== */
/* ==== fd_frame END ==== */

/* ==== fd_sched BEGIN (LE-50) ==== */
/* ── fd_sched.css — the front desk's central schedule (LE-50, Parcel B) ────
   A FRAGMENT, NOT A SECOND STYLESHEET. `app/app.css` is one of the eight
   files the integrator alone touches; this text is folded into it (or into
   the desk's own inline stylesheet in app/frontdesk/index.html — the
   integrator's call, per the letter) under a marker.

   THIS IS A NEW BLOCK, NOTHING IS APPENDED INTO ANOTHER FRAGMENT'S SLICE.
   Every class below is new (`fd-sc-` prefix, chosen so it cannot collide
   with app/frontdesk.js's existing `fd-*` classes, week.js's `wk-*`, or
   day.js's `dy-*`), so there is no existing rule block to extend and
   nothing here restyles a class another screen already owns. LE-48's own
   lesson is why this matters: a marker-to-EOF fragment reader swallows
   whatever is appended after the last marker into the PREVIOUS parcel's
   slice — so this is written to be folded as its OWN marker-bounded block,
   not tacked onto end-of-file where some other fragment's reader ends.

   EVERY TOKEN BELOW IS ONE app/app.css:6-45 DEFINES — none is invented,
   and none is a literal hex or rgba of this file's own choosing. The colour
   mapping follows two screens that already ship rather than picking afresh:
   app/day.js's own .dy-away is var(--amber) and its .dy-call is
   var(--teal-2), so a day's leave and on-call marks use those same two
   tokens here. app/week.js draws surgery apart from an ordinary
   appointment in its own hand-picked (non-token) colour; the DISTINCTION
   is kept, in var(--amber) rather than an invented rgba. var(--map-numb),
   the palette's one blue, stands in for a public holiday, which has no
   token of its own — the same trade this project already makes rather
   than adding a tenth colour for one use. var(--red) is the alert token,
   for a default and for the on-call/leave clash. Muted tones
   (var(--dimmer)/var(--faint)) mark an absence: a cancelled slot, and the
   two rows this door cannot fill (tasks to be done, front-desk leave).

   THE GRID USES minmax(0, 1fr) COLUMNS, NOT A BARE 1fr — the desktop
   mock-up history in this project (10 September) found `1fr` columns
   cannot shrink below a nowrap name and scroll the page sideways in a
   narrower carousel; `min-width: 0` on the cells is the fix that was
   found there, copied here rather than rediscovered. */

.fd-sc-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.fd-sc-bar .is-on { color: var(--teal); border-color: var(--line); }
.fd-sc-sum { font-size: 11.5px; color: var(--dim); margin: 4px 0 2px; }
.fd-sc-why { font-size: 11px; color: var(--dimmer); margin-bottom: 4px; }
.fd-sc-none { font-size: 12px; color: var(--dim); padding: 8px 0; }

/* THE TWO ROWS THIS DOOR CANNOT FILL, drawn once and named rather than
   invented or silently dropped — see app/fdsched.js's own doc comment for
   what was measured. Muted, not alarmed: this is an honest gap, not a
   fault the clinic needs to act on today. */
.fd-sc-gaps { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.fd-sc-gap { font-size: 11px; color: var(--faint); font-style: italic; }

/* ── the half-hour grid (day / week scope, spelled out) ─────────────────── */
.fd-sc-grid { display: grid; gap: 1px; background: var(--hush);
              border-radius: var(--r); overflow: hidden; }
.fd-sc-corner, .fd-sc-dh, .fd-sc-rh, .fd-sc-cell, .fd-sc-band { background: var(--panel); }
.fd-sc-dh { padding: 6px 4px; text-align: center; min-width: 0; }
.fd-sc-dh.is-today { background: rgba(79, 214, 200, 0.1); }
.fd-sc-dh-d { display: block; font-size: 11px; color: var(--dim); }
.fd-sc-dh-n { display: block; font-size: 13px; font-weight: 600; }
.fd-sc-rh { padding: 4px 6px; font-size: 10.5px; color: var(--dimmer);
            display: flex; align-items: center; }
.fd-sc-rh.fd-sc-edge { color: var(--amber-ink); }
.fd-sc-cell { min-height: 26px; padding: 2px; display: flex; flex-direction: column;
              gap: 2px; min-width: 0; }
.fd-sc-cell.is-ph { background: rgba(90, 162, 255, 0.07); }
.fd-sc-cell.is-leave { background: rgba(224, 164, 74, 0.07); }

.fd-sc-band { min-height: 20px; padding: 3px; display: flex; flex-wrap: wrap;
              gap: 3px; align-items: flex-start; min-width: 0; }
.fd-sc-chip { font-size: 10px; padding: 1px 5px; border-radius: 999px; line-height: 1.5; }

.fd-sc-e { min-height: 26px; font-size: 11px; padding: 2px 4px; border-radius: 4px;
           border-left: 3px solid transparent; display: flex; align-items: center;
           gap: 3px; flex-wrap: wrap; min-width: 0; }
.fd-sc-e-i { flex: 0 0 auto; }
.fd-sc-e-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-sc-e-w { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-sc-e-clip { color: var(--dimmer); font-size: 10px; }
/* The desk folder's 🛎 on a calendar row (4 October) -- the board's own
   .dfc-bell, shrunk to the row's height and pushed to its right edge so the
   name keeps the room. */
.fd-sc-e .dfc-bell { min-width: 24px; min-height: 22px; padding: 0 3px; margin-left: auto;
                     font-size: 12px; line-height: 1; flex: 0 0 auto; }

/* colour is never the only cue: every one of these also carries a word or
   a strike, from app/fdsched.js's own markup. */
.fd-sc-appt { background: rgba(79, 214, 200, 0.12); border-left-color: var(--teal); }
.fd-sc-surg { background: rgba(224, 164, 74, 0.14); border-left-color: var(--amber); }
.fd-sc-miss { background: rgba(224, 90, 74, 0.12); border-left-color: var(--red); color: var(--red-ink); }
.fd-sc-miss .fd-sc-e-n { text-decoration: line-through; }
.fd-sc-cancel { background: rgba(150, 150, 150, 0.1); border-left-color: var(--rule); }
.fd-sc-cancel .fd-sc-e-n { text-decoration: line-through; color: var(--dim); }
.fd-sc-leave { color: var(--amber); }
/* THE DESK'S LEAVE IS NOT THE DOCTOR'S, AND THE COLOUR SAYS SO. Amber
   above means the clinic is SHUT that day (a doctor's leave closes it,
   all the way out to the public appointment bot). The desk being
   short-handed is a fact and not a warning -- the clinic is open and
   patients are still booked -- so it takes the neutral family rather
   than a second alarm colour. It was var(--faint) while the row was
   untracked, which is this stylesheet's mark for an absence; it carries
   data now, so it reads as present. The chip names the person, so the
   colour is never the only cue. */
.fd-sc-staffleave { color: var(--dim); }
.fd-sc-ph { color: var(--map-numb); }
.fd-sc-call { color: var(--teal-2); }
.fd-sc-clash { color: var(--red-ink); font-weight: 600; }
/* the band's own chips get a tinted pill; the same modifier classes are
   reused bare (no .fd-sc-chip) as small marks in the counts view below,
   which is why each is colour-only rather than owning its own background. */
.fd-sc-chip.fd-sc-leave { background: rgba(224, 164, 74, 0.16); }
.fd-sc-chip.fd-sc-staffleave { background: rgba(150, 150, 150, 0.14); }
.fd-sc-chip.fd-sc-ph { background: rgba(90, 162, 255, 0.16); }
.fd-sc-chip.fd-sc-call { background: rgba(127, 196, 189, 0.16); }
.fd-sc-chip.fd-sc-clash { background: rgba(224, 90, 74, 0.18); }

/* WHAT HAS TO BE DONE THAT DAY. Its own tone, distinct from the doctor's
   leave and from on-call, because the band now carries five different kinds
   of fact and a receptionist reads it at a glance; an overdue job is marked
   by WEIGHT as well as colour, since a tint alone is the one cue a
   colour-blind reader cannot take. */
.fd-sc-task { color: var(--ink); }
.fd-sc-chip.fd-sc-task { background: rgba(127, 196, 189, 0.10);
                         border: 1px solid var(--hush); }
.fd-sc-chip.fd-sc-task-late { border-color: var(--red-ink); font-weight: 650; }

.fd-sc-more { font-size: 10.5px; color: var(--amber-ink); }

/* ── the legend ───────────────────────────────────────────────────────── */
.fd-sc-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.fd-sc-lg { display: inline-flex; gap: 5px; align-items: center; }
.fd-sc-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block;
            background: var(--panel-2); border: 1px solid var(--rule); }
.fd-sc-sw.fd-sc-appt { background: var(--teal); border-color: var(--teal); }
.fd-sc-sw.fd-sc-surg { background: var(--amber); border-color: var(--amber); }
.fd-sc-sw.fd-sc-miss { background: var(--red); border-color: var(--red); }
.fd-sc-sw.fd-sc-cancel { border: 1px solid var(--dimmer); }
.fd-sc-sw.fd-sc-leave { background: var(--amber); border-color: var(--amber); }
.fd-sc-sw.fd-sc-staffleave { background: var(--dimmer); border-color: var(--dim); }
.fd-sc-sw.fd-sc-ph { background: var(--map-numb); border-color: var(--map-numb); }
.fd-sc-sw.fd-sc-call { background: var(--teal-2); border-color: var(--teal-2); }
.fd-sc-sw.fd-sc-clash { background: var(--red-ink); border-color: var(--red-ink); }
.fd-sc-lg-t { font-size: 10.5px; color: var(--dim); }

/* ── the desk's own leave roster (his ruling, 17 Sept) ─────────────── */
/* Every colour here is a token this file already defines. The rows are
   NEUTRAL, like the .fd-sc-staffleave chips they correspond to and unlike
   the doctor's amber: his leave shuts the clinic, this does not. */
.fd-dl { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.fd-dl-h { font-size: 11px; font-weight: 600; color: var(--dim);
           text-transform: uppercase; letter-spacing: 0.04em; }
.fd-dl-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.fd-dl-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.fd-dl-who { font-weight: 600; color: var(--ink); }
.fd-dl-when { color: var(--dim); flex: 1 1 auto; min-width: 0; }
.fd-dl-x { flex: 0 0 auto; padding: 2px 8px; font-size: 11px; }
.fd-dl-none { font-size: 12px; color: var(--faint); }
/* A line the roster could not read is shown in the alert token -- it is the
   one thing on this panel that needs doing something about. */
.fd-dl-bad { font-size: 11.5px; color: var(--red-ink); }
.fd-dl-note { font-size: 11.5px; color: var(--dim); margin-top: 6px; min-height: 1em; }
.fd-dl-note.is-bad { color: var(--red-ink); }
.fd-dl-add { display: flex; gap: 6px; margin-top: 8px; }
.fd-dl-in { flex: 1 1 auto; min-width: 0; padding: 6px 8px; font-size: 12px;
            border: 1px solid var(--line); border-radius: 6px;
            background: var(--panel-2); color: var(--ink); }
/* HOW FAR OFF A PERIOD STARTS, when the door says it is far off.
   NEUTRAL, not amber and not red. A fortnight booked a year out is a
   wedding, and a screen that cries error at one teaches whoever reads it
   to stop looking -- so it is the same grey the .wk-deskleave chip wears,
   with a stronger ink than the row around it. It states a fact and lets a
   wrong year be the thing that looks odd. Both halves are tokens, so the
   day/dark toggle carries it. */
.fd-dl-far { flex: 0 0 auto; font-size: 11px; color: var(--ink-2);
             background: rgba(140,140,140,.16); border-radius: 999px;
             padding: 1px 7px; white-space: nowrap; }
.fd-dl-row.is-far .fd-dl-when { color: var(--ink-2); }
/* THE DESK BOOKS, MOVES AND CANCELS (E14) -- the leave editor's shape, below
   it. `fd-bk-` was free (grepped). */
.fd-bk { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.fd-bk-h { font-size: 11px; font-weight: 600; color: var(--dim);
           text-transform: uppercase; letter-spacing: 0.04em; }
.fd-bk-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fd-bk-in { flex: 1 1 120px; min-width: 0; padding: 6px 8px; font-size: 12px;
            border: 1px solid var(--line); border-radius: 6px;
            background: var(--panel-2); color: var(--ink); }
.fd-bk-acts { display: flex; gap: 6px; margin-top: 8px; }
.fd-bk-note { font-size: 11.5px; color: var(--dim); margin-top: 6px; min-height: 1em; }
.fd-bk-note.is-bad { color: var(--red-ink); }
.fd-bk-note.is-ok { color: var(--ink); }

/* ── the counts view (month / year scope, or spelledOut === false) ──────── */
.fd-sc-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
                gap: 6px; }
.fd-sc-count-cell { border: 1px solid var(--line-soft); border-radius: var(--r);
                     background: var(--panel-2); padding: 6px 8px; min-width: 0; }
.fd-sc-count-cell.is-today { border-color: var(--teal); }
.fd-sc-count-d { display: block; font-size: 11px; color: var(--dim); }
.fd-sc-count-n { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.fd-sc-count-marks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.fd-sc-count-marks span { font-size: 9.5px; }

@media (max-width: 899px) { .fd-sc-e-w { display: none; } }
/* ==== fd_sched END ==== */

/* ==== fd_acts BEGIN (LE-50) ==== */
/* ── fd_acts.css — the three acts on top: Registration, Check-in, Check-out
   (LE-50, Parcel C) ───────────────────────────────────────────────────────
   A FRAGMENT, NOT A SECOND STYLESHEET. This is CSS text for the integrator
   to fold in, never a file this app links to on its own. It styles
   `app/fdacts.js`'s own markup and nothing else's.

   WHERE THIS BELONGS: the desk's own shell, alongside the `.fd-*` rules
   already in `app/frontdesk/index.html`'s <style> block (or wherever the
   desktop view's stylesheet ends up living) — not `app/app.css`, because
   none of this is a fact about the clinical console. `app/frontdesk/index.html`
   already says why that page carries its own layout block rather than
   reading app.css's component classes: "app.css carries the colours, the
   dark/day switch and the type scale" and the page draws its own shapes
   from them. This fragment follows the same rule.

   A NEW PREFIX ON PURPOSE. `.fd-*` is `app/frontdesk.js`'s own, for the
   narrow (phone/counter-strip) page. `.fda-*` ("front desk, acts") is
   this parcel's alone, so folding this fragment in is a pure append —
   nothing here can be shadowed by, or shadow, an existing `.fd-*` rule,
   and the two pages can carry both class families at once without either
   reading the other's styling. Parcel A's and Parcel B's own fragments
   are expected to pick their own prefixes for the same reason.

   TOKENS ONLY, NOTHING INVENTED. Every colour, radius and the minimum tap
   target below is one of app.css's own `var(--…)` custom properties, so
   this bar and its panels move with the dark/day toggle for free instead
   of being the one corner it does not reach. `--tap` (44px, "nothing
   tappable is smaller") sets the floor on every button here — this is a
   counter, worked on a touchscreen at a stand-up desk as often as a
   keyboard.

   THE SHAPE: `.fda-bar` is the three buttons; `.fda-body` holds at most
   one open `.fda-panel` at a time (registration, the imported check-in
   screen, or this parcel's own check-out picker), and is `hidden` when
   none is open, matching how every other collapsible surface in this app
   is toggled. `.fda-co-*` is the check-out picker's own — the one screen
   this parcel actually draws from scratch, because none exists anywhere
   else to import (see app/fdacts.js's own header comment). Nothing below
   sets a fixed height on the page itself; `.fda-co-list` scrolls inside
   its own box past a sensible cap, the same "a corner scrolls inside
   itself" rule Parcel A's frame follows, so this panel never depends on
   how much room the centre column happens to have. */

.fda-wrap { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

.fda-bar { display: flex; gap: 8px; flex-wrap: wrap; }

.fda-btn {
  font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
  padding: 0 16px; min-height: var(--tap); border-radius: var(--r);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.fda-btn:hover { border-color: var(--teal-2); }
.fda-btn:disabled { opacity: .55; cursor: default; }
.fda-btn.is-active { border-color: var(--teal); color: var(--ink); background: var(--hush); }
.fda-btn-primary { border-color: var(--teal); }
.fda-link {
  font: inherit; font-size: 12px; background: none; border: 0; padding: 4px 2px;
  color: var(--dim); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; min-height: var(--tap); min-width: var(--tap);
}
.fda-link:hover { color: var(--ink-2); }

.fda-body {
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--panel); padding: 12px 14px 14px; min-height: 0;
}
.fda-panel { min-height: 0; }

/* WHAT THE ACT MEANS -- his ruling of 18 September, one sentence per panel,
   above whatever the panel draws. Deliberately NOT `.fda-note`, which is a
   panel's live status line: one is a definition that never changes and the
   other is an answer to what just happened. */
.fda-means {
  font-size: 12px; color: var(--ink-2); margin: 0 0 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--hush);
}

.fda-note { font-size: 12px; color: var(--dim); margin: 6px 0; }
.fda-note.fda-warn { color: var(--red-ink); }
.fda-note.fda-ok { color: var(--teal-2); }

/* --- the check-out picker, this parcel's own ---------------------------- */
.fda-co { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.fda-co-head { display: flex; align-items: baseline; gap: 10px; }
.fda-co-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--ink-2); opacity: .9;
}

.fda-co-list {
  list-style: none; margin: 2px 0 0; padding: 0;
  max-height: min(48vh, 420px); overflow-y: auto;
}
.fda-co-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 2px; border-top: 1px solid var(--line-soft);
}
.fda-co-row:first-child { border-top: 0; }
.fda-co-main { flex: 1 1 auto; min-width: 0; }
.fda-co-who { font-weight: 650; color: var(--ink); }
.fda-co-sub { font-size: 12px; color: var(--dim); margin-top: 2px; }

/* THE LAMP IS THE ROOM'S OWN ANSWER, colour never its only cue -- the red
   ring differs in shape as well as hue from the green fill, matching
   frontdesk.js's own #fd-lamp rule and for the same reason: a colour-blind
   receptionist reads the ring, not the hue. */
.fda-lamp {
  width: 12px; height: 12px; border-radius: 50%; margin-top: 5px;
  flex: 0 0 auto; border: 2px solid var(--line);
}
.fda-lamp-green { background: var(--teal); border-color: var(--teal); }
/* THE ONE DELIBERATE EXCEPTION TO "TOKENS ONLY": a low-alpha decorative
   ring with no text sitting on it is not a contrast question the way a
   background or a border is -- fb_checkin.css's own words for the same
   exception on the same kind of mark. It is --red's own dark-theme RGB
   (#e05a4a) at low alpha; app/frontdesk/index.html's #fd-lamp-red carries
   the identical, equally untranslated shadow for its own red, so this
   ring keeps the fixed tint that page's lamp already has rather than
   drifting from it under the day theme -- a difference to raise with the
   integrator if day-theme parity for this one ring matters more than
   matching the narrow page's own lamp. */
.fda-lamp-red { background: var(--red); border-color: var(--red);
                box-shadow: 0 0 0 2px rgba(224,90,74,.22); }
.fda-lamp-none { background: transparent; }

/* --- the counter: a bill under a Check-out row, a payment, the takings ----
   (30 September 2026 -- "allow receptionist to see and deal with payment").
   app/fdacts.js's own markup and nothing else's.

   THE TYPE IS IN rem, NOT px, ON PURPOSE. tools/desktop_type_scale.py writes a
   desktop override for EVERY px font-size in this stylesheet, and
   verify_desktop_type_scale goes red until the generated block is written
   again -- a second edit, away from this section, for text that already
   reads at the desktop's floor. So nothing below declares a px size: body text
   is 14px (.875rem), the quieter lines 13.4px (.84rem, over the 13.3px floor
   his ten-point ruling sets) and the small capitals heads 12px (.75rem, a
   kicker's own floor is 11). The type follows the page's root size, which is
   what a person who has enlarged their browser's text asked for.

   TOKENS ONLY, and every edge is --line, --line-soft or --rule -- never
   --faint, which is a text ink and is held to the contrast a border is not.
   Every control is at least --tap tall: this is a counter, worked on a
   touchscreen as often as a keyboard.

   PHONE WIDTH FIRST. Everything wraps -- a row's two buttons drop beneath
   its name, a line's amount beneath its label -- and nothing has a fixed
   width, so the bill reads at 320px with no sideways scroll. `min-width: 0`
   on the flex children and `overflow-wrap: anywhere` are what let a long
   label or a payer's long name shrink instead of pushing the box wider. */

/* The row now carries a second button and a box beneath it. */
.fda-co-row { flex-wrap: wrap; }
.fda-co-acts { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
/* A BILL OPEN UNDER A ROW GETS MORE ROOM -- BUT NEVER MORE THAN THE CENTRE
   COLUMN HAS. Measured in a browser at 900px tall: the frame's centre clips
   its overflow, and its acts block does not shrink (`flex: 0 0 auto`), so a
   panel taller than the column is cut off at the bottom with no way to scroll
   to the rest -- an open bill's payment form and its read-back simply went
   out of reach. So the list's own cap (which keeps a long roster inside its
   corner) is raised while a bill is open to the viewport less the desk's own
   chrome -- about 340px measured (the header, the footer, the bar and this
   panel's head), 380 allowed so a header that wraps on a narrow desk still
   fits -- and the list scrolls inside itself beyond that. Where :has() is not
   known the list keeps its ordinary cap and the bill scrolls inside it: a
   worse read, not a broken one. */
.fda-co-list:has(.fda-bill:not([hidden])) { max-height: max(300px, calc(100vh - 380px)); }
/* THE TAKINGS SCROLL INSIDE THEMSELVES for the same reason -- a busy day is
   dozens of receipts -- and the day's controls above stay where they are. */
.fda-tk-body { max-height: max(240px, calc(100vh - 460px)); overflow-y: auto; }

.fda-bill {
  flex: 0 0 100%; min-width: 0; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel-2); color: var(--ink);
  font-size: .875rem; line-height: 1.4;
}
.fda-bill-status { margin: 4px 0; color: var(--dim); }
.fda-bill-warn { color: var(--red-ink); }
.fda-bill-hint { margin: 4px 0 0; color: var(--dim); font-size: .84rem; }
/* WHY NO GST IS ON THE BILL is a standing fact about the practice, said to
   staff -- a rule at its left marks it as that, not as a warning about
   this patient. */
.fda-bill-gstnote { border-left: 2px solid var(--line); padding-left: 9px; }

.fda-bill-visit { margin-bottom: 4px; color: var(--ink-2); overflow-wrap: anywhere; }
.fda-bill-t { color: var(--dim); }
.fda-bill-ref { color: var(--dim); }

/* A small-capitals head over a group -- the hospital's lines, the cancelled
   payments, the takings' lists. */
.fda-bill-h {
  margin: 10px 0 2px; font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--label);
}

.fda-bill-lines { margin-top: 2px; }
.fda-bill-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 5px 0; border-top: 1px solid var(--line-soft);
}
.fda-bill-line:first-child { border-top: 0; }
.fda-bill-l { flex: 1 1 9rem; min-width: 0; overflow-wrap: anywhere; }
.fda-bill-a { flex: 0 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.fda-bill-to { color: var(--dim); }
/* A LINE STRUCK, NOT HIDDEN: the label and the amount are crossed out and
   the reason sits beneath them, whole, so a bill already sent can still be
   reconciled against this one. */
.fda-bill-line.is-void .fda-bill-l,
.fda-bill-line.is-void .fda-bill-a { text-decoration: line-through; color: var(--dim); }
.fda-bill-vr { flex: 1 0 100%; color: var(--dim); font-size: .84rem; }
/* What is billed to the hospital is shown and is not the desk's to collect,
   so it reads one step quieter than what is. */
.fda-bill-lines-hosp { color: var(--dim); }

.fda-bill-sums { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.fda-bill-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.fda-bill-k { color: var(--dim); }
.fda-bill-v { font-variant-numeric: tabular-nums; }
.fda-bill-sum.is-total .fda-bill-k { color: var(--ink); font-weight: 650; }
.fda-bill-sum.is-total .fda-bill-v { font-size: 1.15em; font-weight: 700; }
/* A LINE NOBODY HAS PRICED holds the payment back, so it is the one thing on
   the bill drawn in the caution tone -- the same amber the doctor's own bill
   gives "not in the total". */
.fda-bill-unpriced { margin: 8px 0 0; color: var(--amber); }

.fda-bill-pay { margin-top: 10px; }
.fda-bill-paidwrap { padding: 8px 10px; border: 1px solid var(--teal); border-radius: var(--r); }
.fda-bill-paid { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.fda-bill-when { margin-left: 4px; color: var(--dim); font-weight: 400; }
.fda-bill-claim { margin-top: 4px; color: var(--ink-2); overflow-wrap: anywhere; }
.fda-bill-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fda-bill-formhost { margin-top: 8px; }

.fda-bill-form {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel);
}
.fda-bill-payor { color: var(--ink-2); font-weight: 650; }
.fda-bill-field { display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
.fda-bill-fk { color: var(--dim); font-size: .84rem; }
.fda-bill-in {
  font: inherit; box-sizing: border-box; width: 100%; min-height: var(--tap);
  padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--sunk); color: var(--ink);
}
.fda-bill-in:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.fda-bill-in:disabled { opacity: .6; }

/* THE READ-BACK, on the panel and in the door's own words: what stands now,
   and what confirming would make of it, ruled in the teal of the one action
   that follows. */
.fda-bill-rb {
  align-self: stretch; padding: 10px 12px; border: 1px solid var(--teal);
  border-radius: var(--r); background: var(--panel-2);
}
.fda-bill-rb-line { margin: 2px 0; overflow-wrap: anywhere; }
.fda-bill-rb-line b { margin-right: 4px; color: var(--teal-2); }
.fda-bill-rb-note { margin-top: 4px; color: var(--dim); font-size: .84rem; }

/* A CANCELLED PAYMENT IS KEPT AND DRAWN MUTED -- present, dated, its reason
   beside it and its receipt one tap away, but a step back from the one that
   stands. */
.fda-bill-oldwrap { margin-top: 10px; }
.fda-bill-old {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 4px 0; border-top: 1px solid var(--line-soft); color: var(--dim);
}
.fda-bill-oldtxt { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }

/* --- the takings view, in the Check-out panel ---------------------------- */
.fda-tk { display: flex; flex-direction: column; gap: 6px; font-size: .875rem; line-height: 1.4; }
.fda-tk-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fda-tk-day { flex: 1 1 auto; text-align: center; font-weight: 650; }
.fda-tk-status { margin: 0; color: var(--dim); }
.fda-tk-sums { padding: 8px 0; border-top: 1px solid var(--line); }
.fda-tk-count { margin: 2px 0 6px; color: var(--dim); font-size: .84rem; }
.fda-tk-list { list-style: none; margin: 0; padding: 0; }
.fda-tk-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 6px 0; border-top: 1px solid var(--line-soft);
}
.fda-tk-row:first-child { border-top: 0; }
.fda-tk-no { font-weight: 650; }
.fda-tk-who { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.fda-tk-when, .fda-tk-how { color: var(--dim); }
.fda-tk-amt { margin-left: auto; font-variant-numeric: tabular-nums; }
.fda-tk-sub { flex: 1 0 100%; color: var(--dim); font-size: .84rem; overflow-wrap: anywhere; }
.fda-tk-row.is-cancelled { color: var(--dim); }
.fda-tk-row.is-cancelled .fda-tk-amt { text-decoration: line-through; }
.fda-tk-none { margin: 8px 0 0; color: var(--dim); }

/* --- the Payment act (2 October 2026) ------------------------------------
   Dr Lau: "(a) a permanent Payment button on the desk bar". Its panel is
   three sections -- to collect, paid today, left today without a payment --
   each a small-capitals head (.fda-bill-h) over the same rows the Check-out
   panel and the takings already draw, so almost nothing here is new. The
   same rules as the counter's: rem type, tokens only, everything wraps.

   THE PANEL SCROLLS AS ONE, inside the centre column's room, for the reason
   the check-out list's cap gives: a column that clips its overflow cuts off
   whatever is taller than it, and three lists on a busy day are. */
.fda-pay-body { max-height: max(300px, calc(100vh - 380px)); overflow-y: auto; }
.fda-pay-sec { margin-top: 2px; font-size: .875rem; line-height: 1.4; }
.fda-pay-sec .fda-co-list { max-height: none; overflow: visible; }
.fda-pay-status { margin: 4px 0; color: var(--dim); }
/* HOW A VISIT LEFT UNPAID IS SETTLED -- the door's own sentence, a standing
   fact about every row under it, so it is ruled at its left like the GST
   note rather than coloured as a warning. */
.fda-pay-settle {
  margin: 6px 0 0; padding-left: 9px; border-left: 2px solid var(--line);
  color: var(--ink-2); font-size: .84rem; overflow-wrap: anywhere;
}
/* A ROW THAT CANNOT BE PAID HERE carries no button, and reads quieter than
   one that can. */
.fda-pay-left .fda-co-who { color: var(--ink-2); }
/* CHECK-OUT'S ONE QUESTION, on the row it is about: "Not paid yet -- check
   out anyway?" A full-width line under the buttons, so it wraps at phone
   width and is never pushed beside a name. */
.fda-co-ask { flex: 0 0 100%; margin: 6px 0 0; font-size: .84rem; overflow-wrap: anywhere; }
/* ==== fd_acts END ==== */

/* ==== fd_left BEGIN (LE-50) ==== */
/* ── the front desk's left corners (LE-50, Parcel D) — the waiting room and
   what patients have sent in ─────────────────────────────────────────────
   Every base class here (.fd-row, .fd-who, .fd-sub, .fd-btn, .fd-primary,
   .fd-readback, .fd-readback-line, .fd-ok, .fd-warnline, .fd-note,
   .fd-hint, .fd-input, .fd-h2, .fd-list, .fd-row-quiet) is already defined
   in app/frontdesk/index.html's own <style> block, because this corner
   renders on the SAME page as the stacked view (LE-50 §2: one URL, two
   widths). What follows is only the classes this parcel's two files
   introduce that the shared block does not carry -- values off the
   clinic's own tokens (app.css's :root), nothing invented. */

/* Left lower's one honest line: "this clinic does not scan files for
   viruses or read their text automatically" -- said once, quietly, rather
   than a badge on every row implying a check that never ran
   (console_deskdocs.py's own docstring: "draw nothing that implies a file
   has been scanned"). A left rule marks it as a standing fact about the
   screen, not a warning about any one file. */
.fd-doc-hint {
  border-left: 2px solid var(--line);
  padding-left: 9px;
  margin: 0 0 10px;
}

/* Spacing under the hint, above the Waiting/Filed/Withdrawn sections --
   nothing else about the corner's own layout, which is the frame's
   (LE-50, Parcel A). */
.fd-doc-body { margin-top: 2px; }

/* The one write this screen offers, under a held-and-unnamed row: the
   input-and-button row (.fd-form, already defined) plus the read-back
   that follows it (.fd-readback, already defined) -- this wrapper only
   spaces the two apart from the row above. */
.fd-doc-name { margin-top: 8px; }

/* A patient reference reads as a code, not a sentence, and this corner is
   narrower than the stacked page's 860px card -- 220px (.fd-input's own
   flex-basis) is too wide to sit beside a button in a quarter of a
   desktop screen. */
.fd-doc-input {
  flex: 1 1 140px;
  font-family: var(--mono);
  font-size: 12.5px;
}

/* TOMBSTONED, NEVER ERASED. A withdrawn document keeps its row; this is
   the one visual difference between it and a live one -- struck through,
   not hidden, not greyed to the point of unreadable. */
.fd-doc-struck {
  text-decoration: line-through;
  opacity: .78;
}

/* THE DESK FILES, CLASSIFIED (2 October, Dr Lau's ruling): "File it" opens
   the two steps -- the group, then the test -- under the row, as the
   approved design draws them: numbered kickers, choices that wrap, and the
   one picked marked by its fill as well as its edge. */
.fd-doc-file { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.fd-doc-step { letter-spacing: .06em; text-transform: uppercase; }
.fd-doc-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-doc-choice[aria-pressed="true"] {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--bg);
  font-weight: 700;
}
.fd-doc-chip { border-radius: 999px; }
.fd-doc-when { display: flex; align-items: center; gap: 8px; }
.fd-doc-file-open { margin-left: 8px; }
/* ==== fd_left END ====

/* ==== fd_right BEGIN (LE-50) ==== */
/* ── fd_right.css — the front desk's right corners (LE-50, Parcel E) ──────
   A FRAGMENT, NOT A SECOND STYLESHEET. `app/app.css` is one of the eight
   files the integrator alone touches; this text is folded into it (or into
   the desk's own inline stylesheet in app/frontdesk/index.html — the
   integrator's call, per the letter, the same choice Parcel B's own
   fd_sched.css leaves open) under a marker.

   THIS IS A NEW BLOCK, NOTHING IS APPENDED INTO ANOTHER FRAGMENT'S SLICE.
   Every class below is new (`fd-wk-` for the right-lower "desk's own work"
   screen, `fd-bot-` for the right-upper "what the bot has sent" screen —
   chosen so neither collides with app/frontdesk.js's existing `fd-*`
   classes, `fd-sc-` from Parcel B's central schedule, or whatever prefix
   Parcels A/C/D chose), so there is no existing rule block to extend and
   nothing here restyles a class another screen already owns. LE-48's own
   lesson is why this matters: a marker-to-EOF fragment reader swallows
   whatever is appended after the last marker into the PREVIOUS parcel's
   slice, so this is written to be folded as its own marker-bounded block,
   never tacked onto end-of-file where some other fragment's reader ends.

   EVERY TOKEN BELOW IS ONE app/app.css:6-45 DEFINES (measured against that
   exact range) — none is invented, and none is a literal hex or rgba of
   this file's own choosing. --red / --red-ink mark an overdue job and a
   refusal, the same pair the rest of this console uses for an alert;
   --teal marks the one primary action (settle); --dim / --dimmer / --faint
   step down for a count, a sub-line and an empty state, in the order the
   rest of the app already uses them. --line / --line-soft / --hush are the
   three border weights already in use elsewhere (app/requests.js's own
   inline styles, app/frontdesk/index.html's `.fd-card`), so a border here
   reads as the same weight of line as everything beside it.

   THE "GAP" SECTIONS (`.fd-wk-gap`) ARE DELIBERATELY QUIET. Dr Lau asked
   for jobs grouped by source and by type; neither field exists on a task
   today (console_deskwork.py's own docstring, "ON HIS SOURCES AND HIS
   TYPES"), so these two blocks are named, present and empty rather than
   populated with invented data — a dashed top border and the dimmest two
   tokens in the palette, so the eye reads them as "not live" without a
   second colour being invented for the purpose.

   THE BOT'S "NOT AVAILABLE" TAG USES --amber, NOT --red. It is not a
   refusal or a fault — there genuinely is no live chat room anywhere in
   this system to be unavailable FROM — so it is marked with the same
   caution tone the rest of this console reserves for "notable, not
   broken", never the alert colour a real error gets. */

/* ── fd-wk- : the desk's own work (right lower) ─────────────────────────── */
.fd-wk-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.fd-wk-title { font-weight: 700; font-size: 13px; }
.fd-wk-count { font-size: 11px; color: var(--dim); margin-left: auto; }
.fd-wk-none { color: var(--faint); font-size: 11.5px; }

.fd-wk-group { margin-bottom: 14px; }
.fd-wk-group-t {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim); margin-bottom: 6px;
}
.fd-wk-list { list-style: none; margin: 0; padding: 0; }
.fd-wk-task {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line-soft);
}
.fd-wk-task:first-child { border-top: 0; }
.fd-wk-task-main { flex: 1 1 auto; min-width: 0; }
.fd-wk-task-who { font-weight: 650; margin-right: 6px; }
.fd-wk-task-what { color: var(--ink-2); }
.fd-wk-task-sub { font-size: 10.5px; color: var(--dimmer); margin-top: 2px; }
/* colour is never the only cue -- an overdue row also gets a left rule, so
   it is readable without relying on the red/ink contrast alone. */
.fd-wk-overdue { border-left: 2px solid var(--red); padding-left: 8px; }
.fd-wk-overdue .fd-wk-task-sub { color: var(--red-ink); }
/* AN ORDER'S SPECIAL INSTRUCTION (2 Oct): amber, and SAID in words --
   "Special instruction:" leads the line, so colour is never the only cue. */
.fd-wk-instr { font-size: 12px; color: var(--amber-ink); margin-top: 3px;
  border-left: 2px solid var(--amber); padding-left: 6px; }
.fd-wk-instr-k { font-weight: 650; color: var(--amber); }

.fd-wk-btn {
  font: inherit; font-size: 12.5px; padding: 5px 10px; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--line); background: transparent;
  color: inherit; flex: 0 0 auto;
}
.fd-wk-btn:disabled { opacity: .55; cursor: default; }
/* An imaging job is ARRANGED: walk in, or pre-arrange with when and where. */
.fd-wk-arrange { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fd-wk-when { font: inherit; font-size: 12.5px; padding: 5px 7px; border-radius: 6px; min-width: 0;
  flex: 1 1 220px; border: 1px solid var(--rule); background: var(--sunk); color: var(--ink); }
.fd-wk-primary { border-color: var(--teal); color: var(--teal); font-weight: 650; }

.fd-wk-undo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line-soft);
}

.fd-wk-said { margin-top: 10px; font-size: 12px; }
.fd-wk-said.ok { color: var(--teal); }
.fd-wk-said.no { color: var(--red-ink); }

/* A JOB THAT WAITS ON SEVERAL PEOPLE (1 October, the desk task design).
   The lane headings, the state chip -- words first, colour second, so a
   late job reads as late without the red -- the step log and its two forms. */
.fd-wk-lane-t {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--label); margin: 14px 0 8px; padding-top: 8px; border-top: 1px solid var(--line);
}
.fd-wk-chip {
  display: inline-block; font-size: 11px; padding: 1px 7px; margin-left: 6px;
  border-radius: 999px; border: 1px solid var(--rule); color: var(--dim); white-space: nowrap;
}
.fd-wk-chip.late { border-color: var(--red); color: var(--red-ink); }
.fd-wk-chip.wait { border-color: var(--amber); color: var(--amber-ink); }
.fd-wk-chip.ok, .fd-wk-chip.desk { border-color: var(--teal); color: var(--teal); }
.fd-wk-steps { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--sunk); display: grid; gap: 10px; }
.fd-wk-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fd-wk-log-row { display: flex; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.fd-wk-log-when { flex: 0 0 74px; font-size: 11.5px; color: var(--dimmer); }
.fd-wk-log-did { min-width: 0; }
.fd-wk-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fd-wk-form[hidden] { display: none; }
.fd-wk-form-t { flex: 0 0 100%; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim); }
.fd-wk-sel, .fd-wk-date { font: inherit; font-size: 12.5px; padding: 5px 7px; border-radius: 6px;
  border: 1px solid var(--rule); background: var(--sunk); color: var(--ink); min-width: 0; }
.fd-wk-hint { flex: 0 0 100%; font-size: 12px; color: var(--amber-ink); }
.fd-wk-add { margin-bottom: 10px; display: grid; gap: 8px; }
/* BEFORE YOU CLOSE (1 October, part 4): from 17:00, at the top of the list.
   Boxed and amber-ruled so it reads as the day's summary, not one more job;
   each row keeps its words-first chip, so late reads as late without red. */
.fd-wk-de { margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: 8px; background: var(--sunk);
  display: grid; gap: 6px; }
.fd-wk-de-t { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--label); }
.fd-wk-de-line { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.fd-wk-de-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
  padding: 4px 2px; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.fd-wk-de-row:first-child { border-top: 0; }

/* THE OUTSTANDING SUMMARY (2 October, Dr Lau: "make it prominent"). The
   button's face carries what is due now; its state is said in words (the
   title) and in colour together. The pop-up is a plain dialog over a shade. */
.fd-sum-btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em;
  padding: 8px 14px; min-height: 44px; border-radius: 10px;
  border: 2px solid var(--teal); background: var(--sunk); color: var(--ink);
}
.fd-sum-btn[data-state="due"] { border-color: var(--amber); }
.fd-sum-btn[data-state="late"] { border-color: var(--red); }
.fd-sum-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.fd-sum-badge {
  min-width: 26px; height: 26px; padding: 0 7px; box-sizing: border-box;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; background: var(--teal); color: var(--bg);
}
.fd-sum-btn[data-state="due"] .fd-sum-badge { background: var(--amber); }
.fd-sum-btn[data-state="late"] .fd-sum-badge { background: var(--red-solid); color: #fff; }
.fd-sum-shade {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px;
}
.fd-sum-box {
  width: min(640px, 100%); max-height: 80vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 14px;
}
.fd-sum-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 8px; }
.fd-sum-title { margin: 0; font-size: 18px; flex: 1 1 auto; }
.fd-sum-x {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule);
  background: transparent; color: var(--ink-2); font-size: 18px; cursor: pointer;
}
.fd-sum-days { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 18px 12px; border-bottom: 1px solid var(--line); }
.fd-sum-days-t { font-size: 13px; color: var(--dim); }
.fd-sum-day {
  min-width: 40px; min-height: 40px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 14px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
}
.fd-sum-day[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: var(--bg); font-weight: 700; }
.fd-sum-body { overflow: auto; padding: 8px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.fd-sum-h { margin: 6px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--label); }
.fd-sum-h.is-late { color: var(--red-ink); }
.fd-sum-list { list-style: none; margin: 0; padding: 0; }
.fd-sum-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line-soft); }
.fd-sum-row:first-child { border-top: 0; }
.fd-sum-row.is-late { border-left: 2px solid var(--red); padding-left: 8px; }
.fd-sum-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fd-sum-who { font-size: 12.5px; color: var(--ink-2); }
.fd-sum-what { font-size: 14px; }
.fd-sum-sub { font-size: 12px; color: var(--dim); }
.fd-sum-late { font-size: 12px; color: var(--red-ink); white-space: nowrap; }
.fd-sum-none, .fd-sum-later { margin: 6px 0; font-size: 13px; color: var(--dim); }

/* the two honest gaps -- present, named, empty (see the header note) */
.fd-wk-gap { margin-top: 16px; padding-top: 10px; border-top: 1px dashed var(--line); }
.fd-wk-gap-t {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--dimmer); margin-bottom: 6px;
}
.fd-wk-gap-list { list-style: none; margin: 0; padding: 0; }
.fd-wk-gap-row {
  display: flex; justify-content: space-between; gap: 10px; padding: 3px 2px;
  font-size: 11.5px; color: var(--dim);
}
.fd-wk-tag {
  font-size: 9.5px; letter-spacing: .04em; color: var(--dimmer);
  border: 1px solid var(--hush); border-radius: 5px; padding: 1px 6px;
  white-space: nowrap; flex: 0 0 auto;
}

/* ── fd-bot- : what the bot has sent (right upper) ──────────────────────── */
.fd-bot-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.fd-bot-title { font-weight: 700; font-size: 13px; }

.fd-bot-dim {
  border: 1px dashed var(--line); border-radius: var(--r);
  padding: 10px 11px; margin-bottom: 14px; background: var(--panel-2);
}
.fd-bot-dim-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fd-bot-dim-t { font-weight: 650; color: var(--dim); }
/* amber, not red -- named in the file header: this is not a fault. */
.fd-bot-tag {
  font-size: 9.5px; letter-spacing: .04em; color: var(--amber-ink);
  border: 1px solid var(--amber); border-radius: 5px; padding: 1px 6px;
  white-space: nowrap;
}
.fd-bot-dim-note { font-size: 11.5px; color: var(--dimmer); margin: 0; line-height: 1.5; }
/* ==== fd_right END ==== */

/* ==== fd_chat BEGIN (LE-52, Parcel C) ====
   ABOVE the chat sections, for the reason the LE-50 block above says:
   verify_console_chatenc slices chatenc's fragment marker-to-EOF, so
   anything appended after the last chat marker is swallowed into it and
   judged by its purity rules. ==== */
/* ── fd_chat.css — the front desk's live chat room (LE-52, Parcel C) ─────
   A FRAGMENT, NOT A SECOND STYLESHEET. `app/app.css` is one of the eight
   files the integrator alone touches (LE-50/LE-52's own rule); this text
   is folded into it under its own marker.

   THIS IS A NEW BLOCK, NOTHING IS APPENDED INTO ANOTHER FRAGMENT'S SLICE.
   Every class below is new, under `fd-chat-` — chosen so it collides with
   none of `fd-wk-`/`fd-bot-` (fd_right.css, LE-50 Parcel E), `fd-sc-`
   (Parcel B's schedule), the bare `fd-*` classes `app/frontdesk.js` and
   `app/frontdesk/index.html` already own, or whatever prefix Parcels A/D
   of LE-52 chose for the store's doors and the folder's own screens. So
   there is no existing rule block to extend, and this is written to be
   folded as its own marker-bounded region rather than tacked onto
   end-of-file — LE-48/LE-49's own lesson, that a marker-to-EOF fragment
   reader swallows whatever is appended after the LAST marker into the
   PREVIOUS parcel's slice, applies here exactly as it did there.

   EVERY TOKEN BELOW IS ONE app/app.css:6-45 DEFINES (measured against
   that exact range) — none is invented, and none is a literal hex or
   rgba of this file's own choosing:

     --teal / --teal-2   the caller's own turns (a real person, given the
                          console's one "this matters" colour), and the
                          "collected" reply state (informative, not an
                          alert)
     --amber / --amber-ink  the "held, waiting" reply state — caution,
                          not fault, the same tone fd_right.css already
                          uses for "not available"
     --red-ink            a refusal or an unreadable door — this console's
                          one alert tone, used nowhere else in this file
     --dim / --dimmer / --faint  a count, a sub-line, an empty state, and
                          the bot's own (automated, lower-emphasis) turns
                          — the same step-down order every other screen in
                          this app already uses them in
     --hush / --line / --line-soft  the three border weights already in
                          use elsewhere (fd_right.css's own note: these are
                          the SAME three weights, not a fourth invented
                          here)
     --sunk                the one token meant for exactly this: "sunken
                          input/control ground" (app/app.css:26) — the
                          reply textarea's own background, so a place to
                          type reads as a control and not as another card
     --panel / --panel-2   row and card backgrounds, matching every other
                          list in this app
     --r                   the corner radius every card/control in this
                          console already uses

   COLOUR IS NEVER THE ONLY CUE, this estate's own standing rule
   (fd_right.css's own comment on `.fd-wk-overdue`, and CLAUDE.md's own
   "assert the property" family of lessons applied to design rather than
   to code). A caller's turn and the bot's turn are told apart by a text
   label ("Caller" / "Bot") AND a left border; "live" and "ended" are told
   apart by the tag's own WORD and by colour together; the held-reply and
   collected-reply states are two different SENTENCES, not two colours
   standing in for one. */

/* ── the shell --------------------------------------------------------- */
.fd-chat-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.fd-chat-title { font-weight: 700; font-size: 13px; }
.fd-chat-count { font-size: 11px; color: var(--dim); margin-left: auto; }

/* THE ONE HONEST LINE, SAID ONCE. Quiet on purpose -- it is context, not
   a warning, so it takes the dimmest legible tone rather than the alert
   or caution colours below. */
.fd-chat-honest {
  font-size: 11px; line-height: 1.5; color: var(--dim);
  margin: 0 0 12px; padding: 8px 10px;
  border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--panel-2);
}

.fd-chat-body { min-height: 0; }
.fd-chat-empty { color: var(--faint); font-size: 11.5px; }
.fd-chat-warn { color: var(--red-ink); font-size: 12px; }

/* ── the listing ---------------------------------------------------------- */
.fd-chat-list { list-style: none; margin: 0; padding: 0; }
.fd-chat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 2px; border-top: 1px solid var(--line-soft);
}
.fd-chat-row:first-child { border-top: 0; }
.fd-chat-row-main { flex: 1 1 auto; min-width: 0; }
.fd-chat-row-about { color: var(--ink-2); }
.fd-chat-row-sub {
  font-size: 10.5px; color: var(--dimmer); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* live vs ended — a word AND a colour, never the colour alone */
.fd-chat-tag {
  font-size: 9.5px; letter-spacing: .04em; border-radius: 5px;
  padding: 1px 6px; white-space: nowrap; flex: 0 0 auto;
}
.fd-chat-tag-open { color: var(--teal-2); border: 1px solid var(--teal); }
.fd-chat-tag-ended { color: var(--dimmer); border: 1px solid var(--hush); }
.fd-chat-tag-held { color: var(--amber-ink); border: 1px solid var(--amber); }
.fd-chat-held {
  margin-top: 10px; border-top: 1px solid var(--line-soft); padding-top: 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ── one open conversation -------------------------------------------- */
.fd-chat-back {
  display: block; background: transparent; border: 0; cursor: pointer;
  color: var(--dim); font: inherit; font-size: 12px; padding: 2px 0 10px;
}

.fd-chat-conv-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
}
.fd-chat-conv-about { color: var(--ink); font-weight: 600; }

.fd-chat-turns { list-style: none; margin: 0 0 12px; padding: 0; }
.fd-chat-turn {
  padding: 6px 0 6px 9px; margin-bottom: 4px;
  border-left: 2px solid var(--hush);
}
/* the caller is the one turn this desk exists to notice */
.fd-chat-turn-caller { border-left-color: var(--teal); }
.fd-chat-turn-bot { border-left-color: var(--hush); }
.fd-chat-turn-head { display: flex; align-items: baseline; gap: 8px; }
.fd-chat-turn-who { font-size: 10.5px; font-weight: 650; color: var(--dim); }
.fd-chat-turn-bot .fd-chat-turn-who { color: var(--dimmer); }
.fd-chat-turn-at { font-size: 10px; color: var(--dimmer); }
.fd-chat-turn-said { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.fd-chat-turn-bot .fd-chat-turn-said { color: var(--dim); }

/* ── the reply ------------------------------------------------------------ */
.fd-chat-reply { margin-top: 10px; border-top: 1px solid var(--line-soft); padding-top: 10px; }

.fd-chat-reply-status { font-size: 11.5px; margin: 0 0 4px; }
.fd-chat-reply-wait { color: var(--amber-ink); }
.fd-chat-reply-collected { color: var(--teal-2); }
.fd-chat-reply-quote {
  font-size: 11.5px; font-style: italic; color: var(--dim);
  margin: 0 0 8px; padding-left: 8px; border-left: 2px solid var(--amber);
}

.fd-chat-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--sunk); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--ink); font: inherit;
  font-size: 13px; padding: 8px 10px; margin-bottom: 8px;
}
.fd-chat-input::placeholder { color: var(--dimmer); }

.fd-chat-btn {
  font: inherit; font-size: 12.5px; padding: 6px 12px; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--line); background: transparent;
  color: inherit;
}
.fd-chat-btn:disabled { opacity: .55; cursor: default; }
.fd-chat-primary { border-color: var(--teal); color: var(--teal); font-weight: 650; }

.fd-chat-said { margin-top: 8px; font-size: 12px; }
.fd-chat-said.ok { color: var(--teal); }
.fd-chat-said.no { color: var(--red-ink); }
/* ==== fd_chat END ==== */

/* Console readability, 4 Oct 2026. Decorative separators stay quieter than
   control edges; state is expressed by colour, border style and existing
   labels instead of fading the entire control and its text. Frontdesk has
   its own scoped rules and keeps the contrast already deployed there. */
body:not(.fd-console), :root[data-theme="day"] body:not(.fd-console) {
  background: var(--bg); color: var(--ink);
}
body:not(.fd-console) :is(button, input, select, textarea) { border-color: var(--rule); }
body:not(.fd-console) :is(.who.is-btn, .apptbar, .deskenc .dk-enc-more) { border-color: var(--rule); }
body:not(.fd-console) :is(.dk-car-tab.is-on, .sd-nav.is-on, .dk-act.is-done) { border-color: var(--teal); }
body:not(.fd-console) .apptbar.has { border-color: var(--amber); }
body:not(.fd-console) .prefs-form .su-in { color-scheme: inherit; }
body:not(.fd-console) :is(input, textarea)::placeholder { color: var(--dimmer); opacity: 1; }
body:not(.fd-console) :is(button, input, select, textarea):focus-visible,
body:not(.fd-console) summary:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}
body:not(.fd-console) :is(button, input, select, textarea):disabled {
  opacity: 1 !important; color: var(--dimmer); border-color: var(--rule); background: var(--panel-2);
  border-style: dashed; cursor: not-allowed;
}
body:not(.fd-console) :is(.sect.nomic, .rec-out, .tick-off, .pt-settled,
  .su-route.is-off, .home-key-away, .dk-sheet-k.away, .dk-doc.away,
  .dk-act.is-off, .ci-desk.is-off, .recbtn.dis, .ut-med.is-gone,
  .fl-form.fl-dim, .cho-quiet, .cho-away, .ch-key.ch-away, .ce-type.is-dim,
  .report-host [aria-busy="true"], .ph-tile.dimmed, .ph-row.dimmed,
  .ph-chip.dimmed, .ph-btn.dimmed, .rv-collect.dimmed, .rv-unit.dimmed,
  .rv-dim, .tl-nb-b, .ph-band.now-nb, #patients .is-retired) { opacity: 1; }
body:not(.fd-console) :is(.ph-mo .d.out, .fd-section-body .is-gone .fo-enc-l,
  .fd-section-body .is-off .fo-m-n) { opacity: 1; color: var(--dimmer); }
body:not(.fd-console) :is(.btn-primary, .pill-teal, .pill-ok, .study.open,
  .pr-level[aria-pressed="true"], .pr-mode.on, .pr-section.on,
  .cs-tab.is-active, .st-tab.is-active) { border-color: var(--teal); }
body:not(.fd-console) :is(.pill-alert, .pill-rec) { border-color: var(--red); color: var(--red-ink); }
body:not(.fd-console) .pill-unasked { border-color: var(--amber); }
body:not(.fd-console) :is(.pr-primary:enabled, .procedure-host .pr-template-save:enabled) { color: var(--accent-ink); }
body:not(.fd-console) .procedure-workspace .pr-family { border-color: var(--rule); }

/* ── chat.js's own (LE-48, Parcel A) — appended from its fragment ─────────── */
/* chat.js — the messenger surface. LE-48 Parcel A.
   A FRAGMENT, appended to app.css by the integrating session; not linked on
   its own. Values are app.css's own tokens wherever a token exists, and the
   mock-up's own literals (design/ChatHome.dc.html, ChatEncounter.dc.html,
   ChatMenu.dc.html) where none does — those artboards ARE app.css's
   palette, carried as inline hex because a static mock-up loads no
   stylesheet of its own.

   Class prefix ch-, and every selector in this file starts with it: a
   fragment appended into a much larger sheet must not be able to redefine
   something it was never told about. */

.ch-root { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }

/* ── the stream ──────────────────────────────────────────────────────── */
.ch-stream {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 12px 10px;
}

.ch-bot, .ch-me, .ch-sys, .ch-brand-slot { flex: 0 0 auto; }

.ch-bot {
  align-self: flex-start; max-width: 86%;
  padding: 10px 13px; border-radius: 14px 14px 14px 4px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 14px; line-height: 1.45; color: var(--ink);
}
.ch-me {
  align-self: flex-end; max-width: 86%;
  padding: 10px 13px; border-radius: 14px 14px 4px 14px;
  background: rgba(79,214,200,0.12); border: 1px solid rgba(79,214,200,0.3);
  font-size: 14px; line-height: 1.45; color: var(--ink);
}
.ch-sys {
  align-self: center; text-align: center; max-width: 84%;
  font-size: 11.5px; line-height: 1.4; color: var(--dim);
}
.ch-from {
  display: block; font-size: 8.5px; letter-spacing: 0.16em; color: var(--label);
  margin-bottom: 4px;
}

/* ── a full-width card ───────────────────────────────────────────────── */
.ch-card {
  align-self: stretch; padding: 12px 13px; border-radius: var(--r-l);
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.ch-card.ch-ask { background: rgba(224,164,74,0.06); border-color: rgba(224,164,74,0.3); }

/* ── chips, under the last bot bubble ───────────────────────────────── */
.ch-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.ch-chip {
  min-height: 44px; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--sunk); border: 1px solid var(--line);
  font-family: var(--display); font-size: 13px; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ch-chip.ch-on { background: rgba(79,214,200,0.16); border-color: rgba(79,214,200,0.5); color: var(--teal); font-weight: 600; }
.ch-chip-n { font-size: 11px; color: var(--teal); }
.ch-chip:active { transform: scale(.97); filter: brightness(1.25); }
.ch-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── a voice bubble ──────────────────────────────────────────────────── */
.ch-voice { display: flex; align-items: center; gap: 10px; }
.ch-play {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79,214,200,0.16); border: 1px solid rgba(79,214,200,0.45); color: var(--teal);
}
.ch-play.ch-rec { background: rgba(224,90,74,0.16); border-color: rgba(224,90,74,0.55); color: #ff8a7a; }
.ch-wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.ch-wave .ch-bar { display: block; width: 3px; border-radius: 2px; background: var(--teal); opacity: 0.75; }
.ch-wave.ch-rec .ch-bar { background: #ff8a7a; }
.ch-len { font-size: 11px; color: var(--dim); }
.ch-len.ch-rec { color: #ff8a7a; }
.ch-words { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin-top: 8px; }
.ch-tag { font-size: 8.5px; letter-spacing: 0.14em; color: var(--label); margin-top: 4px; }
.ch-state-recording .ch-tag { color: #ff8a7a; }

/* ── the pinned row, above the composer ──────────────────────────────── */
.ch-pinned { flex: 0 0 auto; display: flex; gap: 8px; padding: 8px 12px 0; }
.ch-pinned[hidden] { display: none; }
.ch-btn {
  flex: 1 1 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--sunk);
  font-family: var(--display); font-size: 14px; color: var(--ink); text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ch-btn.ch-go   { background: rgba(79,214,200,0.16); border-color: rgba(79,214,200,0.5); color: var(--teal); font-weight: 600; }
.ch-btn.ch-warn { background: rgba(224,164,74,0.08); border-color: rgba(224,164,74,0.35); color: var(--amber-ink); }
.ch-btn.ch-stop { background: rgba(224,90,74,0.10); border-color: rgba(224,90,74,0.4); color: var(--red-ink); }
.ch-btn:active { transform: scale(.97); filter: brightness(1.25); }
.ch-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── the composer ─────────────────────────────────────────────────────── */
.ch-composer {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px calc(14px + var(--safe-b));
  border-top: 1px solid var(--line); background: rgba(4,9,10,0.82);
}
.ch-ctl {
  flex: 0 0 auto; width: 44px; height: 44px; min-height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79,214,200,0.1); border: 1px solid rgba(79,214,200,0.3); color: var(--teal);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ch-ctl.ch-quiet { background: transparent; border-color: var(--line); color: var(--dim); }
.ch-ctl.ch-mic  { background: rgba(224,90,74,0.12); border-color: rgba(224,90,74,0.4); color: #ff8a7a; }
.ch-ctl.ch-live { background: rgba(224,90,74,0.22); border-color: rgba(224,90,74,0.6); color: #ff8a7a; }
.ch-ctl.ch-send { background: rgba(79,214,200,0.2); border-color: rgba(79,214,200,0.55); }
.ch-ctl:active { transform: scale(.97); filter: brightness(1.25); }
.ch-ctl:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.ch-icon { display: flex; align-items: center; justify-content: center; line-height: 0; }

.ch-field {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  padding: 10px 14px; border-radius: 22px;
  background: var(--sunk); border: 1px solid var(--line);
  font-family: var(--display); font-size: 14px; color: var(--ink);
}
.ch-field::placeholder { color: var(--dimmer); }
.ch-field.ch-typing { border-color: rgba(79,214,200,0.3); }
.ch-field:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.ch-file-input { display: none; }

/* ── the branding card, lower quarter ────────────────────────────────── */
.ch-brand-slot { margin-top: auto; align-self: stretch; }
.ch-brand {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 16px 14px; border-radius: var(--r-l);
  background: rgba(7,15,16,0.55); border: 1px solid var(--line-soft);
}
.ch-brand-mark { display: flex; align-items: center; gap: 10px; }
.ch-brand-s {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79,214,200,0.14); border: 1px solid rgba(79,214,200,0.4);
  font-size: 15px; font-weight: 600; color: var(--teal);
}
.ch-brand-lines { min-width: 0; }
.ch-brand-name { font-size: 22px; font-weight: 600; color: #fff; letter-spacing: -0.01em; line-height: 1; }
.ch-brand-sub { font-size: 9px; letter-spacing: 0.18em; color: var(--teal); margin-top: 4px; }
.ch-brand-line { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.ch-brand-foot { font-size: 9px; letter-spacing: 0.12em; color: var(--dimmer); }

/* ── the bottom sheet ────────────────────────────────────────────────── */
.ch-sheet-wrap {
  position: fixed; inset: 0; z-index: 55;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(4,9,10,0.62);
}
.ch-sheet-wrap[hidden] { display: none; }
.ch-sheet {
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 12px calc(16px + var(--safe-b));
  border-radius: 18px 18px 0 0;
  background: #071012; border-top: 1px solid rgba(79,214,200,0.2);
  box-shadow: var(--z2);
  max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ch-grab { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: rgba(79,214,200,0.25); flex: 0 0 auto; }
.ch-sheet-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ch-sheet-t { font-weight: 600; font-size: 15px; color: #fff; }

.ch-grp-h { display: flex; gap: 10px; align-items: baseline; padding-bottom: 4px; border-bottom: 1px solid var(--hush); }
.ch-grp-t { font-weight: 600; font-size: 12px; color: var(--ink); letter-spacing: 0.01em; }
.ch-grp-n { font-size: 10px; color: var(--dimmer); }
.ch-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ch-key {
  min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  padding: 8px 9px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--rule);
  font-family: var(--display); font-size: 12.5px; line-height: 1.2; color: var(--ink); text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ch-key.ch-go   { border-color: rgba(79,214,200,0.5); background: rgba(79,214,200,0.12); color: var(--teal); font-weight: 600; }
.ch-key.ch-more { border-style: dashed; color: var(--dim); cursor: pointer; }
.ch-key.ch-away { cursor: default; opacity: .62; }
.ch-key:active  { transform: scale(.97); filter: brightness(1.25); }
.ch-key:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.ch-key .ch-tag { margin-top: 1px; color: var(--amber); }

.ch-sheet-cancel {
  min-height: 44px; margin-top: 3px;
  padding: 11px; border-radius: var(--r);
  background: transparent; border: 1px solid var(--line);
  font-family: var(--display); font-size: 14px; color: var(--dim);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ch-sheet-cancel:active { transform: scale(.97); filter: brightness(1.25); }

/* ── chatenc.js's own (LE-48, Parcel C) — appended from its fragment ───────── */
/* ── page 2 of the chat: the encounter, conducted in one ──────────────────
   A FRAGMENT. The integrator appends this to app/app.css; it is not loaded
   on its own and declares no tokens of its own -- every colour, radius and
   tap size below is app.css's, so the chat cannot drift from the pass
   screen it sits one tap away from.

   IT STYLES ONLY WHAT chatenc.js DRAWS (prefix `ce-`). The stream, the
   bubbles, the composer and the sheet are chat.js's (`ch-`), and the body
   card is the pass's own `.field` -- restyled here only where a card built
   for a 320px column has to sit inside a chat bubble's width. */

/* the session step: the six, the place's own first ------------------------ */
.ce-types { display: flex; flex-direction: column; gap: 8px; }

.ce-type {
  width: 100%; min-height: var(--tap);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--sunk);
  font-family: var(--display); font-size: 14px; color: var(--ink);
  text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ce-type:active { transform: translateY(1px); }
/* what this place puts first -- lit, and never the only thing offered */
.ce-type.is-first { background: rgba(79,214,200,0.16); border-color: rgba(79,214,200,0.5);
                    color: var(--teal); font-weight: 600; }
/* the change beside a session opened automatically */
.ce-type.is-alt { flex: 1 1 0; min-width: 0; }
/* REACHABLE, NOT REMOVED. Dimmed is a rank, not a fence: still a 44px
   button, still one tap, because the bot's own rule is "offered, not
   enforced". */
.ce-type.is-dim { opacity: 0.55; font-size: 13px; }
.ce-type[disabled] { opacity: 0.4; cursor: default; }

.ce-row { display: flex; gap: 8px; }

.ce-head { display: flex; align-items: center; gap: 8px; }
.ce-tick { color: var(--teal); font-size: 15px; line-height: 1; }
.ce-head-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.ce-sub { font-size: 12.5px; color: var(--dim); }
.ce-tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em;
          color: var(--label); }

.ce-also {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--line-soft);
}
.ce-also-h { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
             color: var(--dimmer); }

/* the body, moved in from the pass ---------------------------------------- */
.ce-body { display: flex; flex-direction: column; gap: 8px; }
/* the card is the chat's ground now, so it drops its own panel rather than
   painting a second one inside it */
.ce-body > .field { background: transparent; border: 0; padding: 0; margin: 0; }
/* a chat card is narrower than the pass column: the body is sized to it so
   the dial and the confirm stay on one screen without scrolling */
.ce-body .map-svg { width: min(78%, 168px); }
/* what the fields column shows while the body is away */
.ce-body-gone {
  padding: 10px 12px; margin-bottom: 9px; border-radius: var(--r);
  border: 1px dashed var(--hush); background: transparent;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--dimmer);
}

/* a recording's card: the button, then the words --------------------------- */
.ce-take { display: flex; flex-direction: column; gap: 7px; }
.ce-words { font-family: var(--serif); font-size: 13.5px; line-height: 1.45;
            color: var(--ink-2); }
/* WITHDRAWN, WHICH IS NOT DELETED -- readable rather than ghosted, because
   he may need to read what he took out */
.ce-out { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
          line-height: 1.5; color: var(--dim); }

.ce-btn {
  min-height: 38px; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--sunk);
  font-family: var(--display); font-size: 13px; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ce-btn:active { transform: translateY(1px); }
.ce-btn.is-go { background: rgba(79,214,200,0.16); border-color: rgba(79,214,200,0.5);
                color: var(--teal); font-weight: 600; }
.ce-btn[disabled] { opacity: 0.5; cursor: default; }

/* the note is ready ------------------------------------------------------- */
.ce-review { display: flex; flex-direction: column; gap: 8px; }
.ce-review-t { font-size: 14px; color: var(--amber-ink); }
.ce-review-n { font-size: 11px; color: var(--amber); letter-spacing: 0.04em; }

/* ── the memo types, and what each tells the model ─────────────────────── */
/* A card per memo: its name, and the instruction handed to the model when a
   memo of that kind is written. The box is wide and tall because what goes
   in it is a paragraph of instruction, not a label -- the shipped ones run
   to forty words. */
.memosview { padding: 12px 16px 28px; }
.mm-sub { color: var(--dim); font-size: 13.3px; margin: 2px 0 14px; max-width: 62ch; }
.mm-card { background: var(--sunk); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.mm-card.is-edited { border-left: 3px solid var(--amber); }
.mm-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mm-name { flex: 1; min-width: 0; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px;
  font-size: 14px; font-weight: 600; }
.mm-l { display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--dim); margin-bottom: 4px; }
.mm-intent { width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 7px; padding: 8px 10px; font-size: 13.3px; line-height: 1.45; }
.mm-foot { display: flex; gap: 8px; margin-top: 8px; }
/* 44px of hit area without drawing 44px -- the same transparent ::before the
   desktop's other small controls use, centred and never over a neighbour. */
.mm-b { position: relative; border-radius: 7px; padding: 7px 14px; font-size: 13.3px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.mm-b::before { content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 100%; height: 44px; min-width: 44px; }
.mm-save { border-color: var(--teal); color: var(--teal); }
.mm-undo { color: var(--dim); }
.mm-say { margin-top: 8px; font-size: 12.5px; color: var(--amber); }
/* WHAT STANDS NOW, beside what would replace it -- the 422's own read-back. */
.mm-was { color: var(--dim); font-size: 12.5px; white-space: pre-wrap; }
.mm-now { color: var(--amber); font-size: 12.5px; margin-top: 3px; }
.mm-add { border-style: dashed; }
.mm-add-t { font-weight: 600; margin-bottom: 8px; }
.mm-add .mm-name { margin-bottom: 8px; }

/* ── Outside work (app/outside.js, 30 Sep) ───────────────────────────────
   The packaged app's alone; every rule is scoped to its own region, and the
   page borrows the phone's .ph- vocabulary for everything but its fields. */
.outsideview .ow-page { display: flex; flex-direction: column; gap: 10px; padding: 8px 12px 24px; overflow-y: auto; min-height: 0; }
.outsideview .ow-big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.outsideview .ow-bigbtn { min-height: 120px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; }
.outsideview .ow-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.outsideview .ow-fld .k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--dimmer); }
.outsideview .ow-in { min-height: var(--tap, 44px); width: 100%; box-sizing: border-box; padding: 0 10px; border-radius: var(--r, 8px); border: 1px solid var(--line); background: var(--sunk); color: var(--ink); font: inherit; font-size: 15px; min-width: 0; }
.outsideview .ow-line, .outsideview .ow-own, .outsideview .ow-visit, .outsideview .ow-addpayer, .outsideview .ow-addclinic { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.outsideview .ow-line .ow-in, .outsideview .ow-own .ow-in { flex: 1 1 120px; }
.outsideview .ow-line .ow-in[type="number"], .outsideview .ow-own .ow-in[type="number"] { flex: 0 1 96px; }
.outsideview .ow-hits { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.outsideview .ow-hit { min-height: var(--tap, 44px); text-align: left; }
.outsideview .ow-note { color: var(--dim); }
.outsideview .ow-say.bad { color: var(--red-ink); }
.outsideview .ow-say.ok { color: var(--teal); }
.outsideview .ph-chip.on { border-color: var(--teal); color: var(--teal); }
.outsideview .ow-save, .outsideview .ow-stmts, .outsideview .ow-shoot { flex: 0 0 auto; width: 100%; }
.outsideview .ow-figs { font-size: 12px; color: var(--dim); }
.outsideview .ow-paid .ow-sthead { color: var(--teal); }
.outsideview .ow-part .ow-sthead { color: var(--amber-ink); }
.outsideview .ow-frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.now-outside .ow-entry { width: 100%; flex: 0 0 auto; }

/* ── Fee references, under Settings (2 October) ── */
/* The MOH benchmarks and the Shield plan rates, each edition with the day it
   takes effect. The prefix is `fr-`, grepped against app/app.css first. */
.fr-intro { font-size: 12.5px; color: var(--dim); margin-bottom: 10px; max-width: 72ch; }
.fr-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--rule); border-radius: 10px; }
.fr-h { font-weight: 600; font-size: 14px; }
.fr-blurb { font-size: 12px; color: var(--dim); }
.fr-ver { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--rule); }
.fr-ver.is-live { border-color: var(--teal); }
.fr-ver-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fr-when { font-weight: 600; font-size: 13px; }
.fr-tag { font-size: 10.5px; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--rule); color: var(--dim); }
.fr-tag.is-live { color: var(--teal); border-color: var(--teal); }
.fr-what { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.fr-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.fr-up { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--rule); }
.fr-up-h { font-size: 12.5px; font-weight: 600; }
.fr-up .or-field { max-width: 220px; }
.fr-hint { font-size: 11px; color: var(--dim); }
.fr-up > .btn { align-self: flex-start; }
.fr-ver .ask-line:empty { display: none; }
/* A phone: the listing's two columns become one, and the search hits stay
   inside it rather than reaching across a column that is no longer there. */
@media (max-width: 700px) {
  .or-cols { grid-template-columns: minmax(0, 1fr); }
  .or-cols .or-hits:not(:empty) { right: 0; }
}

/* ── Desk coordination: one patient's desk folder page (3 October) ── */
/* Dr Lau's ruling 7: a DESK-ONLY folder page, and the same section in his
   folder. A side panel over the board or the folder; the rows inside are
   fddocs', fdwork's and fdproc's own, styled where they always were. The
   prefix is `dfc-`, grepped against app/app.css first. */
.dfc-bell {
  min-width: 36px; min-height: 36px; margin-left: 6px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--rule); background: transparent; color: var(--teal);
  font-size: 15px; cursor: pointer; vertical-align: middle;
}
.dfc-bell:focus-visible, .dfc-x:focus-visible, .dfc-open:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}
.dfc-shade {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.5);
  display: flex; justify-content: flex-end;
}
.dfc-panel {
  width: min(500px, 100%); height: 100%; box-sizing: border-box; overflow: auto;
  display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  border-left: 1px solid var(--rule);
}
.dfc-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px;
  border-bottom: 1px solid var(--rule);
}
.dfc-head-words { flex: 1 1 auto; min-width: 0; }
.dfc-title { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.dfc-sub { margin: 4px 0 0; font-size: 13px; color: var(--dim); line-height: 1.45; }
.dfc-x {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--rule);
  background: transparent; color: var(--ink-2); font-size: 18px; cursor: pointer;
}
.dfc-body { padding: 14px 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.dfc-kind {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px;
  border-radius: 10px; background: var(--panel);
}
.dfc-kind-chip {
  font-size: 11px; letter-spacing: .08em; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--teal); color: var(--teal);
}
.dfc-kind-chip.is-new { background: var(--teal); color: var(--bg); }
.dfc-kind-t { font-size: 13px; color: var(--ink-2); }
.dfc-clash {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--amber);
}
.dfc-clash.is-firm { border-color: var(--red); }
.dfc-clash-t { font-size: 14px; font-weight: 700; color: var(--amber-ink); }
.dfc-clash.is-firm .dfc-clash-t { color: var(--red-ink); }
.dfc-clash-list { margin: 0; padding-left: 18px; }
.dfc-clash-line { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.dfc-sec { display: flex; flex-direction: column; gap: 8px; }
.dfc-sec-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dfc-sec-t { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.dfc-sec-n { font-size: 11px; color: var(--amber-ink); }
.dfc-none { margin: 0; font-size: 13px; color: var(--dim); }
.dfc-warn { color: var(--amber-ink); }
.dfc-docs, .dfc-jobs { margin: 0; padding: 0; }
.dfc-ticks { display: flex; flex-wrap: wrap; gap: 6px; }
.dfc-open { display: inline-flex; align-items: center; gap: 8px; }
.dfc-badge {
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--teal); color: var(--bg);
}
.dfc-open[data-state="open"] .dfc-badge { background: var(--amber); }
.dfc-open[data-state="clash"] .dfc-badge { background: var(--red-solid); color: #fff; }
@media (max-width: 700px) {
  .dfc-head, .dfc-body { padding-left: 16px; padding-right: 16px; }
}

/* Preferences: a focused form within the existing settings shell. */
.prefs-host { width: 100%; box-sizing: border-box; }
.prefs-form { max-width: 800px; margin: 0 auto; padding: 24px 20px 12px;
  color: var(--ink); font-family: system-ui, -apple-system, sans-serif; }
.prefs-intro { margin: 0 0 28px; color: var(--dim); font-size: 15px; line-height: 1.6; }
.prefs-section { padding: 24px; margin-bottom: 20px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel); }
.prefs-heading { margin: 0 0 6px; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.prefs-description { margin: 0 0 22px; color: var(--dim); font-size: 14px; line-height: 1.5; }
.prefs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 24px; }
.prefs-field { min-width: 0; }
.prefs-full { grid-column: 1 / -1; }
.prefs-label { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.prefs-form .su-in { display: block; width: 100%; min-height: 46px; padding: 11px 13px;
  background: var(--sunk); border: 1px solid var(--rule); border-radius: 8px;
  color: var(--ink); font: 15px system-ui, -apple-system, sans-serif; color-scheme: dark; }
.prefs-form .su-in::placeholder { color: var(--dimmer); opacity: 1; }
.prefs-form .su-in:focus-visible, .prefs-form button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.prefs-help { color: var(--dim); font-size: 13px; line-height: 1.6; margin: 10px 0 0; }
.prefs-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0 8px; border-top: 1px solid var(--line); }
.prefs-status { color: var(--dim); font-size: 13px; }
.prefs-actions { display: flex; gap: 10px; }
.prefs-form .btn { min-height: 44px; padding: 10px 18px; border-radius: 8px; font: 500 14px system-ui, sans-serif; }
.prefs-form .prefs-cancel { color: var(--ink-2); border: 1px solid var(--rule); background: transparent; }
.prefs-form .prefs-save { background: var(--teal); color: var(--accent-ink); border: 1px solid var(--teal); }
.prefs-form .btn:disabled { opacity: .5; cursor: default; }
.prefs-form .ask-q { white-space: pre-line; color: var(--ink); line-height: 1.6; }
.prefs-form .ask-line:not(:empty) { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
@media (max-width: 620px) {
  .prefs-form { padding: 16px 4px 8px; }
  .prefs-section { padding: 20px 16px; }
  .prefs-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .prefs-footer { flex-wrap: wrap; }
  .prefs-actions { width: 100%; }
  .prefs-actions .btn { flex: 1; }
}

/* Group the spine catalogue for scanning without changing encounter ticks. */
.pr-category { margin: 18px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.pr-category-title { margin: 0 0 14px; color: var(--ink); font: 600 17px system-ui, sans-serif; }
.pr-category .pr-row { border-bottom: 1px solid var(--line); padding: 4px 0; }
.pr-category .pr-row:last-child { border-bottom: 0; }
.pr-category .pr-tick { min-height: 44px; color: var(--ink-2); text-align: left; line-height: 1.5; }
.pr-category .pr-tick:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pr-category .pr-tick:disabled { opacity: .65; cursor: default; }

.pr-category .pr-tick.on { color: var(--teal); }

.pr-procedure { padding: 5px 0 9px; border-bottom: 1px solid var(--line); }
.pr-procedure:last-child { border-bottom: 0; }
.pr-procedure .pr-row { border-bottom: 0; }
.pr-tosp { margin: 7px 12px 0; color: var(--dim); font: 13px system-ui, sans-serif; }
.pr-tosp summary { cursor: pointer; min-height: 32px; line-height: 1.6; }
.pr-tosp summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pr-tosp-note, .pr-tosp-source { line-height: 1.6; margin: 8px 0; }
.pr-tosp-candidate { border-left: 2px solid var(--teal); padding: 8px 12px; margin: 8px 0; }
.pr-tosp-candidate strong { color: var(--ink); }
.pr-tosp-candidate p { margin: 6px 0 0; line-height: 1.5; }
.pr-tosp-source { color: var(--dim); font-size: 12px; }

/* A shared tile and disclosure vocabulary for clinic settings and reports.
   Native details/summary keeps mouse, touch and keyboard behaviour together. */
.report-host, .procedure-host { box-sizing: border-box; width: 100%; max-width: 1160px;
  margin: 0 auto; padding: 24px; color: var(--ink); font-family: system-ui, -apple-system, sans-serif;
  container-type: inline-size; }
.sd-tabbed .sd-panel-b.report-host, .sd-tabbed .sd-panel-b.procedure-host { columns: auto; }
.report-intro { margin: 0 0 24px; color: var(--dim); font-size: 15px; line-height: 1.6; }
.report-host .st-head, .stats-host > .cs-head { margin: 0 0 12px; }
.report-host .st-t, .stats-host > .cs-head .cs-title { color: var(--ink); font-size: 20px; }
.sd-tabbed .report-host > .st-head, .sd-panel-b.stats-host > .cs-head,
.sd-panel-b.procedure-host .pr-t { display: none; }
.report-card, .report-tile { min-width: 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); color: var(--ink); overflow-wrap: anywhere; }
.report-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px; align-items: start; }
.report-tile-grid > .report-tile[open] { grid-column: 1 / -1; }
.report-tile { margin: 0; padding: 0; }
.report-tile-heading { position: relative; display: flex; flex-direction: column; justify-content: center;
  gap: 8px; min-height: 100px; padding: 22px 54px 22px 22px; box-sizing: border-box;
  cursor: pointer; list-style: none; border-radius: 14px; text-align: left; }
.report-tile-heading::-webkit-details-marker { display: none; }
.report-tile-heading::after { content: '+'; position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%); color: var(--teal); font-size: 24px; font-weight: 400; }
.report-tile[open] > .report-tile-heading::after { content: '−'; }
.report-tile[open] > .report-tile-heading { border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--line); }
.report-tile-heading:hover { background: var(--panel-hover); }
.report-tile-heading:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; }
.report-card-title, .report-tile .pr-category-title { margin: 0; color: var(--ink);
  font: 600 17px/1.45 system-ui, -apple-system, sans-serif; letter-spacing: -.01em; }
.report-tile-meta { color: var(--dim); font-size: 13px; line-height: 1.5; }
.report-tile-body { padding: 20px 22px; }
.report-tile:not([open]) > .report-tile-body { display: none; }
.report-host .st-line { color: var(--ink-2); line-height: 1.6; white-space: normal; }
.report-host .st-line.report-card-title { color: var(--ink); }
.report-card-line + .report-card-line { margin-top: 8px; }
.report-periods { margin: 0 0 24px; gap: 8px; }
.report-host .st-tab, .stats-host .cs-tab, .stats-host .cs-btn {
  min-height: 44px; padding: 10px 16px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--sunk); color: var(--ink-2); font: 500 14px system-ui, sans-serif; cursor: pointer; }
.report-host .st-tab.is-active, .stats-host .cs-tab.is-active {
  background: var(--selected-bg); color: var(--teal-2); border-color: var(--teal); }
.report-host button:focus-visible, .report-host input:focus-visible, .procedure-host input:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px; }
.report-status { color: var(--dim); font-size: 14px; line-height: 1.6; margin-top: 16px; }
.report-host [aria-busy="true"] { opacity: .6; }
.report-summary, .stats-host .cs-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin: 0 0 24px; }
.report-metric, .stats-host .cs-fig { padding: 22px; }
.report-metric-label, .stats-host .cs-fig-l { color: var(--dim); font-size: 14px; margin: 0 0 12px; }
.report-metric-value, .stats-host .cs-fig-v { color: var(--ink); font: 600 30px/1.25 system-ui, sans-serif;
  letter-spacing: -.025em; white-space: normal; overflow: visible; font-variant-numeric: tabular-nums; }
.report-audit-section { margin: 20px 0; }
.audit-host .st-verdict { background: var(--panel); border-color: var(--line); padding: 20px; }
.audit-host .st-verdict-serious { border-left-color: var(--red); }
.audit-host .st-verdict-check { border-left-color: var(--amber); }
.audit-host .st-verdict-note { border-left-color: var(--teal); }
.audit-host .st-verdict-h { color: var(--ink); font-size: 17px; line-height: 1.5; }
.audit-host .st-sims { margin: 0; gap: 0; }
.audit-host .st-sim { flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--line); }
.audit-host .st-sim:first-child { padding-top: 0; }
.audit-host .st-sim:last-child { border-bottom: 0; padding-bottom: 0; }
.audit-host .st-sim-n { color: var(--ink); font-size: 14px; }
.audit-host .st-sim .tiny { flex-basis: 100%; margin-left: 24px; color: var(--dim) !important; }
.audit-host .st-finding { padding: 14px 16px; background: var(--sunk); border-radius: 6px; }
.audit-host .st-finding-what { color: var(--ink); font-size: 14px; line-height: 1.6; }
.audit-host .st-finding-w { margin-bottom: 8px; color: var(--dim); }
.audit-host .st-none { color: var(--dim); line-height: 1.6; }
.stats-host .cs-filters, .stats-host .cs-breakdown { margin-bottom: 20px; }
.stats-host .cs-periods, .stats-host .cs-custom, .stats-host .cs-clinics { gap: 10px; margin-bottom: 18px; }
.stats-host .cs-clinics { margin-bottom: 0; align-items: stretch; }
.stats-host .cs-clinics > .cs-lbl { width: 100%; color: var(--dim); margin: 4px 0; }
.stats-host .cs-chk { gap: 10px; padding: 10px 14px; background: var(--sunk); border-color: var(--rule);
  color: var(--ink-2); font-size: 14px; line-height: 1.5; min-width: 0; }
.stats-host .cs-chk input { flex-shrink: 0; accent-color: var(--teal); width: 18px; height: 18px; }
.stats-host .cs-chk.is-unknown { color: var(--dim); }
.stats-host .cs-date-label { display: grid; gap: 8px; color: var(--dim); font-size: 14px; }
.stats-host .cs-custom { align-items: end; }
.stats-host .cs-date { background: var(--sunk); border-color: var(--rule); color: var(--ink);
  color-scheme: dark; font: 14px system-ui, sans-serif; max-width: 100%; box-sizing: border-box; }
.stats-host .cs-status { margin: 0 0 20px; color: var(--dim); font-size: 14px; line-height: 1.6; }
.stats-host .cs-status.is-warn { color: var(--amber); }
.stats-host .cs-fig-s { color: var(--dim); font-size: 13px; line-height: 1.6; margin-top: 10px; }
.stats-host .cs-table { margin: 0; }
.stats-host .cs-tr { grid-template-columns: minmax(0, 2.5fr) minmax(0, .65fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 14px; padding: 16px 0; border-color: var(--line); align-items: start; }
.stats-host .cs-tr > span { white-space: normal; overflow: visible; font: 14px/1.6 system-ui, sans-serif;
  color: var(--ink-2); font-variant-numeric: tabular-nums; }
.stats-host .cs-tr > span:last-child { display: block; }
.stats-host .cs-th > span { color: var(--dim); font-size: 12px; }
.stats-host .cs-tr > .is-warn { color: var(--amber); }
.stats-host .cs-notes { padding-top: 16px; margin: 0; }
.stats-host .cs-note, .stats-host .cs-none, .stats-host .cs-sub { color: var(--dim); font-size: 13px; line-height: 1.6; }
.stats-host .cs-note.is-warn { color: var(--amber); }
.stats-host .cs-noshows .cs-head { margin: 0; display: flex; align-items: center; justify-content: space-between; }
.stats-host .cs-n { background: var(--panel-2); color: var(--ink-2); padding: 3px 10px; border-radius: 6px; font-size: 14px; }
.procedure-host .pr-sub { color: var(--dim); font-size: 15px; line-height: 1.6; }
.procedure-host .pr-head { margin-bottom: 24px; }
.procedure-host .meds-find { box-sizing: border-box; min-height: 46px; padding: 12px 14px;
  background: var(--sunk); border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); font: 15px system-ui, sans-serif; }
.procedure-host .pr-note { background: transparent; border: 0; padding: 0; margin: 12px 0;
  color: var(--dim); font: 13px/1.6 system-ui, sans-serif; }
.procedure-host .pr-count { color: var(--dim); margin: 16px 0; font: 13px/1.6 system-ui, sans-serif; }
.procedure-host .report-tile.pr-category { margin: 0; padding: 0; }
.procedure-host .pr-tick { background: var(--sunk); border-color: var(--rule); font: 14px/1.6 system-ui, sans-serif; }
@container (max-width: 650px) {
  .report-summary, .stats-host .cs-figs { grid-template-columns: minmax(0, 1fr); }
  .stats-host .cs-th { display: none; }
  .stats-host .cs-tr:not(.cs-th) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; padding: 20px 0; }
  .stats-host .cs-tr .cs-name { grid-column: 1 / -1; font-weight: 600; }
  .stats-host .cs-tr > span:not(.cs-name)::before { content: attr(data-label); display: block; color: var(--dim); font-size: 12px; margin-bottom: 4px; }
}
@media (max-width: 620px) {
  .report-host, .procedure-host { padding: 16px 4px; }
  .report-tile-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .report-tile-heading { min-height: 88px; padding: 18px 48px 18px 18px; }
  .report-tile-body { padding: 18px; }
  .stats-host .cs-chk { width: 100%; box-sizing: border-box; }
}

/* Focus on the chosen procedure; its category heading returns to the tiles. */
.pr-list:has(> .pr-category[open]) > .pr-category:not([open]) { display: none; }
.pr-category > .report-tile-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.pr-category .pr-procedure { min-width: 0; }
.pr-category > .report-tile-body:has(.pr-editor-host:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
.pr-category > .report-tile-body:has(.pr-editor-host:not([hidden])) > .pr-procedure:not(:has(.pr-editor-host:not([hidden]))) { display: none; }
.procedure-host .pr-row { display: flex; align-items: center; gap: 12px; border-bottom: 0; }
.procedure-host .pr-open { flex: 1; min-width: 0; min-height: 44px; padding: 10px 0; border: 0;
  background: none; color: var(--ink); text-align: left; cursor: pointer; font: 500 14px/1.5 system-ui, sans-serif; }
.procedure-host .pr-open:hover { color: var(--teal-2); }
.procedure-host .pr-open:focus-visible, .procedure-host .pr-template button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.procedure-host .pr-tick { flex: 0 0 auto; min-height: 36px; width: auto; padding: 6px 12px; border-radius: 8px; }
.procedure-host .pr-tosp { margin-left: 0; margin-right: 0; font-size: 12px; }
.pr-editor-host[hidden] { display: none; }
.pr-template { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.pr-template-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 16px 0; }
.pr-template-field { display: grid; gap: 8px; color: var(--ink-2); font: 13px/1.5 system-ui, sans-serif; min-width: 0; }
.pr-template-field.pr-template-full { grid-column: auto; }
.pr-template-input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 10px 12px;
  background: var(--sunk); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; font: 14px/1.5 system-ui, sans-serif; }
.pr-template textarea.pr-template-input { min-height: 90px; resize: vertical; }
.pr-template-input::placeholder { color: var(--dimmer); opacity: 1; }
.pr-template-levels { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: end; }
.pr-level-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-level { min-height: 40px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 8px;
  color: var(--ink-2); background: var(--sunk); cursor: pointer; font: 13px system-ui, sans-serif; }
.pr-level[aria-pressed="true"] { border-color: var(--teal); background: var(--selected-bg); color: var(--teal-2); }
.pr-template-group, .pr-template-advanced { border-top: 1px solid var(--line); margin: 12px 0; padding-top: 12px; }
.pr-template-group > summary, .pr-template-advanced > summary { cursor: pointer; min-height: 36px;
  color: var(--ink-2); font: 500 14px/1.5 system-ui, sans-serif; }
.pr-code-confirm { display: flex; gap: 10px; align-items: start; margin: 16px 0; font-size: 13px; line-height: 1.5; }
.pr-code-confirm input { accent-color: var(--teal); width: 18px; height: 18px; flex-shrink: 0; }
.pr-template-text { margin-top: 8px; }
.pr-template-preview { background: var(--sunk); color: var(--ink-2); padding: 14px; border-radius: 8px;
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: 13px/1.6 system-ui, sans-serif; }
.pr-template-status { color: var(--dim); margin: 12px 0; font-size: 13px; line-height: 1.6; }
.procedure-host .pr-template-save { background: var(--teal); color: var(--accent-ink); min-height: 44px; border-radius: 8px; }

/* Complaint categories are the home view; only one instruction is edited. */
.sd-tabbed .sd-panel-b.note-host, .sd-tabbed .sd-panel-b.fee-host, .sd-tabbed .sd-panel-b.safety-host { columns: auto; }
.sd-panel-b.note-host { padding: 16px; }
.note-toolbar { display: flex; gap: 12px; margin-bottom: 16px; }
.note-search { flex: 1; min-width: 0; }
.note-host .tb-in { background: var(--sunk); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px;
  box-sizing: border-box; width: 100%; min-height: 42px; padding: 10px 12px; font: 14px/1.5 system-ui, sans-serif; }
.note-host .tb-in::placeholder { color: var(--dimmer); opacity: 1; }
.note-host .btn, .fee-host .btn { min-height: 40px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 8px;
  color: var(--ink-2); background: var(--sunk); font: 500 13px/1.5 system-ui, sans-serif; }
.note-host .note-add, .note-host .note-save { border-color: var(--teal); background: var(--teal); color: var(--accent-ink); }
.note-library-status { margin-bottom: 16px; color: var(--dim); font-size: 13px; line-height: 1.5; }
.note-category, .note-complaint { display: flex; flex-direction: column; justify-content: center; gap: 10px;
  cursor: pointer; text-align: left; padding: 22px; min-height: 112px; }
.note-category:hover, .note-complaint:hover { background: var(--panel-hover); border-color: var(--rule); }
.note-complaints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.note-complaint { padding: 16px; min-height: 88px; }
.note-complaint-name { color: var(--ink); font: 500 14px/1.5 system-ui, sans-serif; }
.note-library-heading, .note-editor-top { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.note-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; color: var(--dim); font-size: 13px; }
.note-name-label { display: grid; gap: 8px; color: var(--dim); font-size: 13px; margin-bottom: 8px; }
.note-editor-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.note-editor-nav { display: flex; flex-direction: column; gap: 4px; }
.note-heading-tab { cursor: pointer; border: 1px solid transparent; border-radius: 8px; background: none;
  text-align: left; padding: 6px 12px; min-height: 40px; color: var(--dim); font: 500 12px/1.5 system-ui, sans-serif; }
.note-heading-tab.is-active { color: var(--teal-2); background: var(--selected-bg); border-color: var(--teal); }
.note-editor-pane { padding: 22px; }
.note-editor-field { display: grid; gap: 10px; margin-bottom: 16px; color: var(--ink-2); font-size: 14px; }
.note-editor-pane textarea { resize: vertical; min-height: 160px; }
.note-row-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.note-editor-footer { display: flex; justify-content: end; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.note-editor-footer .note-remove { margin-right: auto; }
.note-enable { display: flex; gap: 10px; align-items: center; font-size: 13px; margin: 14px 0; }
.note-enable input { accent-color: var(--teal); }
.consent-metadata { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 12px; }
.consent-editor-grid { grid-template-columns: 310px minmax(0, 1fr); gap: 16px; }
.consent-section-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; }
.consent-section-nav .note-heading-tab { border-color: var(--line); min-height: 54px; padding: 8px 10px; }
.consent-add-section { grid-column: 1 / -1; }
.consent-host .note-editor-pane { padding: 16px; }
.consent-host .note-editor-field { margin-bottom: 12px; gap: 6px; }
.consent-host .note-editor-pane textarea { min-height: 220px; height: 220px; resize: vertical; }
.consent-host .note-editor-footer { margin-top: 14px; padding-top: 12px; flex-wrap: wrap; }
.memo-library-host, .pdf-library-host { columns: auto !important; font-family: system-ui, sans-serif; }
.memo-library-host .st-head { margin: 0 0 12px; }
.memo-library-host .mm-sub { margin: 0 0 16px; }
.mm-toolbar { display: flex; gap: 8px; margin-bottom: 16px; }
.mm-toolbar input { flex: 1; min-width: 0; }
.mm-type-grid, .pdf-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mm-type { padding: 12px; min-height: 72px; text-align: left; display: grid; gap: 6px; cursor: pointer; }
.memo-library-host .mm-card { padding: 14px; margin: 12px 0 0; }
.memo-library-host .mm-top { margin-bottom: 8px; }
.memo-library-host .mm-name, .memo-library-host .tb-in, .memo-library-host textarea {
  box-sizing: border-box; width: 100%; background: var(--sunk); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 8px; padding: 8px 10px; font: 14px/1.5 system-ui, sans-serif; }
.memo-library-host .mm-intent, .memo-library-host .mm-context { height: 68px; min-height: 68px; resize: vertical; }
.memo-library-host .mm-guidance { height: 110px; min-height: 110px; resize: vertical; }
.mm-field { display: grid; gap: 6px; margin: 10px 0; color: var(--ink-2); font-size: 13px; }
.mm-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mm-hint { color: var(--dim); font-size: 12px; line-height: 1.5; margin: 8px 0; }
.pdf-library-host > .report-card-title { margin-bottom: 12px; }
.pdf-library-host .pdf-upload { padding: 12px; margin-bottom: 12px; }
.pdf-upload-title { cursor: pointer; font-weight: 600; }
.pdf-library-host .pdf-type-grid .tb-item { display: grid; gap: 8px; padding: 12px; margin: 0; min-height: 100px; align-content: start; }
.pdf-library-host .tb-item-acts { justify-content: start; }
.pdf-library-host .tb-item-name { font-size: 14px; }
.pdf-search { margin-bottom: 12px; }
.pdf-library-host .pt-row { min-width: 0; }
@media (max-width: 760px) {
  .mm-choice-grid { grid-template-columns: minmax(0, 1fr); }
  .mm-type-grid, .pdf-type-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .consent-metadata, .consent-editor-grid { grid-template-columns: minmax(0, 1fr); }
}
.note-host .ask-line:not(:empty) { color: var(--ink); line-height: 1.6; padding: 16px; margin-top: 12px;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--panel); }

/* Two source cards, two rule groups: common actions stay within reach. */
.fee-host .fr-sources, .safety-host .sf-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.fee-host .fr-card, .safety-host .sf-section { margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); min-width: 0; }
.fee-host .fr-card { gap: 16px; }
.fee-host .fr-h, .safety-host .sf-section-h { margin: 0; color: var(--ink); font: 600 17px/1.5 system-ui, sans-serif; }
.fee-host .fr-description > summary, .fee-host .fr-history > summary { color: var(--dim); font-size: 13px; cursor: pointer; min-height: 30px; line-height: 1.6; }
.fee-host .fr-description > div { margin: 10px 0; color: var(--dim); line-height: 1.6; }
.fee-host .fr-ver { padding: 14px; background: var(--sunk); border-color: var(--rule); gap: 10px; }
.fee-host .fr-ver.is-live { border-color: var(--teal); }
.fee-host .fr-when { color: var(--ink); font-size: 14px; }
.fee-host .fr-acts { margin-top: 4px; }
.fee-host .fr-history .fr-ver { margin-top: 12px; }
.fee-host .fr-up { gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; }
.fee-host .fr-up-h { color: var(--ink); font-size: 14px; }
.fee-host .fr-up .or-field { max-width: none; }
.fee-host .fr-up .or-in { box-sizing: border-box; width: 100%; min-height: 42px; color-scheme: dark;
  background: var(--sunk); border-color: var(--rule); color: var(--ink); font-size: 14px; }
.fee-host .fr-hint { color: var(--dim); font-size: 13px; line-height: 1.6; }
.fee-host .fr-up > .btn { width: 100%; }
.fee-host .fr-blurb, .fee-host .fr-what { color: var(--dim); font-size: 13px; }
.fee-host .ask-line:empty { display: none; }
.safety-host .sf-head { display: none; }
.safety-host > .tiny { display: block; margin-bottom: 24px; color: var(--dim) !important; }
.safety-host .sf-section-heading { display: flex; gap: 12px; align-items: baseline; margin-bottom: 18px; }
.safety-host .sf-rule { width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--sunk); color: var(--ink); cursor: pointer; }
.safety-host .sf-rule:last-child { margin-bottom: 0; }
.safety-host .sf-rule-name { white-space: normal; font: 500 14px/1.5 system-ui, sans-serif; }
.safety-host .sf-rule-detail { color: var(--dim); font: 13px/1.6 system-ui, sans-serif; margin-top: 12px; }
.safety-host .sf-rule-chev { color: var(--teal); }
.report-host summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@container (max-width: 650px) {
  .note-editor-grid { grid-template-columns: minmax(0, 1fr); }
  .note-editor-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note-complaints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-sources, .sf-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .pr-category > .report-tile-body, .pr-template-fields { grid-template-columns: minmax(0, 1fr); }
  .pr-template-levels { grid-template-columns: minmax(0, 1fr); }
  .note-toolbar, .note-editor-footer, .note-editor-top { flex-wrap: wrap; }
  .note-complaints { grid-template-columns: minmax(0, 1fr); }
  .note-editor-pane, .fee-host .fr-card, .safety-host .sf-section { padding: 18px; }
  .note-editor-footer .note-remove { margin-right: 0; }
  .fee-host .fr-sources, .safety-host .sf-body { grid-template-columns: minmax(0, 1fr); }
}

/* Fees, partners and vendors use one focused workspace instead of tall parallel lists. */
.fr-source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fr-source, .contact-tile { text-align: left; padding: 20px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--rule); min-height: 128px; cursor: pointer; font-family: system-ui, sans-serif; }
.fr-source:hover, .contact-tile:hover { background: var(--panel-hover); border-color: var(--teal); }
.fr-source-title, .contact-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.4; }
.fr-source-meta, .contact-meta { display: block; font-size: 13px; color: var(--dim); line-height: 1.5; margin-top: 10px; }
.fr-source-action { display: block; color: var(--teal-2); font-size: 13px; margin-top: 14px; }
.fr-focus-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.fr-focus-head .fr-h { margin: 0; font: 600 21px/1.4 system-ui, sans-serif; }
.fr-current { color: var(--dim); font: 13px/1.6 system-ui, sans-serif; margin: 0 0 14px; }
.fr-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.fr-tabs button[aria-pressed="true"] { background: var(--selected-bg); border-color: var(--teal); color: var(--ink); }
.fr-review-tools { display: flex; gap: 18px; align-items: end; margin-bottom: 14px; }
.fr-review-tools > input { flex: 1; min-width: 0; }
.fr-review-date { display: grid; gap: 6px; color: var(--dim); font: 13px system-ui, sans-serif; }
.fee-workspace .su-in { font: 14px system-ui, sans-serif; min-height: 42px; background: var(--sunk); border-color: var(--rule); color: var(--ink); box-sizing: border-box; }
.fr-rate-table { width: 100%; table-layout: fixed; border-collapse: collapse; color: var(--ink); font: 14px/1.45 system-ui, sans-serif; }
.fr-rate-table th { text-align: left; color: var(--dim); font-weight: 500; font-size: 12px; }
.fr-rate-table td, .fr-rate-table th { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.fr-rate-table th:first-child { width: 17%; }
.fr-rate-table th:nth-child(2) { width: 37%; }
.fr-paging { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 18px 0; color: var(--dim); font: 13px system-ui, sans-serif; }
.fee-workspace .fr-up { border: 1px solid var(--rule); border-radius: 10px; padding: 20px; margin-top: 18px; background: var(--panel); }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.contact-tile { min-height: 152px; }
.contact-host .prt-group { background: var(--panel); padding: 20px; border: 1px solid var(--rule); border-radius: 10px; }
.contact-host .prt-group-h { color: var(--ink); border-color: var(--rule); font: 600 17px/1.5 system-ui, sans-serif; align-items: center; }
.contact-host .prt-group-n { margin-left: auto; }
.contact-host .prt-row { background: var(--sunk); border: 1px solid var(--rule); border-radius: 8px; padding: 14px; margin: 12px 0; }
.contact-host .prt-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-host .prt-rows .prt-row { margin: 0; }
.contact-host .prt-rows .ask-line:empty { display: none; }
.contact-host .prt-name { font: 600 15px/1.5 system-ui, sans-serif; }
.contact-host .prt-reach, .contact-host .prt-none { color: var(--dim); font: 13px/1.6 system-ui, sans-serif; }
.contact-host .prt-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; background: var(--panel); padding: 18px; }
.contact-host .prt-field { margin: 0; min-width: 0; }
.contact-host .prt-field-k { color: var(--dim); font: 13px/1.5 system-ui, sans-serif; }
.contact-host .su-in { width: 100%; box-sizing: border-box; background: var(--sunk); border-color: var(--rule); color: var(--ink); font: 14px system-ui, sans-serif; }
.contact-host .prt-form > .ask-line { grid-column: 1 / -1; }
.contact-host .pv-title, .contact-host .inv-title { font: 600 18px/1.5 system-ui, sans-serif; color: var(--ink); }
@container (max-width: 1000px) { .fr-source-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 720px) { .fr-source-grid, .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .fr-source-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .fr-review-tools { align-items: stretch; flex-direction: column; }
  .fr-rate-table thead { display: none; }
  .fr-rate-table, .fr-rate-table tbody, .fr-rate-table tr, .fr-rate-table td { display: block; width: 100%; box-sizing: border-box; }
  .fr-rate-table tr { margin: 14px 0; border: 1px solid var(--rule); padding: 12px; border-radius: 8px; }
  .fr-rate-table td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px; padding: 8px 0; }
  .fr-rate-table td::before { content: attr(data-label); color: var(--dim); }
  .contact-host .prt-form { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .contact-host .prt-rows { grid-template-columns: minmax(0, 1fr); }
}

/* Compact procedure families: one chosen template and one section at a time. */
.procedure-host.procedure-workspace { max-width: none; padding: 12px 18px; }
.procedure-workspace .pr-workspace-intro { margin: 0 0 10px; color: var(--dim); font: 14px/1.5 system-ui; }
.procedure-workspace .pr-count { margin: 10px 0; font-size: 13px; }
.procedure-workspace .meds-find { min-height: 38px; padding: 8px 12px; font-size: 14px; }
.pr-family-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.procedure-workspace .pr-family { display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  min-width: 0; min-height: 145px; padding: 18px; text-align: left; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); color: var(--ink); cursor: pointer; white-space: normal; width: 100%; }
.pr-family strong { font: 600 17px/1.35 system-ui; }
.pr-family-description { color: var(--dim); font: 13px/1.5 system-ui; flex: 1; }
.pr-family-meta { color: var(--teal-2); font: 12px/1.5 system-ui; }
.pr-family:hover { border-color: var(--teal); background: var(--panel-hover); }
.pr-workspace-scope, .pr-selected-count { color: var(--dim); font: 12px/1.5 system-ui; margin: 10px 0 0; }
.pr-workspace-top { display: flex; gap: 16px; align-items: center; margin: 0 0 10px; }
.pr-workspace-top .btn { min-height: 34px; padding: 6px 12px; }
.pr-modes, .pr-sections { display: flex; gap: 8px; margin: 8px 0; }
.pr-mode, .pr-section { min-height: 36px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--sunk); color: var(--ink-2); cursor: pointer; font: 14px/1.4 system-ui; }
.pr-mode.on, .pr-section.on { background: var(--selected-bg); border-color: var(--teal); color: var(--teal-2); }
.pr-variant-label { display: grid; grid-template-columns: 160px minmax(0,1fr); align-items: center; gap: 12px;
  color: var(--dim); font: 13px/1.4 system-ui; }
.procedure-workspace .pr-template-input { min-height: 36px; padding: 7px 10px; font: 14px/1.4 system-ui; }
.pr-workspace-help { margin: 8px 0; color: var(--dim); font: 12px/1.5 system-ui; }
.pr-pane { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.pr-wording-view, .pr-section-preview { margin: 0; color: var(--ink-2); font: 14px/1.7 system-ui; white-space: pre-wrap; overflow-wrap: anywhere; }
.pr-field-index { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px; }
.pr-field-index span { color: var(--dim); font: 12px/1.5 system-ui; padding: 4px 8px; background: var(--sunk); border-radius: 5px; }
.procedure-workspace .pr-template-field { gap: 4px; font: 13px/1.4 system-ui; }
.pr-wording-edit { box-sizing: border-box; width: 100%; height: 208px; padding: 12px; resize: vertical;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--sunk); color: var(--ink); font: 14px/1.65 system-ui; }
.pr-wildcards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.procedure-workspace .pr-level { min-height: 30px; padding: 4px 10px; font: 12px/1.4 system-ui; }
.pr-encounter-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px 14px; }
.pr-encounter-fields .pr-area { grid-column: span 1; }
.pr-encounter-fields textarea { box-sizing: border-box; height: 66px; min-height: 66px; resize: vertical; }
.pr-encounter-fields [hidden] { display: none; }
.pr-level-shortcuts { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.pr-level-shortcuts .pr-region { width: 165px; flex: 0 0 auto; }
.pr-level-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-preview-tile { margin-top: 10px; }
.pr-preview-tile summary { cursor: pointer; color: var(--teal-2); font: 13px/1.5 system-ui; }
.pr-preview-tile .pr-section-preview { margin-top: 8px; font-size: 13px; }
.pr-workspace-footer { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 10px; }
.procedure-workspace .pr-template-status { margin: 0; font: 13px/1.4 system-ui; }
.pr-primary { flex: 0 0 auto; background: var(--teal); color: var(--accent-ink); border-color: var(--teal); min-height: 38px; }
.pr-candidates { display: grid; gap: 8px; }
.pr-candidate { display: flex; align-items: flex-start; gap: 10px; font: 12px/1.5 system-ui; }
.pr-candidate .pr-level { flex: 0 0 auto; }
.pr-code-confirm { font: 13px/1.5 system-ui; margin: 12px 0 0; }
.procedure-workspace button:focus-visible, .procedure-workspace select:focus-visible,
.procedure-workspace textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 1100px) { .pr-family-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 700px) {
  .pr-family-grid, .pr-encounter-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pr-modes, .pr-sections { flex-wrap: wrap; }
  .pr-variant-label { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .pr-level-shortcuts { flex-direction: column; align-items: stretch; }
}
@media (max-width: 460px) { .pr-family-grid, .pr-encounter-fields { grid-template-columns: minmax(0,1fr); } }

/* Clinic statistics: filters, three totals, and two useful detail panels. */
.report-host.stats-host { max-width: none; padding: 12px 18px; }
.stats-host .report-intro { margin-bottom: 10px; font-size: 14px; line-height: 1.4; }
.stats-host .report-tile-heading { min-height: 38px; padding: 10px 42px 10px 14px; gap: 2px;
  flex-direction: row; justify-content: flex-start; align-items: center; }
.stats-host .report-tile-heading .report-tile-meta { margin-left: 10px; font-size: 12px; }
.stats-host .report-card-title { font-size: 15px; }
.stats-host .report-tile-heading::after { right: 14px; font-size: 20px; }
.stats-host .report-tile-body { padding: 10px 14px; }
.stats-host .cs-filters { margin-bottom: 10px; }
.stats-host .cs-periods, .stats-host .cs-custom { gap: 6px; margin: 0 0 8px; }
.stats-host .cs-clinics { gap: 6px; margin: 0; }
.stats-host .cs-clinics > .cs-lbl { width: auto; align-self: center; margin: 0 6px 0 0; font-size: 12px; }
.stats-host .cs-tab, .stats-host .cs-btn { min-height: 32px; padding: 6px 12px; font-size: 13px; }
.stats-host .cs-chk { padding: 6px 10px; gap: 6px; font-size: 13px; }
.stats-host .cs-chk input { width: 15px; height: 15px; }
.stats-host .cs-date-label { gap: 3px; font-size: 12px; }
.stats-host .cs-date { padding: 5px 8px; min-height: 32px; }
.stats-host .cs-status { margin: 0 0 10px; font-size: 12px; }
.stats-host .cs-figs { gap: 12px; margin-bottom: 12px; }
.stats-host .cs-fig { padding: 12px 16px; }
.stats-host .cs-fig-l { margin-bottom: 4px; font-size: 13px; }
.stats-host .cs-fig-v { font-size: 26px; line-height: 1.25; }
.stats-host .cs-fig-s { margin-top: 4px; font-size: 12px; }
.cs-detail-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.stats-host .cs-breakdown { margin-bottom: 0; }
.stats-host .cs-tr { gap: 10px; padding: 9px 0; grid-template-columns: minmax(0,2.8fr) .5fr .8fr 1.2fr .7fr; }
.stats-host .cs-tr > span { font-size: 13px; line-height: 1.45; }
.stats-host .cs-th > span { font-size: 11px; }
.stats-host .cs-notes { padding-top: 8px; }
.stats-host .cs-note, .stats-host .cs-none, .stats-host .cs-sub { font-size: 12px; line-height: 1.45; }
.stats-host .cs-noshows .cs-title { font-size: 15px; }
.stats-host .cs-noshows .cs-head { width: 100%; gap: 10px; }
.stats-host .cs-noshows .cs-note { margin: 0 0 8px; }
.stats-host .cs-noshows .ns-row { margin: 6px 0; }
.cs-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; color: var(--dim); font: 12px/1.4 system-ui; }
.cs-pager:empty { display: none; }
@media (max-width: 850px) { .cs-detail-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 620px) {
  .stats-host .cs-figs { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .stats-host .cs-fig { padding: 10px 8px; }
  .stats-host .cs-fig-v { font-size: 20px; }
  .stats-host .cs-fig-s, .stats-host .cs-fig-l { font-size: 11px; }
  .stats-host .cs-chk { width: auto; }
  .stats-host .report-tile-heading .report-tile-meta { display: none; }
}
.stats-host .cs-no-show-list .tk-head { display: none; }
.stats-host .cs-no-show-list .tk-group { margin: 8px 0 2px; padding: 0; font-size: 12px; line-height: 1.4; }
.stats-host .cs-no-show-list .tk-row { padding: 4px 0; min-height: 26px; }
.stats-host .cs-no-show-list .tk-key { font-size: 13px; }
.stats-host .cs-no-show-list .tk-tag { font-size: 10px; }

/* ── 🩺 HEALTH SCREENING (5 October) -- console_screening / screening.ts ──
   Grades are a word and a symbol as well as a colour (▲ ▼ ● ‼ ?), so a row
   never depends on the colour alone. */
.screeningview { padding: 12px 16px 28px; overflow-y: auto; min-height: 0; }
.hs-page { display: flex; flex-direction: column; gap: 12px; max-width: 1180px; }
.hs-head { display: flex; align-items: center; gap: 10px; }
.hs-title { flex: 1; margin: 0; font-family: var(--display); font-size: 20px; color: var(--ink); }
.hs-lede, .hs-hint { color: var(--dim); font-size: 13.3px; margin: 2px 0; }
.hs-bar, .hs-actions, .hs-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hs-actions { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; border-top: 1px solid var(--line); }
.hs-btn { min-height: var(--tap, 44px); padding: 0 14px; border-radius: var(--r, 8px); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.hs-btn:hover { border-color: var(--teal); }
.hs-go { background: var(--teal); color: var(--bg); border-color: var(--teal); font-weight: 600; }
.hs-sign { border-color: var(--teal); color: var(--teal); font-weight: 600; }
.hs-ghost { background: transparent; }
.hs-x { min-width: var(--tap, 44px); font-size: 20px; }
.hs-in { min-height: 38px; box-sizing: border-box; padding: 0 8px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--sunk); color: var(--ink); font: inherit; font-size: 14px; min-width: 0; }
.hs-wide { flex: 1 1 320px; }
/* A SIGNED screening is locked: its boxes say so by look as well as by refusing input. */
.hs-in:disabled, .hs-ta:disabled { opacity: 0.7; cursor: not-allowed; border-style: dashed; }
.hs-ta { width: 100%; min-height: 110px; box-sizing: border-box; padding: 8px 10px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--sunk); color: var(--ink); font: inherit; font-size: 14px; }
.hs-ta-s { min-height: 64px; }
.hs-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-l, 12px); padding: 12px 14px; }
.hs-h3 { margin: 0 0 8px; font-size: 15px; color: var(--ink); }
.hs-lab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dimmer); margin: 10px 0 4px; }
.hs-field { display: flex; flex-direction: column; gap: 2px; max-width: 220px; }
.hs-list { display: flex; flex-direction: column; gap: 4px; }
.hs-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left;
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--panel);
  color: var(--ink); font: inherit; cursor: pointer; }
.hs-row:hover { border-color: var(--teal); }
.hs-row-n { font-weight: 600; }
.hs-row-s { color: var(--dim); font-size: 12px; }
.hs-pbar { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.hs-pname { font-size: 17px; font-weight: 700; color: var(--ink); }
.hs-pline { color: var(--dim); font-size: 13px; }
.hs-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.hs-pkg { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.hs-pkg.on { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.hs-pkg-n { font-weight: 700; }
.hs-pkg-a { color: var(--dim); font-size: 12.5px; }
.hs-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 14px; }
.hs-tick { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.hs-sched { margin-top: 6px; }
.hs-sched-r { display: grid; grid-template-columns: 82px 1.4fr 1fr 0.9fr; gap: 8px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.hs-sched-t { color: var(--ink-2); font-size: 12px; }
.hs-sched-s { color: var(--dimmer); font-size: 11.5px; }
.hs-chip { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid currentColor; white-space: nowrap; }
.hs-chip.hs-plain { color: var(--dim); }
.hs-due { color: var(--teal); } .hs-disc { color: var(--amber); }
.hs-crit { color: #fff; background: var(--red-solid); border-color: var(--red-solid); }
.hs-chip.hs-abn, .hs-res.hs-abn .hs-res-f, .hs-find.hs-abn .hs-find-f { color: var(--red); }
.hs-chip.hs-bord, .hs-res.hs-bord .hs-res-f, .hs-find.hs-bord .hs-find-f { color: var(--amber); }
.hs-chip.hs-ok, .hs-res.hs-ok .hs-res-f { color: var(--teal); }
.hs-chip.hs-ung, .hs-res.hs-ung .hs-res-f { color: var(--dimmer); }
.hs-panel { margin: 12px 0 4px; font-weight: 700; color: var(--teal-2); font-size: 13.5px; }
.hs-res { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(260px, 1.6fr) minmax(150px, 1fr) minmax(90px, 0.6fr);
  gap: 8px; align-items: center; padding: 5px 6px; border-radius: 6px; border-left: 3px solid transparent; }
.hs-res.hs-abn { border-left-color: var(--red); background: rgba(255, 154, 141, 0.06); }
.hs-res.hs-bord { border-left-color: var(--amber); background: rgba(255, 209, 122, 0.05); }
.hs-res.hs-crit { border-left-color: var(--red-solid); background: rgba(181, 43, 38, 0.18); color: var(--ink); }
.hs-res.hs-crit .hs-res-f { color: var(--red-ink); font-weight: 700; }
.hs-res-n { font-size: 14px; color: var(--ink); }
.hs-res-in { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hs-res-in .hs-in { width: 96px; }
.hs-res-in select.hs-in { width: auto; max-width: 240px; }
.hs-res-in .hs-find-in { flex: 1 1 200px; width: auto; }
.hs-range { width: 92px; }
.hs-unit-l { color: var(--dim); font-size: 12.5px; min-width: 56px; }
.hs-res-f { font-size: 13px; font-weight: 600; }
.hs-res-r { color: var(--dimmer); font-size: 12px; }
.hs-prev { display: block; font-weight: 400; color: var(--dimmer); font-size: 11.5px; }
.hs-find { display: grid; grid-template-columns: minmax(170px, 1fr) 120px minmax(160px, 1fr) minmax(260px, 2fr);
  gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.hs-find-n { font-weight: 600; color: var(--ink); }
.hs-find.hs-crit .hs-find-f { color: var(--red-ink); font-weight: 700; }
.hs-note { grid-column: 1 / -1; color: var(--dim); font-size: 12px; }
.hs-critcard { border-color: var(--red-solid); background: rgba(181, 43, 38, 0.16); }
.hs-crit-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.hs-crit-t { font-weight: 700; color: var(--red-ink); min-width: 200px; }
.hs-crit-done { color: var(--red-ink); font-size: 13px; margin: 0; }
.hs-due-r { font-size: 13.5px; color: var(--ink-2); padding: 2px 0; }
.hs-dirty { color: var(--amber); font-size: 13px; }
.hs-say { font-size: 13.5px; padding: 6px 10px; border-radius: 7px; }
.hs-say-bad { color: var(--red-ink); background: rgba(181, 43, 38, 0.16); }
.hs-say-ok { color: var(--teal); }
@media (max-width: 900px) {
  .hs-res, .hs-find, .hs-sched-r { grid-template-columns: 1fr; }
}