/* ==========================================================================
   Skeuomorphic equalizer knobs (see eq-knobs.js)
   Porcelain knobs in Light mode, graphite knobs in Dark mode.
   ========================================================================== */
:root {
  --knob-face: radial-gradient(circle at 32% 26%, #6a6f7a 0 6%, #464a53 26%, #2c2f36 58%, #1d1f24 82%, #16181c 100%);
  --knob-cap: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
              radial-gradient(circle at 66% 74%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 60%);
  --knob-bezel: linear-gradient(160deg, #2b2e35, #07080a 70%);
  --knob-mark: #eef1f6;
  --knob-mark-glow: rgba(255, 255, 255, 0.55);
  --knob-tick: rgba(255, 255, 255, 0.26);
  --knob-tick-major: rgba(255, 255, 255, 0.5);
  --knob-shadow: 0 12px 22px rgba(0, 0, 0, 0.55), 0 3px 6px rgba(0, 0, 0, 0.5);
  --knob-label: rgba(232, 236, 242, 0.62);
  --knob-ripple: rgba(255, 255, 255, 0.028);
}

:root[data-theme="light"] {
  --knob-face: radial-gradient(circle at 32% 26%, #ffffff 0 14%, #f6f7f9 34%, #e9ebef 62%, #d6d9df 86%, #c6cad1 100%);
  --knob-cap: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 52%),
              radial-gradient(circle at 66% 76%, rgba(120, 128, 145, 0.18), rgba(0, 0, 0, 0) 60%);
  --knob-bezel: linear-gradient(160deg, #30333a, #0d0e11 70%);
  --knob-mark: #1a1c21;
  --knob-mark-glow: rgba(0, 0, 0, 0.15);
  --knob-tick: rgba(60, 66, 80, 0.32);
  --knob-tick-major: rgba(40, 44, 54, 0.6);
  --knob-shadow: 0 12px 20px rgba(80, 92, 116, 0.38), 0 3px 6px rgba(60, 70, 90, 0.28);
  --knob-label: rgba(44, 50, 64, 0.72);
  --knob-ripple: rgba(120, 130, 150, 0.07);
}

/* ---------- knob ---------- */
.eq-knob-wrap {
  --s: 62px;
  --knob-accent: #5ab8ff;
  display: grid;
  place-items: center;
  width: calc(var(--s) + 30px);
  height: calc(var(--s) + 30px);
  margin: 2px auto;
}
.eq-knob-wrap.eq-knob-lg { --s: 82px; }
.eq-knob-wrap.eq-knob-sm { --s: 46px; }

.eq-knob {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: ns-resize;
  touch-action: none;
  outline: none;
  user-select: none;
}

/* tick dots */
.eq-knob-ticks { position: absolute; inset: 0; pointer-events: none; }
.eq-knob-ticks i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--knob-tick);
  transform: rotate(var(--a)) translateY(calc(var(--s) / -2 - 10px));
  transition: background 120ms ease, box-shadow 120ms ease;
}
.eq-knob-ticks i.major { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--knob-tick-major); }
.eq-knob-ticks i.lit {
  background: var(--knob-accent);
  box-shadow: 0 0 6px var(--knob-accent);
}

/* glowing value arc hugging the bezel */
.eq-knob-arc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--s) + 8px);
  height: calc(var(--s) + 8px);
  margin: calc((var(--s) + 8px) / -2) 0 0 calc((var(--s) + 8px) / -2);
  border-radius: 50%;
  background: conic-gradient(from var(--from, -135deg), var(--knob-accent) 0 var(--sweep, 0deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  filter: drop-shadow(0 0 5px var(--knob-accent));
  pointer-events: none;
}

/* dark bezel ring */
.eq-knob-bezel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  padding: calc(var(--s) * 0.06);
  border-radius: 50%;
  background: var(--knob-bezel);
  box-shadow: var(--knob-shadow), inset 0 1px 1px rgba(255, 255, 255, 0.18);
  transition: box-shadow 160ms ease;
}

