/* ==========================================================================
   Widget: range-filter — one dual-thumb min/max slider
   Drop a <div class="rf" data-…> and call EMAR.RangeFilter.create(el, opts).
   Two native <input type="range"> stacked over one track: keyboard, screen
   reader and touch behaviour come free, only the painting is custom.
   ========================================================================== */

.rf { display: grid; gap: 2px; }

.rf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rf-label {
  font-size: var(--t-13); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.rf-out { font-size: var(--t-14); font-weight: 700; font-variant-numeric: tabular-nums; }

.rf-rail { position: relative; height: var(--rf-rail-h); }
.rf-track, .rf-fill {
  position: absolute; top: calc(var(--rf-rail-h) / 2 - 2px); height: 4px; border-radius: var(--r-pill);
}
.rf-track { left: 0; right: 0; background: var(--rf-track); }
.rf-fill  { background: var(--rf-fill); }

.rf-rail input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: var(--rf-rail-h);
  margin: 0; padding: 0; background: none; border: 0;
  -webkit-appearance: none; appearance: none;
  pointer-events: none;              /* the rail is not a hit target, the thumbs are */
}
.rf-rail input[type="range"]::-webkit-slider-runnable-track { height: var(--rf-rail-h); background: transparent; }
.rf-rail input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: var(--rf-thumb-d); height: var(--rf-thumb-d);
  margin-top: calc((var(--rf-rail-h) - var(--rf-thumb-d)) / 2);
  border-radius: 50%; background: var(--rf-thumb); border: 2px solid var(--brand);
  box-shadow: 0 1px 3px rgba(16,32,30,.35); cursor: grab;
}
.rf-rail input[type="range"]::-moz-range-track { height: var(--rf-rail-h); background: transparent; border: 0; }
.rf-rail input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: calc(var(--rf-thumb-d) - 4px); height: calc(var(--rf-thumb-d) - 4px);
  border-radius: 50%; background: var(--rf-thumb); border: 2px solid var(--brand);
  box-shadow: 0 1px 3px rgba(16,32,30,.35); cursor: grab;
}
.rf-rail input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }

/* focus ring lives on the thumb, because the input itself is invisible */
.rf-rail input[type="range"]:focus { outline: none; }
.rf-rail input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(11,86,78,.30); border-color: var(--brand-dark);
}
.rf-rail input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(11,86,78,.30); border-color: var(--brand-dark);
}

.rf-scale { display: flex; justify-content: space-between; font-size: var(--t-12); color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .rf-fill { transition: none; } }