/* =====================================================================
   NIGHT FIELD — the in-app live view, ported from NS-UI-UX.
   Namespace: .nsf-* (the older .ns-* recipes in app.css stay for the
   Queue and Judges screens). These surfaces are intentionally dark in
   both themes — the night identity is the point — so colors here are
   literal, scoped under .nsf-, and never leak into the rest of the app.
   Verdict colors are information (R4 §6): teal supported, gold split,
   red contradicted.
   ===================================================================== */

:root {
  --nsf-night: #020202;
  --nsf-panel: rgba(18, 22, 41, 0.9);
  --nsf-panel-2: rgba(7, 10, 20, 0.85);
  --nsf-glass-border: rgba(255, 255, 255, 0.12);
  --nsf-bone: #E8E4DA;
  --nsf-haze: #8E9DBE;
  --nsf-supported: #5FBFA8;
  --nsf-split: #E0B450;
  --nsf-contradicted: #D4576B;
  --nsf-spread: #B57EDC;
  --nsf-amber: #F2A65A;
  --nsf-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* The Library's colour families as triplets, so its folio skin can
     re-tint them in one place (.nsl-view) - the defaults ARE the field's
     own values, so nothing outside the Library moves. */
  --nsl-haze-rgb: 142, 157, 190;
  --nsl-amber-rgb: 242, 166, 90;
  --nsl-deep-rgb: 4, 5, 10;
  --nsl-ok-rgb: 95, 191, 168;
  --nsf-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
}

@keyframes nsfFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes nsfPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------------------------------------------------------------------
   Stage: the WebGL viewport. Fills the Night tab; the canvas is the
   ground layer, HUD elements float above it.
   ------------------------------------------------------------------- */
.nsf-stage {
  position: relative;
  overflow: hidden;
  background: var(--nsf-night);
  border-radius: 6px;
  border: 1px solid var(--nsf-glass-border);
  /* Height is taken from the flex column, never guessed: .nsf-night-screen
     is exactly the scrollport tall, so flex:1 spends every pixel the
     subnav and the padding leave and the stage's bottom edge lands on the
     status bar. The old clamp() subtracted a hardcoded ~300px of chrome
     that no longer matched anything and left a dead band under the field.
     420px is a floor, not a fit — below it the field stops being readable,
     so the screen overflows and .scroll scrolls, which is correct. */
  min-height: 420px;
  flex: 1;
  user-select: none;
}
.nsf-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.nsf-stage::after {
  /* dot-matrix ground from the reference — texture, not animation */
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 1;
}

