/* ============================================
   xm-switch — binary on/off toggle on XmField (Story 2.7).

   Like xm-checkbox, this is a TOGGLE field: the track sits BESIDE the label, not
   above it on the bordered text-field chrome. State machinery (disabled / focus /
   form-association / change) is inherited from XmField; this file styles only the
   track, the thumb, and the label row.

   Surface & ink (AD-13): the switch rides the inverse-surface card tier shared by
   every XmField sibling — the label is inverse-on-surface ink. The OFF-track is a
   muted neutral (--xm-switch-track-off, AD-10 extension); the thumb is the MD3
   outline ink (legible on the off-track). When ON, the track fills with the
   single coral accent (--md-sys-color-primary) and the thumb flips to on-primary
   ink. Coral = on, never severity (AD-11).

   Motion (NFR-19 / UX-DR10): the thumb slides on translateX only — short4
   standard easing, NO bounce / spring / scale.

   BEM block: `switch`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
   (Distinct from the legacy `ds-switch` CSS block.)
   ============================================ */

.switch {
  display: inline-flex;
  flex-direction: column;
  gap: var(--s-1);
}

/* ---------- Control row — track + label, the focusable target ---------- */
.switch__control {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  user-select: none;
  outline: none;
}

/* ---------- Track ---------- */
.switch__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: var(--s-0-5);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--xm-switch-track-off);
  transition:
    background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

/* Focus ring — the canonical 3px coral halo on the track. */
.switch__control:focus-visible .switch__track {
  box-shadow: var(--xm-state-focus-ring);
}

/* ---------- Thumb — slides on translateX only ---------- */
.switch__thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-outline);
  box-shadow: var(--xm-switch-thumb-shadow);
  transform: translateX(0);
  transition: transform var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-standard),
    background var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-standard);
}

/* ---------- On — coral track, thumb slides + flips to on-primary ink ---------- */
.switch--on .switch__track {
  background: var(--md-sys-color-primary);
}
.switch--on .switch__thumb {
  transform: translateX(16px);
  background: var(--md-sys-color-on-primary);
}

/* ---------- Label ---------- */
.switch__label {
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-body-medium-weight)
    var(--md-sys-typescale-body-medium-size) /
    var(--md-sys-typescale-body-medium-line-height)
    var(--md-sys-typescale-body-medium-font);
  letter-spacing: 0;
}
/* Collapse the label gap when no label is slotted. */
.switch__label:empty {
  display: none;
}

/* ---------- Disabled — shared reduced emphasis, no pointer ---------- */
.switch--disabled .switch__control {
  cursor: not-allowed;
}
.switch--disabled .switch__track {
  opacity: 0.45;
  box-shadow: none;
}
.switch--disabled .switch__label {
  color: var(--xm-color-inverse-on-surface-disabled);
}

/* ---------- Helper / error message row ----------
   Severity is copy, not color — the error keeps the helper ink (rule 3a). */
.switch__message {
  padding-left: calc(var(--s-9) + var(--s-2));
  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);
}
.switch__message--helper {
  color: var(--xm-color-inverse-on-surface-muted);
}
.switch__message--error {
  color: var(--md-sys-color-inverse-on-surface);
}