@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url('../assets/fonts/dm-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url('../assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ==========================================================================
     THE PAPER EDITION IS THE SOURCE.
     --------------------------------------------------------------------------
     Aetheria was built dark and stayed dark, which made it the one property in
     the estate with no paper twin — and /aetheria/ is the address the whole
     site links to, so the default edition of a clinical desk was the one the
     house never serves by default.

     The whole palette is here, in twenty-nine tokens, and css/dark.css restates
     every one of them under html[data-dark] with the original dark values. That
     is the entire difference between the two editions: no second stylesheet of
     rules, no forked markup, no [data-dark] selectors anywhere but that one
     file. Add a colour and it MUST be a token, or the dark edition will not see
     it — there are no literals left outside this block and it should stay that
     way.

     THE ACCENTS HAD TO MOVE, NOT INVERT. #3ad4c5 is a beautiful teal on a
     near-black ground and it measures 1.6:1 on white, which is not a colour, it
     is a suggestion of one. The paper teal is the same hue taken down to
     4.8:1 against this ground. Gold, rose and blue got the same treatment.

     THE VIEWER FOLLOWS THE EDITION. These three used to be black in both, on
     the argument that a reading room is dark — and that is true of a reading
     room and not of this page. On the paper edition a black slab in the middle
     of a white page is a hole, and the property is meant to look like the rest
     of the estate in both editions.

     THE IMAGE ITSELF IS UNAFFECTED. The canvas draws pixel data; a CT whose
     background pixels are black still renders black. What changes is the
     LETTERBOX — the surround where there is no image — and the panel behind it.
     ========================================================================== */
  /* THE PAPER IS WHITE. The first version of this palette was #F6F4EF — a warm
     stock chosen on its own, which is exactly the problem: read beside any other
     paper page on the estate it was visibly beige, a different site wearing the
     same furniture. The house paper is #ffffff with #FAFAFA for anything
     recessed, and these are those values rather than an interpretation of them.
     A card is white on white and is told apart by its hairline, which is how
     every other paper edition here works. */
  --bg:        #FFFFFF;   /* the page */
  --bg-2:      #FAFAFA;   /* recessed */
  --elev:      #FFFFFF;   /* a card: white, found by its rule and not by its fill */
  --elev-2:    #F4F4F4;
  --rail:      linear-gradient(180deg, #FAFAFA 0%, #F4F4F4 100%);
  --bar:       rgba(255, 255, 255, 0.92);
  --stage:     #FAFAFA;   /* the panel the viewer sits in */
  --viewer:    #FFFFFF;   /* the letterbox around the image */
  --viewer-veil: rgba(255, 255, 255, 0.82);

  --line:      rgba(30, 38, 43, 0.14);
  --line-2:    rgba(30, 38, 43, 0.07);
  --text:      #1E262B;   /* the house ink */
  --muted:     #5F6A72;
  --faint:     #8A939A;

  /* THE HOUSE TOKENS, DECLARED HERE TOO.
     Aetheria links the estate's shared site.css for the navbar and the drawer,
     and that sheet is written against --ink / --paper / --line-soft, which this
     property's own sheet has never had. Rather than fork the navbar onto this
     property's names, the two vocabularies are pointed at the same values —
     so the house chrome renders correctly in both editions and css/dark.css
     re-points one set, not two. */
  --ink:        #1E262B;
  --ink-77:     rgba(30, 38, 43, .77);
  --ink-55:     rgba(30, 38, 43, .64);
  --paper:      #FFFFFF;
  --tint:       #FAFAFA;
  --deep:       #11161C;
  --line-soft:  rgba(30, 38, 43, .07);
  --line-dark:  rgba(255, 255, 255, .13);
  --accent:     #C2410C;
  --accent-fill: #FB923C;
  /* The house LAYOUT tokens the extracted chrome measures itself in. Without
     these the navbar has no height, no gutter and no max width, and it renders
     41px tall against the left edge of the window — which is what it did. */
  /* The extracted desk (.cwd in chrome.css) declares these on .cwd itself, but
     this property uses .cwd__b outside that container — see the Braun pass at
     the foot of this sheet — so the fallbacks matter and the values are here
     too, matched to --ui-h so one desk height rules the whole property. */
  --cwd-h: 34px;
  --cwd-r: 3px;
  --measure:    1265px;
  --gutter:     clamp(20px, 5vw, 56px);
  --nav-h:      74px;
  --ease:       cubic-bezier(.22, .61, .36, 1);
  /* Two greys the chrome mixes with. On paper they are ink; the dark edition
     re-points them, because a scrim and a rule drawn in ink are invisible on a
     dark ground. */
  --chrome-wash: rgba(30, 38, 43, .045);
  --chrome-edge: rgba(30, 38, 43, .52);
  --chrome-scrim: rgba(17, 22, 28, .38);
  --chrome-shadow: rgba(30, 38, 43, .10);
  --on-ink:     #ffffff;

  /* ==========================================================================
     NO TEAL. THE HOUSE PALETTE, IN BOTH EDITIONS.
     --------------------------------------------------------------------------
     This desk arrived with a teal-and-gold clinical palette of its own, and on
     paper it read as a different site: labs.llc sets its primary action in INK
     and spends exactly one accent, the burnt print red, on hairlines, eyebrows
     and live indicators — never as a large fill.

     --teal is kept as a TOKEN NAME because forty rules across this sheet call
     it, and renaming forty rules to change one value is how a palette change
     becomes a rewrite. It is the action colour, and the action colour is ink.
     If you are adding a rule, use --teal for "the thing you press" and --accent
     for "the thing that is marked", and it will be right in both editions.
     ========================================================================== */
  --teal:      #1E262B;                       /* the action: ink, as the house */
  --teal-dim:  rgba(30, 38, 43, 0.06);
  --teal-edge: rgba(30, 38, 43, 0.45);
  --teal-glow: rgba(30, 38, 43, 0.10);
  --on-teal:   #FFFFFF;
  --mark-fill: transparent;                   /* the mark is drawn, not filled */
  --wash-teal:   rgba(30, 38, 43, 0.025);
  --wash-teal-2: rgba(30, 38, 43, 0.04);

  --gold:      #C2410C;                       /* the house accent */
  --gold-dim:  rgba(194, 65, 12, 0.10);
  --gold-edge: rgba(194, 65, 12, 0.28);
  --gold-fill: #C2410C;
  --on-gold:   #FFFFFF;
  --wash-gold: rgba(194, 65, 12, 0.04);

  --rose:      #A3231B;
  --rose-dim:  rgba(163, 35, 27, 0.08);
  --rose-edge: rgba(163, 35, 27, 0.30);
  --ok:        #2F6B46;
  --ok-dim:    rgba(47, 107, 70, 0.10);
  --warn:      #8A5D0C;
  --warn-dim:  rgba(138, 93, 12, 0.12);
  --blue:      #1B5AA0;

  --away:      rgba(23, 36, 44, 0.52);
  --away-on:   rgba(23, 36, 44, 0.86);

  --shadow: 0 18px 44px rgba(23, 36, 44, 0.10);
  --radius: 16px;
  --radius-sm: 10px;
  --nav-w: 268px;
  --top: 64px;
  /* ONE FAMILY, WHICH IS WHAT THE HOUSE DOES. The display sizes are DM Sans
     at weight 200, not a second face — see .d1 in the estate's own sheet. The
     --serif token is kept pointing at the same stack so the dozen rules that
     name it do not all have to change, and so nothing here can quietly
     reintroduce a serif. */
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: var(--sans);
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* THE APP FILLS WHAT THE NAVBAR LEAVES.
   .app was height: 100% under a sticky navbar that occupies flow space, so the
   page came out exactly one navbar taller than the window and the bottom of the
   sidebar — the export, import and wipe keys — sat off the screen. A flex
   column costs nothing and needs no magic number: the bar takes its own height,
   whatever that turns out to be, and the desk takes the rest. */
html { height: 100%; }
body {
  /* A DEFINITE HEIGHT, NOT A MINIMUM. min-height: 100% floors the body and does
     not cap it, so the flex below had nothing to distribute and the desk simply
     took its content height — the page came out 29px taller than the window and
     the sidebar's export, import and wipe keys sat under the bottom edge. This
     desk is an app shell: the bar and the rail are fixed, and .view scrolls
     inside itself, which it was already written to do. */
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  letter-spacing: -0.01em;
}
button, input, select, textarea { font-family: inherit; color: inherit; }
a { color: var(--teal); text-decoration: none; }
img { max-width: 100%; display: block; }

.app { display: flex; flex: 1 1 auto; min-height: 0; }

/* Sidebar */
.sidebar {
  width: var(--nav-w);
  overflow-y: auto;
  background: var(--rail);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  flex-shrink: 0;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 10px 22px;
}
/* THE MARK IS DRAWN, NOT FILLED. It was a 36px rounded tile of teal gradient
   with a white glyph knocked out of it and a coloured glow under it — three
   things paper does not do. It is a hairline square with the rod drawn in ink
   now, at the same weight as the rules around it, which is what a printed mark
   looks like. */
.mark {
  width: 34px; height: 34px; border-radius: 4px;
  background: var(--mark-fill);
  border: 1px solid var(--line);
  color: var(--text);
  display: grid; place-items: center;
  box-shadow: none;
}
.mark svg { width: 18px; height: 18px; display: block; }
.brand h1 {
  font-family: var(--serif);
  font-size: 22px; font-weight: 400;
  letter-spacing: 0.02em;
}
.brand span { display: block; font-size: 11px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }

.nav-group { margin-bottom: 18px; }
.nav-label {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); padding: 6px 12px 8px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; border: 0; background: transparent;
  color: var(--muted); padding: 9px 12px;
  border-radius: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 500;
  text-align: left; transition: 0.15s ease;
}
.nav-item:hover { background: var(--line-2); color: var(--text); }
.nav-item.active {
  background: var(--teal-dim); color: var(--teal);
}
.nav-item svg { width: 18px; height: 18px; opacity: 0.85; flex-shrink: 0; }

.sidebar-foot {
  margin-top: auto; padding: 12px;
  border-top: 1px solid var(--line);
}
.disclaimer {
  font-size: 11px; line-height: 1.45; color: var(--faint);
}

/* Main */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  height: var(--top);
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bar);
  backdrop-filter: blur(16px);
}
.crumb { font-size: 13px; color: var(--muted); }
.crumb strong { color: var(--text); font-weight: 600; }
.top-search {
  margin-left: auto;
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  display: flex; align-items: center; gap: 8px;
  min-width: 240px;
}
.top-search input {
  background: none; border: 0; outline: none;
  width: 100%; font-size: 13px; color: var(--text);
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gold-fill);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--on-gold);
}

