/* Shared navigation geometry. Matchup and map controls consume
   --sticky-context-offset so every sticky layer agrees on the same stack. */
:root {
  --topbar-height: 48px;
  --team-tabs-height: 42px;
  --sticky-context-offset: calc(var(--topbar-height) + var(--team-tabs-height));
}

.topbar {
  position: fixed;
  inset: 0 0 auto;
  height: var(--topbar-height);
  isolation: isolate;
}

body { padding-top: var(--topbar-height); }

.topbar .shell {
  height: var(--topbar-height);
  gap: 18px;
}

.brand-slot {
  position: relative;
  display: grid;
  align-items: center;
  flex: 0 0 auto;
  min-width: 112px;
  height: 100%;
  overflow: hidden;
}

.brand-slot > * { grid-area: 1 / 1; }

.wordmark-oracle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.oracle-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 4px;
  background: #ff4655;
  color: #17191f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
}

.oracle-badge svg { fill: none; stroke: currentColor; stroke-width: 1.6; }

.wordmark,
.compact-team {
  transition: opacity 160ms ease, transform 160ms ease;
}

.compact-team {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink-hi);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
  line-height: 1;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  text-overflow: ellipsis;
  transform: translateY(8px);
  white-space: nowrap;
}

.compact-team i {
  width: 3px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 2px;
  background: var(--accent);
}

