/* PURE FILTER · CALIBRATED HARDWARE SCALES
 * Visual-only scale rings for HP / Resonance / LP.
 * The 270deg travel matches the real knob rotation (-135deg -> +135deg).
 */

.pf-knob-wrap{overflow:visible}

.pf-param-scale{
  position:absolute;
  inset:-21px;
  z-index:2;
  pointer-events:none;
  color:#353b36;
  font:800 7px/1 "Courier New",monospace;
  letter-spacing:.02em;
  text-shadow:0 1px rgba(255,255,255,.72);
}

.pf-param-scale svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 1px rgba(255,255,255,.55));
}

.pf-param-scale .pf-scale-arc{
  fill:none;
  stroke:rgba(61,68,63,.72);
  stroke-width:1.45;
  stroke-linecap:round;
}

.pf-param-scale .pf-scale-arc-hi{
  fill:none;
  stroke:rgba(255,255,255,.72);
  stroke-width:.55;
  transform:translateY(-.45px);
}

.pf-param-scale .pf-scale-tick{
  stroke:rgba(57,64,59,.62);
  stroke-width:1.05;
  stroke-linecap:round;
}

.pf-param-scale .pf-scale-tick.is-major{
  stroke:rgba(40,46,42,.90);
  stroke-width:1.65;
}

.pf-param-scale .pf-scale-label{
  position:absolute;
  min-width:34px;
  text-align:center;
  white-space:nowrap;
}

.pf-param-scale .pf-scale-label--min{
  left:1px;
  bottom:8px;
  transform:translate(-4%,-3%);
}

.pf-param-scale .pf-scale-label--mid{
  left:50%;
  top:0;
  transform:translate(-50%,-20%);
}

.pf-param-scale .pf-scale-label--max{
  right:1px;
  bottom:8px;
  transform:translate(4%,-3%);
}

.pf-param-scale .pf-scale-clean{
  display:block;
  margin-top:3px;
  color:#69745f;
  font-size:5.5px;
  letter-spacing:.10em;
}

/* Give the calibration ring physical breathing room around the knob. */
.pf-channel:not(.pf-resonance) .pf-knob-wrap{
  margin-top:27px;
  margin-bottom:17px;
}

/* Resonance needs more headroom because its top marker has two lines (0.71 / CLEAN). */
.pf-resonance .pf-knob-wrap{
  margin-top:48px;
  margin-bottom:17px;
}

.pf-resonance .pf-param-scale{
  inset:-20px;
  font-size:6.5px;
}

/* Keep 0.71 / CLEAN completely above the 12-o'clock major tick. */
.pf-resonance .pf-param-scale .pf-scale-label--mid{
  top:-15px;
  transform:translateX(-50%);
  z-index:4;
  line-height:1;
  padding:1px 3px 2px;
  border-radius:2px;
  background:rgba(222,225,220,.94);
  box-shadow:0 1px rgba(255,255,255,.65);
}

.pf-resonance .pf-param-scale .pf-scale-clean{
  margin-top:2px;
  font-size:5px;
}

.pf-channel.is-filter-off .pf-param-scale{opacity:.38}

@media(max-width:820px){
  .pf-param-scale{inset:-18px;font-size:6.5px}
  .pf-resonance .pf-param-scale{inset:-18px}
  .pf-resonance .pf-knob-wrap{margin-top:44px}
  .pf-resonance .pf-param-scale .pf-scale-label--mid{top:-13px}
  .pf-channel:not(.pf-resonance) .pf-knob-wrap{margin-top:25px;margin-bottom:15px}
}