.view {
  flex: 1; overflow: auto; padding: 28px 32px 48px;
  background:
    radial-gradient(1200px 400px at 80% -10%, var(--wash-teal), transparent 50%),
    var(--bg);
}

/* Typography */
.page-kicker {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.page-title {
  font-family: var(--serif);
  font-size: 36px; font-weight: 400; line-height: 1.15;
  margin-bottom: 8px;
}
.page-lead { color: var(--muted); max-width: 620px; margin-bottom: 28px; line-height: 1.55; }

/* Cards */
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.card h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.stat-val {
  font-family: var(--serif);
  font-size: 32px; margin: 8px 0 4px;
}
.stat-sub { font-size: 12px; color: var(--faint); }

/* Controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer;
  border-radius: 11px; padding: 10px 16px;
  font-size: 13.5px; font-weight: 600;
  transition: 0.15s ease;
}
.btn-primary { background: var(--teal); color: var(--on-teal); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--elev-2); }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-danger { background: var(--rose-dim); color: var(--rose); }
.btn-sm { padding: 7px 12px; font-size: 12px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 600; }
.field input, .field select, .field textarea {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  font-size: 14px;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal-edge);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12.5px;
  cursor: pointer;
}
.chip.on { background: var(--teal-dim); color: var(--teal); border-color: transparent; }

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left; color: var(--faint); font-weight: 600;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 8px; border-bottom: 1px solid var(--line);
}
.table td { padding: 12px 8px; border-bottom: 1px solid var(--line-2); }
.badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.badge-ok { background: var(--ok-dim); color: var(--ok); }
.badge-warn { background: var(--warn-dim); color: var(--warn); }
.badge-teal { background: var(--teal-dim); color: var(--teal); }
.badge-gold { background: var(--gold-dim); color: var(--gold); }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 16px; }

/* Symptom */
.body-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.body-btn {
  background: var(--elev-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; cursor: pointer;
  color: var(--text); text-align: left;
}
.body-btn.on { border-color: var(--teal); background: var(--teal-dim); }

/* Calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .dow { font-size: 11px; color: var(--faint); text-align: center; padding: 4px; }
.cal .day {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid transparent;
  background: var(--bg-2); color: var(--muted); cursor: pointer; font-size: 13px;
}
.cal .day:hover { border-color: var(--line); color: var(--text); }
.cal .day.on { background: var(--teal); color: var(--on-teal); font-weight: 700; }
.cal .day.has { box-shadow: inset 0 -3px 0 var(--gold); }
.slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.slot {
  border: 1px solid var(--line); background: var(--bg-2);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px;
}
.slot.on { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }

/* Charts */
.spark {
  width: 100%; height: 120px;
}
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }

/* Telehealth */
.video-stage {
  position: relative;
  background: var(--stage);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  min-height: 420px;
  overflow: hidden;
}
.video-stage video {
  width: 100%; height: 420px; object-fit: cover; background: var(--viewer);
}
.video-pip {
  position: absolute; right: 16px; bottom: 16px;
  width: 180px; height: 120px; border-radius: 12px;
  overflow: hidden; border: 1px solid var(--line);
  background: var(--viewer);
}
.video-pip video { width: 100%; height: 100%; object-fit: cover; }
.video-overlay {
  position: absolute; left: 16px; top: 16px;
  background: var(--viewer-veil); padding: 8px 12px; border-radius: 8px;
  font-size: 12px;
}
.call-bar {
  display: flex; justify-content: center; gap: 10px; margin-top: 14px;
}
.call-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--elev-2); color: var(--text);
}
.call-btn.end { background: var(--rose); color: white; }

