/* ==========================================================================
   AHF Clinical Workflow: components

   Grounded in the reference photos: dark bar, white panels, hairline rules,
   uppercase action buttons, caps table headers, one accent colour. Depth is
   used only to separate a surface from the page, never as decoration, and
   there are no gradients anywhere.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--ink-800);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--teal-700); text-underline-offset: 2px; transition: color .12s; }
a:hover  { color: var(--teal-800); }
a:active { color: var(--teal-600); }

:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 1px; border-radius: var(--r1); }

/* Teal-500 on the dark bar is 2.76:1, under the 3:1 minimum for a non-text
   indicator, so focus there uses the light tint instead. */
.topbar :focus-visible { outline-color: var(--teal-100); }

/* These three strips scroll horizontally, which makes them clipping
   containers: a normal outline on a full-height child gets sliced off top and
   bottom. An inset ring is drawn inside the element, so it survives. */
.qtab:focus-visible,
.ctab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--teal-500);
}
.topnav__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--teal-100);
}

.tnum { font-variant-numeric: tabular-nums; }

/* --- utility -------------------------------------------------------------- */
/* Present for screen readers, not painted. */
.u-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.u-muted  { color: var(--ink-500); }
.u-faint  { color: var(--ink-500); }
.u-right  { text-align: right; }
.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   Top bar
   ========================================================================== */
.app { min-height: 100vh; }

.topbar {
  height: var(--bar-h);
  background: var(--bar);
  display: flex;
  align-items: stretch;
  padding-right: var(--s4);
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: var(--shadow-bar);
}

.topbar__mark {
  display: flex;
  align-items: center;
  padding: 0 var(--s5) 0 var(--s4);
  color: var(--paper);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid var(--bar-line);
}
.topbar__mark { transition: background .12s; }
.topbar__mark:hover  { background: var(--bar-2); }
.topbar__mark:active { background: var(--bar); }
.topbar__mark span { color: var(--bar-ink); font-weight: 400; margin-left: 6px; }

.topnav { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; }
.topnav::-webkit-scrollbar { height: 0; }

.topnav__item {
  display: flex;
  align-items: center;
  padding: 0 var(--s4);
  color: var(--bar-ink);
  font-size: var(--t-sm);
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  background: none;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 transparent;
}
.topnav__item { transition: background .12s, color .12s; }
.topnav__item:hover  { color: var(--paper); background: var(--bar-2); }
.topnav__item:active { background: var(--bar); }
.topnav__item[aria-current="page"] {
  color: var(--paper);
  background: var(--bar-2);
  box-shadow: inset 0 -3px 0 var(--teal-500);
}

.topbar__spacer { flex: 1; }

/* The nav scrolls, so it is the part that gives way when the bar runs out of
   room. Without flex:none here the right group shrinks below its own icons
   and pushes them off the edge of the page. */
.topbar__right { display: flex; align-items: center; gap: var(--s3); flex: none; }

.org {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--bar-line);
  border-radius: var(--r2);
  padding: 4px var(--s2) 4px var(--s3);
  font-size: var(--t-sm);
  color: var(--paper);
  cursor: pointer;
  max-width: 260px;
  min-width: 0;
}
.org { transition: background .12s; }
.org:hover  { background: var(--bar-2); }
.org:active { background: var(--bar); }
.org__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar__user { color: var(--bar-ink); font-size: var(--t-sm); white-space: nowrap; }

.bar-btn {
  width: 30px; height: 30px;
  border: 0; background: none;
  border-radius: var(--r2);
  color: var(--bar-ink);
  display: grid; place-items: center;
  cursor: pointer;
  position: relative;
  flex: none;
}
.bar-btn:hover { background: var(--bar-2); color: var(--paper); }
.bar-btn:active { transform: translateY(1px); }
.bar-btn__dot {
  position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--risk-600);
}

/* ==========================================================================
   Work surface

   A list screen is not a card floating on a page. Real dense software puts
   the work edge to edge and divides it with rules, which is also what the
   reference photographs show: content sits directly on white.
   ========================================================================== */
