/* <patient-board> — depth-1 "Commit Board" v3 (2026-06-15 craft pass 2). Structural styles ONLY; hues via
   [data-role] + tokens. ONE BOX PER PROBLEM, each with an always-on banded trend. A prominent CRITICAL ZONE only
   when something critical fired; otherwise a single UNIFORM grid (no headline hero). Boxes in a row are EQUAL
   HEIGHT with the trend bottom-aligned. Amber is a left-rail accent only; red stays scarce. */

patient-board { display: block; }

.pb { background: var(--card); border: 1px solid var(--hairline); border-left: 3px solid var(--hairline);
  border-radius: 11px; padding: 13px 16px 14px; }
.pb[data-role="critical"]  { border-left-color: var(--role-critical); }
.pb[data-role="attention"] { border-left-color: var(--role-attention); }

.pb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; cursor: pointer; } /* D1-1 — click the header band to collapse */
.pb-pname { font-size: 16px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.pb-pmeta { font-size: 12px; color: var(--muted); margin-top: 1px; }
.pb-close { border: 1px solid var(--hairline); background: var(--paper); color: var(--mid); border-radius: 6px;
  font-size: 11px; padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.pb-close:hover { background: var(--band); }
/* D1-4 — the no-box carried-critical banner (replaces the removed general .pb-verdict line). A Critical-TIER patient
   held by the never-suppress guard with no fresh flag: this banner IS the board's content, so it must read as
   held-for-attention, never calm. Critical-role left accent + a faint tint = the same red grammar the depth-0 row
   spine shows; prominent ink for the why text. */
.pb-carried { font-size: 13.5px; line-height: 1.5; color: var(--ink); font-weight: 550; margin: 0 0 12px;
  padding: 9px 12px; border-left: 3px solid var(--role-critical);
  background: color-mix(in srgb, var(--role-critical) 5%, transparent); border-radius: 0 6px 6px 0; }

.pb-board { display: flex; flex-direction: column; gap: 10px; }

/* Campaign-C Constellation FRAME (depth-1) — when an engine reconciliation groups 2+ problem boxes into one clinical
   picture, those boxes are framed together inside this panel, with a subtle WARM background, a "◇ Constellation" label
   and the engine's verbatim cited sentence. The border is NEUTRAL grey (never a hue) so a critical member box keeps
   its full red inside the frame — the frame never mutes or folds it. The ◇ marks a proposed grouping pending
   nephrologist review (tooltip). A single-box reconciliation is not framed. */
.pb-constellation { border: 1px solid var(--stone-300); border-radius: 12px; padding: 11px 12px 12px;
  background: color-mix(in srgb, var(--amber-100) 30%, var(--card)); }
.pb-con-head { margin-bottom: 2px; }
.pb-con-tag { display: inline-flex; align-items: baseline; gap: 6px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.pb-con-mark { font-size: 12px; line-height: 1; color: var(--faint); font-weight: 400; cursor: help; } /* the wordless pending-review mark */
.pb-con-line { font-size: 12.5px; line-height: 1.5; color: var(--mid); margin: 5px 0 11px; max-width: 80ch; }

/* Both zones use auto-FILL (not auto-fit): a lone box keeps the ~3-per-row width instead of ballooning to fill the
   row — so the trend never over-stretches and the text-to-box ratio stays right (CEO 2026-06-16 craft fix). The
   critical zone sits up top (grouped, red), same box size as the grid below — prominence by colour+position, not size. */
.pb-crit-zone { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 10px; align-items: stretch; }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 10px; align-items: stretch; }

/* ONE PROBLEM BOX — the .pb-box is the positioned/animated shell; .pb-box-inner holds the content and is the
   counter-scale target so a FLIP grow/shrink never distorts text (CEO B1). A flex column so the trend bottom-aligns. */
.pb-box { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--hairline);
  border-left: 3px solid var(--hairline); border-radius: 9px; margin: 0; transform-origin: top left; }
.pb-box[data-role="critical"]  { border-left-color: var(--role-critical); border-color: color-mix(in srgb, var(--role-critical) 28%, var(--hairline)); background: var(--role-critical-soft); }
.pb-box[data-role="attention"] { border-left-color: var(--role-attention); }
.pb-box[data-role="info"]      { border-left-color: var(--role-info); }
.pb-box-inner { display: flex; flex-direction: column; flex: 1 1 auto; padding: 10px 12px; transform-origin: top left; }
.pb-box-face { display: flex; flex-direction: column; flex: 1 1 auto; cursor: pointer; }
.pb-box-face:focus-visible { outline: 2px solid var(--ui-selection); outline-offset: 2px; border-radius: 6px; }
/* FOCUS — tapping a box mounts the live chart + reasoning; the focused box spans the row (the other boxes reflow) */
.pb-box-expand { display: none; }
.pb-box[data-focus="true"] { grid-column: 1 / -1; }
.pb-box[data-focus="true"] .pb-box-expand { display: block; }
.pb-box[data-focus="true"] .pb-box-chart, .pb-box[data-focus="true"] .pb-why-aff { display: none; }
.pb-box-live { margin-top: 2px; }
.pb-box-collapse { margin-top: 10px; border: 1px solid var(--hairline); background: var(--paper); color: var(--mid); border-radius: 6px; font-size: 11.5px; padding: 4px 11px; cursor: pointer; }
.pb-box-collapse:hover { background: var(--band); }

.pb-box-top { display: flex; align-items: baseline; gap: 8px; }
.pb-sys { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mid); }
.pb-sys-blind { color: var(--role-info); }
.pb-name { font-size: 15px; font-weight: 650; line-height: 1.25; color: var(--ink); letter-spacing: -0.01em; } /* the box title — the analyte name; stands out in its box */
.pb-name[data-role="critical"] { color: var(--role-critical); }
.pb-dir { font-size: 12px; font-weight: 700; } /* direction arrow — colour comes from [data-role] (tokens): amber / red */
.pb-metric { display: flex; align-items: baseline; gap: 4px; margin-top: 3px; }
.pb-val { font-size: 17px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pb-val[data-role="critical"] { color: var(--role-critical); }
.pb-val[data-role="attention"] { color: var(--role-attention); } /* the firing value carries the hue, same as depth-0/2 */
.pb-unit { font-size: 12px; color: var(--muted); }
/* the one baseline/threshold clause that makes the number mean something — "their usual X" / "below the X cutoff" (CEO #2) */
.pb-baseline { font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 3px; }

/* the always-on chart — bottom-aligned so every box in a row shares the trend baseline */
.pb-box-chart { margin-top: auto; padding-top: 9px; color: var(--plotline); line-height: 0; }
.pb-box-chart[data-role="critical"]  { color: var(--role-critical); }
.pb-box-chart[data-role="attention"] { color: var(--role-attention); }
.pb-box-nochart { min-height: 18px; }
.pb-cv { width: 100%; height: 40px; display: block; }

.pb-why-aff { display: inline-block; font-size: 11px; color: var(--faint); margin-top: 8px; }
.pb-box-face:hover .pb-why-aff { color: var(--mid); }

.pb-why { padding: 9px 0 2px; }
.pb-reason { padding: 8px 0; border-top: 1px solid var(--hairline); }
.pb-reason:first-child { border-top: none; padding-top: 2px; }
.pb-reason-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pb-rfv { color: var(--mid); font-weight: 500; font-variant-numeric: tabular-nums; }
.pb-reason-b { font-size: 12.5px; line-height: 1.55; color: var(--mid); margin-top: 3px; }
.pb-sub { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
.pb-sub::before { content: "↳ "; color: var(--faint); }
/* SUSPECT-CRITICAL (Slice S2) — a critical lethal value flagged as a possible lab artifact: the box stays critical
   (never folded/downgraded), with a "may be unreliable" qualifier in attention-amber (NOT a second critical-red, so it
   never competes with the critical box's own red). The verify-lane cue; engine-supplied. */
.pb-suspect { font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--role-attention); margin-top: 5px;
  padding: 3px 8px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--role-attention) 35%, transparent);
  background: color-mix(in srgb, var(--role-attention) 8%, transparent); }