/* Imaging */
.imager {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  min-height: 560px;
}
.canvas-wrap {
  background: var(--viewer);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  position: relative;
  min-height: 560px;
  display: grid; place-items: center;
  overflow: hidden;
}
#dicomCanvas { max-width: 100%; max-height: 560px; cursor: crosshair; }
.dropzone {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted); text-align: center; padding: 24px;
  border: 1px dashed var(--gold-edge);
  margin: 16px; border-radius: 12px;
}
.dropzone.hidden { display: none; }
.meta-row {
  display: flex; justify-content: space-between;
  font-size: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--line-2);
  gap: 12px;
}
.meta-row span:first-child { color: var(--faint); }
.meta-row span:last-child { color: var(--text); font-family: var(--mono); font-size: 11px; text-align: right; }

.range { width: 100%; accent-color: var(--teal); }

/* Quiz */
.q-card { padding: 8px 0 16px; }
.opt {
  display: block; width: 100%; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  cursor: pointer; color: var(--text);
}
.opt.correct { border-color: var(--ok); background: var(--ok-dim); }
.opt.wrong { border-color: var(--rose); background: var(--rose-dim); }

/* Doctors */
.doc {
  display: flex; gap: 14px; align-items: flex-start;
}
.avatar-lg {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: grid; place-items: center;
  font-weight: 700; color: var(--on-teal);
}