.work {
  background: var(--paper);
  min-height: calc(100vh - var(--bar-h));
  padding-bottom: calc(var(--proto-h) + var(--s7));
}

/* The surface runs edge to edge; the content inside it stops at a width you
   can still read across. Without this the reason column absorbs an ultrawide
   monitor and strands the right-hand columns half a metre away. */
.work__head,
.work__bar,
.work__body,
.work > .scroll-x,
.visit-meta,
.lab-band,
.poc-grid,
.save-row,
.panel__head,
.panel__body,
.panel__foot {
  max-width: var(--content);
  margin-inline: auto;
}

.work__head {
  display: flex;
  align-items: baseline;
  gap: var(--s5);
  flex-wrap: wrap;
  padding: var(--s5) var(--s6) var(--s4);
}

.work__title {
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -.012em;
}

/* Counts belong in the sentence that names the screen, not in a row of
   identical boxes. */
.work__counts { color: var(--ink-600); font-size: var(--t-base); }
.work__counts b { color: var(--ink-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.work__counts .is-risk { color: var(--risk-600); }
.work__counts i { font-style: normal; color: var(--ink-300); padding: 0 var(--s2); }

.work__actions { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }

.work__bar {
  display: flex;
  align-items: flex-end;
  gap: var(--s5);
  padding: 0 var(--s6);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.work__body { padding: var(--s6); }

/* Documentation pages still read as documents, so they keep a page. */
.page {
  padding: var(--s6) var(--s5) calc(var(--proto-h) + var(--s7));
  max-width: var(--content);
  margin-inline: auto;
}
.page--narrow { max-width: 860px; }

.page__title {
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.2;
  letter-spacing: -.012em;
}

.page__sub,
.doc p.page__sub {
  color: var(--ink-600);
  font-size: var(--t-base);
  margin: 5px 0 0;
  max-width: 78ch;
  line-height: 1.5;
}

/* --- filter --------------------------------------------------------------- */
.filter {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-bottom: var(--s2);
}
.filter__icon {
  position: absolute;
  left: 9px;
  bottom: 15px;
  color: var(--ink-400);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.filter__input {
  width: 230px;
  max-width: 100%;
  padding: 6px 10px 6px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--paper);
  font-size: var(--t-sm);
  color: var(--ink-900);
  transition: border-color .12s, box-shadow .12s;
}
.filter__input::placeholder { color: var(--ink-400); }
.filter__input:hover { border-color: var(--ink-400); }
.filter__input:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px var(--teal-100); }

/* ==========================================================================
   Panels
   Kept for the chart, where each tab really is one discrete record section.
   ========================================================================== */
.panel { background: var(--paper); }

.panel__head {
  padding: var(--s5) var(--s6) var(--s4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

.panel__title { font-size: var(--t-lg); font-weight: 600; color: var(--ink-900); }
.panel__body { padding: 0 var(--s6) var(--s6); }
.panel__body--flush { padding: 0; }

.panel__foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s6);
  border-top: 1px solid var(--line);
}
.panel__foot--right { justify-content: flex-end; }

/* ==========================================================================
   Buttons
   Uppercase labels throughout, which is what the reference product uses.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 7px 18px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}

.btn--primary {
  background: var(--teal-600);
  color: var(--paper);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover:not(:disabled) { background: var(--teal-700); }
.btn--primary:active:not(:disabled) { background: var(--teal-800); }

/* Secondary actions still carry a border. A borderless label does not read
   as something you can press, which is what went wrong with "No match?". */
.btn--ghost {
  background: var(--paper);
  color: var(--ink-800);
  border-color: var(--line);
}
.btn--ghost:hover:not(:disabled) { background: var(--shade); border-color: var(--ink-300); }
.btn--ghost:active:not(:disabled) { background: var(--shade-2); border-color: var(--ink-400); }

.btn--sm { padding: 4px 12px; font-size: var(--t-micro); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--shade-2);
  color: var(--ink-400);
  border-color: transparent;
  cursor: not-allowed;
}

.btn-link {
  background: none; border: 0; padding: 0;
  color: var(--teal-700);
  font-size: var(--t-sm);
  cursor: pointer;
  text-decoration: underline;
  transition: color .12s;
}
.btn-link:hover  { color: var(--teal-800); }
.btn-link:active { color: var(--teal-600); }

.icon-btn {
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--r2);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink-600);
}
.icon-btn { transition: background .12s, color .12s, border-color .12s; }
.icon-btn:hover  { background: var(--shade); color: var(--ink-900); border-color: var(--ink-300); }
.icon-btn:active { background: var(--shade-2); }

