/* Checkbox row (shared/_checkbox) — native control, accent-colored. */
@layer components {
  .checkbox-field {
    margin-bottom: var(--space-4);
  }

  .checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
  }
  .checkbox-label input[type="checkbox"] {
    width: var(--icon);
    height: var(--icon);
    accent-color: var(--accent);
  }

  .checkbox-help {
    margin-top: var(--space-1);
    margin-left: calc(var(--icon) + var(--space-2));
    font: var(--type-small);
    color: var(--text-secondary);
  }
}