/* Shared header density; keep icon artwork and text preferences intact. */
html body .top-nav,
html body:has(.auth-login) .top-nav {
    min-height: 52px;
    padding-block: 2px !important;
    box-sizing: border-box;
}
html body .top-nav > .container-fluid {
    min-height: 44px;
    align-items: center;
}
/* Remove the inline-link baseline space below the brand artwork. */
html body .top-nav .top-nav-title,
html body .top-nav .top-nav-title > a {
    display: flex;
    align-items: center;
}
html body .top-nav .top-nav-title > a {
    min-height: 44px;
}
html body .top-nav .site-logo {
    aspect-ratio: 5 / 4;
    height: auto;
    object-fit: contain;
}
html body .top-nav :is(.top-nav-links .btn, .nav-user-name) {
    min-height: 44px;
    padding-block: 4px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 1200px) {
    html body .top-nav .navbar-nav {
        min-height: 44px;
        padding-block: 2px;
        align-items: center;
    }
    html body .top-nav .navbar-nav .nav-link {
        min-height: 36px;
        padding-block: 4px;
        display: flex;
        align-items: center;
    }
    html body .top-nav :is(.top-nav-title, .top-nav-links, .account-menu) {
        margin-block: 0 !important;
    }
}
@media (max-width: 1199px) {
    html body .top-nav .nav-user-name {
        font-size: 1.6rem !important;
    }
    html body .top-nav :is(.nav-large-text-mobile, .nav-dark-mode-mobile, .navbar-toggler) {
        min-height: 44px !important;
        margin-block: 0 !important;
        padding-block: 4px !important;
    }
    html body .top-nav #mainNavbar.show {
        padding-block: 8px;
    }
}
@media (min-width: 1200px) and (max-width: 1599px) {
    html body .top-nav .navbar-nav .nav-link,
    html body .top-nav .top-nav-links .btn,
    html body .top-nav .nav-user-name {
        font-size: 1.5rem !important;
    }
}
@media (max-width: 480px) {
    html body .top-nav .site-wordmark {
        font-size: 2rem !important;
    }
}

@media (min-width: 1200px) {
    html:is([data-text-size="large"],[data-text-size="extra-large"],[data-large-text="1"]) body .top-nav > .container-fluid { flex-wrap: wrap !important; }
    html:is([data-text-size="large"],[data-text-size="extra-large"],[data-large-text="1"]) body .top-nav #mainNavbar { flex-basis: 100% !important; min-width: 0; }
    html:is([data-text-size="large"],[data-text-size="extra-large"],[data-large-text="1"]) body .top-nav .top-nav-links { flex-wrap: wrap !important; justify-content: flex-end; }
}