.remove-btn {
  width: 26px; height: 26px;
  border: 0; background: none;
  border-radius: var(--r2);
  color: var(--ink-400);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: .45;
  transition: opacity .12s, color .12s, background .12s;
}
.remove-btn:hover  { color: var(--risk-600); background: var(--risk-050); }
.remove-btn:active { background: var(--risk-050); }

/* ==========================================================================
   Tables
   ========================================================================== */
.table { width: 100%; border-collapse: collapse; }

.table thead th {
  text-align: left;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 9px var(--s3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table thead th:first-child { padding-left: var(--s6); }
.table thead th:last-child  { padding-right: var(--s6); }

.table tbody td {
  padding: 10px var(--s3);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.table tbody td:first-child { padding-left: var(--s6); }
.table tbody td:last-child  { padding-right: var(--s6); }
.table tbody tr:last-child td { border-bottom: 0; }

.table--rows tbody td { padding-top: 13px; padding-bottom: 13px; }

/* The identity column is a fixed reading width; the reason column absorbs
   whatever the monitor gives it. */
.table--rows th:first-child { width: 264px; }

/* Columns holding a single short value shrink to their content instead of
   taking an equal share and stranding the row in white space. */
.table th.col-min { width: 1%; }
.table tbody tr { transition: background .1s; }
/* Empty states are rendered as one full-width row, so they must not light up
   as though they were a record you could click. */
.table tbody tr:hover:not(.table__subject):not(.table__blank) { background: var(--shade); }

.table--selectable tbody tr[data-candidate] { cursor: pointer; }
.table--selectable tbody tr[data-candidate]:hover { background: var(--teal-050); }
.table--selectable tbody tr[data-candidate]:active td { background: var(--teal-100); }

.table--selectable tbody tr[aria-selected="true"] { background: var(--teal-050); }
.table--selectable tbody tr[aria-selected="true"] td:first-child {
  box-shadow: inset 3px 0 0 var(--teal-600);
}

/* The table sits inside .well and .scroll-x, both of which clip, so the focus
   ring is drawn inside the cells rather than around the row. */
.table--selectable tbody tr[data-candidate]:focus-visible { outline: none; }
.table--selectable tbody tr[data-candidate]:focus-visible td {
  background: var(--teal-050);
  box-shadow: inset 0 2px 0 var(--teal-600), inset 0 -2px 0 var(--teal-600);
}
.table--selectable tbody tr[data-candidate]:focus-visible td:first-child {
  box-shadow: inset 0 2px 0 var(--teal-600), inset 0 -2px 0 var(--teal-600),
              inset 3px 0 0 var(--teal-600);
}

.table__subject td { background: var(--shade-2); border-bottom-color: var(--ink-300); }

.well {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--paper);
}

.emr-id--exact { color: var(--risk-600); font-weight: 600; }

/* ==========================================================================
   Status text
   Plain words in the row, coloured only when something is wrong.
   ========================================================================== */
.state {
  font-size: var(--t-sm);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.state::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.state--ok   { color: var(--ok-700); }
.state--risk { color: var(--risk-600); font-weight: 500; }
.state--warn { color: var(--warn-700); }
.state--none { color: var(--ink-500); }

.tag {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 500;
  padding: 1px 7px;
  border-radius: var(--r1);
  background: var(--shade);
  border: 1px solid var(--line);
  color: var(--ink-600);
  vertical-align: 1px;
}
.tag--new  { border-color: var(--teal-100); background: var(--teal-050); color: var(--teal-700); }

/* Regions built with no reference photograph. */
.inferred { position: relative; }

body.show-inferred .inferred { outline: 1px dashed var(--inferred); outline-offset: 2px; }
body.show-inferred .inferred::after {
  content: "INFERRED";
  position: absolute;
  top: -7px; right: 6px;
  background: var(--inferred);
  color: var(--paper);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .07em;
  padding: 1px 5px;
  pointer-events: none;
  z-index: 5;
}

/* ==========================================================================
   Queue
   ========================================================================== */
.qtabs { display: flex; align-items: stretch; overflow-x: auto; margin-left: calc(var(--s3) * -1); }
.qtabs::-webkit-scrollbar { height: 0; }

.qtab {
  border: 0;
  background: none;
  padding: var(--s3) var(--s3) 10px;
  margin-bottom: -1px;
  font-size: var(--t-base);
  color: var(--ink-600);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .12s, box-shadow .12s;
}
.qtab:hover  { color: var(--ink-900); }
.qtab:active { color: var(--teal-700); }
.qtab[aria-selected="true"] {
  color: var(--teal-700);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--teal-600);
}

.qtab__count {
  display: inline-block;
  margin-left: 5px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--shade-2);
  color: var(--ink-600);
  font-size: var(--t-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.qtab[aria-selected="true"] .qtab__count { background: var(--teal-100); color: var(--teal-800); }

.pt-name {
  font-weight: 600;
  color: var(--ink-900);
  font-size: var(--t-md);
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.pt-name__pref { font-weight: 400; color: var(--ink-500); }
.pt-meta { color: var(--ink-500); font-size: var(--t-sm); margin-top: 2px; }
.pt-reason { color: var(--ink-700); }

.wait { font-variant-numeric: tabular-nums; font-weight: 500; }
.wait--long { color: var(--risk-600); font-weight: 600; }

/* An exception marker, not a status system: only rows that need someone to
   do something carry it. */
.row--flagged td:first-child { box-shadow: inset 3px 0 0 var(--warn-600); }
.row--failed  td:first-child { box-shadow: inset 3px 0 0 var(--risk-600); }

.queue-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  justify-content: flex-end;
}

/* The remove control stays quiet until you are on the row. */
tr:hover .remove-btn, .remove-btn:focus-visible { opacity: 1; }

/* ==========================================================================
   Patient banner
   Name on the left, EMR ID in the middle, tools on the right, then a teal
   rule and the chart tabs. Straight from the reference.
   ========================================================================== */
.pbanner {
  background: var(--paper);
  border-bottom: 2px solid var(--teal-600);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 2;
}

.pbanner__inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s4) var(--s5);
  max-width: var(--content);
  margin-inline: auto;
}

.pbanner__name {
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.2;
  letter-spacing: -.012em;
}
.pbanner__pref { color: var(--ink-500); font-weight: 400; }
.pbanner__sub  { color: var(--ink-600); font-size: var(--t-sm); margin-top: 2px; }

.pbanner__id {
  text-align: center;
  margin-inline: auto;
  padding: 2px var(--s6);
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
}
.pbanner__idval {
  font-size: var(--t-lg);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.pbanner__tools { display: flex; gap: var(--s2); flex: none; }

/* --- chart tabs ----------------------------------------------------------- */
.ctabs { background: var(--shade-2); border-bottom: 1px solid var(--line); }
.ctabs__inner {
  display: flex;
  padding: 0 var(--s5);
  overflow-x: auto;
  max-width: var(--content);
  margin-inline: auto;
}
.ctabs__inner::-webkit-scrollbar { height: 0; }

.ctab {
  border: 0;
  background: none;
  padding: 10px var(--s4);
  font-size: var(--t-base);
  color: var(--ink-700);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-300);
  transition: color .12s, background .12s;
}
.ctab:hover  { color: var(--ink-900); background: var(--shade); }
.ctab:active { background: var(--paper); }
.ctab[aria-selected="true"] {
  background: var(--paper);
  color: var(--ink-900);
  font-weight: 600;
  border: 1px solid var(--line);
  border-bottom-color: var(--paper);
  border-radius: var(--r2) var(--r2) 0 0;
  margin-bottom: -1px;
  text-decoration: none;
}

/* ==========================================================================
   Field grids
   ========================================================================== */
.section-label {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-600);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--s5);
}
.section-label + .section-label { margin-top: var(--s7); }

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s5) var(--s7);
  max-width: 1100px;
}
.fields__item dt { font-size: var(--t-sm); color: var(--ink-500); margin-bottom: 1px; }
.fields__item dd { color: var(--ink-900); word-break: break-word; }
.fields__item dd.is-blank { color: var(--ink-500); }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { margin-bottom: var(--s5); }

