/* ================================================================
   KIT-VIZ — pairs with kit-viz.js. Requires tokens.css.
   Every colour here is a meaning-contract token from tokens.css or
   kit-ext.css. No hex appears in this file. §6 chart anatomy:
   hairline gridlines · mono axis labels ~9.5px · thin marks with
   rounded data-ends · 2px gaps between stacked segments · area fills
   ≤8% · emphasised endpoint dot · dashed reference lines.
   ================================================================ */

/* ---------- shared ---------- */
.cb,.rb,.mx,.ss,.rg,.tl,.wf{--viz-anim:520ms}
@media (prefers-reduced-motion:reduce){.cb,.rb,.mx,.ss,.rg,.tl,.wf{--viz-anim:1ms}}

/* the hatch that means "received, not yet confirmed" — the ribbon's own mark,
   reused here so the hero and the asset record read as one idea */
.t-sw-h{background:repeating-linear-gradient(45deg,var(--viz-1) 0 2px,color-mix(in srgb,var(--viz-1) 25%,#2a2a2e) 2px 4px)}

/* ================================================================
   1 · CUSTODY BAND — the hero
   ================================================================ */
.cb{position:relative}
/* ⚠ the top gridline's label sits at bottom:100% and is pulled up by half its
   own height, so it lands ABOVE the chart box — it was printing the y-axis
   maximum straight through the hero's title, pixel-identical, on every seat and
   every viewport. The chart reserves that line's height instead. */
.cb-chart{position:relative;display:flex;align-items:flex-end;margin-top:14px}
.cb-grid{position:absolute;inset:0;pointer-events:none}
.cb-gl{position:absolute;left:0;right:0;display:flex;align-items:center;gap:8px}
.cb-gl i{flex:1;height:1px;background:var(--hairline);order:2}
.cb-gl span{order:1;width:38px;text-align:right;font-family:var(--mono);font-size:9.5px;color:var(--ink-3);
  letter-spacing:-.02em;transform:translateY(-50%)}
.cb-cols{position:absolute;left:46px;right:0;top:0;bottom:0;display:flex;align-items:flex-end;gap:2px}
.cb-col{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  cursor:pointer;position:relative;border-radius:3px;transition:background var(--t-fast) ease}
.cb-col:hover,.cb-col.on{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.cb-col:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cb-stack{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%}
/* a segment grows from the baseline; height is set from JS after two frames
   and force-settled on a timer (see the SETTLE SNAP note in kit-viz.js) */
.cb-seg{height:0;border-radius:2px;transition:height var(--viz-anim) var(--ease-out);min-height:0}
.cb-conf{background:var(--viz-1)}
/* provisional: the SAME hue, hatched — one fact at two confidences, exactly
   as the single-device ribbon draws it */
.cb-prov{background:repeating-linear-gradient(45deg,var(--viz-1) 0 3px,color-mix(in srgb,var(--viz-1) 22%,var(--surface)) 3px 6px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--viz-1) 55%,var(--surface))}
/* broken: an OPEN gap with a red edge. Not a filled red bar — the geometry is
   what separates it from amber for a reader who cannot tell the hues apart
   (see the --viz-4 note in tokens.css). */
.cb-broken{background:var(--lc-missing-bg);box-shadow:inset 0 0 0 1.5px var(--lc-missing);border-radius:2px}
.cb-absent{height:0;border-radius:2px;margin-top:2px;background:repeating-linear-gradient(45deg,var(--viz-track) 0 3px,transparent 3px 6px);
  box-shadow:inset 0 0 0 1px var(--hairline);transition:height var(--viz-anim) var(--ease-out)}
/* the hole rail — a small multiple on the same axis, at its own scale */
.cb-rail{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:0;margin-top:8px}
.cb-rail-zoom{grid-column:2/4;justify-self:start;margin-top:6px;font-size:11px;color:var(--accent-ink);
  padding:2px 0;border-bottom:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);
  transition:color var(--t-fast) ease,border-color var(--t-fast) ease}
.cb-rail-zoom:hover{color:var(--accent);border-bottom-color:var(--accent)}
.cb-rail-l{grid-column:1/2;font-size:9px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);text-align:right;padding-right:8px;line-height:1.2}
.cb-rail-t{position:relative;height:22px;border-radius:5px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--hairline)}
.cb-rail-n{padding-left:9px;font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink)}
.cb-hole{position:absolute;top:4px;width:7px;height:14px;margin-left:-3.5px;border-radius:2px;cursor:pointer;
  transition:transform var(--t-fast) var(--ease-spring),box-shadow var(--t-fast) ease}
