/* The Slider in the lab: the two stacks of six (compact and regular)
   and the lab's attention marks. Nothing here ships with the
   component. */

/* a stack of sliders shares one set of columns, so every bar starts and
   ends on the same lines whatever its words hold. Each stack is a window
   of the system (components/surface.css: its corner and inset are the
   global menu's), compact or regular (data-density), whose colour
   scheme is the page's: the Global card's Scheme, html[data-scheme],
   which components/surface.css hands every window with no scheme of its
   own (round 2's integration, 2026-10-09: one page-wide Scheme; the
   stacks' own Mode went) */
.slider-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* the stack's own column gap: a subgrid row with a gap its parent has
     not splits the difference off the tracks beside it (the label track
     drew 92, not 96) */
  column-gap: var(--ds-slider-gap);
  /* its rows the Panel space apart (components/surface.css: controls
     stacked anywhere) */
  row-gap: var(--stack-gap, var(--ds-space-8));
  align-content: start;
  min-width: 0;
}
/* compact: the label beside a bar takes less room (72, not 96); the
   value keeps its 72, its digits the density's mono 14. The page's
   density is html's since round 5 (lib/globals.js), so the window is
   compact by the root, or by a host of its own that says so (iteration
   24's audit: the rule named the window's own attribute, which no
   window carries since, and Compact kept the 96) */
html[data-density="compact"] .slider-demo,
[data-density="compact"] > .slider-demo {
  --ds-slider-label: calc(var(--ds-grid-cell) * 18);
}
/* the surface lit from the page's Scheme: its line in measure (with the
   attention marks, below) */
.slider-demo[data-label="beside"] {
  grid-template-columns: var(--ds-slider-label) minmax(0, 1fr);
}
.slider-demo[data-value="beside"] {
  grid-template-columns: minmax(0, 1fr) var(--ds-slider-value);
}
.slider-demo[data-label="beside"][data-value="beside"] {
  grid-template-columns: var(--ds-slider-label) minmax(0, 1fr) var(
      --ds-slider-value
    );
}
.slider-demo > .ds-slider {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: var(--ds-slider-gap);
}
/* a finger: every bar's hit band is 48 high about its centre, so the gap
   between stacked rows is 48 less the height and no band covers its
   neighbour's (a 48 pitch at Compact and at Regular) */
@media (pointer: coarse) {
  .slider-demo {
    row-gap: max(
      var(--stack-gap, var(--ds-space-8)),
      calc(var(--ds-grid-cell) * 12 - var(--ds-slider-height))
    );
  }
}

/* a control in a pane, a token, or a colour's square lights
   what it drives (the lab's attention colour, not the system's); the
   gap lights the three boxes it separates, so it shows between them; the
   give lights the two ends that give; a colour lights the parts that
   read it (the fill from inside, as a clip cuts an outline) */
/* the attention marks: a hand's rest, never a manipulation's. Drawn
   only while no work's recede stands (components/task.js
   html[data-task-drawn]), as the canvas's dashes are (ds.css): the work
   says what it keeps by what stays at full strength (owner, 2026-10-14:
   "on manipulation we want use to focus on the task so we tone down
   unnecessary clutter and unrelated stuff"). Withheld, never overridden,
   so a part's own outline and edge stand under the work, and a click,
   which draws no recede, blinks nothing (the review of iteration 24);
   the condition weighs nothing (:where), so each mark ranks as it did */
:where(html:not([data-task-drawn]))
  .slider-demo:has(.ds-slider[data-lit~="surface"]) {
  box-shadow: inset 0 0 0 var(--rule) var(--ds-color-measure);
}
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="height"]
  .ds-slider__bar,
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="radius"]
  .ds-slider__bar,
:where(html:not([data-task-drawn])) .ds-slider[data-lit~="bar"] .ds-slider__bar,
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="stroke"]
  .ds-slider__bar,
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="stroke"]
  .ds-slider__field,
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="stroke-active"]
  .ds-slider__bar,
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="gap"]
  .ds-slider__label,
:where(html:not([data-task-drawn])) .ds-slider[data-lit~="gap"] .ds-slider__bar,
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="gap"]
  .ds-slider__field,
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="give"]
  .ds-slider__label,
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="give"]
  .ds-slider__field,
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="label"]
  .ds-slider__label,
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="field"]
  .ds-slider__field,
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="unit"]
  .ds-slider__unit,
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="inside"]
  .ds-slider__inside:not(.ds-slider__inside--fill) {
  outline: 1px solid var(--ds-color-measure);
  outline-offset: 2px;
}
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="fill"]
  .ds-slider__fill {
  box-shadow: inset 0 0 0 var(--rule) var(--ds-color-measure);
}
/* the focus colour lights as the ring it draws: the colour's own
   specimen, so it stands under the work too (a drag of the focus colour
   shows it on every ring) */
.ds-slider[data-lit~="ring"] .ds-slider__bar {
  outline: var(--focus-ring-w) solid var(--ds-color-focus);
  outline-offset: var(--focus-ring-gap);
}
/* the divider's ink lights as the lines it draws: every bar shows its
   Shift lines while the token is under attention (a stepped bar shows
   its steps already) */
.ds-slider[data-lit~="divider"] .ds-slider__grid {
  opacity: 1;
}
/* the bubble's token lights where the bubble seats (an attention mark,
   withheld under the work as the others are) */
:where(html:not([data-task-drawn]))
  .ds-slider[data-lit~="bubble"]
  .ds-slider__bar {
  outline: 1px solid var(--ds-color-measure);
  outline-offset: calc(var(--ds-slider-height) / 2 + var(--ds-space-8));
}