/* Range (range.js): a quiet line. A hairline filled in the accent up to the
   value, thickening when the hand or the keyboard reaches for it; the thumb a
   short upright line, the label and live value above it, a tick under each
   stop. A bare <input type="range" class="range-line"> takes the same line;
   set --fill (0-100%) on it or a parent from script. */
.range { display: grid; gap: 6px; min-width: 0; }
.range-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space); }
.range-head label { color: var(--ink-mut); font: 13px/1 var(--font-mono); }
.range-head output { color: var(--acc); font: 600 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.range input[type="range"], input[type="range"].range-line {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.range input[type="range"]::-webkit-slider-runnable-track, input[type="range"].range-line::-webkit-slider-runnable-track {
  height: 1px;
  background: linear-gradient(to right, var(--acc) var(--fill, 0%), var(--line) var(--fill, 0%));
  transition: height .15s;
}
.range input[type="range"]:hover::-webkit-slider-runnable-track, input[type="range"].range-line:hover::-webkit-slider-runnable-track,
.range input[type="range"]:focus-visible::-webkit-slider-runnable-track, input[type="range"].range-line:focus-visible::-webkit-slider-runnable-track { height: 4px; }
.range input[type="range"]::-webkit-slider-thumb, input[type="range"].range-line::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 2px;
  height: 14px;
  margin-top: -7px;
  border: 0;
  border-radius: 0;
  background: var(--acc);
}
.range input[type="range"]:hover::-webkit-slider-thumb, input[type="range"].range-line:hover::-webkit-slider-thumb,
.range input[type="range"]:focus-visible::-webkit-slider-thumb, input[type="range"].range-line:focus-visible::-webkit-slider-thumb { margin-top: -5px; }
.range input[type="range"]::-moz-range-track, input[type="range"].range-line::-moz-range-track { height: 1px; background: var(--line); }
.range input[type="range"]::-moz-range-progress, input[type="range"].range-line::-moz-range-progress { height: 1px; background: var(--acc); }
.range input[type="range"]:hover::-moz-range-track, input[type="range"].range-line:hover::-moz-range-track,
.range input[type="range"]:hover::-moz-range-progress, input[type="range"].range-line:hover::-moz-range-progress { height: 4px; }
.range input[type="range"]::-moz-range-thumb, input[type="range"].range-line::-moz-range-thumb { width: 2px; height: 14px; border: 0; border-radius: 0; background: var(--acc); }
.range input[type="range"]:focus-visible, input[type="range"].range-line:focus-visible { outline: 1px solid var(--acc); outline-offset: 4px; }
.range input[type="range"]:disabled, input[type="range"].range-line:disabled { cursor: default; opacity: .4; }
/* One tick per stop, centred under where the thumb lands. */
.range-ticks { display: flex; justify-content: space-between; padding: 0 1px; }
.range-ticks span { width: 1px; height: 4px; background: var(--line); }