/* the same two marks the ribbon uses: an open gap with a red edge, and the hatch */
.cb-hole.broken{background:var(--lc-missing-bg);box-shadow:inset 0 0 0 1.5px var(--lc-missing)}
.cb-hole.prov{background:repeating-linear-gradient(45deg,var(--viz-1) 0 2.5px,color-mix(in srgb,var(--viz-1) 22%,var(--surface)) 2.5px 5px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--viz-1) 55%,var(--surface))}
.cb-hole:hover{transform:scaleY(1.3)}
.cb-hole:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cb-axis{display:flex;justify-content:space-between;align-items:baseline;margin:9px 0 0 46px;
  font-family:var(--mono);font-size:9.5px;color:var(--ink-3);letter-spacing:-.02em}
.cb-axis-mid{color:var(--ink-3);opacity:.8}
.cb-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:13px}
.cb-lg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.cb-lg i{width:10px;height:10px;border-radius:3px;flex:none}
.cb-lg i.conf{background:var(--viz-1)}
.cb-lg i.prov{background:repeating-linear-gradient(45deg,var(--viz-1) 0 2.5px,color-mix(in srgb,var(--viz-1) 22%,var(--surface)) 2.5px 5px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--viz-1) 55%,var(--surface))}
.cb-lg i.broken{background:var(--lc-missing-bg);box-shadow:inset 0 0 0 1.5px var(--lc-missing)}
.cb-lg i.absent{background:repeating-linear-gradient(45deg,var(--viz-track) 0 2.5px,transparent 2.5px 5px);box-shadow:inset 0 0 0 1px var(--hairline)}

/* ================================================================
   2 · RANK BARS
   ================================================================ */
.rb{display:flex;flex-direction:column;gap:2px}
/* The value column is a fixed tabular gutter: a ragged column of numbers reads
   as noise, so labels run left and every figure lands on the same right edge.

   ⚠ THE STARVED BAR. The label column used to be `minmax(120px,200px)` — a
   flat pixel cap that took no notice of how much room there actually was. In
   a three-column dashboard card the host is about 332px of content: 200px of
   label plus 66px of value plus two 14px gaps left the TRACK 38px, so the
   bars rendered as stubs and a ranking read as a list with decoration stuck
   on the side. The same component looked right in a wide report panel, which
   is why it survived so long.
   The cap is now `min(var(--rb-l,200px), 34%)`: the percentage only bites
   below about 590px of host, so every report panel is pixel-identical to
   before and only the cramped hosts change. `minmax(0,1fr)` keeps the track
   from being pushed around by its own content, and the value column is left
   to size to itself, because it holds the figure and a figure is the one
   thing that may not be squeezed (§5: shorten the LABEL instead).
   Below ~430px even that is not enough — see the stacked layout below. */
.rb-row{display:grid;
  grid-template-columns:minmax(78px,min(var(--rb-l,200px),34%)) minmax(0,1fr) minmax(58px,auto);
  align-items:center;gap:11px;padding:6px 8px;border-radius:7px;transition:background var(--t-fast) ease}

/* ⚠ THE THREE-COLUMN CARD. A dashboard card gives this component about 307px
   of content. Take a figure column that a caller has made 105px wide by
   appending "records" to every row, and there is no split of the remainder
   that leaves BOTH a readable label and a bar worth looking at: squeeze the
   label to fit the bar and you get "Mohali —…", squeeze the bar to fit the
   label and you get a 38px stub. Trading one off against the other was the
   whole argument, and both answers were wrong.
   So below 430px the row stops being three columns. The label takes a line
   of its own at full width — where it is comfortably readable — and the bar
   and its figure take the line beneath, with the bar getting everything the
   figure does not need. Nothing is dropped, nothing is truncated that was not
   truncated before, and the bar is the widest thing in the row again.
   `container-type` means this keys off the COMPONENT's own width, not the
   viewport: the same ranking is three columns in a report panel and stacked
   in a narrow card, on the same screen, which is the actual condition. */
