/* Header popovers share one layer and never remain open together. */
.site-header{isolation:auto!important}
.site-header>.header-main{z-index:1200!important}
.site-header>.nav{z-index:2!important}
.site-header .account{position:relative;z-index:1210;gap:14px}
.site-header .account>details{position:relative;z-index:1}
.site-header .account>details[open]{z-index:1250}
.site-header .notification-dropdown,
.site-header .profile-dropdown{z-index:1260!important;top:calc(100% + 12px)}
.site-header .notification-dropdown{width:min(390px,calc(100vw - 32px))}
.site-header .notification-dropdown>header{gap:14px}
.site-header .notification-dropdown>header>div{min-width:0}
.site-header .notification-dropdown>header strong,
.site-header .notification-dropdown>header small,
.site-header .notification-list strong,
.site-header .notification-list small{overflow-wrap:anywhere}
.site-header .notification-dropdown>header button{white-space:nowrap}
.site-header .notification-list>a{min-width:0}
.site-header .notification-list>a>span:last-child{overflow:hidden}
.site-header .notification-list small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.site-header .profile-dropdown{width:280px}

@media(max-width:1180px) and (min-width:901px){
    .site-header .header-main{gap:22px}
    .site-header .account{gap:9px}
    .site-header .desktop-account-link:not(.header-upload-icon){display:none!important}
    .site-header .nav{gap:18px}
    .site-header .nav a{font-size:11px}
}

@media(max-width:900px){
    .site-header>.header-main{z-index:1200!important}
    .site-header .notification-dropdown,
    .site-header .profile-dropdown{position:fixed;z-index:1300!important;top:72px;left:12px;right:12px;width:auto;max-width:none}
    .site-header .notification-list{max-height:min(58vh,410px)}
}