/* Shared hyper-real knobs & faders */

/* ---------- Knob ---------- */
.ma-knob-wrap {
  --k: 0.6667;
  position: relative;
  width: calc(120px * var(--k));
  height: calc(120px * var(--k));
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
}
.ma-knob-wrap.ma-knob-lg { --k: 1; }
.ma-knob-wrap.ma-knob-md { --k: 0.6667; }
.ma-knob-wrap.ma-knob-sm { --k: 0.5; }

.ma-knob-shadow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(82px * var(--k));
  height: calc(82px * var(--k));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 calc(14px * var(--k)) calc(22px * var(--k)) rgba(0,0,0,.85),
    0 calc(38px * var(--k)) calc(70px * var(--k)) rgba(0,0,0,.65);
  z-index: 0;
}

.ma-knob-tick-ring {
  position: absolute;
  inset: calc(-8px * var(--k));
  pointer-events: none;
  z-index: 2;
}
.ma-knob-tick-ring .ma-knob-tick {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(2px * var(--k));
  height: calc(7px * var(--k));
  background: rgba(180,180,190,.35);
  transform-origin: 50% calc(68px * var(--k));
  border-radius: 1px;
}
.ma-knob-tick-ring .ma-knob-tick.major {
  height: calc(10px * var(--k));
  background: rgba(220,220,230,.65);
}

.ma-knob {
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: none;
  z-index: 1;
}

.ma-knob-glare {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(80px * var(--k));
  height: calc(80px * var(--k));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.10) 0 14%, transparent 38%),
    radial-gradient(circle at 50% 0%, rgba(0,0,0,.18) 0 25%, transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,.3) 0 35%, transparent 65%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.08),
    inset 0 -4px 8px rgba(0,0,0,.45);
}

.ma-knob-value {
  text-align: center;
  margin-top: 6px;
  font-size: .7rem;
  color: #c0c0cc;
  font-variant-numeric: tabular-nums;
}

/* ---------- Fader ---------- */
.ma-fader-wrap {
  --fh: 160px;
  --fw: 48px;
  position: relative;
  width: var(--fw);
  height: var(--fh);
  margin: 0 auto;
  background: linear-gradient(180deg, #111118, #0c0c12);
  border-radius: 10px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.8),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 1px 0 rgba(255,255,255,.03);
}
.ma-fader-wrap.ma-fader-tall { --fh: 220px; }
.ma-fader-wrap.ma-fader-short { --fh: 120px; }

.ma-fader-track {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 8px;
  height: calc(var(--fh) - 24px);
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(90deg, #050508, #0f0f16 40%, #050508);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.9),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 1px 0 rgba(255,255,255,.04);
}

.ma-fader-scale {
  position: absolute;
  right: 4px;
  top: 12px;
  height: calc(var(--fh) - 24px);
  width: 20px;
}
.ma-fader-scale .ma-fader-tick {
  position: absolute;
  right: 0;
  height: 1px;
}
.ma-fader-scale .ma-fader-tick.major {
  width: 10px;
  background: rgba(220,220,230,.85);
}
.ma-fader-scale .ma-fader-tick.minor {
  width: 5px;
  background: rgba(200,200,210,.55);
}
.ma-fader-scale .ma-fader-num {
  position: absolute;
  right: 12px;
  transform: translateY(-50%);
  font-size: .5rem;
  color: #9a9aa8;
  font-family: 'Space Grotesk', sans-serif;
}

.ma-fader-thumb {
  position: absolute;
  left: 50%;
  width: 32px;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 4px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.9) 0%,
      #d8d8e0 8%,
      #9a9aa8 22%,
      #f0f0f5 38%,
      #b0b0c0 55%,
      #808088 72%,
      #d0d0d8 88%,
      #a0a0a8 100%);
  box-shadow:
    0 4px 8px rgba(0,0,0,.55),
    0 1px 2px rgba(255,255,255,.25) inset,
    inset 0 -2px 4px rgba(0,0,0,.25);
  cursor: pointer;
  touch-action: none;
  z-index: 2;
}
.ma-fader-thumb::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 10px;
  height: 3px;
  border-radius: 1.5px;
  background: linear-gradient(90deg, transparent, #00d4aa, transparent);
  opacity: .9;
  box-shadow: 0 0 4px rgba(0,212,170,.4);
}
.ma-fader-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,.12) 0px,
    rgba(0,0,0,.12) 2px,
    transparent 2px,
    transparent 5px
  );
  pointer-events: none;
}

.ma-fader-value {
  text-align: center;
  margin-top: 6px;
  font-size: .65rem;
  color: #c0c0cc;
  font-variant-numeric: tabular-nums;
}