/* Shared Blackbelt slider appearance, mirrored from reference/components.css.
   Kept separate here to avoid importing unrelated global component rules.
   Behavior uses the shared reference/slider.js, as in KPI Booster. */
/* ── Slider ───────────────────────────────────────────────────────────
   Single-thumb range control on the gold rail. See specs/slider.spec.md.
   Built by design-system/reference/slider.js — this file is visuals only. */
/* pan-y, not none: the box is ~70px of full-width padding, rail and end
   labels, so touch-action: none made it a dead zone for vertical page
   scrolling. pan-y lets the browser keep vertical panning (the drag ends via
   the bound pointercancel) while horizontal gestures stay ours. Same choice
   as .brand-marquee.is-interactive and .fdd-menu. */
.mtz-slider { position: relative; padding-top: 34px; padding-bottom: 4px; touch-action: pan-y; user-select: none; }
.mtz-slider-rail { position: relative; height: 5px; border-radius: var(--radius-pill); background: var(--line-strong); cursor: pointer; }
.mtz-slider-fill { position: absolute; top: 0; left: 0; height: 5px; border-radius: var(--radius-pill); background: var(--accent); pointer-events: none; }
.mtz-slider-marks { position: absolute; top: 50%; left: 0; width: 100%; height: 0; pointer-events: none; }
.mtz-slider-mark { position: absolute; top: 50%; width: 3px; height: 3px; border-radius: var(--radius-full); background: var(--line-strong); transform: translate(-50%, -50%); }
.mtz-slider-mark.active { background: var(--on-accent); }
.mtz-slider-thumb {
  position: absolute; top: 50%; left: 0; width: 18px; height: 18px; border-radius: var(--radius-full);
  background: var(--accent); box-shadow: 0 0 0 3.2px var(--surface);
  transform: translate(calc(var(--p, 50) * -1%), -50%) scale(1); cursor: grab;
  transition: transform 140ms var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* The thumb ring supplies focus feedback; avoid a second box around the rail. */
.mtz-slider:focus { outline: none; }
.mtz-slider:focus-visible .mtz-slider-thumb {
  box-shadow: 0 0 0 3.2px var(--surface), 0 0 0 6px var(--accent);
}
.mtz-slider.dragging .mtz-slider-thumb { transform: translate(calc(var(--p, 50) * -1%), -50%) scale(0.82); cursor: grabbing; }
.mtz-slider-tooltip {
  position: absolute; bottom: calc(100% + 26px); left: 50%; transform: translateX(-50%);
  background: var(--surface-recessed); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
  padding: 4px 9px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out);
}
.mtz-slider-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--surface-recessed);
}
.mtz-slider-thumb.show-tip .mtz-slider-tooltip { opacity: 1; }
.mtz-slider.mtz-slider--reduced-motion .mtz-slider-thumb,
.mtz-slider.mtz-slider--reduced-motion .mtz-slider-tooltip { transition: none !important; }
.mtz-slider-end-labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 14px; color: var(--faint); }