/* Clinical worklist.
   Visual design ported from the validated Clinical Mode mockup. Every colour,
   radius and font here resolves to a token already declared in index.html's
   :root — nothing is redefined, so a palette change there moves this page too.

   Every class is `clin-`-prefixed. index.html already ships `.chip`,
   `.filters`, `.view-toggle` and `.table-wrap` for other pages, and this file
   is loaded globally rather than scoped to the page, so unprefixed names would
   silently restyle them. */

/* .page.active supplies `display:flex; flex-direction:column; height:100%`;
   #clinical-root has no sizing of its own, so claim the column here. */
#clinical-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The worklist and the case detail are siblings; exactly one is shown at a
   time. The [hidden] rules are not redundant with the UA stylesheet: the id
   selectors below outrank `[hidden] { display: none }`, so without them a
   hidden container would still lay out. */
#clin-worklist {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#clin-detail {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
#clin-worklist[hidden], #clin-detail[hidden] { display: none; }

/* ── Demo banner ──────────────────────────────────────────────────────────
   Mirrors learning/js/demo_banner.js: no close control, nothing persisted.
   Every case behind this page is synthetic (the server gates clinical writes
   on ORION_CLINICAL_ENABLED), and a disclaimer a pathologist can dismiss on
   day one is a disclaimer that exists for the author rather than the reader. */
.clin-demo-banner {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 24px;
  background: linear-gradient(180deg, rgba(217, 119, 6, .17), rgba(217, 119, 6, .09));
  border-bottom: 1px solid rgba(217, 119, 6, .38);
  font-size: 12.5px;
  line-height: 1.4;
  color: #F2DCB4;
}
.clin-demo-mark {
  flex: none;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--amber);
  color: #1A1206;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}
.clin-demo-note { color: rgba(242, 220, 180, .62); }

/* ── Toolbar ──────────────────────────────────────────────────────────────
   No page title: the SPA's global topbar already renders "Clinical" /
   "Clinical Worklist" from pageTitles + pageBreadcrumbs. */
.clin-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px 0;
}
.clin-count {
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}
.clin-spacer { flex: 1; }

.clin-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  width: 300px;
  max-width: 42vw;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.clin-search:focus-within { border-color: var(--brand-light); }
.clin-search svg { width: 15px; height: 15px; flex: none; }
.clin-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-size: 12.5px;
}
.clin-search input::placeholder { color: var(--text-muted); }

.clin-viewtoggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.clin-viewtoggle button {
  width: 30px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: none;
  color: var(--text-muted);
}
.clin-viewtoggle button:hover { color: var(--text); }
.clin-viewtoggle button.active { background: var(--brand-dim); color: var(--brand-light); }
.clin-viewtoggle svg { width: 15px; height: 15px; }

/* ── Filter chips ── */
.clin-filters {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 24px 0;
}
.clin-chip {
  font-size: 12px;
  padding: 6px 13px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.clin-chip:hover { border-color: var(--border-strong); color: var(--text); }
.clin-chip.active {
  background: var(--brand-dim);
  border-color: transparent;
  color: var(--brand-light);
  font-weight: 600;
}

/* ── Scroll region ── */
.clin-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px 32px;
}

/* Cards and rows open a case. Cursor and focus ring only — no hover lift or
   colour change beyond what the list already has, so the affordance does not
   compete with the priority accent for attention. */
.clin-card, table.clin-table tbody tr[data-case-id] { cursor: pointer; }
.clin-card:focus-visible,
table.clin-table tbody tr[data-case-id]:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: -2px;
}

/* ── Card grid ── */
.clin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 14px;
}
.clin-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.clin-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.clin-card.clin-p-high { border-left-color: var(--rose); }
.clin-card.clin-p-medium { border-left-color: var(--amber); }

/* Slide strip. The mockup tiled one block per stain; the worklist API returns
   only a count, so these are deliberately unlabelled and all one colour —
   inventing "H&E" / "ER" chips would be fabricating data the server never
   sent. The footer states the count in words. */
