/* PURE FILTER · WHITE HARDWARE KNOBS
 * Visual-only override inspired by chunky analog/VST rotary hardware.
 * No DSP or interaction changes.
 */

/* Large HP/LP rotary bodies */
.pf-knob-wrap{
  width:148px;
  height:148px;
  margin:17px auto 9px;
  filter:drop-shadow(0 8px 7px rgba(0,0,0,.18));
}

/* Clean smooth metallic bezel — no black serrated/knurled blades */
.pf-knob-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0 4%,transparent 5%),
    linear-gradient(145deg,#f5f6f3 0%,#cfd3ce 28%,#8f9690 54%,#e9ebe7 76%,#a8aea9 100%);
  -webkit-mask:radial-gradient(circle,transparent 0 64%,#000 65% 76%,transparent 77%);
  mask:radial-gradient(circle,transparent 0 64%,#000 65% 76%,transparent 77%);
  opacity:1;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.20));
}

.pf-knob{
  inset:15px;
  z-index:1;
  border:2px solid #777d78;
  background:linear-gradient(145deg,#ffffff 0%,#f6f6f2 30%,#e8e9e5 62%,#cdd1cc 84%,#9ba19c 100%);
  box-shadow:
    0 12px 16px rgba(0,0,0,.30),
    0 4px 5px rgba(0,0,0,.25),
    inset 0 2px 2px rgba(255,255,255,.82),
    inset 0 -6px 9px rgba(78,86,80,.24),
    inset 5px 0 8px rgba(255,255,255,.12),
    0 0 0 3px #d7dad6,
    0 0 0 4px #7c837d,
    0 0 0 6px rgba(239,241,237,.92);
  filter:none;
}

/* Thin dark pointer like the reference, adapted to a white face */
.pf-knob::before{
  left:50%;
  top:13px;
  width:4px;
  height:39px;
  border-radius:3px;
  background:linear-gradient(90deg,#1e2220 0%,#454a46 58%,#151816 100%);
  box-shadow:1px 0 rgba(255,255,255,.78),0 1px 1px rgba(0,0,0,.18);
  transform-origin:50% 52px;
}

/* Inner bevel only — no specular dot/disc */
.pf-knob::after{
  content:"";
  position:absolute;
  inset:7px;
  width:auto;
  height:auto;
  left:7px;
  right:7px;
  top:7px;
  bottom:7px;
  transform:none;
  border:1px solid rgba(92,99,94,.18);
  border-radius:50%;
  background:none;
  box-shadow:inset 0 1px rgba(255,255,255,.30);
  pointer-events:none;
}

.pf-knob-wrap:hover .pf-knob{
  filter:brightness(1.01);
}

/* Resonance: same family, slightly smaller hardware */
.pf-resonance .pf-knob-wrap{
  width:128px;
  height:128px;
  margin-top:22px;
}

.pf-resonance .pf-knob{
  inset:14px;
  background:linear-gradient(145deg,#ffffff 0%,#f6f6f2 30%,#e8e9e5 62%,#cdd1cc 84%,#9ba19c 100%);
}

.pf-resonance .pf-knob::before{
  top:12px;
  height:31px;
  transform-origin:50% 43px;
}

/* Explicitly override the old E10 16x16 resonance centre/highlight disc. */
.pf-resonance .pf-knob::after{
  content:"";
  inset:6px;
  left:6px;
  right:6px;
  top:6px;
  bottom:6px;
  width:auto;
  height:auto;
  transform:none;
  border:1px solid rgba(92,99,94,.16);
  border-radius:50%;
  background:none;
  box-shadow:inset 0 1px rgba(255,255,255,.24);
}

/* Disabled filters keep the physical knob visible but clearly inactive */
.pf-channel.is-filter-off .pf-knob-wrap{
  opacity:.52;
  filter:grayscale(.15) drop-shadow(0 5px 5px rgba(0,0,0,.16));
}

@media(max-width:820px){
  .pf-knob-wrap{width:134px;height:134px}
  .pf-resonance .pf-knob-wrap{width:120px;height:120px}
}