/* The whole row is the target, and it is a ROW HIGH: the box itself is 14px, and a pointer target
   under 24px is what WCAG 2.5.8 asks not to build. The label is part of the control (the primitive
   wraps both), so making the row tall makes the target tall. */
.checkbox {
  display: flex;
  min-height: var(--row-height);
  gap: var(--space-4);
  align-items: center;
  color: var(--color-text);
  cursor: default;
}

/* The box is drawn by us rather than by the browser: a native one is painted by the operating
   system and would be the one control in the application outside the tokens. */
.box {
  display: flex;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  flex: none;
  align-items: center;
  justify-content: center;

  /* ⚠ The muted tone and not `--color-border`: the box IS the control here — nothing else says
     where it is or whether it is set — and 1.4.11 asks 3:1 of exactly that. Measured on the modal
     surface: `--color-border` 1.20:1, `--color-text-muted` 3.29:1. The token's own caveat is about
     text, and this is not text. */
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-bar);
  color: var(--color-text);
}

.mark {
  opacity: 0;
}

/* Checked is a step of SURFACE and not a colour — the same rule the primary button follows: there
   are no green "save" buttons in this interface, and the accent is reserved for focus (§4.2). */
.checkbox[data-selected] .box {
  border-color: var(--color-text-secondary);
  background-color: var(--color-raised-strong);
}

.checkbox[data-selected] .mark {
  opacity: 1;
}

.checkbox[data-hovered] .box {
  border-color: var(--color-text-secondary);
}

/* Focus is visible from the keyboard only, as on every control of the shell. */
.checkbox[data-focus-visible] .box {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}