/* the FACE variant — compact (no detail string; the full "why suspect" is in the expand), still amber, fit for the
   at-rest box read so a suspect-critical reads "may be unreliable" at a glance without expanding. */
.pb-suspect-face { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  display: inline-block; margin-top: 4px; padding: 1px 6px; }
/* SUB-VALUES (v6, 2026-06-22) — the constituent numbers behind a multi-lab pattern flag, read as their OWN small
   entity inside the box: a thin MINI-FRAME + the analyte name in BOLD, so the eye catches each as its own thing rather
   than blending into the card. The SAME treatment renders on the box FACE and in the expanded reasoning (one selector,
   so it stays consistent collapsed ↔ expanded). The value carries the role hue via [data-role] (re-asserted at higher
   specificity, mirroring .pb-val); the reason wording itself ("below the 22 cutoff" / "their usual X") states the
   threshold-vs-baseline distinction in plain words. */
.pb-subvals { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; padding: 6px 9px 7px;
  border: 1px solid var(--hairline); border-radius: 8px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.pb-subval { font-size: 12.5px; line-height: 1.5; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pb-subval-label { color: var(--ink); font-weight: 650; }   /* the analyte name — BOLD, its own entity */
.pb-subval-v { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pb-subval-v[data-role="critical"]  { color: var(--role-critical); }
.pb-subval-v[data-role="attention"] { color: var(--role-attention); }
.pb-subval-ctx { color: var(--muted); }
.pb-cite { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
.pb-cite-src { font-weight: 600; color: var(--mid); margin-right: 6px; }

/* the BLUE "couldn't check" box — legible (what · why) rows, the overflow in an expander */
.pb-blind { background: var(--role-info-soft); }
.pb-blind-verdict { font-size: 14.5px; font-weight: 650; line-height: 1.35; color: var(--role-info); margin: 5px 0 2px; }
.pb-stale { font-size: 12px; font-weight: 600; color: var(--role-attention); margin: 2px 0 6px; }
.pb-gaps { list-style: none; margin: 6px 0 0; padding: 0; }
.pb-gap { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--role-info) 18%, transparent); }
.pb-gap:first-child { border-top: none; }
.pb-gap-what { flex: 0 0 auto; min-width: 104px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pb-gap-why { font-size: 12px; line-height: 1.45; color: var(--muted); }
.pb-gap-note { font-size: 12px; line-height: 1.45; color: var(--muted); padding: 4px 0; }
.pb-gaps-extra { margin-top: 4px; }
.pb-gaps-extra > summary { list-style: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--role-info); padding: 4px 0; }
.pb-gaps-extra > summary::-webkit-details-marker { display: none; }
.pb-gaps-extra[open] > summary { color: var(--mid); }
/* D1-4/SN-1 — the .pb-priors* ("Earlier on this patient") + .pb-btn*/.pb-nodismiss (Acknowledge/Snooze/Dismiss)
   rules were removed with their elements; .pb-actions now holds only "Full chart →". */
.pb-clear { font-size: 13px; color: var(--muted); font-style: italic; padding: 10px 2px; }

.pb-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 13px 0 2px; margin-top: 13px; border-top: 1px solid var(--hairline); }
/* the step DOWN to the full Patient Card — a clear button, not a quiet link (CEO: make this easy to reach) */
.pb-full { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ui-selection); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--ui-selection) 50%, var(--hairline)); border-radius: 6px; padding: 6px 15px; }
.pb-full:hover { background: color-mix(in srgb, var(--ui-selection) 12%, transparent); text-decoration: none; }

