/* ============================================
   xm-checkbox — toggle field built on XmField.

   A compact, inline toggle: the box sits BESIDE the label (toggle layout),
   not above it like the bordered text-field chrome. State machinery
   (disabled / focus / form-association / change event) is inherited from
   XmField; this file only styles the box, the mark, and the label row.

   Surface & ink: the checkbox rides the card tier shared by every XmField
   sibling — ink is --md-sys-color-inverse-on-surface, the box hairline is
   --md-sys-color-outline-variant. Selected (checked OR indeterminate) fills
   the box with the single coral accent (--md-sys-color-primary) and paints
   the mark in --md-sys-color-on-primary. Coral signals selection only —
   never severity (AD-11 / rule 3a). The error string in the message row
   carries severity via copy, not color.

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

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

/* ---------- Control row — box + label, the focusable target ---------- */
.checkbox__control {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  user-select: none;
  border-radius: var(--md-sys-shape-corner-extra-small);
  outline: none;
}

/* ---------- Box — the 18px square that holds the mark ---------- */
.checkbox__box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  color: var(--md-sys-color-on-primary);
  transition:
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.checkbox__control:hover .checkbox__box {
  border-color: var(--md-sys-color-outline);
}

/* Focus ring — the canonical 3px coral halo, never a hard-coded width. */
.checkbox__control:focus-visible .checkbox__box {
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--xm-state-focus-ring);
}

/* ---------- Mark — primitives check / indeterminate icon ---------- */
.checkbox__mark {
  display: inline-flex;
  color: var(--md-sys-color-on-primary);
  visibility: hidden;
}

/* ---------- Label ---------- */
.checkbox__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;
}
.checkbox__label--empty {
  display: none;
}

/* ---------- Selected — checked OR indeterminate ---------- */
.checkbox--selected .checkbox__mark {
  visibility: visible;
}
.checkbox--selected .checkbox__box {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}
.checkbox--selected .checkbox__control:hover .checkbox__box {
  border-color: var(--md-sys-color-primary);
}

/* ---------- Disabled — shared reduced emphasis; hover reverted ---------- */
.checkbox--disabled .checkbox__control {
  cursor: not-allowed;
}
.checkbox--disabled .checkbox__box {
  opacity: 0.45;
  box-shadow: none;
}
.checkbox--disabled .checkbox__label {
  color: var(--xm-color-inverse-on-surface-disabled);
}
.checkbox--disabled .checkbox__control:hover .checkbox__box {
  border-color: var(--md-sys-color-outline-variant);
}
.checkbox--disabled.checkbox--selected .checkbox__control:hover .checkbox__box {
  border-color: var(--md-sys-color-primary);
}

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