/* The light/dark switch (theme.js), on every page. Each page's own stylesheet holds its dark colours,
   under :root[data-theme="dark"]. */
:root[data-theme="dark"] { color-scheme: dark; }
.theme-toggle { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0; cursor: pointer;
  color: inherit; background: transparent; border: 2px solid currentColor; border-radius: 0; -webkit-tap-highlight-color: transparent; }
.theme-toggle svg { width: 18px; height: 18px; fill: currentColor; shape-rendering: crispEdges; }
.theme-toggle:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.theme-toggle:active { transform: translate(1px, 1px); }
.theme-toggle:focus-visible { outline: 2px dashed currentColor; outline-offset: 3px; }
/* pages with no header of their own: top right, and it scrolls away with the page */
.theme-toggle.corner { position: absolute; top: 14px; right: 16px; z-index: 6; }