/* The one piece of chrome every sport shares. It stays Legerator so it reads the same from any arena. */
@font-face { font-family: "Archivo"; src: url(/fonts/archivo-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

.rail {
  display: flex; align-items: stretch; gap: 20px;
  min-height: 40px; padding: 0 20px;
  background: #0c0f10; border-bottom: 1px solid #273034;
  font: 500 14px/1 "Archivo", system-ui, sans-serif;
}
.rail a { display: flex; align-items: center; color: #a9b3b6; text-decoration: none; }
.rail a:hover { color: #f3f5f4; }
.rail a:focus-visible { outline: 2px solid #ffd23f; outline-offset: -2px; }
.rail-home { flex: none; gap: 8px; }
.rail .rail-home { color: #f3f5f4; font-weight: 700; }
.rail ul { display: flex; gap: 4px; min-width: 0; margin: 0 0 0 auto; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.rail li a { position: relative; height: 100%; padding: 0 10px; white-space: nowrap; }
.rail a[aria-current] { color: #ffd23f; font-weight: 650; }
.rail a[aria-current]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: #ffd23f; }

/* The rail took the "by Legerator" link, which is what used to push search to the right. */
.mast .search { margin-left: auto; }

@media (max-width: 560px) {
  .rail { gap: 6px; min-height: 44px; padding: 0 12px; }
  .rail-home span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rail ul { gap: 0; }
  .rail li a { padding: 0 8px; }
  .rail a[aria-current]::after { left: 8px; right: 8px; }
}

/* Legal links in each app's footer, filled in by rail.js. */
.foot-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.foot-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }