/* =====================================================================
   judges.css (R14, one-viewport revision) — the Method screen: four
   judge modes with working diagrams, and the scribe plane at three
   scales. The screen is a COCKPIT, not a column: on a desktop-sized
   window every control is reachable without a page scroll. The Judges
   sub-tab is [mode strip → diagram + readout → action bar]; the Scribes
   sub-tab is three viewport-sized sections behind the shipped ns-seg
   picker. Below the fit breakpoint everything falls back to the normal
   stacked scroll, so nothing is ever unreachable.

   Every value here is a --rt-* semantic token or a --nsf-* night token.
   The two exceptions are the verdict hues and the lane colours, which
   arrive as inline style from VERDICT_COLORS / laneColor() — EVENTS.md
   v1.1 forbids a renderer enumerating lane names, and a stylesheet with
   its own copy of the palette is exactly that.

   Motion rule (§8): nothing on this screen animates unless the pointer
   is over it, the user pressed play, or the user is dragging — with the
   ONE recorded exception in judges.jsx's header: the two demonstration
   sliders sweep on their own until touched. The transitions below are
   the grammar of that sweep (positions glide between fixture steps);
   none of them run without a value changing.
   ===================================================================== */

/* ── the viewport fit ────────────────────────────────────────────────
   The app shell is .app (100vh grid) → .main → .scroll (the scroller).
   Pinning this tab to the viewport means giving the .tab-view a height
   and letting the screen's own columns scroll internally — the same
   move .tab-view.tab-chat already makes. Scoped to :has(.njv-fit) so no
   other tab changes, and gated on a window that can actually hold it. */
@media (min-width: 980px) and (min-height: 620px) {
  .tab-view:has(> .ns-screen.njv-fit) { height: 100%; }
  .ns-screen.njv-fit {
    height: 100%;
    overflow: hidden;
    display: flex;
    padding: 16px 24px 18px;
  }
  .njv-fit .ns-wrap { flex: 1 1 auto; min-height: 0; }
  .njv-head { flex: none; }

  /* judges: the working area takes the slack; the readout column is the
     one internal scroller (opening the exact contract scrolls there,
     never the page) */
  .njv-main { flex: 1 1 auto; min-height: 0; }
  .njv-stagepanel .njv-stageart { flex: 1 1 auto; min-height: 0; }
  .njv-stagepanel .njv-stageart svg { width: 100%; height: 100%; max-height: none; }
  .njv-readout { overflow-y: auto; }

  /* scribes: each section fills the viewport; panels scroll internally
     as a safety valve, never the page */
  .nsc-fieldpanel { flex: 1 1 auto; min-height: 0; }
  .nsc-fieldgrid { flex: 1 1 auto; min-height: 0; }
  .nsc-filmstrip { overflow-y: auto; min-height: 0; }
  .nsc-stagecol .nsc-stage { aspect-ratio: auto; min-height: 200px; }
  .nsc-cols { flex: 1 1 auto; min-height: 0; }
  .nsc-cols > .njv-panel { overflow-y: auto; min-height: 0; }
  .nsc-workwrap { flex: 1 1 auto; min-height: 0; }
  .nsc-workwrap .nsc-cols { flex: 1 1 auto; min-height: 0; }
  .nsc-dest { flex: none; }

  /* MCP: the atlas fills the viewport the way Setup ▸ Fleets does.
     The inspector rail is the internal scroller; the wrap does not.
     Research posture is a bottom dock — when open it takes a bounded
     slice and scrolls internally, so it cannot paint over the atlas. */
  .ns-screen.njv-fit.njv-mcp .ns-wrap {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .njv-mcp .nsm-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .njv-mcp .nsm-atlas {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .njv-mcp .nsm-atlas > .fla-body {
    flex: 1 1 auto;
    min-height: 0;
  }
  .njv-mcp .nsm-atlas > .fla-legend,
  .njv-mcp .nsm-atlas > .fla-dimmed { flex: 0 0 auto; }
  .njv-mcp .nsm-map {
    height: 100%;
    min-height: 0;
  }
  .njv-mcp .fla-list { overflow-y: auto; min-height: 0; height: 100%; }
  .njv-mcp .fla-rail {
    position: relative;
    top: auto;
    max-height: none;
    height: 100%;
  }
  .njv-mcp .nsm-posture { flex: 0 0 auto; min-height: 0; }
  .njv-mcp .nsm-posture.is-open {
    flex: 0 1 auto;
    max-height: min(40vh, 420px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .njv-mcp .nsm-posture.is-open .nsm-posture-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .njv-mcp .nsm-foot {
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Analytics: the wrap fills the viewport; the leaderboard table is
     the one internal scroller (the njv-mcp move, applied to .nsa-lb). */
  .ns-screen.njv-fit.njv-analytics .ns-wrap {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .njv-analytics .nsa-root { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  /* the bands keep their natural height inside the scrolling root — a
     shrinkable .nsa-main let the 60vh table overflow it and the lower
     strip painted over the leaderboard */
  .njv-analytics .nsa-main { flex: 0 0 auto; }
  .njv-analytics .nsa-lb { max-height: 60vh; }
}

/* This screen is denser than the other ns-wrap columns, so it earns the
   wider measure and the tighter rhythm — scoped, never global. */
.njv-fit .ns-wrap { max-width: 1440px; width: 100%; gap: 12px; }

/* ── the screen header + sub-tab switch ──────────────────────────── */
.njv-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.njv-head-tabs { display: flex; align-items: center; gap: 8px; }

/* ── the mode strip: selector + comparator in one row ─────────────
   Four cards, one per mode; each carries that mode's computed headline
   over the same fixture batch, so "one batch · four questions" is
   always in view rather than a second panel to scroll to. */
.njv-strip { display: flex; flex-direction: column; gap: 6px; }
.njv-strip-cap {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rt-fg-3);
}
.njv-strip-sub {
  font-family: var(--mono);
  font-size: 9px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rt-fg-3);
}
.njv-modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 979px) { .njv-modes { grid-template-columns: 1fr 1fr; } }

.njv-mode {
  text-align: left;
  background: var(--rt-panel);
  border: 1px solid var(--rt-border);
  border-radius: 6px;
  padding: 10px 13px;
  display: flex; flex-direction: column; gap: 5px;
  cursor: pointer;
  color: var(--rt-fg-3);
  min-width: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}
.njv-mode:hover { color: var(--rt-fg); border-color: var(--rt-border-strong); }
.njv-mode:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }
.njv-mode.on { color: var(--rt-fg); }

.njv-mode-t {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rt-fg);
}
.njv-mode-t .g { font-size: 13px; }
.njv-mode-t em {
  margin-left: auto;
  font-style: normal; font-size: 8px; letter-spacing: 0.1em;
  color: var(--rt-amber);
  border: 1px dashed var(--rt-border-strong);
  border-radius: 3px;
  padding: 1px 5px;
}
.njv-mode-big {
  font-family: var(--mono);
  font-size: 17px; line-height: 1.1;
  color: var(--rt-fg);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.njv-mode-big small {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rt-fg-3);
}
.njv-mode-line {
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.njv-mode-line b { color: var(--rt-fg); font-weight: 600; }
.njv-mode-src {
  font-family: var(--mono); font-size: 8px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rt-fg-3);
  border-top: 1px solid var(--rt-border);
  padding-top: 5px; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── the working area: diagram left, computed readout right ──────── */
.njv-main {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 979px) { .njv-main { grid-template-columns: 1fr; } }

.njv-stagepanel { min-height: 0; }
.njv-stageart {
  background: var(--rt-bg-sunk);
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  min-height: 200px;
  overflow: hidden;
}
.njv-stageart svg { width: 100%; height: auto; max-height: 52vh; display: block; }
.njv-agree { display: flex; flex-direction: column; gap: 8px; }

.njv-readout { min-height: 0; gap: 14px; }
.njv-sect { display: flex; flex-direction: column; gap: 10px; }
.njv-readout .njv-exact {
  margin-top: auto;
  border-top: 1px solid var(--rt-border);
  padding-top: 10px;
}

/* ── the fixture chip: permanent, in the panel body, never a tooltip ─ */
.njv-fixture {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rt-fg-3);
  background: var(--rt-bg-alt);
  border: 1px dashed var(--rt-border-strong);
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
}
.njv-live {
  border-style: solid;
  color: var(--rt-green);
  border-color: color-mix(in srgb, var(--rt-green) 45%, transparent);
  background: color-mix(in srgb, var(--rt-green) 10%, transparent);
}

/* ── the per-mode action bar ─────────────────────────────────────── */
.njv-actionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--rt-border);
  border-radius: 6px;
  background: var(--rt-panel);
  padding: 12px 16px;
}
.njv-actionbar-l { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 420px; }
.njv-actionbar-title {
  font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.njv-doors { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.njv-props { display: flex; gap: 6px; flex-wrap: wrap; }

.njv-door {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  background: var(--rt-bg-alt);
  border: 1px solid var(--rt-border-strong);
  border-radius: 3px;
  padding: 6px 11px;
  color: var(--rt-fg-2);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.njv-door:hover:not(:disabled) { color: var(--rt-fg); border-color: var(--rt-fg-3); }
.njv-door:disabled { opacity: 0.45; cursor: not-allowed; }

.njv-use {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 3px;
  padding: 10px 18px; cursor: pointer;
  color: var(--rt-bg);
  transition: filter 120ms ease;
}
.njv-use:hover { filter: brightness(1.12); }
.njv-use:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── the exact-contract disclosure (the page that shipped, preserved) ─ */
.njv-exact summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rt-fg-3);
  list-style: none;
}
.njv-exact summary::-webkit-details-marker { display: none; }
.njv-exact summary:hover { color: var(--rt-fg-2); }
.njv-exact[open] summary { margin-bottom: 12px; }
.njv-wire {
  font-family: var(--mono); font-size: 10px;
  background: var(--rt-bg-sunk);
  border: 1px solid var(--rt-border);
  border-radius: 3px;
  padding: 10px 12px;
  color: var(--rt-fg-2);
  overflow-x: auto;
  white-space: pre;
}

/* ── shared: diagram captions, sliders, footnotes ───────────────── */
.njv-cap {
  font-family: var(--mono);
  font-size: 10px; line-height: 1.6; color: var(--rt-fg-2);
}
.njv-cap b { color: var(--rt-fg); font-weight: 600; }
.njv-foot {
  font-size: 11px; line-height: 1.5; color: var(--rt-fg-3); font-style: italic;
}
.njv-slider { display: flex; align-items: center; gap: 10px; }
.njv-slider input[type="range"] { flex: 1; min-width: 90px; }
.njv-slider label {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rt-fg-3);
  white-space: nowrap;
}
/* the sweep toggle — the sliders demonstrate themselves until touched */
.njv-sweepbtn {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-family: var(--mono);
  background: var(--rt-bg-alt);
  border: 1px solid var(--rt-border-strong);
  border-radius: 50%;
  color: var(--rt-fg-2);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.njv-sweepbtn:hover { color: var(--rt-fg); border-color: var(--rt-fg-3); }
.njv-sweepbtn[aria-pressed="true"] {
  color: var(--rt-fg);
  border-color: var(--rt-fg-3);
  box-shadow: 0 0 8px color-mix(in srgb, var(--rt-fg) 25%, transparent);
}

.njv-panel {
  border: 1px solid var(--rt-border);
  border-radius: 6px;
  background: var(--rt-panel);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 11px;
}
.njv-panel-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rt-fg);
}