.field__label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: 5px;
}
.field__req { color: var(--risk-600); }

.field__hint { font-size: var(--t-sm); color: var(--ink-500); margin-top: 5px; }
.field__hint--error { color: var(--risk-600); }

.input, .select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ink-300);
  border-radius: var(--r2);
  background: var(--paper);
  font-size: var(--t-base);
  color: var(--ink-900);
  transition: border-color .12s, box-shadow .12s;
}
.select { cursor: pointer; }
.select:disabled { cursor: not-allowed; }
.input:hover:not(:disabled), .select:hover:not(:disabled) { border-color: var(--ink-500); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px var(--teal-100);
}
.input--error { border-color: var(--risk-600); }
.input:disabled, .select:disabled { background: var(--shade); color: var(--ink-400); cursor: not-allowed; }

.check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s2);
  cursor: pointer;
  padding: var(--s1) var(--s2) var(--s1) var(--s1);
  margin-left: calc(var(--s1) * -1);
  border-radius: var(--r2);
  transition: background .12s;
}
.check:hover { background: var(--shade); }
.check--disabled:hover { background: none; }
.check input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--teal-600); cursor: pointer; flex: none; }
.check--disabled { opacity: .45; cursor: not-allowed; }
.check--disabled input { cursor: not-allowed; }

