/* Bandwagon Boys V16.02 — stable, site-wide primary navigation shell.
   The primary header is global chrome: room/page themes must not recolor it.
   Fixed utility slots prevent late auth/theme hydration from moving or revealing nav links in stages. */

.topbar,
body.v11 .topbar,
.archive-surface .topbar,
html[data-theme="light"] body .topbar,
html[data-theme="light"] body.v11 .topbar,
html[data-theme="light"] body.archive-surface .topbar{
  background:rgba(5,12,14,.97)!important;
  border-bottom-color:rgba(255,255,255,.15)!important;
  color:#fff!important;
  box-shadow:none!important;
}

.topbar .brand,
.topbar .brand span,
html[data-theme="light"] body .topbar .brand,
html[data-theme="light"] body .topbar .brand span{
  color:#fff!important;
}

.topbar .topnav{
  flex:0 1 auto!important;
  min-width:0!important;
  margin-left:auto!important;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.topbar .topnav a,
html[data-theme="light"] body .topbar .topnav a{
  color:#cfd9d7!important;
  background:transparent!important;
  border-color:transparent!important;
}
.topbar .topnav a:hover,
.topbar .topnav a.active,
html[data-theme="light"] body .topbar .topnav a:hover,
html[data-theme="light"] body .topbar .topnav a.active{
  color:#fff!important;
  background:rgba(20,184,177,.12)!important;
  border-color:rgba(20,184,177,.48)!important;
}

/* These controls are present in the initial HTML so the nav width never changes after hydration. */
.topbar #office-utility{
  flex:0 0 112px!important;
  width:112px!important;
  min-width:112px!important;
  justify-content:center;
}
.topbar #office-utility .office-utility-link{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:38px!important;
  padding:0 12px!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
  font-size:9px!important;
  line-height:1!important;
  letter-spacing:.065em!important;
}
.topbar #office-utility .office-utility-link,
html[data-theme="light"] body .topbar #office-utility .office-utility-link{
  width:100%;
  text-align:center;
  color:#fff!important;
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.26)!important;
}
.topbar #office-utility .office-utility-link:hover,
html[data-theme="light"] body .topbar #office-utility .office-utility-link:hover{
  background:rgba(20,184,177,.12)!important;
  border-color:rgba(20,184,177,.5)!important;
}

.topbar .bbw-theme-toggle{
  flex:0 0 54px!important;
  width:54px!important;
  min-width:54px!important;
}
.topbar .global-auth{
  flex:0 0 156px!important;
  width:156px!important;
  min-width:156px!important;
  max-width:156px!important;
  margin-left:4px!important;
}
.topbar .global-auth-menu{
  width:100%!important;
  max-width:156px!important;
}
.topbar .global-auth-menu>summary,
html[data-theme="light"] body .topbar .global-auth-menu>summary{
  width:100%!important;
  min-width:0!important;
  max-width:156px!important;
  justify-content:center;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  padding-left:10px!important;
  padding-right:10px!important;
  box-sizing:border-box!important;
  font-size:9px!important;
  letter-spacing:.065em!important;
  color:#f4f0e5!important;
  background:#0b1719!important;
  border-color:rgba(255,255,255,.18)!important;
}
.topbar .global-auth-menu[open]>summary,
.topbar .global-auth-menu>summary:hover,
html[data-theme="light"] body .topbar .global-auth-menu[open]>summary,
html[data-theme="light"] body .topbar .global-auth-menu>summary:hover{
  background:#173e3b!important;
  color:#fff!important;
  border-color:#275f5a!important;
}

/* V16.03: the global header never flips to a light surface.
   Light mode applies to page content; primary navigation chrome remains dark and readable. */
html[data-theme="light"] body .topbar{
  background:#050c0e!important;
  border-bottom-color:rgba(255,255,255,.15)!important;
  color:#fff!important;
  color-scheme:dark;
}
html[data-theme="light"] body .topbar .topnav a{
  color:#cfd9d7!important;
  background:transparent!important;
  border-color:transparent!important;
}
html[data-theme="light"] body .topbar .topnav a:hover,
html[data-theme="light"] body .topbar .topnav a.active{
  color:#fff!important;
  background:rgba(20,184,177,.12)!important;
  border-color:rgba(20,184,177,.48)!important;
}
html[data-theme="light"] body .topbar #office-utility .office-utility-link,
html[data-theme="light"] body .topbar .global-auth-menu>summary{
  color:#f4f0e5!important;
  background:#0b1719!important;
  border-color:rgba(255,255,255,.22)!important;
}
html[data-theme="light"] body .topbar .bbw-theme-toggle{
  background:#0b1719!important;
  border-color:rgba(255,255,255,.22)!important;
}
html[data-theme="light"] body .topbar .bbw-theme-moon{color:#b9cdcf!important}
html[data-theme="light"] body .topbar .bbw-theme-sun{color:#d6a93d!important}

/* Desktop/tablet primary nav stays one stable row. Mobile still uses the existing drawer at <=900px. */
@media (min-width:901px){
  .topbar .topnav{
    overflow-x:auto!important;
    overflow-y:visible!important;
    scrollbar-width:none;
  }
  .topbar .topnav::-webkit-scrollbar{display:none}
}

@media (max-width:900px){
  /* Existing mobile drawer intentionally owns navigation. Hide the reserved desktop auth slot until populated. */
  .topbar .global-auth{flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:156px!important;margin-left:0!important}
  .topbar .global-auth-menu{width:auto!important;max-width:156px!important}
  .topbar .global-auth-menu>summary{width:auto!important;min-width:112px!important;max-width:156px!important}
  .topbar #office-utility{width:auto!important;min-width:0!important;flex:0 0 auto!important}
}

/* V16.04 — League Office is a true singleton. Legacy/runtime writers cannot create a visible duplicate. */
.topbar #office-utility{
  overflow:hidden!important;
}
.topbar #office-utility .office-utility-link ~ .office-utility-link,
.topbar .topnav a[href*="newsroom.html"],
.topbar > a[href*="newsroom.html"]{
  display:none!important;
}
body.v11.is-claimed-owner #office-utility .office-utility-link,
body.v11.is-commissioner #office-utility .office-utility-link{
  visibility:visible!important;
  pointer-events:auto!important;
}