/* Shared navigation on every page (see js/site-nav.js). Built on the design-system tokens.
   Desktop: a 60 px top bar (brand mark, links, account). Phone (720 px and below): the same links become a fixed tab bar. */
.site-nav:not(.site-nav-floating) {
  box-sizing: border-box; width: 100%; min-height: 60px; margin: 0; padding: 0 max(var(--ds-edge), calc((100vw - var(--ds-container)) / 2));
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0 var(--ds-space-5);
  border: 0; border-bottom: 1px solid var(--ds-line); background: var(--ds-scene-bg);
}
.site-nav .brand { order: 1; display: inline-flex; align-items: center; gap: var(--ds-space-3); min-height: 44px; color: var(--ds-text); font: 800 1.375rem/1 var(--ds-font-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.site-nav .brand-mark { display: grid; place-items: center; width: 34px; height: 30px; color: var(--ds-cta-ink); background: var(--ds-cta); clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); font: 800 1.25rem/1 var(--ds-font-display); }
.site-nav .brand:focus-visible, .site-links a:focus-visible, .site-nav .account-bar :is(a, button):focus-visible { outline: 3px solid var(--ds-cyan); outline-offset: -3px; }
.site-nav .brand:focus-visible { outline-offset: 2px; }
.site-nav .account-bar { order: 3; margin-left: auto; display: flex; flex-wrap: nowrap; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: var(--ds-space-3); min-width: 0; }
.site-nav .account-status { max-width: none; overflow: visible; color: var(--ds-text-muted); font-size: var(--ds-fs-sm); white-space: normal; overflow-wrap: anywhere; } /* wraps inside the nav instead of clipping, whatever the font */
.site-nav .account-bar .button { min-height: 44px; padding: var(--ds-space-1) var(--ds-space-4); border: 2px solid var(--ds-control-line); border-radius: 0; color: var(--ds-text); background: transparent; font: 800 var(--ds-fs-sm)/1.2 var(--ds-font-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.site-nav .account-bar .button:hover:not(:disabled) { transform: none; border-color: var(--ds-text); background: transparent; }
.site-nav > .site-links { order: 2; flex: 1 1 0; justify-content: center; }
.site-menu-toggle { order: 2; display: none; min-height: 44px; margin-left: auto; padding: 0 var(--ds-space-3); border: 2px solid var(--ds-control-line); border-radius: 0; color: var(--ds-text); background: transparent; font: 800 var(--ds-fs-sm)/1.2 var(--ds-font-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.site-menu-toggle:focus-visible { outline: 3px solid var(--ds-cyan); outline-offset: 2px; }
.site-menu-toggle[aria-expanded="true"] { border-color: var(--ds-text); }

.site-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0; min-width: 0; }
.site-links a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--ds-space-3); border-radius: var(--ds-radius-sm); color: var(--ds-text-muted); font: 700 var(--ds-fs-md)/1.2 var(--ds-font-display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: color var(--ds-dur-fast), background var(--ds-dur-fast); }
.site-links a:hover { color: var(--ds-text); background: rgba(140, 170, 255, .12); }
.site-link-icon { display: none; }
/* The top bar: tall links with a pink underline on the current page. */
.site-nav:not(.site-nav-floating) .site-links a { align-self: stretch; min-height: 60px; padding-inline: var(--ds-space-4); border-radius: 0; border-bottom: 3px solid transparent; }
.site-nav:not(.site-nav-floating) .site-links a:hover { background: none; }
.site-links a[aria-current="page"] { color: var(--ds-text); }
.site-nav:not(.site-nav-floating) .site-links a[aria-current="page"] { border-bottom-color: var(--ds-accent); }
.site-nav-floating .site-links a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ds-accent); border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0; }
.site-nav-pair-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; margin-left: .4rem; padding: 0 .25rem; border-radius: 999px; color: var(--ds-team-a-ink); background: var(--ds-cyan); font-size: .72rem; font-weight: 800; line-height: 1; letter-spacing: 0; }
.site-nav-pair-badge[hidden] { display: none; }

