/* Part 4 stage E (owner decisions R14 / R15): THE on/off slide switch of the system (core/templates/core/_switch.html,
   class sbs-sw). A real checkbox (role="switch") over a track; ON = the colour the platform admin chose (Settings >
   Theme, "Switch on", contrast-checked), OFF = grey, the knob always white. Declarations ("I agree", consent, "I have
   checked") and choosing items from a list stay tick boxes (data-tick), ticked in the same colour.
   Part 7B (owner, 6 Nov 2026: switches overlapping their text): the layout of the switch is fixed here once, for
   every page. A page's own rules (".mk .sbs-acct label{display:block}", "#page label{...}", ".field span{...}") used to
   win over the switch and turn the label into a block, so the track lost its width and the knob was drawn over the
   words. The layout properties below are therefore marked !important: the label is always its own flex row (as wide
   as its words, never wider than its box; a bare switch stays inline), the track never shrinks (flex 0 0 36px) and
   the words sit beside it and wrap there, at any width, inside grids, tables and cards. Only typography (size,
   weight, colour) and the outer margin are left to the page. scripts/js_sweep/overlap_check.js checks every switch. */
.sbs-sw.sbs-sw{position:relative!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;float:none!important;box-sizing:border-box;width:-webkit-fit-content!important;width:fit-content!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:24px;margin:4px 0;padding:0!important;cursor:pointer;vertical-align:middle;text-transform:none;letter-spacing:normal;text-align:left;background:none;border:0;line-height:1.4;overflow:visible!important}
.sbs-sw.sbs-sw>input[role=switch]{position:absolute!important;left:0!important;top:50%!important;right:auto!important;bottom:auto!important;display:block!important;width:36px!important;height:20px!important;min-width:0!important;max-width:none!important;margin:-10px 0 0 0!important;padding:0!important;border:0!important;opacity:0!important;cursor:pointer;z-index:1;appearance:auto;transform:none!important}
.sbs-sw.sbs-sw>.sbs-sw-k{position:relative!important;display:block!important;flex:0 0 36px!important;order:0!important;align-self:center!important;box-sizing:border-box!important;width:36px!important;min-width:36px!important;max-width:36px!important;height:20px!important;min-height:20px!important;margin:0!important;padding:0!important;border:0!important;border-radius:999px;background:var(--t-switch-off,#8E95A2);transition:background .15s;float:none!important}
.sbs-sw.sbs-sw>.sbs-sw-k::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--t-switch-knob,#FFFFFF);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.sbs-sw.sbs-sw>input[role=switch]:checked+.sbs-sw-k{background:var(--t-switch-on,#2E7D3A)}
.sbs-sw.sbs-sw>input[role=switch]:checked+.sbs-sw-k::after{left:19px}
.sbs-sw.sbs-sw>input[role=switch]:focus-visible+.sbs-sw-k{outline:2px solid var(--t-primary,#1E46A0);outline-offset:2px}
.sbs-sw.sbs-sw>input[role=switch]:disabled{cursor:not-allowed}
.sbs-sw.sbs-sw>input[role=switch]:disabled+.sbs-sw-k{opacity:.55}
.sbs-sw.sbs-sw>.sbs-sw-t{position:static!important;display:block!important;flex:1 1 auto!important;order:1!important;min-width:0!important;max-width:100%!important;width:auto!important;margin:0!important;padding:0!important;float:none!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;font-size:inherit;font-weight:inherit;color:inherit}
/* a switch with no words beside it (a table cell, a row of the role grid) stays inline, so a centred cell centres it */
.sbs-sw.sbs-sw.sbs-sw-bare{display:inline-flex!important;gap:0!important;margin:0;min-height:20px}
/* the same switch as a button that saves at once (a form with one submit button; e.g. Help categories) */
.sbs-sw-btn.sbs-sw-btn{position:relative!important;display:inline-block!important;flex:0 0 36px!important;box-sizing:border-box!important;width:36px!important;min-width:36px!important;max-width:36px!important;height:20px!important;min-height:20px!important;padding:0!important;margin:0;border:0!important;border-radius:999px!important;background:var(--t-switch-off,#8E95A2)!important;cursor:pointer;transition:background .15s;vertical-align:middle;float:none!important}
.sbs-sw-btn.sbs-sw-btn::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--t-switch-knob,#FFFFFF);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.sbs-sw-btn.sbs-sw-btn[aria-checked=true]{background:var(--t-switch-on,#2E7D3A)!important}
.sbs-sw-btn.sbs-sw-btn[aria-checked=true]::after{left:19px}
.sbs-sw-btn.sbs-sw-btn:focus-visible{outline:2px solid var(--t-primary,#1E46A0);outline-offset:2px}
/* :root raises the weight over a page's own ".fld input{accent-color:...}" */
:root input[type=checkbox][data-tick]{accent-color:var(--t-switch-on,#2E7D3A)}
@media (prefers-reduced-motion:reduce){.sbs-sw.sbs-sw>.sbs-sw-k,.sbs-sw.sbs-sw>.sbs-sw-k::after,.sbs-sw-btn,.sbs-sw-btn::after{transition:none}}