/* Sound Visualization 3D Tool — WebGL / 2D-fallback audio visualizer.
   Layout + widget chrome only. Global classes (.btn, .input-label,
   .input-hint, .related-tool-card, .faq-item, design tokens) come from
   design-system.css and are NOT redefined here. */

/* ── Outer container ── */
.svz {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
}

.svz__privacy {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(0, 255, 65, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ── Source tabs ── */
.svz__tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.svz__tab {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.svz__tab:hover { border-color: var(--color-primary); color: var(--color-text-bright); }
.svz__tab:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--glow-sm); }
.svz__tab.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(0, 255, 65, 0.07);
}

/* ── Source rows ── */
.svz__source {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-end;
  margin-bottom: var(--space-md);
}
.svz__device { flex: 1 1 240px; min-width: 0; }
.svz__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* ── Dropzone (file mode) ── */
.svz__dropzone {
  flex: 1 1 100%;
  position: relative;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: var(--space-lg);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.svz__dropzone:hover,
.svz__dropzone:focus-visible { border-color: var(--color-primary); color: var(--color-text-bright); outline: none; }
.svz__dropzone.is-dragging { border-color: var(--color-primary); color: var(--color-primary); background: rgba(0, 255, 65, 0.06); }
.svz__fileinput {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ── Status / renderer lines ── */
.svz__status {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xs);
}
.svz__status.is-live  { color: var(--color-primary); }
.svz__status.is-error { color: var(--color-error); }
.svz__renderer {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-secondary);
  margin: 0 0 var(--space-md);
}
.svz__renderer.is-fallback { color: var(--color-warning); }

/* ── Canvas stage ── */
.svz__stage {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px;
  overflow: hidden;
}
#gl-canvas {
  display: block;
  width: 100%;
  height: 560px;
  background: #04060a;
  border-radius: var(--radius-sm);
}
.svz__overlay {
  position: absolute;
  top: 18px;
  left: 24px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgba(0, 229, 255, 0.85);
  pointer-events: none;
  text-shadow: 0 0 4px #000;
  white-space: pre-line;
}

/* ── Controls grid ── */
.svz__controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.svz__control { min-width: 0; }
.svz__control--toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}
.svz__val {
  font-family: var(--font-mono);
  color: var(--color-secondary);
  font-weight: 600;
  float: right;
}
.svz__select {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: var(--space-xs) var(--space-sm);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.svz__select:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--glow-sm); }
.svz__slider {
  width: 100%;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.svz__toggle { align-self: flex-start; }
.svz__toggle[aria-pressed="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Live readouts ── */
.svz__readouts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.svz__stat {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}
.svz__stat-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.svz__stat-value {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--color-primary);
  font-weight: 600;
  margin-top: 2px;
  word-break: break-all;
}

/* ── Prose / steps ── */
.svz__prose {
  color: var(--color-text);
  line-height: 1.7;
}
.svz__prose h3 {
  color: var(--color-secondary);
  font-family: var(--font-display);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  font-size: var(--fs-md);
}
.svz__prose p { margin-bottom: var(--space-sm); }
.svz__steps {
  color: var(--color-text);
  line-height: 1.7;
  margin-left: var(--space-lg);
}
.svz__steps li { margin-bottom: var(--space-sm); }

/* Hero honesty note — reuse muted styling, accent left border */
.svz-note {
  max-width: 760px;
  margin: var(--space-md) auto 0;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  background: rgba(255, 179, 0, 0.05);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  text-align: left;
}

/* ── Responsive ── */
@media (max-width: 992px) {
  .svz__controls { grid-template-columns: repeat(2, 1fr); }
  .svz__readouts { grid-template-columns: repeat(3, 1fr); }
  #gl-canvas { height: 440px; }
}
@media (max-width: 768px) {
  .svz__controls { grid-template-columns: 1fr; }
  .svz__readouts { grid-template-columns: repeat(2, 1fr); }
  #gl-canvas { height: 360px; }
}
@media (max-width: 480px) {
  .svz__readouts { grid-template-columns: 1fr 1fr; }
  #gl-canvas { height: 300px; }
  .svz__stat-value { font-size: var(--fs-base); }
}