/* One compact icon button throughout the site; the active theme chooses the visible icon. */
html[data-theme] .pa-theme-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    cursor: pointer;
}
html[data-theme=dark] .pa-theme-toggle { color: #e2e8f0 !important; }
html[data-theme] .pa-theme-toggle:hover { background: var(--brand-soft) !important; }
html[data-theme] .pa-theme-toggle:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
html[data-theme] .pa-theme-toggle::before,
html[data-theme] .pa-theme-toggle::after { display: none !important; content: none !important; }
html[data-theme] .pa-theme-symbol { position: absolute; inset: 0; display: block; width: auto; height: auto; pointer-events: none; }
html[data-theme] .pa-theme-symbol svg {
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    transform: translate(-50%, -50%) rotate(-35deg) scale(.75) !important;
    opacity: 0;
    transition: opacity .18s ease, transform .22s ease;
    stroke: currentColor;
}
html[data-theme=light] .pa-theme-symbol .pa-theme-icon-moon,
html[data-theme=dark] .pa-theme-symbol .pa-theme-icon-sun {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0) scale(1) !important;
}
html[data-theme=light] .pa-theme-symbol .pa-theme-icon-sun { transform: translate(-50%, -50%) rotate(-35deg) scale(.75) !important; }
html[data-theme=dark] .pa-theme-symbol .pa-theme-icon-moon { transform: translate(-50%, -50%) rotate(35deg) scale(.75) !important; }
@media (max-width: 600px) {
    html[data-theme] .pa-theme-toggle { flex-basis:36px;width:36px;min-width:36px;height:36px;min-height:36px; }
}
@media (prefers-reduced-motion: reduce) { html[data-theme] .pa-theme-symbol svg { transition: none; } }
