/* visualizer.css — Phase 2B: Visualizer canvas and instrument styles */

/* ── Pixel Canvas (main waveform/spectrum display) ── */

.pixel-canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* Safari fallback */
  display: block;
}

.lissajous-canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  aspect-ratio: 1;
}

/* ── VU Meter ── */

.vu-meter-wrap {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-height: 0;
}

.vu-meter-wrap .vu-label {
  font-family: var(--font-terminal);
  font-size: var(--font-size-xs);
  color: var(--crt-amber-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.vu-meter-svg {
  width: 100%;
  flex: 1;
  min-height: 0;
  max-height: 120px;
}

.vu-meter-readout {
  font-family: var(--font-terminal);
  font-size: var(--font-size-sm);
  color: var(--crt-amber);
  text-align: center;
  flex-shrink: 0;
  min-height: 20px;
  text-shadow: 0 0 var(--crt-glow-radius-1) var(--crt-amber-glow);
}

/* ── LED Bar ── */

.led-bar-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  height: 100%;
}

.led-bar-label {
  font-family: var(--font-terminal);
  font-size: var(--font-size-xs);
  color: var(--crt-amber-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.led-bar-segments {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.led-segment {
  flex: 1;
  min-height: 2px;
  background: var(--crt-bg-inset);
  border: 1px solid var(--crt-border);
  transition: background 50ms ease, box-shadow 50ms ease;
}

.led-segment.lit-normal {
  background: var(--crt-amber);
  border-color: var(--crt-amber);
  box-shadow: 0 0 4px var(--crt-amber-glow);
}

.led-segment.lit-high {
  background: var(--crt-amber-bright);
  border-color: var(--crt-amber-bright);
  box-shadow: 0 0 6px var(--crt-amber-glow);
}

.led-segment.lit-warning {
  background: var(--crt-amber-bright);
  border-color: var(--crt-amber-bright);
  box-shadow: 0 0 8px var(--crt-amber-glow), 0 0 12px var(--crt-amber-glow);
}

.led-segment.lit-clip {
  background: var(--crt-amber-bright);
  border-color: var(--crt-amber-bright);
  box-shadow: 0 0 10px var(--crt-amber-glow), 0 0 16px var(--crt-amber-glow);
}

.led-segment.peak-hold {
  background: var(--crt-amber-bright);
  border-color: var(--crt-amber-bright);
}

.led-bar-db-labels {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  font-family: var(--font-terminal);
  font-size: 10px;
  color: var(--crt-amber-dim);
  flex: 1;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

/* ── Peak Clip Indicator ── */

.peak-clip-wrap {
  width: 100%;
  text-align: center;
  padding: var(--space-1) 0;
  flex-shrink: 0;
}

.peak-clip-label {
  font-family: var(--font-terminal);
  font-size: var(--font-size-xs);
  color: var(--crt-amber-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 50ms ease, text-shadow 50ms ease;
}

.peak-clip-label.clipping {
  color: var(--crt-amber-bright);
  text-shadow:
    0 0 var(--crt-glow-radius-1) var(--crt-amber-glow),
    0 0 var(--crt-glow-radius-2) var(--crt-amber-glow);
}

/* ── Lissajous ── */

.lissajous-wrap {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-height: 0;
}

.lissajous-wrap .lissajous-label {
  font-family: var(--font-terminal);
  font-size: var(--font-size-xs);
  color: var(--crt-amber-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.lissajous-canvas-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* ── Note Display ── */

.note-display-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--space-1);
}

.note-display-name {
  font-family: var(--font-terminal);
  font-size: var(--font-size-display);
  color: var(--crt-amber);
  line-height: 1;
  text-shadow:
    0 0 var(--crt-glow-radius-1) var(--crt-amber-glow),
    0 0 var(--crt-glow-radius-2) var(--crt-amber-glow);
}

.note-display-name.idle {
  color: var(--crt-amber-dim);
  text-shadow: none;
}

.note-display-freq {
  font-family: var(--font-terminal);
  font-size: var(--font-size-base);
  color: var(--crt-amber-dim);
  line-height: 1;
}

.note-display-cents {
  font-family: var(--font-terminal);
  font-size: var(--font-size-sm);
  color: var(--crt-amber-dim);
  line-height: 1;
}

.note-display-cents .cents-sharp {
  color: var(--crt-amber-bright);
}

.note-display-cents .cents-flat {
  color: var(--crt-amber-dim);
}

/* ── Elapsed Time ── */

.elapsed-time-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--space-1);
}

.elapsed-time-label {
  font-family: var(--font-terminal);
  font-size: var(--font-size-xs);
  color: var(--crt-amber-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.elapsed-time-digits {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-terminal);
  font-size: var(--font-size-xl);
  color: var(--crt-amber);
  text-shadow: 0 0 var(--crt-glow-radius-1) var(--crt-amber-glow);
}

.elapsed-digit-cell {
  display: inline-block;
  width: 16px;
  text-align: center;
  background: var(--crt-bg-inset);
  border: 1px solid var(--crt-border);
  padding: 1px 0;
}

.elapsed-separator {
  color: var(--crt-amber-dim);
  width: 8px;
  text-align: center;
}

/* ── Session Uptime ── */

.session-uptime-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--space-1);
}

.session-uptime-label {
  font-family: var(--font-terminal);
  font-size: var(--font-size-xs);
  color: var(--crt-amber-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.session-uptime-digits {
  font-family: var(--font-terminal);
  font-size: var(--font-size-base);
  color: var(--crt-amber);
  text-shadow: 0 0 var(--crt-glow-radius-1) var(--crt-amber-glow);
}

/* ── Status LEDs ── */

.status-leds-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: var(--space-1);
}

.status-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.status-row-label {
  font-family: var(--font-terminal);
  font-size: var(--font-size-xs);
  color: var(--crt-amber-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: 28px;
  flex-shrink: 0;
}

.status-led-group {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.status-led {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--crt-amber-dim);
  border: 1px solid var(--crt-border);
  transition: background 100ms ease, box-shadow 100ms ease;
}

.status-dot.active {
  background: var(--crt-amber);
  box-shadow: 0 0 4px var(--crt-amber-glow);
}

.status-dot.pulsing {
  animation: led-pulse var(--crt-flicker-speed) ease-in-out infinite alternate;
}

.status-led-text {
  font-family: var(--font-terminal);
  font-size: 10px;
  color: var(--crt-amber-dim);
  letter-spacing: 0.04em;
}

.signal-chain-text {
  font-family: var(--font-terminal);
  font-size: var(--font-size-xs);
  color: var(--crt-amber-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes led-pulse {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  .led-segment,
  .peak-clip-label,
  .status-dot {
    transition: none;
  }

  .status-dot.pulsing {
    animation: none;
  }
}