/* One permission-aware top navigation shared by ranking and admin pages. */
#roleNavigation{min-width:0;flex:1;display:flex;align-items:stretch;gap:4px;overflow-x:auto;scrollbar-width:none}
#roleNavigation::-webkit-scrollbar{display:none}
#roleNavigation a,#roleNavigation #logoutButton{display:inline-flex;min-height:44px;align-items:center;flex:0 0 auto;padding:0 10px;border:0;background:transparent;color:#6c5c4f;font:600 13px "Noto Sans SC",Arial,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer}
#roleNavigation a:hover,#roleNavigation a[aria-current="page"],#roleNavigation #logoutButton:hover{color:var(--vermilion,var(--red))}
#roleNavigation a[aria-current="page"]{box-shadow:inset 0 -2px var(--vermilion,var(--red))}
#roleNavigation #logoutButton{margin-left:auto;color:var(--vermilion,var(--red))}

.admin-brand{flex:0 0 auto;color:var(--red);font-size:18px;font-weight:800;text-decoration:none;white-space:nowrap}

@media(max-width:700px){
  body[data-view="broadcast"] .masthead,body.is-admin-data-center[data-view="broadcast"] .masthead{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"brand status" "actions actions";gap:3px 10px;height:auto;min-height:102px;padding:8px 16px 5px}
  body[data-view="broadcast"] .wordmark,body.is-admin-data-center[data-view="broadcast"] .wordmark{grid-area:brand;align-self:center}
  body[data-view="broadcast"] .live-status,body.is-admin-data-center[data-view="broadcast"] .live-status{grid-area:status;align-self:center;justify-self:end;min-width:0;margin:0}
  body[data-view="broadcast"] #roleNavigation,body.is-admin-data-center[data-view="broadcast"] #roleNavigation{display:flex!important;grid-area:actions;width:100%;min-width:0;align-items:center;justify-self:stretch;gap:2px;overflow-x:auto}
  body[data-view="broadcast"] #roleNavigation>a,body.is-admin-data-center[data-view="broadcast"] #roleNavigation>a{display:inline-flex!important;min-height:40px;align-items:center;padding:0 9px;font-size:12px;white-space:nowrap}
  body[data-view="broadcast"] #roleNavigation #logoutButton,body.is-admin-data-center[data-view="broadcast"] #roleNavigation #logoutButton{display:inline-flex!important;min-height:40px;align-items:center;flex:0 0 auto;margin-left:auto;padding:0 4px 0 10px;border-left:1px solid var(--rule-soft);font-size:12px;white-space:nowrap}

  body:not([data-view="broadcast"])>header{display:grid;grid-template-columns:1fr;gap:3px;height:auto;min-height:96px;padding-top:8px}
  body:not([data-view="broadcast"]) .admin-brand{font-size:16px}
  body:not([data-view="broadcast"]) #roleNavigation{width:100%;margin:0;gap:2px}
  body:not([data-view="broadcast"]) #roleNavigation a,body:not([data-view="broadcast"]) #roleNavigation #logoutButton{min-height:40px;padding:0 9px;font-size:12px}
  body:not([data-view="broadcast"]) #roleNavigation #logoutButton{padding-right:2px}
}