/* Mood */
.moods { display: flex; gap: 8px; }
.mood {
  flex: 1; border: 1px solid var(--line); background: var(--bg-2);
  border-radius: 12px; padding: 14px 8px; cursor: pointer;
  text-align: center; font-size: 22px;
}
.mood.on { border-color: var(--gold); background: var(--gold-dim); }

/* Toast */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--elev-2); border: 1px solid var(--line);
  padding: 12px 16px; border-radius: 12px;
  box-shadow: var(--shadow); z-index: 50;
  font-size: 13px;
}

/* Welcome overlay */
.gate {
  position: fixed; inset: 0; z-index: 80;
  background:
    radial-gradient(800px 400px at 20% 0%, var(--wash-teal-2), transparent),
    radial-gradient(600px 400px at 90% 80%, var(--wash-gold), transparent),
    var(--stage);
  display: grid; place-items: center;
}
.gate-card { max-width: 520px; text-align: center; padding: 24px; }
.gate-card h2 {
  font-family: var(--serif); font-size: 48px; font-weight: 400; margin: 16px 0 10px;
}
.gate-card p { color: var(--muted); margin-bottom: 28px; line-height: 1.6; }

.hidden { display: none !important; }

@media (max-width: 1100px) {
  .grid-4, .grid-3, .split, .imager { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
  .top-search { display: none; }
  .view { padding: 18px; }
}

.menu-btn {
  display: none;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  background: var(--elev);
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
}
.foot-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.worklist { display: flex; flex-direction: column; gap: 8px; }
.work-row {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  text-align: left;
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  color: inherit;
}
.work-row:hover { border-color: var(--teal-edge); }
.work-title { font-size: 15px; font-weight: 600; margin-top: 4px; }
.search-drop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--elev-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  z-index: 40;
  overflow: hidden;
}
.top-search { position: relative; }
.search-drop button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--text);
  padding: 10px 14px; cursor: pointer;
}
.search-drop button:hover { background: var(--teal-dim); }
.cal .day.past { opacity: 0.28; cursor: not-allowed; }
.cal .day:disabled { opacity: 0.28; cursor: not-allowed; }
.emergency {
  background: var(--rose-dim);
  border: 1px solid var(--rose-edge);
  border-radius: 14px;
  padding: 16px;
}
.emergency h3 { color: var(--rose); }
.path-block { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.path-block ul { margin: 8px 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.vitals-chip {
  background: var(--teal-dim);
  color: var(--teal);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
}
.phi-warn {
  background: var(--rose-dim);
  color: var(--rose);
  border: 1px solid var(--rose-edge);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 14px;
}
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.series-list { display: flex; flex-direction: column; gap: 6px; }
.series-btn {
  display: flex; justify-content: space-between;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 12px;
}
.series-btn.on { border-color: var(--teal); background: var(--teal-dim); color: var(--teal); }
.read-card { font-size: 13px; color: var(--muted); line-height: 1.5; }

@media (max-width: 1100px) {
  .menu-btn { display: grid; place-items: center; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0;
    z-index: 60;
    transform: translateX(-110%);
    width: min(280px, 86vw);
    padding: 16px 14px;
    transition: transform 0.2s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .brand h1, .nav-label, .nav-item span, .sidebar-foot, .brand span { display: revert; }
  .nav-item { justify-content: flex-start; padding: 9px 12px; }
  .sidebar-foot { display: block; }
}
@media (max-width: 720px) {
  .top-search { display: flex; min-width: 0; flex: 1; }
  body { overflow: auto; }
  .app { min-height: 100%; height: auto; }
}

/* ------------------------------------------------------------- THE ESTATE
   One mark at the foot of the app's own rail. This property is a desk with a
   sidebar of its own, so a house navbar across the top would be a second set of
   controls arguing with the first; a single way back is the whole of it. */
.labs-home {
  display: block;
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--away);
  text-decoration: none;
}
.labs-home:hover { color: var(--away-on); }

/* -------------------------------------------------------------- the edition
   Two words at the foot of the rail. The lit one is a span, the other a link,
   which is why they are styled separately rather than as one class with a
   modifier — they are different elements, not the same element in two states. */
.ed {
  display: flex; align-items: stretch; gap: 0;
  margin: 10px 0 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  width: max-content;
}
.ed__on, .ed__off {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 12px; line-height: 1.6;
  text-decoration: none;
}
.ed__on  { background: var(--teal); color: var(--on-teal); }
.ed__off { color: var(--faint); }
.ed__off:hover { color: var(--text); background: var(--elev-2); }
.ed__off:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------------------------------------------------------- the two registers
   Clinicians and hospitals are different files with different fields, so they
   are different panels rather than one list with a filter on it. */
.ftabs { display: flex; gap: 6px; margin: 0 0 16px; }
.ftab {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
}
.ftab:hover { color: var(--text); border-color: var(--faint); }
.ftab.on { background: var(--teal); color: var(--on-teal); border-color: var(--teal); }
.ftab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* CMS's rating, drawn as CMS scores it: one to five, and the unearned stars
   shown dim rather than omitted, so four out of five reads as four out of five
   rather than as four. */
.hstar { color: var(--gold); letter-spacing: 2px; font-size: 14px; }
.hstar__off { color: var(--line); }

/* --------------------------------------------------------------- the footer
   THIS DESK IS AN APP SHELL, so the house footer cannot be a tall block at the
   end of a document — there is no document to be at the end of. The bar and the
   rail are fixed and .view scrolls inside itself, so the footer is a slim strip
   at the foot of the content column: always there, never scrolled away from,
   and never wiped, because it sits beside .view rather than inside it (the
   router replaces .view's innerHTML on every route). */
.foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--bar);
  padding: 10px 28px;
  font-size: 11.5px;
  /* --muted, not --faint. The footer is small but it is real text with real
     links in it, and --faint measures 3.66:1 on the dark ground — under the
     4.5:1 floor for anything at this size. --faint is for a label beside
     something else that carries the meaning; this carries its own. */
  color: var(--muted);
}
.foot__in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: none; margin: 0; padding: 0; }
.foot__in p { margin: 0; margin-right: auto; }
.foot__legal { color: inherit; }
.foot__links { display: flex; gap: 14px; flex-wrap: wrap; }
.foot__links a { color: var(--muted); text-decoration: none; }
.foot__links a:hover { color: var(--text); }
.foot__ver { color: var(--muted); margin-left: 8px; }
@media (max-width: 720px) {
  .foot { padding: 10px 16px; font-size: 11px; }
  .foot__in { gap: 10px; }
}