/* ── the per-box header readout — the two-point caliper change shows HERE, near the name/value (CEO A8) ── */
.pb-readout { min-height: 0; font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums;
  margin: 0; max-height: 0; overflow: hidden; transition: max-height .22s ease, margin .22s ease; }
.pb-readout:not(:empty) { max-height: 40px; margin: 3px 0 9px; padding: 5px 9px; background: color-mix(in srgb, var(--ui-selection) 7%, var(--card)); border-left: 3px solid var(--ui-selection); border-radius: 6px; }  /* D1-2 — the caliper readout stands out in the interaction colour, congruent with depth-2 */
.ac-ro-d { font-weight: 700; color: var(--ui-selection); }  /* D1-2 — the Δ leads in the interaction colour */
.pb-readout span { color: var(--muted); }
.ac-ro-x { border: none; background: var(--band); color: var(--mid); border-radius: 50%; width: 17px; height: 17px;
  line-height: 15px; font-size: 13px; cursor: pointer; padding: 0; margin-left: 4px; vertical-align: middle; }
.ac-ro-x:hover { background: var(--hairline); color: var(--ink); }

/* ── <analyte-chart> — live FOCUS chart: SVG shapes + a CRISP HTML OVERLAY (text never stretches under the
   preserveAspectRatio="none" trace). band + edges + tag · cited bound + numeric exceedance · dates · values · tip ── */
.ac { display: block; }
.ac-empty { font-size: 12.5px; color: var(--muted); font-style: italic; padding: 16px 4px; }
.ac-plot-wrap { position: relative; }
.ac-plot { position: relative; height: 150px; overflow: visible; }
.ac-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: crosshair; }
.ac-band { fill: color-mix(in srgb, var(--ink) 7%, transparent); }
.ac-band-edge { stroke: color-mix(in srgb, var(--ink) 24%, transparent); stroke-width: 1; stroke-dasharray: 2 3; }
.ac-bound { stroke: var(--role-critical); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: 0.7; }
.ac-bound[data-role="attention"] { stroke: var(--role-attention); }
.ac-bound[data-role="info"], .ac-bound[data-role="neutral"] { stroke: var(--mid); }
.ac-line { fill: none; stroke: var(--plotline); stroke-width: 1.7; }
.ac-line[data-role="critical"] { stroke: var(--role-critical); }
.ac-line[data-role="attention"] { stroke: var(--role-attention); }