/* ── the scribes sub-tab ────────────────────────────────────────────
   Three viewport-sized sections behind the shipped segmented picker —
   the plane, the load/lifecycle mechanics, the workers + destinations. */
.nsc-seg { max-width: 640px; }

/* section 01 — the plane: filmstrip of the three scales on the left,
   the single WebGL stage filling the rest */
.nsc-fieldpanel { display: flex; flex-direction: column; }
.nsc-fieldgrid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}
@media (max-width: 979px) { .nsc-fieldgrid { grid-template-columns: 1fr; } }
.nsc-filmstrip .nsc-scales { grid-template-columns: 1fr; gap: 8px; }
.nsc-stagecol { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.nsc-stagecol .nsc-stage { flex: 1 1 auto; }

.nsc-scales {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 860px) { .nsc-scales { grid-template-columns: repeat(3, 1fr); } }

.nsc-scale {
  background: var(--rt-bg-sunk);
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 7px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: border-color 120ms ease;
}
.nsc-scale:hover { border-color: var(--rt-border-strong); }
.nsc-scale.on { border-color: var(--rt-fg-3); }
.nsc-scale svg { width: 100%; height: auto; display: block; }
.nsc-scale-cap {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rt-fg-3);
}
.nsc-scale.on .nsc-scale-cap { color: var(--rt-fg-2); }