/* ==========================================================================
   Wizard
   ========================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 30, 34, .55);
  display: grid;
  place-items: center;
  padding: var(--s5);
  z-index: 60;
  animation: fade .12s ease-out;
}
@keyframes fade { from { opacity: 0 } }

.modal {
  background: var(--paper);
  border-radius: var(--r3);
  box-shadow: var(--shadow-modal);
  width: min(860px, 100%);
  max-height: min(90vh, 800px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  animation: rise .16s cubic-bezier(.2,.7,.3,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(6px) } }

.modal__top {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5) var(--s5) var(--s4);
  border-bottom: 1px solid var(--line-soft);
}
.modal__close {
  margin-left: auto;
  align-self: flex-start;
  width: 28px; height: 28px;
  border: 0; background: none;
  color: var(--ink-500);
  display: grid; place-items: center;
  cursor: pointer;
  flex: none;
}
.modal__close { border-radius: var(--r2); transition: background .12s, color .12s; }
.modal__close:hover  { color: var(--ink-900); background: var(--shade); }
.modal__close:active { background: var(--shade-2); }

.modal__body { padding: var(--s5); overflow-y: auto; }

.modal__foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  background: var(--shade);
}
.modal__foot .btn:first-child:not(:only-child) { margin-right: auto; }

.modal__lede { line-height: 1.5; color: var(--ink-800); margin-bottom: var(--s4); max-width: 72ch; }
.modal__lede strong { font-weight: 600; }

/* --- stepper -------------------------------------------------------------
   A rail with a node per step, filling in behind you as you advance. The
   earlier version overlapped four rounded pills, which collided at the joins
   and read as a broken breadcrumb rather than a sequence.
   ------------------------------------------------------------------------- */
.steps {
  display: flex;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stepnode {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

/* The rail segment leading into this node. It is teal once you have reached
   the node, so the filled length always equals your progress. */
.stepnode::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--line);
  border-radius: var(--r-pill);
}
.stepnode:first-child::before { display: none; }
.stepnode[data-state="done"]::before,
.stepnode[data-state="skipped"]::before,
.stepnode[data-state="current"]::before { background: var(--teal-500); }