.clin-strip {
  display: flex;
  gap: 1px;
  height: 58px;
  background: var(--bg-alt);
}
.clin-tile {
  flex: 1;
  min-width: 0;
  background: linear-gradient(160deg, #33234A, #412C5C);
}
.clin-tile-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}
.clin-strip-empty {
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 11px;
}

.clin-card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px 10px;
}
.clin-card-patient { font-size: 13px; font-weight: 600; }
.clin-card-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.clin-card-specimen {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.clin-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}
.clin-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* ── Table ──
   table-layout:fixed, not auto: specimen descriptions are free text of any
   length, and under auto layout one long value widens its column until the
   trailing columns (Received, Priority, Status) are pushed out of the
   viewport. Fixed widths also make text-overflow:ellipsis actually apply —
   max-width on a cell is only advisory to the auto algorithm. */
.clin-table-wrap { overflow-x: auto; }
table.clin-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  table-layout: fixed;
}
table.clin-table col.clin-col-patient { width: 18%; }
table.clin-table col.clin-col-accession { width: 12%; }
table.clin-table col.clin-col-mrn { width: 10%; }
table.clin-table col.clin-col-specimen { width: 24%; }
table.clin-table col.clin-col-slides { width: 7%; }
table.clin-table col.clin-col-received { width: 12%; }
table.clin-table col.clin-col-priority { width: 8%; }
table.clin-table col.clin-col-status { width: 9%; }
/* Backstop for the fixed layout: an identifier with no break opportunity
   would otherwise paint straight over the next column. */
table.clin-table td { overflow-wrap: anywhere; }
table.clin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0 14px 10px;
  background: var(--bg);
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  white-space: nowrap;
}
table.clin-table td {
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  vertical-align: middle;
}
table.clin-table tbody tr { transition: background .12s; }
table.clin-table tbody tr:hover { background: var(--surface-hover); }
/* Priority accent. inset box-shadow rather than a border: border-collapse
   would merge a td border into the neighbouring cell edge, and this adds no
   width, so every row's first column starts on the same pixel. */
