/* =====================================================================
   ARCHIVE — Singularity chrome, Nightshift verdict hues.
   Namespace: .nsx-* (NS-ARCHIVE-SINGULARITY; .nsa- belongs to the artifact
   viewers). The Archive tab is a full-viewport WebGL stage with a glass HUD
   floated over it: header (z30) → spotlight / inspector / dial / hide (z40)
   → recap (z100). Like the Night field it is intentionally dark in both
   themes, so colours here are literal, scoped under .nsx-, and the --rt-*
   tokens the reused .nsj-* inspector kit reads are re-pointed INSIDE the
   inspector rather than restyled.

   Cyan (#00f0ff) is the UI accent only — selection, focus, active pills,
   beams. A particle's colour is its verdict (decision #1).
   ===================================================================== */

:root {
  --nsx-bg: #030014;
  --nsx-accent: #00f0ff;
  --nsx-secondary: #7000ff;
  --nsx-glass: rgba(10, 10, 20, 0.6);
  --nsx-glass-2: rgba(8, 8, 18, 0.9);
  --nsx-border: rgba(100, 200, 255, 0.1);
  --nsx-line: rgba(255, 255, 255, 0.1);
  --nsx-glow: 0 0 15px rgba(0, 240, 255, 0.2);
}

@keyframes nsxFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes nsxSlideDown { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes nsxSlideUp { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes nsxSlideLeft { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes nsxPing { 75%, 100% { transform: scale(2.2); opacity: 0; } }
@keyframes nsxPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes nsxBounce { 0%, 100% { transform: translate(-50%, -100%) translateY(-25%); } 50% { transform: translate(-50%, -100%) translateY(0); } }
@keyframes nsxSpin { to { transform: rotate(360deg); } }
@keyframes nsxMarquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes nsxGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes nsxSlideRight { from { transform: translateX(-100%); } to { transform: translateX(200%); } }
@keyframes nsxZoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* ── the screen ──────────────────────────────────────────────────── */
.nsx-screen {
  padding: 0;
  overflow: hidden;
  background: var(--nsx-bg);
  color: #fff;
  font-family: var(--nsf-sans);
  display: flex;
  flex-direction: column;
  user-select: none;
}
.nsx-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--nsx-bg);
  overflow: hidden;
}
.nsx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nsx-body { position: relative; flex: 1; min-height: 0; pointer-events: none; }
.nsx-body.list { pointer-events: auto; overflow: auto; z-index: 20; padding: 0 20px 24px; }

/* ── projected DOM (owned by the engine) ─────────────────────────── */
.nsx-card {
  position: absolute; z-index: 20;
  transform: translate(-50%, -100%);
  min-width: 180px; max-width: 260px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(10, 10, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.nsx-card.selected, .nsx-card.new { background: rgba(0, 0, 0, 0.9); border-color: var(--nsx-accent); box-shadow: 0 0 25px rgba(0, 240, 255, 0.4); }
.nsx-card.docked { transform: translate(-100%, -100%); }
.nsx-card.small { min-width: 0; max-width: 160px; padding: 6px 8px; }
.nsx-card.small .nsx-card-title { -webkit-line-clamp: 1; }
.nsx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.nsx-card-title {
  font-family: var(--nsf-sans); font-size: 12px; font-weight: 700; line-height: 1.35; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px;
}
.nsx-card-stats { font-family: var(--nsf-mono); font-size: 9px; color: rgba(255, 255, 255, 0.6); }
.nsx-chip {
  font-family: var(--nsf-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); white-space: nowrap;
}
.nsx-chip.accent { background: var(--nsx-accent); color: #000; }
.nsx-chip.outline { background: rgba(0, 240, 255, 0.12); color: var(--nsx-accent); border: 1px solid rgba(0, 240, 255, 0.3); }
.nsx-badge {
  position: absolute; z-index: 19;
  transform: translate(-50%, -100%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.85); border: 2px solid var(--nsx-accent);
  color: var(--nsx-accent); font-family: var(--nsf-mono); font-size: 9px; font-weight: 900; letter-spacing: 0.16em;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.8);
  cursor: pointer; pointer-events: auto;
  animation: nsxBounce 1s infinite;
}
.nsx-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nsx-accent); animation: nsxPing 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* ── header (z30) ────────────────────────────────────────────────── */
.nsx-header {
  position: relative; z-index: 30;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 20px 8px;
  pointer-events: none;
}
.nsx-header > * { pointer-events: auto; }
.nsx-header-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: min(100%, 980px); }
.nsx-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nsx-brand { display: flex; align-items: center; gap: 12px; }
.nsx-logo {
  width: 36px; height: 36px; border-radius: 8px; flex: none;
  background: rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.3);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: var(--nsx-glow);
}
.nsx-wordmark { display: flex; align-items: center; gap: 8px; font-family: var(--nsf-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.2em; color: #fff; }
.nsx-version { font-size: 9px; padding: 2px 7px; border-radius: 4px; background: rgba(0, 240, 255, 0.2); color: var(--nsx-accent); border: 1px solid rgba(0, 240, 255, 0.4); letter-spacing: 0.1em; }
.nsx-tagline { font-family: var(--nsf-mono); font-size: 10px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; margin-top: 2px; }
.nsx-tagline b { color: rgba(255, 255, 255, 0.75); font-weight: 500; }

/* the 17-pill perspective strip — role=radiogroup.
   Scroll still works (shift-wheel / trackpad / touch); the bar itself is
   hidden so a fat overlay thumb cannot sit on the labels and eat clicks. */
.nsx-modes {
  display: flex; align-items: center; gap: 3px;
  padding: 4px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.5); border: 1px solid var(--nsx-line);
  backdrop-filter: blur(10px);
  overflow-x: auto; overflow-y: hidden; max-width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nsx-modes::-webkit-scrollbar { display: none; height: 0; }
.nsx-mode {
  flex: none; padding: 5px 10px; border-radius: 5px; border: 1px solid transparent;
  background: none; color: rgba(255, 255, 255, 0.42);
  font-family: var(--nsf-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; white-space: nowrap;
  cursor: pointer; transition: all 0.15s;
}
.nsx-mode:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nsx-mode:focus-visible { outline: none; border-color: var(--nsx-accent); box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.35); }
.nsx-mode.active { background: var(--nsx-accent); color: #000; font-weight: 800; box-shadow: 0 0 15px rgba(0, 240, 255, 0.4); }

/* the control row: search · status · time · rank */
.nsx-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nsx-search {
  flex: 1 1 220px; min-width: 180px; max-width: 420px;
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px;
  background: rgba(0, 0, 0, 0.5); border: 1px solid var(--nsx-line); border-radius: 6px;
  backdrop-filter: blur(10px);
}
.nsx-search:focus-within { border-color: var(--nsx-accent); box-shadow: var(--nsx-glow); }
.nsx-search input {
  flex: 1; min-width: 0; background: none; border: none; color: #fff;
  font-family: var(--nsf-mono); font-size: 11px;
}
.nsx-search input:focus { outline: none; }
.nsx-search input::placeholder { color: rgba(255, 255, 255, 0.35); }
.nsx-search-glyph { color: rgba(255, 255, 255, 0.4); font-size: 12px; }
.nsx-search-clear { background: none; border: none; color: rgba(255, 255, 255, 0.4); cursor: pointer; font-size: 11px; padding: 0 2px; }
.nsx-search-clear:hover { color: #fff; }
.nsx-label { font-family: var(--nsf-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.nsx-select {
  height: 30px; padding: 0 8px;
  background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--nsx-line); border-radius: 6px;
  font-family: var(--nsf-mono); font-size: 10px;
}
.nsx-select:focus { outline: none; border-color: var(--nsx-accent); }
.nsx-select option { background: #0a0a16; color: #fff; }
.nsx-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--nsf-mono); font-size: 10px; }
.nsx-pills .nsf-filter-btn { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); }
.nsx-pills .nsf-filter-btn.active { background: var(--nsx-accent); border-color: var(--nsx-accent); color: #000; }
.nsx-pills .nsf-filter-btn:focus-visible { outline: none; border-color: var(--nsx-accent); box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.35); }

/* header-right buttons */
.nsx-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.8);
  font-family: var(--nsf-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; backdrop-filter: blur(8px); transition: all 0.15s; white-space: nowrap;
}
.nsx-btn:hover { color: #fff; border-color: var(--nsx-accent); }
.nsx-btn:focus-visible { outline: none; border-color: var(--nsx-accent); box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.35); }
.nsx-btn.active { background: var(--nsx-accent); color: #000; border-color: var(--nsx-accent); }
.nsx-btn.primary { background: var(--nsx-accent); color: #000; border-color: var(--nsx-accent); box-shadow: 0 0 12px rgba(0, 240, 255, 0.4); }
.nsx-btn.primary:hover { background: #fff; }
.nsx-btn.danger { color: var(--nsf-contradicted); }
.nsx-btn.danger:hover { border-color: var(--nsf-contradicted); }
.nsx-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.nsx-btn.sm { height: 26px; padding: 0 9px; font-size: 9px; }
.nsx-btn.icon { padding: 0 9px; }

/* ── banners: note / webgl fallback / truncation ─────────────────── */
.nsx-banners { display: flex; flex-direction: column; gap: 6px; padding: 0 20px; position: relative; z-index: 30; pointer-events: none; }
.nsx-banner {
  align-self: flex-start; pointer-events: auto;
  font-family: var(--nsf-mono); font-size: 10px; letter-spacing: 0.04em;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.6); border: 1px solid var(--nsx-line); color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
}
.nsx-banner.ok { color: var(--nsf-supported); border-color: rgba(95, 191, 168, 0.35); }
.nsx-banner.warn { color: var(--nsf-split); border-color: rgba(224, 180, 80, 0.35); }
.nsx-banner.err { color: var(--nsf-contradicted); border-color: rgba(212, 87, 107, 0.35); }

/* ── spotlight (z40) ─────────────────────────────────────────────── */
.nsx-spotlight {
  position: absolute; top: 118px; left: 50%; transform: translateX(-50%); z-index: 40;
  width: min(92%, 620px);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.9); border: 2px solid var(--nsx-accent);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.35); backdrop-filter: blur(16px);
  animation: nsxSlideDown 0.3s ease-out;
}
.nsx-spotlight-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nsx-spotlight-glyph {
  width: 38px; height: 38px; border-radius: 8px; flex: none; position: relative;
  background: rgba(0, 240, 255, 0.2); border: 1px solid var(--nsx-accent); color: var(--nsx-accent);
  display: flex; align-items: center; justify-content: center; font-size: 16px; animation: nsxPulse 2s infinite;
}
.nsx-spotlight-glyph::after { content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--nsx-accent); animation: nsxPing 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.nsx-spotlight-text { min-width: 0; }
.nsx-spotlight-title { font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.nsx-spotlight-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.nsx-x { background: none; border: none; color: rgba(255, 255, 255, 0.4); cursor: pointer; font-size: 14px; padding: 4px; border-radius: 4px; }
.nsx-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ── inspector (z40, right) ──────────────────────────────────────── */
.nsx-inspector {
  position: absolute; top: 16px; right: 20px; bottom: 64px; z-index: 41;
  width: min(360px, calc(100% - 40px));
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px;
  background: var(--nsx-glass-2); border: 1px solid rgba(0, 240, 255, 0.4); border-radius: 14px;
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.15), 0 20px 50px rgba(0, 0, 0, 0.5); backdrop-filter: blur(18px);
  overflow-y: auto; scrollbar-width: thin;
  animation: nsxSlideLeft 0.2s ease-out;
  /* the reused .nsj-* / .ns-pill kit reads these; re-pointed for the dark stage */
  --rt-bg-sunk: rgba(0, 0, 0, 0.45);
  --rt-bg-alt: rgba(255, 255, 255, 0.04);
  --rt-border: rgba(255, 255, 255, 0.12);
  --rt-fg: #ffffff;
  --rt-fg-2: rgba(255, 255, 255, 0.78);
  --rt-fg-3: rgba(255, 255, 255, 0.45);
  --mono: var(--nsf-mono);
}
.nsx-insp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nsx-insp-eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--nsf-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nsx-accent); font-weight: 700; }
.nsx-insp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--nsf-mono); font-size: 10px; color: rgba(255, 255, 255, 0.6); }
.nsx-insp-id { color: #fff; font-weight: 700; }
.nsx-insp-title { font-family: var(--nsf-sans); font-size: 13px; font-weight: 700; line-height: 1.35; color: #fff; }
.nsx-insp-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.nsx-verbs { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 6px; }
.nsx-verbs .nsx-btn { height: 34px; }
.nsx-verbs-2 { display: flex; gap: 6px; flex-wrap: wrap; }
.nsx-insp-note { font-family: var(--nsf-mono); font-size: 10px; color: rgba(255, 255, 255, 0.55); line-height: 1.5; }
.nsx-insp-facts { border-top: 1px solid var(--rt-border); }
.nsx-inspector .nsj-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nsx-inspector .nsj-stat:nth-child(3) { border-left: none; border-top: 1px solid var(--rt-border); }
.nsx-inspector .nsj-stat:nth-child(4) { border-top: 1px solid var(--rt-border); }

/* ── Chronos dial (z40, bottom) ────────────────────────────────────
   Centred until the inspector would cover it. `.docked` is set from a
   layout pass in the screen: left edge stays 16px, right edge clears
   the inspector by --nsx-dial-right. The wrap is a size container so a
   narrow leftover pocket collapses into the small card (jog off, rail
   still scrubs) without a viewport-width guess. */
.nsx-dial-wrap {
  position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); z-index: 40;
  width: min(96%, 880px); animation: nsxSlideUp 0.3s ease-out;
  container-type: inline-size; container-name: nsx-dial;
}
.nsx-dial-wrap.docked {
  left: 16px; right: var(--nsx-dial-right, 396px); transform: none; width: auto;
  max-width: 880px; min-width: 0; animation: none;
}
.nsx-dial {
  display: flex; flex-direction: column; gap: 12px; padding: 14px 16px;
  background: rgba(8, 8, 18, 0.9); border: 1px solid rgba(0, 240, 255, 0.4); border-radius: 16px;
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.2); backdrop-filter: blur(20px);
}
.nsx-dial-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--nsx-line); flex-wrap: wrap; }
.nsx-dial-brand { display: flex; align-items: center; gap: 10px; }
.nsx-dial-glyph { width: 24px; height: 24px; border-radius: 6px; background: rgba(0, 240, 255, 0.2); border: 1px solid var(--nsx-accent); color: var(--nsx-accent); display: flex; align-items: center; justify-content: center; font-size: 12px; box-shadow: 0 0 10px rgba(0, 240, 255, 0.5); }
.nsx-dial-glyph.spin { animation: nsxSpin 3s linear infinite; }
.nsx-epoch { font-family: var(--nsf-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #fff; }
.nsx-epoch span { color: rgba(255, 255, 255, 0.4); }
.nsx-dial-transport { display: flex; align-items: center; gap: 6px; }
.nsx-dial-transport .nsx-btn.tour { background: rgba(0, 240, 255, 0.1); border-color: rgba(0, 240, 255, 0.4); color: var(--nsx-accent); }
.nsx-dial-transport .nsx-btn.tour:hover { background: var(--nsx-accent); color: #000; }
.nsx-dial-transport .nsx-btn.tour.playing { background: rgba(255, 0, 60, 0.2); border-color: #ff003c; color: #ff003c; animation: nsxPulse 1.5s infinite; }
.nsx-dial-main { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: stretch; }
@container nsx-dial (max-width: 720px) {
  .nsx-dial { padding: 10px 12px; gap: 8px; }
  .nsx-dial-head { gap: 6px; padding-bottom: 8px; }
  .nsx-dial-main { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .nsx-jog { display: none; }
  .nsx-rail-labels .mid { display: none; }
  .nsx-focus { padding: 8px 10px; }
  .nsx-focus-title { font-size: 12px; }
  .nsx-focus-sub { -webkit-line-clamp: 1; }
  .nsx-dial-transport { flex-wrap: wrap; justify-content: flex-end; }
}
@container nsx-dial (max-width: 480px) {
  .nsx-epoch { display: none; }
  .nsx-focus-when { display: none; }
  .nsx-focus-stats { display: none; }
}
.nsx-jog {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--nsx-line); border-radius: 12px;
}
.nsx-jog-wheel {
  position: relative; width: 96px; height: 96px; border-radius: 50%;
  border: 2px solid rgba(0, 240, 255, 0.4);
  background: linear-gradient(to top right, #0a0a15, #15152a);
  cursor: grab; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.15); touch-action: none;
}
.nsx-jog-wheel:active { cursor: grabbing; }
.nsx-jog-wheel:focus-visible { outline: none; border-color: var(--nsx-accent); box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.35); }
.nsx-jog-tick { position: absolute; width: 3px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); top: 50%; left: 50%; margin: -3px 0 0 -1.5px; }
.nsx-jog-hand { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform 75ms; }
.nsx-jog-pointer { position: absolute; width: 5px; height: 26px; border-radius: 3px; background: var(--nsx-accent); transform: translateY(-24px); box-shadow: 0 0 8px var(--nsx-accent); }
.nsx-jog-knob { width: 28px; height: 28px; border-radius: 50%; background: #18182e; border: 1px solid rgba(0, 240, 255, 0.6); display: flex; align-items: center; justify-content: center; }
.nsx-jog-knob::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--nsx-accent); animation: nsxPing 1.2s cubic-bezier(0, 0, 0.2, 1) infinite; }
.nsx-jog-pct { position: absolute; font-family: var(--nsf-mono); font-size: 10px; font-weight: 900; color: rgba(255, 255, 255, 0.9); pointer-events: none; }
.nsx-jog-steps { display: flex; gap: 6px; }
.nsx-focus {
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  padding: 12px 14px; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--nsx-line); border-radius: 12px; min-width: 0;
}
.nsx-focus-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.nsx-focus-when { font-family: var(--nsf-mono); font-size: 10px; color: var(--nsx-accent); }
.nsx-focus-when span { color: rgba(255, 255, 255, 0.4); }
.nsx-focus-title { font-family: var(--nsf-sans); font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsx-focus-sub { font-family: var(--nsf-sans); font-size: 11px; color: rgba(255, 255, 255, 0.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nsx-focus-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--nsx-line); flex-wrap: wrap; }
.nsx-focus-stats { font-family: var(--nsf-mono); font-size: 10px; color: rgba(255, 255, 255, 0.5); }
.nsx-focus-stats b { color: var(--nsx-accent); font-weight: 600; }
.nsx-rail-labels { display: flex; justify-content: space-between; font-family: var(--nsf-mono); font-size: 9px; color: rgba(255, 255, 255, 0.5); padding: 0 4px; }
.nsx-rail-labels .mid { color: var(--nsx-accent); font-weight: 700; letter-spacing: 0.1em; }
.nsx-rail { position: relative; width: 100%; height: 28px; display: flex; align-items: center; }
.nsx-rail-track { position: absolute; left: 0; right: 0; height: 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); overflow: hidden; }
.nsx-rail-fill { height: 100%; background: linear-gradient(to right, rgba(0, 240, 255, 0.4), var(--nsx-accent), #a855f7); transition: width 0.15s; }
.nsx-rail-dot { position: absolute; transform: translateX(-50%); z-index: 2; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #000; padding: 0; cursor: pointer; opacity: 0.75; transition: transform 0.15s; }
.nsx-rail-dot:hover { transform: translateX(-50%) scale(1.5); opacity: 1; }
.nsx-rail-dot.active { transform: translateX(-50%) scale(1.3); opacity: 1; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--nsx-accent); animation: nsxPulse 1.5s infinite; }
.nsx-rail-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 3; margin: 0; }

/* ── footer + UI hide ────────────────────────────────────────────── */
.nsx-footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 20px; pointer-events: none; }
.nsx-footer > * { pointer-events: auto; }
.nsx-status {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--nsf-mono); font-size: 10px; color: rgba(255, 255, 255, 0.55);
  padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--nsx-line); backdrop-filter: blur(8px);
}
.nsx-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nsf-supported); animation: nsxPulse 2s infinite; }
.nsx-status b { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.nsx-telemetry {
  width: 240px; padding: 10px 12px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.5); border: 1px solid var(--nsx-line); backdrop-filter: blur(10px);
  font-family: var(--nsf-mono); font-size: 10px; color: rgba(255, 255, 255, 0.65);
}
.nsx-telemetry-head { display: flex; justify-content: space-between; color: var(--nsx-accent); font-weight: 700; margin-bottom: 5px; letter-spacing: 0.06em; }
.nsx-telemetry ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.nsx-telemetry li { display: flex; justify-content: space-between; gap: 8px; }
.nsx-telemetry li b { color: rgba(255, 255, 255, 0.9); font-weight: 600; }
.nsx-hide {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.45); font-size: 14px; cursor: pointer; backdrop-filter: blur(8px);
}
.nsx-hide:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.nsx-hide:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--nsx-accent); }

