/* Native checkbox state and validation remain the source of truth. */
input[type="checkbox"][role="switch"]{-webkit-appearance:none;appearance:none;position:relative;display:inline-block;box-sizing:border-box;flex:0 0 35px;width:35px;max-width:35px;min-width:35px;height:21px;min-height:21px;margin:0;padding:0;border:.7px solid #737373;border-radius:999px;background:#d1d1d6;vertical-align:middle;cursor:pointer;outline-offset:4px}
input[type="checkbox"][role="switch"]::before{content:"";position:absolute;box-sizing:border-box;left:1.4px;top:1.4px;width:16.8px;height:16.8px;border:.7px solid #b8b8bd;border-radius:50%;background:#fff;box-shadow:0 .7px 2.1px #0002;transform:translateX(0);pointer-events:none}
input[type="checkbox"][role="switch"]:checked{background:#248a3d;border-color:#248a3d}
input[type="checkbox"][role="switch"]:checked::before{transform:translateX(14px);border-color:#fff}
input[type="checkbox"][role="switch"]:focus-visible{outline:2px solid #005fcc}
input[type="checkbox"][role="switch"]:disabled{opacity:.55;cursor:not-allowed}
label:has(> input[type="checkbox"][role="switch"]){display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.checkbox-group:has(input[role="switch"]){min-height:44px;gap:10px}
span[data-paid-controls]:has(> input[role="switch"]){display:inline-flex!important;align-items:center;min-height:44px;flex-shrink:0}
@media(prefers-reduced-motion:no-preference){input[type="checkbox"][role="switch"]:not(:disabled){transition:background-color 150ms ease,border-color 150ms ease}input[type="checkbox"][role="switch"]:not(:disabled)::before{transition:transform 150ms ease}}
/* The ad visibility switch is 20% larger than the shared compact switches. */
#hideAds[role="switch"]{flex-basis:42px;width:42px;min-width:42px;max-width:42px;height:25.2px;min-height:25.2px;border-width:.84px}
#hideAds[role="switch"]::before{left:1.68px;top:1.68px;width:20.16px;height:20.16px;border-width:.84px;box-shadow:0 .84px 2.52px #0002}
#hideAds[role="switch"]:checked::before{transform:translateX(16.8px)}
@media(forced-colors:active){input[type="checkbox"][role="switch"]{forced-color-adjust:none;background:Canvas;border-color:CanvasText}input[type="checkbox"][role="switch"]::before{background:CanvasText;border-color:CanvasText;box-shadow:none}input[type="checkbox"][role="switch"]:checked{background:Highlight;border-color:Highlight}input[type="checkbox"][role="switch"]:checked::before{background:HighlightText;border-color:HighlightText}}

/* Keep switch controls at the trailing edge of their labelled rows. */
label:has(> span[data-paid-controls] > input[role="switch"]){display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
label > input[role="switch"],.checkbox-group > input[role="switch"],label > span[data-paid-controls]:has(> input[role="switch"]){order:1;margin-inline-start:auto}