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

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

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

  --line:      rgba(79,214,200,0.13);
  --line-soft: rgba(79,214,200,0.09);
  --panel:     rgba(7,15,16,0.66);
  --panel-2:   rgba(5,10,11,0.55);
  --sunk:      rgba(5,10,11,0.6);   /* sunken input/control ground */
  --map-numb:  #5aa2ff;             /* the numbness ink */

  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;                       /* nothing tappable is smaller */
  --safe-b: env(safe-area-inset-bottom, 0px);

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

* { box-sizing: border-box; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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: .48; cursor: default; }
.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: #2d6b69;
}
.sec-head .right { margin-left: auto; color: var(--faint); }
.sec-note { font-size: 11px; color: var(--dimmer); line-height: 1.5; padding-bottom: 10px; }

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

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

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

.opts { display: flex; flex-wrap: wrap; gap: 7px; }
.opt {
  min-height: var(--tap); flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 14px; border-radius: 10px;
  background: 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);
  color: #fff; font-weight: 600;
}
.opt:active { transform: translateY(1px); }

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

/* the alternatives behind a confirm — a different value goes in by slide */
.alts { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.alts[hidden] { display: none; }
.alt {
  min-height: var(--tap);
  display: flex; align-items: baseline; gap: 12px; text-align: left;
  padding: 10px 14px; border-radius: 10px;
  background: 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: #2d514f; stroke-width: 1.6; stroke-linejoin: round; }
.map-guides { stroke: rgba(79,214,200,0.14); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
/* 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: #2d6b69; }
.block-src { margin-left: auto; font-family: var(--mono); font-size: 8px; color: var(--hush); }
.block-t { font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.block.out .block-t { color: var(--dimmer); }

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

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

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

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

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

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

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

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

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

.sect {
  flex: 0 0 auto; min-height: 38px;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: 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: #2d6b69; padding: 2px 4px 4px; }
.sheet-row {
  min-height: var(--tap);
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 11px 13px; border-radius: 12px;
  background: 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(--faint); }
.file-said.no { color: var(--amber); border-color: #4d3c22; }

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

/* Front screen, clustered by clinic day. */
.home-cluster { margin-bottom: 18px; }
.home-cluster-h { display: flex; gap: 10px; align-items: baseline; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--hush); }
.home-cluster-t { font-weight: 600; font-size: 13.5px; color: var(--ink); letter-spacing: .01em; }
.home-cluster-note { font-size: 10.5px; color: var(--dimmer); }
.home-cluster .home-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.home-cluster .home-key { min-height: 0; padding: 11px 12px; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.home-cluster .home-key-lab { font-size: 13.5px; }
.home-dial-btn { margin-left: auto; font-size: 12px; padding: 5px 12px; border: 1px solid var(--teal); border-radius: 6px; color: var(--teal); background: transparent; cursor: pointer; }
.home-dial-btn:hover { background: rgba(79,214,200,0.10); }
/* wider real estate: more columns on a desktop, tighter rhythm */
@media (min-width: 900px) {
  .home { max-width: 1100px; margin: 0 auto; }
  .home-cluster .home-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
/* -- the cabinet's photographs (commit 17) ----------------------------- */
.fo-films { display: flex; flex-direction: column; gap: 6px; }
.fo-film { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.fo-film-b { font-size: 11.5px; text-align: left; }
.fo-film-n { font-size: 11.5px; color: var(--dimmer); }
.fo-film.is-gone .fo-film-n { text-decoration: line-through; }
.fo-film-x { font-size: 10.5px; color: var(--amber); }
.fo-film-img { max-width: 100%; border-radius: var(--r);
  border: 1px solid var(--hush); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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


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

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

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

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

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

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

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

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

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

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

/* The cancelled strip's heading carries the WEEK'S COUNT — a quality
   control indicator, and the only figure on the grid that is a rate rather
   than an event. Dr Lau, 2026-09-09: "a glance to see how many cancellation
   are there per week". */
.wk-rate { display: flex; align-items: baseline; justify-content: space-between;
           gap: 6px; }
.wk-rate-n { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
             background: var(--panel); border: 1px solid var(--faint);
             border-radius: 999px; padding: 0 6px; line-height: 1.5; }
/* ── 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 { 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: minmax(268px, 21%) minmax(0, 1fr) minmax(268px, 21%);
  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(--faint);
  border-radius: 12px; background: var(--panel); }
.dk-tl { grid-area: tl; } .dk-bl { grid-area: bl; }
.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; }
.dk-corner-h { display: flex; 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; }
.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; }
/* 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(--faint);
  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); }
.dk-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.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; }
.dk-action-s { font-size: 10.5px; color: var(--dim); }
.dk-reg { padding: 10px 12px; border: 1px solid var(--faint); 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(--faint); 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-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 12px 12px; }
.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(--faint); 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(--faint); 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(--faint);
  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.is-full { max-height: none; flex: 1 1 auto; }
.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(--faint); border-radius: 8px; }
.dk-area-b .field { margin-bottom: 0; }
.dk-area-b .map-svg { width: min(52%, 320px); }
.dk-tr { padding: 6px 0; border-top: 1px solid rgba(255,255,255,.05); }
.dk-tr:first-child { border-top: 0; }
.dk-tr-h { font-size: 10px; color: var(--dimmer); letter-spacing: .06em; }
.dk-tr-t { font: 400 13px/1.55 "Newsreader", Georgia, serif; color: var(--ink-2);
  white-space: pre-wrap; margin-top: 3px; }
.dk-tr.is-out .dk-tr-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-url { flex: 1 1 auto; min-width: 0; padding: 7px 9px; font: inherit; font-size: 12px;
  color: inherit; background: var(--panel); border: 1px solid var(--faint); border-radius: 8px; }
.dk-img-url:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }
.dk-img-frame { width: 100%; min-height: 220px; flex: 1 1 auto; border: 1px solid var(--faint);
  border-radius: 8px; background: #fff; }
.dk-area.is-full .dk-img-frame { min-height: 60vh; }
.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(--faint); 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)); gap: 8px; }
.dk-act { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 8px 12px;
  border: 1px solid var(--faint); 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(--faint); 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:        #eef2f1;
  --ink:       #0e1c1e;   /* ~15:1 on the panel */
  --ink-2:     #24413d;   /* ~9:1 */
  --dim:       #45605c;   /* ~5.6:1 */
  --dimmer:    #526c68;   /* ~4.8:1, still AA for small text */
  --faint:     #566e6a;   /* ~4.7:1 as text; acceptable as a border */
  --hush:      #d3dedb;   /* a subtle divider, not text */

  --teal:      #0b7266;   /* primary, ~4.9:1 as text on white */
  --teal-2:    #1f7468;   /* ~4.7:1 */
  --amber:     #8a5e0c;   /* warning, ~4.8:1 */
  --amber-ink: #7a5310;   /* ~5.9:1 */
  --red:       #c0342a;   /* alert & pain, ~4.8:1 */
  --red-ink:   #a62a1e;   /* ~6.4:1 */
  --map-numb:  #2f6fd0;   /* numbness, a blue that holds on white */

  --line:      rgba(11,114,102,0.22);
  --line-soft: rgba(11,114,102,0.12);
  --panel:     rgba(255,255,255,0.82);
  --panel-2:   rgba(255,255,255,0.62);
  --sunk:      #ffffff;   /* inputs read white; the border carries them */

  /* soft shadows — a black ladder is too heavy on a light ground */
  --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);
}

/* 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%, #ffffff 0%, #eef3f2 58%, #e7edeb 100%),
    var(--bg);
}

/* the tilted depth planes (the widescreen cockpit) go pale, not dark */
[data-theme="day"] .col-fields {
  background: linear-gradient(168deg, rgba(255,255,255,0.85), rgba(238,244,242,0.7)); }
[data-theme="day"] .col-sources {
  background: linear-gradient(168deg, rgba(255,255,255,0.7), rgba(238,244,242,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: #ffffff; }

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

@media (max-width: 1099px) {
  .ci-cols { grid-template-columns: 1fr; }
}
/* ── end fb_checkin.css ─────────────────────────────────────────────── */
/* ── end fb_checkin.css ─────────────────────────────────────────────── */

/* ── 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. ─────────────────────────────────────────────────────────── */
/* ==== 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); }

/* ── 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; }
[data-theme="day"] .pill-place { background: rgba(11,114,102,0.10); }
[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) ==== */

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

/* ── 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: #2d6b69;
  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: #2d6b69; 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: #3f6b69; }
.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: #3f6b69; }

/* ── 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: #3f6b69; }
.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(--faint);
  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: #2d6b69; }

.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; }