/* ============================================================
   Utilities Bunker — Audio EQ (Biquad) Peaking EQ (v2.1)
   File: /assets/css/modules/electronics/audio-eq-biquad.v2.1.css
   Purpose:
   - Tool-only layout + output styling + compact EQ UI affordances
   - Mobile-first, 44x44 touch targets, clamp typography
   Notes:
   - DO NOT edit ub-toolkit.v2.1.css
   - Keep all styles scoped to this tool
   ============================================================ */

/* ============================== Local tokens (tool-scoped) ============================== */
:root{
  --eq-radius: 16px;
  --eq-gap: 14px;
  --eq-soft: rgba(0,0,0,.06);
}

/* ============================== Tool hero layout ============================== */
/* Two-column at desktop, stack at tablet/mobile */
.ub-eq-hero{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--eq-gap);
}

@media (max-width: 980px){
  .ub-eq-hero{
    grid-template-columns: 1fr;
  }
}

/* ============================== Output card refinements ============================== */
.ub-eq-out{
  border: 1px solid var(--ub-border);
  border-radius: var(--eq-radius);
  background: var(--ub-surface-2);
  padding: 12px;
}

.ub-eq-out .ub-out-grid{
  margin-top: 0;
}

.ub-eq-out .ub-v{
  font-size: clamp(16px, 1.05rem + .4vw, 20px);
}

/* Slightly tighter KPI layout on small screens */
@media (max-width: 520px){
  .ub-eq-out{
    padding: 10px;
  }
  .ub-eq-out .ub-out-grid{
    grid-template-columns: 1fr;
  }
}

/* ============================== Work area formatting ============================== */
.ub-work{
  font-family: var(--ub-mono);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ============================== Details / summary (tool polish) ============================== */
.ub-collapsible summary{
  cursor:pointer;
  font-weight: 950;
  min-height: 44px;
  display:flex;
  align-items:center;
}

.ub-collapsible summary:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--ub-focus);
  border-radius: 12px;
}

/* ============================== Preset buttons consistency ============================== */
#presetVocal,
#presetKick,
#presetNotch{
  white-space: normal;
  text-align: left;
}

/* ============================== Better spacing for checkbox row ============================== */
.ub-eq-hero .ub-chip{
  min-height: 44px;
}

/* Ensure disabled inputs look clearly disabled (tool-only) */
.ub-eq-hero input:disabled{
  opacity: .65;
  cursor: not-allowed;
}

/* ============================== Rail full-width helper (tool-only) ============================== */
.ub-btn--block{
  width: 100%;
}

/* ============================== Container query hook (optional, future) ============================== */
.ub-eq-cq{
  container-type: inline-size;
}

/* ============================== Touch target reinforcement for select/input (tool-only) ============================== */
.ub-eq-hero select,
.ub-eq-hero input{
  min-height: 44px;
}

/* ============================== Dark mode micro-tuning (tool-only, subtle) ============================== */
html.ub-theme-dark :root{
  /* No token overrides here (keep global tokens), but we can adjust local soft if needed */
}

html.ub-theme-dark .ub-eq-out{
  background: rgba(255,255,255,.03);
}