/* ============================================================
   AIHPG SHARED RANGE SLIDER COMPONENT (.range-slider)
   Phase D (see /docs/FORM-AUDIT.txt — Form 3 calculator).

   Canonical HTML pattern:

     <div class="range-slider"
          data-range-min="500"
          data-range-max="15000"
          data-range-step="50"
          data-range-format="currency-gbp"
          data-range-suffix="/mo">
       <input type="range" id="rent-slider" name="rent"
              min="500" max="15000" step="50" value="2500">
       <div class="range-slider__display">
         <span class="range-slider__value">£2,500</span>
         <span class="range-slider__suffix">/mo</span>
       </div>
     </div>

   The value span text is rewritten by /js/range-slider.js
   whenever the underlying <input type=range> changes.

   Theme inherits from existing custom properties so the
   component sits cleanly inside both light (cream) and dark
   (charcoal) hosts. Use the .range-slider--dark modifier on
   the wrapper when on a dark background to flip track colours.

   44px minimum thumb on touch devices. Native arrow-key
   support is provided by the browser's range input.
   ============================================================ */

.range-slider{
  display:block;
}

.range-slider__display{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-family:var(--font-display,inherit);
  font-size:22px;
  font-weight:500;
  color:var(--charcoal,#1a1a1a);
  line-height:1.1;
  margin-bottom:10px;
  letter-spacing:-.5px;
}

.range-slider__suffix{
  font-family:var(--font-body,inherit);
  font-size:12px;
  font-weight:500;
  color:var(--mid-grey,#7a7a7a);
  letter-spacing:1px;
  text-transform:uppercase;
}

.range-slider input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:32px;
  background:transparent;
  cursor:pointer;
  margin:0;
  padding:0;
  outline:none;
}

.range-slider input[type="range"]:focus-visible{
  outline:none;
}

/* Track — WebKit */
.range-slider input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  background:rgba(0,0,0,.12);
  border:none;
  border-radius:2px;
}
.range-slider input[type="range"]:focus-visible::-webkit-slider-runnable-track{
  background:rgba(201,168,76,.35);
}

/* Track — Firefox */
.range-slider input[type="range"]::-moz-range-track{
  height:4px;
  background:rgba(0,0,0,.12);
  border:none;
  border-radius:2px;
}
.range-slider input[type="range"]::-moz-range-progress{
  height:4px;
  background:var(--gold,#c9a84c);
  border-radius:2px;
}

/* Thumb — WebKit. 44px hit-area, 22px visible disc. */
.range-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:22px;
  height:22px;
  margin-top:-9px;
  background:var(--gold,#c9a84c);
  border:3px solid var(--white,#fff);
  border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  cursor:grab;
  transition:transform .15s ease, box-shadow .15s ease;
}
.range-slider input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 1px 4px rgba(0,0,0,.18), 0 0 0 4px var(--gold-muted,rgba(201,168,76,.25));
}
.range-slider input[type="range"]:active::-webkit-slider-thumb{
  cursor:grabbing;
  transform:scale(1.08);
}

/* Thumb — Firefox */
.range-slider input[type="range"]::-moz-range-thumb{
  width:22px;
  height:22px;
  background:var(--gold,#c9a84c);
  border:3px solid var(--white,#fff);
  border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  cursor:grab;
  transition:transform .15s ease, box-shadow .15s ease;
}
.range-slider input[type="range"]:focus-visible::-moz-range-thumb{
  box-shadow:0 1px 4px rgba(0,0,0,.18), 0 0 0 4px var(--gold-muted,rgba(201,168,76,.25));
}
.range-slider input[type="range"]:active::-moz-range-thumb{
  cursor:grabbing;
  transform:scale(1.08);
}

/* Endpoint markers — small captions under track */
.range-slider__scale{
  display:flex;
  justify-content:space-between;
  font-size:10px;
  font-weight:500;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--light-grey,#9a9a9a);
  margin-top:4px;
}

/* Dark host modifier */
.range-slider--dark .range-slider__display{ color:var(--white,#fff); }
.range-slider--dark .range-slider__suffix{ color:rgba(255,255,255,.5); }
.range-slider--dark input[type="range"]::-webkit-slider-runnable-track{ background:rgba(255,255,255,.12); }
.range-slider--dark input[type="range"]::-moz-range-track{ background:rgba(255,255,255,.12); }
.range-slider--dark input[type="range"]::-webkit-slider-thumb{ border-color:var(--charcoal,#1a1a1a); }
.range-slider--dark input[type="range"]::-moz-range-thumb{ border-color:var(--charcoal,#1a1a1a); }
.range-slider--dark .range-slider__scale{ color:rgba(255,255,255,.4); }

@media (max-width:480px){
  .range-slider input[type="range"]{ height:36px; }
  .range-slider input[type="range"]::-webkit-slider-thumb{ width:24px; height:24px; margin-top:-10px; }
  .range-slider input[type="range"]::-moz-range-thumb{ width:24px; height:24px; }
  .range-slider__display{ font-size:20px; }
}