/* === Canonical range-slider styling — Wave 12a (NEW-CANON-007) ===
 * Single source of truth for input[type="range"] across the fleet.
 * Consumers add `<link rel="stylesheet" href="/css/range-slider.css">` (site-hub)
 * or `/assets/css/range-slider.css` (5 product sites). Theming hooks via the
 * CSS custom properties below — sites with a different brand color override
 * --range-thumb-bg (e.g. site-iul amber) inside their own selector scope.
 *
 * Selectors covered:
 *   .range-slider          — canonical class for new markup (downstream lanes use this)
 *   .gap-slider            — legacy hook from site-hub gap-analyzer (kept untouched)
 *   .calc-step input[range]— legacy hook from site-hub home calculator (kept untouched)
 */

:root {
    --range-thumb-size: 24px;
    --range-thumb-bg: var(--gold, #047857);
    --range-thumb-border: 3px solid #fff;
    --range-thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    --range-control-height: var(--range-thumb-size);
    --range-track-height: 8px;
    --range-track-bg: var(--cloud, #e2e8f0);
    --range-track-radius: 999px;
    /* Focus ring matches site-hub's --green-glow palette but at 0.35 alpha for
     * WCAG 2.4.7 visible-focus compliance. Was missing from both pre-canon
     * copies — drift-fix, not refactor. */
    --range-focus-ring: 0 0 0 3px rgba(4, 120, 87, 0.35);
}

.range-slider,
.gap-slider,
.calc-step input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: var(--range-control-height);
    padding: 0;
    background: transparent;
    border-radius: var(--range-track-radius);
    outline: none;
    accent-color: var(--range-thumb-bg);
    cursor: pointer;
}

.range-slider::-webkit-slider-runnable-track,
.gap-slider::-webkit-slider-runnable-track,
.calc-step input[type="range"]::-webkit-slider-runnable-track {
    height: var(--range-track-height);
    background: var(--range-track-bg);
    border-radius: var(--range-track-radius);
}

.range-slider::-moz-range-track,
.gap-slider::-moz-range-track,
.calc-step input[type="range"]::-moz-range-track {
    height: var(--range-track-height);
    background: var(--range-track-bg);
    border-radius: var(--range-track-radius);
}

.range-slider::-webkit-slider-thumb,
.gap-slider::-webkit-slider-thumb,
.calc-step input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    border-radius: 50%;
    background: var(--range-thumb-bg);
    cursor: pointer;
    border: var(--range-thumb-border);
    box-shadow: var(--range-thumb-shadow);
    margin-top: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
}

.range-slider::-moz-range-thumb,
.gap-slider::-moz-range-thumb,
.calc-step input[type="range"]::-moz-range-thumb {
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    border-radius: 50%;
    background: var(--range-thumb-bg);
    cursor: pointer;
    border: var(--range-thumb-border);
    box-shadow: var(--range-thumb-shadow);
}

.range-slider:focus-visible::-webkit-slider-thumb,
.gap-slider:focus-visible::-webkit-slider-thumb,
.calc-step input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--range-thumb-shadow), var(--range-focus-ring);
}

.range-slider:focus-visible::-moz-range-thumb,
.gap-slider:focus-visible::-moz-range-thumb,
.calc-step input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: var(--range-thumb-shadow), var(--range-focus-ring);
}