/* engine-owned per-frame DOM */
.nsf-lane-label {
  position: absolute;
  z-index: 3;
  font-family: var(--nsf-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 12px;
  margin: -12px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
  transition: opacity 0.2s ease;
  pointer-events: auto;
}
.nsf-lane-label:hover { opacity: 0.8; }
.nsf-lane-label.off { opacity: 0.28; }

.nsf-tooltip {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 12px;
  border-radius: 3px;
  backdrop-filter: blur(12px);
  font-family: var(--nsf-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nsf-tooltip-title {
  color: #fff;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 4px;
  margin-bottom: 2px;
}
.nsf-tooltip-row { display: flex; justify-content: space-between; gap: 16px; }
.nsf-tooltip-row span:last-child { color: #fff; }

/* Lane hover — status + generating duration, not the cluster census.
   Compact on purpose: the operator is glancing, not inspecting. */
.nsf-tooltip.lane {
  gap: 2px;
  padding: 8px 10px;
  min-width: 108px;
  letter-spacing: 0.06em;
}
.nsf-tooltip.lane .nsf-tooltip-title {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  font-size: 10px;
}
.nsf-tooltip-status {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.nsf-tooltip-dur {
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* ---------------------------------------------------------------------
   HUD chrome floating over the stage
   ------------------------------------------------------------------- */
.nsf-hud-top {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  pointer-events: none;
}
.nsf-hud-top > * { pointer-events: auto; }

.nsf-hud-chip {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--nsf-glass-border);
  padding: 6px 10px;
  border-radius: 3px;
  backdrop-filter: blur(12px);
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.nsf-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: nsfPulse 2s infinite;
  flex: none;
}
.nsf-hud-chip.nsf-ambient { color: var(--nsf-haze); }
.nsf-hud-chip.nsf-ambient .nsf-live-dot { background: var(--nsf-haze); box-shadow: 0 0 6px var(--nsf-haze); animation: none; }
.nsf-hud-chip.nsf-degraded { color: var(--nsf-split); border-color: rgba(224, 180, 80, 0.4); }

.nsf-cam-controls {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 3px;
  backdrop-filter: blur(12px);
  padding: 3px;
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.nsf-cam-btn {
  padding: 4px 9px;
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, color 0.15s;
}
.nsf-cam-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.nsf-cam-btn.active { background: rgba(255, 255, 255, 0.22); color: #fff; }
.nsf-cam-divider { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.15); margin: 0 2px; }

/* glow / brightness popover */
.nsf-popover-wrap { position: relative; }
.nsf-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 250px;
  background: rgba(11, 14, 23, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  padding: 14px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--nsf-mono);
  backdrop-filter: blur(20px);
  animation: nsfFadeIn 0.2s ease-out;
}
.nsf-popover-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}
.nsf-popover-head b { color: #fff; font-size: 12px; }
.nsf-preset-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: 8px; }
.nsf-preset-btn {
  padding: 4px 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.nsf-preset-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.nsf-preset-btn.active { background: rgba(255, 255, 255, 0.2); color: #fff; font-weight: 700; border-color: rgba(255, 255, 255, 0.3); }

/* range sliders (scrubber + brightness) — reference thumb styling */
.nsf-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  outline: none;
}
.nsf-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
.nsf-range::-moz-range-thumb {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------------
   Bottom footer: play/scrub timeline + lane legend
   ------------------------------------------------------------------- */
.nsf-footer {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 4px;
  backdrop-filter: blur(16px);
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.nsf-footer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--nsf-mono);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nsf-time-badge { color: #fff; font-weight: 700; white-space: nowrap; }
/* R12 export, glued to the attempts / elapsed badge so the field
   itself is enough — no detour through Library or Morning. */
.nsf-export-btn {
  flex: none;
  padding: 4px 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.nsf-export-btn:hover { background: rgba(255, 255, 255, 0.18); }
.nsf-export-btn:disabled { opacity: 0.45; cursor: default; }
.nsf-export-btn:disabled:hover { background: rgba(255, 255, 255, 0.08); }
.nsf-play-btn {
  width: 26px; height: 26px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background 0.15s;
}
.nsf-play-btn:hover { background: rgba(255, 255, 255, 0.18); }

/* Playback speed — 0× / 1× / 2× / 4× beside the transport button.
   1× / 2× / 4× multiply each surface's OWN base pace (the cockpit's
   "night in about a minute", the export's shorter content-paced replay).
   0× is real time: wall clock equals job time, so scribes are visible. */
.nsf-speed {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 1px;
  background: rgba(255, 255, 255, 0.04);
}
.nsf-speed-btn {
  font-family: var(--nsf-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  background: none;
  border: 0;
  border-radius: 2px;
  padding: 3px 6px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.nsf-speed-btn:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.12); }
.nsf-speed-btn.active { color: #fff; background: rgba(255, 255, 255, 0.2); font-weight: 700; }
.nsf-speed-btn:disabled { opacity: 0.35; cursor: default; }

.nsf-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nsf-legend-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  padding: 2px 0;
  transition: color 0.15s;
}
.nsf-legend-item:hover { color: #fff; }
.nsf-legend-item.silent,
.nsf-legend-item.off { color: rgba(255, 255, 255, 0.35); }
.nsf-legend-item.silent .nsf-legend-dot,
.nsf-legend-item.off .nsf-legend-dot { opacity: 0.4; }
.nsf-legend-item.selected { color: #fff; }
/* a lane with an attempt in flight — the dot breathes (state, not decoration) */
.nsf-legend-item.generating { color: rgba(255, 255, 255, 0.95); }
.nsf-legend-item.generating .nsf-legend-dot { animation: nsf-gen-pulse 1.4s ease-in-out infinite; }
@keyframes nsf-gen-pulse {
  0%, 100% { box-shadow: 0 0 6px currentColor; transform: scale(1); }
  50% { box-shadow: 0 0 14px currentColor; transform: scale(1.35); }
}
.nsf-legend-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 6px currentColor;
}
.nsf-legend-sub { color: rgba(255, 255, 255, 0.35); text-transform: none; letter-spacing: 0; }

/* Legend hover card — the same two facts the field tooltip shows,
   anchored above the chip so it never covers the lane name. */
.nsf-legend-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 9px;
  background: rgba(0, 0, 0, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
}
.nsf-legend-item:hover .nsf-legend-tip,
.nsf-legend-item:focus-visible .nsf-legend-tip { display: flex; }
.nsf-legend-tip-status { color: #fff; }
.nsf-legend-tip-dur {
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 11px;
}

/* ---------------------------------------------------------------------
   Sub-tab bar (Live field | Morning) + job selector — the reference nav
   ------------------------------------------------------------------- */
.nsf-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.nsf-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--nsf-glass-border);
  padding: 4px;
  border-radius: 4px;
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nsf-tab {
  padding: 6px 12px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}
.nsf-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.nsf-tab.active {
  background: #fff;
  color: #000;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}
.nsf-tab .nsf-tab-glyph { font-size: 12px; line-height: 1; }

.nsf-job-select {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 3px;
  color: #fff;
  font-family: var(--nsf-mono);
  font-size: 10px;
  padding: 6px 8px;
  max-width: 320px;
  cursor: pointer;
}
.nsf-job-select:focus { outline: none; border-color: rgba(255, 255, 255, 0.5); }

.nsf-morning-ready {
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nsf-split);
  background: rgba(224, 180, 80, 0.1);
  border: 1px solid rgba(224, 180, 80, 0.35);
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.nsf-morning-ready:hover { background: rgba(224, 180, 80, 0.2); }
/* 0.79.0 — the ⚗ making pill: same chrome as the morning flag, amber. */
.nsf-making-pill {
  color: var(--nsf-amber);
  background: rgba(242, 166, 90, 0.1);
  border-color: rgba(242, 166, 90, 0.4);
}
.nsf-making-pill:hover { background: rgba(242, 166, 90, 0.2); }

/* Subnav quick actions — glyph-sized buttons left of the omnisearch
   (scribes review-all, pause/resume). Same chrome family as the
   morning flag, neutral by default; the glyph carries any accent
   color inline. */
.nsf-act-btn {
  font-family: var(--nsf-mono);
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  padding: 5px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, border-color 0.15s;
}
.nsf-act-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); }
.nsf-act-note {
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Inspector: right slide-in panel (460px, reference cubic-bezier ease)
   ------------------------------------------------------------------- */
.nsf-inspector {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 92%);
  z-index: 7;
  background: rgba(7, 10, 20, 0.92);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(24px);
  transform: translateX(102%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
}
.nsf-inspector.open { transform: translateX(0); }
.nsf-inspector-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--nsf-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #fff;
  font-weight: 700;
  flex: none;
}
.nsf-inspector-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Attempt-inspector sub-tabs. Pinned between the head and the scrolling
   body, so the strip stays put while a long attempt scrolls under it.
   RESULTS = #seq · lane · model + the output; INFO = the provenance
   rows. Splitting them is what keeps a 460px panel from opening on ten
   metadata rows before the text the user actually clicked for. */
.nsf-inspector-tabs {
  display: flex;
  gap: 4px;
  flex: none;
  padding: 12px 18px 0;
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.nsf-inspector-tab {
  flex: 1;
  padding: 7px 10px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.nsf-inspector-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.nsf-inspector-tab[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 700;
}
/* Panes inherit the body's column rhythm; the explicit [hidden] rule is
   load-bearing — display:flex would otherwise beat the UA's hidden. */
.nsf-inspector-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nsf-inspector-pane[hidden] { display: none; }
.nsf-inspector-tab-live::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--nsf-live, currentColor);
  box-shadow: 0 0 6px var(--nsf-live, currentColor);
  vertical-align: middle;
}
.nsf-lane-output-hud {
  font-family: var(--nsf-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.nsf-lane-output-open {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  color: var(--nsf-bone, #E8E4DA);
  font: 10px var(--nsf-mono, monospace);
  letter-spacing: 0.04em;
  text-decoration: underline;
  cursor: pointer;
}
.nsf-lane-output-open:hover { color: #fff; }
.nsf-lane-output {
  flex: 1;
  min-height: 80px;
  max-height: 42vh;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 10px 12px;
  font: 12px/1.45 var(--nsf-mono, monospace);
  color: var(--nsf-bone, #E8E4DA);
}
.nsf-lane-output-wait { color: rgba(255, 255, 255, 0.4); }
.nsf-lane-output-caret {
  animation: nsf-caret-blink 1s step-end infinite;
}
@keyframes nsf-caret-blink {
  50% { opacity: 0; }
}
.nsf-lane-gens { display: flex; flex-direction: column; gap: 6px; }
.nsf-lane-gens-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 160px;
  overflow-y: auto;
}
.nsf-lane-gen {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 5px 8px;
  color: rgba(255, 255, 255, 0.7);
  font: 10px/1.35 var(--nsf-mono, monospace);
  cursor: pointer;
}
.nsf-lane-gen:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.nsf-lane-gen.on {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
}
.nsf-lane-gen-seq { opacity: 0.7; }
.nsf-lane-gen-model {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nsf-lane-gen-meta { opacity: 0.55; white-space: nowrap; }
.nsf-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: none;
}
.nsf-inspector-act-danger { color: var(--nsf-contradicted, #D4576B); border-color: rgba(212, 87, 107, 0.4); }
.nsf-inspector-act-danger:hover { color: #fff; background: rgba(212, 87, 107, 0.22); }
.nsf-inspector-act-note {
  flex: 1 1 100%;
  font-family: var(--nsf-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--nsf-bone, #E8E4DA);
  line-height: 1.45;
}
.nsf-inspector-sched {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.nsf-inspector-sched-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nsf-mono);
  font-size: 10px;
  color: var(--nsf-haze);
}
.nsf-inspector-sched-row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nsf-inspector-sched-in {
  width: 88px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--nsf-bone, #E8E4DA);
  font: inherit;
  padding: 3px 6px;
  border-radius: 3px;
}
.nsf-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
}
.nsf-close-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

.nsf-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--nsf-mono);
  font-size: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nsf-kv .k { color: var(--nsf-haze); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px; }
.nsf-kv .v { color: #fff; text-align: right; word-break: break-all; }

/* Force start — the lane inspector's recovery control.

   Quiet by default and loud only when the lane is actually in trouble:
   the button never moves or disappears, so it is in the same place
   whether someone is browsing a healthy night or watching one stop. */
.nsf-force {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nsf-force-why {
  font-family: var(--nsf-mono);
  font-size: 10px;
  line-height: 1.45;
  color: var(--nsf-contradicted);
}
.nsf-force-btn {
  font-family: var(--nsf-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 7px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.nsf-force-btn:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
}
/* Disabled is the honest state for a lane with nothing to start (a
   replay's dead fleet, the ambient demo) — dimmed and unclickable, with
   the button's title saying why, rather than a control that accepts a
   press and reports nothing. */
.nsf-force-btn:disabled { opacity: 0.4; cursor: default; }
.nsf-force-alert .nsf-force-btn {
  color: #fff;
  background: rgba(212, 87, 107, 0.18);
  border-color: var(--nsf-contradicted);
}
.nsf-force-alert .nsf-force-btn:hover:not(:disabled) {
  background: rgba(212, 87, 107, 0.32);
}
.nsf-force-note {
  font-family: var(--nsf-mono);
  font-size: 9px;
  line-height: 1.5;
  color: var(--nsf-haze);
}
.nsf-force-note.nsf-force-bad { color: var(--nsf-contradicted); }

/* Field on/off — the lane inspector's brightness switch.
   Same control silence uses: Off dims the lane, On restores it.
   A silent lane lands Off so the operator can see it stopped.
   Show attempts sits on the same switch chrome, one row below:
   Off removes this lane's dots, On (the default) puts them back. */
.nsf-lane-vis-row .v { justify-content: flex-end; }
.nsf-lane-vis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  padding: 0 8px 0 2px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-family: var(--nsf-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}
.nsf-lane-vis-thumb {
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  flex: 0 0 auto;
}
.nsf-lane-vis-thumb::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 120ms ease;
}
.nsf-lane-vis.on {
  color: #fff;
  background: rgba(95, 191, 168, 0.22);
  border-color: rgba(95, 191, 168, 0.45);
}
.nsf-lane-vis.on .nsf-lane-vis-thumb { background: rgba(95, 191, 168, 0.7); }
.nsf-lane-vis.on .nsf-lane-vis-thumb::after { transform: translateX(12px); }
.nsf-lane-vis.off { opacity: 0.7; }
.nsf-lane-vis:hover { color: #fff; border-color: rgba(255, 255, 255, 0.36); }
.nsf-lane-vis-why {
  font-family: var(--nsf-mono);
  font-size: 10px;
  color: var(--nsf-haze);
  text-transform: none;
  letter-spacing: 0;
}

/* Model swap — the lane inspector's other edit. A model change rewrites
   lanes.toml and bounces the process, so Apply is explicit: picking in
   the list is not a commit. */
.nsf-lane-model-row .v {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.nsf-lane-model-name {
  word-break: break-all;
  text-align: right;
}
.nsf-lane-model-btn {
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 3px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex: none;
}
.nsf-lane-model-btn:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
}
.nsf-lane-model-btn:disabled { opacity: 0.4; cursor: default; }
.nsf-lane-name-input {
  font-family: var(--nsf-mono);
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  padding: 3px 6px;
  width: 140px;
  min-width: 0;
  text-align: right;
}
.nsf-lane-model-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.nsf-lane-model-pick select {
  width: 100%;
  font-family: var(--nsf-mono);
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  padding: 5px 6px;
}
.nsf-lane-model-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.nsf-lane-model-note {
  font-family: var(--nsf-mono);
  font-size: 9px;
  line-height: 1.45;
  color: var(--nsf-haze);
  text-transform: none;
  letter-spacing: 0;
}
.nsf-lane-model-note.bad { color: var(--nsf-contradicted); }
.nsf-lane-model-note.warn { color: var(--nsf-amber); }

.nsf-section-label {
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--nsf-haze);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
}

/* RESULTS: thumbs sit to the right of the output label. The rule that
   used to live on the label moves to the whole head so the two tiers
   share one underline. */
.nsf-output-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
}
.nsf-output-head .nsf-section-label {
  border-bottom: none;
  padding-bottom: 0;
}
.nsf-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.nsf-rating-tier {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.nsf-rating-who {
  font-family: var(--nsf-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nsf-haze);
  margin-right: 4px;
}
.nsf-thumb {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 3px;
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.32;
  cursor: pointer;
  color: inherit;
}
button.nsf-thumb:hover:not(:disabled) { opacity: 0.85; }
button.nsf-thumb:disabled { cursor: default; }
.nsf-thumb.frozen { cursor: default; }
.nsf-thumb.up { opacity: 1; }
.nsf-thumb.down { opacity: 1; }

.nsf-raw-output {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 12px;
  overflow-x: auto;
}

/* ---------------------------------------------------------------------
   Glass panels, stat tiles, verdict chips — shared morning/archive kit
   ------------------------------------------------------------------- */
.nsf-glass {
  background: var(--nsf-panel);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.nsf-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nsf-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--nsf-split);
  font-weight: 700;
}
.nsf-headline {
  font-family: var(--nsf-sans);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--nsf-bone);
}
.nsf-headline b {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.nsf-subtitle {
  font-family: var(--nsf-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--nsf-haze);
}
.nsf-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  font-family: var(--nsf-mono);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 0;
}
.nsf-stat-cell { display: flex; flex-direction: column; gap: 2px; }
.nsf-stat-cell + .nsf-stat-cell { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.nsf-stat-cell .v { font-size: 19px; color: #fff; font-weight: 700; }
.nsf-stat-cell .k { font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nsf-haze); }

.nsf-verdict-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 14px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--nsf-mono);
}
.nsf-verdict-card .label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.nsf-verdict-card .value {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.nsf-verdict-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}

/* ---------------------------------------------------------------------
   Creative shortlist rail (morning card): a scrollable rail of real
   buttons. Click opens that attempt in the answer modal; hover or
   keyboard focus expands the row IN PLACE — manifest, shortlist axes,
   and the opening lines of the attempt — rather than a floating
   popover, so nothing clips against the scroll container.
   ------------------------------------------------------------------- */
.nsf-sl-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: min(324px, 38vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}
.nsf-sl-list::-webkit-scrollbar { width: 8px; }
.nsf-sl-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }
.nsf-sl-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 4px; }
.nsf-sl-row {
  font: inherit; color: inherit;
  text-align: left;
  display: flex; flex-direction: column;
  flex: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.nsf-sl-row:hover, .nsf-sl-row:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
}
.nsf-sl-row:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.4); outline-offset: 1px; }
.nsf-sl-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.nsf-sl-seq { font-size: 10px; font-weight: 700; color: var(--nsf-haze); flex: none; }
.nsf-sl-role { font-size: 10px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; flex: none; }
.nsf-sl-headline {
  flex: 1; min-width: 0;
  font-size: 11px; font-style: italic; color: rgba(232, 228, 218, 0.65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nsf-sl-novelty { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; color: var(--nsf-spread); flex: none; }
.nsf-sl-novelty .bar { width: 44px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.nsf-sl-novelty .bar span { display: block; height: 100%; background: var(--nsf-spread); }
.nsf-sl-detail {
  display: flex; flex-direction: column; gap: 7px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
}
.nsf-sl-row:hover .nsf-sl-detail, .nsf-sl-row:focus-visible .nsf-sl-detail {
  max-height: 180px; opacity: 1; margin-top: 8px;
}
.nsf-sl-detail .snippet {
  font-family: var(--nsf-sans);
  font-size: 11.5px; line-height: 1.5; color: rgba(232, 228, 218, 0.78);
  text-transform: none; letter-spacing: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  white-space: normal;
}
.nsf-sl-detail .snippet.muted { color: var(--nsf-haze); font-style: italic; }
.nsf-sl-detail .meta { display: flex; flex-wrap: wrap; gap: 5px; }
.nsf-sl-detail .meta .chip {
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--nsf-haze);
  background: rgba(142, 157, 190, 0.1);
  border: 1px solid rgba(142, 157, 190, 0.25);
  border-radius: 2px; padding: 2px 6px;
  white-space: nowrap;
}
.nsf-sl-detail .meta .chip.go { color: var(--nsf-bone); border-color: rgba(232, 228, 218, 0.3); background: rgba(232, 228, 218, 0.08); }

.nsf-cost { font-family: var(--nsf-mono); }
.nsf-cost .amount { font-size: 20px; font-weight: 700; color: var(--nsf-supported); }
.nsf-cost .note { font-size: 9px; color: var(--nsf-haze); text-transform: uppercase; letter-spacing: 0.06em; }

/* CTA buttons */
.nsf-btn {
  font-family: var(--nsf-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 11px 14px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.nsf-btn-primary { background: var(--nsf-bone); color: #000; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.nsf-btn-primary:hover { background: #fff; box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15); }
.nsf-btn-secondary { background: #1b233d; color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.nsf-btn-secondary:hover { background: #253054; }
.nsf-btn-ghost { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.12); }
.nsf-btn-ghost:hover { background: #fff; color: #000; }

.nsf-badge {
  font-family: var(--nsf-mono);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.nsf-badge.supported { color: var(--nsf-supported); background: rgba(95, 191, 168, 0.12); border-color: rgba(95, 191, 168, 0.3); }
.nsf-badge.split { color: var(--nsf-split); background: rgba(224, 180, 80, 0.12); border-color: rgba(224, 180, 80, 0.3); }
.nsf-badge.contradicted { color: var(--nsf-contradicted); background: rgba(212, 87, 107, 0.12); border-color: rgba(212, 87, 107, 0.3); }
.nsf-badge.spread { color: var(--nsf-spread); background: rgba(181, 126, 220, 0.12); border-color: rgba(181, 126, 220, 0.3); }
.nsf-badge.muted { color: var(--nsf-haze); background: rgba(142, 157, 190, 0.08); border-color: rgba(142, 157, 190, 0.25); }

/* ---------------------------------------------------------------------
   Morning screen framing
   ------------------------------------------------------------------- */
.nsf-morning {
  background: rgba(7, 10, 20, 0.9);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 8px;
  padding: clamp(16px, 2.5vw, 28px);
  animation: nsfFadeIn 0.3s ease-out;
}
.nsf-morning-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 980px) { .nsf-morning-grid { grid-template-columns: 1fr; } }

.nsf-still-frame {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  position: relative;
  overflow: hidden;
  /* Fill the viewport height rather than sitting as a strip — the grid's
     align-items: stretch lets the exposure card pull it taller still. */
  min-height: clamp(480px, 72vh, 920px);
}
.nsf-still-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
  position: relative;
  z-index: 2;
}
.nsf-still-head .title { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.nsf-still-head .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--nsf-amber);
  box-shadow: 0 0 8px var(--nsf-amber);
}
.nsf-still-canvas {
  position: relative;
  flex: 1;
  margin: 14px 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(circle at center,
      rgba(242, 166, 90, 0.16) 0%,
      rgba(181, 126, 220, 0.10) 35%,
      rgba(95, 191, 168, 0.07) 65%,
      transparent 85%),
    rgba(0, 0, 0, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}
.nsf-still-canvas .nsf-still-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; }
/* Inside the morning frame the still fills the whole canvas and drops
   its own chrome — the canvas already carries the gradient ground and
   the border, and a 300px min-height strip here is what used to leave
   the bottom half of the frame empty. */
.nsf-still-canvas .ns-still { flex: 1; min-height: 0; border: 0; border-radius: 0; background: transparent; }
.nsf-still-hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nsf-still-canvas:hover .nsf-still-hover { opacity: 1; }
.nsf-still-hover span {
  background: #fff;
  color: #000;
  font-family: var(--nsf-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 16px;
  border-radius: 2px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.nsf-still-anchor {
  position: absolute;
  z-index: 2;
  font-family: var(--nsf-mono);
  pointer-events: none;
}
.nsf-still-anchor .lane { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.nsf-still-anchor .model { font-size: 8px; color: rgba(255, 255, 255, 0.5); }
.nsf-still-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 10px;
  position: relative;
  z-index: 2;
}

.nsf-exposure-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
}
.nsf-cta-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
}
.nsf-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.nsf-banner {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--nsf-mono);
  font-size: 9px;
  color: var(--nsf-haze);
  margin-top: 16px;
}
.nsf-banner .link {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
}
.nsf-banner .link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Archive: filter pills + responsive card grid
   ------------------------------------------------------------------- */
.nsf-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nsf-filter-btn {
  padding: 5px 11px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  font: inherit;
  transition: all 0.15s;
}
.nsf-filter-btn:hover { color: #fff; }
.nsf-filter-btn.active { background: #fff; color: #000; font-weight: 700; border-color: #fff; }

.nsf-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.nsf-run-card {
  background: var(--nsf-panel);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 6px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s;
  animation: nsfFadeIn 0.3s ease-out;
}
.nsf-run-card:hover { border-color: rgba(255, 255, 255, 0.4); }
.nsf-run-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--nsf-mono);
  font-size: 9px;
}
.nsf-run-meta .id { color: rgba(255, 255, 255, 0.5); font-weight: 700; text-transform: uppercase; font-size: 10px; }
.nsf-run-meta .when { color: var(--nsf-haze); }
.nsf-run-title {
  font-family: var(--nsf-sans);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 0.15s;
  margin: 0;
}
.nsf-run-card:hover .nsf-run-title { color: var(--nsf-amber); }
.nsf-run-sub {
  font-family: var(--nsf-sans);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nsf-run-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 9px 6px;
  font-family: var(--nsf-mono);
  font-size: 8px;
  text-align: center;
}
.nsf-run-stats > div + div { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.nsf-run-stats .v { color: #fff; font-weight: 700; font-size: 10px; }
.nsf-run-stats .k { color: rgba(255, 255, 255, 0.4); text-transform: uppercase; }
.nsf-run-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
  font-family: var(--nsf-mono);
  font-size: 9px;
}
.nsf-run-actions .chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Answer modal + markdown typography (ported .md-content)
   ------------------------------------------------------------------- */
.nsf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: nsfFadeIn 0.2s ease-out;
}
.nsf-modal {
  position: relative;
  width: min(760px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: rgba(11, 14, 23, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
/* the reading variant — the answer modal is where a whole attempt gets
   read, so it takes the screen like the Library lightbox does */
.nsf-modal-read {
  width: 96vw;
  height: 94vh;
  /* clamp like .nsl-lightbox-box: the overlay centres this inside a 24px
     padding box, so on short windows a fixed 94vh overflows it and the
     excess clips off the top */
  max-height: 100%;
}
/* the live HTML preview overlay covers the whole modal, not the
   field-canvas exclusion geometry it uses inside the inspector */
.nsf-modal .nsa-preview-overlay { position: absolute; right: 0; z-index: 6; }
.nsf-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--nsf-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #fff;
  font-weight: 700;
  flex: none;
}
.nsf-modal-body { flex: 1; overflow-y: auto; padding: 20px 24px 28px; }
.nsf-modal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--nsf-mono);
  font-size: 9px;
  color: var(--nsf-haze);
  flex: none;
}

.nsf-md {
  font-family: var(--nsf-sans);
  font-size: 13px;
  line-height: 1.65;
  color: var(--nsf-bone, #E8E4DA);
}
/* tokens.css locks raw `p`/`h*` to --fg-primary (#171717). Night
   surfaces stay dark in both themes, so every markdown node must
   restate the bone foreground — otherwise paragraphs go black while
   headings, strong, and list markers stay white. */
.nsf-md p,
.nsf-md li,
.nsf-md strong,
.nsf-md b,
.nsf-md em,
.nsf-md td,
.nsf-md blockquote {
  color: inherit;
  font-size: inherit;
}
.nsf-md h1, .nsf-md h2, .nsf-md h3, .nsf-md h4, .nsf-md h5, .nsf-md h6 {
  color: var(--nsf-bone, #E8E4DA);
  font-weight: 600;
  margin: 1.4em 0 0.5em;
  line-height: 1.3;
}
.nsf-md h1:first-child, .nsf-md h2:first-child, .nsf-md h3:first-child { margin-top: 0; }
.nsf-md h1 { font-size: 1.35rem; }
.nsf-md h2 { font-size: 1.2rem; }
.nsf-md h3 { font-size: 1.1rem; }
.nsf-md p { margin: 0 0 1em; }
.nsf-md code {
  font-family: var(--nsf-mono);
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.15em 0.35em;
  border-radius: 3px;
}
.nsf-md pre {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 1em;
  overflow-x: auto;
  margin: 0 0 1.4em;
}
.nsf-md pre code { background: transparent; padding: 0; }
.nsf-md table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: 0.95em;
}
.nsf-md th {
  background: rgba(255, 255, 255, 0.05);
  text-align: left;
  font-weight: 600;
  color: var(--nsf-bone, #E8E4DA);
}
.nsf-md ::marker { color: inherit; }
.nsf-md th, .nsf-md td {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5em 0.75em;
}
.nsf-md ul, .nsf-md ol { padding-left: 1.5em; margin: 0 0 1em; }
.nsf-md ul { list-style-type: disc; }
.nsf-md ol { list-style-type: decimal; }
.nsf-md blockquote {
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  padding-left: 1em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1em;
}
.nsf-md a { color: var(--nsf-supported); }

/* the Night tab column that hosts stage + subnav */
.nsf-night-screen {
  display: flex;
  flex-direction: column;
  /* Fallback only, for an engine without :has() — 56px of chrome plus the
     28px status bar. The rule below is the real fit; this keeps the night
     ground from cutting off mid-screen if that selector is dropped. */
  min-height: calc(100vh - 84px);
  padding: 16px 20px 20px;
  background: var(--nsf-night);
  position: relative;
}

/* ── the viewport fit ────────────────────────────────────────────────
   The shell is .app (100vh grid: chrome · system line · main · status
   bar) → .main → .scroll, and .scroll is the scroller with a definite
   height. Handing that height to the .tab-view lets the night screen ask
   for exactly 100% of it, so the field ends on the status bar at any
   window size with no vh arithmetic to go stale the next time the chrome
   changes height. Same move judges.css:32 makes for the Method screen,
   and scoped the same way so no other tab changes.

   min-height, not height: the Library and Morning sub-tabs are taller
   than the viewport and must still grow past it — .scroll scrolls to
   them because their overflow is part of its scrollable region. */
.scroll > .tab-view:has(> .nsf-night-screen) { height: 100%; }
.scroll > .tab-view:has(> .nsf-night-screen) > .nsf-night-screen { min-height: 100%; }
/* ── the Morning fits ONE screen ─────────────────────────────────────
   NS-MORNING-PANES. The morning used to be the one sub-tab that always
   scrolled: the still frame asked for 72vh, the exposure card stacked
   the report, the per-pass lines and the proposals under it, and the
   two banners went below all of that. With the card's body now the only
   scroller, the morning can claim exactly the height the night screen
   has and spend it — the still on the left grows and shrinks with the
   window, the card's panes scroll inside themselves.

   Guarded, not global: below 981px the grid is already one column (the
   card sits UNDER the still, and a viewport-locked column would make
   both useless), and under 720px tall there is not enough height to
   divide — in both cases the morning goes back to its natural height
   and .scroll scrolls to it, which is correct. */
@media (min-width: 981px) and (min-height: 720px) {
  /* A DEFINITE height, not a floor: the rule above hands the night screen
     `min-height: 100%` so the Library can grow past the viewport, and a
     floor alone lets the morning grow with it — flex:1 below only ever
     shares out the space that is already left over. Scoped by :has() to
     the sub-tab that has panes, so Live field and Library keep the floor
     they need. */
  .scroll > .tab-view:has(> .nsf-night-screen) > .nsf-night-screen:has(> .nsf-morning) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .nsf-night-screen > .nsf-morning {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .nsf-night-screen > .nsf-morning > .nsf-morning-grid { flex: 1 1 auto; min-height: 0; }
  /* The still's 72vh floor is what the grid's own height replaces here;
     min-height:0 all the way down to the three.js stage, or a flex child
     refuses to shrink and the overflow comes straight back. */
  .nsf-night-screen > .nsf-morning .nsf-still-frame { min-height: 0; }
  .nsf-night-screen > .nsf-morning .nsf-still-canvas { min-height: 0; }
  .nsf-night-screen > .nsf-morning .nsh-stage { min-height: 0; }
  .nsf-night-screen > .nsf-morning .nsf-exposure-card {
    min-height: 0;
    overflow: hidden;
    justify-content: flex-start;
    gap: 14px;
  }
}
.nsf-night-screen::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(124, 139, 181, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.nsf-night-screen > * { position: relative; }

/* =====================================================================
   Attempt artifacts (.nsa-*) — inspector rich viewers + html preview.
   ===================================================================== */

.nsa-section { display: flex; flex-direction: column; gap: 10px; }

.nsa-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.nsa-tab {
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nsf-haze);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 4px 9px;
  cursor: pointer;
}
.nsa-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nsa-tab.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.nsa-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.nsa-chip {
  font-family: var(--nsf-mono);
  font-size: 9px;
  color: rgba(232, 228, 218, 0.75);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 3px 9px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nsa-chip:hover { color: #fff; }
.nsa-chip.active { color: #fff; border-color: var(--nsf-supported, #5FBFA8); background: rgba(95, 191, 168, 0.12); }

.nsa-artifact {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.nsa-actionbar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.nsa-title {
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nsf-haze);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nsa-act-btn {
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(232, 228, 218, 0.8);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.nsa-act-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nsa-note {
  font-family: var(--nsf-mono);
  font-size: 9px;
  color: var(--nsf-amber, #E0B450);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 4px;
}

.nsa-code {
  margin: 0;
  padding: 10px 12px;
  font: 11px/1.55 var(--nsf-mono);
  overflow-x: auto;
  max-height: 420px;
  overflow-y: auto;
  color: rgba(232, 228, 218, 0.92);
  white-space: pre;
}

.nsa-table-wrap { padding: 8px 10px; overflow-x: auto; }
.nsa-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--nsf-mono);
  font-size: 10.5px;
}
.nsa-table th {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-align: left;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.nsa-table th:hover { background: rgba(255, 255, 255, 0.1); }
.nsa-table th, .nsa-table td {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
}
.nsa-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

.nsa-chart { padding: 10px; }
.nsa-chart svg { display: block; }

.nsa-media { padding: 10px; }
.nsa-media img,
.nsa-media video {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
}
/* A controls bar with no width is a row of clipped buttons. */
.nsa-media audio { display: block; width: 100%; min-width: 240px; }
.nsa-audio-fallback {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 240px;
  padding: 6px 2px;
}
.nsa-audio-play {
  font: 11px var(--nsf-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  border-radius: 3px;
  cursor: pointer;
}
.nsa-audio-play:hover { background: rgba(255, 255, 255, 0.1); }
.nsa-audio-fallback input[type="range"] { flex: 1; min-width: 80px; }
.nsa-audio-fallback .mono { opacity: 0.7; font-size: 11px; white-space: nowrap; }
.nsa-frame-player { display: flex; flex-direction: column; gap: 8px; }
.nsa-frame-player img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
}

.nsa-pdf { padding: 10px; max-height: 520px; overflow-y: auto; }
.nsa-pdf-page {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 10px;
  border-radius: 2px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.nsa-pptx { padding: 10px; max-height: 520px; overflow-y: auto; }
.nsa-pptx-body { display: flex; flex-direction: column; gap: 16px; }
.nsa-pptx-slide {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #0f1419 0%, #1a2332 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 24px 28px 20px;
  box-sizing: border-box;
  overflow: hidden;
  color: #e8edf5;
}
.nsa-pptx-slide-no {
  position: absolute;
  top: 8px;
  right: 10px;
  font: 11px var(--nsf-mono, monospace);
  opacity: 0.45;
}
.nsa-pptx-title {
  margin: 0 0 12px;
  font: 600 20px/1.25 var(--nsf-sans, system-ui, sans-serif);
}
.nsa-pptx-bullets {
  margin: 0;
  padding-left: 1.2em;
  font: 14px/1.45 var(--nsf-sans, system-ui, sans-serif);
}
.nsa-pptx-bullets li { margin: 4px 0; }
.nsa-pptx-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font: 12px var(--nsf-mono, monospace);
}
.nsa-pptx-table th,
.nsa-pptx-table td {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 8px;
  text-align: left;
}
.nsa-pptx-table th { background: rgba(255, 255, 255, 0.06); }
.nsa-pptx-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
}
.nsa-pptx-images img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 4px;
}
.nsa-pptx-note { margin: 8px 0 0; font-size: 12px; opacity: 0.7; }

/* --- html preview overlay -------------------------------------------
   Covers the field canvas only: the right offset equals the inspector's
   width, and z-index 6 sits below the inspector's 7 — both belts, so
   the inspector stays visible and interactive while previewing. */
.nsa-preview-overlay {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  right: min(460px, 92%);
  z-index: 6;
  background: rgba(4, 5, 10, 0.94);
  display: flex;
  flex-direction: column;
  animation: nsaFadeIn 0.18s ease-out;
}
@keyframes nsaFadeIn { from { opacity: 0; } to { opacity: 1; } }
.nsa-preview-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(7, 10, 20, 0.9);
  flex: none;
}
.nsa-scripts-toggle {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(232, 228, 218, 0.8);
  cursor: pointer;
  white-space: nowrap;
}
.nsa-preview-stack {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}
/* Hidden until its load event (NsaFrameStack): a navigated iframe paints
   an opaque white viewport before the page's styles land, and on this
   dark chrome that was a flash on every ‹ › step. The white background
   stays — a page that never paints one is meant to sit on white, not on
   the overlay's near-black. */
.nsa-preview-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.nsa-preview-frame.ready { opacity: 1; }
.nsa-preview-stack .nsa-preview-empty { position: absolute; inset: 0; }
.nsa-preview-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nsf-mono);
  font-size: 11px;
  color: var(--nsf-haze);
}

/* Non-html bodies (image, video, pdf, markdown, code, tables) share the
   overlay's frame. The overlay owns the scroll here, so the per-viewer
   caps that keep an inline artifact from swallowing the inspector are
   lifted — the point of the modal is the full-size read. */
.nsa-preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 6px 4px 20px;
}
.nsa-preview-body .nsa-code {
  max-height: none;
  overflow-y: visible;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.nsa-preview-body .nsa-code code { white-space: inherit; overflow-wrap: inherit; }
.nsa-preview-body .nsa-pdf { max-height: none; overflow-y: visible; }
.nsa-preview-body .nsa-pptx { max-height: none; overflow-y: visible; }
.nsa-preview-body .nsa-media { padding: 4px 10px 10px; }
.nsa-preview-body .nsa-media img,
.nsa-preview-body .nsa-media video { margin: 0 auto; max-height: none; }

/* Source editor — fills the overlay the rendered body would, so a
   long html/markdown file is the whole reading surface, not a strip. */
.nsa-preview-edit {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.nsa-preview-editor {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  border: 0;
  padding: 12px 16px 20px;
  background: transparent;
  color: rgba(232, 228, 218, 0.94);
  font: 12px/1.55 var(--nsf-mono, ui-monospace, monospace);
  tab-size: 2;
  outline: none;
}
.nsa-preview-edit-err {
  flex: none;
  padding: 6px 14px 10px;
  color: var(--nsf-rose, #D4576B);
  font: 11px var(--nsf-mono, ui-monospace, monospace);
}
.nsa-act-btn:disabled { opacity: 0.4; cursor: default; }
.nsa-preview-count { color: var(--nsf-haze); }
.nsa-preview-seq {
  color: var(--nsf-haze);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 42%;
}
.nsa-preview-lane, .nsa-preview-model { color: var(--nsf-bone); }

/* In-preview refine dock — the same panel as the MAKE tab / lightbox,
   pinned under the live page so a click on the iframe is the pick. */
.nsa-preview-refine {
  flex: none;
  max-height: 42%;
  overflow: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(7, 10, 20, 0.95);
  padding: 8px 14px 12px;
}
.nsa-preview-frame.picking { box-shadow: inset 0 0 0 2px var(--nsf-supported); }

/* The bar's own step group: ‹ 3 / 7 ›. The count is fixed-width so the
   buttons either side of it stay put as the set is walked — a control
   that shifts under the pointer is a control you have to re-aim at
   every press. */
.nsa-preview-steps {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
/* Job-wide reach: the arrows are no longer bounded by the set the modal
   was opened with, and the count reads against every artifact the job
   produced. Marked so the readout says which walk you are on without a
   second label competing for room on the bar. */
.nsa-preview-steps.wide .nsa-preview-count { color: var(--nsf-bone); }
.nsa-preview-steps .nsa-preview-count {
  min-width: 40px;
  text-align: center;
}
.nsa-step-btn {
  font-size: 15px;
  line-height: 1;
  padding: 0 7px 1px;
}
.nsa-act-btn:disabled { opacity: 0.3; cursor: default; }
.nsa-act-btn:disabled:hover { color: rgba(232, 228, 218, 0.8); background: none; }

/* Step between the renderable artifacts of one attempt without closing
   the modal. Same treatment as the Library lightbox's arrows, because
   they are the same gesture on a different set. */
.nsa-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 56px;
  font-size: 22px;
  color: var(--nsf-bone);
  background: rgba(4, 5, 10, 0.7);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 7px;
  cursor: pointer;
}
.nsa-preview-nav:hover:not(:disabled) { background: rgba(4, 5, 10, 0.92); color: #fff; }
.nsa-preview-nav:disabled { opacity: 0.25; cursor: default; }
.nsa-preview-nav.nsa-nav-prev { left: 10px; }
.nsa-preview-nav.nsa-nav-next { right: 10px; }

/* --- night library (.nsl-*) ------------------------------------------
   The all-attempts artifact gallery, set as a folio: an edition with a
   serif masthead, a quiet row of sections, hairline rules and the work
   given the room. Dark in both themes (the night surface does not
   theme-switch).

   The folio palette is a RE-TINT of the field's own tokens, scoped to
   .nsl-view: every mode file, the lightbox and the previews mounted
   inside the view read --nsf-* and the --nsl-*-rgb triplets, so one
   block here carries the night shell (the same blue-violet as .theme-dark)
   through all eight readings without a second stylesheet to keep in step.
   Verdict gold stays on --nsf-split; --nsf-amber here is the working accent. */
.nsl-view {
  --nsf-panel: #151A2E;
  --nsf-panel-2: #0E1222;
  --nsf-glass-border: #232A44;
  --nsf-haze: #7C8BB5;
  --nsf-amber: #6FA8DC;
  --nsf-supported: #5FBFA8;
  --nsl-haze-rgb: 124, 139, 181;
  --nsl-amber-rgb: 111, 168, 220;
  --nsl-deep-rgb: 11, 14, 26;
  --nsl-ok-rgb: 95, 191, 168;
  --nsl-bg: #0B0E1A;
  --nsl-raise: #1A2038;
  --nsl-rule: #232A44;
  --nsl-rule-soft: #1C2338;
  --nsl-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Liberation Serif', 'DejaVu Serif', serif;
  padding: 34px clamp(18px, 3vw, 52px) 56px;
  color: var(--nsf-bone);
  font-family: var(--nsf-sans);
  background: var(--nsl-bg);
  min-height: 100%;
}

/* The masthead: the night as an edition. A serif title in the job's own
   words, its id underneath, and the margin note - where the night
   stands and how much it made - ruled off on the right. */
.nsl-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 26px;
}
.nsl-mast-main { flex: 1 1 auto; min-width: 0; }
.nsl-eyebrow {
  font: 10px var(--nsf-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nsf-amber);
  margin-bottom: 16px;
}
.nsl-eyebrow-sep { margin: 0 0.9em; opacity: 0.45; }
.nsl-title {
  margin: 0;
  max-width: 40ch;
  font-family: var(--nsl-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.5vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--nsf-bone);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.nsl-mast-sub {
  margin-top: 14px;
  font: 11px var(--nsf-mono);
  color: var(--nsf-haze);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nsl-nightnote {
  flex: none;
  width: clamp(200px, 20vw, 280px);
  padding: 2px 0 2px 24px;
  border-left: 1px solid var(--nsl-rule);
}
.nsl-note-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nsf-supported);
}
.nsl-note-status.live { color: var(--nsf-split); }
.nsl-note-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .nsl-note-status.live .nsl-note-dot { animation: nslBreathe 2.4s ease-in-out infinite; }
}
@keyframes nslBreathe { 50% { opacity: 0.25; } }
.nsl-note-big {
  margin: 11px 0 7px;
  font-size: 19px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--nsf-bone);
}
.nsl-summary {
  font-size: 12px;
  color: var(--nsf-haze);
  font-variant-numeric: tabular-nums;
}

/* The judge's controls, inside the Workbench. */
.nsl-judge { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* The judged shape of the night: one quiet line of facts, then the
   clusters as the edition's collections. */
.nsl-verdicts {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 26px;
}
.nsl-verdict-summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.nsl-verdict-count {
  font: 10.5px var(--nsf-mono);
  color: rgba(var(--nsl-haze-rgb), 0.8);
}

/* ONE line that scrolls, never four that wrap: a job with three
   clusters and a job with eighty cost the same two rows of page. The
   fade on the right edge is the affordance that says there is more. */
.nsl-cluster-rail {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.nsl-cluster-rail::-webkit-scrollbar { display: none; height: 0; }

.nsl-cluster-chip {
  --nsl-cv: var(--nsf-haze);
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 260px;
  height: 32px;
  font: 12px var(--nsf-sans);
  color: var(--nsf-haze);
  background: transparent;
  border: 1px solid var(--nsl-rule);
  border-radius: 999px;
  padding: 0 14px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.nsl-cluster-chip:hover { color: var(--nsf-bone); border-color: rgba(232, 228, 218, 0.3); }
.nsl-cluster-chip:focus-visible { outline: 2px solid var(--nsf-amber); outline-offset: 1px; }
.nsl-cluster-chip.on {
  color: var(--nsf-bone);
  border-color: color-mix(in srgb, var(--nsl-cv) 65%, transparent);
  background: color-mix(in srgb, var(--nsl-cv) 13%, transparent);
}
.nsl-cluster-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nsf-haze); flex: none; }
.nsl-cluster-n { font: 600 11px var(--nsf-mono); color: var(--nsf-bone); }
.nsl-cluster-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsl-cluster-score { font: 10.5px var(--nsf-mono); color: rgba(var(--nsl-haze-rgb), 0.8); flex: none; }
.nsl-cluster-more, .nsl-cluster-clear { border-style: dashed; }
.nsl-cluster-clear { color: var(--nsf-amber); border-color: rgba(var(--nsl-amber-rgb), 0.4); }
.nsl-verdict-chip {
  font-size: 12px;
  color: var(--nsf-haze);
  white-space: nowrap;
}
.nsl-verdict-chip + .nsl-verdict-chip::before { content: '·'; margin-right: 10px; opacity: 0.5; }
.nsl-verdict-mode {
  font: 10px var(--nsf-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nsf-amber);
}

/* The toolbar: the kinds read as sections on the left, the three doors
   (source, Filters, Workbench) sit on the right. Sticky over the grid,
   on an opaque ground - no backdrop blur: a sticky bar re-blurs whatever
   scrolls under it on every frame, and under it is a grid of live
   iframes. */
.nsl-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  background: var(--nsl-bg);
  border-bottom: 1px solid var(--nsl-rule);
}
.nsl-chips { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: baseline; min-width: 0; }
.nsl-kind-tab {
  background: none;
  border: 0;
  padding: 6px 0 5px;
  color: var(--nsf-haze);
  font: 13px var(--nsf-sans);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.nsl-kind-tab:hover { color: var(--nsf-bone); }
.nsl-kind-tab:focus-visible { outline: 2px solid var(--nsf-amber); outline-offset: 3px; }
.nsl-kind-tab.on { color: var(--nsf-bone); border-bottom-color: var(--nsf-bone); }
.nsl-kind-n { margin-left: 7px; font: 10.5px var(--nsf-mono); color: rgba(var(--nsl-haze-rgb), 0.75); }
.nsl-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* .nsl-search is gone — the Library's text filter is the omnisearch bar
   in the Night subnav now, so there is one query box, not two that
   disagree about what "search" narrows. Its query is echoed in the
   active-filter row below the toolbar. */

/* A labelled door - the source select, Filters, Workbench. */
.nsl-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--nsl-rule);
  border-radius: 4px;
  background: rgba(232, 228, 218, 0.02);
  color: var(--nsf-bone);
  font: 12.5px var(--nsf-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.nsl-pill:hover, .nsl-pill.on { border-color: rgba(232, 228, 218, 0.3); background: rgba(232, 228, 218, 0.05); }
.nsl-pill:focus-visible, .nsl-pill-select:focus-within { outline: 2px solid var(--nsf-amber); outline-offset: 1px; }
.nsl-pill-select { padding: 0; }
.nsl-pill-select .nsl-select {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  padding: 0 32px 0 14px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  outline: none;
}
.nsl-pill-select .nsl-caret { position: absolute; right: 14px; top: 50%; margin-top: -2px; pointer-events: none; }
.nsl-caret {
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.65;
}
.nsl-pill-n {
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--nsf-amber);
  color: #0B0E1A;
  font: 600 10px/17px var(--nsf-sans);
  text-align: center;
}
.nsl-pill-busy { font: 10.5px var(--nsf-mono); color: var(--nsf-amber); }
.nsl-select option, .nsl-view .nsf-job-select option { background: #151A2E; color: #E8E4DA; }

/* The panel a door opens. Opaque, no blur, above the sticky toolbar's
   neighbours but under the lightbox (60). */
.nsl-pop { position: relative; }
.nsl-pop-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: max-content;
  min-width: 300px;
  max-width: min(92vw, 400px);
  padding: 16px 18px 18px;
  background: var(--nsl-raise);
  border: 1px solid var(--nsl-rule);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  color: var(--nsf-bone);
  text-align: left;
}
.nsl-pop-wide { min-width: 340px; }
.nsl-pop-form { display: grid; gap: 10px; }
.nsl-pop-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 12px; }
.nsl-pop-k, .nsl-pop-h {
  font: 10px var(--nsf-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nsf-haze);
}
.nsl-pop-h { color: var(--nsf-amber); margin-bottom: 10px; }
.nsl-pop-sec + .nsl-pop-sec { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--nsl-rule-soft); }
.nsl-pop-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.nsl-pop-note { margin-top: 7px; font-size: 11px; color: var(--nsf-haze); }

/* Library selects and buttons speak the folio's voice: sentence case,
   the sans, a hairline. The mode files keep their own instrument type. */
/* The engine's own select is a grey GTK block on Linux; these draw
   their own chevron so the panel reads as one material. */
.nsl-pop-panel .nsl-select,
.nsl-selbar .nsf-job-select,
.nsl-repair .nsj-select {
  -webkit-appearance: none;
  appearance: none;
  height: 32px;
  max-width: 100%;
  padding: 0 30px 0 10px;
  background-color: rgba(232, 228, 218, 0.03);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(232, 228, 218, 0.7) 50%),
    linear-gradient(135deg, rgba(232, 228, 218, 0.7) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--nsl-rule);
  border-radius: 4px;
  color: var(--nsf-bone);
  font: 12.5px var(--nsf-sans);
  cursor: pointer;
}
.nsl-pop-row .nsl-select { width: 100%; }
.nsl-pop-panel .nsl-select:focus, .nsl-selbar .nsf-job-select:focus { outline: none; border-color: rgba(var(--nsl-amber-rgb), 0.6); }
.nsl-toolbar .nsa-act-btn,
.nsl-pop-panel .nsa-act-btn,
.nsl-notice .nsa-act-btn,
.nsl-empty .nsa-act-btn,
.nsl-selbar .nsa-act-btn,
.nsl-bar .nsa-act-btn {
  font: 12px var(--nsf-sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--nsf-bone);
  background: rgba(232, 228, 218, 0.02);
  border: 1px solid var(--nsl-rule);
  border-radius: 4px;
  padding: 6px 11px;
}
.nsl-toolbar .nsa-act-btn:hover:not(:disabled),
.nsl-pop-panel .nsa-act-btn:hover:not(:disabled),
.nsl-notice .nsa-act-btn:hover:not(:disabled),
.nsl-empty .nsa-act-btn:hover:not(:disabled),
.nsl-selbar .nsa-act-btn:hover:not(:disabled),
.nsl-bar .nsa-act-btn:hover:not(:disabled) { border-color: rgba(232, 228, 218, 0.3); background: rgba(232, 228, 218, 0.06); color: #fff; }
.nsl-view .nsa-act-btn:disabled { opacity: 0.4; cursor: default; }

/* What is narrowing the view, said outside the panel that set it. */
.nsl-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 14px; }
.nsl-active-lead {
  margin-right: 4px;
  font: 10px var(--nsf-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nsf-haze);
}
.nsl-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 27px;
  padding: 0 10px 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(var(--nsl-amber-rgb), 0.35);
  background: rgba(var(--nsl-amber-rgb), 0.07);
  color: var(--nsf-bone);
  font: 12px var(--nsf-sans);
  cursor: pointer;
}
.nsl-active-chip:hover { border-color: rgba(var(--nsl-amber-rgb), 0.65); }
.nsl-active-chip:focus-visible, .nsl-active-clear:focus-visible { outline: 2px solid var(--nsf-amber); outline-offset: 1px; }
.nsl-active-x { font-size: 15px; line-height: 1; color: var(--nsf-haze); }
.nsl-active-chip:hover .nsl-active-x { color: var(--nsf-bone); }
.nsl-active-clear {
  background: none;
  border: 0;
  padding: 0 4px;
  color: var(--nsf-haze);
  font: 12px var(--nsf-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.nsl-active-clear:hover { color: var(--nsf-bone); }

/* The section heading over the work. */
.nsl-modehead { display: flex; align-items: center; gap: 16px; padding: 26px 0 22px; }
.nsl-modehead-glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--nsl-rule);
  border-radius: 50%;
  color: var(--nsf-amber);
  font-size: 13px;
}
.nsl-modehead-text { flex: 1 1 auto; min-width: 0; }
.nsl-modehead-title { font-size: 19px; letter-spacing: -0.015em; color: var(--nsf-bone); }
.nsl-modehead-hint { margin-top: 5px; font-size: 12px; color: var(--nsf-haze); }
.nsl-modehead-count {
  flex: none;
  max-width: 45%;
  font: 11px var(--nsf-mono);
  color: var(--nsf-haze);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.nsl-modehead.compact { padding: 14px 0 12px; gap: 12px; }
.nsl-modehead.compact .nsl-modehead-glyph { width: 30px; height: 30px; font-size: 11px; }
.nsl-modehead.compact .nsl-modehead-title { font-size: 15px; }

.nsl-notice {
  font: 12.5px var(--nsf-sans);
  line-height: 1.5;
  color: var(--nsf-split);
  border: 0;
  border-left: 2px solid rgba(224, 180, 80, 0.7);
  background: rgba(224, 180, 80, 0.05);
  border-radius: 0;
  padding: 10px 14px;
  margin: 14px 0 0;
}

/* Sections of the grid: a small ruled eyebrow, the count beside it. */
.nsl-group { margin-bottom: 44px; }
.nsl-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font: 10.5px var(--nsf-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nsf-amber);
}
.nsl-group-head::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--nsl-rule-soft); }
.nsl-group-count { color: var(--nsf-haze); letter-spacing: 0.08em; }
.nsl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 30px 20px;
}
/* .nsl-card is shared: the review desk, the timeline and the storyboard
   wear it as a box. The grid's own cards (.nsl-card-sm / -md) are set as
   folio plates below - a picture and its caption, no box around the
   pair, a hairline under it. */
.nsl-card {
  position: relative;
  border: 1px solid var(--nsf-glass-border);
  border-radius: 6px;
  background: var(--nsf-panel);
  overflow: hidden;
  /* Each card is its own layout and paint island: a thumbnail loading,
     an iframe repainting or a hover inside one card cannot make the
     engine re-lay-out or repaint its neighbours. The card's size still
     comes from its content (no size containment), so the grid row
     heights are real, never estimated. */
  contain: layout paint style;
  transition: border-color 0.15s ease;
}
.nsl-card:hover { border-color: rgba(232, 228, 218, 0.26); }
.nsl-card.nsl-selected { outline: 1px solid rgba(var(--nsl-amber-rgb), 0.45); outline-offset: -1px; }
.nsl-card-sm,
.nsl-card-md {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 14px;
  border: 0;
  border-bottom: 1px solid var(--nsl-rule-soft);
  border-radius: 0;
  background: none;
}
.nsl-card-sm.nsl-selected, .nsl-card-md.nsl-selected { outline: none; }
.nsl-card-hit {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.nsl-card-hit:focus-visible { outline: 2px solid var(--nsf-amber); outline-offset: -2px; }
.nsl-card-thumb-hit {
  flex: none;
  border: 1px solid var(--nsl-rule-soft);
  border-radius: 3px;
  overflow: hidden;
  background: #0B0C0A;
  transition: border-color 0.15s ease;
}
.nsl-card:hover .nsl-card-thumb-hit { border-color: rgba(232, 228, 218, 0.26); }
.nsl-card.nsl-selected .nsl-card-thumb-hit { border-color: var(--nsf-amber); box-shadow: 0 0 0 1px var(--nsf-amber); }
/* The card is two stacked hits: the picture previews, the caption
   inspects. A previewable picture says so with the cursor. */
.nsl-card-thumb-hit.nsl-previewable { cursor: zoom-in; }
.nsl-card-thumb-hit.nsl-previewable:hover .nsl-thumb { filter: brightness(1.06); }
.nsl-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  background: rgba(2, 2, 2, 0.6);
  overflow: hidden;
  position: relative;
}
.nsl-thumb-frame { position: absolute; inset: 0; overflow: hidden; }
.nsl-thumb-iframe {
  border: 0;
  background: #fff;
  width: 400%;
  height: 400%;
  transform: scale(0.25);
  transform-origin: 0 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nsl-thumb-iframe { animation: nsaLateReveal 0s linear 1.6s forwards; }
.nsl-thumb-iframe.ready { opacity: 1; animation: none; }
.nsl-thumb-media {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
}
.nsl-thumb-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* a clip: the still fills the tile; the hover <video> paints over it */
.nsl-thumb-video { padding: 0; background: #000; }
.nsl-thumb-video img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.nsl-thumb-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; pointer-events: none; }
.nsl-video-badge {
  position: absolute; right: 6px; bottom: 6px;
  padding: 1px 6px; border-radius: 999px;
  font: 9.5px var(--nsf-mono); color: #fff;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.nsl-thumb-chart { position: absolute; inset: 0; padding: 8px; }
.nsl-thumb-chart svg { width: 100%; height: 100%; }
.nsl-thumb-table {
  position: absolute; inset: 0;
  margin: 8px;
  border-collapse: collapse;
  font: 9px var(--nsf-mono);
  color: var(--nsf-bone);
}
.nsl-thumb-table th, .nsl-thumb-table td {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2px 5px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  max-width: 70px;
  text-overflow: ellipsis;
}
.nsl-thumb-table th { color: var(--nsf-haze); }
.nsl-thumb-code {
  position: absolute; inset: 0;
  margin: 0;
  padding: 8px 10px;
  font: 9px/1.5 var(--nsf-mono);
  color: rgba(232, 228, 218, 0.85);
  overflow: hidden;
  white-space: pre;
  mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
}
.nsl-thumb-glyph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
}
.nsl-glyph-ext {
  font: 700 18px var(--nsf-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nsl-glyph-sub { font: 10px var(--nsf-mono); color: var(--nsf-haze); }
/* The caption: the name, then kind · attempt · size · age, then the
   quiet facts. Room on the right for the keep diamond. */
.nsl-card-cap { position: relative; padding: 13px 30px 0 0; min-width: 0; }
.nsl-card-meta { display: block; padding: 0; }
.nsl-meta-top { display: block; min-width: 0; }
.nsl-kind-badge {
  font: 700 9px var(--nsf-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid;
  border-radius: 4px;
  padding: 1px 5px;
  flex: none;
}
.nsl-name {
  font: 11px var(--nsf-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nsl-meta-sub {
  display: block;
  font: 10px var(--nsf-mono);
  color: var(--nsf-haze);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the folio card's own voice: the name in the sans, the kind as a
   small-caps word in its colour, no badge box */
.nsl-card-cap .nsl-kind-badge {
  font: 600 10px var(--nsf-sans);
  letter-spacing: 0.08em;
  border: 0;
  padding: 0;
}
.nsl-card-cap .nsl-name {
  display: block;
  font: 13.5px var(--nsf-sans);
  letter-spacing: -0.005em;
  color: var(--nsf-bone);
}
.nsl-card-cap .nsl-meta-sub { font: 11.5px var(--nsf-sans); margin-top: 6px; }
/* Facts under the caption: verdicts as small mono words, no boxes, and
   the cluster the attempt belongs to on the right. The row is capped to
   four ranked flags in the markup (nslCardFlags), so wrapping is a
   safety net rather than the layout. */
.nsl-meta-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; min-height: 14px; }
.nsl-flag {
  font: 9px var(--nsf-mono);
  color: var(--nsf-haze);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 4px;
  padding: 0 4px;
}
.nsl-flag-winner { color: var(--nsf-supported); border-color: rgba(var(--nsl-ok-rgb), 0.4); }
.nsl-flag-saved { color: var(--nsf-amber); border-color: rgba(var(--nsl-amber-rgb), 0.4); }
.nsl-flag-drift { color: var(--nsf-split); border-color: rgba(224, 180, 80, 0.4); }
/* On the folio card the facts are small mono words with no boxes, and
   the cluster link flows in the same wrapping line, pushed right. */
.nsl-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 10px;
  min-width: 0;
}
.nsl-card-foot .nsl-meta-flags { display: contents; }
.nsl-card-foot .nsl-flag {
  font-size: 10px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  white-space: nowrap;
}
.nsl-card-cluster-row { margin-left: auto; font: 10px var(--nsf-mono); color: var(--nsf-haze); white-space: nowrap; }
.nsl-card-cluster-row .nsl-card-cluster {
  font: 10px var(--nsf-mono);
  color: var(--nsf-haze);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nsl-card-cluster-row .nsl-card-cluster:hover { color: var(--nsf-bone); text-decoration: underline; text-underline-offset: 3px; }
.nsl-cluster-empty { opacity: 0.6; }
/* NS-CE-BUILD-001 Phase 3 — the contradiction guard's words. The chip
   binds to `status` alone: amber for conflict, muted for uncertain,
   two DIFFERENT greys for unavailable (specialist off) and unchecked
   (not run). No animation. */
.nsl-flag-conflict { color: #e0b450; border-color: rgba(224, 180, 80, 0.55); background: rgba(224, 180, 80, 0.10); }
.nsl-flag-uncertain { color: #c9b27a; border-color: rgba(201, 178, 122, 0.4); }
.nsl-flag-clear { color: var(--nsf-supported); border-color: rgba(var(--nsl-ok-rgb), 0.3); opacity: 0.85; }
.nsl-flag-unavailable { color: var(--nsf-fg-3, #8a8f98); border-color: rgba(138, 143, 152, 0.4); border-style: dashed; }
.nsl-flag-unchecked { color: var(--nsf-fg-3, #8a8f98); border-color: rgba(138, 143, 152, 0.25); opacity: 0.7; }
.nscs-panel { border: 1px solid rgba(224, 180, 80, 0.25); border-radius: 8px; padding: 10px 12px; margin-top: 10px; display: grid; gap: 10px; }
.nscs-panel-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
.nscs-panel-title { font-weight: 600; letter-spacing: 0.02em; }
.nscs-rule { color: var(--nsf-fg-3, #8a8f98); font-style: italic; margin-left: auto; }
.nscs-model { color: var(--nsf-fg-3, #8a8f98); font-family: ui-monospace, monospace; font-size: 11px; }
.nscs-check { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 8px; display: grid; gap: 6px; }
.nscs-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
.nscs-label { font-family: ui-monospace, monospace; }
.nscs-scope { color: var(--nsf-fg-3, #8a8f98); }
.nscs-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; }
.nscs-side { display: grid; gap: 4px; min-width: 0; }
.nscs-quote { margin: 0; padding: 6px 8px; border-left: 2px solid rgba(224, 180, 80, 0.5); font-size: 13px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.nscs-trail { font-size: 11px; color: var(--nsf-fg-3, #8a8f98); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nscs-flags { font-style: italic; }
.nscs-inspect { font-size: 11px; padding: 1px 6px; }
.nscs-vs { color: var(--nsf-fg-3, #8a8f98); padding-top: 8px; }
.nscs-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.nscs-resolution { color: var(--nsf-supported); font-style: italic; }
.nscs-unavailable, .nscs-empty { color: var(--nsf-fg-3, #8a8f98); font-size: 12px; font-style: italic; }
.nscs-brief { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; }
.nscs-brief.nscs-conflict .nscs-brief-glyph { color: #e0b450; }
.nscs-brief.nscs-clear .nscs-brief-glyph { color: var(--nsf-supported); }
.nscs-row { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.nscs-row .nsf-prov-k { color: var(--nsf-fg-3, #8a8f98); min-width: 88px; }
.nscs-row[data-consistency="conflict"] .nsf-prov-v { color: #e0b450; }
@media (max-width: 720px) { .nscs-sides { grid-template-columns: 1fr; } .nscs-vs { display: none; } }
.nsl-flag-more { color: rgba(var(--nsl-haze-rgb), 0.7); border-style: dashed; cursor: help; }
/* ?lineage=1 — a card this night was built on (an earlier night, a
   compound member) says so in the haze the lineage strip already
   uses; the group it sits in is fenced off from this job's own rows. */
.nsl-flag-night { color: var(--nsf-haze); border-color: rgba(var(--nsl-haze-rgb), 0.45); }
.nsl-group-lineage { margin-top: 18px; padding-top: 22px; border-top: 1px dashed rgba(var(--nsl-haze-rgb), 0.28); }
.nsl-group-lineage .nsl-group-head { color: var(--nsf-haze); }
/* The labelled twin of the picture click - a link, not another fact. */
.nsl-flag-preview {
  color: var(--nsf-bone);
  background: none;
  cursor: pointer;
  font: 9px var(--nsf-mono);
  line-height: inherit;
}
.nsl-flag-preview:hover { color: var(--nsf-amber); border-color: rgba(var(--nsl-amber-rgb), 0.5); }
/* on the card: the labelled twin of the picture click, set as a link */
.nsl-card-foot .nsl-flag-preview {
  text-decoration: underline;
  text-decoration-color: rgba(232, 228, 218, 0.3);
  text-underline-offset: 3px;
}
.nsl-card-foot .nsl-flag-preview:hover { text-decoration-color: currentColor; }

/* Scribe tags: a caption, not chips. Chipping them gave a tag the same
   visual weight as a verdict, which is the single biggest reason the
   card read as busy — eight boxes competing for one eye. Dim text, one line,
   clipped with an ellipsis and the full set on hover. */
.nsl-tagline {
  display: block;
  margin-top: 5px;
  font: 9.5px var(--nsf-mono);
  letter-spacing: 0.02em;
  color: rgba(var(--nsl-haze-rgb), 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nsl-keep-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font: 10px var(--nsf-mono);
  color: var(--nsf-bone);
  background: rgba(var(--nsl-deep-rgb), 0.85);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 5px;
  padding: 3px 7px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.nsl-card:hover .nsl-keep-btn, .nsl-keep-btn:focus-visible { opacity: 1; }
.nsl-keep-btn:hover { color: var(--nsf-amber); border-color: rgba(var(--nsl-amber-rgb), 0.5); }
/* R20 §9.1 — the select toggle: its own corner hit-target, distinct
   from the card's open button (BM-005). Visible on hover like keep, but
   PINNED visible once selected so a selection can be audited at a
   glance. Inspect sits in the same cluster so the two verbs cannot
   be reached by clicking the card itself. */
.nsl-card-corners {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  gap: 4px;
}
.nsl-select-btn,
.nsl-inspect-btn {
  font: 12px var(--nsf-mono);
  line-height: 1;
  color: var(--nsf-bone);
  background: rgba(var(--nsl-deep-rgb), 0.85);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 5px;
  padding: 3px 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.nsl-card:hover .nsl-select-btn, .nsl-select-btn:focus-visible, .nsl-select-btn.on,
.nsl-card:hover .nsl-inspect-btn, .nsl-inspect-btn:focus-visible { opacity: 1; }
.nsl-select-btn:hover, .nsl-inspect-btn:hover { color: var(--nsf-amber); border-color: rgba(var(--nsl-amber-rgb), 0.5); }
.nsl-select-btn.on { color: var(--nsf-amber); border-color: rgba(var(--nsl-amber-rgb), 0.6); }

/* The folio card's corners: select is folio's quiet "+", always there
   and pinned bright once selected; inspect joins it on hover, top
   right. Keep is the caption's diamond - hollow until you want it,
   filled once the copy is in the durable library. */
/* select first in the markup (it is the primary corner verb), drawn at
   the far right where folio keeps its "+" */
.nsl-card-sm > .nsl-card-corners,
.nsl-card-md > .nsl-card-corners { top: 10px; right: 10px; left: auto; gap: 6px; flex-direction: row-reverse; }
.nsl-card-sm > .nsl-card-corners button,
.nsl-card-md > .nsl-card-corners button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  font: 13px/1 var(--nsf-sans);
  background: rgba(var(--nsl-deep-rgb), 0.82);
  border-color: rgba(232, 228, 218, 0.38);
  border-radius: 50%;
}
.nsl-card-sm > .nsl-card-corners .nsl-inspect-btn,
.nsl-card-md > .nsl-card-corners .nsl-inspect-btn { font-size: 11px; }
.nsl-card-sm > .nsl-card-corners .nsl-select-btn,
.nsl-card-md > .nsl-card-corners .nsl-select-btn { opacity: 0.7; }
.nsl-card-sm:hover > .nsl-card-corners .nsl-select-btn,
.nsl-card-md:hover > .nsl-card-corners .nsl-select-btn { opacity: 1; }
.nsl-card-sm > .nsl-card-corners .nsl-select-btn.on,
.nsl-card-md > .nsl-card-corners .nsl-select-btn.on { opacity: 1; color: #0B0E1A; background: var(--nsf-amber); border-color: var(--nsf-amber); }
.nsl-card-cap > .nsl-keep-btn,
.nsl-card-cap > .nsl-kept-mark {
  position: absolute;
  top: 9px;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.nsl-card-cap > .nsl-keep-btn {
  color: var(--nsf-haze);
  background: none;
  border: 0;
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity 0.12s ease, color 0.12s ease;
}
.nsl-card:hover .nsl-card-cap > .nsl-keep-btn { opacity: 1; }
.nsl-card-cap > .nsl-keep-btn:hover { color: var(--nsf-amber); }
.nsl-card-cap > .nsl-keep-btn:focus-visible { opacity: 1; outline: 2px solid var(--nsf-amber); outline-offset: 0; }
.nsl-card-cap > .nsl-kept-mark { color: var(--nsf-amber); }

/* MEDIUM's lead: the first piece of the first section takes the room of
   four, its caption set in the serif. Only where three columns fit -
   spanning two tracks in a one-column grid would invent a column. */
@media (min-width: 1180px) {
  .nsl-grid[data-size="md"] > .nsl-card.nsl-lead { grid-column: span 2; grid-row: span 2; }
  .nsl-lead .nsl-card-thumb-hit { flex: 1 1 auto; display: flex; flex-direction: column; }
  .nsl-lead .nsl-thumb { flex: 1 1 auto; aspect-ratio: auto; min-height: 320px; }
  .nsl-lead .nsl-name { font-family: var(--nsl-serif); font-size: 27px; letter-spacing: -0.02em; line-height: 1.15; }
  .nsl-lead .nsl-card-cap { padding-top: 16px; }
}

/* Folio's selection bar: it arrives with a selection and rides the
   bottom of the view while the reader keeps choosing. */
.nsl-selbar { position: sticky; bottom: 14px; z-index: 6; margin-top: 22px; }
.nsl-selbar .nsl-bulkbar {
  margin: 0;
  max-height: 40vh;
  overflow: auto;
  background: var(--nsl-raise);
  border: 1px solid rgba(var(--nsl-amber-rgb), 0.38);
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  padding: 12px 14px;
}
/* Repair, read inside the Library: the queue's own controls in the
   folio's voice. The queue is shared with other surfaces, so this is
   scoped to the Library's Repair reading. */
.nsl-repair .nsrq-toolbar { gap: 8px; padding-bottom: 6px; }
.nsl-repair .nsf-btn {
  font: 12.5px var(--nsf-sans);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 0 14px;
  height: 34px;
  border-radius: 4px;
}
.nsl-repair .nsf-btn-secondary,
.nsl-repair .nsf-btn-ghost { background: rgba(232, 228, 218, 0.02); color: var(--nsf-bone); border-color: var(--nsl-rule); }
.nsl-repair .nsf-btn-secondary:hover:not(:disabled),
.nsl-repair .nsf-btn-ghost:hover:not(:disabled) { background: rgba(232, 228, 218, 0.07); color: #fff; border-color: rgba(232, 228, 218, 0.3); }
.nsl-repair .nsrq-table .nsf-btn { height: 26px; padding: 0 10px; font-size: 11.5px; }
.nsl-repair .nsj-select { height: 34px; max-width: 360px; }
.nsl-repair .nsrq-table { font-size: 12px; }
.nsl-repair .nsrq-table th {
  padding: 10px 8px;
  font: 10px var(--nsf-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nsf-haze);
  opacity: 1;
  border-bottom-color: var(--nsl-rule);
}
.nsl-repair .nsrq-table td { padding: 11px 8px; border-bottom: 1px solid var(--nsl-rule-soft); }

/* R20 §9.2 — the bulk bar */
.nsl-bulkbar {
  border: 1px solid var(--nsf-glass-border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.nsl-bulkbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nsl-bulkbar-count { font: 12.5px var(--nsf-sans); color: var(--nsf-bone); }
.nsl-bulkbar-verb { font: 12px var(--nsf-sans); color: var(--nsf-amber); white-space: nowrap; }
.nsl-bulkbar-instruction {
  flex: 1;
  min-width: 160px;
  height: 32px;
  font: 12.5px var(--nsf-sans);
  color: var(--nsf-bone);
  background: rgba(232, 228, 218, 0.03);
  border: 1px solid var(--nsl-rule, var(--nsf-glass-border));
  border-radius: 4px;
  padding: 0 10px;
}
.nsl-bulkbar-instruction:focus { outline: none; border-color: rgba(var(--nsl-amber-rgb), 0.6); }
.nsl-when-on { color: var(--nsf-amber); border-color: rgba(var(--nsl-amber-rgb), 0.5); }
.nsl-bulkbar-go { color: var(--nsf-amber); }
.nsl-bulkbar-preview {
  margin-top: 5px;
  font: 10.5px var(--nsf-mono);
  color: rgba(var(--nsl-haze-rgb), 0.85);
}
.nsl-bulkbar-err { color: var(--nsf-coral, #D4576B); }
/* 0.79.0 — the bulk PROGRESS strip (daemon-sourced, survives the
   selection and the tab; see NslBulkProgress). */
.nsl-bulkprog {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.nsl-bulkprog-row {
  border: 1px solid var(--nsf-glass-border);
  border-radius: 8px;
  padding: 7px 10px 8px;
  background: rgba(255, 255, 255, 0.03);
}
.nsl-bulkprog-row.active { border-color: rgba(var(--nsl-amber-rgb), 0.45); background: rgba(var(--nsl-amber-rgb), 0.06); }
.nsl-bulkprog-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font: 11px var(--nsf-mono);
  color: var(--nsf-bone);
}
.nsl-bulkprog-verb { color: var(--nsf-amber); white-space: nowrap; }
.nsl-bulkprog-count { color: var(--nsf-bone); font-weight: 600; }
.nsl-bulkprog-bits { flex: 1; min-width: 160px; color: rgba(var(--nsl-haze-rgb), 0.9); font-size: 10.5px; }
.nsl-bulkprog-acts { display: inline-flex; gap: 6px; margin-left: auto; }
.nsl-bulkprog-bar {
  position: relative;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  overflow: hidden;
}
.nsl-bulkprog-bar > span { display: block; height: 100%; transition: width 0.4s ease; }
.nsl-bulkprog-bar > .done { background: var(--nsf-green, #5FBF8A); }
.nsl-bulkprog-bar > .failed { background: var(--nsf-coral, #D4576B); }
.nsl-bulkprog-bar > .running { background: var(--nsf-amber); animation: nslShimmer 1.4s linear infinite; background-image: linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 60%); background-size: 200% 100%; }
.nsl-bulkprog-foot, .nsl-bulkprog-note {
  margin-top: 5px;
  font: 10.5px var(--nsf-mono);
  color: rgba(var(--nsl-haze-rgb), 0.85);
}
.nsl-bulkprog-note { color: var(--nsf-amber); }
.nsl-skeleton {
  aspect-ratio: 16 / 13;
  border-radius: 3px;
  border-bottom: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 60%);
  background-size: 200% 100%;
  animation: nslShimmer 1.4s linear infinite;
}
@keyframes nslShimmer { to { background-position: -200% 0; } }
.nsl-empty {
  border-top: 1px solid var(--nsl-rule, var(--nsf-glass-border));
  border-bottom: 1px solid var(--nsl-rule, var(--nsf-glass-border));
  padding: 56px 24px;
  text-align: center;
  max-width: 600px;
  margin: 40px auto;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.nsl-empty-title { font-family: var(--nsl-serif, Georgia, serif); font-size: 24px; font-weight: 400; letter-spacing: -0.015em; margin-bottom: 2px; }
.nsl-empty .nsf-subtitle { max-width: 52ch; line-height: 1.55; color: var(--nsf-haze); }

/* lightbox — must clear the top chrome (.chrome, z-index 50): at 40 the
   fixed overlay slid UNDER the 56px header, which swallowed the head row
   and the preview bar's close button. 60 = the .nsf-modal-overlay base,
   still under tweaks (70) / toasts (80) / palette (90+). */
.nsl-lightbox { z-index: 60; }
/* No blur behind the Library's modals (the inspector, the export sheet).
   A backdrop-filter re-rasterises everything under it whenever anything
   moves, and under it is a wall of live pages; at 0.75 black the blur
   was barely visible anyway. A denser plain veil reads the same. */
.nsl-view .nsf-modal-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(8, 11, 20, 0.88); }
/* The inspector's one invisible warm-up render: laid out like the real
   thing (opacity, not display/visibility, so the engine builds it all),
   never seen, never hit. */
.nsl-warm { position: fixed; inset: 0; opacity: 0; pointer-events: none; z-index: -1; }
.nsl-warm * { pointer-events: none !important; }
.nsl-lightbox-box {
  position: relative;
  /* The overlay centres this inside a 24px padding box, so 96vw/94vh
     asked for MORE room than the overlay has and the excess was clipped
     off the top — the head row disappeared under the chrome. Clamp to
     the space that actually exists; the flex column inside already
     scrolls its own body. */
  width: min(96vw, 100%);
  height: 94vh;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--nsf-panel);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 10px;
  overflow: hidden;
}
/* The head is a COLUMN of three rows, not one row of everything.
   Identity + the verbs / the chips that wrap / the scribe line. As a
   single flex row it had no wrap and no priority, so a long summary and
   a fat tag set squeezed the action buttons — ⚗ make and ✦ refine, the
   two things this surface is for — off the right edge. */
.nsl-lightbox-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nsf-glass-border);
  flex: none;
  min-width: 0;
}
.nsl-lb-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nsl-lightbox-head .nsl-name {
  font-size: 12.5px; font-weight: 600; color: var(--rt-fg-1, #E8EDF7);
  flex: 0 1 auto; max-width: 46%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The origin line takes whatever is left and ellipsises — it is the
   only thing in row 1 allowed to shrink. */
.nsl-lightbox-sub {
  font: 10px var(--nsf-mono);
  color: var(--nsf-haze);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
/* flex: none — the action cluster never shrinks, never wraps, and is
   always the rightmost thing in the row. */
.nsl-lb-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.nsl-lb-sep { width: 1px; height: 16px; background: var(--nsf-glass-border); flex: none; }
.nsl-lb-pos { font: 10px var(--nsf-mono); color: var(--nsf-haze); padding: 0 2px; white-space: nowrap; }
.nsl-lb-metarow { flex-wrap: wrap; gap: 5px; }
.nsl-lb-toggle {
  font: 9px var(--nsf-mono); color: var(--nsf-haze);
  background: none; border: 1px solid var(--nsf-glass-border); border-radius: 4px;
  padding: 0 5px; height: 15px; cursor: pointer;
}
.nsl-lb-toggle:hover { color: var(--nsf-ink, #E8EDF7); border-color: var(--nsf-haze); }
.nsl-lb-toggle.on { color: var(--nsf-supported); border-color: rgba(var(--nsl-ok-rgb), 0.4); }
.nsl-lb-scribe { align-items: flex-start; flex-wrap: wrap; gap: 6px; }
.nsl-lb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; }
.nsl-lb-headline {
  font: italic 11px var(--nsf-mono); color: var(--nsf-haze);
  flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The scorecard is a block; it hangs BELOW the head under its own
   toggle rather than sitting inside a row and doubling its height. */
.nsl-lightbox-score {
  flex: none; padding: 10px 14px;
  border-bottom: 1px solid var(--nsf-glass-border);
  max-height: 40vh; overflow-y: auto;
}
.nsl-lightbox-body { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; }
/* the body's one-frame placeholder while the inspector arrives */
.nsl-lb-arriving { flex: 1; min-height: 240px; border-radius: 4px; background: rgba(232, 228, 218, 0.025); }
/* Full-screen reading surfaces (lightbox + answer modal): the artifact
   card stretches to fill, the inner 420px code cap yields to the
   surface's own scrollbar, and long lines WRAP instead of running off
   the right edge — reading, not horizontal panning. */
.nsl-lightbox .nsa-artifact { flex: 1 0 auto; display: flex; flex-direction: column; }
.nsl-lightbox .nsa-actionbar { flex: none; }
.nsl-lightbox .nsa-code,
.nsf-modal-read .nsa-code {
  flex: 1;
  max-height: none;
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.nsl-lightbox .nsa-code code,
.nsf-modal-read .nsa-code code { white-space: inherit; overflow-wrap: inherit; }
.nsl-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 56px;
  font-size: 22px;
  color: var(--nsf-bone);
  background: rgba(var(--nsl-deep-rgb), 0.7);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 7px;
  cursor: pointer;
}
.nsl-lightbox-nav:disabled { opacity: 0.25; cursor: default; }
.nsl-nav-prev { left: 10px; }
.nsl-nav-next { right: 10px; }
/* the live HTML preview overlay spans the whole lightbox, not the
   field-canvas exclusion geometry it uses inside the inspector */
.nsl-lightbox .nsa-preview-overlay { position: absolute; right: 0; z-index: 6; }
/* Wall-card preview skips the lightbox and covers the Library itself.
   Same z as .nsl-lightbox so a card-opened preview is the thing on
   screen, not a second inspector underneath. */
.nsl-wall-preview {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.nsl-wall-preview .nsa-preview-overlay { position: absolute; right: 0; z-index: 6; }
.nsl-lb-preview { flex: none; }

/* ── Scribe telemetry + enrichment surfacing (R11) ─────────────────
   The HUD chip is the honest channel: it carries the counts whether or
   not the field is animating, so reduced motion and the visuals-off
   toggle lose the choreography, never the information.               */
.nsf-scribe-chip {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 4px 9px; border-radius: 7px;
  background: var(--rt-bg-alt); box-shadow: var(--rt-ring);
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-2);
  letter-spacing: .04em; white-space: nowrap;
}
.nsf-scribe-phases { color: var(--rt-fg-3); font-size: 9px; }
/* Stalled is a finding, not a decoration: the wave stopped reporting
   while work was still pending. Amber, never red — nothing is broken,
   the machine simply stopped saying what it was doing. */
.nsf-scribe-stalled { color: var(--rt-amber); }

/* Search highlight fan-out. Hits get a ring, everything else recedes —
   the Library's echo of the field's dim cascade, so one query reads the
   same way in both surfaces. */
.nsl-hit { box-shadow: var(--rt-ring-strong); }
.nsl-dim { opacity: .35; transition: opacity var(--dur, 200ms) var(--ease, ease); }

.nsl-tag-chip {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 999px;
  background: var(--rt-bg); box-shadow: var(--rt-ring);
  font-family: var(--mono); font-size: 9.5px; color: var(--rt-fg-3);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Two lines, then a click. A scribe summary is a paragraph and a
   paragraph in a header is a wall — but truncating it with no way back
   loses the one piece of prose on this surface, so it opens in place. */
.nsl-summary-line {
  font-family: var(--font); font-size: 11.5px; color: var(--rt-fg-2);
  line-height: 1.45; margin: 0;
  /* Capped rather than greedy: at flex-grow it claimed the whole row
     for a six-word summary and threw the tags against the right edge. */
  flex: 0 1 auto; max-width: min(62ch, 100%); min-width: 0; cursor: pointer;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.nsl-summary-line.open { display: block; -webkit-line-clamp: unset; max-height: 24vh; overflow-y: auto; }
.nsl-summary-line:hover { color: var(--rt-fg-1, #E8EDF7); }
.nsl-enrich-btn {
  height: 26px; display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 7px; padding: 0 10px;
  background: var(--rt-bg-alt); color: var(--rt-fg-2); box-shadow: var(--rt-ring);
  font-family: var(--mono); font-size: 10.5px; cursor: pointer;
}
.nsl-enrich-btn:hover:not(:disabled) { color: var(--rt-accent); background: var(--rt-bg); }
.nsl-enrich-btn:disabled { opacity: .45; cursor: default; }

/* ── R13: the bar (quality judge mode) ─────────────────────────────────
   Deterministic and judged rows are visually distinct EVERYWHERE they
   appear. A judged 0.62 and an executable check at 1 are not the same
   kind of fact, and a scorecard that renders them identically is lying
   by layout — so the two kinds carry different rails and different
   score colours, and an abstention is greyed text reading "not graded"
   rather than a zero or an empty cell. */
.nsl-flag-ineligible { color: var(--nsf-haze); border-color: var(--nsf-glass-border); opacity: .8; }
.nsl-scorecard {
  margin: 10px 0 2px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(var(--nsl-deep-rgb), 0.55);
  box-shadow: var(--rt-ring);
  font-family: var(--mono); font-size: 10.5px; color: var(--nsf-haze);
  max-height: 260px; overflow-y: auto;
}
.nsl-scorecard-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--nsf-bone); }
/* Provenance is never laundered: the source label sits beside the bar's
   name on first mention, always. */
.nsl-scorecard-src { font-size: 9.5px; color: var(--nsf-haze); font-style: italic; }
.nsl-scorecard-drift { margin-top: 4px; color: var(--nsf-amber); font-size: 9.5px; }
/* score and graded_weight appear together or neither does. */
.nsl-scorecard-sum { margin: 4px 0 8px; color: var(--nsf-bone); }
.nsl-crit {
  display: grid;
  grid-template-columns: 34px 62px 78px 62px 1fr;
  gap: 8px; align-items: baseline;
  padding: 2px 0 2px 7px;
  border-left: 2px solid transparent;
}
.nsl-crit-deterministic { border-left-color: rgba(var(--nsl-ok-rgb), 0.45); }
.nsl-crit-judged { border-left-color: rgba(124, 139, 181, 0.45); font-style: italic; }
.nsl-crit-id { color: var(--nsf-bone); }
.nsl-crit-band, .nsl-crit-kind { color: var(--nsf-haze); font-size: 9.5px; }
.nsl-crit-score { color: var(--nsf-bone); }
/* Never a 0, never a blank cell. */
.nsl-crit-abstained { color: var(--nsf-haze); opacity: .7; font-style: italic; }
.nsl-crit-detail { color: var(--nsf-haze); font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; }
.nsl-scorecard-unmet { margin-top: 8px; color: var(--nsf-amber); }

/* The composer's live rubric preview — the SAME parser the daemon
   accepts or rejects with, so the preview can never promise a parse the
   daemon will refuse. */
.ns-rubric-status { font-family: var(--mono); font-size: 9px; line-height: 1.5; }
.ns-rubric-ok { color: var(--rt-green); }
.ns-rubric-bad { color: var(--rt-amber); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ns-rubric-warn { color: var(--rt-amber); }
.ns-rubric-repair { font-size: 9px; padding: 2px 8px; min-height: 0; }

/* =====================================================================
   The inline bar composer (R13's three doors, in the Library).

   Sits between the judge controls and the grid, over the run it is
   about. Deliberately quiet: it is a form that appeared because you
   asked a question, not a dialog that took the screen.
   ===================================================================== */
.nsl-bar {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--nsf-glass-border);
  border-left: 2px solid var(--nsf-amber);
  border-radius: 8px;
  background: rgba(var(--nsl-deep-rgb), 0.55);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.nsl-bar-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nsl-bar-title {
  font: 700 10px var(--nsf-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nsf-amber);
}
.nsl-bar-doors { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.nsl-bar-why { font: 11.5px var(--nsf-sans); line-height: 1.55; color: var(--nsf-haze); }
.nsl-bar-why b { color: var(--nsf-bone); font-weight: 600; }
.nsl-bar-text {
  width: 100%;
  min-height: 168px;
  resize: vertical;
  font: 11px/1.55 var(--nsf-mono);
  color: var(--nsf-bone);
  background: rgba(2, 2, 2, 0.55);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 6px;
  padding: 10px 12px;
}
.nsl-bar-text:focus { outline: none; border-color: rgba(255, 255, 255, 0.32); }
.nsl-bar-text::placeholder { color: rgba(var(--nsl-haze-rgb), 0.45); }
.nsl-bar-status { display: flex; flex-direction: column; gap: 3px; font: 10.5px var(--nsf-mono); }
.nsl-bar-ok { color: var(--nsf-supported); }
.nsl-bar-bad { color: var(--nsf-contradicted); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nsl-bar-warn { color: var(--nsf-amber); }
.nsl-bar-muted { color: rgba(var(--nsl-haze-rgb), 0.7); }
.nsl-bar-repair { font-size: 10px; padding: 2px 8px; }
.nsl-bar-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nsl-bar-ref {
  flex: 1 1 180px;
  min-width: 0;
  font: 10.5px var(--nsf-mono);
  color: var(--nsf-bone);
  background: rgba(2, 2, 2, 0.55);
  border: 1px solid var(--nsf-glass-border);
  border-radius: 6px;
  padding: 6px 10px;
}
.nsl-bar-ref:focus { outline: none; border-color: rgba(255, 255, 255, 0.32); }
.nsl-bar-go:disabled { opacity: 0.4; cursor: not-allowed; }

.nsj-make-q-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.nsf-lane-run { display: flex; gap: 6px; margin-bottom: 8px; }
.nsf-force-stop { opacity: 0.9; }
.nsj-make-btn {
  appearance: none; background: none; border: 1px solid var(--rt-rule, rgba(255,255,255,.12));
  color: inherit; font: inherit; font-size: 10px; padding: 1px 6px; border-radius: 4px;
  cursor: pointer;
}
.nsj-make-btn:disabled { opacity: .5; cursor: default; }

.nsrf-panel { display: flex; flex-direction: column; gap: 2px; }
.nsrf-panel.compact { gap: 0; }
.nsrf-note { color: var(--nsf-haze, #8E9DBE); font-size: 10.5px; }
.nsrf-err { color: var(--nsf-contradicted); font-size: 11.5px; margin-top: 6px; }
.nsrf-warn { color: var(--nsf-amber); font-size: 11.5px; margin-top: 4px; }
.nsrf-source {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; margin-bottom: 6px;
  border: 1px solid var(--nsf-rule); border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--nsf-mono), monospace; font-size: 11px;
}
.nsrf-source-name { color: var(--nsf-bone); font-size: 12px; }
.nsrf-verdict { margin-left: auto; color: var(--nsf-haze, #8E9DBE); }
.nsrf-verdict.ok { color: var(--nsf-supported); }
.nsrf-verdict.bad { color: var(--nsf-contradicted); }
.nsrf-evidence { margin: -2px 0 6px; }
.nsrf-target { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.nsrf-check {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--nsf-haze, #8E9DBE); font-family: var(--nsf-mono), monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer;
}
.nsrf-check input { accent-color: var(--nsf-supported); }
.nsrf-plan {
  margin: 8px 0; padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--nsf-rule); background: rgba(255, 255, 255, 0.02);
  font-size: 10.5px; line-height: 1.7; color: var(--nsf-bone);
}
.nsrf-close {
  align-self: flex-start; margin-top: 8px; background: none; border: 0;
  color: var(--nsf-haze, #8E9DBE); cursor: pointer;
  font-family: var(--nsf-mono), monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.nsrf-unit-instruction { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }

/* The chain (§6.3) — a list of real files, not a stack. Each node is
   an artifact with its own bytes and its own verdict; a failed refine
   is a node that says so, and the node above it still stands. */
.nsrf-chain { font-family: var(--nsf-mono), monospace; font-size: 10.5px; margin-bottom: 6px; }
.nsrf-chain-node { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; color: var(--nsf-haze, #8E9DBE); }
.nsrf-chain-node.current { color: var(--nsf-bone); }
.nsrf-chain-rail { color: var(--nsf-rule); }
.nsrf-chain-name { color: inherit; }
.nsrf-chain-instruction { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.nsrf-chain-verdict { margin-left: auto; }
.nsrf-chain-verdict.ok { color: var(--nsf-supported); }
.nsrf-chain-verdict.bad { color: var(--nsf-contradicted); }

/* The element picker (§8). The frame is sandboxed WITHOUT
   allow-same-origin, so the previewed document has an opaque origin and
   cannot reach this app; the bridge inside it talks back by postMessage
   and is validated by frame reference plus a per-preview nonce. */
.nsrf-picker-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--nsf-ink, #070A12);
}
.nsrf-picker-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--nsf-rule);
  font-family: var(--nsf-mono), monospace; font-size: 11px; color: var(--nsf-bone);
}
.nsrf-picker-title { color: var(--nsf-supported); }
/* same no-flash reveal as the preview frame: hidden until load, with a
   CSS-only 1.4 s safety net so a page that never fires load still shows */
.nsrf-picker-frame { flex: 1; width: 100%; border: 0; background: #fff; opacity: 0; transition: opacity 0.22s ease; animation: nsaLateReveal 0s linear 1.4s forwards; }
.nsrf-picker-frame.ready { opacity: 1; animation: none; }
@keyframes nsaLateReveal { to { opacity: 1; } }
.nsrf-picker-empty { flex: 1; display: grid; place-items: center; color: var(--nsf-haze, #8E9DBE); font-size: 12px; }

/* The lightbox drawers (AE §0.b + R21 §6.1) — one at a time, above the
   viewer body so the artifact stays readable beneath the form. */
.nsl-lightbox-verb, .nsl-lightbox-chain {
  padding: 10px 14px; border-bottom: 1px solid var(--nsf-rule);
  max-height: 46vh; overflow-y: auto;
}
.nsa-act-btn.on { color: var(--nsf-supported); border-color: var(--nsf-supported); }

/* ── TRACE — the attempt inspector's fourth tab (NS-TRACE-PRD-001 §4).
   One shared renderer (nightshift-ui/trace.mjs traceHtml) produces this
   markup on BOTH surfaces; these rules style the cockpit instance. The
   night palette only — verdict hexes come from the shipped map, read
   AFTER judge_mode. Nothing here animates (R4 §6.5): a trace is a
   record, and a record that moves is a screensaver. */
.nsf-trace-host { display: flex; flex-direction: column; }
.ns-trace-copybar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px;
}
.ns-trace-copy-note { color: var(--nsf-haze); font-size: 10px; line-height: 1.4; }
.ns-trace { display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.ns-trace-link {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}
.ns-trace-link > summary {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px; cursor: pointer; list-style: none;
}
.ns-trace-link > summary::-webkit-details-marker { display: none; }
.ns-trace-num { color: var(--nsf-haze); font-family: var(--nsf-mono), monospace; flex: none; }
.ns-trace-name {
  font-family: var(--nsf-mono), monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; color: #fff; flex: none;
}
.ns-trace-head { color: rgba(255, 255, 255, 0.65); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-trace-chip {
  flex: none; font-family: var(--nsf-mono), monospace; font-size: 8px;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.55);
}
/* not_recorded and not_applicable are DIFFERENT facts and must not
   render alike (§4.4): a gap glows amber; "there was never such a
   step" stays neutral and dim. */
.ns-trace-link.state-partial .ns-trace-chip,
.ns-trace-link.state-not_recorded .ns-trace-chip { border-color: rgba(224, 180, 80, 0.6); color: #E0B450; }
.ns-trace-link.state-not_applicable .ns-trace-chip { opacity: 0.5; }
.ns-trace-body { padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.ns-trace-row { display: flex; justify-content: space-between; gap: 12px; }
.ns-trace-row .k { color: var(--nsf-haze); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px; flex: none; padding-top: 1px; }
.ns-trace-row .v { color: #fff; text-align: right; word-break: break-word; min-width: 0; }
.ns-trace-row .v .dim { color: rgba(255, 255, 255, 0.45); }
/* a ⚠ marks a gap or a finding, never decoration, and always carries
   its sentence (§4.5) */
.ns-trace-warn {
  border: 1px solid rgba(224, 180, 80, 0.45); border-radius: 3px;
  background: rgba(224, 180, 80, 0.08); color: #E0B450;
  padding: 6px 8px; font-size: 11px;
}
.ns-trace-note { color: var(--nsf-haze); font-size: 10px; line-height: 1.5; }
.ns-trace .ns-mono, .nsf-trace-host .mono { font-family: var(--nsf-mono), monospace; }
.ns-trace-wire summary { cursor: pointer; color: var(--nsf-haze); font-size: 10px; }
.ns-trace-wire pre { white-space: pre-wrap; margin: 6px 0 0; font-size: 10px; max-height: 320px; overflow-y: auto; }
.ns-trace-jump { color: #8FB8E8; text-decoration: none; border-bottom: 1px dotted rgba(143, 184, 232, 0.5); }
.ns-trace-verdict.pal-good { color: var(--nsf-supported, #5FBFA8); }
.ns-trace-verdict.pal-mid { color: #E0B450; }
.ns-trace-verdict.pal-bad { color: var(--nsf-contradicted, #D4576B); }
.ns-trace-empty { color: var(--nsf-haze); font-size: 11px; }
/* S6: the Evidence rail's anchors are LIVE — same affordance as the
   trace jump, and the preview they open. */
.ns-trace-evidence { color: #8FB8E8; text-decoration: none; border-bottom: 1px dotted rgba(143, 184, 232, 0.5); cursor: pointer; }
.ns-trace-ev-preview {
  margin-top: 8px; border: 1px solid rgba(143, 184, 232, 0.4); border-radius: 4px;
  background: rgba(20, 26, 38, 0.97); padding: 8px 10px; font-size: 11px;
}
.ns-trace-ev-preview .ns-trace-ev-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ns-trace-ev-preview .ns-trace-ev-head button {
  background: none; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 3px;
  color: rgba(255, 255, 255, 0.7); font-size: 9px; padding: 2px 8px; cursor: pointer;
}
.ns-trace-ev-preview pre { white-space: pre-wrap; margin: 0; font-size: 10px; max-height: 320px; overflow-y: auto; }

/* =====================================================================
   NS-R22 — THE NIGHT RAIL (.nsr-*)
   A left-edge tab strip pinned to the middle of the main region, and a
   panel that slides out over the field.

   Namespace note: .nsr-, not .nsf- and not bare .ns-. The field engine
   writes .nsf-* per frame, .nsf-tabs/.nsf-night-screen are shared with
   the Judges and Archive screens, and .ns-card/.ns-table are the Queue
   grammar this panel HOSTS rather than restyles.

   Placement note: this block lives here rather than in css/app.css
   because the rail is Night-only — and because arena-render.test.mjs
   slices app.css between `.simple-shell {` and `.simple-header {`.

   Z-LADDER (see NS_R22_NIGHT_RAIL_PRD §11.2):
     scrim 42 · panel 44 · strip 46
   Above every field element (max .nsf-popover 8) and .nsl-toolbar (5);
   BELOW .chrome (50) so the header always wins, and below the 60-band
   (.nsf-modal-overlay, .nsl-lightbox, .ns-omni-drop) so a modal opened
   from anywhere still paints over the panel.
   ===================================================================== */

.nsr-scrim {
  position: fixed;
  top: 56px; left: 0; right: 0; bottom: 28px;   /* under .chrome, above .statusbar */
  z-index: 42;
  background: rgba(0, 0, 0, 0.18);              /* the .drawer-back value */
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
/* Dims without hiding: the whole point is that the night stays
   watchable while you queue the next one. The scrim earns its place by
   catching stray clicks that would otherwise drag the field camera, and
   by giving click-outside-to-close. */
.nsr-scrim.open { opacity: 1; pointer-events: auto; }

/* ---- the strip ---------------------------------------------------- */
.nsr-rail {
  position: fixed;
  left: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 46;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--nsf-glass-border);
  border-left: none;
  border-radius: 0 6px 6px 0;
  background: rgba(7, 10, 20, 0.92);
  backdrop-filter: blur(24px);
  box-shadow: 6px 0 28px rgba(0, 0, 0, 0.45);
}
/* Folded: the strip tucks to a chevron so Library and an attempt
   preview keep the left edge. Live field defaults to the full strip. */
.nsr-fold {
  width: 82px;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.nsr-fold:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.nsr-fold:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: -2px; }
.nsr-rail.is-folded .nsr-tab { display: none; }
.nsr-rail.is-folded .nsr-fold {
  width: 28px;
  min-height: 52px;
}
.nsr-tab {
  position: relative;
  width: 82px;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 4px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  /* the .nsf-tab treatment, copied by VALUE — the class itself is
     shared with the Judges screen and must not be restyled */
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.nsr-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.nsr-tab:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: -2px; }
.nsr-tab[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 700;
}
.nsr-tab-glyph { font-size: 17px; line-height: 1; letter-spacing: 0; opacity: 0.9; }
.nsr-tab-label { line-height: 1; }
.nsr-badge {
  position: absolute;
  right: 8px; top: 10px;
  min-width: 14px; height: 14px;
  padding: 0 4px;
  border-radius: 7px;
  background: var(--rt-green, #4ea172);
  color: #001b0e;
  font-size: 8px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  letter-spacing: 0;
}

/* ---- the one-time pointer ----------------------------------------- */
.nsr-coach {
  position: fixed;
  left: 100px; top: 50%;
  transform: translateY(-50%);
  z-index: 46;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 10px 12px;
  border: 1px solid var(--nsf-glass-border);
  border-radius: 4px;
  background: rgba(7, 10, 20, 0.96);
  backdrop-filter: blur(24px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  font-family: var(--nsf-mono);
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}
.nsr-coach-x {
  flex: none;
  background: none; border: none; cursor: pointer;
  color: rgba(255, 255, 255, 0.5); font: inherit;
}
.nsr-coach-x:hover { color: #fff; }

/* ---- the panel ----------------------------------------------------- */
.nsr-panel {
  position: fixed;
  /* Beside the strip, not under it. The rail is 82px of tab plus 4px of
     padding either side = 90px, and it paints ABOVE the panel so its
     tabs stay clickable while the panel is open — so the panel has to
     start where the rail ends or the rail would cover its first 90px of
     content. */
  left: 90px; top: 56px; bottom: 28px;
  /* Wide by requirement, not by taste: CSS media queries measure the
     VIEWPORT, not this box, so a narrow panel on a wide window keeps
     .ns-grid-queue's two columns and .fleet-main's 428px of fixed rails
     and merely cramps them. At 1180px every body renders at the size it
     was designed for; on a genuinely small window the viewport is small
     too, so the existing breakpoints fire correctly. */
  width: min(1180px, calc(96vw - 90px));
  z-index: 44;
  display: flex;
  flex-direction: column;
  background: rgba(7, 10, 20, 0.94);
  backdrop-filter: blur(24px);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0 6px 6px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.5);
  transform: translateX(-102%);
  /* visibility, delayed by the slide, is what takes the closed panel's
     focusables out of the tab order — the resident composer must not be
     reachable by Tab while hidden. .drawer leaves live tab stops
     off-canvas; this deliberately does not. */
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.3s, width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.nsr-panel.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s, width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Reduced motion needs no rule of its own: css/tokens.css:172 and
   css/app.css:3576 already collapse every transition-duration to
   .01ms globally. Nothing here is gated on transitionend, which is why
   that is safe. */

.nsr-panel-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--nsf-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: #fff;
}
.nsr-panel-head:focus { outline: none; }
.nsr-panel-title { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
.nsr-width {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}
.nsr-width button {
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.nsr-width button:hover { color: #fff; }
.nsr-width button.on {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.nsr-panel-x {
  background: none; border: none; cursor: pointer;
  color: rgba(255, 255, 255, 0.55); font: inherit; padding: 2px 6px;
}
.nsr-panel-x:hover { color: #fff; }

.nsr-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* NOT `hidden` on the inline axis: .ns-guarantee-pop (the readiness
     checklist) is absolutely positioned above the primary button and
     draws OUTSIDE its parent's box. Clipping it would silently delete
     the composer's main teaching surface. */
  overflow-x: visible;
}
.nsr-slot { min-height: 100%; }
/* The panel hosts .ns-screen, which brings its own padding and dot
   ground; drop the duplicate ground so it does not stack with the
   panel's own glass. */
.nsr-panel-body .ns-screen { min-height: 0; padding: 16px 20px 28px; }
.nsr-panel-body .ns-screen::before { display: none; }

/* A hidden region must not be laid out. The !important matches the
   .ns-qpage[hidden] guard in app.css and exists for the same reason:
   .ns-grid's `display: grid` and .ns-flow-step's `display: flex` both
   beat the `hidden` attribute's UA default. */
.nsr-region[hidden],
.nsr-slot[hidden] { display: none !important; }

/* Small windows: the strip keeps its glyphs and drops the words rather
   than overflowing. Widths for slim/wide are restated AFTER those
   rules so this query cannot outrank them. */
@media (max-height: 640px) {
  .nsr-panel { left: 54px; width: min(1180px, calc(96vw - 54px)); }
  .nsr-tab { width: 46px; min-height: 44px; padding: 0; }
  .nsr-tab-label { display: none; }
  .nsr-badge { right: 3px; top: 3px; }
  .nsr-fold { width: 46px; }
  .nsr-rail.is-folded .nsr-fold { width: 22px; min-height: 44px; }
}

/* ---- NS-R24: the Lanes panel ---------------------------------------
   The fourth rail tab hosts a whole former SCREEN (EngineView) rather
   than a panel written for the rail, so it arrives wrapped in
   .page-tight — the shell's page padding plus a 1600px cap meant for
   the main column. Inside the panel the width is already bounded, and
   the cap would only re-centre the body inside a narrower box, so drop
   it and match the inset .ns-screen gets above.

   The 1180px wide width is deliberate here, not merely inherited:
   .lmx-split's own breakpoint is a max-width: 1180px VIEWPORT query, so
   a narrower panel would keep the two-column workbench and cramp it
   instead of collapsing it. Slim mode therefore restacks those
   internals from the panel class, not from a viewport query. Lanes
   still defaults to wide; Queue / Jobs / Monitor default to slim.
--------------------------------------------------------------------- */
.nsr-panel-body .page-tight { max-width: none; padding: 16px 20px 28px; }
/* The memory ledger is position: sticky, and its scrollport in here is
   .nsr-panel-body, not .main > .scroll. Its max-height was written
   against the full window (100vh - 120px); the panel gives up 56px of
   chrome, 28px of status bar and its own 44px head, so the rail would
   overhang the panel by roughly that head's height and scroll its own
   footer out of reach. */
.nsr-panel-body .lmx-rail { max-height: calc(100vh - 172px); }

/* =====================================================================
   NS-R23 — THE JOBS BOARD (.nsj-*)
   The Jobs rail panel stopped being two stacked cards and became a
   master/detail pair: a filtered, paged list on the left and one
   resident inspector on the right.

   Namespace note: .nsj-, not .nsr-. .nsr-* is the R22 rail — the strip,
   the scrim and the panel that HOSTS this board; .nsrf-* is R21's
   refine panel. The one .nsr- rule below is a deliberate modifier on
   the rail's own panel, and is written as a compound selector so the
   max-height media query at the top of this section cannot outrank it.

   Everything here is painted from the semantic --rt-* tokens, so the
   board inverts with the theme like the rest of the cockpit rather than
   hard-coding the night palette.
   ===================================================================== */

/* The Jobs panel carries a second column of its own, so its WIDE mode
   is the one rail tab allowed past the 1180px the composer and the
   fleet board were designed against. Slim is shared: a 520px sidebar
   that leaves the field in view. Viewport queries cannot see this box,
   so slim also restacks the inner two-column bodies from the class. */
.nsr-panel.nsr-panel-slim { width: min(520px, calc(96vw - 90px)); }
.nsr-panel.nsr-panel-wide { width: min(1180px, calc(96vw - 90px)); }
.nsr-panel.nsr-panel-wide.nsr-panel-jobs { width: min(1560px, calc(96vw - 90px)); }
@media (max-height: 640px) {
  .nsr-panel.nsr-panel-slim { width: min(520px, calc(96vw - 54px)); }
  .nsr-panel.nsr-panel-wide { width: min(1180px, calc(96vw - 54px)); }
  .nsr-panel.nsr-panel-wide.nsr-panel-jobs { width: min(1560px, calc(96vw - 54px)); }
}

/* Slim internals — these beat the viewport-gated two-column recipes
   (ns-grid-queue at 980px, fleet-main at 1080px, lmx-split / .nsj at
   1180px) because a slim panel on a wide window would otherwise keep
   those columns and merely cramp them. */
.nsr-panel-slim .ns-grid-queue { grid-template-columns: minmax(0, 1fr); }
.nsr-panel-slim .nsj { grid-template-columns: minmax(0, 1fr); }
.nsr-panel-slim .nsj-actions { grid-template-columns: minmax(0, 1fr); }
.nsr-panel-slim .nsj-table th:nth-child(2),
.nsr-panel-slim .nsj-table td:nth-child(2),
.nsr-panel-slim .nsj-table th:nth-child(4),
.nsr-panel-slim .nsj-table td:nth-child(4) { display: none; }
.nsr-panel-slim .fleet-main { grid-template-columns: minmax(0, 1fr); }
.nsr-panel-slim .fleet-rail { flex-direction: row; flex-wrap: wrap; align-items: center; }
.nsr-panel-slim .fleet-rail .fleet-rail-h { flex-basis: 100%; }
.nsr-panel-slim .fleet-donut { margin: 2px 0; }
.nsr-panel-slim .fleet-cap-legend { flex: 1 1 140px; }
.nsr-panel-slim .fleet-cap-est { border-top: none; padding-top: 0; }
.nsr-panel-slim .fleet-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nsr-panel-slim .fleet-row { grid-template-columns: 4px minmax(0, 160px) minmax(0, 1fr) auto 40px; }
.nsr-panel-slim .fleet-badge,
.nsr-panel-slim .fleet-specs { display: none; }
.nsr-panel-slim .fleet-tip { left: 12px; }
.nsr-panel-slim .lmx-split,
.nsr-panel-slim .lmx-split.is-folded { grid-template-columns: minmax(0, 1fr); }
/* Compact ledger is short enough to pin; static was only needed when
   the 232px column plus the study rows filled the panel before the
   lane board began. */
.nsr-panel-slim .lmx-rail {
  position: sticky;
  top: 0;
  z-index: 2;
  max-height: none;
  overflow: visible;
}
.nsr-panel-slim .grid-2,
.nsr-panel-slim .grid-3 { grid-template-columns: minmax(0, 1fr); }
.nsr-panel-slim .rt-tab-hero { flex-direction: column; align-items: flex-start; gap: 10px; }
.nsr-panel-slim .rt-tab-hero-l p { display: none; }
.nsr-panel-slim .rt-tab-hero-r { flex-wrap: wrap; }
.nsr-panel-slim .ns-stat-row { grid-template-columns: 1fr; }
.nsr-panel-slim .ns-stat-row > div + div { border-left: none; border-top: 1px solid var(--rt-border); }
/* .ns-wrap caps the composer at 1120px on purpose. The board is a
   two-column layout inside an already-bounded panel and wants all of
   it. */
.ns-wrap-board { max-width: none; }

.nsj {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
  gap: 16px;
  align-items: stretch;
}
/* The panel is nearly as wide as the viewport, so a viewport query is
   an honest proxy for it here — unlike the composer's inner grid, which
   is why that one is not gated this way. */
@media (max-width: 1180px) {
  .nsj { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the filter bar ------------------------------------------------ */
.nsj-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nsj-search {
  flex: 1 1 200px;
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px;
  background: var(--rt-bg-sunk);
  border: 1px solid var(--rt-border); border-radius: 3px;
}
.nsj-search:focus-within { border-color: var(--rt-fg-3); }
.nsj-search-glyph { color: var(--rt-fg-3); font-size: 13px; line-height: 1; }
.nsj-search input {
  flex: 1; min-width: 0;
  background: none; border: none; color: var(--rt-fg);
  font-family: var(--mono); font-size: 11px;
}
.nsj-search input:focus { outline: none; }
.nsj-select {
  height: 32px; padding: 0 8px;
  background: var(--rt-bg-sunk); color: var(--rt-fg-2);
  border: 1px solid var(--rt-border); border-radius: 3px;
  font-family: var(--mono); font-size: 10px;
}
.nsj-select:focus { outline: none; border-color: var(--rt-fg-3); }
.nsj-trig-btn {
  height: 32px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--rt-bg-alt); color: var(--rt-fg-3);
  border: 1px solid var(--rt-border); border-radius: 3px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  cursor: pointer; white-space: nowrap;
}
.nsj-trig-btn:hover { color: var(--rt-fg); }
.nsj-trig-btn.on { background: var(--rt-bg-sunk); border-color: var(--rt-border-strong); color: var(--rt-fg); }
.nsj-trig-btn:disabled { opacity: 0.4; cursor: default; }
.nsj-xfer { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

/* ---- the list ------------------------------------------------------ */
.nsj-table { table-layout: fixed; }
.nsj-table th { padding: 6px 10px 8px; }
.nsj-table th:first-child, .nsj-table td:first-child { padding-left: 10px; }
.nsj-table td { padding: 9px 10px; vertical-align: top; }
.nsj-table th:nth-child(2), .nsj-table td:nth-child(2) { width: 118px; }
.nsj-table th:nth-child(3), .nsj-table td:nth-child(3) { width: 104px; }
.nsj-table th:nth-child(4), .nsj-table td:nth-child(4) { width: 84px; }
.nsj-table th:nth-child(5), .nsj-table td:nth-child(5) { width: 68px; }
.nsj-table th:nth-child(6), .nsj-table td:nth-child(6) { width: 70px; }
.nsj-num { text-align: right; }

.nsj-row { cursor: pointer; }
.nsj-row > td { transition: background 120ms ease; }
.nsj-row:hover > td { background: var(--rt-bg-alt); }
.nsj-row.on > td { background: color-mix(in srgb, var(--rt-accent) 12%, transparent); }
.nsj-row.on > td:first-child { box-shadow: inset 2px 0 0 var(--rt-accent); }
.nsj-row:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: -2px; }

/* The prompt is how an operator remembers a run, so it is the one cell
   set in the reading face rather than the mono the rest of the row
   uses — and it is clamped, never truncated mid-word by the engine. */
.nsj-prompt-line {
  font-family: var(--font, inherit);
  font-size: 12px; line-height: 1.45; color: var(--rt-fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nsj-row-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.nsj-row-sub .ns-chip { font-size: 8px; padding: 2px 6px; letter-spacing: 0.06em; }
/* One line, ellipsised: the progress sentence is a glance, and a
   two-line wrap under every live row re-introduces the ragged row
   heights the old board was built out of. */
.nsj-row-progress {
  font-family: var(--mono); font-size: 9px; color: var(--rt-fg-3);
  flex: 1 1 120px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nsj-row-bar { margin-top: 6px; }
.nsj-c-id { font-size: 10px; color: var(--rt-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsj-c-judge { font-size: 10px; color: var(--rt-fg-2); }
.nsj-c-result { font-weight: 700; }
.nsj-empty { padding: 26px 4px; }
.nsj-link { font-family: var(--mono); font-size: 10px; color: var(--rt-accent); cursor: pointer; }
.nsj-link:hover { text-decoration: underline; }

/* ---- the pager ----------------------------------------------------- */
/* margin-top:auto pins it to the foot of the card however short the
   page is — a list of two rows must not float its own footer. */
.nsj-pager {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--rt-border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3);
}
.nsj-count-all { opacity: 0.7; }
.nsj-pages { display: inline-flex; gap: 4px; }
.nsj-page {
  min-width: 26px; height: 26px; padding: 0 6px;
  background: none; border: 1px solid transparent; border-radius: 3px;
  color: var(--rt-fg-3); font-family: var(--mono); font-size: 10px; cursor: pointer;
}
.nsj-page:hover:not(:disabled) { color: var(--rt-fg); border-color: var(--rt-border); }
.nsj-page.on { background: var(--rt-bg-sunk); border-color: var(--rt-border-strong); color: var(--rt-fg); font-weight: 700; }
.nsj-page:disabled { opacity: 0.3; cursor: default; }

/* ---- the inspector -------------------------------------------------- */
.nsj-inspector { align-self: stretch; }
.nsj-insp-title { margin-bottom: 0; }
.nsj-insp-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--rt-bg-alt);
  border: 1px solid var(--rt-border); border-radius: 4px;
}
.nsj-insp-id { font-family: var(--mono); font-size: 10px; color: var(--rt-fg-2); }
.nsj-insp-when { font-family: var(--mono); font-size: 10px; color: var(--rt-fg-3); }
.nsj-insp-open {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 12px;
}
.nsj-insp-export {
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
.nsj-insp-export:disabled { opacity: 0.5; cursor: default; }

.nsj-menu-wrap { position: relative; }
.nsj-kebab {
  padding: 4px 6px; line-height: 1;
  background: none; border: 1px solid transparent; border-radius: 3px;
  color: var(--rt-fg-3); font-size: 15px; cursor: pointer;
}
.nsj-kebab:hover { color: var(--rt-fg); border-color: var(--rt-border); }
/* Click-outside, scoped to the panel: .nsr-panel sets will-change:
   transform, so a fixed child is contained by the panel rather than by
   the viewport. That is the behaviour wanted here — outside the panel,
   the rail's own scrim already closes everything. */
.nsj-menu-back { position: fixed; inset: 0; z-index: 4; }
.nsj-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  min-width: 220px;
  display: flex; flex-direction: column; gap: 1px; padding: 4px;
  background: var(--rt-panel);
  border: 1px solid var(--rt-border-strong); border-radius: 4px;
  box-shadow: var(--rt-shadow);
}
.nsj-menu-left { right: auto; left: 0; }
.nsj-menu-item {
  padding: 8px 10px; text-align: left;
  background: none; border: none; border-radius: 3px; cursor: pointer;
  color: var(--rt-fg-2); font-family: var(--mono); font-size: 10px; line-height: 1.4;
}
.nsj-menu-item:hover { background: var(--rt-bg-alt); color: var(--rt-fg); }
.nsj-menu-item.warn:hover { color: var(--rt-amber); }
.nsj-menu-item.danger { color: var(--rt-coral); }

.nsj-sec { display: flex; flex-direction: column; gap: 8px; }
.nsj-sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--rt-fg-3);
}
.nsj-prompt-box {
  padding: 12px 14px; max-height: 260px; overflow-y: auto;
  background: var(--rt-bg-sunk);
  border: 1px solid var(--rt-border); border-radius: 4px;
  font-family: var(--mono); font-size: 11px; line-height: 1.65; color: var(--rt-fg-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.nsj-trunc { color: var(--rt-fg-3); font-style: italic; }

.nsj-actions { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.nsj-actions .ns-btn { padding: 11px 10px; white-space: nowrap; }
.nsj-split { position: relative; display: flex; min-width: 0; }
.nsj-split > .ns-btn:first-child { flex: 1; min-width: 0; border-radius: 3px 0 0 3px; }
.nsj-split > .nsj-caret {
  flex: none; width: 32px; padding: 0;
  border-radius: 0 3px 3px 0;
  border-left: 1px solid rgba(0, 0, 0, 0.22);
}
/* The one green in the cockpit's button vocabulary: rerun is the verb
   this panel exists to make one click away. */
.nsj-btn-go { background: var(--rt-green); border-color: transparent; color: #06231B; }
.nsj-btn-go:hover { background: var(--rt-green); border-color: transparent; color: #06231B; opacity: 0.9; }

.nsj-facts { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rt-border); }
.nsj-facts > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--rt-border);
}
.nsj-facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--rt-fg-3); }
.nsj-facts dd { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--rt-fg); text-align: right; }
.nsj-facts dd.nsj-makes-live { color: var(--rt-amber); }
.nsj-cap { text-transform: capitalize; }

.nsj-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--rt-bg-alt);
  border: 1px solid var(--rt-border); border-radius: 4px; overflow: hidden;
}
.nsj-stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline; column-gap: 6px;
  padding: 12px 10px; font-family: var(--mono);
}
.nsj-stat + .nsj-stat { border-left: 1px solid var(--rt-border); }
.nsj-stat-k { grid-column: 1 / -1; font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rt-fg-3); }
.nsj-stat-v { grid-column: 1; margin-top: 6px; font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--rt-fg); }
.nsj-stat-s { grid-column: 2; font-size: 9px; color: var(--rt-fg-3); }
.nsj-note { font-size: 11px; }

.nsj-ledger-line { font-family: var(--mono); font-size: 10px; line-height: 1.6; color: var(--rt-fg-3); }
.nsj-ledger { overflow-x: auto; }
.nsj-ledger-table { font-size: 10px; }
.nsj-ledger-table th, .nsj-ledger-table td { padding: 5px 8px 5px 0; white-space: nowrap; }

/* ── Cluster inspector — NS-CLUSTER-PRD-001 §8 (.nsk-, "knot"). One
   block, appended. Reuses .nsf-kv / .nsf-make-* / .nsf-section-label /
   .nsf-subtitle for everything the other inspectors already have; adds
   only what a cluster has that an attempt does not: the member list,
   the gather row + plan line, the curator block, the code file plan
   (Addendum A §3.2) and the compose shot library (Addendum B §8).
   `.nsc-` is judges.css — never here. */
.nsf-stage:focus { outline: none; }

/* Library additions from the DGX edition (folio / speed passes): the
   later flag colours, the windowed grid pages and the inspector's
   Save-as type picker. */
.nsl-flag-runs { background: rgba(95,191,168,0.16); color: var(--nsf-supported, #5fbfa8); }
.nsl-flag-unchecked { background: rgba(255,255,255,0.06); color: var(--rt-fg-3, #9a9a9a); }
.nsl-flag-ocr { color: var(--nsf-supported, #5fbfa8); border-color: rgba(95, 191, 168, 0.4); }
.nsl-card-cluster-row { padding: 0 12px 8px; font-size: 12px; }
.nsl-cluster-empty { opacity: .6; font-size: 12px; }
.nsl-card-cluster:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* UI responsiveness review §8 (2026-09-07): the windowed Library grid.
   Each page is its own .nsl-grid so columns line up across pages; the
   row gap between consecutive pages is the grid gap; a ghost page is a
   measured-height box the observers watch and the engine never lays
   out inside. */
.nsl-page + .nsl-page { margin-top: 12px; }
.nsl-page-ghost { contain: strict; display: block; }
/* Keep Save As usable when the preview toolbar wraps on small windows. */
.nsa-save-type { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nsa-save-extension { width: 5em; padding: 4px 6px; color: inherit; background: #111827; border: 1px solid #ffffff40; border-radius: 4px; }


/* =====================================================================
   Cluster synthesis inspector + chat, and the Lanes desk inside the rail panel - ported from the DGX edition 1.4.3, 2026-10-13.
   ===================================================================== */
/* ── MAKE — the Artifact Engines inspector tab (NS-AE-PRD-001 §6) ──── */
.nsf-make-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; border: 1px solid var(--nsf-glass-border);
  border-radius: 6px; margin-bottom: 6px; cursor: pointer;
  background: var(--nsf-panel-2);
}
.nsf-make-row.chosen { border-color: var(--nsf-supported); }
.nsf-make-row.unavailable { opacity: .85; cursor: default; }
.nsf-make-row.unavailable .nsf-make-label { opacity: .7; }
.nsf-make-row input { accent-color: var(--nsf-supported); }
.nsf-make-pick { display: flex; align-items: baseline; gap: 8px; min-width: 0; cursor: pointer; }
.nsf-make-label { color: var(--nsf-bone); font-size: 13px; }
.nsf-make-sub { color: var(--nsf-haze); font-family: var(--nsf-mono), monospace; font-size: 11px; margin-left: auto; text-align: right; flex: 1 1 12em; }
.nsf-make-enable {
  flex: 0 0 auto;
  background: rgba(95, 191, 168, .14); color: var(--nsf-supported);
  border: 1px solid var(--nsf-supported); border-radius: 6px;
  padding: 3px 10px; font-family: var(--nsf-mono), monospace; font-size: 11px; cursor: pointer;
}
.nsf-make-enable:disabled { opacity: .6; cursor: default; }
.nsf-make-unlock-err {
  flex: 1 0 100%;
  color: var(--nsf-contradicted); font-size: 11px;
}
.nsf-make-instruction {
  width: 100%; resize: vertical; background: var(--nsf-panel-2);
  color: var(--nsf-bone); border: 1px solid var(--nsf-glass-border);
  border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12.5px;
}
.nsf-make-controls { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.nsf-make-when {
  background: var(--nsf-panel-2); color: var(--nsf-haze);
  border: 1px solid var(--nsf-glass-border); border-radius: 6px;
  padding: 3px 10px; font-family: var(--nsf-mono), monospace; font-size: 11px; cursor: pointer;
}
.nsf-make-when.on { color: var(--nsf-bone); border-color: var(--nsf-supported); }
.nsf-make-when:disabled { opacity: .5; cursor: default; }
.nsf-make-reach { margin-left: auto; color: var(--nsf-haze); font-family: var(--nsf-mono), monospace; font-size: 11px; }
.nsf-make-go {
  width: 100%; padding: 7px 0; border-radius: 6px; cursor: pointer;
  background: rgba(95, 191, 168, .14); color: var(--nsf-supported);
  border: 1px solid var(--nsf-supported); font-size: 13px;
}
.nsf-make-go:disabled { opacity: .5; cursor: default; }
/* The option list scrolls inside the tab; the ⚗ make button sticks to the
   bottom of the inspector's scrollport, so it is never below the fold. */
.nsf-make-options { display: flex; flex-direction: column; max-height: min(42vh, 440px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 2px; }
.nsf-make-options > .nsf-make-row { flex: none; }
.nsf-make-submit { position: sticky; bottom: 0; z-index: 2; padding: 8px 0 6px; background: rgba(7, 10, 20, 0.94); }
.nsf-make-result { margin-top: 8px; color: var(--nsf-supported); font-size: 12px; }
.nsf-make-result .mono { font-family: var(--nsf-mono), monospace; }
.nsf-make-err { margin-top: 8px; color: var(--nsf-contradicted); font-size: 12px; }
.nsf-make-err.ok { color: var(--nsf-ink-dim, var(--rt-dim, #8a94a6)); }
/* R20 §7 — the per-attempt make-unit list, rendered from ledger fields
   only (the v1.19 renderer obligation). */
.nsf-make-unit {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10.5px;
  color: var(--nsf-bone);
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.nsf-make-unit-status { color: var(--nsf-haze, #8E9DBE); }
.nsf-make-unit-status.done { color: var(--nsf-supported); }
.nsf-make-unit-status.failed, .nsf-make-unit-status.skipped { color: var(--nsf-contradicted); }
.nsf-make-unit-status.running { color: var(--nsf-amber); }
.nsf-make-unit-status.queued { color: var(--nsf-amber); }
.nsf-make-q-row { margin: 0; }
.nsf-make-q-row.mine .nsf-make-unit { color: var(--nsf-bone); }
.nsf-make-q-id {
  appearance: none; background: none; border: 0; padding: 0;
  color: inherit; font: inherit; cursor: pointer; text-align: left;
}
.nsf-make-q-id:hover { text-decoration: underline; }
.nsf-make-q-verbs {
  display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center;
  flex-shrink: 0;
}
.nsf-make-q-edit { margin: 4px 0 8px; }
.nsf-make-q-edit-row { margin-top: 6px; }
.nsf-make-q-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.nsf-make-q-toolbar .nsf-section-label {
  border-bottom: none;
  padding-bottom: 0;
  flex: 1;
}
/* ── Refine — R21 (NS-R21-PRD-001 §6.2). The panel is mounted by three
   hosts (MAKE tab, Library lightbox, artifact section) and styled once,
   so the surfaces cannot drift. Guided-flow styling, minimal; it reuses
   .nsf-make-* for the controls it shares with MAKE and adds only what
   refine has that make does not: the source line with its verdict, the
   pre-submit plan, the chain, and the element picker. */
.nsf-make-verbs { display: flex; gap: 6px; margin-bottom: 10px; }
.nsr-panel-body .page-tight.lmd { padding: 0; }
/* The desk's sidebar is position: sticky, and its scrollport in here is
   .nsr-panel-body, not .main > .scroll. Its max-height was written
   against the full window; the panel gives up 56px of chrome, 28px of
   status bar and its own 44px head, so the sidebar would overhang the
   panel and scroll its own machine card out of reach. */
.nsr-panel-body .lmd-side { max-height: calc(100vh - 128px); }
.nsr-panel-body .lmd-slim .lmd-side { max-height: none; }
/* The Lanes desk stacks itself from .lmd-slim (EngineView is told the
   width); this is the belt to that brace for a stale class. */
.nsr-panel-slim .lmd { grid-template-columns: minmax(0, 1fr); }
.nsk-crumb {
  appearance: none; background: none; border: 0; padding: 0 8px 0 0;
  color: var(--nsf-bone, #E8E4DA); font: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer; opacity: 0.8;
}
.nsk-crumb:hover { opacity: 1; text-decoration: underline; }
.nsk-filter { display: flex; flex-direction: column; gap: 4px; }
.nsk-query {
  width: 100%; min-width: 0; flex: 1 1 10em;
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--nsf-bone, #E8E4DA); font: 11px var(--nsf-mono, monospace);
  padding: 5px 8px; border-radius: 3px;
}
.nsk-query:focus { outline: none; border-color: rgba(232, 228, 218, 0.55); }
.nsk-preview-note { font: 9px var(--nsf-mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nsf-haze, #8E9DBE); }
.nsk-members { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; }
.nsk-member {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; border-radius: 3px;
  padding: 5px 8px; color: rgba(255, 255, 255, 0.75); font: 10px/1.35 var(--nsf-mono, monospace); cursor: pointer;
  transition: opacity 120ms ease, background 120ms ease;
}
.nsk-member:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.nsk-member.centroid { border-color: rgba(255, 255, 255, 0.22); }
.nsk-member.dim { opacity: 0.28; }
.nsk-member.synth { color: var(--nsf-bone, #E8E4DA); background: rgba(232, 228, 218, 0.08); border-color: rgba(232, 228, 218, 0.28); }
.nsk-member-head { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsk-member-summary { color: var(--nsf-haze, #8E9DBE); font-family: var(--nsf-sans); font-size: 11px; line-height: 1.4; }
.nsk-star { color: var(--nsf-bone, #E8E4DA); margin-right: 4px; }
.nsk-footer {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font: 10px var(--nsf-mono, monospace); color: var(--nsf-haze, #8E9DBE);
  border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 6px;
}
.nsk-link {
  appearance: none; background: none; border: 0; padding: 0;
  color: var(--nsf-bone, #E8E4DA); font: 10px var(--nsf-mono, monospace); letter-spacing: 0.04em;
  text-decoration: underline; cursor: pointer;
}
.nsk-link:hover { color: #fff; }
.nsk-link:disabled { opacity: 0.4; cursor: default; text-decoration: none; }
.nsk-curator-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 10px var(--nsf-mono, monospace); }
.nsk-curator { color: var(--nsf-bone, #E8E4DA); }
.nsk-curator.unbound { color: var(--nsf-split, #E0B450); }
.nsk-gather { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nsk-chip { font-size: 10px; }
.nsk-plan {
  font: 10px/1.45 var(--nsf-mono, monospace); color: var(--nsf-bone, #E8E4DA);
  background: rgba(232, 228, 218, 0.06); border-left: 2px solid rgba(232, 228, 218, 0.4);
  padding: 5px 8px; border-radius: 0 3px 3px 0;
}
.nsk-plan.bad { color: var(--nsf-contradicted, #D4576B); border-left-color: var(--nsf-contradicted, #D4576B); }
.nsk-plan.nsk-projection { color: var(--nsf-haze, #8E9DBE); }
.nsk-twohop { font: 9px var(--nsf-mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nsf-haze, #8E9DBE); }
.nsk-label { font: 9px var(--nsf-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--nsf-haze, #8E9DBE); margin-right: 4px; }
/* Addendum A §3.2 — the file plan: one row per bucket. */
.nsk-files { display: flex; flex-direction: column; gap: 2px; }
.nsk-file {
  display: grid; grid-template-columns: auto minmax(6em, 1fr) auto auto; gap: 8px; align-items: baseline;
  padding: 4px 8px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 3px;
  font: 10px var(--nsf-mono, monospace); color: rgba(255, 255, 255, 0.65); cursor: pointer;
}
.nsk-file.on { color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.nsk-file input { accent-color: var(--nsf-supported); }
.nsk-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsk-file-meta { color: var(--nsf-haze, #8E9DBE); white-space: nowrap; }
.nsk-file-action { white-space: nowrap; }
.nsk-file-action.merge { color: var(--nsf-supported, #5FBFA8); }
.nsk-file-action.keep { color: var(--nsf-bone, #E8E4DA); }
.nsk-file-action.skip { color: var(--nsf-haze, #8E9DBE); }
.nsk-verify-as, .nsk-compose-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Addendum B §8 — the shot library with poster thumbs. */
.nsk-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; max-height: 40vh; overflow-y: auto; }
.nsk-shot {
  display: flex; flex-direction: column; gap: 4px; position: relative;
  padding: 4px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px;
  background: rgba(255, 255, 255, 0.03); cursor: pointer; opacity: 0.55;
}
.nsk-shot.on { opacity: 1; border-color: rgba(232, 228, 218, 0.35); }
.nsk-shot input { position: absolute; top: 6px; left: 6px; z-index: 1; accent-color: var(--nsf-supported); }
.nsk-shot-poster { display: block; aspect-ratio: 16 / 9; background: rgba(0, 0, 0, 0.4); border-radius: 3px; overflow: hidden; }
.nsk-shot-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Seam 9: a clip's poster is the clip itself, parked on its first frame */
.nsk-shot video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; background: #000; }
.nsk-shot-blank { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255, 255, 255, 0.3); font-size: 18px; }
.nsk-shot-meta { display: flex; flex-direction: column; font: 9px/1.35 var(--nsf-mono, monospace); color: rgba(255, 255, 255, 0.7); }
.nsk-shot-prompt { color: var(--nsf-haze, #8E9DBE); font-family: var(--nsf-sans); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsk-gate.pass { color: var(--nsf-supported, #5FBFA8); }
.nsk-gate.fail { color: var(--nsf-contradicted, #D4576B); }
/* outputs */
.nsk-synth-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 8px; border: 1px solid rgba(232, 228, 218, 0.18); border-radius: 3px;
  background: rgba(232, 228, 218, 0.05); font: 10px var(--nsf-mono, monospace);
}
.nsk-synth-row.best { border-color: rgba(232, 228, 218, 0.5); }
.nsk-synth-open {
  appearance: none; background: none; border: 0; padding: 0; color: var(--nsf-bone, #E8E4DA);
  font: inherit; cursor: pointer; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.nsk-synth-open:hover { text-decoration: underline; }
/* Seam 10 — the ledger as a tree: compose scenes nest under their parent;
   a code synthesis lists its landed buckets inline. */
.nsk-child {
  margin-left: 14px; padding: 2px 8px; border-left: 1px solid rgba(232, 228, 218, 0.22);
  font: 10px var(--nsf-mono, monospace); color: var(--nsf-haze, #8E9DBE); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nsk-child.running { color: var(--nsf-bone, #E8E4DA); }
.nsk-child.failed { color: var(--nsf-contradicted, #D4576B); }
.nsk-buckets { margin-left: 14px; padding: 1px 8px; font: 10px var(--nsf-mono, monospace); color: var(--nsf-haze, #8E9DBE); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsk-bucket.pass { color: var(--nsf-supported, #5FBFA8); }
.nsk-bucket.fail { color: var(--nsf-contradicted, #D4576B); }
.nsk-bucket.keep { color: var(--nsf-bone, #E8E4DA); }
.nsk-bucket.not_run { color: var(--nsf-haze, #8E9DBE); }
/* info — the curator block */
.nsk-curator-block { display: flex; flex-direction: column; gap: 6px; }
.nsk-picker {
  width: 100%; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--nsf-bone, #E8E4DA); font: 11px var(--nsf-mono, monospace); padding: 5px 6px; border-radius: 3px;
}
.nsk-picker optgroup { color: var(--nsf-haze, #8E9DBE); }
.nsk-picker option { color: var(--nsf-bone, #E8E4DA); background: #0b0f1c; }
.nsk-picker option:disabled { color: rgba(255, 255, 255, 0.35); }
.nsk-note { font: 10px/1.45 var(--nsf-mono, monospace); color: var(--nsf-haze, #8E9DBE); }
.nsk-note.nsk-detail { color: var(--nsf-bone, #E8E4DA); }
.nsk-note.nsk-ap-line { color: var(--nsf-bone, #E8E4DA); }
.nsk-curator-acts { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
/* NS-CURATOR-SELECT-001 — the curator-models modes and the Auto summary */
.nsk-curator-modes { display: flex; gap: 4px; flex-wrap: wrap; }
.nsk-curator-mode {
  font: 10px var(--nsf-mono, monospace); letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.25); color: var(--nsf-haze, #8E9DBE);
}
.nsk-curator-mode:hover { color: var(--nsf-bone, #E8E4DA); }
.nsk-curator-mode.on { color: var(--nsf-bone, #E8E4DA); border-color: var(--nsf-supported, #5FBFA8); background: rgba(95, 191, 168, 0.12); }
.nsk-curator-mode:disabled { opacity: 0.5; cursor: default; }
.nsk-curator-summary { display: flex; flex-direction: column; gap: 3px; padding: 5px 8px; border-left: 2px solid var(--nsf-supported, #5FBFA8); }
.nsk-curator-assign { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* 2026-09-21 polish: the modes, the auto deal and the model list are all
   drawn, top to bottom - the roster explanation folds behind a summary. */
.nsk-curator-modehint { font-family: var(--nsf-sans); font-size: 11px; line-height: 1.45; }
.nsk-curator-pick { display: flex; flex-direction: column; gap: 4px; }
.nsk-curator-help summary { cursor: pointer; font: 10px var(--nsf-mono, monospace); letter-spacing: 0.04em; color: var(--nsf-haze, #8E9DBE); text-decoration: underline dotted; }
.nsk-curator-help summary:hover { color: var(--nsf-bone, #E8E4DA); }
.nsk-curator-help .nsk-note { margin-top: 4px; font-family: var(--nsf-sans); font-size: 11px; }
/* the fix card — what adopting a pick means, and the button that does it */
.nsk-fix {
  display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border-radius: 3px;
  border: 1px solid rgba(224, 180, 80, 0.35); background: rgba(224, 180, 80, 0.06);
}
.nsk-fix-act { align-self: flex-start; }
.nsk-picker-compact { margin-top: 4px; }
.nsk-check { display: inline-flex; align-items: center; gap: 6px; font: 10px var(--nsf-mono, monospace); color: var(--nsf-haze, #8E9DBE); cursor: pointer; }
.nsk-check input { accent-color: var(--nsf-supported); }
.nsk-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.nsk-term {
  padding: 1px 6px; border-radius: 999px; border: 1px solid rgba(232, 228, 218, 0.25);
  color: var(--nsf-bone, #E8E4DA); font: 9px var(--nsf-mono, monospace); word-break: normal;
}
.nsk-ap-nums { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 10px var(--nsf-mono, monospace); color: var(--nsf-haze, #8E9DBE); }
.nsk-num { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px; }
.nsk-num input {
  width: 56px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--nsf-bone, #E8E4DA); font: 11px var(--nsf-mono, monospace); padding: 3px 6px; border-radius: 3px;
}
/* Addendum C — the insights tab (NS-CLS-BUILD-001 Phase 2). Four
   .nsk-insight sections: a one-line head with a provenance chip, chips
   with counts, ten-bin histograms, the packed-context reader. Nothing
   animates; nothing is drawn for an empty plane. Still inside the one
   appended .nsk- block. */
.nsk-insights { display: flex; flex-direction: column; gap: 14px; }
.nsk-insight { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.nsk-insight:first-child { border-top: 0; padding-top: 0; }
.nsk-insight-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 2px; }
.nsk-prov { font: 9px var(--nsf-mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nsf-haze, #8E9DBE); white-space: nowrap; }
/* One labeled row per plane: a fixed-width caption column keeps the
   chip rows and the stat lines on one left edge, so the section scans
   top-to-bottom instead of reading as one wall. */
.nsk-igroup { display: grid; grid-template-columns: 64px 1fr; gap: 2px 8px; align-items: start; }
.nsk-igroup-label { font: 9px var(--nsf-mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); padding-top: 3px; white-space: nowrap; }
.nsk-igroup .nsk-chips { justify-content: flex-start; }
.nsk-ilabel { display: inline-block; min-width: 64px; margin-right: 8px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); }
.nsk-insight-lede { color: var(--nsf-bone, #E8E4DA); font-size: 12px; }
.nsk-itop { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nsk-ichips { display: flex; flex-wrap: wrap; gap: 4px; }
.nsk-ichip { display: inline-flex; gap: 5px; align-items: baseline; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 1px 7px; font: 10px var(--nsf-mono, monospace); color: var(--nsf-haze, #8E9DBE); }
.nsk-ichip b { color: var(--nsf-bone, #E8E4DA); font-weight: 600; }
.nsk-ichip-more { background: none; border-style: dashed; color: var(--nsf-bone, #E8E4DA); cursor: pointer; }
.nsk-ichip-more:hover { border-color: rgba(255, 255, 255, 0.4); }
.nsk-term-entity { border-style: dashed; }
.nsk-insight-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.nsk-hist { display: inline-flex; align-items: flex-end; gap: 2px; height: 28px; min-width: 60px; }
.nsk-hist span { display: inline-block; width: 6px; min-height: 1px; background: var(--nsf-bone, #E8E4DA); opacity: 0.55; border-radius: 1px 1px 0 0; }
.nsk-verdict { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
.nsk-verdict-supported { color: var(--nsf-supported, #5FBFA8); }
.nsk-verdict-split { color: var(--nsf-split, #E0B450); }
.nsk-verdict-contradicted { color: var(--nsf-contradicted, #D4576B); }
.nsk-coverage { border-top: 1px dotted rgba(255, 255, 255, 0.12); padding-top: 4px; }
.nsk-context-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.nsk-context { max-height: 40vh; overflow: auto; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 3px; padding: 6px 8px; }
.nsk-context-member summary { cursor: pointer; font: 10px var(--nsf-mono, monospace); color: var(--nsf-bone, #E8E4DA); }
.nsk-context-member pre { white-space: pre-wrap; font: 10px/1.45 var(--nsf-mono, monospace); color: var(--nsf-haze, #8E9DBE); margin: 4px 0 8px; }
.nsk-tools { border-collapse: collapse; font: 10px var(--nsf-mono, monospace); color: var(--nsf-haze, #8E9DBE); }
.nsk-tools td { padding: 1px 10px 1px 0; white-space: nowrap; }
.nsk-tools td:first-child { color: var(--nsf-bone, #E8E4DA); }
/* 2026-10-03 — insights AT A GLANCE (NskGlance): tiles, the score map,
   the lane mix, theme bars, the path. Static (no animation); every
   picture has a title/aria line saying the same number in words. */
.nsk-glance { display: flex; flex-direction: column; gap: 9px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 6px; background: linear-gradient(180deg, rgba(142, 157, 190, 0.07), rgba(142, 157, 190, 0.02)); }
.nsk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.nsk-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.07); }
.nsk-tile-ring { flex-direction: row; align-items: center; gap: 7px; }
.nsk-tile-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nsk-tile-num { font: 600 18px/1.05 var(--nsf-mono, monospace); color: var(--nsf-bone, #E8E4DA); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsk-tile-num-sm { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.nsk-tile-cap { font: 9px var(--nsf-mono, monospace); color: var(--nsf-haze, #8E9DBE); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsk-ev-supported .nsk-tile-num { color: var(--nsf-supported, #5FBFA8); }
.nsk-ev-split .nsk-tile-num { color: var(--nsf-split, #E0B450); }
.nsk-ev-contradicted .nsk-tile-num { color: var(--nsf-contradicted, #D4576B); }
.nsk-ev-supported { border-color: rgba(95, 191, 168, 0.35); }
.nsk-ev-split { border-color: rgba(224, 180, 80, 0.35); }
.nsk-ev-contradicted { border-color: rgba(212, 87, 107, 0.35); }
.nsk-ring { flex: none; }
.nsk-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 4; }
.nsk-ring-fill { fill: none; stroke: var(--nsf-supported, #5FBFA8); stroke-width: 4; stroke-linecap: round; }
.nsk-glance-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; min-width: 0; }
.nsk-glance-cap { font: 9px var(--nsf-mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); white-space: nowrap; }
.nsk-scoremap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nsk-scoremap-svg { width: 100%; height: auto; max-height: 76px; overflow: visible; }
.nsk-axis { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
.nsk-axis-label { fill: rgba(255, 255, 255, 0.38); font: 8px var(--nsf-mono, monospace); }
.nsk-mean-line { stroke: var(--nsf-haze, #8E9DBE); stroke-width: 1; stroke-dasharray: 2 3; }
.nsk-dot, .nsk-synth-dot { cursor: pointer; }
.nsk-dot-core { stroke: rgba(0, 0, 0, 0.6); stroke-width: 0.8; }
.nsk-dot:hover .nsk-dot-core { stroke: var(--nsf-bone, #E8E4DA); stroke-width: 1.4; }
.nsk-dot-centroid { stroke: var(--nsf-bone, #E8E4DA); stroke-width: 1.6; }
.nsk-dot-best { fill: none; stroke: var(--nsf-bone, #E8E4DA); stroke-width: 1; stroke-dasharray: 2 1.5; }
.nsk-synth-dot { fill: var(--nsf-bone, #E8E4DA); opacity: 0.9; }
.nsk-synth-dot:hover { opacity: 1; stroke: var(--nsf-supported, #5FBFA8); }
.nsk-unscored { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nsk-unscored-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1.5px solid var(--nsf-haze, #8E9DBE); background: transparent; cursor: pointer; }
.nsk-unscored-dot:hover { background: rgba(255, 255, 255, 0.2); }
.nsk-lanemix { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nsk-lanebar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; gap: 1px; background: rgba(0, 0, 0, 0.3); }
.nsk-lanebar-seg { display: block; min-width: 3px; flex-basis: 0; }
.nsk-lanelegend { display: flex; flex-wrap: wrap; gap: 3px 10px; font: 9px var(--nsf-mono, monospace); color: var(--nsf-haze, #8E9DBE); }
.nsk-lanekey { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nsk-lanekey i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; }
.nsk-lanekey em { font-style: normal; color: var(--nsf-bone, #E8E4DA); }
.nsk-themebars { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nsk-themebar { display: grid; grid-template-columns: minmax(0, 92px) 1fr 22px; gap: 6px; align-items: center; font: 9px var(--nsf-mono, monospace); }
.nsk-themebar-name { color: var(--nsf-bone, #E8E4DA); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsk-themebar-track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.nsk-themebar-track span { display: block; height: 100%; background: var(--nsf-haze, #8E9DBE); border-radius: 3px; }
.nsk-themebar-n { color: var(--nsf-haze, #8E9DBE); text-align: right; }
.nsk-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
/* the inspector widens → one row of four (a container query: the field, not the window, sets it) */
.nsk-glance { container-type: inline-size; }
@container (min-width: 520px) { .nsk-tiles, .nsk-path { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nsk-path-step { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 5px 6px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.08); min-width: 0; font: 9px var(--nsf-mono, monospace); color: var(--nsf-haze, #8E9DBE); }
.nsk-path-step.done { border-color: rgba(95, 191, 168, 0.35); }
.nsk-path-step.done .nsk-path-dot { color: var(--nsf-supported, #5FBFA8); }
.nsk-path-step.part .nsk-path-dot { color: var(--nsf-split, #E0B450); }
.nsk-path-step.next { border-color: rgba(242, 166, 90, 0.55); background: rgba(242, 166, 90, 0.06); }
.nsk-path-step.next .nsk-path-dot { color: var(--nsf-amber, #F2A65A); }
.nsk-path-dot { font-size: 11px; line-height: 1; }
.nsk-path-label { color: var(--nsf-bone, #E8E4DA); text-transform: uppercase; letter-spacing: 0.06em; }
.nsk-path-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsk-path-go { align-self: flex-start; font-size: 9px; padding: 0; }
.nsr-lede, .nsk-insight-lede { line-height: 1.65; overflow-wrap: anywhere; margin: 10px 0; }
/* Cluster workspace: the same field-sized canvas as artifact previews.
   Inspector stays interactive; on narrow screens the workspace fills the stage. */
.nsf-inspector-body:has(>.nsf-inspector-pane[aria-label="synth"]:not([hidden])>.nsk-chat-anchor){min-height:0;overflow:hidden;padding:6px;gap:8px}
.nsf-inspector-pane[aria-label="synth"]:has(>.nsk-chat-anchor){flex:1;min-height:0}
.nsk-chat-anchor{display:flex;flex:1;min-height:0}
.nsk-chat-shell{--chat-line:#ffffff17;--chat-muted:#9aa7bd;--chat-accent:#a5dbc9;--chat-width:1400px;--chat-gutter:24px;display:flex;flex-direction:column;min-width:0;min-height:0;width:100%;color:#eceef3;background:#10131b;font:14px/1.6 var(--nsf-sans);user-select:text;position:relative;border-radius:10px;overflow:hidden}
.nsk-chat-shell.is-expanded{position:absolute;inset:0;z-index:8;width:auto;border-radius:0;border-right:1px solid var(--chat-line)}
.nsk-chat-shell button,.nsk-chat-shell select{font:inherit;color:inherit;background:#ffffff07;border:1px solid var(--chat-line);border-radius:8px;padding:7px 10px;cursor:pointer;line-height:1.4}
.nsk-chat-shell button:hover:not(:disabled){background:#ffffff10;border-color:#ffffff35}
.nsk-chat-shell button:disabled{opacity:.45;cursor:not-allowed}
.nsk-chat-shell :focus-visible{outline:2px solid var(--chat-accent);outline-offset:3px}
.nsk-chat-shell [hidden]{display:none!important}
.nsk-chat-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--chat-gutter);border-bottom:1px solid var(--chat-line);flex:none}
.nsk-chat-header>div{display:flex;align-items:baseline;gap:10px;min-width:0}
.nsk-chat-header>div>span{flex:none;font:9px var(--nsf-mono);letter-spacing:.12em;color:var(--chat-accent)}
.nsk-chat-header h2{min-width:0;font:500 17px/1.4 var(--nsf-sans);letter-spacing:-.02em;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nsk-chat-header>button{flex-shrink:0;font-size:12px}
.nsk-chat-actions{display:flex;gap:4px;padding:4px var(--chat-gutter) 6px;border-bottom:1px solid var(--chat-line);overflow:auto;flex:none;scrollbar-width:thin}
.nsk-chat-actions button{white-space:nowrap;font-size:12px;padding:5px 8px;background:transparent;border-color:transparent}
.nsk-chat-actions button[aria-pressed=true]{background:#a5dbc914;color:#c1efdf;border-color:#a5dbc94d}
.nsk-chat-actions button:last-child{margin-left:auto}
.nsk-chat-context{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:6px var(--chat-gutter);font-size:11px;color:var(--chat-muted);border-bottom:1px solid var(--chat-line);flex:none}
.nsk-chat-context button{font-size:11px;border:0;padding:5px 0;background:none;white-space:nowrap;color:#ccd3e1}
.nsk-chat-context>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nsk-chat-context .nsk-chat-model{max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:4px 8px;border:1px solid #a5dbc940;background:#a5dbc90c;color:#c1efdf}
.nsk-chat-context.needs-model .nsk-chat-model{color:#f0ce94;border-color:#e7c89270;background:#e7c89212}
.nsk-chat-context .nsk-chat-model-required{flex-basis:100%;white-space:normal;color:#e7c892;line-height:1.4}
.nsk-chat-shell>.nsk-chat-blocker{flex:none;padding:6px var(--chat-gutter);margin:0;border-bottom:1px solid var(--chat-line)}
/* Expanded work uses the stage; the mounted inspector returns on Compact/Escape. */
.nsf-stage:has(>.nsk-chat-shell.is-expanded) .nsf-inspector{visibility:hidden;pointer-events:none}
.nsk-chat-body{display:flex;flex:1;min-height:0;position:relative}
.nsk-chat-thread{flex:1;min-width:0;overflow:auto;overscroll-behavior:contain;padding:12px max(var(--chat-gutter),calc((100% - var(--chat-width))/2));scrollbar-width:thin;scrollbar-color:#454f60 transparent}
.nsk-chat-empty{max-width:540px;margin:clamp(12px,5vh,60px) auto;text-align:center}
.nsk-chat-empty>span{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:18px;background:linear-gradient(140deg,#a5dbc922,#bba4ee0b);border:1px solid #a5dbc92b;color:#b9e4d6;font-size:29px}
.nsk-chat-empty h3{font-size:27px;line-height:1.2;font-weight:500;letter-spacing:-.035em;margin:22px 0 12px}
.nsk-chat-empty p{color:var(--chat-muted);font-size:14px;max-width:365px;margin:0 auto 25px}
.nsk-chat-empty>div{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.nsk-chat-empty button{font-size:12px;padding:10px 14px}
.nsk-chat-turn{margin:0 auto 18px;max-width:var(--chat-width)}
.nsk-chat-user{margin:0 0 12px auto;background:#242c39;border:1px solid #ffffff0a;border-radius:16px 16px 4px 16px;padding:9px 12px;max-width:87%;width:fit-content;overflow-wrap:anywhere}
.nsk-chat-user>span{font-size:10px;color:var(--chat-muted)}
.nsk-chat-user p{margin:3px 0 0;white-space:pre-wrap;font-size:13.5px;line-height:1.6}
.nsk-chat-speaker{display:flex;align-items:center;gap:9px;font-size:12.5px;margin-bottom:6px}
.nsk-chat-speaker strong{font-weight:500;text-transform:capitalize}
.nsk-chat-orb{display:grid;place-items:center;width:22px;height:22px;background:#a5dbc915;border:1px solid #a5dbc929;color:var(--chat-accent);border-radius:50%}
.nsk-chat-status{font-size:10px;color:var(--chat-muted);margin-left:auto}
.nsk-chat-status.running{color:#a5dbc9}
.nsk-chat-status.failed{color:#ee9a9f}
.nsk-chat-response{font-size:13.5px;line-height:1.6;overflow-wrap:anywhere;overflow:auto;scrollbar-width:thin}
.nsk-chat-response .nsa-rendered{font-size:inherit;line-height:inherit}
.nsk-chat-response pre{max-width:100%;overflow:auto}
.nsk-chat-response img{max-width:100%}
.nsk-chat-artifacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px;margin-top:8px}
.nsk-chat-artifacts>button{display:flex;align-items:center;gap:8px;text-align:left;padding:9px;background:#1a202c}
.nsk-chat-artifacts>button>span:first-child{font-size:24px;color:#e7eaf0}
.nsk-chat-artifacts>button>span:nth-child(2){min-width:0;flex:1}
.nsk-chat-artifacts strong{display:block;font-size:12px;font-weight:500;overflow-wrap:anywhere}
.nsk-chat-artifacts small{font-size:10px;color:var(--chat-muted)}
.nsk-chat-turn-actions{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0}
.nsk-chat-turn-actions button{font-size:10px;border:0;background:none;color:var(--chat-muted);padding:4px 0}
.nsk-chat-error{color:#efafb2;font-size:12px}
.nsk-chat-read{font-size:12px!important;color:var(--chat-accent)!important;margin-bottom:12px}
.nsk-chat-settings{width:min(350px,85%);flex:none;border-left:1px solid var(--chat-line);padding:12px;background:#151a25;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.nsk-chat-settings-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:13px}
.nsk-chat-settings .nsf-section-label{margin:12px 0 8px}
.nsk-chat-settings .nsf-subtitle{font-size:12px}
.nsk-chat-settings .nsk-gather{flex-wrap:wrap}
.nsk-chat-settings .nsk-query{width:100%;flex-basis:100%}
.nsk-chat-settings .nsf-make-choice{padding:10px}
.nsk-chat-settings .nsk-curator-line{flex-wrap:wrap;font-size:11px}
.nsk-chat-compose{flex:none;margin:0 auto;padding:6px var(--chat-gutter) 8px;width:100%;box-sizing:border-box;max-width:calc(var(--chat-width) + 2 * var(--chat-gutter));position:relative;background:#10131b}
.nsk-chat-compose .ns-scout-wrap{border:1px solid #ffffff29;border-radius:14px;background:#1b2230;box-shadow:0 5px 20px #0002}
.nsk-chat-compose .ns-scout-wrap:focus-within{border-color:#a5dbc977}
.nsk-chat-compose .ns-scout-input{height:56px;min-height:56px;max-height:min(200px,25vh);resize:vertical;width:100%;padding:9px 12px 18px;font:13.5px/1.5 var(--nsf-sans);color:#f0f2f7;border-radius:14px;display:block;box-sizing:border-box}
.nsk-chat-compose .ns-scout-input::placeholder{color:#a2aec2}
.nsk-chat-compose-bar{display:flex;gap:7px;align-items:center;margin-top:6px}
.nsk-chat-compose-bar button,.nsk-chat-compose-bar select{font-size:11px}
.nsk-chat-compose-bar select{background:#202735;min-width:0}
.nsk-chat-compose-bar .nsk-chat-send{margin-left:auto;background:#b0e2d1;color:#10291e;border-color:#b0e2d1;padding:6px 12px;font-weight:600}
.nsk-chat-compose-bar .nsk-chat-send:hover:not(:disabled){background:#c7f4e4}
.nsk-chat-compose-hint{display:flex;justify-content:space-between;gap:10px;color:#8f9cb2;font-size:9px;margin-top:5px}
.nsk-chat-recommend{font-size:10px;color:#b9d3cd;margin-top:10px}
.nsk-chat-recommend>span{color:var(--chat-muted)}
.nsk-chat-recommend button{font-size:10px;padding:2px 6px;margin-left:8px}
.nsk-chat-notice,.nsk-chat-blocker{font-size:12px;color:#e7c892;margin:10px 0 0}
.nsk-chat-blocker button{font-size:11px;padding:2px 7px;margin-left:8px}
.nsk-chat-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:90px;overflow:auto;margin-bottom:10px}
.nsk-chat-chips>span{display:flex;align-items:center;gap:7px;max-width:100%;padding:4px 8px;background:#242f3d;border:1px solid #ffffff1c;border-radius:7px;font-size:11px;overflow-wrap:anywhere}
.nsk-chat-chips>span.is-error{color:#efa0a7}
.nsk-chat-chips button{border:0;background:none;padding:2px}
.nsk-chat-compose .ns-mention-menu{bottom:100%;top:auto;max-height:260px;overflow:auto;background:#1b2332;color:#e6ecf7;z-index:10}
.nsk-chat-picker{position:absolute;inset:14% 8% 15%;z-index:11;display:flex;flex-direction:column;gap:12px;background:#1a2130;border:1px solid #9eafc64d;border-radius:16px;padding:22px;box-shadow:0 20px 80px #000a}
.nsk-chat-picker header{display:flex;justify-content:space-between;align-items:center}
.nsk-chat-picker h3{font-size:18px;margin:0}
.nsk-chat-picker input,.nsk-chat-picker select{padding:10px;border:1px solid #ffffff2a;background:#111722;color:#e6ebf5;min-width:0;border-radius:6px}
.nsk-chat-picker>div{overflow:auto;flex:1}
.nsk-chat-picker>div>button{display:flex;align-items:flex-start;flex-direction:column;text-align:left;gap:4px;width:100%;margin-bottom:8px;overflow-wrap:anywhere}
.nsk-chat-picker small{color:var(--chat-muted);font-size:10px}
.nsk-chat-shell>.nsa-preview-overlay{inset:0;z-index:12}
.nsk-chat-open-state{padding:28px 10px;color:#b5c1d6;font-size:13px}
.nsk-chat-open-state p{line-height:1.7}
.nsk-chat-open-state button{background:#a5dbc916;border:1px solid #a5dbc944;color:#a5dbc9;border-radius:7px;padding:10px}
.nsk-chat-ledger{font-size:11px;margin:20px 0}
.nsk-chat-ledger summary{cursor:pointer;color:var(--chat-muted);margin-bottom:12px}
.nsk-chat-shell.is-inline{--chat-gutter:12px}
.nsk-chat-shell.is-inline .nsk-chat-header{padding:8px 12px}
.nsk-chat-shell.is-inline .nsk-chat-header h2{font-size:15px}
.nsk-chat-shell.is-inline .nsk-chat-actions{padding:4px 6px;flex-wrap:wrap;gap:2px}
.nsk-chat-shell.is-inline .nsk-chat-actions button{padding:5px 7px;font-size:11px}
.nsk-chat-shell.is-inline .nsk-chat-context{padding:5px 12px;gap:5px 8px}
.nsk-chat-shell.is-inline .nsk-chat-thread{padding:10px 12px}
.nsk-chat-shell.is-inline .nsk-chat-empty{margin:12px 0}
.nsk-chat-shell.is-inline .nsk-chat-empty h3{font-size:23px}
.nsk-chat-shell.is-inline .nsk-chat-empty p{font-size:12px}
.nsk-chat-shell.is-inline .nsk-chat-compose{padding:5px 12px 8px}
.nsk-chat-shell.is-inline .nsk-chat-compose-bar{gap:4px;flex-wrap:wrap}
.nsk-chat-shell.is-inline .nsk-chat-compose-bar button{padding:6px 7px}
.nsk-chat-shell.is-inline .nsk-chat-compose-hint{flex-wrap:wrap;gap:1px 8px}
.nsk-chat-shell.is-inline .nsk-chat-settings{position:absolute;inset:0;width:100%;z-index:3;box-sizing:border-box}
.nsk-chat-shell.is-inline .nsk-chat-picker{inset:10px;padding:16px}
@media(max-width:1250px){.nsk-chat-shell.is-expanded .nsk-chat-settings{position:absolute;right:0;top:0;bottom:0;z-index:3;width:min(380px,100%);box-shadow:-15px 0 40px #0008}.nsk-chat-shell.is-expanded .nsk-chat-compose-hint{flex-wrap:wrap}.nsk-chat-shell.is-expanded .nsk-chat-compose-bar{flex-wrap:wrap}}
@media(max-width:900px){.nsk-chat-shell.is-expanded{right:0;z-index:8}.nsk-chat-shell{--chat-gutter:14px}.nsk-chat-header{padding:8px 14px}.nsk-chat-actions{padding:4px 10px}.nsk-chat-thread{padding:10px 14px}.nsk-chat-compose{padding:5px 14px 8px}.nsk-chat-picker{inset:10px}.nsk-chat-compose-hint{flex-wrap:wrap;gap:1px 8px}}
@media(prefers-reduced-motion:reduce){.nsk-chat-shell *{scroll-behavior:auto!important;animation:none!important}}
.nsk-chat-header h2,.nsk-chat-user p,.nsk-chat-empty h3,.nsk-chat-picker h3,.nsk-chat-answer>p{color:#e6ebf4}
.nsk-chat-open-state p{color:#a3b1c8}
.nsk-chat-compose .ns-scout-hud{background:#111b24;border-color:#a5dbc933}
.nsk-chat-response .nsf-md{font:13.5px/1.6 var(--nsf-sans);color:#d7dfed}
.nsk-chat-response .nsf-md :is(h1,h2,h3,h4){color:#e9edf5}
.nsk-chat-response .nsf-md p{color:inherit}
.nsk-chat-response .nsf-md :is(h1,h2,h3,h4,h5,h6){margin:1em 0 .4em}
.nsk-chat-response .nsf-md h1{font-size:calc(1.35rem - .5px)}
.nsk-chat-response .nsf-md h2{font-size:calc(1.2rem - .5px)}
.nsk-chat-response .nsf-md h3{font-size:calc(1.1rem - .5px)}
.nsk-chat-response .nsf-md :is(p,ul,ol,pre,table,blockquote){margin-bottom:.65em}
.nsk-chat-response .nsf-md>:first-child{margin-top:0}
.nsk-chat-response .nsf-md>:last-child{margin-bottom:0}
/* A small entry point, with the full action library one click away. */
.nsk-chat-quick-row{display:flex;gap:6px;align-items:center;margin:0 0 5px;overflow:auto;scrollbar-width:none}
.nsk-chat-quick-row button{font-size:10px;padding:4px 7px;white-space:nowrap;background:none;color:#a5b4ca;border-color:transparent}
.nsk-chat-quick-row button:first-child{color:#bce9da;background:#a5dbc90c;border-color:#a5dbc933;flex-shrink:0}
.nsk-chat-quick-picker{inset:5% 5%;gap:14px}
.nsk-chat-quick-picker header p{font-size:12px;color:#a3b1c8;margin:5px 0 0}
.nsk-chat-quick-picker>nav{display:flex;gap:5px;flex-wrap:wrap}
.nsk-chat-quick-picker>nav button{font-size:11px;padding:6px 12px}
.nsk-chat-quick-picker>nav button[aria-pressed=true]{color:#c8f2e4;background:#a5dbc91c;border-color:#a5dbc960}
.nsk-chat-quick-picker>.nsk-chat-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start;overflow:auto;min-height:0}
.nsk-chat-quick-picker>.nsk-chat-quick-grid>button{margin:0;padding:12px;min-height:76px;justify-content:center;background:#111a27}
.nsk-chat-quick-grid strong{font-size:12px;font-weight:500}
.nsk-chat-quick-grid small{font-size:11px;line-height:1.5}
.nsk-chat-auto-setup{flex:none;border-top:1px solid #ffffff21;padding-top:14px;font-size:12px}
.nsk-chat-auto-setup>div:first-child p{font-size:11px;line-height:1.6;color:#a3b1c8;margin:4px 0 10px;max-width:520px}
.nsk-chat-auto-setup>div:nth-child(2){display:flex;gap:12px;align-items:center;justify-content:space-between}
.nsk-chat-auto-setup label{font-size:11px;color:#b8c5d8;display:flex;gap:8px;align-items:center}
.nsk-chat-auto-setup select{padding:6px}
.nsk-chat-auto-setup>small{display:block;font-size:10px;color:#93a4bc;margin-top:9px}
.nsk-chat-auto-setup button{background:#a5dbc917;color:#c2e9dd;border-color:#a5dbc94a}
.nsk-chat-continuing{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;margin-bottom:10px;border:1px solid #a5dbc942;border-radius:10px;background:#a5dbc90d;font-size:11px;color:#bcdbce}
.nsk-chat-continuing strong{font-weight:500}
.nsk-chat-continuing button{font-size:11px}
.nsk-chat-shell.is-inline .nsk-chat-quick-picker{inset:5px;padding:14px}
.nsk-chat-shell.is-inline .nsk-chat-quick-picker header h3{font-size:17px}
.nsk-chat-shell.is-inline .nsk-chat-quick-grid{grid-template-columns:1fr}
.nsk-chat-shell.is-inline .nsk-chat-auto-setup>div:nth-child(2){gap:6px;flex-wrap:wrap}
@media(max-width:580px){.nsk-chat-quick-picker{inset:8px;padding:16px}.nsk-chat-quick-picker>.nsk-chat-quick-grid{grid-template-columns:1fr}.nsk-chat-auto-setup>div:nth-child(2){flex-wrap:wrap}.nsk-chat-quick-picker h3{font-size:18px}}
.nsk-chat-shell{color-scheme:dark}
.nsk-chat-quick-grid,.nsk-chat-settings,.nsk-chat-picker>div{scrollbar-width:thin;scrollbar-color:#46566a transparent}
.nsf-inspector :is(button, a, input, select, textarea, summary):focus-visible,
.nsk-chat-shell :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid #a5dbc9; outline-offset: 3px;
}
.nsf-inspector :is(.nsa-act-btn, .nsf-make-when, .nsf-lane-model-btn, .nsk-link, .nsk-curator-mode) {
  min-height: 36px; padding: 8px 11px; border-radius: 7px;
  font-size: 12px; line-height: 1.35; text-decoration: none;
}
.nsf-inspector :is(.nsa-act-btn, .nsf-lane-model-btn, .nsk-link) {
  color: #d8e2ef; background: #ffffff09; border: 1px solid #ffffff30;
}
.nsf-inspector :is(.nsa-act-btn, .nsf-lane-model-btn, .nsk-link):hover:not(:disabled) {
  color: #fff; background: #ffffff18; border-color: #ffffff60;
}
.nsf-inspector :is(.nsa-preview-act, .nsf-make-go),
.nsk-chat-shell .nsk-chat-send {
  background: #a5dbc9; color: #10251e; border: 1px solid #a5dbc9;
  font-weight: 700; min-height: 44px; border-radius: 8px;
}
.nsf-inspector :is(.nsa-preview-act, .nsf-make-go):hover:not(:disabled) { background: #c3eedf; color: #10251e; }
.nsf-inspector .nsf-make-go:disabled { background: #263431; color: #acbcb7; border-color: #52665f; opacity: 1; }
.nsf-inspector .nsf-make-choice { padding: 12px; border-radius: 8px; }
.nsf-inspector :is(.nsk-picker, .nsf-lane-model-pick select, .nsk-query) { min-height: 40px; font-size: 12px; border-radius: 7px; }
.nsf-inspector .nsk-curator-line { align-items: center; flex-wrap: wrap; font-size: 12px; gap: 8px; }
.nsf-inspector .nsk-curator-summary { gap: 9px; padding: 12px; background: #5fbfa80a; border-radius: 8px; }
.nsf-inspector .nsk-curator-summary .nsk-note { font-size: 12px; line-height: 1.5; }
.nsf-inspector .nsk-curator-assign-act { min-height: 40px; color: #c9f4e6; border-color: #85cfb9; background: #243b39; font-weight: 600; }
.nsf-inspector .nsk-curator-block, .nsk-chat-settings .nsk-curator-block { gap: 10px; }
.nsf-inspector .nsk-curator-block .nsk-note, .nsk-chat-settings .nsk-curator-block .nsk-note { font: 11.5px/1.5 var(--nsf-sans); }
.nsf-inspector .nsk-curator-mode { text-transform: capitalize; }
.nsf-inspector .nsk-curator-modehint { color: #b7c5d6; }
/* The synth settings read as three sections: a rule between them, none over the first. */
.nsk-step { margin-top: 6px; }
.nsk-chat-settings .nsk-step ~ .nsk-step { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--chat-line); }
.nsk-auto-status { flex: none; padding: 10px 12px; border: 1px solid #85cfb955; border-radius: 8px; color: #c9f4e6; font: 12px/1.5 var(--nsf-sans); overflow-wrap: anywhere; }
.nsk-auto-status.bad { color: #efc49a; border-color: #efc49a55; }
.nsk-auto-status button { margin: 8px 8px 0 0; min-height: 36px; padding: 6px 10px; background: #ffffff0c; border: 1px solid #ffffff40; border-radius: 6px; color: #eef3fa; cursor: pointer; }
.nsk-chat-shell .nsk-chat-model { min-height: 38px; padding: 7px 11px; border: 1px solid #85cfb970; border-radius: 8px; color: #cef3e7; background: #243b39; }
.nsk-chat-model-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--chat-muted); font-size: 11px; }
.nsk-chat-shell .nsk-chat-actions { gap: 6px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.nsk-chat-shell .nsk-chat-actions button { min-height: 38px; padding: 7px 12px; border: 1px solid #ffffff30; border-radius: 8px; }
.nsk-chat-shell .nsk-chat-actions button[aria-pressed="true"] { color: #eafff8; background: #243b39; border-color: #85cfb9; }
@media (max-width: 560px) {
.nsf-inspector :is(.nsa-act-btn, .nsf-make-when, .nsf-lane-model-btn, .nsk-link, .nsk-curator-mode),
  .nsk-chat-shell .nsk-chat-actions button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .nsf-inspector, .nsf-inspector *, .nsk-chat-shell * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------
   Job 3 · the DGX Morning (2026-10-13): the exposure card's panes, the
   egress / retention chips, the one-screen frame, the night report card.
   Taken from the DGX edition's nightshift-field.css, selector-scoped.
   ------------------------------------------------------------------- */
/* Context chips: the detail is on the title (hover / focus), not in a banner. */
.nsf-badge-info { cursor: help; }
.nsf-badge-btn { cursor: pointer; line-height: inherit; }
.nsf-badge-info:hover, .nsf-badge-info:focus-visible,
.nsf-badge-btn:hover, .nsf-badge-btn:focus-visible { color: #fff; border-color: rgba(142, 157, 190, 0.55); }
/* ── NS-MORNING-PANES — the exposure card's three panes ──────────────
   The card is a three-row column: a fixed head (eyebrow, badges, the
   pane strip), a pane body that is the ONLY scroller on the morning,
   and the fixed CTA row. `min-height: 0` on the card and the body is
   what makes the body scroll instead of the page — a flex child's
   default `min-height: auto` refuses to shrink below its content, and
   the card would push the grid past the viewport exactly as it did
   before the panes existed. */
.nsf-exp-head { display: flex; flex-direction: column; gap: 12px; flex: none; }
.nsf-exp-tabs {
  display: flex;
  gap: 3px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--nsf-glass-border);
  padding: 3px;
  border-radius: 4px;
  font-family: var(--nsf-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nsf-exp-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font: inherit;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.nsf-exp-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.nsf-exp-tab:focus-visible { outline: 1px solid rgba(242, 166, 90, 0.7); outline-offset: -1px; }
.nsf-exp-tab.active {
  background: #fff;
  color: #000;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}
.nsf-exp-tab-glyph { font-size: 12px; line-height: 1; }
.nsf-exp-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* room for the scrollbar so nothing inside shifts when it appears */
  padding-right: 4px;
  margin-right: -4px;
}
.nsf-exp-pane:focus-visible { outline: none; }
.nsf-exp-pane::-webkit-scrollbar { width: 8px; }
.nsf-exp-pane::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }
.nsf-exp-pane::-webkit-scrollbar-track { background: transparent; }
.nsf-exp-note {
  font-family: var(--nsf-mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--nsf-haze);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
  margin-top: auto;
}
/* Cluster and night report reading surfaces. */
.nsr-card { min-width: 0; padding: 14px 0; }
.nsr-head, .nsr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nsr-head { justify-content: space-between; }
.nsr-body { max-height: 65vh; overflow: auto; margin-top: 12px; padding: 12px; border: 1px solid var(--rt-border); border-radius: 8px; }
.nsr-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.nsr-clusters, .nsr-policy, .nsr-cov { line-height: 1.7; overflow-wrap: anywhere; }
.nsr-morning { margin: 12px 0; }
.nsr-card button:focus-visible, .nsl-card-cluster:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }