/* The Range (components/range.js): the Slider's bar (components/
   slider.css draws it, the fill from --from to --to) and its two ends.
   A core sheet: every tier.

   An end is a band of 24 about the run's edge, all of it the hand's
   (its own slider for the keys); its mark a pill of 3 in the page
   colour, 16 high about the bar's centre (on the cell in either
   density), 4 inside the run, so it reads on the run's ground in either
   mode; at half strength until it is what a press would move (below). A keyboard focus rings the band in the focus colour with a hair
   of the page's ground inside it, so the ring reads where it crosses the
   run; a press gives an end the keys without the ring (data-pressed).
   An end the keyboard brought the focus to tints the run as a keyboard
   focus on the Slider's bar tints its fill; held, the run wears the
   held rung (slider.css). Under a finger the band is 48.

   An end follows its edge as the fill's clip does: a key, a Page step
   or a typed value glides on the follow clock and the row's arrival
   curve (the bounce where the row has it), at once while the bar is
   held (it no longer jumped while the fill eased). The run's sides light
   on the Full tier is the effects sheet's. */
.ds-range__end {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: calc(var(--ds-grid-cell) * 6);
  margin-left: calc(var(--ds-grid-cell) * -3);
  border-radius: inherit;
  outline: none;
  cursor: ew-resize;
  touch-action: pinch-zoom;
  transition: left var(--ds-motion-follow) var(--arrive);
}
.ds-range[data-held] .ds-range__end,
.ds-range[data-held] .ds-range__end::before {
  transition-duration: 0s;
}
.ds-range__end[data-end="start"] {
  left: var(--from-edge);
}
.ds-range__end[data-end="end"] {
  left: var(--to-edge);
}
/* the mark (round 6, iteration 16; owner: "refine these little lines
   inside. perhaps make them tiny bit thicker and roundier. make them
   semi transparent until i start hovering. hover only one if I am
   above it, hover 2 if I'm between them because I'm moving entire
   slider"): a pill 3 wide (its ends round), 16 high about the bar's
   centre, the page colour at half strength at rest, whole where a
   press would move it. Simple since iteration 18 (owner, 2026-10-12:
   "Refine these handles, they behave a bit glitchy, just make it
   simple for now and make it easy so we can implement better motion
   later"): one size always, the light alone changes; its growth and
   bounce on every change of aim are gone. Since iteration 20 (owner,
   2026-10-12: "Make sure all these little handles in sliders (range
   and color) animate in the same way and it's the same as other
   transitions as well") the light moves on the slider's clock and
   curve, the stretch's and the grip's, at once under a press, and a
   painted bar's mark (components/slider.css) is this body and this
   clock, its ring its light. The
   hooks a later motion takes: the row's data-aim (what a press would
   move: lo, hi, run, tie; components/range.js takeAt), data-take (what
   the held press moves), an end's keyboard focus; and the mark's own
   --mark-h and --mark-rest */
.ds-range__end::before {
  --mark-h: var(--ds-space-16);
  --mark-rest: 0.5;
  content: "";
  position: absolute;
  top: calc(50% - var(--mark-h) / 2);
  height: var(--mark-h);
  /* 3, on the device pixel (at 125 % a whole number of them) */
  width: round(nearest, calc(var(--ds-grid-cell) * 0.75), var(--ds-hair));
  border-radius: calc(var(--ds-grid-cell) * 0.75);
  background: var(--ds-color-page);
  opacity: var(--mark-rest);
  pointer-events: none;
  transition: opacity var(--ds-motion-clock) var(--ds-motion-ease);
}
.ds-range:is([data-aim="lo"], [data-aim="run"], [data-aim="tie"])
  .ds-range__end[data-end="start"]::before,
.ds-range:is([data-aim="hi"], [data-aim="run"], [data-aim="tie"])
  .ds-range__end[data-end="end"]::before,
.ds-range:is([data-take="lo"], [data-take="run"], [data-take="tie"])
  .ds-range__end[data-end="start"]::before,
.ds-range:is([data-take="hi"], [data-take="run"], [data-take="tie"])
  .ds-range__end[data-end="end"]::before,
html[data-kbd] .ds-range__end:focus-visible:not([data-pressed])::before {
  opacity: 1;
}
.ds-range__end[data-end="start"]::before {
  left: calc(50% + var(--ds-space-4));
}
.ds-range__end[data-end="end"]::before {
  right: calc(50% + var(--ds-space-4));
}
/* a ring only where the keys brought the focus (html[data-kbd],
   lib/core.js; owner, 2026-10-08) */
html[data-kbd] .ds-range__end:focus-visible:not([data-pressed]) {
  box-shadow:
    inset 0 0 0 var(--rule) var(--ds-color-focus),
    inset 0 0 0 2px var(--ds-color-page);
}
.ds-range:not([data-held]):has(.ds-range__end:focus-visible:not([data-pressed]))
  .ds-slider__fill {
  --fill-tint: var(--ds-state-hover);
}
/* off (data-off, the Slider's rules on its row): the ends' marks go
   with the fill's colour, as the Slider's mark does */
.ds-range[data-off] .ds-range__end::before {
  visibility: hidden;
}
/* the value field: "lo–hi", its digits as wide as both and the dash */
.ds-range__field .ds-slider__input {
  text-align: right;
}
@media (pointer: coarse) {
  .ds-range__end {
    width: calc(var(--ds-grid-cell) * 12);
    margin-left: calc(var(--ds-grid-cell) * -6);
  }
}
@media (forced-colors: active) {
  .ds-range__end::before {
    forced-color-adjust: none;
    background: HighlightText;
  }
  html[data-kbd] .ds-range__end:focus-visible:not([data-pressed]) {
    outline: var(--focus-ring-forced-w) solid Highlight;
  }
}