/* Negative Space.

   The canvas is deliberately its own dark world in both themes, because the scene is
   points of light against absence and inverting it would make the subject invisible.
   Everything around the canvas follows the site's tokens as normal, so the page still
   belongs to the site rather than becoming a separate product.

   Colour is reinforcement only, never the carrier. Every legend row states its own
   count and share as text, and the table below the scene carries the whole warehouse
   for a reader who never sees the canvas at all. */

.ns-page { display: flex; flex-direction: column; gap: 2.5rem; }

.ns-hero .lede { max-width: 46rem; }
.ns-snapshot {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--ink-3);
  margin-top: 0.4rem;
}

.ns-refusal {
  border: 2px solid var(--status-danger);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  background: var(--panel);
}
.ns-refusal h2 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--status-danger); }
.ns-refusal p { margin: 0.35rem 0 0; color: var(--ink-2); }

/* Scene ------------------------------------------------------------------ */

.ns-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.25rem;
  align-items: stretch;
}

.ns-canvas-wrap {
  position: relative;
  min-height: 30rem;
  border-radius: 12px;
  overflow: hidden;
  background: #090c12;
  border: 1px solid var(--line);
}

#ns-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 30rem;
  cursor: grab;
  touch-action: none;
}
#ns-canvas:active { cursor: grabbing; }
#ns-canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.ns-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: #cbd5e1;
  background: #090c12;
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem;
  line-height: 1.5;
}

.ns-spinner {
  width: 0.85rem; height: 0.85rem;
  border: 2px solid rgba(203, 213, 225, 0.35);
  border-top-color: #cbd5e1;
  border-radius: 50%;
  animation: ns-spin 0.9s linear infinite;
}
@keyframes ns-spin { to { transform: rotate(360deg); } }

.ns-hud {
  position: absolute;
  right: 0.6rem;
  bottom: 0.5rem;
  display: flex;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: rgba(203, 213, 225, 0.75);
  pointer-events: none;
}

/* Controls --------------------------------------------------------------- */

.ns-controls {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  min-width: 0;
}

.ns-scope-line { font-size: 0.85rem; color: var(--ink-2); line-height: 1.5; }
.ns-scope-line strong { font-variant-numeric: tabular-nums; color: var(--ink); }
#ns-scope { display: block; color: var(--ink-3); font-size: 0.8rem; margin-top: 0.15rem; }

.ns-answerability {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 0.6rem 0;
}
.ns-big {
  display: block;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--accent-ink);
}
.ns-big-label { font-size: 0.78rem; color: var(--ink-3); }

.ns-field {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.ns-controls select {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--wash);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
}

.ns-draw {
  width: 100%;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ns-draw:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.ns-draw:disabled { opacity: 0.5; cursor: not-allowed; }
.ns-draw-note { margin-top: -0.2rem; }

.ns-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ns-buttons button {
  flex: 1 1 auto;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.ns-buttons button:hover { border-color: var(--accent-dim); }
.ns-buttons button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); }

.ns-hint { font-size: 0.75rem; color: var(--ink-3); margin: 0; line-height: 1.45; overflow-wrap: anywhere; }

.ns-legend-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: 0.4rem 0 0;
}

.ns-legend { display: flex; flex-direction: column; gap: 0.15rem; }
.ns-legend-row {
  display: grid;
  grid-template-columns: 0.8rem minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  padding: 0.3rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}
button.ns-legend-row:hover { border-color: var(--line); background: var(--panel-2); }
.ns-legend-row.ns-off { opacity: 0.4; }
.ns-legend-row.ns-off .ns-legend-label { text-decoration: line-through; }
.ns-legend-count, .ns-legend-share {
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--ink-2);
}
.ns-legend-share { color: var(--ink-3); min-width: 3rem; text-align: right; }

.ns-swatch {
  width: 0.8rem; height: 0.8rem;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.ns-swatch-answered { background: #5cb8f0; }
.ns-swatch-too_small { background: #fab838; }
.ns-swatch-withheld_other { background: #f05c5c; }
.ns-swatch-not_asked { background: #576070; }

/* Reading ---------------------------------------------------------------- */

.ns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem;
}
.ns-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  background: var(--panel);
}
.ns-card h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
}
.ns-card-figure {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.35rem;
  color: var(--ink);
}
.ns-card p { font-size: 0.84rem; color: var(--ink-2); line-height: 1.5; margin: 0; }

.ns-note, .ns-honest li { line-height: 1.6; color: var(--ink-2); }
.ns-honest ul { display: flex; flex-direction: column; gap: 0.7rem; padding-left: 1.1rem; }

/* Table ------------------------------------------------------------------ */

.ns-table-wrap { overflow-x: auto; }
.ns-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ns-table caption { text-align: left; color: var(--ink-3); font-size: 0.8rem; padding-bottom: 0.4rem; }
.ns-table th, .ns-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 0.4rem 0.6rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ns-table th:first-child, .ns-table td:first-child { text-align: left; font-variant-numeric: normal; }
.ns-table thead th { color: var(--ink-3); font-weight: 600; }

/* Zen -------------------------------------------------------------------- */

body.ns-zen-on .ns-controls,
body.ns-zen-on .ns-hero,
body.ns-zen-on .ns-reading,
body.ns-zen-on .ns-honest,
body.ns-zen-on .ns-fallback-section,
body.ns-zen-on .method-note,
body.ns-zen-on header.site-header,
body.ns-zen-on footer { display: none; }

body.ns-zen-on .ns-stage { grid-template-columns: minmax(0, 1fr); }
body.ns-zen-on .ns-canvas-wrap { min-height: 82vh; border-radius: 0; border: 0; }
body.ns-zen-on #ns-canvas { min-height: 82vh; }

@media (max-width: 900px) {
  .ns-stage { grid-template-columns: minmax(0, 1fr); }
  .ns-canvas-wrap, #ns-canvas { min-height: 22rem; }
}

/* The drift is stopped in script when the system asks for reduced motion, because a
   canvas animation loop is not reachable from CSS. This only handles the decoration. */
@media (prefers-reduced-motion: reduce) {
  .ns-spinner { animation: none; }
}