/* oklch.fyi: inset neutral track, white circular handle, 150ms press feedback.
   Both volume and playback use this component; input rendering is invisible. */
.audio-slider {
  --slider-position: 0%;
  position: relative;
  display: block;
  flex: 1;
  min-width: 0;
  height: 32px;
  user-select: none;
  -webkit-user-select: none;
}
.slider-rail {
  position: absolute;
  inset: 13px 8px;
  border-radius: 999px;
  background: var(--color-neutral-100);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-black) 3.14%, transparent);
  pointer-events: none;
}
.volume .slider-rail {
  inset-inline: 0;
  background: color-mix(in srgb, var(--track) 18%, var(--color-white));
}
.slider-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--slider-position);
  border-radius: inherit;
  background: var(--track, var(--color-neutral-700));
}
.slider-thumb {
  position: absolute;
  top: 50%;
  left: var(--slider-position);
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
}
.volume .slider-thumb {
  /* Keep the whole 16px handle inside the full-width rail at both endpoints. */
  transform: translate(calc(0% - var(--slider-position)), -50%);
}
.volume .slider-handle {
  transform-origin: var(--slider-position) center;
}
.slider-handle {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-black) 9.41%, transparent), 0 2px 4px color-mix(in srgb, var(--color-black) 7.06%, transparent);
  transition: scale 150ms cubic-bezier(0, 0, .2, 1), box-shadow 150ms ease;
}
.audio-slider > .slider-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
/* Native thumb travel stays inside the input, matching the volume handle.
   Playback retains its 8px rail inset and centered custom handle. */
.slider-input::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.slider-input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border: 0; }
.slider-input::-moz-range-track { height: 6px; background: transparent; }
.slider-input::-moz-range-thumb { width: 16px; height: 16px; border: 0; }
.audio-slider:has(.slider-input:focus-visible) .slider-handle {
  outline: 2px solid var(--color-neutral-600);
  outline-offset: 3px;
}
.audio-slider:has(.slider-input:active) .slider-handle { scale: 1.1; }
@media (hover: hover) and (pointer: fine) {
  .audio-slider:hover .slider-handle { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-black) 14.12%, transparent), 0 2px 5px color-mix(in srgb, var(--color-black) 10.20%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .slider-handle { transition: none; }
  .audio-slider:has(.slider-input:active) .slider-handle { scale: 1; }
}