/* ui_range_slider — pair file for src/ui_system/range_slider.jl
 *
 * Dual-handle range slider. We draw every visible pixel ourselves
 * (rail in the track background, band div, two thumb divs). The two
 * native <input type="range"> elements live on top at opacity:0 — they
 * exist purely as keyboard/a11y hit zones; their pseudo-elements
 * (::-webkit-slider-thumb, ::-moz-range-thumb) are zeroed out so
 * Chrome's runnable-track origin offset (~2.5px under appearance:none)
 * never enters the visual layout.
 *
 * Layout strategy:
 *   - .ui-range-slider-track is the positioned ancestor.
 *   - z-order: rail (track bg) < band (z=1) < thumb divs (z=2) <
 *     invisible inputs (z=3).
 *   - Thumb divs are anchored to `left: ${signal * 100}%` via Datastar
 *     `data-attr:style` and centered with `top: 50%; margin: -0.5rem`.
 *   - Each input owns half the track for click/drag via a Datastar-
 *     driven `clip-path: inset(...)` cut at the lo/hi positions. The
 *     band keeps its own pointer-events so drag-as-a-band still works.
 */

.ui-range-slider {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.ui-range-slider-track {
    position: relative;
    /* Matches the Pico single-handle slider's overall input height so
     * the two sit on the same vertical rhythm when stacked in a form. */
    height: 1.25rem;
    /* Background "rail" matching Pico's ::-webkit-slider-runnable-track:
     * 0.375rem tall, --pico-range-border-color. Painted via gradient so
     * the band and thumbs can stack above it without an extra DOM node. */
    background:
        linear-gradient(to bottom,
            transparent calc(50% - 0.1875rem),
            var(--pico-range-border-color) calc(50% - 0.1875rem),
            var(--pico-range-border-color) calc(50% + 0.1875rem),
            transparent calc(50% + 0.1875rem));
}

.ui-range-slider-band {
    position: absolute;
    /* Centered on the rail midline: top offset = -height/2. */
    top: calc(50% - 0.1875rem);
    height: 0.375rem;
    background: var(--pico-primary);
    border-radius: var(--pico-border-radius);
    cursor: grab;
    touch-action: none;
    z-index: 1;
}
.ui-range-slider-band:active { cursor: grabbing; }

.ui-range-slider-thumb {
    position: absolute;
    top: 50%;
    width: 1.25rem;
    height: 1.25rem;
    /* `left` is signal-driven via data-attr:style; negative margins
     * center the 1.25rem disc (border included) on (left, 50%). */
    margin: -0.625rem 0 0 -0.625rem;
    box-sizing: border-box;
    /* Pico paints its thumb with a 2px border in the page background
     * colour — the "punched-out" look that lets the band/rail show
     * through behind the thumb's edge. Mirror that exactly. */
    border: 2px solid var(--pico-range-thumb-border-color);
    border-radius: 50%;
    background: var(--pico-range-thumb-color);
    transition: transform var(--pico-transition),
                background-color var(--pico-transition);
    /* Visual only — clicks pass through to the input layer below. */
    pointer-events: none;
    z-index: 2;
}

/* Mirror Pico's `[type=range]:active::-webkit-slider-thumb {scale(1.25)}`.
 * The invisible input is the :active target on press; the visible thumb
 * is its adjacent sibling, so the same selector reaches it. */
.ui-range-slider-track input[type="range"]:active + .ui-range-slider-thumb {
    transform: scale(1.25);
}

/* Invisible inputs ride on top of everything for keyboard + click
 * hit-testing. Their `clip-path` is driven by Datastar so the lo
 * input owns the left half (0 → lo) and the hi input owns the right
 * half (hi → 1), with a 0.5rem pad so the thumb halo stays grabbable.
 * Splitting the hit area avoids the "top input swallows all clicks"
 * problem of the previous overlap design. */
.ui-range-slider-track input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    background: transparent !important;
    background-image: none !important;
    -webkit-appearance: none;
    appearance: none;
    /* The invisible input is what the mouse actually hits (the visible
     * thumb div has pointer-events: none), so cursor must live here to
     * show the pointer over the thumb's hit zone. */
    cursor: pointer;
    z-index: 3;
}

/* Zero out the native thumb/track pseudo-elements so nothing native
 * gets painted (and so Chrome's runnable-track origin quirk can't
 * affect visible layout — there is no visible layout from the input). */
.ui-range-slider-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
    border: none;
    background: transparent;
}
.ui-range-slider-track input[type="range"]::-moz-range-thumb {
    width: 0;
    height: 0;
    opacity: 0;
    border: none;
    background: transparent;
}
.ui-range-slider-track input[type="range"]::-webkit-slider-runnable-track,
.ui-range-slider-track input[type="range"]::-moz-range-track {
    height: 100%;
    background: transparent !important;
    background-image: none !important;
    border: none;
    box-shadow: none;
}

/* Keyboard focus ring on the thumb the user is driving. The invisible
 * input is the focus target; the visible thumb sits immediately after
 * it in DOM order, so the adjacent-sibling selector lights up the
 * right one. */
.ui-range-slider-track input[type="range"]:focus-visible + .ui-range-slider-thumb {
    outline: 2px solid var(--pico-primary, #1095c1);
    outline-offset: 2px;
}

.ui-range-slider-numeric {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.ui-range-slider-numeric input[type="number"] {
    margin: 0;
    padding: 0.25rem 0.4rem;
    font-size: var(--ds-font-sm, 0.85rem);
}