/* One switch appearance for the platform's existing control families.
   Native inputs draw the track and thumb so checked, disabled, keyboard and
   form state stay in sync without a second JavaScript state or a nested peer.
   The scoped !important rules replace legacy inline/Tailwind switch styling. */
:root {
  --sq-toggle-off: #cbd5e1;
  --sq-toggle-on: #059669;
  --sq-toggle-thumb: #fff;
  --sq-toggle-duration: 180ms;
}

:is(.dark, .dark-mode, [data-theme="dark"]) {
  --sq-toggle-off: #475569;
}

input[type="checkbox"]:is(.sq-toggle-input, .sq-toggle, .toggle-checkbox, .lb-display-toggle),
input[type="checkbox"]:has(+ :is(.slider, .sq-toggle-track, .toggle, .toggle-track, .theme-toggle-slider, .ace-optin-switch)),
input[type="checkbox"]:is(.peer, .sr-only):has(+ .rounded-full),
button.sq-toggle,
.toggle-switch,
.theme-toggle[onclick]:has(> .theme-toggle-slider) {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  position: relative !important;
  inset: auto !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  flex: 0 0 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: var(--sq-toggle-color, var(--sq-toggle-off))
    radial-gradient(circle closest-side, var(--sq-toggle-thumb) 96%, transparent 100%)
    var(--sq-toggle-position, 2px) center / 20px 20px no-repeat !important;
  box-shadow: none !important;
  opacity: 1 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  transform: none !important;
  translate: none !important;
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation;
  forced-color-adjust: none;
  transition: background-color var(--sq-toggle-duration) ease,
    background-position var(--sq-toggle-duration) ease !important;
}

/* Both nested and sibling decorative thumbs are retired, including ::after
   thumbs on .sq-toggle-track. Keep their DOM hooks for existing page scripts. */
input[type="checkbox"] + :is(.slider, .sq-toggle-track, .toggle, .toggle-track, .theme-toggle-slider, .ace-optin-switch),
input[type="checkbox"]:is(.peer, .sr-only) + .rounded-full,
input[type="checkbox"]:is(.peer, .sr-only) + .rounded-full + .absolute.rounded-full,
input.sq-toggle-input + .sq-toggle-track + .toggle-thumb,
button.sq-toggle > *,
.toggle-switch > *,
.theme-toggle[onclick] > .theme-toggle-slider {
  display: none !important;
}

:is(input.toggle-checkbox, .toggle-switch, .theme-toggle[onclick]:has(> .theme-toggle-slider))::before,
:is(input.toggle-checkbox, .toggle-switch, .theme-toggle[onclick]:has(> .theme-toggle-slider))::after {
  content: none !important;
}

/* State comes from the checkbox, the existing active class, or the button's
   bound ARIA state. No dependency on generated peer utilities or transforms. */
input[type="checkbox"]:checked,
button.sq-toggle[aria-checked="true"],
.toggle-switch.active,
.toggle-switch.on,
:is(.dark, .dark-mode, [data-theme="dark"]) .theme-toggle[onclick]:has(> .theme-toggle-slider) {
  --sq-toggle-color: var(--sq-toggle-on);
  --sq-toggle-position: 22px;
}

/* Room for the common track in formerly compact labels, with a 44px tap area.
   Text keeps its existing layout and may wrap beside the non-shrinking input. */
label:is(.switch, .sq-toggle, .theme-toggle, .toggle),
label:has(> input[type="checkbox"]:is(.peer, .sr-only) + .rounded-full) {
  display: inline-flex !important;
  position: relative;
  align-items: center;
  flex-shrink: 0;
  width: auto !important;
  min-width: 44px;
  height: auto !important;
  min-height: 44px;
  transform: none !important;
  cursor: pointer;
}

input[type="checkbox"]:is(.sq-toggle-input, .sq-toggle, .toggle-checkbox, .lb-display-toggle):focus-visible,
input[type="checkbox"]:has(+ :is(.slider, .sq-toggle-track, .toggle, .toggle-track, .theme-toggle-slider, .ace-optin-switch)):focus-visible,
input[type="checkbox"]:is(.peer, .sr-only):has(+ .rounded-full):focus-visible,
button.sq-toggle:focus-visible,
.toggle-switch:focus-visible,
.theme-toggle[onclick]:has(> .theme-toggle-slider):focus-visible {
  outline: 2px solid var(--sq-toggle-on) !important;
  outline-offset: 3px !important;
}

input[type="checkbox"]:is(.sq-toggle-input, .sq-toggle, .toggle-checkbox, .lb-display-toggle):disabled,
input[type="checkbox"]:has(+ :is(.slider, .sq-toggle-track, .toggle, .toggle-track, .theme-toggle-slider, .ace-optin-switch)):disabled,
input[type="checkbox"]:is(.peer, .sr-only):has(+ .rounded-full):disabled,
button.sq-toggle:disabled,
:is(.toggle-switch, .theme-toggle[onclick]:has(> .theme-toggle-slider))[aria-disabled="true"] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

@media (prefers-reduced-motion: reduce) {
  :root { --sq-toggle-duration: 0ms; }
}

@media (forced-colors: active) {
  :root, :is(.dark, .dark-mode, [data-theme="dark"]) {
    --sq-toggle-off: GrayText;
    --sq-toggle-on: Highlight;
    --sq-toggle-thumb: Canvas;
  }
}