.site-nav-floating {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0; min-height: 52px; box-sizing: border-box;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0 var(--ds-space-3); padding: 4px clamp(8px, 2vw, 24px);
  border-bottom: 1px solid var(--ds-line); background: rgba(7, 10, 18, .94);
}
.site-nav-floating .brand { flex: 0 0 auto; color: var(--ds-text); }
.site-nav-floating > .site-links { flex: 1 1 auto; justify-content: center; }
.site-nav-floating .site-links a { color: var(--ds-text); font-size: var(--ds-fs-sm); }
.site-nav-floating .site-menu-toggle { margin-left: auto; }
/* The HUD layers start below the bar so it never covers controls or panels. */
html:has(.site-nav-floating) :is(#hud, #rhud) { top: 52px; }
@media (min-width: 721px) and (max-width: 1100px) {
  /* Two rows leave room for all links across platform fonts. */
  .site-nav-floating { height: 101px; flex-wrap: wrap; align-content: flex-start; }
  .site-nav-floating > .site-links { display: grid; flex: 1 0 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .site-nav-floating .site-links a { min-width: 44px; box-sizing: border-box; padding: 0 4px; justify-content: center; }
  html:has(.site-nav-floating) :is(#hud, #rhud) { top: 101px; }
}
@media (max-width: 720px) {
  .site-nav-floating { flex-wrap: wrap; gap: 0 var(--ds-space-2); padding-inline: 8px; }
  .site-nav-floating .site-menu-toggle { display: inline-flex; align-items: center; }
  .site-nav-floating > .site-links { display: none; }
  .site-nav-floating.site-nav-open > .site-links {
    position: absolute; top: 100%; left: 0; right: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px; padding: 8px; border-bottom: 1px solid var(--ds-line); background: rgba(7, 10, 18, .98); box-shadow: var(--ds-shadow-2);
  }
  .site-nav-floating .site-links a { justify-content: flex-start; }
}

/* Tablet: the links tighten and the account status text gives way to the Sign in / Sign out button, which already says it (the profile page shows the account). */
@media (min-width: 721px) and (max-width: 1000px) {
  .site-nav:not(.site-nav-floating) { gap: 0 var(--ds-space-3); }
  .site-nav:not(.site-nav-floating) .site-links a { padding-inline: var(--ds-space-3); }
  .site-nav:not(.site-nav-floating) .brand { font-size: 1.25rem; }
  .site-nav:not(.site-nav-floating) .account-status { display: none; }
}

/* Phone: brand and account on a 56 px bar; the five links are a fixed tab bar with drawn icons. */
@media (max-width: 720px) {
  .site-nav:not(.site-nav-floating) { min-height: 56px; padding-inline: var(--ds-edge); gap: 0 var(--ds-space-3); }
  .site-nav:not(.site-nav-floating) .site-menu-toggle { display: none; }
  .site-nav:not(.site-nav-floating) > .site-links {
    position: fixed; z-index: 30; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--ds-line); background: var(--ds-scene-bg);
  }
  .site-nav:not(.site-nav-floating) .site-links a { flex-direction: column; justify-content: center; gap: .25rem; min-height: 64px; padding: 0 2px; border-bottom: 0; font-size: .8125rem; }
  .site-nav:not(.site-nav-floating) .site-links a[aria-current="page"] { box-shadow: inset 0 3px 0 var(--ds-accent); }
  .site-nav:not(.site-nav-floating) .site-link-icon { display: block; }
  .site-nav:not(.site-nav-floating) .site-links a:focus-visible { outline-offset: -3px; }
  .site-nav-pair-badge { position: absolute; top: 6px; left: calc(50% + .5rem); margin-left: 0; }
  .site-nav:not(.site-nav-floating) .site-links a { position: relative; }
  .site-nav .account-bar { margin-left: auto; flex-wrap: nowrap; gap: var(--ds-space-2); }
  .site-nav:not(.site-nav-floating) .account-status { display: none; }
  .site-nav .account-bar .button { padding-inline: var(--ds-space-3); }
  /* Room for the tab bar below the page, and keep toasts above it. */
  body:has(.site-nav:not(.site-nav-floating)) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body:has(.site-nav:not(.site-nav-floating)) .ds-toasts { bottom: calc(64px + env(safe-area-inset-bottom) + var(--ds-space-4)); }
}

.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 24px 16px 32px; color: var(--ds-text-muted, #9aa0b4); font-size: 14px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; color: var(--ds-cyan, #6fd6e8); text-decoration: underline; text-underline-offset: 3px; }
.site-footer-canvas { background: rgba(7, 10, 18, .8); }
/* Canvas pages cannot scroll. Keep the footer on one row between the nav
   labels and replay panels, including wider platform fonts. */
@media (max-width: 999px) {
  .site-footer-canvas { flex-wrap: nowrap; gap: 8px; padding-inline: 8px; font-size: 12px; }
  .site-footer-canvas a { min-width: 44px; overflow-wrap: anywhere; }
}
/* The benchmark remains in the navigation menu; reserve narrow canvas footers
   for support, privacy and partner links without growing over the viewer. */
@media (max-width: 480px) {
  .site-footer-canvas .site-footer-benchmark { display: none; }
}
@media (min-width: 1000px) { .site-footer-canvas { position: fixed; z-index: 5; left: 8px; bottom: 0; padding: 0 10px; gap: 8px; font-size: 12px; border-radius: 8px 8px 0 0; } }
.site-footer a:focus-visible { outline: 3px solid var(--ds-cyan); outline-offset: 2px; }