/* ============================================
   xm-slider — draggable range slider on XmField (Story 2.8).

   Extends XmField for chrome but renders its own layout (the bordered text-field
   box is wrong for a slider): a label row (label + optional value), a track row
   (rail + active fill + thumb), and the helper/error row. State machinery
   (disabled / form-association / focus / ARIA) is inherited; this file styles the
   track, fill, thumb, label, and value.

   Surface & ink (AD-13): the slider rides the inverse-surface card tier — label +
   value are inverse-on-surface ink. The active (filled) portion + the thumb are
   the single coral accent (--md-sys-color-primary). The inactive rail, track
   height, and thumb size are --xm-slider-* extensions (AD-10). Coral = the filled
   value, never severity (AD-11). The error string carries severity via the warn
   icon + copy.

   Motion (NFR-19): fill/thumb position is layout-driven; the focus ring + hover
   transition short3 standard, no bounce.

   BEM block: `slider`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
   ============================================ */

.slider {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
}

/* ---------- Label row — field label + optional value ---------- */
.slider__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.slider__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-label-large-weight)
    var(--md-sys-typescale-label-large-size) /
    var(--md-sys-typescale-label-large-line-height)
    var(--md-sys-typescale-label-large-font);
}
.slider__label-text {
  letter-spacing: 0;
}
.slider__required {
  color: var(--md-sys-color-primary);
  font-weight: 700;
  line-height: 1;
}
.slider__value {
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-label-medium-weight)
    var(--md-sys-typescale-label-medium-size) /
    var(--md-sys-typescale-label-medium-line-height)
    var(--md-sys-typescale-label-medium-font);
  font-variant-numeric: tabular-nums;
}

/* ---------- Track — rail + active fill + thumb ---------- */
.slider__track {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--xm-slider-thumb-size);
  /* Inset the interactive box by half a thumb so the thumb (positioned by its
     center at left:fraction) never overflows the field width. The rail/fill and
     the pointer math all share this same inset coordinate space. */
  margin: 0 calc(var(--xm-slider-thumb-size) / 2);
  cursor: pointer;
  touch-action: none;
}

.slider__rail {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--xm-slider-track-height);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--xm-slider-track-inactive);
}

.slider__fill {
  position: absolute;
  left: 0;
  height: var(--xm-slider-track-height);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
}

.slider__thumb {
  position: absolute;
  top: 50%;
  width: var(--xm-slider-thumb-size);
  height: var(--xm-slider-thumb-size);
  margin-left: calc(var(--xm-slider-thumb-size) / -2);
  transform: translateY(-50%);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  box-shadow: var(--xm-slider-thumb-shadow);
  outline: none;
  cursor: grab;
  transition: box-shadow var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}
.slider__thumb:active {
  cursor: grabbing;
}

/* Focus ring — the canonical 3px coral halo on the thumb. */
.slider__thumb:focus-visible {
  box-shadow:
    var(--xm-slider-thumb-shadow),
    var(--xm-state-focus-ring);
}

/* ---------- Disabled — shared reduced emphasis ---------- */
.slider--disabled .slider__track {
  cursor: not-allowed;
}
.slider--disabled .slider__thumb {
  cursor: not-allowed;
  box-shadow: none;
}
.slider--disabled .slider__rail,
.slider--disabled .slider__fill,
.slider--disabled .slider__thumb {
  opacity: 0.45;
}
.slider--disabled .slider__label,
.slider--disabled .slider__value {
  color: var(--xm-color-inverse-on-surface-disabled);
}

/* ---------- Helper / error message row ----------
   Severity is the warn icon + copy, not a color (rule 3a). */
.slider__message {
  display: flex;
  align-items: flex-start;
  gap: var(--s-1);
  min-height: 1em;
  font:
    var(--md-sys-typescale-body-small-weight)
    var(--md-sys-typescale-body-small-size) /
    var(--md-sys-typescale-body-small-line-height)
    var(--md-sys-typescale-body-small-font);
}
.slider__message--helper {
  color: var(--xm-color-inverse-on-surface-muted);
}
.slider__message--error {
  color: var(--md-sys-color-inverse-on-surface);
}
.slider__error-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--md-sys-color-inverse-on-surface);
}
.slider__message-text {
  flex: 1;
  min-width: 0;
  text-wrap: pretty;
}