.team-identity-passed .brand-slot .wordmark {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

.team-identity-passed .compact-team {
  opacity: 1;
  transform: translateY(0);
}

.topbar-context {
  position: relative;
  display: grid;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}

.topbar-context > * { grid-area: 1 / 1; }

.topbar .corpus {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

.topbar .corpus b {
  color: var(--ink-2);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.topbar .corpus span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-stats {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 22px);
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
  visibility: hidden;
}

.team-identity-passed .team-context .corpus {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  visibility: hidden;
}

.team-identity-passed .compact-stats {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
  visibility: visible;
}

.compact-stat {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  padding: 5px 2px;
  border-bottom: 2px solid transparent;
  cursor: help;
  white-space: nowrap;
}

.compact-stat b {
  color: var(--ink-hi);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.compact-stat small {
  color: var(--ink-3);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.compact-stat:hover,
.compact-stat:focus-visible {
  border-bottom-color: var(--accent);
  outline: 0;
}

.compact-stat-help {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 60;
  width: max-content;
  max-width: 230px;
  padding: 7px 9px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--raise);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  color: var(--ink);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  text-transform: none;
  transform: translate(-50%, -3px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: normal;
}

.compact-stat:hover .compact-stat-help,
.compact-stat:focus .compact-stat-help {
  opacity: 1;
  transform: translate(-50%, 0);
}

.topbar nav a {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  height: 28px;
  border-bottom: 2px solid transparent;
}

.topbar nav a[aria-current] {
  border-bottom-color: var(--accent);
}

.team-head .team-summary {
  align-items: center;
  min-height: 86px;
  padding-top: 15px;
  padding-bottom: 14px;
}

.team-id .rail { min-height: 48px; }

.headline-stats {
  flex-wrap: nowrap;
  gap: clamp(14px, 2.2vw, 28px);
  padding-bottom: 0;
}

.hstat { min-width: 68px; }

.hstat .l {
  max-width: 22ch;
  line-height: 1.3;
}

.hstat .stat-sample { white-space: nowrap; }

.team-tabs-wrap {
  position: sticky;
  top: var(--topbar-height);
  z-index: 34;
  height: var(--team-tabs-height);
  border-top: 1px solid color-mix(in srgb, var(--hair) 72%, transparent);
  border-bottom: 1px solid var(--hair);
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: blur(8px);
}

.team-tabs-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  height: 100%;
}

.team-tabs-wrap .tabs {
  align-items: stretch;
  height: 100%;
  margin-top: 0;
  min-width: 0;
}

.team-tabs-wrap .tabs a {
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.team-tab-tools {
  display: none;
  align-items: center;
  position: relative;
  z-index: 2;
  padding-left: 8px;
  background: color-mix(in srgb, var(--bg) 95%, transparent);
}

.team-tab-tools:not(:empty) { display: inline-flex; }

.tabs-team {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabs-team i {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--accent);
}

/* With scripting, the top bar performs the contextual handoff. Without it,
   the short team tag remains in the sticky tabs as the durable fallback. */
.navigation-enhanced .tabs-team-fallback { display: none; }

@media (max-width: 1080px) {
  .topbar .corpus span { display: none; }
  .compact-stat--side { display: none; }
  .headline-stats .hstat:nth-last-child(-n + 2) { display: none; }
}

@media (max-width: 820px) {
  .compact-stat--series { display: none; }
}

@media (max-width: 720px) {
  :root {
    --topbar-height: 46px;
    --team-tabs-height: 40px;
  }

  .topbar .shell { gap: 12px; }
  .topbar .corpus { display: none; }
  .topbar nav { gap: 11px; }
  .topbar nav a { height: 30px; }

  .brand-slot {
    min-width: 0;
    flex: 1 1 auto;
  }

  .team-context { display: none; }
  .team-identity-passed .team-context {
    display: grid;
    flex: 0 0 auto;
  }

  .compact-stat:not(.compact-stat--rounds) { display: none; }

  .compact-stat-help {
    right: auto;
    left: 0;
    width: min(230px, calc(100vw - 24px));
    transform: translateY(-3px);
  }

  .compact-stat:hover .compact-stat-help,
  .compact-stat:focus .compact-stat-help { transform: translateY(0); }

  .team-head .team-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    min-height: 0;
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .team-id h1 { font-size: clamp(23px, 7vw, 28px); }

  .headline-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
    gap: 0;
  }

  .hstat {
    min-width: 0;
    padding-right: 10px;
  }

  .hstat + .hstat {
    padding-left: 10px;
    border-left: 1px solid var(--hair);
  }

  .hstat .v { font-size: 18px; }
  .hstat .l { letter-spacing: .06em; }

  .team-tabs-wrap .tabs a { padding-inline: 11px; }
}

@media (max-width: 430px) {
  .topbar nav { gap: 8px; font-size: 10px; }
  .compact-team { max-width: min(30vw, 115px); }
  .hstat .l { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark,
  .compact-team,
  .corpus,
  .compact-stats,
  .compact-stat-help { transition: none; }
}

@media print {
  body { padding-top: 0; }
  .topbar,
  .team-tabs-wrap { display: none !important; }
}

/* ==================================================================
   Oracle's zone in the shared topbar.
   The right edge of the bar IS Oracle: a red block that bleeds to the
   viewport edge, so the second half of the product is visible from the
   landing page instead of hiding as one word among links. The mark keeps
   its own colour everywhere — a brand that recolours per team is not a
   brand, and the team accent belongs to the team.
   ================================================================== */
.topbar-oracle {
  margin-left: auto;
  align-self: stretch;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
}
/* Landing: the block is sized to the right fifth of the bar, which is the
   share the product's second half is worth on the page that introduces it. */
.topbar-oracle:has(.is-prominent) { min-width: 20%; }
/* Bleed the block past the centred shell to the real viewport edge. */
.topbar-oracle::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 50vw;
  background: var(--oracle);
  z-index: 0;
}
.oracle-entry {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 4px 0 16px;
  color: #17191f;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 140ms ease;
}
.oracle-entry:hover, .oracle-entry:focus-visible { filter: brightness(1.08); }
.oracle-entry:focus-visible { outline: 2px solid #17191f; outline-offset: -4px; }

.oracle-entry-mark { display: inline-flex; color: #17191f; }
.oracle-entry-mark svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.oracle-entry-text { display: inline-flex; flex-direction: column; line-height: 1.12; }
.oracle-entry-text b {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.oracle-entry-text small { font-size: 9px; letter-spacing: .04em; color: #4a1d22; }

/* Landing: the zone is wider and the mark larger, because this is where a
   first-time reader decides the site has a second half. */
.oracle-entry.is-prominent { padding: 0 6px 0 22px; gap: 11px; }
.oracle-entry.is-prominent .oracle-entry-mark svg { width: 21px; height: 21px; }
.oracle-entry.is-prominent .oracle-entry-text b { font-size: 14px; letter-spacing: .14em; }
.oracle-entry.is-prominent .oracle-entry-text small { font-size: 10px; }
/* Same affordance as a team card, so "this is a link" reads identically
   wherever it appears. */
.oracle-entry .card-arrow { margin-left: 4px; color: #17191f; font-size: 16px; opacity: .75; }
.oracle-entry:hover .card-arrow,
.oracle-entry:focus-visible .card-arrow { opacity: 1; }

/* Team pages carry the stat handoff, so the zone sheds its caption first
   and then its word, always keeping the eye. */
@media (max-width: 1100px) { .oracle-entry .oracle-entry-text small { display: none; } }
@media (max-width: 860px)  {
  .oracle-entry:not(.is-prominent) .oracle-entry-text { display: none; }
  .oracle-entry:not(.is-prominent) { padding-left: 12px; }
}
@media (max-width: 520px)  {
  .oracle-entry .oracle-entry-text small { display: none; }
  .oracle-entry { padding-left: 12px; }
  .oracle-entry .card-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .oracle-entry { transition: none; } }