.nsc-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  background: var(--nsf-night, #020202);
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  overflow: hidden;
}
.nsc-stage-note {
  position: absolute; left: 10px; bottom: 8px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(232, 228, 218, 0.55);
  pointer-events: none;
}
/* the lifecycle panel's looping stage — shorter than the full-field
   stage so the phase strip and abort cards stay in view beside it */
.nsc-stage-trip { aspect-ratio: 16 / 8; min-height: 190px; }

/* section 02 — load board + lifecycle, side by side */
.nsc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 979px) { .nsc-cols { grid-template-columns: 1fr; } }
.nsc-workwrap { display: flex; flex-direction: column; gap: 12px; }

.nsc-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 719px) { .nsc-board { grid-template-columns: 1fr; } }

.nsc-cell {
  background: var(--rt-bg-sunk);
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.nsc-cell svg { width: 100%; height: auto; display: block; }
.nsc-cell-cap {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rt-fg-2);
}

.nsc-checks { display: flex; flex-direction: column; gap: 4px; }
.nsc-check {
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3);
  display: flex; align-items: baseline; gap: 8px;
}
.nsc-check b { font-weight: 700; }
.nsc-check.ok b { color: var(--rt-green); }
.nsc-check.bad b { color: var(--rt-coral); }

/* ── lifecycle strip ────────────────────────────────────────────── */
.nsc-life {
  display: flex; gap: 3px; align-items: stretch; flex-wrap: wrap;
}
.nsc-phase {
  flex: 1 1 90px;
  border: 1px solid var(--rt-border);
  border-radius: 3px;
  background: var(--rt-bg-alt);
  padding: 7px 8px;
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--mono);
  min-width: 0;
  transition: border-color 120ms ease, background 120ms ease;
}
.nsc-phase.on {
  border-color: var(--nsf-bone, #E8E4DA);
  background: color-mix(in srgb, var(--rt-fg) 8%, transparent);
}
.nsc-phase .k { font-size: 8.5px; letter-spacing: 0.08em; color: var(--rt-fg-2); }
.nsc-phase.on .k { color: var(--rt-fg); }
.nsc-phase .v { font-size: 9px; color: var(--rt-fg-3); }
.nsc-phase .bar { height: 2px; background: var(--rt-border-strong); border-radius: 1px; overflow: hidden; }
.nsc-phase .bar i { display: block; height: 100%; background: var(--nsf-bone, #E8E4DA); }

/* ── the worker registry table ──────────────────────────────────── */
.nsc-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 10.5px; }
.nsc-table th {
  text-align: left; font-weight: 600; font-size: 8.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--rt-fg-3);
  padding: 5px 10px 5px 0; border-bottom: 1px solid var(--rt-border);
}
.nsc-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rt-border); color: var(--rt-fg-2); vertical-align: top; }
.nsc-table tr:last-child td { border-bottom: 0; }
.nsc-table td.on { color: var(--rt-green); }
.nsc-table td.dark { color: var(--rt-amber); }

/* ── the scan panel ─────────────────────────────────────────────── */
.nsc-scan-input {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  font-family: var(--mono); font-size: 11px; line-height: 1.55;
  background: var(--rt-bg-sunk);
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  padding: 10px 12px;
  color: var(--rt-fg);
}
.nsc-scan-input:focus { outline: none; border-color: var(--rt-fg-3); }

.nsc-rec { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 12px; font-family: var(--mono); font-size: 10.5px; }
.nsc-rec dt { color: var(--rt-fg-3); letter-spacing: 0.08em; text-transform: uppercase; font-size: 8.5px; padding-top: 2px; }
.nsc-rec dd { margin: 0; color: var(--rt-fg-2); overflow-wrap: anywhere; }

/* ── the destination strip (§5.7) ───────────────────────────────── */
.nsc-links { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .nsc-links { grid-template-columns: repeat(3, 1fr); } }
.nsc-link {
  text-align: left;
  background: var(--rt-bg-alt);
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  padding: 11px 13px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color 120ms ease;
}
.nsc-link:hover { border-color: var(--rt-border-strong); }
.nsc-link .t { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rt-fg); }
.nsc-link .d { font-size: 11px; line-height: 1.5; color: var(--rt-fg-3); }

/* The live count on a destination card (§5.7). Mono, because it is a
   measured value; sits above the provenance chip so the number and the
   module that produced it read as one line of evidence. */
.nsc-link-n {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--rt-fg-2);
  margin-top: 2px;
}
.nsc-link-n b { color: var(--rt-fg); font-weight: 600; }
.nsc-link .njv-fixture { align-self: flex-start; }

