/*
 * The shared range slider (components/ui/slider.js — every `Slider.create`).
 *
 * The input is a 20 px band and the WHOLE band is the hit area: the thumb is
 * drawn 18 px and the track 6 px inside it, so the thumb can be grabbed on any
 * of its pixels (with the old 8 px Tailwind track, only the thin strip through
 * the thumb's middle took the pointer — "the ball is sometimes not possible to
 * grab"). The accent colour comes from the component (`--ui-range-accent`).
 * Must load after tailwind.min.css.
 */
input[type="range"].ui-range {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  --ui-range-accent: #4f46e5;
  --ui-range-track: #e5e7eb;
  --ui-range-ring: #ffffff;
}

input[type="range"].ui-range:focus { outline: none; }

/* WebKit / Blink */
input[type="range"].ui-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--ui-range-track);
}
input[type="range"].ui-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--ui-range-accent);
  border: 2px solid var(--ui-range-ring);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
input[type="range"].ui-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35);
}

/* Firefox */
input[type="range"].ui-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--ui-range-track);
  border: none;
}
input[type="range"].ui-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ui-range-accent);
  border: 2px solid var(--ui-range-ring);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
input[type="range"].ui-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35);
}

input[type="range"].ui-range:disabled { cursor: not-allowed; }

/* Dark theme (css/dark-theme.css leaves range inputs alone) */
html.dark input[type="range"].ui-range:not(.theme-exempt) {
  --ui-range-track: #3f3f46;
  --ui-range-ring: #1f2937;
}