/* slider.css — Range inputs and the "More control" disclosure that holds them.
   Cascade position 13 of 18. Order is load-bearing and is asserted by
   verify-fixtures.mjs; index.html links these explicitly (never @import) because Caddy's
   try_files turns a missing file into a 200 text/html SPA shell.
   Owner after Step 1: section (h). */

/* ── advanced disclosure ──────────────────────────────────────────────────
   Everything below the fold is optional. A user who touches none of it sends
   no extra keys at all, which is the same request the page made yesterday. */
.adv {
  margin-top: 11px;
  border-radius: 11px;
  background: rgb(var(--sn-white-rgb) / 0.0196078431372549);
  box-shadow: inset 0 0 0 1px var(--line);
}
.adv > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  border-radius: 11px;
}
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-right: 1.6px solid var(--dim2);
  border-bottom: 1.6px solid var(--dim2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.adv[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.adv > summary:hover { color: var(--signal); }

.adv__count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgb(var(--sn-accent-rgb) / 0.14901960784313725);
  color: var(--signal);
}
.adv__count:empty { display: none; }

.adv__body {
  padding: 2px 12px 12px;
  display: grid;
  gap: var(--sn-space-4);
}

.adv__grp {
  display: grid;
  gap: 6px;
  position: relative;
}
/* `:not(.danger)` is the narrowing CORRECTIONS (6 Sep) assigned to section (o). This rule
   is for the SLIDER VALUE LABELS, but `<label class="danger">` — item 74's repair-consent
   card in css/controls.css — is also a `<label>` and also a direct child of `.adv__grp`, so
   it was being turned into a flex row: section (g) measured its 20 px checkbox shrinking to
   15 px as a flex item. (g) defended itself with `.adv__grp > .danger` (0,2,0), which is
   correct in either cascade order and stays; this stops the collision at its source so the
   two rules no longer both match the same element. Nothing was broken at the time — this is
   the proper fix behind (g)'s workaround, not a repair. */
.adv__grp > label:not(.danger), .adv__lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.adv__lbl em {
  font-style: normal;
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sn-ink);
}
.adv__lbl em.is-auto {
  color: var(--dim2);
  font-weight: 500;
}

/* ── item 97: Reset affordance ─────────────────────────────────────────── */
.range__reset {
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--sn-text-2xs);
  line-height: var(--sn-lh-2xs);
  color: var(--sn-ink-mute);
  background: transparent;
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius-sm);
  padding: 2px var(--sn-space-2);
  cursor: pointer;
  transition: color var(--sn-dur-fast) var(--sn-ease-out), border-color var(--sn-dur-fast) var(--sn-ease-out);
}
.range__reset:hover {
  color: var(--sn-ink);
  border-color: var(--sn-line-strong);
}
.range__reset:active {
  background: var(--sn-surface-2-alt);
}
.range__reset:focus-visible {
  outline: 2px solid var(--sn-focus);
  outline-offset: 2px;
}

/* ── item 77b & item 73: Range slider ────────────────────────────────────
   Input height ≥32px (was 22px). Track 4px, thumb 18px with 2px ring and
   halo growing to 5px on hover and 0.40 alpha on active (mocks/NOTES.md A1). */