/* =====================================================================
   THE INSTRUMENTS (fidelity pass, 2026-08-19) — meters, share bars,
   tick strips, the flow diagram, the scorecard, and the motion grammar
   that makes the sweep watchable: positions ride CSS transforms and
   glide between fixture steps. Every color is a token or arrives inline
   from VERDICT_COLORS / the mode accents, same as everywhere else.
   ===================================================================== */

/* diagram motion — one grammar for every art */
.njv-glide { transition: transform 360ms cubic-bezier(0.3, 0.8, 0.3, 1); will-change: transform; }
.njv-fade { transition: fill-opacity 300ms ease, stroke-opacity 300ms ease, y 300ms ease, r 300ms ease; }
.njv-dim { transition: opacity 300ms ease; }

/* ── meters: a value as a position on a banded scale ─────────────── */
.njv-meter { display: flex; flex-direction: column; gap: 5px; }
.njv-meter-track {
  position: relative;
  height: 14px;
  background: var(--rt-bg-sunk);
  border: 1px solid var(--rt-border);
  border-radius: 3px;
  overflow: visible;
}
.njv-meter-zone { position: absolute; top: 0; bottom: 0; }
.njv-meter-mark {
  position: absolute; top: -2px; bottom: -2px;
  border-left: 1px dashed var(--rt-border-strong);
}
.njv-meter-mark em {
  position: absolute; top: -13px; left: 3px;
  font-style: normal; font-family: var(--mono);
  font-size: 7.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rt-fg-3);
  white-space: nowrap;
}
.njv-meter-needle {
  position: absolute; top: -3px; bottom: -3px;
  width: 2px; margin-left: -1px;
  border-radius: 1px;
  transition: left 260ms cubic-bezier(0.3, 0.8, 0.3, 1), background 260ms ease;
}
.njv-meter-cap { font-family: var(--mono); font-size: 9px; line-height: 1.5; color: var(--rt-fg-3); }
.njv-meter-cap b { color: var(--rt-fg-2); }

/* ── share bar: the batch split into proportional segments ───────── */
.njv-share {
  display: flex;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--rt-border);
  background: var(--rt-bg-sunk);
  gap: 1px;
}
.njv-share span { transition: width 320ms cubic-bezier(0.3, 0.8, 0.3, 1); min-width: 2px; }

/* ── tick strip: the batch as individuals ────────────────────────── */
.njv-ticks { display: flex; gap: 3px; flex-wrap: wrap; }
.njv-ticks span {
  width: 11px; height: 11px;
  border-radius: 2px;
  transition: background 260ms ease, box-shadow 260ms ease;
}
.njv-ticks span.hollow { background: transparent !important; border: 1px dashed var(--rt-border-strong); }

/* ── horizontal labeled bars (shortlist novelty) ─────────────────── */
.njv-hbar {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9.5px;
}
.njv-hbar em { font-style: normal; color: var(--rt-fg-3); width: 26px; flex: none; }
.njv-hbar b { color: var(--rt-fg); width: 34px; text-align: right; flex: none; }
.njv-hbar-track {
  flex: 1; height: 8px;
  background: var(--rt-bg-sunk);
  border: 1px solid var(--rt-border);
  border-radius: 2px;
  overflow: hidden;
}
.njv-hbar-track i { display: block; height: 100%; transition: width 320ms cubic-bezier(0.3, 0.8, 0.3, 1); }

/* ── the retrieval flow: claim → beam → passage ──────────────────── */
.njv-flow { display: flex; flex-direction: column; gap: 6px; }
.njv-flow-node {
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  background: var(--rt-bg-alt);
  padding: 9px 12px;
  font-size: 11.5px; line-height: 1.55;
  color: var(--rt-fg-2);
}
.njv-flow-node em {
  display: block;
  font-style: normal; font-family: var(--mono);
  font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 4px;
}
.njv-flow-node.hit { background: color-mix(in srgb, currentColor 4%, var(--rt-bg-alt)); }
.njv-flow-node.empty { border-style: dashed; color: var(--rt-fg-3); }
.njv-flow-beam {
  display: flex; align-items: center; gap: 8px;
  padding-left: 14px;
  font-size: 13px;
  color: var(--rt-fg-3);
}
.njv-flow-beam em {
  font-style: normal; font-family: var(--mono);
  font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.njv-flow-beam.miss { opacity: 0.6; }

/* ── the withheld verdict: three seats, none taken, and the reason ── */
.njv-withheld {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border: 1px dashed var(--rt-border-strong);
  border-radius: 4px;
  padding: 8px 11px;
}
.njv-withheld span {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rt-fg-3);
  border: 1px solid var(--rt-border);
  border-radius: 3px;
  padding: 2px 7px;
  opacity: 0.65;
}
.njv-withheld i {
  font-style: italic; font-size: 10px; color: var(--rt-fg-3);
  flex-basis: 100%;
}