.rb{container-type:inline-size}
@container (max-width:430px){
  .rb-row{grid-template-columns:minmax(0,1fr) minmax(58px,auto);
    grid-template-areas:"lbl lbl" "trk val";row-gap:5px;padding:7px 8px}
  .rb-lbl{grid-area:lbl;white-space:normal;overflow-wrap:anywhere}
  .rb-track{grid-area:trk}
  .rb-v{grid-area:val}
  .rb-sub{-webkit-line-clamp:1}
}
.rb-row.click{cursor:pointer}
.rb-row:hover{background:var(--surface-2)}
/* one selector, and a long ranking gets a focus spotlight */
.rb:hover .rb-row:not(:hover){opacity:.62;transition:opacity var(--t-fast) ease}
.rb-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rb-lbl{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* ⚠ the sub-line used to inherit the label's nowrap and be guillotined by the
   label's overflow:hidden, with no title anywhere — so "how many arrived is
   not recorded" reached the reader as "how many arrived is no…", which reads
   as a finished sentence. It gets two lines of its own here, and kit-viz.js
   puts the full text on a title so the remainder is always recoverable.
   Two lines, not unlimited: a ranking of twenty rows must stay a ranking. */
.rb-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  white-space:normal;overflow-wrap:anywhere;font-size:10.5px;line-height:1.35;color:var(--ink-3);margin-top:2px}
.rb-track{height:10px;border-radius:5px;background:var(--viz-track);overflow:hidden;position:relative}
.rb-bar{height:100%;width:0;border-radius:5px;background:var(--viz-1);
  transition:width var(--viz-anim) var(--ease-out)}
.rb-bar.warn{background:var(--viz-4)}
.rb-bar.bad{background:var(--lc-missing)}
.rb-bar.alt{background:var(--viz-3)}
.rb-bar.mute{background:var(--viz-mute)}
/* ⚠ never a zero-length bar for something nobody measured */
.rb-na{position:absolute;inset:0;border-radius:5px;display:flex;align-items:center;padding-left:7px;
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--viz-mute) 30%,transparent) 0 3px,transparent 3px 6px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--viz-mute) 45%,transparent)}
.rb-na span{font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;color:var(--ink-3)}
.rb-v{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.rb-row.na .rb-v{color:var(--ink-3)}

/* ================================================================
   3 · MATRIX
   ================================================================ */
.mx{overflow-x:auto}
.mx-grid{display:grid;gap:3px;min-width:min-content}
.mx-corner{}
.mx-ch,.mx-rh{font-size:10px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;white-space:nowrap}
.mx-ch{justify-content:center;padding-bottom:2px}
.mx-rh{padding-right:10px;justify-content:flex-end;text-align:right}
.mx-rh.click{cursor:pointer;border-radius:5px}
.mx-rh.click:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.mx-cell{min-height:32px;border-radius:6px;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink);
  background:var(--surface-2);opacity:0;transform:scale(.92);
  transition:opacity var(--viz-anim) var(--ease-out),transform var(--viz-anim) var(--ease-spring),filter var(--t-fast) ease}
.mx-cell.in{opacity:1;transform:none}
.mx-cell.click{cursor:pointer}
.mx-cell.click:hover{filter:brightness(1.06);transform:scale(1.06)}
.mx-cell:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* the ordered ramp — validated monotonic in L*, so it reads in greyscale */
.mx-cell.s1{background:var(--viz-seq-1)}
.mx-cell.s2{background:var(--viz-seq-2)}
.mx-cell.s3{background:var(--viz-seq-3)}
.mx-cell.s4{background:var(--viz-seq-4);color:var(--surface)}
.mx-cell.s5{background:var(--viz-seq-5);color:var(--surface)}
.mx-cell.na{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--viz-mute) 26%,transparent) 0 4px,transparent 4px 8px);
  box-shadow:inset 0 0 0 1px var(--hairline)}
/* nothing recorded is NOT a zero — a muted dot, and not clickable */
.mx-cell.none{background:transparent;color:var(--ink-3);opacity:1;transform:none;cursor:default}
/* the corner notch flags a secondary condition without a second colour */
.mx-cell.flag{position:relative}
.mx-cell.flag::after{content:"";position:absolute;top:0;right:0;border-width:0 7px 7px 0;border-style:solid;
  border-color:transparent var(--lc-missing) transparent transparent;border-top-right-radius:6px}