.stepnode__dot {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--t-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--paper);
  border: 2px solid var(--line);
  color: var(--ink-500);
  flex: none;
  transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
}

.stepnode[data-state="done"] .stepnode__dot {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: var(--paper);
}
.stepnode[data-state="current"] .stepnode__dot {
  background: var(--teal-600);
  border-color: var(--teal-600);
  color: var(--paper);
  box-shadow: 0 0 0 4px var(--teal-050);
}
/* Passed over, not completed: the rail runs through it, the node stays open. */
.stepnode[data-state="skipped"] .stepnode__dot {
  background: var(--paper);
  border-color: var(--teal-100);
  color: var(--teal-600);
}

.stepnode__label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.stepnode[data-state="done"] .stepnode__label    { color: var(--ink-600); }
.stepnode[data-state="skipped"] .stepnode__label { color: var(--ink-500); }
.stepnode[data-state="current"] .stepnode__label { color: var(--teal-700); font-weight: 600; }

/* --- side by side comparison ---------------------------------------------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow: hidden;
}
.compare__col { padding: var(--s3) var(--s4) var(--s4); min-width: 0; }
.compare__col + .compare__col { border-left: 1px solid var(--line); }
.compare__col--single { grid-column: 1 / -1; }

.compare__head {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-800);
  padding-bottom: var(--s2);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
}
.compare__head span:last-child { font-weight: 400; color: var(--ink-500); }

.pair { display: flex; justify-content: space-between; gap: var(--s3); padding: 4px 0; font-size: var(--t-sm); }
.pair__k { color: var(--ink-500); flex: none; }
.pair__v { color: var(--ink-900); text-align: right; word-break: break-word; }
.pair__v--same { color: var(--ok-700); }
.pair__v--blank { color: var(--ink-500); }

/* --- result screens ------------------------------------------------------- */
.result { text-align: center; padding: var(--s6) 0 var(--s3); }
.result__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto var(--s4);
  color: var(--paper);
}
.result__icon--ok   { background: var(--ok-600); }
.result__icon--risk { background: var(--risk-600); }
.result__title { font-size: var(--t-lg); font-weight: 600; color: var(--ink-900); }
.result__body  { color: var(--ink-600); margin: var(--s2) auto 0; max-width: 58ch; }

.idblock { text-align: center; padding: var(--s4) 0 var(--s2); }
.idblock__label,
.visit-meta__k,
.pbanner__idlabel {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-500);
}
.idblock__row { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin-top: 2px; }
.idblock__val { font-size: var(--t-2xl); color: var(--ink-900); font-variant-numeric: tabular-nums; }

.copy-btn {
  border: 0; background: none;
  color: var(--ink-500);
  cursor: pointer;
  padding: 4px;
  display: grid; place-items: center;
}
.copy-btn { border-radius: var(--r2); transition: color .12s, background .12s; }
.copy-btn:hover  { color: var(--teal-700); background: var(--shade); }
.copy-btn:active { background: var(--shade-2); }

/* ==========================================================================
   Empty states
   ========================================================================== */
.empty { padding: var(--s8) var(--s5); text-align: center; }
.empty__title { font-size: var(--t-md); color: var(--ink-800); }
.empty__text  { color: var(--ink-500); margin-top: 4px; }
.empty__actions { margin-top: var(--s5); display: flex; gap: var(--s3); justify-content: center; }

.note {
  border: 1px dashed var(--line);
  border-radius: var(--r3);
  background: var(--shade);
  padding: var(--s6) var(--s5);
  text-align: center;
}

/* ==========================================================================
   Point of care tests
   The tinted section band and the divided grid of test cells are both in the
   reference photo, so they are kept.
   ========================================================================== */
.lab-band {
  background: var(--band);
  padding: var(--s3) var(--s6);
  font-size: var(--t-md);
  color: var(--ink-900);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.lab-band__count { font-size: var(--t-sm); color: var(--ink-700); }

/* Three across, as the reference photo has it. */
.poc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-soft);
}

