/* ============================================================
   knob.css — OP-1-inspired rotary knobs (shared by all tools)
   Flat colored discs with a white pointer notch. No gradients.
   Layout per control: [ knob ]  VALUE over label
   ============================================================ */

.ctl.knobified {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  cursor: default;
}

/* the original slider stays in the DOM (all the wiring still talks
   to it) but is invisible */
.ctl.knobified .knob-input { display: none; }
.ctl.knobified .ticks { display: none; }

.knob {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}
.knob.dragging {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 3px 10px rgba(0, 0, 0, 0.45);
}

/* the pointer notch — a small white bar rotated around the center */
.knob-dot { position: absolute; inset: 0; pointer-events: none; }
.knob-dot::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  width: 4px;
  height: 13px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
}

/* text block: big value on top, small uppercase label under it */
.knob-text { min-width: 0; }
.knob-text span {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted, #8b90c0);
}
.knob-text em {
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text, #e7e9ff);
}