/* 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: #d6cfc3;
  --ff-toggle-edge: #8b8175;
  --ff-toggle-thumb: #fffdf8;
  -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: 999px !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: 0 1px 2px #24262235;
  transform: translateX(0);
  transition: transform 150ms ease;
  pointer-events: none;
}
input[type="checkbox"]:checked {
  --ff-toggle-track: #ac392d;
  --ff-toggle-edge: #ac392d;
}
input[type="checkbox"]:checked::before { transform: translateX(16px); }
input[type="checkbox"]:indeterminate {
  --ff-toggle-track: #6c5545;
  --ff-toggle-edge: #6c5545;
}
input[type="checkbox"]:indeterminate::before {
  transform: translateX(8px);
  background: linear-gradient(#6c5545, #6c5545) center / 8px 2px no-repeat, var(--ff-toggle-thumb);
}
input[type="checkbox"]:hover:not(:disabled) { filter: brightness(.95); }
input[type="checkbox"]:focus-visible {
  outline: 2px solid #ac392d !important;
  outline-offset: 3px !important;
}
input[type="checkbox"][aria-invalid="true"] { outline: 2px solid #b3261e; 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); }
}