.mx-legend{display:flex;align-items:center;gap:5px;margin-top:14px;flex-wrap:wrap}
.mx-sw{width:13px;height:13px;border-radius:4px;flex:none}
.mx-sw.s1{background:var(--viz-seq-1)}.mx-sw.s2{background:var(--viz-seq-2)}.mx-sw.s3{background:var(--viz-seq-3)}
.mx-sw.s4{background:var(--viz-seq-4)}.mx-sw.s5{background:var(--viz-seq-5)}
.mx-sw.na{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--viz-mute) 26%,transparent) 0 3px,transparent 3px 6px);
  box-shadow:inset 0 0 0 1px var(--hairline);margin-left:10px}
.mx-lg-l{font-size:10px;color:var(--ink-3)}
/* the two keys that name a mark rather than a step on the ramp. They sit
   apart from the ramp so "fewer ▪▪▪▪▪ more" reads as one thing and the two
   refusal marks read as two others. */
.mx-lg-k{display:inline-flex;align-items:center;gap:5px}
.mx-lg-end{margin-left:auto}

/* ================================================================
   4 · STACK STRIP
   ================================================================ */
.ss-bar{display:flex;gap:2px;height:15px;border-radius:5px;overflow:hidden;background:var(--viz-track)}
.ss-seg{width:0;background:var(--viz-1);transition:width var(--viz-anim) var(--ease-out);cursor:default}
.ss-seg:first-child{border-radius:5px 0 0 5px}
.ss-seg:last-child{border-radius:0 5px 5px 0}
.ss-seg.a2{background:var(--viz-2)}.ss-seg.a3{background:var(--viz-3)}.ss-seg.a4{background:var(--viz-4)}
.ss-seg.mute{background:var(--viz-mute)}.ss-seg.bad{background:var(--lc-missing)}
.ss-seg.hatch{background:repeating-linear-gradient(45deg,var(--viz-1) 0 3px,color-mix(in srgb,var(--viz-1) 22%,var(--surface)) 3px 6px)}
.ss-bar:hover .ss-seg:not(:hover){opacity:.55;transition:opacity var(--t-fast) ease,width var(--viz-anim) var(--ease-out)}
.ss-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px}
.ss-lg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.ss-lg b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ss-sw{width:10px;height:10px;border-radius:3px;background:var(--viz-1);flex:none}
.ss-sw.a2{background:var(--viz-2)}.ss-sw.a3{background:var(--viz-3)}.ss-sw.a4{background:var(--viz-4)}
.ss-sw.mute{background:var(--viz-mute)}.ss-sw.bad{background:var(--lc-missing)}
.ss-sw.hatch{background:repeating-linear-gradient(45deg,var(--viz-1) 0 2.5px,color-mix(in srgb,var(--viz-1) 22%,var(--surface)) 2.5px 5px)}
/* nobody assessed it: no segment in the bar, a hatched swatch in the legend,
   and the plate. Muted, because it is not part of the composition. */
.ss-sw.na{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--viz-mute) 32%,transparent) 0 3px,transparent 3px 6px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--viz-mute) 50%,transparent)}
.ss-lg.na{color:var(--ink-3)}

/* ================================================================
   5 · RING GAUGE
   ================================================================ */
.rg{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.rg-wrap{position:relative;flex:none}
.rg-arc{stroke:var(--viz-1);transition:stroke-dasharray var(--viz-anim) var(--ease-out),stroke-width var(--t-fast) ease,opacity var(--t-fast) ease}
.rg-arc.a2{stroke:var(--viz-2)}.rg-arc.a3{stroke:var(--viz-3)}.rg-arc.a4{stroke:var(--viz-4)}
.rg-arc.mute{stroke:var(--viz-mute)}.rg-arc.bad{stroke:var(--lc-missing)}
.rg.dim .rg-arc{opacity:.4}
.rg.dim .rg-arc.on{opacity:1;stroke-width:21}
.rg-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.rg-n{font-size:30px;font-weight:350;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.rg-l{font-size:9.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.rg-legend{display:flex;flex-direction:column;gap:9px}
.rg-lg{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);min-width:170px}
.rg-lg b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:auto;padding-left:14px}
.rg-sw{width:10px;height:10px;border-radius:3px;background:var(--viz-1);flex:none}
.rg-sw.a2{background:var(--viz-2)}.rg-sw.a3{background:var(--viz-3)}.rg-sw.a4{background:var(--viz-4)}
.rg-sw.mute{background:var(--viz-mute)}.rg-sw.bad{background:var(--lc-missing)}
/* a part nobody assessed: the hatch, in the legend, with the plate. It takes
   no arc and is not in the total — see the note in ringGauge(). */
.rg-sw.na{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--viz-mute) 32%,transparent) 0 3px,transparent 3px 6px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--viz-mute) 50%,transparent)}
.rg-lg.na{color:var(--ink-3);cursor:default}
.rg-lg.na b.plate{margin-left:auto;padding-left:0}

