/* ============================================================================
   Theme toggle — shared component, defined ONCE here and loaded by every
   context that renders it:
     * the main site   — templates/base.html + templates/index.html (navbar);
     * the demo showcase — demos/_home/base.html (isolated, served separately).
   So the toggle is identical everywhere with zero duplicated CSS.

   Look: squared + red, sized for a DARK header (both the navbar and the
   showcase header are ink). Two cells with a hairline divider; the active
   cell fills red.

   Markup: .theme-toggle-nav > button.theme-toggle-btn[.active]
     - main site uses Font Awesome <i> icons; the showcase uses inline <svg>.
   Wired by /static/js/theme.js (setTheme() + .active sync).

   Red is var(--red) — the always-red signal token, present in the contract on
   every surface (variables.css on the main site, surface-editorial.css on the
   showcase). Per the token doctrine in CLAUDE.md; no --brand-* primitive here.
   ========================================================================== */
.theme-toggle-nav {
    display: inline-flex;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.theme-toggle-nav .theme-toggle-btn {
    width: 2.1rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

/* hairline divider between the two cells */
.theme-toggle-nav .theme-toggle-btn + .theme-toggle-btn {
    border-left: 1.5px solid rgba(255, 255, 255, 0.2);
}

.theme-toggle-nav .theme-toggle-btn i { font-size: 0.85rem; }            /* Font Awesome (main site) */
.theme-toggle-nav .theme-toggle-btn svg { width: 0.9rem; height: 0.9rem; } /* inline svg (showcase) */

.theme-toggle-nav .theme-toggle-btn:hover { color: #ffffff; }

.theme-toggle-nav .theme-toggle-btn.active {
    background: var(--red);
    color: #ffffff;
}

@media (max-width: 480px) {
    .theme-toggle-nav .theme-toggle-btn { width: 1.85rem; height: 1.7rem; }
    .theme-toggle-nav .theme-toggle-btn i { font-size: 0.78rem; }
}