/* Shared styling for the interactive visuals (demo + technical panels).
   Every visual sits on an asphalt stage. Modules build their own DOM inside
   the root they are given and use these classes for controls. */

.viz {
  position: relative;
  background: var(--asphalt);
  color: var(--on-asphalt);
  border-radius: var(--radius-m);
  overflow: hidden;
  font-family: var(--font);
}
.viz canvas { display: block; width: 100%; height: 100%; }

.viz-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--asphalt-line);
  background: var(--asphalt);
}
.viz-controls__label {
  font-size: var(--step--1);
  color: var(--on-asphalt-2);
  margin-right: 4px;
}
.viz-btn {
  appearance: none;
  font: inherit;
  font-size: var(--step--1);
  line-height: 1;
  color: var(--on-asphalt);
  background: var(--asphalt-2);
  border: 1px solid var(--asphalt-line);
  border-radius: var(--radius-pill);
  padding: 9px 14px 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.viz-btn:hover { border-color: var(--on-asphalt-2); }
.viz-btn[aria-pressed="true"] {
  background: var(--tactile);
  border-color: var(--tactile);
  color: var(--tactile-ink);
  font-weight: 650;
}
.viz-btn:focus-visible,
.viz-range:focus-visible {
  outline: 2px solid var(--tactile);
  outline-offset: 2px;
}
.viz-btn--quiet { background: transparent; }

.viz-range {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 28px;
  background: transparent;
  cursor: pointer;
}
.viz-range::-webkit-slider-runnable-track { height: 2px; background: var(--asphalt-line); border-radius: 2px; }
.viz-range::-moz-range-track { height: 2px; background: var(--asphalt-line); border-radius: 2px; }
.viz-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 18px; margin-top: -8px;
  border-radius: 1px; background: var(--tactile); border: 0;
}
.viz-range::-moz-range-thumb { width: 12px; height: 18px; border-radius: 1px; background: var(--tactile); border: 0; }

.viz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: var(--step--1);
  color: var(--on-asphalt-2);
}
.viz-legend__key { display: inline-flex; align-items: center; gap: 7px; }
.viz-legend__swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.viz-readout {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1);
  color: var(--on-asphalt);
}

.viz-sr { /* visually hidden, for live announcements */
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---------- stealth pass ---------- */
.viz { border: 1px solid var(--asphalt-line); }
.viz::after { /* bracketed instrument corners */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  --c: var(--rule-2); --l: 12px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l) no-repeat;
}
.viz-btn { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 12px; }
.viz-btn[aria-pressed="true"] { background: var(--on-asphalt); border-color: var(--on-asphalt); color: var(--asphalt); font-weight: 600; }
.viz-controls__label, .viz-legend { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; }
.viz-legend__swatch { border-radius: 0; }