/* <patient-row> — the TWIN-CHANNEL row, structural styles ONLY. Every HUE comes from lib/tokens.css via
   [data-role] (the resolver's output); this file authors no colour beyond the neutral ink ramp.
   Layout: a fixed 6-column grid so each channel lives at a known x and the eye scans it as a vertical strip
   (Law XV — effortlessness is a property of the column). Load tokens.css FIRST, then this file. */

patient-row { display: block; }

.pr {
  display: grid;
  grid-template-columns: 4px minmax(170px, 260px) 162px minmax(0, 1fr) 80px 78px;
  gap: 0 13px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 12px 8px 0;
  margin-bottom: 5px;
}

/* ① DANGER rail — colour only; red iff a critical flag, amber iff anything fired, else the neutral band. */
.pr-rail { align-self: stretch; border-radius: 3px 0 0 3px; background: var(--band); }
.pr-rail[data-role="critical"]  { background: var(--role-critical); }
.pr-rail[data-role="attention"] { background: var(--role-attention); }

/* ② WHO */
.pr-who { min-width: 0; }
.pr-name { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ③ BURDEN bar — length = how many distinct problems; red segments = how many are critical. */
.pr-load { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* The burden squares WRAP into multiple rows of ≤4 (4×16 + gaps) once a patient carries many problems, so they never
   overflow into the analyte column (CEO 2026-06-16). High-burden patients get a taller cell; the count sits beside. */
.pr-bar2 { display: flex; flex-wrap: wrap; gap: 2px 2px; flex: 0 0 auto; max-width: 76px; align-content: center; }
.pr-seg { width: 16px; height: 11px; border-radius: 2px; background: var(--hairline); }
.pr-seg[data-role="critical"]  { background: var(--role-critical); }
.pr-seg[data-role="attention"] { background: var(--role-attention); }
.pr-count { font-size: 12px; font-weight: 600; color: var(--mid); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-count-w { font-weight: 400; color: var(--muted); }
.pr-count-none { font-weight: 400; color: var(--muted); font-style: italic; }

/* ④ LEAD — the headline analyte, demoted to a non-size-dominant entry label; red iff the patient is critical. */
.pr-lead { min-width: 0; font-variant-numeric: tabular-nums; }
.pr-val { font-weight: 600; font-size: 14px; color: var(--ink); }
.pr-val[data-role="critical"]  { color: var(--role-critical); }
.pr-val[data-role="attention"] { color: var(--role-attention); }
.pr-arrow { font-weight: 700; }
.pr-ref { font-size: 11.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ⑤ SPARKLINE — motion channel; currentColor (set by the role) tints the last point. */
.pr-spark-wrap { justify-self: end; color: var(--plotline); }
.pr-spark-wrap[data-role="critical"]  { color: var(--role-critical); }
.pr-spark-wrap[data-role="attention"] { color: var(--role-attention); }
.pr-spark { display: block; }

/* ⑥ FRESHNESS — a QUIET novelty/recency channel, separate from danger; never red (Law IX). */
.pr-fresh { text-align: right; white-space: nowrap; }
.pr-novel { font-size: 10.5px; font-weight: 600; color: var(--muted); background: var(--band); border-radius: 100px; padding: 1px 7px; }
.pr-age { font-size: 11.5px; color: var(--mid); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ⑦ WATCH — the flagship "watch this…" context door (UX-S4 · CORE-1), a hover/focus-revealed click affordance.
   Absolutely positioned so it NEVER perturbs the row grid; inert on the static demo (never rendered there). The
   authoring accent is --ui-selection. */
.pr { position: relative; }
.pr-watch { position: absolute; top: 5px; right: 6px; z-index: 2; opacity: 0; pointer-events: none;
  font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ui-selection); background: var(--card);
  border: 1px solid color-mix(in srgb, var(--ui-selection) 45%, var(--hairline)); border-radius: 6px;
  padding: 2px 9px; cursor: pointer; transition: opacity .1s ease; }
/* reveal on mouse hover, and on keyboard focus — the focusable element is the <patient-row> HOST (.pr's parent),
   so focus-within must be asked of the host; .pr:focus-within would miss a row reached by J/K. */
.pr:hover .pr-watch, patient-row:focus-within .pr-watch { opacity: 1; pointer-events: auto; }
.pr-watch:hover { border-color: var(--ui-selection); background: var(--ui-selection-bg); }
.pr-watch:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--ui-selection); outline-offset: 1px; }