/* Compact header controls keep their reserved size from the first paint. */
@layer ctr-portal-controls {
    html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation > .portal-navigation__top {
        position: relative !important;
        min-height: 40px !important;
        height: auto !important;
        padding-block: 0 !important;
        border-block-width: 0 !important;
        box-shadow: var(--ctr-nav-frame-shadow, 0 5px 0 #bec8ad) !important;
        z-index: 2 !important;
    }

    html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation > .portal-navigation__top > :is(.portal-navigation__primary, .portal-navigation__account) {
        min-height: 0 !important;
        height: auto !important;
        padding-block: 0 !important;
        margin-block: 0 !important;
        border-block-width: 0 !important;
    }

    html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation > .portal-navigation__top > :is(.portal-navigation__primary, .portal-navigation__account) > .portal-nav-link {
        min-height: 36px !important;
        height: auto !important;
        padding-block: 0 !important;
        margin-block: 0 !important;
    }

    html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation > .portal-navigation__top .portal-nav-preview > summary {
        min-height: 36px !important;
        height: auto !important;
        padding-block: 0 !important;
        margin-block: 0 !important;
        border-block-width: 0 !important;
    }

    /* The gold line sits below the green area without increasing its height. */
    html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation > .portal-navigation__top::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        inset: 100% 0 auto !important;
        height: 2px !important;
        background: #c3a35c !important;
        border: 0 !important;
        pointer-events: none !important;
        z-index: 1;
    }

    html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme {
        min-height: 40px !important;
        padding-block: 0 !important;
        margin-block: 0 !important;
    }

    html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme > button[data-set-theme] {
        min-height: 36px !important;
        padding-block: 0 !important;
        margin-block: 0 !important;
        border: 0 !important;
        font-weight: 400 !important;
        opacity: .58 !important;
    }

    /* The head script already restores data-theme before the first paint.
       ARIA is synchronized later by the theme; it must not resize the labels. */
    html[data-theme="light"] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme > button[data-set-theme="light"],
    html[data-theme="dark"] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme > button[data-set-theme="dark"] {
        font-weight: 700 !important;
        opacity: 1 !important;
    }

    html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme > button[data-set-theme]:is(:hover, :focus-visible) {
        opacity: 1 !important;
    }

    html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme > button[data-set-theme] > span {
        font-size: calc(11px - 1pt) !important;
    }

    html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme > button[data-set-theme] > img {
        display: block !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: none !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        margin: 3px 15px 3px 3px !important;
        transform: none;
        transform-origin: 50% 50%;
        animation: none !important;
        transition: none !important;
    }

    html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme > button[data-set-theme="light"] > img {
        content: url("theme-sun-3d.png") !important;
    }

    html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme > button[data-set-theme="dark"] > img {
        content: url("theme-moon-satin-3d-v2.png") !important;
    }

    html[data-theme="light"] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme > button[data-set-theme="light"] > img,
    html[data-theme="dark"] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme > button[data-set-theme="dark"] > img {
        animation: ctr-active-view-turn-left 120s ease-in-out 120s infinite !important;
    }

    html[data-theme] body #portal-navigation .portal-nav-link.portal-profile-link {
        padding-block: 0 !important;
    }

    /* common.js may add the profile icon at DOMContentLoaded. Reserve the
       same space from the first paint and release it in that very mutation. */
    html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation .portal-nav-link.portal-profile-link:not(:has(.ctr-access-original))::before {
        content: "" !important;
        display: block !important;
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
        margin-right: 3px !important;
    }

    html[data-theme] body #portal-navigation .portal-nav-link.portal-profile-link :is(.ctr-access-original, .ctr-access-badge) {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        flex: 0 0 32px !important;
    }

    @media (max-width: 760px) {
        html[data-theme] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme > button[data-set-theme] > span {
            font-size: calc(13px - 1pt) !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        html[data-theme="light"] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme > button[data-set-theme="light"] > img,
        html[data-theme="dark"] body header.site-masthead.site-masthead--classic #portal-navigation .portal-theme-switcher.portal-nav-theme > button[data-set-theme="dark"] > img {
            animation: none !important;
        }
    }
}

@keyframes ctr-active-view-turn-left {
    0% {
        transform: rotate(0deg);
    }
    1.666667%, 100% {
        transform: rotate(-360deg);
    }
}