/* Shared navigation experiment; preserve Subathon's original reveal and Live styling. */
/* Only fetched header state needs an entrance; static navigation is immediate. */
body:is(.stats-page,.voting-hub-page,.academy-page) .site-header .page-shortcuts{display:none}
body:is(.stats-page,.voting-hub-page,.academy-page) .has-initial-state .header-event-status{animation:content-arrive 320ms ease-out}
/* Keep a stable footprint for the Twitch action while status loads. */
body[data-site-nav]:is(.stats-page,.voting-hub-page,.academy-page) .site-header .header-twitch{display:flex;width:112px;transition:opacity 250ms ease-out}
@media(max-width:800px){body[data-site-nav]:is(.stats-page,.voting-hub-page,.academy-page) .site-header .header-twitch{width:92px}}
@media(prefers-reduced-motion:reduce){
 body:is(.stats-page,.voting-hub-page,.academy-page) .has-initial-state .header-event-status{animation:none}
 body[data-site-nav]:is(.stats-page,.voting-hub-page,.academy-page) .site-header .header-twitch{transition:none}
}
body[data-site-nav] .public-menu{display:none!important}
body[data-site-nav].subathon-page .site-header{display:flex;align-items:center;flex-wrap:nowrap;gap:24px}
body[data-site-nav].subathon-page .site-header .header-status-slot{margin:0;padding:0;border:0;flex:none}
body[data-site-nav].subathon-page .site-header .header-event-status{gap:14px;margin:0}
body[data-site-nav].subathon-page .site-header #header-timer-status{display:none}
body[data-site-nav].subathon-page .site-header #header-timer{font-variant-numeric:tabular-nums;font-size:22px;white-space:nowrap}
body[data-site-nav].subathon-page .site-header .header-stat{flex-direction:row;align-items:baseline;gap:6px}
body[data-site-nav].subathon-page .site-header .header-stat+ .header-stat{border-left:1px solid #f7f9ff28;padding-left:14px}
body[data-site-nav] .site-nav-pages{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none;font:600 15px/1.2 var(--body)}
body[data-site-nav] .site-nav-pages>a,body[data-site-nav] .site-nav-group{border-radius:4px;color:#b9b9b9;background:transparent;white-space:nowrap}
body[data-site-nav] .site-nav-pages>a,body[data-site-nav] .site-nav-group>a{display:flex;align-items:center;min-height:44px;padding:12px 16px}
body[data-site-nav] .site-nav-pages>a[aria-current],body[data-site-nav] .site-nav-group.is-current{color:white;background:#ffffff0c;box-shadow:inset 0 -2px var(--red)}
body[data-site-nav] .site-nav-group{position:relative;display:flex;align-items:center}
body[data-site-nav] .site-nav-group>a{padding-right:5px}
body[data-site-nav] .site-nav-group>button{border:0;background:transparent;color:inherit;min-height:44px;width:30px;padding:0 8px 3px 4px;border-radius:3px;font:inherit;cursor:pointer}
body[data-site-nav] .site-nav-pages a:hover,body[data-site-nav] .site-nav-group>button:hover{color:white}
body[data-site-nav] .site-nav-dropdown{position:absolute;top:100%;right:0;width:190px;padding:8px;background:#1b1b1b;border:1px solid #45474d;border-radius:5px;box-shadow:0 12px 28px #0008;z-index:60}
body[data-site-nav] .site-nav-dropdown[hidden]{display:none}
body[data-site-nav] .site-nav-dropdown a{display:flex;align-items:center;min-height:44px;padding:10px 12px;font:600 14px/1.4 var(--body);color:#d0d0d0;border-radius:3px}
body[data-site-nav] .site-nav-dropdown a:hover,body[data-site-nav] .site-nav-dropdown a:focus-visible{background:#ffffff0a;color:white}
body[data-site-nav]:is(.voting-hub-page,.stats-page,.academy-page) .hub-shell{padding-top:calc(var(--shared-header-height,86px) + 32px)}
@media(max-width:1100px){
 body[data-site-nav].subathon-page .site-header{padding-inline:28px;gap:16px}
 body[data-site-nav].subathon-page .site-header .event-wordmark{font-size:23px}
 body[data-site-nav].subathon-page .site-header .header-stat+ .header-stat{display:none}
}
@media(max-width:800px){body[data-site-nav].subathon-page .site-header .event-wordmark{display:none}}
@media(max-width:700px){
 body[data-site-nav].subathon-page .site-header{padding-inline:12px;gap:10px}
 body[data-site-nav].subathon-page .site-header #header-timer{font-size:19px}
 body[data-site-nav] .site-nav-pages{font-size:13px;gap:4px}
 body[data-site-nav] .site-nav-pages>a,body[data-site-nav] .site-nav-group>a{padding-inline:10px}
 body[data-site-nav] .site-nav-group>a{padding-right:2px}
 body[data-site-nav].subathon-page .site-header .header-twitch.is-live{display:flex;min-height:36px;padding:7px 8px;gap:0}
 body[data-site-nav].subathon-page .site-header .header-live-indicator{font-size:9px;margin:0;padding:0;border:0;gap:5px}
 body[data-site-nav].subathon-page .site-header .live-external-arrow{display:none}
}
@media(max-width:360px){
 body[data-site-nav].subathon-page .site-header{padding-inline:8px;gap:6px}
 body[data-site-nav].subathon-page .site-header #header-timer{font-size:17px}
 body[data-site-nav] .site-nav-pages{font-size:12px}
 body[data-site-nav] .site-nav-pages>a,body[data-site-nav] .site-nav-group>a{padding-left:7px;padding-right:7px}
 body[data-site-nav] .site-nav-group>a{padding-right:0}
 body[data-site-nav] .site-nav-group>button{width:24px}
}

/* Quieter shared header: one navigation type style and a centered timer. */
body[data-site-nav].subathon-page .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:24px}
body[data-site-nav].subathon-page .site-header .event-wordmark{grid-column:1;grid-row:1;justify-self:start}
body[data-site-nav].subathon-page .site-header .header-status-slot{position:absolute;left:50%;transform:translateX(-50%);grid-column:auto}
body[data-site-nav].subathon-page .site-header .header-stat+ .header-stat{display:none}
body[data-site-nav].subathon-page .site-header #header-timer{font:700 28px/1 var(--display);letter-spacing:2px;color:#d1d1d1;font-variant-numeric:tabular-nums}
body[data-site-nav] .site-nav-pages{grid-column:3;grid-row:1;justify-self:end;margin:0;gap:12px;font:700 10px/1 var(--body);letter-spacing:.5px;text-transform:uppercase}
body[data-site-nav].subathon-page .site-header .header-twitch{grid-column:4;grid-row:1}
body[data-site-nav] .site-nav-pages>a,body[data-site-nav] .site-nav-group.is-current{background:transparent;border-radius:0}
body[data-site-nav] .site-nav-pages>a[aria-current],body[data-site-nav] .site-nav-group.is-current{background:transparent;box-shadow:inset 0 -2px var(--red)}
body[data-site-nav] .site-nav-pages>a,body[data-site-nav] .site-nav-group>a{padding-inline:12px}
body[data-site-nav] .site-nav-group>a{padding-right:4px}
body[data-site-nav] .site-nav-group>button{display:flex;align-items:center;justify-content:center;padding:0;width:26px}
body[data-site-nav] .site-nav-group>button::before{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
body[data-site-nav] .site-nav-dropdown{text-transform:none;letter-spacing:normal}
@media(max-width:1100px){
 body[data-site-nav].subathon-page .site-header{gap:14px}
 body[data-site-nav].subathon-page .site-header #header-timer{font-size:25px;letter-spacing:1.5px}
 body[data-site-nav] .site-nav-pages{gap:4px}
}
@media(max-width:900px){
 body[data-site-nav].subathon-page .site-header .event-wordmark{font-size:20px}
 body[data-site-nav] .site-nav-pages>a,body[data-site-nav] .site-nav-group>a{padding-inline:8px}
 body[data-site-nav] .site-nav-group>a{padding-right:2px}
}
@media(max-width:800px){
 body[data-site-nav].subathon-page .site-header{display:flex;gap:12px}
 body[data-site-nav].subathon-page .site-header .header-status-slot{position:static;transform:none;margin-right:auto}
 body[data-site-nav].subathon-page .site-header #header-timer{font-size:25px;letter-spacing:1px}
 body[data-site-nav] .site-nav-pages{font-size:10px}
}
@media(max-width:360px){
 body[data-site-nav].subathon-page .site-header{gap:6px}
 body[data-site-nav].subathon-page .site-header #header-timer{font-size:22px}
 body[data-site-nav] .site-nav-pages{gap:2px;font-size:9px}
 body[data-site-nav] .site-nav-pages>a,body[data-site-nav] .site-nav-group>a{padding-inline:6px}
 body[data-site-nav] .site-nav-group>a{padding-right:0}
 body[data-site-nav] .site-nav-group>button{width:22px}
}

/* Shared type family and white text; red identifies the active page. */
body[data-site-nav].subathon-page .site-header #header-timer{font-family:var(--body);font-size:23px;font-weight:700;letter-spacing:3.5px;color:var(--white)}
body[data-site-nav] .site-nav-pages{font-size:12px}
body[data-site-nav] .site-nav-group.is-current{box-shadow:none;background:transparent}
body[data-site-nav] .site-nav-group>a[aria-current]{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:8px}
@media(max-width:1100px){body[data-site-nav].subathon-page .site-header #header-timer{font-size:22px;letter-spacing:3px}}
@media(max-width:800px){body[data-site-nav].subathon-page .site-header #header-timer{font-size:20px;letter-spacing:2px}body[data-site-nav] .site-nav-pages{font-size:11px}}
@media(max-width:450px){
 body[data-site-nav].subathon-page .site-header{gap:6px}
 body[data-site-nav].subathon-page .site-header #header-timer{font-size:18px;letter-spacing:1px}
 body[data-site-nav] .site-nav-pages{gap:2px;font-size:10px}
 body[data-site-nav] .site-nav-group>a{padding-left:6px;padding-right:1px}
 body[data-site-nav] .site-nav-group>button{width:20px}
}
@media(max-width:360px){body[data-site-nav].subathon-page .site-header #header-timer{font-size:15px;letter-spacing:1px}body[data-site-nav] .site-nav-pages{font-size:9px}}
@media(max-width:360px){
 body[data-site-nav].subathon-page .site-header{gap:4px}
 body[data-site-nav].subathon-page .site-header #header-timer{font-size:14px;letter-spacing:.5px}
 body[data-site-nav] .site-nav-group>a{padding-left:4px}
 body[data-site-nav] .site-nav-group>button{width:18px}
}

body[data-site-nav] .site-nav-group{color:var(--white)}
body[data-site-nav] .site-header::after{border-bottom-color:#743039}
/* Keep each disclosure visually attached to its label. */
body[data-site-nav] .site-nav-group>a{padding-right:0}
body[data-site-nav] .site-nav-group>button{width:22px;justify-content:flex-start;padding-left:4px}
body[data-site-nav] .site-nav-dropdown{left:0;right:auto;width:190px;max-width:calc(100vw - 24px)}


body[data-site-nav] .site-nav-group:hover,
body[data-site-nav] .site-nav-group:focus-within{background:transparent}
body[data-site-nav] .site-nav-group:hover>a,
body[data-site-nav] .site-nav-group:focus-within>a,
body[data-site-nav] .site-nav-pages>.site-nav-home:is(:hover,:focus-visible){text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:8px}
body[data-site-nav] .site-nav-dropdown a:hover,
body[data-site-nav] .site-nav-dropdown a:focus-visible{color:var(--red);background:transparent}
/* Larger page labels; dropdown rows retain a soft hover fill. */
body[data-site-nav] .site-nav-pages{font-size:14px}
body[data-site-nav] .site-nav-dropdown a:hover,
body[data-site-nav] .site-nav-dropdown a:focus-visible{color:var(--red);background:#ffffff0a}
@media(max-width:800px){body[data-site-nav] .site-nav-pages{font-size:12px}}
@media(max-width:450px){body[data-site-nav] .site-nav-pages{font-size:11px}}
@media(max-width:360px){body[data-site-nav] .site-nav-pages{font-size:10px}}

/* Balance the visible label gaps, including Vote’s missing disclosure. */
@media(min-width:801px){body[data-site-nav].subathon-page .site-header .header-twitch{margin-left:10px}}
html.site-nav-arriving body[data-site-nav] .site-header{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition:none}
/* Mobile has one navigation entry point; page sections nest beneath Subathon. */
body[data-site-nav] .site-mobile-menu{display:none}
@media(max-width:800px){
 body[data-site-nav] .site-mobile-menu{display:inline-flex;gap:8px;min-height:44px;padding:9px 12px;font-size:14px;order:3}
 body[data-site-nav] .site-header .header-twitch{order:2}
 body[data-site-nav] .site-nav-pages{display:none;position:absolute;top:100%;right:12px;left:auto;width:260px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 100px);overflow:auto;padding:10px;background:#1b1b1b;border:1px solid #45474d;border-radius:5px;box-shadow:0 12px 28px #0008;font-size:14px;letter-spacing:.5px}
 body[data-site-nav] .site-nav-pages.is-open{display:flex;flex-direction:column;align-items:stretch;gap:4px}
 body[data-site-nav] .site-nav-group{display:grid;grid-template-columns:minmax(0,1fr) 44px}
 body[data-site-nav] .site-nav-group>a{padding:14px 12px;justify-self:start}
 body[data-site-nav] .site-nav-group>button{width:44px;min-height:44px;padding:0;justify-content:center}
 body[data-site-nav] .site-nav-group>button[aria-expanded=true]::before{transform:rotate(180deg)}
 body[data-site-nav] .site-nav-dropdown{position:static;grid-column:1/-1;width:auto;max-width:none!important;padding:0 0 4px 12px;margin:4px 0 4px 12px;border:0;border-left:1px solid #45474d;border-radius:0;background:transparent;box-shadow:none}
 body[data-site-nav] .site-nav-dropdown a{font-size:14px;padding:10px 12px}
}

/* Align mobile navigation with the content gutter and match action heights. */
@media(max-width:800px){
 body[data-site-nav].subathon-page .site-header{padding-inline:16px}
 body[data-site-nav].subathon-page .site-header .site-mobile-menu,
 body[data-site-nav].subathon-page .site-header .header-twitch.is-live{box-sizing:border-box;height:36px;min-height:36px;padding-block:0;align-items:center;justify-content:center}
}

/* The vote header has its final dimensions before navigation JavaScript runs. */
body[data-site-nav]:is(.voting-hub-page,.stats-page,.academy-page){--shared-header-height:86px}
body[data-site-nav]:is(.voting-hub-page,.stats-page,.academy-page) .site-header{height:86px;min-height:86px}
body[data-site-nav]:is(.voting-hub-page,.stats-page,.academy-page) .page-shortcuts{display:none}
@media(max-width:800px){
 body[data-site-nav]:is(.voting-hub-page,.stats-page,.academy-page){--shared-header-height:60px}
 body[data-site-nav]:is(.voting-hub-page,.stats-page,.academy-page) .site-header{height:60px;min-height:60px}
}

body[data-site-nav]:is(.voting-hub-page,.stats-page,.academy-page) #start-banner{top:var(--shared-header-height,86px);transform:none;transition:none}
body[data-site-nav]:is(.voting-hub-page,.stats-page,.academy-page) .hub-shell{padding-top:calc(var(--shared-header-height,86px) + var(--vote-banner-height,0px) + 32px)}
@media(max-width:800px){body[data-site-nav]:is(.voting-hub-page,.stats-page,.academy-page) .hub-shell{padding-top:calc(var(--shared-header-height,60px) + var(--vote-banner-height,0px) + 12px)}}

/* Measure desktop gaps from visible labels/disclosure, not uneven link padding. */
@media(min-width:801px){
 body[data-site-nav] .site-nav-pages{gap:28px}
 body[data-site-nav] .site-nav-pages>a,body[data-site-nav] .site-nav-group>a{padding-inline:0}
 body[data-site-nav] .site-nav-group>button{width:12px;padding-left:4px;flex:none}
}
@media(min-width:801px) and (max-width:1100px){body[data-site-nav] .site-nav-pages{gap:20px}}

/* Shared subtly cool raised surface for navigation menus. */
body[data-site-nav] .site-nav-dropdown{background:#18181a;border-color:#3a3c42}
@media(max-width:800px){body[data-site-nav] .site-nav-pages{background:#181818;border-color:#3a3c42}body[data-site-nav] .site-nav-dropdown{background:transparent}}

/* Identical geometry in both states; only the label and emphasis change. */
body[data-site-nav].subathon-page .site-header .header-twitch{display:flex;box-sizing:border-box;width:112px;height:38px;min-height:38px;padding:8px 12px;align-items:center;justify-content:center;flex-shrink:0}
body[data-site-nav].subathon-page .site-header .header-twitch:not(.is-live){background:#202024;border-color:#45474d;box-shadow:none;color:#fff}
body[data-site-nav].subathon-page .site-header .header-twitch:not(.is-live):hover{background:#29292d;border-color:#65676d;color:#fff}
.header-twitch-offline{font:900 12px/1 var(--body);letter-spacing:.5px;text-transform:uppercase}
body[data-site-nav] .site-header .header-twitch .header-twitch-offline{color:#fff}
.header-twitch.is-live .header-twitch-offline{display:none}
body[data-site-nav].subathon-page .header-twitch:not(.is-live) .live-external-arrow{color:inherit}
@media(max-width:800px){body[data-site-nav].subathon-page .site-header .header-twitch{width:92px;height:36px;min-height:36px;padding:7px 8px}}

/* Center either timer format inside the shared, stable header footprint. */
#header-timer.timer-toggle .timer-format-value{text-align:center}

/* Group the home link and timer, with navigation on the right. */
body[data-site-nav].subathon-page .site-header #home-link{transition:color .15s ease}
body[data-site-nav].subathon-page .site-header #home-link:is(:hover,:focus-visible){color:var(--red)}
@media(min-width:801px){
 body[data-site-nav].subathon-page .site-header{grid-template-columns:auto auto minmax(0,1fr) auto}
 body[data-site-nav].subathon-page .site-header .header-status-slot{position:static;left:auto;transform:none;grid-column:2;grid-row:1;justify-self:start;padding-left:64px;border-left:1px solid #ffffff26}
}

/* Crossfade live status without replacing the button's footprint. */
body[data-site-nav].subathon-page .site-header .header-twitch{position:relative;transition:background-color 320ms ease-out,border-color 320ms ease-out,box-shadow 320ms ease-out}
body[data-site-nav].subathon-page .site-header .header-twitch .header-twitch-offline{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:1;visibility:visible;transition:opacity 320ms ease-out,visibility 320ms}
body[data-site-nav].subathon-page .site-header .header-twitch .header-live-indicator{display:inline-flex}
body[data-site-nav].subathon-page .site-header .header-twitch :is(.header-live-indicator,.live-external-arrow){opacity:0;visibility:hidden;transition:opacity 320ms ease-out,visibility 320ms}
body[data-site-nav].subathon-page .site-header .header-twitch.is-live .header-twitch-offline{opacity:0;visibility:hidden}
body[data-site-nav].subathon-page .site-header .header-twitch.is-live :is(.header-live-indicator,.live-external-arrow){opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){body[data-site-nav].subathon-page .site-header .header-twitch,body[data-site-nav].subathon-page .site-header .header-twitch :is(.header-twitch-offline,.header-live-indicator,.live-external-arrow){transition:none}}

@media(min-width:801px){
/* Section identity at left; event timer centered independently of navigation. */
/* Match the visible capitals of the condensed wordmark, not just its line box. */
:is(body[data-site-nav].subathon-page .site-header,.admin-top) .section-brand{font:700 20px/1 var(--body);letter-spacing:.4px;transform:translateY(2px)}
body[data-site-nav].subathon-page .site-header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto}
body[data-site-nav].subathon-page .site-header .section-identity{grid-column:1;grid-row:1;justify-self:start}
:is(body[data-site-nav].subathon-page .site-header,.admin-top) .section-identity .event-wordmark{display:block;font-size:36px}
body[data-site-nav].subathon-page .site-header .header-status-slot{position:absolute;left:50%;transform:translateX(-50%);padding:0;border:0;margin:0}
@media(max-width:1100px){:is(body[data-site-nav].subathon-page .site-header,.admin-top) .section-identity .event-wordmark{font-size:30px}:is(body[data-site-nav].subathon-page .site-header,.admin-top) .section-brand{font-size:18px}}
@media(min-width:801px) and (max-width:1000px){body[data-site-nav].subathon-page .site-header .section-identity{gap:10px}:is(body[data-site-nav].subathon-page .site-header,.admin-top) .section-brand{padding-left:10px;font-size:17px}body[data-site-nav].subathon-page .site-header #header-timer{font-size:18px;letter-spacing:1px}body[data-site-nav] .site-nav-pages{gap:14px;font-size:12px}}
body[data-site-nav].subathon-page .site-header .header-status-slot{grid-column:auto;grid-row:auto;right:auto;width:max-content;justify-self:auto}
}

/* Preserve the original single-row mobile navigation. */
@media(max-width:800px){body[data-site-nav].subathon-page .site-header .section-identity{display:none}}

body[data-site-nav] .site-nav-pages>.site-nav-home{display:none}
@media(max-width:800px){body[data-site-nav] .site-nav-pages>.site-nav-home{display:flex;padding:14px 12px;margin:0;border:0;border-radius:0}}

/* Mobile sections stay visible; all destination labels share one emphasis. */
@media(max-width:800px){
 body[data-site-nav] .site-nav-pages>.site-nav-home,body[data-site-nav] .site-nav-group>a{color:var(--white)}
 body[data-site-nav] .site-nav-group{grid-template-columns:minmax(0,1fr)}
 body[data-site-nav] .site-nav-group>button{display:none}
 body[data-site-nav] .site-nav-dropdown{margin-top:0}
}
:is(body[data-site-nav].subathon-page .site-header,.admin-top) .section-brand{transition:color .15s ease}
@media(prefers-reduced-motion:reduce){:is(body[data-site-nav].subathon-page .site-header,.admin-top) .section-brand{transition:none}}

/* Keep stats content close to the shared header while accounting for banners. */
body[data-site-nav].stats-page .stats-shell{padding-top:calc(var(--shared-header-height,86px) + var(--vote-banner-height,0px) + 12px)}