/* ================================================================
   6 · TREND LINE
   ================================================================ */
/* ⚠ the SVG scales in X only. `height:auto` scaled it uniformly, so on a
   2560px monitor the whole drawing was magnified ~2.4x — the mono axis labels
   §6 specifies at 9.5px rendered near 28px, and the chart grew a great column
   of empty vertical space. The height is fixed to the viewBox's own height and
   preserveAspectRatio="none" stretches only the width, which is what a time
   axis wants: more room along time, the same type size. */
/* the viewBox is measured to the host at render time (see trendLine), so one
   drawing unit is one CSS pixel and nothing is stretched — no distorted glyphs
   in the mono axis, and §6's 9.5px labels stay 9.5px at any viewport */
.tl-svg{width:100%;height:var(--tl-h,205px);display:block;overflow:visible}
.tl-gl{stroke:var(--hairline);stroke-width:1}
.tl-ax{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3)}
.tl-ref{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.tl-reft{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3)}
.tl-line{fill:none;stroke:var(--viz-1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke-dashoffset var(--t-slow) var(--ease-out)}
.tl-line.a2{stroke:var(--viz-2)}.tl-line.a3{stroke:var(--viz-3)}.tl-line.a4{stroke:var(--viz-4)}
.tl-line.bad{stroke:var(--lc-missing)}
/* area fill at 8% (§6) */
.tl-area{fill:color-mix(in srgb,var(--viz-1) 8%,transparent);stroke:none}
.tl-area.a2{fill:color-mix(in srgb,var(--viz-2) 8%,transparent)}
.tl-area.a3{fill:color-mix(in srgb,var(--viz-3) 8%,transparent)}
.tl-area.a4{fill:color-mix(in srgb,var(--viz-4) 8%,transparent)}
.tl-area.bad{fill:color-mix(in srgb,var(--lc-missing) 8%,transparent)}
.tl-dot{fill:var(--viz-1);stroke:var(--surface);stroke-width:1.5}
.tl-dot.a2{fill:var(--viz-2)}.tl-dot.a3{fill:var(--viz-3)}.tl-dot.a4{fill:var(--viz-4)}
.tl-dot.bad{fill:var(--lc-missing)}
.tl-dot.end{stroke-width:2.5}
.tl-cross{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3;opacity:.55;pointer-events:none}
.tl-axis{display:flex;justify-content:space-between;margin-top:6px;padding:0 14px 0 44px;
  font-family:var(--mono);font-size:9.5px;color:var(--ink-3)}

/* ================================================================
   7 · WATERFALL
   ================================================================ */
.wf{display:flex;flex-direction:column;gap:2px}
.wf-row{display:grid;grid-template-columns:minmax(110px,190px) 1fr minmax(70px,auto);align-items:center;gap:14px;
  padding:6px 8px;border-radius:7px;transition:background var(--t-fast) ease}
.wf-row.click{cursor:pointer}
.wf-row:hover{background:var(--surface-2)}
.wf-row.total{font-weight:600}
.wf-row.total .wf-lbl{color:var(--ink)}
.wf-lbl{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-track{height:13px;position:relative;border-radius:4px}
.wf-bar{height:100%;width:0;border-radius:3px;transition:width var(--viz-anim) var(--ease-out)}
.wf-bar.t{background:var(--viz-1)}
.wf-bar.up{background:var(--viz-3)}
.wf-bar.down{background:var(--viz-4)}
.wf-v{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
/* ⚠ never a zero-length movement for a step nobody measured */
.wf-na{position:absolute;inset:0;border-radius:4px;display:flex;align-items:center;padding-left:7px;
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--viz-mute) 30%,transparent) 0 3px,transparent 3px 6px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--viz-mute) 45%,transparent)}
.wf-na span{font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;color:var(--ink-3)}
.wf-row.na .wf-lbl{color:var(--ink-3)}

