/* Infrasound Generator — tool-specific overrides only. Signal generator (1–20 Hz sine), no mic. */

/* Hero caveat note — honest "can your device even do this" framing (cyan = informational) */
.inf-warn-note {
  max-width: 820px;
  margin: var(--space-md) auto 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  background: rgba(0, 229, 255, 0.04);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: left;
}
.inf-warn-note strong { color: var(--color-text-bright); }
.inf-warn-note em { color: var(--color-text); font-style: italic; }

/* Loud-infrasound / cone-protection safety warning (amber, stands out) */
.inf-safety {
  max-width: 820px;
  margin: var(--space-md) auto 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid rgba(255, 179, 0, 0.4);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-sm);
  background: rgba(255, 179, 0, 0.07);
  color: #ffd98a;
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: left;
}
.inf-safety strong { color: #ffe9bd; }

/* Section sub-heads inside the tool panel */
.inf-h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 var(--space-sm);
  color: var(--color-text-bright);
}

/* "Now playing / selected" readout block */
.inf-readout {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #060a08;
  text-align: center;
}
.inf-readout__freq {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--color-primary);
  text-shadow: var(--glow-sm);
}
.inf-readout__period {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--color-secondary);
}
.inf-readout__perceive {
  margin-top: var(--space-sm);
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Slow-oscillation waveform canvas */
.inf-wave {
  display: block;
  width: 100%;
  height: 150px;
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #050805;
}

/* Preset frequency grid */
.inf-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
@media (max-width: 560px) {
  .inf-presets { grid-template-columns: repeat(2, 1fr); }
}
.inf-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.inf-preset:hover { border-color: var(--color-primary); }
.inf-preset:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.inf-preset--active {
  border-color: var(--color-primary);
  background: rgba(0, 255, 65, 0.12);
  box-shadow: var(--glow-sm);
}
.inf-preset__hz { font-size: 1.15rem; color: var(--color-primary); }
.inf-preset__tag { font-size: 0.66rem; color: var(--color-text-muted); text-align: center; }

/* Frequency slider row */
.inf-slider-wrap { margin-bottom: var(--space-lg); }
.inf-range {
  width: 100%;
  margin-top: 8px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.inf-range:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.inf-slider-val { color: var(--color-primary); font-family: var(--font-mono); }

/* Master volume control */
.inf-vol-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.inf-vol-wrap label { color: var(--color-text); white-space: nowrap; }
.inf-vol {
  flex: 1 1 240px;
  min-width: 180px;
  accent-color: var(--color-primary);
}
.inf-volval {
  font-family: var(--font-mono);
  color: var(--color-primary);
  min-width: 3.5ch;
  text-align: right;
}

/* Transport row */
.inf-transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
@media (max-width: 560px) {
  .inf-transport { flex-direction: column; align-items: stretch; }
  .inf-transport .btn { width: 100%; }
}

/* Status line (live region) */
.inf-status {
  margin-top: var(--space-sm);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: rgba(0, 255, 65, 0.03);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  min-height: 1.2em;
}

/* Persistent (non-live) device-limit note under the controls */
.inf-nyquist {
  margin-top: var(--space-sm);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Tactile-perception guide callout */
.inf-tactile {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(0, 229, 255, 0.04);
}
.inf-tactile h3 { font-family: var(--font-display); font-size: 1rem; margin: 0 0 var(--space-sm); color: var(--color-secondary); }
.inf-tactile ul { margin: 0; padding-left: 1.3rem; color: var(--color-text); line-height: 1.6; }
.inf-tactile li { margin-bottom: 4px; }