/* knob face: fixed lighting, only the indicator turns */
.eq-knob-body {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--knob-face);
  box-shadow:
    inset 0 -5px 9px rgba(0, 0, 0, 0.22),
    inset 0 3px 5px rgba(255, 255, 255, 0.35);
}
.eq-knob-cap {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: var(--knob-cap);
  box-shadow:
    inset 1px 2px 3px rgba(255, 255, 255, 0.28),
    inset -2px -3px 6px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}
.eq-knob-dot {
  position: absolute;
  inset: 0;
  transform: rotate(var(--rot, 0deg));
  transition: transform 60ms linear;
}
.eq-knob-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 13%;
  width: 9%;
  height: 13%;
  margin-left: -4.5%;
  border-radius: 50%;
  background: var(--knob-mark);
  box-shadow: 0 0 4px var(--knob-mark-glow), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.eq-knob:hover .eq-knob-bezel,
.eq-knob:focus-visible .eq-knob-bezel,
.eq-knob-wrap.turning .eq-knob-bezel {
  box-shadow: var(--knob-shadow), inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 0 0 2px color-mix(in srgb, var(--knob-accent) 70%, transparent), 0 0 18px color-mix(in srgb, var(--knob-accent) 55%, transparent);
}

/* ---------- hide the original sliders (they stay as the data source) ---------- */
.effect-fader .eq-knob-hidden-rail { display: none !important; }
.eq-knob-host input.eq-knob-source { display: none !important; }
.eq-knob-wrap.eq-knob-xl { --s: 112px; }

