/*
 * lc-range.css: the one range slider for HoopFrog and DateSteady (2026-10-20, owner:
 * "read and remediate", Range Slider Remediation report). This file is byte-identical on
 * both brands. Geometry lives here only; colour comes from each brand's own tokens
 * (--lc-primary-wcag, --lc-primary-wcag-dark, --card, --lc-dark-card), so no brand file
 * may set sizes, margins or thumb shapes for a slider.
 *
 * Markup (see dashboard.html, events.html):
 *   <fieldset class="lc-range" data-range-kind="dual">        (or a div, data-range-kind="single")
 *     <legend>...</legend> or <div class="lc-range__head"><label/><output class="lc-range__out"/></div>
 *     <div class="lc-range__control">
 *       <div class="lc-range__track" aria-hidden="true"><div class="lc-range__fill"></div></div>
 *       <input type="range">  (one, or two for dual)
 *     </div>
 *   </fieldset>
 * js/lc-range.js sets --lc-range-start / --lc-range-end (0..100) on the control.
 *
 * Geometry: every thumb is a 44 x 44 px hit box (WCAG 2.5.8 / 2.5.5) drawn as a 22 px circle
 * (8 px transparent border, background clipped to the padding box). A native thumb's centre
 * travels from 22 px to (width - 22 px), so the drawn track is inset by 22 px on both sides
 * and the fill is a plain percentage of it: track, fill and thumbs share one coordinate system.
 */
.lc-range {
    --lc-range-hit: 44px;
    --lc-range-inset: 22px;
    --lc-range-track-h: 4px;
    --lc-range-track-bg: #8E939A;                                   /* 3:1 against white */
    --lc-range-fill: var(--lc-primary-wcag, var(--primary, #333));
    --lc-range-thumb-bg: var(--card, #fff);
    --lc-range-thumb-ring: var(--lc-range-fill);
    --lc-range-focus: var(--lc-range-fill);
    --lc-range-start: 0;
    --lc-range-end: 0;
    min-width: 0;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}
html.dark-mode .lc-range {
    --lc-range-track-bg: #6F7480;                                   /* 3:1 against the dark cards */
    --lc-range-fill: var(--lc-primary-wcag-dark, var(--primary-light, #ccc));
    --lc-range-thumb-bg: var(--lc-dark-card, #222);
}
/* the legend is screen-reader only (.lc-sr-only); the visible title is .lc-range__title */

.lc-range__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}
.lc-range__head > label { margin: 0; }
.lc-range__out {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--lc-range-fill);
}

/* ── the slider itself ─────────────────────────────────────────────────── */
.lc-range__control {
    position: relative;
    height: var(--lc-range-hit);
    margin: 0.15rem 0 0.35rem;
    scroll-margin-block: 96px;   /* scrolled into view above the sticky "Show N people" bar */
}
.lc-range__track {
    position: absolute;
    left: var(--lc-range-inset);
    right: var(--lc-range-inset);
    top: 50%;
    height: var(--lc-range-track-h);
    margin-top: calc(var(--lc-range-track-h) / -2);
    border-radius: var(--lc-r-pill, 999px);
    background: var(--lc-range-track-bg);
    pointer-events: none;
}
.lc-range__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--lc-range-start) * 1%);
    right: calc(100% - var(--lc-range-end) * 1%);
    border-radius: inherit;
    background: var(--lc-range-fill);
}

.lc-range input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    accent-color: var(--lc-range-fill);
    touch-action: pan-y;         /* sideways drags move the handle, up and down still scrolls the sheet */
    cursor: pointer;
    z-index: 2;
}
.lc-range input[type="range"]:focus { outline: none; }
/* Both brands paint every input in dark mode with `html.dark-mode input { background: ... !important }`.
   On a range input that band covers the drawn track, so the slider keeps a transparent input here. */
html.dark-mode .lc-range input[type="range"] { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* Two inputs share one track: only their thumbs take the pointer, so neither blocks the other. */
.lc-range[data-range-kind="dual"] input[type="range"] { pointer-events: none; }
.lc-range input[type="range"].is-active,
.lc-range input[type="range"]:focus-visible { z-index: 4; }

/* native tracks are invisible and as tall as the hit box, so the thumb centres on the drawn track */
.lc-range input[type="range"]::-webkit-slider-runnable-track {
    height: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.lc-range input[type="range"]::-moz-range-track {
    height: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.lc-range input[type="range"]::-moz-range-progress { background: transparent; }
.lc-range input[type="range"]::-moz-focus-outer { border: 0; }

/* thumbs: 44 px target, 22 px circle, brand ring (owner 2026-10-20: slightly smaller) */
.lc-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: var(--lc-range-hit);
    height: var(--lc-range-hit);
    margin: 0;
    border: 11px solid transparent;
    border-radius: 50%;
    background-color: var(--lc-range-thumb-bg);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 3px var(--lc-range-thumb-ring);
    pointer-events: auto;
    cursor: grab;
}
.lc-range input[type="range"]::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--lc-range-hit);
    height: var(--lc-range-hit);
    border: 11px solid transparent;
    border-radius: 50%;
    background-color: var(--lc-range-thumb-bg);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 3px var(--lc-range-thumb-ring);
    pointer-events: auto;
    cursor: grab;
}
.lc-range input[type="range"].is-active::-webkit-slider-thumb {
    cursor: grabbing;
    background-color: var(--lc-range-fill);
    box-shadow: inset 0 0 0 3px var(--lc-range-thumb-ring), inset 0 0 0 6px var(--lc-range-thumb-bg);
}
.lc-range input[type="range"].is-active::-moz-range-thumb {
    cursor: grabbing;
    background-color: var(--lc-range-fill);
    box-shadow: inset 0 0 0 3px var(--lc-range-thumb-ring), inset 0 0 0 6px var(--lc-range-thumb-bg);
}
/* focus: a solid ring around the whole 44 px target, 8 px clear of the handle, so it reads in
   both themes and both brands without relying on a colour change of the handle itself */
.lc-range input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: inset 0 0 0 3px var(--lc-range-thumb-ring), 0 0 0 3px var(--lc-range-focus);
}
.lc-range input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: inset 0 0 0 3px var(--lc-range-thumb-ring), 0 0 0 3px var(--lc-range-focus);
}
.lc-range input[type="range"]:disabled { cursor: not-allowed; opacity: 0.5; }
@media (forced-colors: active) {
    .lc-range__track { background: GrayText; }
    .lc-range__fill { background: Highlight; }
    .lc-range input[type="range"]:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* ── unit switch (km / miles, cm / ft): a segmented control, 44 px targets ── */
.lc-seg {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: var(--lc-r-pill, 999px);
    overflow: hidden;
    flex-shrink: 0;
}
.lc-seg > button {
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 0.8rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-light, #595959);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.lc-seg > button + button { border-left: 1px solid var(--border, #E5E7EB); }
.lc-seg > button[aria-pressed="true"] {
    background: var(--lc-primary-wcag, var(--primary, #333));
    color: #fff;
}
html.dark-mode .lc-seg > button[aria-pressed="true"] {
    background: var(--lc-primary-wcag-dark, var(--primary-light, #ccc));
    color: var(--lc-dark-bg, #111);
}
.lc-seg > button:focus-visible {
    outline: 3px solid var(--lc-primary-wcag, var(--primary, #333));
    outline-offset: -3px;
}
html.dark-mode .lc-seg > button:focus-visible { outline-color: var(--lc-primary-wcag-dark, #ccc); }