input[type="range"] {
  grid-row: 2;
  grid-column: 1;
  width: 100%;
  height: 32px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--sn-radius-pill);
  background: linear-gradient(to right, var(--sn-ink-dim) var(--val-pct, 50%), var(--sn-line-strong) var(--val-pct, 50%));
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: var(--sn-radius-pill);
  background: var(--sn-line-strong);
}
input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: var(--sn-radius-pill);
  background: var(--sn-ink-dim);
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  border: 0;
  background: var(--sn-ink);
  box-shadow: 0 0 0 2px var(--sn-surface-0), 0 0 0 3px var(--sn-line-strong);
  transition: box-shadow var(--sn-dur-fast) var(--sn-ease-out);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: var(--sn-ink);
  box-shadow: 0 0 0 2px var(--sn-surface-0), 0 0 0 3px var(--sn-line-strong);
  transition: box-shadow var(--sn-dur-fast) var(--sn-ease-out);
}
input[type="range"]:hover:not(:disabled)::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--sn-surface-0), 0 0 0 5px var(--sn-line-strong);
}
input[type="range"]:hover:not(:disabled)::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--sn-surface-0), 0 0 0 5px var(--sn-line-strong);
}
input[type="range"]:active:not(:disabled) {
  cursor: grabbing;
}
input[type="range"]:active:not(:disabled)::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--sn-surface-0), 0 0 0 5px var(--sn-line-raised);
}
input[type="range"]:active:not(:disabled)::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--sn-surface-0), 0 0 0 5px var(--sn-line-raised);
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--sn-focus);
  outline-offset: 3px;
}
input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--sn-focus);
  outline-offset: 3px;
}
input[type="range"]:disabled {
  opacity: .4;
  cursor: not-allowed;
}
input[type="range"]:disabled::-webkit-slider-runnable-track {
  background: var(--sn-ink-mute);
}
input[type="range"]:disabled::-moz-range-track {
  background: var(--sn-ink-mute);
}
input[type="range"]:disabled::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--sn-surface-0);
}
input[type="range"]:disabled::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--sn-surface-0);
}

/* UI Quiet (DESIGN §1 principle 4): one green per screen, and it belongs to the primary
   action in the viewport toolbar. The sliders under More control are drawn in ink. */

/* ── item 73: Range value output ─────────────────────────────────────────
   Pinned adjacent to thumb horizontally via --val-pct & --val-ratio,
   within 4px vertically of the track. */
.range__out {
  grid-row: 2;
  grid-column: 1;
  justify-self: start;
  align-self: center;
  pointer-events: none;
  user-select: none;
  font-size: var(--sn-text-xs);
  line-height: 1;
  /* DESIGN §2 Type: no tabular-nums on Schibsted — it spaces the decimal point ("0 . 20"). */
  white-space: nowrap;
  color: var(--sn-ink-mute);
  /* `margin-left` is the THUMB CENTRE: r*W + (0.5 - r)*18px is exactly where a
     18 px thumb centres itself in a W-wide track. The bubble is then pulled back by a
     FRACTION OF ITS OWN WIDTH that tracks the ratio rather than a flat half.
     W-4 (Joe, 17 Sep): a flat `translate(-50%)` hangs half the bubble past the track at
     either end — MEASURED at ratio 1 as x = 1732 in a 1728 px viewport, which gave
     `.sheet__scroll` scrollWidth 651 against clientWidth 647 and a real grey horizontal
     scrollbar. `-1 * ratio * 100%` is -0% at the left end (left edge lands on the thumb
     centre, 9 px in), -50% in the middle (unchanged from before), and -100% at the right
     end (right edge lands 9 px short of the track's right edge), so the box can never
     leave the wrapper while staying pinned to the thumb. Clipping was rejected: the
     wrapper also holds the thumb's focus ring, and `overflow` on it would cut that. */
  margin-left: calc(var(--val-pct, 50%) + (0.5 - var(--val-ratio, 0.5)) * 18px);
  /* The second term steps the bubble sideways off the 18 px thumb as it nears either
     end: +11 px at ratio 0, 0 in the middle, -11 px at ratio 1, so the text sits beside
     the knob rather than on it (the after-shot of the first W-4 fix still had "mm" on
     the knob at max). */
  transform: translate(calc(var(--val-ratio, 0.5) * -100% + (0.5 - var(--val-ratio, 0.5)) * 22px), -12px);
}
.range__out.is-overridden {
  color: var(--sn-ink);
  font-weight: 600;
}

/* ── item 73: Min and Max labels ─────────────────────────────────────────
   Under the track, ≥11px, ≥4.5:1 contrast. */
.range__min,
.range__max {
  grid-row: 3;
  grid-column: 1;
  font-size: var(--sn-text-2xs);
  line-height: var(--sn-lh-2xs);
  color: var(--sn-ink-mute);
  pointer-events: none;
  user-select: none;
}
.range__min {
  justify-self: start;
}
.range__max {
  justify-self: end;
}