/* ==========================================================================
   THE SYMPTOM CHECKER
   ==========================================================================
   The desk's controls are the estate's shared Braun panel (.cwd), so the region
   select, the search and the duration are the same height, radius and label
   recipe as every other control on labs.llc. Everything below is what this
   module adds: the figure, the chips, the count and the condition cards. */
.sym { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.sym__fig h3, .sym__desk h3 { margin-bottom: 10px; }

/* ---- the figure */
.fig { display: flex; gap: 10px; align-items: flex-start; justify-content: center; }
.fig__body { flex: 0 0 auto; width: 128px; }
.fig__face { flex: 0 0 auto; width: 84px; padding-top: 12px; }
.fig__svg { display: block; width: 100%; height: auto; color: var(--teal); }
.fig__r {
  fill: var(--elev-2);
  stroke: var(--line);
  stroke-width: 1;
  cursor: pointer;
  transition: fill .16s ease, stroke .16s ease;
}
.fig__r:hover { stroke: var(--teal); }
.fig__r:focus-visible { outline: none; stroke: var(--teal); stroke-width: 2; }
/* THE BACK IS A BAND DOWN THE SPINE on a front elevation, so it is drawn
   quieter than the rest — it is a label for a place, not a picture of one. */
.fig__r--back { fill: transparent; stroke-dasharray: 3 3; }
.fig__r.is-picked { fill: var(--teal); stroke: var(--teal); }
/* COVERED is hatched, not tinted. Two alphas of one colour read as more and
   less of the same thing; "you said so" and "the shortlist reaches here" are
   different kinds of statement and get different marks. */
.fig__r.is-covered { stroke: var(--teal); color: var(--teal-edge); }
.fig__key { display: flex; gap: 14px; margin: 10px 0 6px; justify-content: center; }
.fig__key > div { display: flex; align-items: center; gap: 6px; }
.fig__key dd { font-size: 11px; color: var(--muted); margin: 0; }
.fig__sw { width: 12px; height: 12px; border-radius: 3px; margin: 0; }
.fig__sw--p { background: var(--teal); }
.fig__sw--c { background: var(--teal-dim); border: 1px solid var(--teal-edge); }

/* ---- the chips */
.sym__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; max-height: 260px; overflow-y: auto; }
.sym__picked { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line); }
.chip--x { padding-right: 8px; }
/* THE PICKED COUNT IS A READOUT, and it is dressed as one — no border, no
   field ground, sitting on the key row rather than in the grid of inputs. */