table.clin-table tbody tr.clin-p-high td:first-child { box-shadow: inset 3px 0 0 var(--rose); }
table.clin-table tbody tr.clin-p-medium td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.clin-cell-patient { font-weight: 600; }
.clin-cell-specimen {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clin-mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ── Status + priority pills ── */
.clin-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.clin-status-new { background: var(--blue-dim); color: var(--blue); }
.clin-status-pending { background: var(--amber-dim); color: var(--amber); }
.clin-status-reviewed { background: var(--green-dim); color: var(--green); }
.clin-status-unknown { background: rgba(255, 255, 255, .05); color: var(--text-muted); }

/* The known statuses and priorities are short words. The fallback pills echo
   whatever the server sent, which is the one path here that can render a
   string of arbitrary length — cap it so it cannot spill out of its column. */
.clin-status-unknown,
.clin-prio-unknown {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.clin-prio {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .05);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.clin-prio.clin-p-high { background: var(--rose-dim); color: var(--rose); }
.clin-prio.clin-p-medium { background: var(--amber-dim); color: var(--amber); }

/* ── Case detail ──────────────────────────────────────────────────────── */
.clin-detail-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px 16px;
  padding: 16px 24px 18px;
  border-bottom: 1px solid var(--border);
}
.clin-back {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px 0 8px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.clin-back:hover { border-color: var(--border-strong); color: var(--text); }
.clin-back svg { width: 14px; height: 14px; }

.clin-detail-title { min-width: 0; }
.clin-detail-title h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  overflow-wrap: anywhere;
}
.clin-detail-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 5px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
/* Separator drawn on the gap rather than emitted as a character, so the ids
   reflow without leaving a dot stranded at the end of a line. */
.clin-detail-ids > span + span::before {
  content: '·';
  margin-right: 14px;
  color: var(--border-strong);
}
/* Capped for the same reason the worklist caps its fallback pills: an
   unrecognised status is echoed back verbatim, and in an auto-sized grid
   column a long one would size the track and crush the patient name. */
.clin-detail-actions { max-width: 34vw; }
.clin-detail-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
/* Sits under the controls it belongs to rather than in a toast: a rejected
   status change has to stay on screen next to the control still showing the
   old value, not slide away after three seconds. */
.clin-action-error {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: right;
  color: var(--rose);
}

/* The <label> exists only to give the select an accessible name, so it must not
   add a box of its own: inline-flex makes it hug the control rather than
   inheriting the row's line-height as vertical padding. */
.clin-statuspick { display: inline-flex; }

/* The status pill and the status control are the same thing at this level, so
   the select wears the pill's colours rather than sitting beside a duplicate.
   appearance:none because a UA-drawn select ignores the palette entirely. */
.clin-status-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 24px 4px 10px;
  border: 1px solid transparent;
  border-radius: 20px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  /* Chevron drawn in the background rather than added as an element, so the
     control stays a single focusable node. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) center, calc(100% - 8px) center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
/* The pill classes set `background`, which would wipe the chevron gradients,
   so the colours are re-declared here against background-color alone. */
.clin-status-select.clin-status-new { background-color: var(--blue-dim); color: var(--blue); }
.clin-status-select.clin-status-pending { background-color: var(--amber-dim); color: var(--amber); }
.clin-status-select.clin-status-reviewed { background-color: var(--green-dim); color: var(--green); }
.clin-status-select.clin-status-unknown {
  background-color: rgba(255, 255, 255, .05);
  color: var(--text-muted);
  max-width: 180px;
}
.clin-status-select:hover { border-color: var(--border-strong); }
.clin-status-select:disabled { opacity: .55; cursor: progress; }
/* input/select carry `outline:none` from the global reset, so focus has to be
   drawn back on by hand or these controls have no visible focus at all. */
.clin-status-select:focus-visible { border-color: var(--brand-light); }
.clin-status-select option {
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
}

.clin-claim {
  padding: 4px 11px;
  border-radius: 20px;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.clin-claim:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-light); }
.clin-claim:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 1px; }
.clin-claim:disabled {
  background: var(--brand-dim);
  border-color: transparent;
  color: var(--brand-light);
  cursor: default;
}