/* ---------- Mixer page ---------- */
.eq-mixer {
  padding: 16px 12px 18px;
  border-radius: 18px;
}
:root:not(.widget-mode) .eq-mixer {
  background:
    repeating-radial-gradient(circle at 50% 58%, var(--knob-ripple) 0 2px, transparent 3px 24px),
    var(--neu-bg, transparent);
  box-shadow: var(--neu-raised, none);
  border: 1px solid var(--neu-edge, transparent);
}
.eq-mixer h4 {
  margin: 0 0 6px;
  color: var(--knob-label);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.eq-mixer-deck {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 4px;
  padding: 8px 0 4px;
}
.eq-mixer-tile, :root:not(.widget-mode) .effect-fader.eq-mixer-tile {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.effect-fader.eq-mixer-tile .eq-knob-wrap { order: 1; }
.effect-fader.eq-mixer-tile .effect-fader-label,
.eq-knob-name {
  order: 2;
  margin-top: 2px;
  color: var(--knob-label) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.effect-fader.eq-mixer-tile .effect-fader-controls {
  order: 3;
  width: auto !important;
  max-width: none !important;
  grid-template-columns: 20px auto 20px !important;
  gap: 5px !important;
  margin-top: 4px;
}
.effect-fader.eq-mixer-tile .effect-fader-value {
  min-width: 42px;
  overflow: visible !important;
  text-overflow: clip !important;
  font-variant-numeric: tabular-nums;
}
.eq-volume-host output {
  order: 3;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #5ab8ff !important;
}
:root[data-theme="light"] .eq-volume-host output { color: #1f7fd0 !important; }
.eq-volume-host .eq-knob-name { font-size: 11px !important; }

/* ---------- slimmer fader cards everywhere else ---------- */
.effect-fader-bank {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px !important;
  min-height: 0 !important;
}
.effect-fader-bank .effect-fader:not(.eq-mixer-tile),
.studio-trims .effect-fader,
.studio-character-fader .effect-fader {
  width: 84px;
  flex: 0 0 84px;
  grid-template-rows: 24px 142px 24px !important;
  padding: 8px 3px 8px !important;
}
.effect-fader .effect-fader-controls {
  width: 78px !important;
  grid-template-columns: 20px minmax(0, 1fr) 20px !important;
  gap: 3px !important;
}
.effect-fader .effect-stepper {
  width: 20px !important; min-width: 20px !important; max-width: 20px !important;
  height: 20px !important; min-height: 20px !important; max-height: 20px !important;
}
.effect-fader .effect-fader-value { font-size: 10.5px !important; }
.effect-fader .effect-fader-label { font-size: 10.5px !important; }

/* Sound tab trims and character strength use the same fader cards */
.studio-trims {
  display: flex !important;
  justify-content: center;
  gap: 10px !important;
  padding: 12px 8px;
  border-radius: 16px;
}
:root:not(.widget-mode) .studio-trims {
  background: var(--neu-bg, transparent);
  box-shadow: var(--neu-inset, none);
}
.studio-fader-preampDb { --effect-color: #7ad7ff; }
.studio-fader-outputDb { --effect-color: #5ab8ff; }
.studio-fader-bassCharacter { --effect-color: #ffb347; }
.studio-fader-voiceStrength { --effect-color: #c08bff; }
.studio-character-fader {
  display: flex;
  justify-content: center;
  margin: 10px 0 4px;
}
.studio-trims .effect-fader input[type="range"],
.studio-character-fader .effect-fader input[type="range"] { accent-color: var(--effect-color); }

@media (prefers-reduced-motion: reduce) {
  .eq-knob-dot, .eq-knob-ticks i, .eq-knob-bezel { transition: none; }
}

.studio-trims .effect-fader input[type="range"],
.studio-character-fader .effect-fader input[type="range"] {
  width: 142px !important;
  height: 42px !important;
  margin: 0 !important;
}

/* Mixer layout like the reference: big center knob, two knobs on each side */
.eq-mixer-deck {
  grid-template-columns: 1fr 1.5fr 1fr !important;
  grid-template-areas: "bass vol pitch" "speed vol reverb";
  row-gap: 18px !important;
  padding: 18px 4px 10px !important;
}
.eq-mixer-deck .effect-fader-bass { grid-area: bass; }
.eq-mixer-deck .effect-fader-speed { grid-area: speed; }
.eq-mixer-deck .effect-fader-pitch { grid-area: pitch; }
.eq-mixer-deck .effect-fader-reverbMix { grid-area: reverb; }
.eq-mixer-deck .eq-volume-host { grid-area: vol; align-self: center; }
.eq-mixer-deck .eq-knob-wrap.eq-knob-lg { --s: 86px; }
.eq-mixer-deck .eq-knob-wrap.eq-knob-xl { --s: 150px; }
.eq-mixer-deck .eq-knob-xl .eq-knob-ticks i { transform: rotate(var(--a)) translateY(calc(var(--s) / -2 - 13px)); }
.eq-mixer-deck .eq-knob-xl .eq-knob-arc { width: calc(var(--s) + 12px); height: calc(var(--s) + 12px); margin: calc((var(--s) + 12px) / -2) 0 0 calc((var(--s) + 12px) / -2); }
.eq-mixer-deck .eq-knob-wrap.eq-knob-xl { width: calc(var(--s) + 38px); height: calc(var(--s) + 38px); }
.effect-fader.eq-mixer-tile .effect-fader-label {
  align-self: center !important;
  text-align: center !important;
  max-width: none !important;
}
.eq-volume-host .eq-knob-name { font-size: 12px !important; letter-spacing: 0.3em; margin-top: 6px; }
.eq-volume-host output { font-size: 18px; }

/* fader card values must never be cut off */
.effect-fader-bank .effect-fader:not(.eq-mixer-tile),
.studio-trims .effect-fader,
.studio-character-fader .effect-fader {
  width: 92px;
  flex: 0 0 92px;
}
.effect-fader .effect-fader-controls {
  width: 88px !important;
  grid-template-columns: 18px minmax(0, 1fr) 18px !important;
  gap: 2px !important;
}
.effect-fader .effect-stepper {
  width: 18px !important; min-width: 18px !important; max-width: 18px !important;
  height: 18px !important; min-height: 18px !important; max-height: 18px !important;
  font-size: 12px !important;
}
.effect-fader .effect-fader-value {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap;
  font-size: 10px !important;
  letter-spacing: -0.01em;
  text-align: center;
}
.studio-character-fader .effect-fader { width: 120px; flex: 0 0 120px; }
.studio-character-fader .effect-fader .effect-fader-controls { width: 100px !important; }