.cwd__keys--sym { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; }
.sym__n { margin: 0; justify-self: end; font-size: 11px; color: var(--muted);
  letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: baseline; gap: 6px; }
.sym__n b { font-size: 18px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ---- red flags. Loud on purpose, and only when one is real. */
.flags { border: 1px solid var(--rose-edge); background: var(--rose-dim); margin-top: 16px; }
.flags__h { color: var(--rose); margin-bottom: 6px; }
.flags__l { font-size: 13px; margin-bottom: 8px; }
.flags__u { margin: 0; padding-left: 18px; }
.flags__u li { font-size: 13.5px; line-height: 1.55; margin-bottom: 4px; }

/* ---- the count */
.sym__narrow { margin-top: 16px; }
.narrow__top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.narrow__n { display: flex; align-items: baseline; gap: 8px; }
.narrow__n b { font-family: var(--serif); font-size: 40px; font-weight: 400; line-height: 1; color: var(--teal); }
.narrow__n span { font-size: 12px; color: var(--muted); }
.narrow__b { display: flex; gap: 8px; flex-wrap: wrap; }
.dot { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
.dot--emergency { color: var(--rose); border-color: var(--rose-edge); background: var(--rose-dim); }
.dot--urgent { color: var(--warn); border-color: var(--gold-edge); background: var(--warn-dim); }
.dot--routine { color: var(--muted); }
.narrow__rule { font-size: 12px; color: var(--muted); margin: 10px 0 14px; line-height: 1.55; }
.narrow__more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.narrow__more summary { cursor: pointer; font-size: 13px; color: var(--muted); }

/* ---- condition cards */
.cond { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 10px; }
.cond--emergency { border-left-color: var(--rose); }
.cond--urgent { border-left-color: var(--warn); }
.cond--routine { border-left-color: var(--teal); }
.cond__h { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.cond__h h4 { font-size: 15px; }
.cond__u { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cond--emergency .cond__u { color: var(--rose); }
.cond--urgent .cond__u { color: var(--warn); }
.cond__p { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.cond__m { font-size: 12px; margin-top: 6px; color: var(--muted); }
.cond__m b { color: var(--text); }
/* The verifier's escalation, where one reviewer judged an urgency not
   conservative enough. It is the most important sentence on the card. */
.cond__esc { font-size: 12.5px; margin-top: 8px; padding: 8px 10px; line-height: 1.5;
  border-radius: 6px; background: var(--rose-dim); color: var(--text); border: 1px solid var(--rose-edge); }
.cond__n { font-size: 12px; margin-top: 6px; color: var(--muted); line-height: 1.5; }
.cond__s { font-size: 12px; margin-top: 8px; color: var(--muted); }
.cond__tax { font: inherit; font-size: 12px; background: none; border: 0; padding: 0;
  color: var(--teal); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cond__tax:hover { color: var(--text); }
.care__tax { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.care__out { margin-top: 14px; }

@media (max-width: 900px) {
  .sym { grid-template-columns: minmax(0, 1fr); }
  .fig__body { width: 108px; }
  .fig__face { width: 72px; }
  .sym__chips { max-height: none; }
}

/* ==========================================================================
   THE BRAUN PASS — one height, one radius, one label recipe
   ==========================================================================
   MEASURED BEFORE, on this sheet: TEN radii (12, 10, 999, 16, 14, 11, 8, 4, 3
   and var(--radius)) and control heights that were whatever their padding
   happened to produce — a .btn at one height, a .btn-sm at another, a field at
   a third, a chip at a fourth. Four heights and ten radii in one desk is what
   made it read as soft rather than as an instrument.

   AFTER: one control height, --ui-h. Two radii and both are decisions — 3px on
   anything rectangular, 999px on a chip, because a chip is a token you add and
   remove and its shape is what says so. One type recipe for every label.

   THESE RULES COME LAST IN THE SHEET AND THEY ARE MEANT TO. They are a pass
   over what is already here, not a redefinition of it: everything above still
   owns its own layout and this owns the control geometry. Adding a control?
   Give it --ui-h and var(--ui-r) and it will match without being told.

   TOUCH TARGETS GROW, THEY DO NOT SHRINK. At pointer:coarse the height goes to
   44px and every input goes to 16px — under 16px iOS Safari zooms the page on
   focus and leaves the fixed chrome off-screen. */
:root { --ui-h: 34px; --ui-r: 3px; }
@media (hover: none) and (pointer: coarse) { :root { --ui-h: 44px; } }

.btn, .btn-sm, .field input, .field select, .field textarea,
input[type="text"], input[type="date"], input[type="number"], select {
  height: var(--ui-h);
  border-radius: var(--ui-r);
  box-sizing: border-box;
  font-size: 13px;
  line-height: normal;
}
.field textarea { height: auto; min-height: calc(var(--ui-h) * 2.2); padding: 8px 10px; }
.btn, .btn-sm {
  padding: 0 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); background: transparent; color: var(--text);
}
.btn:hover, .btn-sm:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
/* THE ONE FILLED KEY PER PANEL. The house spends ink on the primary action and
   nothing else; two filled buttons side by side is two primary actions, which
   is none. */
.btn-primary { background: var(--teal); color: var(--on-teal); border-color: var(--teal); }
.btn-primary:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn-gold { background: transparent; color: var(--gold); border-color: var(--gold-edge); }
.btn-gold:hover { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn-danger { background: transparent; color: var(--rose); border-color: var(--rose-edge); }
.btn-danger:hover { background: var(--rose); color: var(--bg); border-color: var(--rose); }
.btn-ghost { background: transparent; }

.field input, .field select, .field textarea,
input[type="text"], input[type="date"], input[type="number"], select {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 0 10px;
}
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus { outline: none; border-color: var(--text); }

/* ONE LABEL RECIPE, everywhere a control is named. */
.field label, .nav-label, .cwd__l, .stat-label {
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

/* A CHIP KEEPS ITS PILL. It is a token you add and take away and the shape is
   what says so — but it is on the desk's height family and its type recipe. */
.chip, button.chip {
  height: calc(var(--ui-h) - 6px);
  padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.chip:hover { border-color: var(--text); color: var(--text); }
.chip.on { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The cards lose their soft corners with everything else. */
.card, .cond, .cwd__i, .cwd__b { border-radius: var(--ui-r); }
.nav-item { border-radius: var(--ui-r); }
.sidebar .nav-item.active { background: var(--teal-dim); color: var(--text); }

/* ---- the two modes, the Go key, the live line, and the disclaimer */
.segp { display: inline-flex; border: 1px solid var(--line); border-radius: var(--ui-r);
  overflow: hidden; margin-bottom: 12px; }
.seg__b { font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; height: calc(var(--ui-h) - 4px); padding: 0 14px;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.seg__b + .seg__b { border-left: 1px solid var(--line); }
.seg__b[aria-pressed="true"] { background: var(--teal); color: var(--on-teal); }
.seg__b:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* THE hidden ATTRIBUTE DOES NOTHING ON A DISPLAY-ED ELEMENT, and this is
   where that bit me. The browser's own sheet says [hidden] { display: none }
   at (0,1,0); .cwd__fields says display: grid at (0,1,0) too, in an author
   sheet, which wins on order. So the comprehensive half was ALWAYS visible and
   the two modes were the same panel with a different button lit — which is
   exactly what it looked like.

   Any element that carries a display rule AND is toggled with `hidden` needs
   this line. It is not defensive; it is the only thing making the attribute
   work. */
.sym__more { margin-top: var(--cwd-gap, .4rem); }
.sym__more[hidden] { display: none; }
.cwd__keys--sym { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.cwd__b--go { background: var(--teal); color: var(--on-teal); border-color: var(--teal);
  padding: 0 20px; }
.cwd__b--go:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.cwd__ro { display: flex; align-items: center; height: var(--cwd-h, 34px);
  font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cwd__ro b { color: var(--text); font-size: 16px; margin-right: 4px; }

.sym__live { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.sym__live b { color: var(--text); font-variant-numeric: tabular-nums; }

/* The context notes. Quieter than a red flag and louder than body copy — they
   are not "call an ambulance", they are "this changes what the list means". */
.notes { margin-top: 12px; border-left: 3px solid var(--gold); }
.notes__h { color: var(--gold); margin-bottom: 8px; }
.notes p { font-size: 13.5px; line-height: 1.6; margin-bottom: 8px; }
.notes__f { font-size: 12px !important; color: var(--muted); margin-bottom: 0 !important;
  padding-top: 8px; border-top: 1px solid var(--line); }

.care__n { font-size: 13px; margin-bottom: 12px; }
.care__n b { font-size: 20px; font-variant-numeric: tabular-nums; }
.care__n span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.care__mi { font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }
.care__both { font-size: 11.5px; color: var(--muted); }
.chip--flat { cursor: default; }
.chip--flat:hover { border-color: var(--line); color: var(--muted); }
.cwd__fields--care { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.disc { margin-top: 18px; border-left: 3px solid var(--rose); }
.disc__h { color: var(--rose); margin-bottom: 8px; }
.disc p { font-size: 13px; line-height: 1.6; margin-bottom: 10px; }
.disc__f { font-size: 12px !important; color: var(--muted); padding-top: 10px;
  border-top: 1px solid var(--line); margin-bottom: 0 !important; }

@media (max-width: 900px) {
  .cwd__keys--sym { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sym__n { justify-self: start; }
  .cwd__fields--care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- the next-best questions. Comprehensive mode's actual work. */
.sym__ask { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sym__ask[hidden] { display: none; }
.sym__ask-h { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
.sym__ask-h b { color: var(--text); }
.sym__ask-r { display: flex; flex-wrap: wrap; gap: 8px; }
.ask { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 12px; }
.ask > b { font-weight: 500; color: var(--text); }
.ask__n { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  letter-spacing: .06em; }
.ask__y, .ask__no { font: inherit; font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; height: 22px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.ask__y:hover { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.ask__no:hover { background: var(--muted); border-color: var(--muted); color: var(--bg); }
.sym__ask-f { margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.ask__reset { font: inherit; font-size: 11.5px; background: none; border: 0; padding: 0;
  color: var(--gold); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---- the save bars, and the imaging stage on paper */
.saverow { align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line); }
.saverow .cwd__l { margin-right: 2px; }

/* THE STAGE FOLLOWS THE EDITION. Both stages were black in both editions,
   which on a white page is a hole cut in it. They take --viewer and --stage,
   and those tokens now flip — so nothing here changes except the two values.

   THE IMAGE IS UNAFFECTED. The canvas draws its own pixel data: a CT whose
   background pixels are black still renders black. What turns paper is the
   LETTERBOX around the image and the panel behind it.

   .canvas-wrap and .video-stage are the real class names; an earlier version of
   this block styled a .dicom-stage that does not exist anywhere in the markup. */
.canvas-wrap { border: 1px solid var(--line); }
#dicomCanvas { background: var(--viewer); }
/* The dropzone's prompt sits ON the stage, so it has to read on either ground. */
.dropzone { color: var(--muted); }
.canvas-wrap .hud, .video-stage .hud {
  color: var(--text); background: var(--viewer-veil);
}