/* <CheckboxField> — box and label on one row. `min-height` is the same
   touch-target floor `.ui-form-control` sets (FormField.css has the
   reasoning), so a checkbox beside a text or select field is as tall as it and
   its label is centred on the same line. The box takes the accent colour from
   the shared theme instead of the browser's blue. */
.ui-checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75em;
  cursor: pointer;
  color: var(--fg);
}
.ui-checkbox-field input {
  accent-color: var(--purple);
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  flex: none;
  cursor: inherit;
}
.ui-checkbox-field:has(input:disabled) {
  color: var(--muted);
  cursor: not-allowed;
}