/* compat.css — hand-written styles served as a plain stylesheet, loaded AFTER
 * app.css. Kept out of the Tailwind/Lightning CSS build so vendor prefixes
 * (-webkit-) survive and so rules WebKit needs together aren't split apart.
 */

/* ── Pricing range slider ──────────────────────────────────────────────────
 * Lives here (not input.css) because WebKit/Safari needs -webkit-appearance:none
 * on the input AND the thumb, in the same rule as their sizing — and Lightning
 * CSS strips that prefix from the compiled app.css.
 *
 * The visible track is drawn as a 6px gradient on the INPUT's own background
 * (universally supported) instead of relying on ::-webkit-slider-runnable-track,
 * which renders inconsistently across WebKit. A fixed 16px thumb lets the weighted
 * stop labels align to the thumb centre via calc() (see landingPricing).
 * Colours reuse the theme triplets defined by app.css (rgb(var(--…))).
 */
.price-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1rem;            /* room for the 16px thumb */
  margin: 0;
  cursor: pointer;
  border-radius: 9999px;
  /* 6px track, vertically centred, full width */
  background: linear-gradient(rgb(var(--muted)), rgb(var(--muted)))
              no-repeat center / 100% 0.375rem;
}
.price-slider:focus { outline: none; }
.price-slider:focus-visible { outline: none; }

/* Let the input's gradient show through; the native tracks only reserve height
 * so the thumb sits centred on the gradient. */
.price-slider::-webkit-slider-runnable-track { height: 1rem; background: transparent; border: 0; }
.price-slider::-moz-range-track              { height: 1rem; background: transparent; border: 0; }

.price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  background: rgb(var(--primary));
  border: 2px solid rgb(var(--background));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}
.price-slider::-moz-range-thumb {
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  background: rgb(var(--primary));
  border: 2px solid rgb(var(--background));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}