/* Shared header only: do not restyle page-local tabs, toolbars or recording views. */
nav[data-site-navigation] { gap:18px; }
nav[data-site-navigation] [hidden] { display:none !important; }
nav[data-site-navigation] .nav-links { gap:16px; align-items:center; }
nav[data-site-navigation] .nav-links a { white-space:nowrap; font-size:12px; letter-spacing:1px; }
nav[data-site-navigation] .nav-links a[aria-current="page"] { color:var(--accent-glow); }
nav[data-site-navigation] .nav-profile { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
nav[data-site-navigation] .nav-auth { margin-left:auto; flex-shrink:0; }
.nav-phone-only { display:none; }
.nav-theme-action { font:inherit; color:var(--text-secondary); background:none; border:0; cursor:pointer; text-align:left; }
/* main.js adds .is-compact when the links do not fit beside the account controls (a signed-out visitor
   has 7 links, a staff member 12), and always on phones; the hamburger then holds them. */
nav[data-site-navigation].is-compact .nav-links { display:none; }
nav[data-site-navigation].is-compact .nav-hamburger { display:flex; flex-shrink:0; }
nav[data-site-navigation].is-compact .nav-links.open {
  display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
  align-items:stretch; gap:0; padding:12px 24px 20px; background:var(--bg-overlay-mobile);
  border-bottom:1px solid var(--border-strong); max-height:calc(100dvh - 64px); overflow-y:auto;
}
nav[data-site-navigation].is-compact .nav-links.open a { display:flex; align-items:center; min-height:44px; padding:10px 12px; }
@media (max-width:600px) {
  nav[data-site-navigation] { padding-inline:12px; gap:8px; }
  nav[data-site-navigation] .nav-discord { display:none; }
  nav[data-site-navigation] .nav-auth { gap:8px; }
  nav[data-site-navigation] .nav-profile { max-width:95px; }
}
@media (max-width:360px) {
  nav[data-site-navigation] .nav-logo { font-size:18px; letter-spacing:2px; }
  nav[data-site-navigation] .nav-profile { max-width:65px; }
  nav[data-site-navigation] .nav-auth { gap:6px; }
}
@media (max-width:768px) {
  nav[data-site-navigation] .nav-phone-only { display:block; }
  nav[data-site-navigation] .nav-theme-action { min-height:44px; padding:10px 12px; width:100%; }
}
@media (max-width:480px) {
  nav[data-site-navigation] .nav-brand { min-width:0; }
  nav[data-site-navigation] .nav-auth { position:static; gap:6px; min-width:0; }
  nav[data-site-navigation] .nav-hamburger { position:static; }
  nav[data-site-navigation] .nav-profile { max-width:70px; }
  nav[data-site-navigation] .nav-logo { font-size:18px; letter-spacing:1px; }
}