/* Keep native form semantics while sharing one switch across home and admin. */
body:is(.home,.admin) input[type="checkbox"]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;box-sizing:border-box;width:44px;min-width:44px;max-width:44px;height:26px;min-height:26px;flex:0 0 44px;margin:0;padding:0;border:1px solid color-mix(in srgb,var(--muted) 32%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--muted) 28%,var(--surface));vertical-align:middle;cursor:pointer;outline:none;box-shadow:none;transition:background-color .3s,border-color .3s,box-shadow .25s,opacity .25s}
body:is(.home,.admin) input[type="checkbox"]::before{content:"";position:absolute;box-sizing:border-box;width:20px;height:20px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #00000026;transform:translateX(0);transition:transform .32s cubic-bezier(.22,1,.36,1),background-color .3s}
body:is(.home,.admin) input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
body:is(.home,.admin) input[type="checkbox"]:checked::before{transform:translateX(18px)}
body:is(.home,.admin) input[type="checkbox"]:indeterminate{background:color-mix(in srgb,var(--accent) 65%,var(--surface));border-color:var(--accent)}
body:is(.home,.admin) input[type="checkbox"]:indeterminate::before{transform:translateX(9px);background:linear-gradient(var(--accent),var(--accent)) center/8px 2px no-repeat,#fff}
body:is(.home,.admin) input[type="checkbox"]:hover:not(:disabled){box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
body:is(.home,.admin) input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body:is(.home,.admin) input[type="checkbox"]:disabled{opacity:.45;cursor:not-allowed}
body:is(.home,.admin) .todo>span{transition:color .3s,opacity .3s}
@media(prefers-reduced-motion:reduce){body:is(.home,.admin) input[type="checkbox"],body:is(.home,.admin) input[type="checkbox"]::before,body:is(.home,.admin) .todo>span{transition:none}}
@media(forced-colors:active){body:is(.home,.admin) input[type="checkbox"]{forced-color-adjust:none;background:Canvas;border-color:ButtonText}body:is(.home,.admin) input[type="checkbox"]:checked,body:is(.home,.admin) input[type="checkbox"]:indeterminate{background:Highlight;border-color:Highlight}body:is(.home,.admin) input[type="checkbox"]::before{background:ButtonText}body:is(.home,.admin) input[type="checkbox"]:checked::before,body:is(.home,.admin) input[type="checkbox"]:indeterminate::before{background:HighlightText}body:is(.home,.admin) input[type="checkbox"]:focus-visible{outline-color:Highlight}}
