/* Shared native-checkbox skin: no JS, duplicate controls or changes to form values.
   Geometry is fixed here so legacy forms and third-party widgets cannot stretch
   the track. Keep native checkbox semantics, including mixed bulk selection. */
input[type="checkbox"] {
  --ff-toggle-track: var(--ff-well,var(--brand-cream));
  --ff-toggle-edge: var(--ff-secondary,var(--brand-muted));
  --ff-toggle-thumb: var(--ff-action-text,var(--brand-paper));
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  box-sizing: border-box !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  border: 1px solid var(--ff-toggle-edge) !important;
  border-radius: var(--ff-control-radius,var(--brand-control-radius)) !important;
  background: var(--ff-toggle-track) !important;
  box-shadow: none !important;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, border-color 150ms ease;
}
input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ff-toggle-thumb);
  box-shadow: none;
  transform: translateX(0);
  transition: transform 150ms ease;
  pointer-events: none;
}
input[type="checkbox"]:checked {
  --ff-toggle-track: var(--ff-action,var(--brand-red));
  --ff-toggle-edge: var(--ff-action,var(--brand-red));
}
input[type="checkbox"]:checked::before { transform: translateX(16px); }
input[type="checkbox"]:indeterminate {
  --ff-toggle-track: var(--ff-secondary,var(--brand-muted));
  --ff-toggle-edge: var(--ff-secondary,var(--brand-muted));
}
input[type="checkbox"]:indeterminate::before {
  transform: translateX(8px);
  background: linear-gradient(var(--ff-secondary,var(--brand-muted)), var(--ff-secondary,var(--brand-muted))) center / 8px 2px no-repeat, var(--ff-toggle-thumb);
}
input[type="checkbox"]:hover:not(:disabled) { --ff-toggle-edge: var(--ff-action,var(--brand-red)); }
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ff-action,var(--brand-red)) !important;
  outline-offset: 3px !important;
}
input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--ff-status-error-text,var(--brand-red-dark)); outline-offset: 3px; }
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* Widen the dedicated control column without expanding the forms themselves. */
.desk-field--checkbox { grid-template-columns: 40px minmax(0, 1fr); }
.desk-field--checkbox > label { min-height: 24px; cursor: pointer; }
.desk-field--checkbox .form-errors { grid-column: 2; }
.task-checklist .task-check-item { grid-template-columns: 40px minmax(0, 1fr); }
label:has(> input[type="checkbox"]) { cursor: pointer; }
label:has(> input[type="checkbox"]:disabled) { cursor: default; }
/* A whole labelled row remains easy to tap, even in dense permission lists. */
:where(.access-console, .studio-check, .ops-check, .consent, .brew-addons, .partner-tariff-addons) label:has(> input[type="checkbox"]),
label:is(.studio-check, .ops-check, .consent, .task-check-required) { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"], input[type="checkbox"]::before { transition: none; }
}
@media (forced-colors: active) {
  input[type="checkbox"] {
    forced-color-adjust: none;
    --ff-toggle-track: Canvas;
    --ff-toggle-edge: CanvasText;
    --ff-toggle-thumb: CanvasText;
  }
  input[type="checkbox"]:checked, input[type="checkbox"]:indeterminate {
    --ff-toggle-track: Highlight;
    --ff-toggle-edge: Highlight;
    --ff-toggle-thumb: HighlightText;
  }
  input[type="checkbox"]:focus-visible { outline-color: Highlight !important; }
  input[type="checkbox"]:disabled { --ff-toggle-edge: GrayText; opacity: 1; }
  input[type="checkbox"]:disabled::before { background: GrayText; }
  input[type="checkbox"]:indeterminate::before { background: var(--ff-toggle-thumb); }
}