/* run 6b design: the mode band (main::before, in the flow) and the labelled switcher. docs/run6b/design.md */
:root{--band-h:24px;--band-sky:var(--mode-accent);--band-ground:var(--mode-hero-a);--ms-mark:url(/assets/band/mark-sat.svg)}
html[data-theme="dark"]{--band-sky:var(--mode-hero-b);--band-ground:var(--mode-accent)}
html[data-mode="home"]{--band-sky:var(--muted);--band-ground:var(--ink-soft);--ms-mark:url(/assets/band/mark-home.svg)}
html[data-mode="act"]{--ms-mark:url(/assets/band/mark-act.svg)}
html[data-mode="ap"]{--ms-mark:url(/assets/band/mark-ap.svg)}
@media (min-width:761px){:root{--band-h:32px}}
@supports (mask-image:url(#a)) or (-webkit-mask-image:url(#a)){
main::before{content:"";display:block;height:var(--band-h);pointer-events:none;background:linear-gradient(var(--band-sky) 8%,var(--band-ground) 64%);-webkit-mask:url(/assets/band/sat.svg) 0 100%/auto 100% repeat-x;mask:url(/assets/band/sat.svg) 0 100%/auto 100% repeat-x}
html[data-mode="act"] main::before{-webkit-mask-image:url(/assets/band/act.svg);mask-image:url(/assets/band/act.svg)}
html[data-mode="ap"] main::before{-webkit-mask-image:url(/assets/band/ap.svg);mask-image:url(/assets/band/ap.svg)}
html[data-mode="home"] main::before{-webkit-mask-image:url(/assets/band/home.svg);mask-image:url(/assets/band/home.svg)}
body.sb-running main::before{display:none}
}
#sidebar #modeSwitch,.sb-mode{flex:none;display:flex;align-items:center;gap:9px;width:100%;min-height:48px;margin:0 0 8px;padding:6px 10px;border-radius:12px;background:var(--mode-accent-soft)!important;border:1px solid var(--mode-accent-line)!important;color:var(--ink)!important;font:inherit;text-align:left;white-space:nowrap;cursor:pointer;justify-content:flex-start}
#sidebar #modeSwitch:hover,.sb-mode:hover{box-shadow:inset 0 0 0 1px var(--mode-accent-line)}
#sidebar #modeSwitch:focus-visible,.sb-mode:focus-visible{outline:3px solid var(--mode-focus);outline-offset:1px}
.ms-mark{flex:none;width:24px;height:24px;background:var(--mode-accent);-webkit-mask:var(--ms-mark) center/contain no-repeat;mask:var(--ms-mark) center/contain no-repeat}
.ms-txt{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.ms-k{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
#sidebar #modeSwitch .nl,.sb-mode .nl{display:block!important;font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.mode-switch .nl::after,.sb-mode .nl::after{content:"\00AE";font-size:.6em;vertical-align:.7em;margin-left:1px}
html[data-mode="home"] :is(.mode-switch,.sb-mode) .nl::after{content:none}
.ms-chev{flex:none;width:16px;height:16px;margin-left:auto;color:var(--ink-soft)}
#sidebar:not(.expanded) #modeSwitch{flex-direction:column;justify-content:center;gap:2px;padding:6px 0 5px!important;min-height:52px}
#sidebar:not(.expanded) #modeSwitch .nl{font-size:11.5px}
#sidebar:not(.expanded) #modeSwitch :is(.ms-k,.ms-chev){display:none}
#sidebar:not(.expanded) #modeSwitch .ms-mark{width:22px;height:22px}
.sb-mode{width:auto;height:44px;min-height:44px;margin:0 auto 0 0;padding:0 10px 0 8px;gap:7px}
.sb-mode .ms-mark{width:20px;height:20px}
.sb-mode .ms-chev{width:14px;height:14px;margin-left:0}
@media (max-width:400px){.sb-mode .ms-chev{display:none}}@media (max-width:389px){.sb-topbar .sb-brand span{display:none}}@media (max-width:359px){.sb-mode .ms-k{display:none}.sb-mode{padding:0 8px 0 6px}.sb-mode .ms-mark{width:18px;height:18px}}
@media (min-width:761px) and (max-height:1049px){#sidebar.sb-rail:not(.expanded){padding-top:6px}#sidebar.sb-rail:not(.expanded) .side-toggle{margin-bottom:1px}#sidebar.sb-rail:not(.expanded) .side-top{display:none}#sidebar:not(.expanded) #modeSwitch{gap:1px;min-height:44px;padding:4px 0!important;margin-bottom:2px}#sidebar:not(.expanded) #modeSwitch .ms-mark{width:16px;height:16px}}