/* ================================================================
   8 · SCORECARD and 9 · NESTED — used by the report treatment library
   ================================================================ */
/* the figure is the only thing allowed to get bigger. The label above it
   stays a 9.5px caps whisper and the sub below it stays small, so a
   scorecard reads as figures with a few labels rather than as a list of
   sentences with numbers in them. `min-width:0` and a breakable value keep
   a long money figure inside its own cell instead of widening the page. */
.rp-score{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.rp-sc{border:1px solid var(--hairline);border-radius:10px;background:var(--surface-2);
  padding:13px 15px 12px;min-width:0}
.rp-sc.click{cursor:pointer;transition:border-color var(--t-fast) ease,transform var(--t-fast) ease}
.rp-sc.click:hover{border-color:color-mix(in srgb,var(--ink-3) 32%,var(--hairline));transform:translateY(-1px)}
.rp-sc.click:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ⚠ a figure nobody assessed carries the hatch as well as the plate, so it
   cannot be mistaken for a measured value at a glance across the grid */
.rp-sc.na{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--viz-mute) 16%,var(--surface-2)) 0 5px,var(--surface-2) 5px 10px)}
.rp-sc-l{font-size:9.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.rp-sc-v{font-size:26px;line-height:1.15;font-weight:350;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);margin-top:7px;overflow-wrap:anywhere}
.rp-sc-s{font-size:11px;color:var(--ink-3);margin-top:4px}
.rp-nest-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:11.5px;font-weight:650;color:var(--ink);margin:14px 0 7px}
.rp-nest-h:first-child{margin-top:2px}
.rp-nest-h span{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.vz-nest{margin-bottom:2px}

/* ================================================================
   10 · THE KEY RAIL — a legend made of marks, drawn ONCE.

   This replaces the paragraphs the lanes family used to print under
   every drawing: what the notch means, how many lanes are past it,
   how many are inside, and how many have no promise at all. Each is
   a mark and a tabular figure; the sentence that used to carry it
   is on the mark's own tooltip.
   ================================================================ */
.vz-key{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:16px;
  padding-top:12px;border-top:1px solid var(--hairline)}
.vz-k{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2)}
.vz-k b{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.vz-sw{width:15px;height:8px;border-radius:4px;background:var(--viz-1);flex:none}
.vz-sw.over{background:var(--viz-4)}
.vz-sw.alt{background:var(--viz-3)}
.vz-sw.mute{background:var(--viz-mute)}
/* the promise tick, at the size it is drawn on the lane itself */
.vz-notch{width:2px;height:14px;border-radius:1px;background:var(--ink-3);flex:none}
/* the key for a BREAK in a trend line — the one refusal mark that is an
   absence of ink rather than a mark, so it needs naming most of all */
.vz-gap{color:var(--ink-3)}
.vz-gapmark{width:16px;height:2px;flex:none;border-radius:1px;
  background:repeating-linear-gradient(90deg,var(--viz-mute) 0 4px,transparent 4px 8px)}
/* a person whose kit was never established: the hatch, and the plate. An
   empty chip rail would have read as "carries nothing". */
.vz-kit-na{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--viz-mute) 26%,transparent) 0 4px,transparent 4px 8px);
  border-color:color-mix(in srgb,var(--viz-mute) 45%,transparent)}

/* ---------- breathing room: the same marks, further apart ---------- */
.vz-wall{margin-top:18px}
.vz-meter{margin-bottom:15px}
.vz-meter:last-child{margin-bottom:2px}
.vz-pair{margin-bottom:15px}
.vz-pair:last-of-type{margin-bottom:4px}
.vz-pair-l{font-size:12px;color:var(--ink);margin-bottom:6px}

/* ---------- fitting the width the client actually has (§8 4b) ---------- */
@media (min-width:1900px){
  .rb-row{grid-template-columns:minmax(160px,min(var(--rb-l,280px),34%)) minmax(0,1fr) minmax(64px,auto)}
  .mx-cell{min-height:36px}
  .rp-sc-v{font-size:29px}
}