/* ── Global custom range slider ───────────────────────────────────────────────
   Both the fill gradient and the thumb position are animated by RAF easing
   in /js/components/slider.js — no CSS @property dependency needed.

   The thumb uses the individual CSS `translate` + `scale` properties
   (Chrome 104+, Firefox 103+) so each can be controlled independently:
     - translate: var(--thumb-offset, 0px) 0  → driven by JS RAF loop
     - scale: 1 / 1.2 / 1.15                  → driven by CSS :hover/:active
   ─────────────────────────────────────────────────────────────────────────── */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;  /* must be >= thumb height so the full click area is reachable */
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  align-self: center;
  padding: 0;
  margin: 0;
}

/* ── Track - WebKit / Blink ─────────────────────────────────────────────────── */

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  border: none;
  background: linear-gradient(
    to right,
    var(--accent)    0%,
    var(--accent)    var(--slider-fill, 0%),
    var(--surface-3) var(--slider-fill, 0%),
    var(--surface-3) 100%
  );
}

/* ── Thumb - WebKit / Blink ─────────────────────────────────────────────────── */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  cursor: grab;
  /* Center 16px thumb on 4px track: -(16-4)/2 = -6px */
  margin-top: -6px;

  /* translate is driven by --thumb-offset (RAF in slider.js) – no transition on it.
     scale gets its own transition for the hover/active spring effect. */
  translate: var(--thumb-offset, 0px) 0;
  scale: 1;
  transition: scale 0.14s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.12s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  scale: 1.2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
  scale: 1.15;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* ── Track - Firefox ────────────────────────────────────────────────────────── */

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  border: none;
}

/* Firefox native filled-track element */
input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}

/* ── Thumb - Firefox ────────────────────────────────────────────────────────── */

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  cursor: grab;
  translate: var(--thumb-offset, 0px) 0;
  scale: 1;
  transition: scale 0.14s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.12s ease;
}

input[type="range"]::-moz-range-thumb:hover   { scale: 1.2; }
input[type="range"]:active::-moz-range-thumb  { cursor: grabbing; scale: 1.15; }

/* ── Focus ring ─────────────────────────────────────────────────────────────── */

input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}