/* Theme switch in the navbar. The navbar is primary-blue in both modes, so the
   slider needs colours that contrast with it — and an always-visible white
   thumb so the knob reads against either track colour.
   !important: this file is loaded (via _favicon.html) BEFORE the Bootstrap CDN
   stylesheet, so without it Bootstrap's later, dark-theme switch rules win. */
.js-theme-switch {
    cursor: pointer;
    /* Solid white thumb in both positions. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* Off (light): translucent track on the blue navbar. */
.js-theme-switch:not(:checked) {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* On (dark): dark track — high contrast against the blue navbar, and reads
   as "dark mode is on". */
.js-theme-switch:checked {
    background-color: #1a1d20 !important;
}

.js-theme-switch:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}