.clin-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 24px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}
.clin-fact { min-width: 0; }
.clin-fact dt {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.clin-fact dd {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
}

.clin-section { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.clin-section:last-child { border-bottom: none; padding-bottom: 32px; }
.clin-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.clin-section-count {
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.clin-section-sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
}

/* pre-wrap: history and gross descriptions are typed with real line breaks,
   and collapsing them turns a structured dictation into one wall of text. */
.clin-prose {
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.clin-empty { color: var(--text-muted); font-style: italic; }
.clin-empty-note { font-size: 12px; color: var(--text-muted); }

/* ── Filmstrip ── */
.clin-filmstrip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}
.clin-slide {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color .15s;
}
.clin-slide:hover { border-color: var(--border-strong); }
.clin-slide.selected { border-color: var(--brand); }
.clin-slide-pick {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 0 9px;
  background: none;
  color: var(--text);
  text-align: left;
}
.clin-slide-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  margin-bottom: 8px;
  background: linear-gradient(160deg, #33234A, #412C5C);
  color: rgba(255, 255, 255, .28);
}
.clin-slide-thumb svg { width: 26px; height: 26px; }
.clin-slide-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.clin-slide.selected .clin-slide-thumb { box-shadow: inset 0 0 0 2px var(--brand); }
.clin-slide-name {
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.clin-stain {
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.clin-slide-open {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}
.clin-slide-open:hover { background: var(--brand-dim); color: var(--brand-light); }
.clin-slide-pick:focus-visible, .clin-slide-open:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: -2px;
}

/* ── Annotations (read-only) ── */
.clin-ann-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.clin-ann {
  display: grid;
  grid-template-columns: 8px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.clin-ann:first-child { border-top: none; }
.clin-ann-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}
.clin-ann-class { font-weight: 600; overflow-wrap: anywhere; }
.clin-ann-shape, .clin-ann-author { color: var(--text-secondary); overflow-wrap: anywhere; }
.clin-ann-time {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Descendant selectors, not bare `.clin-skel-head`: `.clin-skel` sets a height
   of its own further down this file and would win the tie on source order. */
.clin-detail-skel { display: flex; flex-direction: column; gap: 14px; padding: 16px 24px; }
.clin-detail-skel .clin-skel-head { height: 86px; }
.clin-detail-skel .clin-skel-body { height: 240px; }

/* ── Loading / empty / error ── */
.clin-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 64px 24px;
  text-align: center;
  color: var(--text-muted);
}
.clin-state-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.clin-state p { font-size: 12px; line-height: 1.5; max-width: 420px; }
.clin-retry {
  margin-top: 4px;
  padding: 7px 16px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.clin-retry:hover { border-color: var(--brand); color: var(--brand-light); }

/* Skeleton cards, so the first paint has the shape of the answer rather than
   a spinner that reflows the grid when it resolves. */
.clin-skel {
  height: 168px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  opacity: .55;
  animation: clin-pulse 1.4s ease-in-out infinite;
}
.clin-skel:nth-child(2) { animation-delay: .12s; }
.clin-skel:nth-child(3) { animation-delay: .24s; }
.clin-skel:nth-child(4) { animation-delay: .36s; }
@keyframes clin-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  .clin-skel { animation: none; }
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   `button { border: none }` in index.html's reset, so every border here is
   drawn back deliberately. */
.clin-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.clin-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--text); }
.clin-btn:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 1px; }
.clin-btn:disabled { opacity: .5; cursor: default; }
.clin-btn-primary {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
}
.clin-btn-primary:hover:not(:disabled) { background: var(--brand-light); color: #17102B; }

/* Sits beside the Slides heading rather than inside it, so the row carries the
   heading's bottom margin in its place. */
.clin-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.clin-section-head .clin-section-title { flex: 1; min-width: 0; margin-bottom: 0; }
.clin-attach {
  flex: none;
  padding: 4px 11px;
  border-radius: 6px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}
.clin-attach:hover { border-color: var(--brand); color: var(--brand-light); }
.clin-attach:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 1px; }

/* ── Modal ────────────────────────────────────────────────────────────────
   z-index threads a two-sided gap. It must clear the shared sidebar's 9990
   (orion-nav.js:88), which is also a fixed child of <body>: below it the rail
   would sit undimmed and fully clickable beside a dialog that is supposed to be
   modal, and a nav click would navigate the page out from under it. It must
   stay under the toast container's 9999 (index.html:3308) so a toast raised by
   a form is still readable over the dialog that raised it. */
.clin-modal {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 6, 12, .72);
}
/* Outranks the UA `[hidden] { display: none }`, which the display above would
   otherwise beat on specificity. */
.clin-modal[hidden] { display: none; }
.clin-modal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: 100%;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.clin-modal-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.clin-modal-head h2 {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.clin-modal-x {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
}
.clin-modal-x:hover { background: var(--surface-hover); color: var(--text); }
.clin-modal-x:focus-visible { outline: 2px solid var(--brand-light); outline-offset: -2px; }
/* The body scrolls, not the card: the head and the footer buttons stay put
   however long the form gets. */
.clin-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
}
.clin-modal-error {
  flex: none;
  margin: 0 18px;
  padding: 9px 11px;
  border-radius: 6px;
  background: var(--rose-dim);
  border: 1px solid rgba(225, 29, 72, .34);
  color: #FDA4B4;
  font-size: 12px;
  line-height: 1.45;
}
.clin-modal-foot {
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px 16px;
}

