/* Visual shared by native checkboxes, including dynamically inserted controls.
   Keep checkbox semantics/events: no role=switch, hidden inputs or JS adapters. */
:root{
 --checkbox-off:#BECBD7;
 --checkbox-on:var(--brand-navy,#0E263B);
 --checkbox-border:#718496;
 --checkbox-focus:#166BB0;
 --checkbox-mixed:#D7E6F1;
}
input[type="checkbox"]{
 -webkit-appearance:none;appearance:none;
 display:inline-block;position:relative;box-sizing:border-box;
 width:42px!important;min-width:42px!important;max-width:42px!important;
 height:24px!important;min-height:24px!important;max-height:24px!important;
 padding:0!important;margin:0;flex:0 0 42px;vertical-align:middle;
 border:1px solid var(--checkbox-border)!important;border-radius:999px!important;
 background:var(--checkbox-off)!important;background-image:none!important;
 cursor:pointer;overflow:visible;
 transition:background-color .18s ease,border-color .18s ease;
}
input[type="checkbox"]::before{
 content:"";display:block;position:absolute;left:2px;top:2px;
 width:18px;height:18px;box-sizing:border-box;border-radius:50%;
 background:#fff;border:1px solid #7A8B99;box-shadow:0 1px 2px #0E263B33;
 transform:translateX(0);transition:transform .18s ease,background-color .18s ease;
 pointer-events:none;
}
input[type="checkbox"]:checked{
 background:var(--checkbox-on)!important;border-color:var(--checkbox-on)!important;
}
input[type="checkbox"]:checked::before{transform:translateX(18px);border-color:#fff}
/* A centered dark thumb and dashed outline mean partial, not complete selection. */
input[type="checkbox"]:indeterminate{
 background:var(--checkbox-mixed)!important;border:1px dashed var(--checkbox-on)!important;
}
input[type="checkbox"]:indeterminate::before{
 transform:translateX(9px);background:var(--checkbox-on);border-color:var(--checkbox-on);
}
input[type="checkbox"]:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.7)}
input[type="checkbox"]:focus-visible{
 outline:3px solid var(--checkbox-focus)!important;outline-offset:3px;
 box-shadow:0 0 0 2px #fff;
}
@media(prefers-reduced-motion:reduce){
 input[type="checkbox"],input[type="checkbox"]::before{transition:none}
}
/* Preserve system contrast settings rather than hiding state in forced colors. */
@media(forced-colors:active){
 input[type="checkbox"]{
  -webkit-appearance:auto;appearance:auto;forced-color-adjust:auto;
  background:Canvas!important;border:1px solid ButtonText!important;
 }
 input[type="checkbox"]::before{display:none}
}