/* ── the list fallback (WALL's DOM twin) ──────────────────────────── */
.nsx-list-empty { text-align: center; padding: 44px 20px; margin-top: 16px; }
.nsx-list .nsf-run-card.nsx-dim { opacity: 0.35; }
.nsx-list .nsf-run-card.nsx-selected { border-color: var(--nsx-accent); box-shadow: 0 0 25px rgba(0, 240, 255, 0.25); }

/* ── the night recap (z100) ──────────────────────────────────────── */
.nsx-recap {
  position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; overflow: hidden;
  font-family: var(--nsf-sans); animation: nsxFadeIn 0.3s;
  --nsx-theme: var(--nsx-accent);
}
.nsx-recap-bg { position: absolute; inset: 0; z-index: 0; }
.nsx-recap-scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 4px, 6px 100%; }
.nsx-recap-glow { position: absolute; inset: 0; opacity: 0.3; background: radial-gradient(circle at center, color-mix(in srgb, var(--nsx-theme) 12%, transparent) 0%, transparent 70%); animation: nsxPulse 4s infinite; }
.nsx-recap-stage { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; }
.nsx-recap-head { height: 60px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--nsx-line); background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); }
.nsx-recap-live { display: flex; align-items: center; gap: 8px; color: #ff003c; font-family: var(--nsf-mono); font-size: 10px; font-weight: 900; letter-spacing: 0.2em; animation: nsxPulse 1.5s infinite; }
.nsx-recap-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.2); margin: 0 14px; }
.nsx-recap-ticker { width: 300px; overflow: hidden; white-space: nowrap; font-family: var(--nsf-mono); font-size: 10px; color: rgba(255, 255, 255, 0.5); }
.nsx-recap-ticker span { display: inline-block; animation: nsxMarquee 12s linear infinite; }
.nsx-recap-main { flex: 1; position: relative; padding: 32px 48px 120px; min-height: 0; }
.nsx-recap-scene { width: 100%; height: 100%; animation: nsxZoomIn 0.5s ease-out; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; }
.nsx-recap-booth { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%); width: min(92%, 680px); text-align: center; z-index: 20; }
.nsx-recap-booth-box { padding: 14px 22px; border-radius: 12px; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--nsx-line); backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.nsx-recap-booth p { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.nsx-recap-booth p span { color: var(--nsx-accent); }
.nsx-recap-foot { height: 76px; flex: none; display: flex; align-items: center; gap: 18px; padding: 0 28px; background: linear-gradient(to top, #000, transparent); }
.nsx-recap-play { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; padding: 6px; }
.nsx-recap-play:hover { color: var(--nsx-accent); }
.nsx-recap-bars { flex: 1; display: flex; gap: 4px; height: 6px; }
.nsx-recap-bar { flex: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.nsx-recap-bar.done { background: var(--nsx-accent); }
.nsx-recap-bar-fill { height: 100%; background: var(--nsx-accent); width: calc(var(--p, 0) * 100%); }
.nsx-recap-count { font-family: var(--nsf-mono); font-size: 10px; color: rgba(255, 255, 255, 0.4); }
.nsx-recap-page { display: flex; gap: 6px; }
/* scenes */
.nsx-sc-sub { font-family: var(--nsf-mono); font-size: 16px; letter-spacing: 0.5em; color: var(--nsx-accent); border-bottom: 1px solid var(--nsx-accent); padding-bottom: 8px; margin-bottom: 18px; animation: nsxPulse 2s infinite; text-transform: uppercase; }
.nsx-sc-title { font-size: clamp(38px, 7vw, 86px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; line-height: 1; color: #fff; text-shadow: 0 0 30px var(--nsx-theme); }
.nsx-sc-bars { margin-top: 30px; display: flex; gap: 14px; }
.nsx-sc-bars > div { width: 64px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.nsx-sc-bars > div > div { height: 100%; width: 50%; background: #fff; animation: nsxSlideRight 1.4s ease-in-out infinite; }
.nsx-sc-ring { position: absolute; width: min(600px, 80vmin); height: min(600px, 80vmin); border: 2px dashed var(--nsx-theme); border-radius: 50%; opacity: 0.2; animation: nsxSpin 30s linear infinite; }
.nsx-sc-label { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; font-family: var(--nsf-mono); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.nsx-sc-value { font-size: clamp(64px, 12vw, 150px); font-weight: 900; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 4px 4px 0 var(--nsx-theme), 0 0 50px color-mix(in srgb, var(--nsx-theme) 25%, transparent); position: relative; z-index: 1; }
.nsx-sc-pill { margin-top: 18px; display: inline-block; padding: 8px 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 18px; font-weight: 700; text-transform: uppercase; backdrop-filter: blur(6px); position: relative; z-index: 1; }
.nsx-sc-versus { display: flex; align-items: flex-end; justify-content: center; gap: 72px; height: 100%; position: relative; }
.nsx-sc-vs { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); font-size: 96px; font-weight: 900; font-style: italic; color: rgba(255, 255, 255, 0.05); }
.nsx-sc-col { display: flex; flex-direction: column; align-items: center; z-index: 1; }
.nsx-sc-col.dim { opacity: 0.7; }
.nsx-sc-tube { position: relative; height: 260px; width: 130px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--nsx-line); border-radius: 8px 8px 0 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.nsx-sc-fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h, 0) * 100%); background: var(--nsx-theme); opacity: 0.8; transform-origin: bottom; animation: nsxGrow 1s ease-out forwards; }
.nsx-sc-fill.grey { background: #5b5b6b; animation-delay: 0.5s; transform: scaleY(0); }
.nsx-sc-num { position: relative; z-index: 2; margin-bottom: 16px; font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.nsx-sc-col.dim .nsx-sc-num { color: #9ca3af; }
.nsx-sc-cap { margin-top: 14px; text-align: center; }
.nsx-sc-cap small { display: block; font-family: var(--nsf-mono); font-size: 10px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.nsx-sc-cap b { display: block; font-size: 18px; font-weight: 700; color: #fff; }
.nsx-sc-col.dim .nsx-sc-cap b { color: #9ca3af; }
.nsx-sc-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 900px; }
.nsx-sc-tag { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 22px; font-weight: 700; text-transform: uppercase; animation: nsxSlideUp 0.5s both; animation-delay: calc(var(--i, 0) * 0.1s); }
.nsx-sc-tag.theme { border-color: var(--nsx-theme); }
.nsx-sc-tag small { color: rgba(255, 255, 255, 0.3); font-size: 16px; }
.nsx-sc-zap { font-size: 56px; margin-bottom: 18px; color: var(--nsx-theme); animation: nsxPulse 2s infinite; }
.nsx-sc-outro-title { font-size: clamp(30px, 5vw, 52px); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.nsx-sc-outro-sub { font-family: var(--nsf-mono); font-size: 12px; color: var(--nsx-accent); }
.nsx-sc-outro-bar { margin-top: 40px; width: 260px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.nsx-sc-outro-bar > div { height: 100%; width: 50%; background: #fff; animation: nsxSlideRight 1.6s linear infinite; }

/* ── a11y ─────────────────────────────────────────────────────────── */
.nsx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── reduced motion: keep the scene, stop the loops ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .nsx-badge, .nsx-badge-dot, .nsx-jog-knob::after, .nsx-status-dot, .nsx-spotlight-glyph, .nsx-spotlight-glyph::after,
  .nsx-dial-glyph.spin, .nsx-rail-dot.active, .nsx-recap-live, .nsx-recap-glow, .nsx-recap-ticker span,
  .nsx-sc-sub, .nsx-sc-bars > div > div, .nsx-sc-ring, .nsx-sc-zap, .nsx-sc-outro-bar > div, .nsx-dial-transport .nsx-btn.tour.playing {
    animation: none !important;
  }
  .nsx-sc-fill, .nsx-sc-tag { animation: none !important; transform: none !important; opacity: 1 !important; }
  .nsx-spotlight, .nsx-inspector, .nsx-dial-wrap, .nsx-recap, .nsx-recap-scene { animation: none !important; }
  .nsx-badge { transform: translate(-50%, -100%); }
}
.nsx-screen.reduced .nsx-badge, .nsx-screen.reduced .nsx-badge-dot, .nsx-screen.reduced .nsx-status-dot,
.nsx-screen.reduced .nsx-spotlight-glyph, .nsx-screen.reduced .nsx-spotlight-glyph::after, .nsx-screen.reduced .nsx-jog-knob::after,
.nsx-screen.reduced .nsx-rail-dot.active, .nsx-screen.reduced .nsx-dial-glyph.spin { animation: none !important; }