/* the crisp overlay (no pointer events — the SVG beneath takes the gestures) */
.ac-overlay { position: absolute; inset: 0; pointer-events: none; }
.ac-pt { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--mid); opacity: 0.45; }
.ac-pt-past { opacity: 0.85; }
.ac-pt-last { width: 8px; height: 8px; margin: -4px 0 0 -4px; opacity: 1; background: var(--plotline); }
.ac-pt-last[data-role="critical"] { background: var(--role-critical); }
.ac-pt-last[data-role="attention"] { background: var(--role-attention); }
.ac-pt-cal { box-shadow: 0 0 0 2px var(--ui-selection); opacity: 1; }
.ac-pt-hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mid) 45%, transparent); opacity: 1; }
/* every-point value labels — readable: near-black + a touch bigger (CEO 2026-06-16), still de-cluttered so none overlap */
.ac-pv { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -3px); font-size: 11px; font-weight: 600;
  color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; z-index: 2;
  background: color-mix(in srgb, var(--card) 86%, transparent); padding: 0 2px; border-radius: 3px; } /* legible over the line/band */
/* the reference tags are crisp OPAQUE chips ABOVE the value labels — so a usual-range / danger-bound tag never blends
   into a value's text (the value labels under them are already dropped in JS; this keeps any near-miss readable). */
.ac-band-tag { position: absolute; left: 0; transform: translateY(-115%); font-size: 10px; font-weight: 600; z-index: 4;
  color: var(--muted); background: var(--card); border: 1px solid var(--hairline); padding: 0 4px; border-radius: 4px; white-space: nowrap; }
.ac-bound-tag { position: absolute; right: 0; transform: translateY(-50%); font-size: 10px; font-weight: 700; z-index: 4;
  color: var(--mid); background: var(--card); border: 1px solid var(--hairline); padding: 0 4px; border-radius: 4px; white-space: nowrap; }
.ac-bound-tag[data-role="critical"] { color: var(--role-critical); }
.ac-bound-tag[data-role="attention"] { color: var(--role-attention); }
.ac-bound-tag-hit { font-weight: 800; }
/* the hover tooltip — value+date right AT the cursor, so the eye never leaves the point (CEO A6) */
.ac-tip { position: absolute; transform: translate(-50%, -130%); font-size: 11.5px; color: var(--paper);
  background: color-mix(in srgb, var(--ink) 92%, transparent); padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 2; }