.poc {
  padding: var(--s4) var(--s6);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  transition: background .12s;
}
.poc:hover { background: var(--shade); }
.poc:nth-child(3n) { border-right: 0; }
.poc__name {
  background: var(--band-soft);
  padding: 5px var(--s2);
  margin-bottom: var(--s3);
  color: var(--ink-900);
}
.poc__sub { display: block; font-size: var(--t-sm); color: var(--ink-600); }
.poc__foot { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: auto; }
.poc__result { max-width: 170px; padding: 5px 8px; font-size: var(--t-sm); }

.save-row { display: flex; justify-content: center; padding: var(--s5); }

.visit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s8);
  padding: var(--s3) var(--s6) var(--s4);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.visit-meta__v { color: var(--ink-900); }

/* ==========================================================================
   Toast
   ========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--proto-h) + var(--s4));
  transform: translate(-50%, 8px);
  background: var(--ink-900);
  color: var(--paper);
  padding: 9px var(--s4);
  border-radius: var(--r2);
  font-size: var(--t-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s, transform .12s;
  z-index: 90;
  max-width: min(460px, calc(100vw - 32px));
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Prototype bar
   Not part of the product. Kept visually separate from it.
   ========================================================================== */
.protobar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--proto-h);
  background: var(--ink-900);
  color: var(--ink-300);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s3);
  font-size: var(--t-xs);
  z-index: 80;
}
.protobar a { color: var(--ink-300); text-decoration: none; }
.protobar a:hover { color: var(--paper); text-decoration: underline; }

.protobar__tag {
  color: var(--ink-500);
  font-size: var(--t-xs);
}
.protobar__screen { color: var(--paper); }
.protobar__spacer { flex: 1; }

.protobar__btn {
  background: none;
  border: 1px solid rgba(255,255,255,.18);
  color: var(--ink-300);
  border-radius: var(--r1);
  padding: 2px 8px;
  font-size: var(--t-micro);
  cursor: pointer;
}
.protobar__btn:hover  { background: rgba(255,255,255,.08); color: var(--paper); }
.protobar__btn:active { background: rgba(255,255,255,.16); }
.protobar__btn[aria-pressed="true"] { background: var(--inferred); border-color: var(--inferred); color: var(--paper); }

body.protobar-hidden .protobar { display: none; }

/* ==========================================================================
   Docs pages
   ========================================================================== */
.doc { line-height: 1.6; }
.doc h2 { font-size: var(--t-md); margin: var(--s7) 0 var(--s3); color: var(--ink-900); }
.doc h3 { font-size: var(--t-base); margin: var(--s5) 0 var(--s2); color: var(--ink-900); }
.doc p  { margin: 0 0 var(--s3); color: var(--ink-700); max-width: 78ch; }
.doc ul { margin: 0 0 var(--s4); padding-left: var(--s5); color: var(--ink-700); }
.doc li { margin-bottom: 4px; }
.doc code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--shade);
  border: 1px solid var(--line-soft);
  padding: 0 4px;
  color: var(--ink-800);
}

.gap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s3);
}
.gap--inferred { border-left-color: var(--inferred); }
.gap--stub     { border-left-color: var(--ink-300); background: var(--shade); box-shadow: none; }
.gap__title { font-weight: 600; color: var(--ink-900); font-size: var(--t-md); }
.gap__meta  { font-size: var(--t-sm); color: var(--ink-500); margin-bottom: var(--s3); }
.gap p:last-child { margin-bottom: 0; }

/* --- flow map -------------------------------------------------------------
   A pipeline read left to right, with the branch drawn where the branch
   actually happens. Stacked lanes of cards are a list, not a flow.
   ------------------------------------------------------------------------- */
.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s7);
  margin-bottom: var(--s8);
}

.flow__stage { position: relative; display: flex; flex-direction: column; gap: var(--s2); }

/* The arrow into a stage, drawn in the gutter between columns. */
.flow__stage + .flow__stage::before {
  content: "";
  position: absolute;
  left: calc(var(--s7) * -1);
  top: 46px;
  width: var(--s7);
  height: 1px;
  background: var(--ink-300);
}
.flow__stage + .flow__stage::after {
  content: "";
  position: absolute;
  left: -9px;
  top: 42px;
  border: 4px solid transparent;
  border-left-color: var(--ink-300);
}

