/* Light and dark toggle in the top bar. Colours come from each page's own :root tokens, and the
   pages' :root[data-theme="dark"] and :not([data-theme="light"]) rules do the switching, so this
   file only draws the button. The moon shows while the page is light (it switches to dark), the
   sun while it's dark. theme.js adds class "tt" to <html> once it has wired the button, and only
   then does the button replace the feedback icon (both are 44px, so the bar doesn't move). If
   JavaScript is off or theme.js fails to load, the feedback icon stays and no dead button shows. */
.tt-li{display:none}
html.tt .tt-li{display:block}
html .bar .tt-btn{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin:0;
  border:0;border-radius:4px;background:none;color:var(--ink-2);cursor:pointer;font:inherit;
}
@media (hover:hover){html .bar .tt-btn:hover{color:var(--ink);background:var(--code-bg)}}
html .bar .tt-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tt-btn svg{width:20px;height:20px}
.tt-btn .tt-sun{display:none}
:root[data-theme="dark"] .tt-btn .tt-sun{display:block}
:root[data-theme="dark"] .tt-btn .tt-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tt-btn .tt-sun{display:block}
  :root:not([data-theme="light"]) .tt-btn .tt-moon{display:none}
}
/* This button takes the top-bar feedback icon's place (that icon only showed below 900px). With
   both, the longer top bars ran up to 46px too wide: /check at 375px, /security at 600 to 644px.
   Below 900px, swapping one 44px icon for another keeps every bar as wide as before. Feedback stays
   one click away: the footer's "Feedback on this page" link opens the same form, and from 900px up
   the side tab does too (there the button is a new item; those bars have room). Below 360px this
   button hides, as the feedback icon did, and the page follows the system setting or a saved
   choice. */
html.tt .bar .fb-bar-li{display:none}
@media (max-width:359px){html.tt .tt-li{display:none}}
@media print{.tt-li{display:none!important}}