/* The application header is scoped here so page and notification styles stay independent. */
.app-header { padding: .55rem 0; border: 0; background: var(--masthead); color: #fff; }
body:not(.admin-page) .site-header.app-header { padding: .55rem 0; }
.app-header .header-row { min-height: 3.25rem; gap: 1rem; }
.app-header .brand { flex: 0 0 auto; }
.app-header .brand { color: #fff; }
.app-header .brand:hover { color: #fff; text-decoration: none; }
.app-header .brand-mark { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%); }
.brand-kicker { display: block; color: #aeb4ba; font-size: .58rem; font-weight: 750; letter-spacing: .1em; line-height: 1.1; text-transform: uppercase; }
.app-header-nav { flex: 1; justify-content: flex-end; gap: .45rem; min-width: 0; }
.app-header-nav > a, .header-menu-toggle { color: #eceff1; font: inherit; }
.app-header-nav > a:hover, .header-menu-toggle:hover { color: #fff; background: #34363a; text-decoration: none; }
.header-context-link { padding: .35rem .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 13rem; }
.header-menu { position: relative; }
.header-menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; min-height: 2.75rem; border: 0; background: transparent; border-radius: var(--radius); padding: .3rem .5rem; cursor: pointer; }
.header-menu-toggle:focus-visible, .header-menu-panel a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.header-menu-toggle[aria-expanded="true"] { background: #3a3c40; color: #fff; }
.header-chevron { color: #b8bdc3; font-size: .9rem; line-height: 1; }
.header-menu-panel { position: absolute; z-index: 30; top: calc(100% + .55rem); right: 0; width: min(19rem, calc(100vw - 2rem)); max-height: min(70vh, 32rem); overflow-y: auto; padding: .45rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 .8rem 2rem rgb(0 0 0 / 24%); }
.header-menu-panel[hidden] { display: none; }
.header-menu-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: .5rem .7rem; border-radius: 4px; color: var(--ink); }
.header-menu-panel a:hover, .header-menu-panel a[aria-current="page"] { background: var(--surface-2); color: var(--link); text-decoration: none; }
.header-panel-heading { padding: .55rem .7rem .3rem; color: var(--ink-3); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.notification-link { position: relative; }
.notification-bell { width: 1.2rem; height: 1.2rem; }
.notification-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.notification-count { display: inline-grid; min-width: 1.15rem; height: 1.15rem; padding-inline: .2rem; place-items: center; border-radius: 999px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 800; line-height: 1; }
.notification-dropdown { width: min(22rem, calc(100vw - 2rem)); }
.notification-dropdown a { display: block; min-height: 0; }
.notification-dropdown a span { display: block; margin-top: .2rem; color: var(--ink-2); font-size: .82rem; line-height: 1.35; }
.notification-dropdown a .notification-league { margin-top: .1rem; color: var(--ink-3); font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.notification-dropdown .notification-all { border-top: 1px solid var(--border); margin-top: .25rem; color: var(--link); font-weight: 700; }
.notification-none { margin: 0; padding: .8rem; color: var(--ink-2); }
.account-toggle { padding-right: .25rem; }
.account-toggle-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-avatar { display: inline-grid; width: 2rem; height: 2rem; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-2); color: var(--accent-text); font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: .78rem; font-weight: 800; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-menu-panel { width: min(18.5rem, calc(100vw - 2rem)); }
.account-identity { padding: .65rem .7rem .55rem; border-bottom: 1px solid var(--border); }
.account-identity strong, .account-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity span { margin-top: .12rem; color: var(--ink-2); font-size: .8rem; }
.account-league { padding: .2rem .25rem .35rem; }
.account-league + .account-league { border-top: 1px solid var(--border); }
.account-league-name { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 0; padding: .35rem .45rem .15rem; color: var(--ink); font-size: .88rem; font-weight: 750; line-height: 1.25; }
.account-current { color: var(--ink-3); font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.account-league-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: .2rem; }
.account-league-actions a { min-height: 2.25rem; justify-content: center; padding: .35rem .55rem; font-size: .82rem; font-weight: 650; }
.account-signout { border-top: 1px solid var(--border); margin-top: .35rem; }
.commissioner-nav { background: var(--surface); border-bottom: 1px solid var(--border); }
.commissioner-nav-inner { display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin; }
.commissioner-nav-link { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 2.75rem; padding: .6rem .8rem .5rem; border-bottom: 3px solid transparent; color: var(--ink-2); font-size: .75rem; font-weight: 750; letter-spacing: .025em; white-space: nowrap; }
.commissioner-nav-link:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.commissioner-nav-link.is-active { border-bottom-color: var(--accent); color: var(--ink); }
.commissioner-nav-link:focus-visible { outline-offset: -3px; }
@media (max-width: 600px) {
    .app-header { padding-block: .5rem; padding-top: max(.5rem, env(safe-area-inset-top)); }
    body:not(.admin-page) .site-header.app-header { padding-block: .5rem; padding-top: max(.5rem, env(safe-area-inset-top)); }
    .app-header .header-row { flex-wrap: wrap; gap: .25rem .5rem; }
    .app-header-nav { flex: 1 1 100%; justify-content: flex-start; gap: .1rem .35rem; }
    .header-context-link { display: inline-flex; max-width: 8rem; padding-inline: .4rem; }
    .account-toggle-name { display: none; }
    .account-menu { margin-left: auto; }
    .header-menu-toggle { min-height: 2.75rem; padding-inline: .35rem; }
    .header-menu-panel { position: fixed; top: calc(3.2rem + env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); }
    .header-league-menu .header-menu-panel { left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); width: auto; }
    .commissioner-nav-inner { padding-inline: max(1rem, env(safe-area-inset-left)); }
    .commissioner-nav-link { padding-inline: .68rem; }
}