.flow__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-600);
  margin-bottom: var(--s2);
  min-height: 24px;
}
.flow__n {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--teal-600);
  color: var(--paper);
  font-size: var(--t-xs);
  font-weight: 600;
  flex: none;
}
.flow__n--done  { background: var(--ok-600); }
.flow__n--quiet { background: var(--ink-300); }

/* Two ways out of the same step, shown side by side under it. */
.fbranch {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding-left: var(--s4);
  margin-left: var(--s3);
  border-left: 1px solid var(--line);
  position: relative;
}
.fbranch::before {
  content: "";
  position: absolute;
  left: -1px; top: 0;
  width: 1px; height: 20px;
  background: var(--line);
}

.fnode {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal-500);
  border-radius: var(--r2);
  padding: var(--s3) var(--s4);
  text-decoration: none;
  color: var(--ink-900);
  font-size: var(--t-base);
  font-weight: 600;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.fnode small {
  display: block;
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink-600);
  margin-top: 2px;
  line-height: 1.4;
}
.fnode:hover {
  border-color: var(--ink-300);
  border-left-color: var(--teal-600);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.fnode:active { transform: none; box-shadow: none; }

.fnode--alt { position: relative; }
.fnode--alt::before {
  content: "";
  position: absolute;
  left: calc(var(--s4) * -1);
  top: 18px;
  width: var(--s3);
  height: 1px;
  background: var(--line);
}

.fnode--inferred { border-left-color: var(--inferred); }
.fnode--inferred:hover { border-left-color: var(--inferred); border-color: var(--inferred); }

.fnode--stub {
  background: var(--shade);
  border-left-color: var(--ink-300);
  font-weight: 500;
  color: var(--ink-600);
}
.fnode--stub:hover { border-left-color: var(--ink-400); }

.flow__after { margin-bottom: var(--s7); }

.lane {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 240px));
  gap: var(--s2);
}

.legend__item { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--ink-600); }
.legend__key { width: 3px; height: 14px; border-radius: var(--r-pill); background: var(--teal-500); }
.legend__key--inferred { background: var(--inferred); }
.legend__key--stub { background: var(--ink-300); }

@media (max-width: 1000px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__stage + .flow__stage::before,
  .flow__stage + .flow__stage::after { display: none; }
}
@media (max-width: 620px) {
  .flow { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .topbar__user { display: none; }
  .org { max-width: 170px; }
}

@media (max-width: 900px) {
  .poc-grid { grid-template-columns: repeat(2, 1fr); }
  .poc:nth-child(3n) { border-right: 1px solid var(--line-soft); }
  .poc:nth-child(2n) { border-right: 0; }
}

/* Matching the specificity of the two-column rule above removes the
   !important this otherwise needs to win. */
@media (max-width: 560px) {
  .poc-grid { grid-template-columns: 1fr; }
  .poc:nth-child(2n), .poc:nth-child(3n) { border-right: 0; }
}

@media (max-width: 760px) {
  .page { padding: var(--s4) var(--s3) calc(var(--proto-h) + var(--s6)); }
  .pbanner__inner, .ctabs__inner { padding-left: var(--s3); padding-right: var(--s3); }
  .pbanner__inner { flex-wrap: wrap; gap: var(--s3); }
  .pbanner__id { margin-inline: 0; text-align: left; }
  .compare { grid-template-columns: 1fr; }
  .compare__col + .compare__col { border-left: 0; border-top: 1px solid var(--line); }
  .modal__body, .modal__top, .modal__foot { padding-left: var(--s4); padding-right: var(--s4); }
  .org__name { display: none; }
  .topbar__mark span { display: none; }
  .protobar { overflow-x: auto; }
}

@media (max-width: 560px) {
  .stepnode:not([data-state="current"]) .stepnode__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .topbar, .protobar { display: none; }
  body { background: var(--paper); }
}