/* ==========================================================================
   Scrub bar (.scrub)
   A seek control for a played-back thing (the proposal reading player). A real
   <input type="range"> so the keyboard and a screen reader get it for free; the
   track is a hairline in --color-border with the played part filled in ink, the
   knob a white disc with the hairline. Built for proposal-watch.html (Peter,
   22 Sep 2026); catalogued in preview/index.html#scrub.
   SNIPPET: <label class="scrub"><input type="range" min="0" max="1000" value="0" aria-label="Position"></label>
   The page writes --scrub-fill (0 to 1) on the label as the position moves.
   ========================================================================== */
.scrub { --scrub-fill: 0; display: block; width: 100%; height: 28px; position: relative; cursor: pointer; }
.scrub input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; margin: 0; padding: 0; background: transparent; cursor: pointer; display: block;
}
.scrub input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, var(--color-text) 0, var(--color-text) calc(var(--scrub-fill) * 100%), var(--color-border) calc(var(--scrub-fill) * 100%), var(--color-border) 100%);
}
.scrub input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--color-border); }
.scrub input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--color-text); }
.scrub input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.scrub input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.scrub input[type="range"]:focus-visible { outline: none; }
.scrub input[type="range"]:focus-visible::-webkit-slider-thumb { border-color: var(--color-text); box-shadow: 0 0 0 3px rgba(0, 0, 0, .12); }
.scrub input[type="range"]:focus-visible::-moz-range-thumb { border-color: var(--color-text); box-shadow: 0 0 0 3px rgba(0, 0, 0, .12); }