/* ── the quality scorecard ───────────────────────────────────────── */
.njv-scorecard {
  display: flex; flex-direction: column;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  overflow: hidden;
}
.njv-sc-band {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 10px;
  background: var(--rt-bg-sunk);
  border-bottom: 1px solid var(--rt-border);
  color: var(--rt-fg-2);
}
.njv-sc-band em { font-style: normal; color: var(--rt-fg-3); margin-left: 6px; letter-spacing: 0.06em; }
.njv-sc-band.must { color: var(--rt-fg); }
.njv-sc-band:not(:first-child) { border-top: 1px solid var(--rt-border); }
.njv-sc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 108px;
  gap: 10px; align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--rt-border) 55%, transparent);
  font-family: var(--mono); font-size: 9.5px;
  color: var(--rt-fg-2);
}
.njv-sc-row:last-child { border-bottom: 0; }
.njv-sc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.njv-sc-kind { font-size: 8.5px; color: var(--rt-fg-3); }
.njv-sc-bar {
  position: relative;
  height: 12px;
  background: var(--rt-bg-sunk);
  border: 1px solid var(--rt-border);
  border-radius: 2px;
  overflow: hidden;
  display: flex; align-items: center;
}
.njv-sc-bar i {
  position: absolute; inset: 0 auto 0 0;
  opacity: 0.5;
  transition: width 320ms cubic-bezier(0.3, 0.8, 0.3, 1), background 260ms ease;
}
.njv-sc-bar b {
  position: relative;
  margin-left: auto; padding-right: 4px;
  font-size: 8px; font-weight: 600; color: var(--rt-fg-2);
}
.njv-sc-bar.abstain { border-style: dashed; }
.njv-sc-bar.abstain b { margin: 0 auto; padding: 0; color: var(--rt-fg-3); font-weight: 400; letter-spacing: 0.06em; }

/* ── small readout furniture ─────────────────────────────────────── */
.njv-viz { display: flex; flex-direction: column; gap: 6px; }
.njv-viz-k {
  font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rt-fg-3);
}
.njv-viz-k b { color: var(--rt-fg); }
.njv-contrast {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 11px; line-height: 1.5; color: var(--rt-fg-2);
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  background: var(--rt-bg-alt);
  padding: 7px 10px;
}
.njv-stat-of { font-size: 12px; font-weight: 400; color: var(--rt-fg-3); }
.njv-readout .ns-stat-row { padding: 10px 0; }
.njv-readout .ns-verdict-card { gap: 12px; }
.njv-readout .ns-verdict-card .njv-cap { max-width: 60%; }

/* ── lifecycle: glyphs + abort cards ─────────────────────────────── */
.nsc-phase-glyph { width: 22px; height: 16px; display: block; margin-bottom: 2px; }
.nsc-phase.on .nsc-phase-glyph { filter: drop-shadow(0 0 4px rgba(232, 228, 218, 0.5)); }
.nsc-phase .bar i { transition: width 160ms linear; }
/* the live fill: one run per entry into a phase, over the band's
   midpoint duration (set inline). It exists only while the stage replay
   has a scribe in that phase — the strip is a readout of motion the
   user can already see and pause, never idle animation of its own. */
.nsc-fill {
  width: 0;
  animation-name: nscFill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes nscFill { from { width: 0; } to { width: 100%; } }
.nsc-aborts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 719px) { .nsc-aborts { grid-template-columns: 1fr; } }
.nsc-abort {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  background: var(--rt-bg-alt);
  padding: 9px 11px;
}
.nsc-abort .w { color: var(--rt-amber); font-size: 13px; line-height: 1.2; flex: none; }
.nsc-abort span:not(.w) { font-size: 10.5px; line-height: 1.5; color: var(--rt-fg-3); }
.nsc-abort b {
  display: block;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rt-fg-2);
  margin-bottom: 2px;
}