/* knob — realistic dial. Concentric grooves, beveled face, lit indicator.
 * JS sets --iblis-knob-angle on drag/wheel; everything else is CSS. */

.iblis-knob {
  --knob-size: 64px;
  --knob-rim:  color-mix(in srgb, var(--color-bg-base) 100%, black 20%);
  --knob-face: color-mix(in srgb, var(--color-bg-elevated) 100%, white 6%);
  --knob-face-low: color-mix(in srgb, var(--color-bg-base) 100%, black 12%);
  --knob-tick: color-mix(in srgb, var(--color-text-muted) 100%, transparent 40%);

  position: relative; display: inline-block;
  width: var(--knob-size); height: var(--knob-size);
  border-radius: var(--radius-full);
  cursor: ns-resize;
  user-select: none;
  -webkit-user-select: none;
  background:
    /* outer rim */
    radial-gradient(circle at 50% 50%, transparent 38%,
      var(--knob-rim) 38%, var(--knob-rim) 50%, transparent 50%),
    /* face: light from upper-left, shadow lower-right */
    radial-gradient(circle at 35% 30%,
      var(--knob-face) 0%,
      var(--knob-face) 38%,
      var(--knob-face-low) 70%,
      color-mix(in srgb, var(--color-bg-base) 100%, black 25%) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 4px rgba(0,0,0,0.55),
    0 2px 4px rgba(0,0,0,0.55),
    0 6px 14px rgba(0,0,0,0.45);
  transition: box-shadow var(--motion-base);
}

/* tick marks ring — drawn with conic-gradient */
.iblis-knob::before {
  content: "";
  position: absolute; inset: -8px;
  border-radius: var(--radius-full);
  background:
    conic-gradient(from -135deg,
      var(--knob-tick) 0deg 1.5deg, transparent 1.5deg 30deg,
      var(--knob-tick) 30deg 31.5deg, transparent 31.5deg 60deg,
      var(--knob-tick) 60deg 61.5deg, transparent 61.5deg 90deg,
      var(--knob-tick) 90deg 91.5deg, transparent 91.5deg 120deg,
      var(--knob-tick) 120deg 121.5deg, transparent 121.5deg 150deg,
      var(--knob-tick) 150deg 151.5deg, transparent 151.5deg 180deg,
      var(--knob-tick) 180deg 181.5deg, transparent 181.5deg 210deg,
      var(--knob-tick) 210deg 211.5deg, transparent 211.5deg 240deg,
      var(--knob-tick) 240deg 241.5deg, transparent 241.5deg 270deg);
  -webkit-mask:
    radial-gradient(circle, transparent 50%, #000 50%, #000 56%, transparent 56%);
          mask:
    radial-gradient(circle, transparent 50%, #000 50%, #000 56%, transparent 56%);
  pointer-events: none;
}

/* indicator pip — rotates with --iblis-knob-angle */
.iblis-knob::after {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 3px; height: 18px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-accent) 100%, white 25%),
      var(--color-accent));
  transform-origin: 50% calc(var(--knob-size) / 2 - 6px);
  transform: translateX(-50%) rotate(var(--iblis-knob-angle, 0deg));
  border-radius: var(--radius-full);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--color-accent) 60%, transparent),
    0 1px 2px rgba(0,0,0,0.6);
  transition: box-shadow var(--motion-base);
}

.iblis-knob:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -2px 4px rgba(0,0,0,0.55),
    0 0 0 1px color-mix(in srgb, var(--color-accent-cool) 30%, transparent),
    0 4px 8px rgba(0,0,0,0.6),
    0 8px 18px rgba(0,0,0,0.50);
}
.iblis-knob:hover::after {
  box-shadow:
    0 0 10px color-mix(in srgb, var(--color-accent) 80%, transparent),
    0 1px 2px rgba(0,0,0,0.7);
}
.iblis-knob:focus-visible {
  outline: 2px solid var(--color-accent-cool);
  outline-offset: 4px;
}

/* size variants */
.iblis-knob-sm { --knob-size: 48px; }
.iblis-knob-lg { --knob-size: 88px; }