.ac-tip-below { transform: translate(-50%, 30%); }
.ac-tip b { font-weight: 700; }
.ac-tip-d { color: color-mix(in srgb, var(--paper) 70%, transparent); margin-left: 5px; }
/* the date axis — readable ticks under the plot (CEO A3) */
.ac-axis { position: relative; height: 15px; margin-top: 3px; }
.ac-tick { position: absolute; top: 0; font-size: 10px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ac-tick-start { transform: translateX(0); }
.ac-tick-mid { transform: translateX(-50%); }
.ac-tick-end { transform: translateX(-100%); }

.ac-controls { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.ac-toggle { border: 1px solid var(--hairline); background: var(--paper); color: var(--mid); border-radius: 6px;
  font-size: 11px; font-weight: 600; padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.ac-toggle:hover { background: var(--band); color: var(--ink); }
.ac-hint { font-size: 10.5px; color: var(--faint); }

.ac-cal { stroke: var(--ui-selection); stroke-width: 1.25; stroke-dasharray: 2 2; opacity: 0.85; }
.ac-cross { stroke: var(--mid); stroke-width: 1; stroke-dasharray: 1 2; opacity: 0.7; }
.ac-ribbon-wrap { margin-top: 8px; }
.ac-ribbon { width: 100%; height: 26px; display: block; touch-action: none; cursor: ew-resize; }
.ac-ribbon-line { fill: none; stroke: var(--mid); stroke-width: 1; opacity: 0.5; }
.ac-ribbon-win { fill: var(--ui-selection); opacity: 0.16; stroke: var(--ui-selection); stroke-width: 1; }
.ac-ribbon-h { fill: var(--ui-selection); opacity: 0.55; cursor: ew-resize; }

/* ── keyboard focus rings for the depth-1 arrow field (lib/panel-keyboard.js) — a clear "you are here" on each stop
   (problem box · footer action · the gaps toggle) as ↑/↓/←/→ walk them. Keyboard-only (:focus-visible). ── */
.pb-box-face:focus-visible { outline: 2px solid var(--ui-selection); outline-offset: 2px; }
.pb-actions button:focus-visible,
.pb-actions .pb-full:focus-visible,
.pb-gaps-extra > summary:focus-visible { outline: 2px solid var(--ui-selection); outline-offset: 2px; border-radius: 6px; }
.pb-gaps-extra > summary { cursor: pointer; } /* an arrow stop AND clickable */

/* ── D1-1 — the shared framed basis (their usual · the change) on the depth-1 box EXPAND, same cells + vocabulary as
   the Card (rendered by lib/analyte-frame.js). Depth-1 is leaner (no timeframe/cutoff cell — the depth flag enforces
   it); scoped to .pb-box-expand so it never affects the at-rest face. ── */
.pb-box-expand .rail-basis { display: inline-flex; flex-wrap: wrap; margin: 2px 0 9px; border: 1px solid var(--hairline);
  border-radius: 6px; background: color-mix(in srgb, var(--ink) 2.5%, var(--card)); overflow: hidden; }
.pb-box-expand .rb-cell { display: flex; flex-direction: column; gap: 1px; padding: 3px 11px; border-right: 1px solid var(--hairline); }
.pb-box-expand .rb-cell:last-child { border-right: none; }
.pb-box-expand .rb-k { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); line-height: 1.2; }
.pb-box-expand .rb-v { font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.25; }
.pb-box-expand .rb-v[data-role="critical"] { color: var(--role-critical); }
.pb-box-expand .rb-v[data-role="attention"] { color: var(--role-attention); }
/* ── "ACCOUNTED FOR" (Family B reframes) — a calm GREY tray BELOW the problem grid. These are NOT problem boxes (no
   role hue, no burden weight): they reuse the box reading grammar (name → number → context → why) with the "not a
   problem" cues — a DASHED neutral rail, the ≈ marker, and the raw→corrected TRANSFORM as the number (raw faded, the
   corrected solid). Colour barely participates: neutral ink only, never red/amber (danger) or blue (can't-see). ── */
.af-tray { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.af-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
.af-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.af-sub { font-size: 11px; color: var(--faint); }
.af-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 10px; align-items: start; }
.af-box { background: color-mix(in srgb, var(--mid) 4%, var(--card)); border: 1px solid var(--hairline);
  border-left: 3px dashed color-mix(in srgb, var(--mid) 32%, var(--hairline)); border-radius: 9px; }
.af-box[open] { background: var(--card); }
.af-box-face { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; cursor: pointer; list-style: none; }
.af-box-face::-webkit-details-marker { display: none; }
.af-box-face:focus-visible { outline: 2px solid var(--ui-selection); outline-offset: 2px; border-radius: 6px; }
.af-box-head { display: flex; align-items: baseline; gap: 6px; }
.af-name { font-size: 15px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.af-mark { font-size: 14px; font-weight: 500; color: var(--faint); }   /* the ≈ — where a problem box shows ▲/▼ */
.af-transform { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.af-from { font-size: 16px; font-weight: 600; color: var(--faint); }   /* the raw, FADED — superseded, never struck/fake */
.af-arrow { font-size: 14px; color: var(--muted); }
.af-to { font-size: 17px; font-weight: 650; color: var(--ink); }       /* the corrected / current — SOLID */
.af-unit { font-size: 12px; color: var(--muted); }
.af-delta { font-size: 12px; color: var(--mid); margin-left: 2px; }
.af-exp { font-size: 12px; color: var(--muted); margin-left: 4px; }
/* the framed EVIDENCE chip — the explainer value (or the drug + timing), in a subtle inset like a sub-value */
.af-chip { margin-top: 5px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 6px; padding: 4px 8px; }
.af-chip-line { font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--muted); }
.af-chip-label { color: var(--mid); }
.af-chip-val { font-weight: 650; color: var(--ink); }
.af-chip-unit { color: var(--muted); }
.af-chip-draw { color: var(--faint); }
.af-chip-since { color: var(--ink); font-weight: 600; }
.af-chip-flag, .af-chip-guard { display: block; font-size: 10.5px; margin-top: 1px; color: var(--mid); }
.af-why { display: inline-block; font-size: 11px; color: var(--faint); margin-top: 6px; }
.af-box[open] .af-why { color: var(--mid); }
.af-reason { font-size: 12px; line-height: 1.55; color: var(--mid); padding: 0 12px 10px; }
.af-foot { font-size: 11px; color: var(--faint); margin-top: 10px; }
.af-flag { color: var(--mid); }