/* /visualize/ — the quantum page. Tokens only (cvl-tokens.css), square corners, mono HUD.
   The page shell (nav, skip link, footer) comes from cvl-visual-master.css. */

body[data-page="visualize"] .inner-hero h1 {
  margin-bottom: 0;
}

body[data-page="visualize"] .viz-copy {
  max-width: var(--cvl-content-measure);
  margin: var(--cvl-space-6) 0 0;
  color: var(--cvl-ink-dim);
  font-size: var(--cvl-fs-0p975rem);
  line-height: var(--cvl-leading-body);
}

body[data-page="visualize"] .viz-copy sub,
body[data-page="visualize"] .viz-copy sup {
  font-size: var(--cvl-fs-0p75rem);
  line-height: 0;
}

.viz {
  padding-block: var(--cvl-space-6) var(--cvl-space-9);
}

.viz-stage {
  position: relative;
  height: clamp(22rem, 66vh, 52rem);
  border: var(--cvl-master-rule) solid var(--cvl-border);
  border-radius: var(--cvl-radius);
  background: var(--cvl-bg);
  overflow: hidden;
  touch-action: pan-y;
}

.viz-stage[data-viz-mode="split"]::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  border-inline-start: var(--cvl-master-rule) solid var(--cvl-border-control);
  pointer-events: none;
}

.viz-canvas {
  display: block;
  width: var(--cvl-full);
  height: var(--cvl-full);
  cursor: grab;
}

.viz-canvas:active {
  cursor: grabbing;
}

.viz-stage[data-viz-mode="wave"] .viz-canvas,
.viz-stage[data-viz-mode="orbital"] .viz-canvas,
.viz-stage[data-viz-mode="split"] .viz-canvas {
  cursor: crosshair;
}

.viz-canvas:focus-visible {
  outline: calc(var(--cvl-master-rule) * 2) solid var(--cvl-lime);
  outline-offset: calc(var(--cvl-master-rule) * -2);
}

.viz-hud {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  max-width: min(var(--cvl-master-copy-col), var(--cvl-full));
  padding: var(--cvl-space-4);
  color: var(--cvl-ink-dim);
  font-family: var(--cvl-mono);
  font-size: var(--cvl-fs-0p75rem);
  line-height: var(--cvl-leading-tight);
  pointer-events: none;
}

.viz-stage[data-viz-mode="split"] .viz-hud {
  max-width: 50%;
}

.viz-hud--b {
  inset-inline-start: 50%;
}

/* Each line sits on a scrim plate so it stays legible over the brightest points. */
.viz-hud p {
  width: fit-content;
  max-width: var(--cvl-full);
  margin: 0 0 var(--cvl-space-2);
  background: var(--cvl-scrim);
  overflow-wrap: anywhere;
}

.viz-hud-mode {
  color: var(--cvl-lime);
  font-weight: 500;
  letter-spacing: var(--cvl-tracking-label);
}

.viz-hud-eq {
  color: var(--cvl-ink);
  font-size: var(--cvl-fs-0p9375rem);
}

.viz-status {
  position: absolute;
  inset: auto var(--cvl-space-4) var(--cvl-space-4);
  margin: 0;
  color: var(--cvl-ink);
  font-family: var(--cvl-mono);
  font-size: var(--cvl-fs-0p8125rem);
}

.viz-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cvl-space-3) var(--cvl-space-5);
  margin-block-start: var(--cvl-space-4);
}

.viz-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cvl-space-2);
}

.viz-button {
  min-width: var(--cvl-master-control-h);
  min-height: var(--cvl-master-control-h);
  padding: 0 var(--cvl-space-4);
  border: var(--cvl-master-rule) solid var(--cvl-border-control);
  border-radius: var(--cvl-radius);
  background: var(--cvl-bg);
  color: var(--cvl-ink-dim);
  font-family: var(--cvl-mono);
  font-size: var(--cvl-fs-0p75rem);
  letter-spacing: var(--cvl-tracking-nav);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--cvl-motion-fast), border-color var(--cvl-motion-fast);
}

.viz-button:hover {
  border-color: var(--cvl-ink-dim);
  color: var(--cvl-ink);
}

.viz-button[aria-pressed="true"] {
  border-color: var(--cvl-lime);
  color: var(--cvl-lime);
}

.viz-button:focus-visible,
.viz-radius-input:focus-visible {
  outline: calc(var(--cvl-master-rule) * 2) solid var(--cvl-lime);
  outline-offset: calc(var(--cvl-master-rule) * 2);
}

.viz-button:disabled {
  border-color: var(--cvl-border);
  color: var(--cvl-muted);
  cursor: not-allowed;
}

.viz-radius {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cvl-space-3);
  color: var(--cvl-ink-dim);
  font-family: var(--cvl-mono);
  font-size: var(--cvl-fs-0p75rem);
}

.viz-radius-label {
  letter-spacing: var(--cvl-tracking-nav);
  text-transform: uppercase;
}

.viz-radius-input {
  width: var(--cvl-master-dossier-col);
  min-height: var(--cvl-master-control-h);
  accent-color: var(--cvl-lime);
}

.viz-radius-out {
  min-width: var(--cvl-space-8);
  color: var(--cvl-ink);
}

.viz-note {
  max-width: var(--cvl-content-measure);
  margin: var(--cvl-space-3) 0 0;
  color: var(--cvl-muted);
  font-family: var(--cvl-mono);
  font-size: var(--cvl-fs-0p75rem);
  line-height: var(--cvl-leading-body);
}

.viz-note--motion {
  color: var(--cvl-ink-dim);
}

@media (max-width: 42rem) {
  .viz-stage {
    height: clamp(20rem, 64vh, 34rem);
  }

  .viz-hud {
    padding: var(--cvl-space-3);
    font-size: var(--cvl-fs-0p68rem);
  }

  .viz-hud-eq {
    font-size: var(--cvl-fs-0p8125rem);
  }

  /* Half a phone is too narrow for the live readout; R stays on screen in the slider output. */
  .viz-stage[data-viz-mode="split"] .viz-hud-live {
    display: none;
  }

  .viz-radius-input {
    flex: 1 1 var(--cvl-space-10);
    width: auto;
  }
}

@media (forced-colors: active) {
  .viz-button[aria-pressed="true"] {
    border-color: Highlight;
    color: Highlight;
  }
}