/* ============================================================================
   Neuro views — the "Instrument" language applied to the views panel: a raised
   graphite panel, cards with a top highlight, the flow gradient on the primary
   action, Geist Mono for every number. Marks are drawn on the GPU canvas; the
   axes, legends and titles are an SVG laid over it (flowrs-viz's chrome).
   ============================================================================ */
.flowrs-views-btn { color: var(--accent) !important; }

.nv-panel {
  position: fixed;
  right: 16px;
  bottom: 54px;
  z-index: 57;
  width: min(1080px, calc(100vw - 32px));
  max-height: 86vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%), var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3), inset 0 1px 0 var(--hi);
  color: var(--text-2);
}
.nv-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.nv-title { font: 600 15px var(--font-ui); color: var(--text); }
.nv-sub { font: 12px var(--font-ui); color: var(--muted); }
.nv-close { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; }
.nv-close:hover { color: var(--text); }
.nv-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--border);
}
.nv-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font: 12px var(--font-ui);
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast), box-shadow var(--fast);
}
.nv-btn:hover { border-color: var(--accent); color: var(--accent); }
.nv-btn:focus-visible { box-shadow: var(--ring); }
.nv-primary {
  border: none;
  background: var(--flow);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(53, 224, 196, 0.25), 0 6px 16px var(--accent-glow);
}
.nv-primary:hover { color: var(--accent-ink); filter: brightness(1.06); }
.nv-time { flex: 1 1 220px; accent-color: var(--accent); }
.nv-read {
  font: 12px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--panel);
  border: 1px solid var(--border);
  min-width: 82px;
  text-align: right;
}
.nv-note { font: 11px var(--font-ui); color: var(--muted); margin-left: auto; }
.nv-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
}
.nv-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--hi), var(--sh-1);
  padding: 8px 10px 10px;
  transition: transform var(--fast), box-shadow var(--fast);
}
.nv-card:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--hi), var(--sh-2); }
.nv-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.nv-kind {
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.nv-node { font: 11px var(--font-mono); color: var(--muted); }
.nv-plot { position: relative; }
.nv-canvas { position: absolute; display: block; }
.nv-overlay { position: absolute; inset: 0; pointer-events: none; }
.nv-overlay svg { display: block; overflow: visible; }
.nv-why, .nv-empty { font: 12px/1.5 var(--font-mono); color: var(--warn); margin: 6px 0; max-width: 520px; }
.nv-empty { color: var(--muted); }
.nv-foot { font: 11px var(--font-ui); color: var(--muted); padding: 0 18px 12px; margin: 0; }