/* The theme switch: system, dark, light. One component for every page that
   shows it -- the Map's Preferences tab, and the bottom centre of any page
   seen signed out. Reads the page's own tokens; every Candor stylesheet
   names the same ones. theme_init.js (head.php) does the binding. */
.themeSwitch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--smoke);
}

.themeSwitch-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.themeSwitch-opt:hover { color: var(--ink); }

/* The chosen one wears the same gradient as a switch that is on. */
.themeSwitch-opt.active {
    background: linear-gradient(135deg, var(--orange), var(--yellow));
    color: #2a1a0f;
}

.themeSwitch-opt:focus-visible { outline: 2px solid var(--blue-strong); outline-offset: 2px; }

.themeIcon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Signed out, bottom centre, over the footer's empty middle. */
.themeSwitch--floating {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    background: var(--white);
    box-shadow: 0 6px 18px rgba(15, 27, 45, 0.18);
}

/* Room under the footer's last line, so the two never meet. */
body:has(.themeSwitch--floating) .footer { padding-bottom: 54px; }

@media (max-width: 520px) {
    .themeSwitch--floating { bottom: 10px; }
    .themeSwitch--floating .themeSwitch-label { display: none; }
    .themeSwitch--floating .themeSwitch-opt { padding: 0 10px; }
}