/* ── Form fields ── */
.clin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.clin-field-wide { grid-column: 1 / -1; }
.clin-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Only for the field that follows the picker list — the New case form's fields
   are grid items and are already spaced by .clin-form-grid's gap, so a general
   adjacent-sibling margin would push every row but the first out of line with
   its neighbour. */
.clin-pick-list + .clin-field { margin-top: 14px; }
.clin-field label {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.clin-req { color: var(--rose); }
.clin-opt {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-muted);
  opacity: .8;
}
.clin-field input, .clin-field textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  /* textarea is absent from index.html's `input, select` font rule, so without
     this it renders in the UA's monospace default. */
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
}
.clin-field textarea { resize: vertical; min-height: 62px; }
.clin-field input::placeholder, .clin-field textarea::placeholder { color: var(--text-muted); }
/* `input, select { outline: none }` in the global reset takes the focus ring
   away, so it is replaced rather than merely omitted. */
.clin-field input:focus, .clin-field textarea:focus {
  border-color: var(--brand-light);
  outline: none;
}
/* Firefox and Chrome both paint the native date picker glyph near-black on
   this surface; the filter is what makes it visible on a dark field. */
.clin-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .55;
  cursor: pointer;
}

/* ── Slide picker ── */
.clin-pick-list {
  max-height: 260px;
  overflow-y: auto;
  margin-top: 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.clin-pick-list .clin-empty-note { padding: 14px 12px; }
.clin-pick-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  font-size: 12.5px;
}
.clin-pick-row:first-child { border-top: none; }
.clin-pick-row:hover { background: var(--surface-hover); }
.clin-pick-row:focus-within { background: var(--surface-hover); box-shadow: inset 2px 0 0 var(--brand); }
.clin-pick-row input { accent-color: var(--brand-light); cursor: pointer; }
.clin-pick-name { font-weight: 600; overflow-wrap: anywhere; }
.clin-pick-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Re-attaching is an upsert on the server, not an error — it updates the stain
   role — so an already-attached slide stays selectable and is only marked. */
.clin-pick-attached {
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--green-dim);
  color: var(--green);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}
.clin-pick-note { padding: 9px 12px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }

/* Visible to a screen reader, not on screen. Used where a control's label
   would otherwise duplicate what the pill next to it already says. */
.clin-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .clin-toolbar { flex-wrap: wrap; }
  .clin-detail-actions { max-width: none; }
  .clin-action-error { text-align: left; }
  .clin-modal { padding: 0; }
  .clin-modal-card { max-width: none; height: 100%; border-radius: 0; border: none; }
  /* Two columns: the radio pinned to the first cell, everything else stacked
     down the second — the meta and the "Attached" mark have nowhere near
     enough room to sit beside a slide name at this width. */
  .clin-pick-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; }
  .clin-pick-row input { grid-column: 1; grid-row: 1; align-self: start; margin-top: 3px; }
  .clin-pick-name, .clin-pick-meta, .clin-pick-attached { grid-column: 2; }
  .clin-pick-attached { justify-self: start; }
  .clin-search { width: 100%; max-width: none; order: 3; }
  .clin-demo-banner { flex-wrap: wrap; gap: 4px 8px; padding: 9px 16px; }
  .clin-toolbar, .clin-filters, .clin-scroll { padding-left: 16px; padding-right: 16px; }
  .clin-detail-head, .clin-facts, .clin-section, .clin-detail-skel {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Back button on its own line, then title, then pills — the three-column
     header has nowhere near enough room for a long patient name at this width. */
  .clin-detail-head { grid-template-columns: 1fr; }
  .clin-back { justify-self: start; }
  .clin-detail-tags { justify-content: flex-start; }
  /* Stacked rows: five columns of free text cannot share 320px legibly. */
  .clin-ann {
    grid-template-columns: 8px minmax(0, 1fr);
    row-gap: 2px;
  }
  .clin-ann-dot { grid-row: 1 / span 4; align-self: start; margin-top: 4px; }
  .clin-ann-time { white-space: normal; }
}