/* Site header (templates/site/_topbar.html), shared by the Arena stats pages and the Arena Journey: the sticky
   wrapper, the main bar's layout and breakpoints, the red Leaderboard button, the account box (Log in, or the Riot ID
   with its menu), the leave-Pages confirmation, the combined champion / augment / item / player search, the small-screen menu and the
   journey row. Builds on journey.css (.j-topbar, .j-brand, .j-nav, .j-btn, .j-chip); every colour is a token from
   journey/tokens.css except the Leaderboard red, whose --st-cta-* shades are defined below.

   Widths: the full bar from 1441px. Signed in, at 1440px and below the button reads "Leaderboard" and the account
   label truncates sooner. At 1300px and below the search opens over the nav while focused, and at 1240px and below it
   rests as a search button; at 1180px and
   below the button reads "Leaderboard"; between 861px and 1000px the account box drops its label and from 930px the
   Leaderboard button its text; at 860px and below the nav and the
   search move into the menu (st-menu) opened by the menu button; at 640px and below the Leaderboard button is
   icon-only; at 520px and below the account box shows its icon and caret and its menu spans the screen. Heights: --j-bar-h, --j-subbar-h and --j-topbar-h (the whole sticky
   header, used by sticky offsets and full-height sections). */

/* The Leaderboard button's red is the main site's ArenaSweats red (styles.css --secondary-color #A64B44, the logo's
   --j-logo-red) in three precomputed shades, the same in every theme like the logo itself (no color-mix: Chromium 108). */
:root {
  --st-cta-top: #8e3b34;
  --st-cta-mid: #7f332d;
  --st-cta-low: #5a221e;
  --st-cta-top-hover: #9c433b;
  --st-cta-mid-hover: #8c3a33;
  --st-cta-low-hover: #652720;
  --st-cta-rgb: 127, 51, 45;
  --st-cta-shade-rgb: 58, 14, 10;
  --st-cta-light-rgb: 255, 214, 190;
}

:root:has(.st-header--journey) {
  --j-topbar-h: calc(var(--j-bar-h) + var(--j-subbar-h));
}

.st-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.st-topbar {
  z-index: 2;
  gap: 16px;
}

/* Nav and search; on small screens the same element is the dropdown menu. */
.st-menu {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 1 1 auto;
  min-width: 0;
  gap: 16px;
}

.st-nav {
  flex: none;
}

.st-nav .j-nav__link {
  padding: 0 13px;
}

.st-topbar__right {
  flex: none;
  margin-left: 0;
}

.st-menu-toggle {
  display: none;
}

.st-menu-toggle__close {
  display: none;
}

/* Icon sprite for the header's own icons (user, log out, Discord). */
.st-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.j-i.st-i-fill {
  fill: currentColor;
  stroke: none;
}

/* ---------- The red call to action (st-cta): the ArenaSweats Leaderboard button and the leave dialog's Yes ----------
   The main site's red as a plate with a soft top light, a crisp gold rim held off the red by a dark inner hairline,
   and a cream label; hover lifts the red a step, brightens the rim and sends the light band across (journey.css). */

.j-btn--as.st-cta {
  /* A dark edge, no gold rim (owner, 2 Nov 2026). */
  border: 1px solid rgba(var(--st-cta-shade-rgb), 0.95);
  background: linear-gradient(180deg, var(--st-cta-top) 0%, var(--st-cta-mid) 45%, var(--st-cta-low) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--st-cta-shade-rgb), 0.5),
    inset 0 2px 0 rgba(var(--st-cta-light-rgb), 0.3),
    0 2px 10px rgba(var(--j-shadow-rgb), 0.45);
  color: var(--j-gold-50);
  text-shadow: 0 1px 0 rgba(var(--st-cta-shade-rgb), 0.7);
}

/* Soft light across the top half of the plate. */
.j-btn--as.st-cta::before {
  content: "";
  position: absolute;
  inset: 2px 2px 50% 2px;
  background: linear-gradient(180deg, rgba(var(--st-cta-light-rgb), 0.09), rgba(var(--st-cta-light-rgb), 0));
  pointer-events: none;
}

.st-cta .j-i {
  position: relative;
  width: 20px;
  height: 20px;
  /* A solid trophy (the outline icons are too thin at this size). */
  fill: currentColor;
  stroke: none;
  color: var(--j-gold-150);
  filter: drop-shadow(0 1px 0 rgba(var(--st-cta-shade-rgb), 0.6));
}

.st-cta .j-btn__label {
  position: relative;
  /* The main ArenaSweats site's face for its leaderboard button (owner, 2 Nov 2026). */
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.j-btn--as.st-cta:hover {
  border-color: rgba(var(--st-cta-shade-rgb), 0.95);
  background: linear-gradient(180deg, var(--st-cta-top-hover) 0%, var(--st-cta-mid-hover) 45%, var(--st-cta-low-hover) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--st-cta-shade-rgb), 0.4),
    inset 0 2px 0 rgba(var(--st-cta-light-rgb), 0.3),
    0 4px 18px rgba(var(--st-cta-rgb), 0.45);
  color: var(--j-white);
}

.j-btn--as.st-cta:active {
  background: linear-gradient(180deg, var(--st-cta-low) 0%, var(--st-cta-mid) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--st-cta-shade-rgb), 0.5), inset 0 2px 6px rgba(var(--st-cta-shade-rgb), 0.5);
}

/* ---------- Account box: the main site's login box (index.html #login-btn) in this design ----------
   One bordered box: a user icon cell (opens the player's Journey) and the Riot ID label with a caret (opens the menu).
   Logged out, the same box reads "Log in" with the Discord mark. */

.st-account {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: none;
  height: 36px;
  border: 1px solid var(--j-line-control);
  background: rgba(var(--j-ink-rgb), 0.6);
  color: var(--j-text);
  transition: border-color var(--j-dur-fast) var(--j-ease-std), box-shadow var(--j-dur) var(--j-ease-std);
}

.st-account:hover,
.st-account:focus-within {
  border-color: rgba(var(--j-gold-rgb), 0.7);
  box-shadow: 0 0 16px rgba(var(--j-gold-rgb), 0.12);
}

.st-account__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  border-right: 1px solid var(--j-line-row);
  background: linear-gradient(180deg, rgba(var(--j-gold-rgb), 0.12), rgba(var(--j-gold-rgb), 0.03));
  color: var(--j-gold-200);
  transition: background-color var(--j-dur-fast) var(--j-ease-std), color var(--j-dur-fast) var(--j-ease-std);
}

.st-account__icon .j-i {
  width: 17px;
  height: 17px;
}

.st-account__icon .st-i-fill {
  width: 17px;
  height: 17px;
}

.st-account--login .st-account__icon .st-i-fill {
  width: 18px;
  height: 14px;
}

a.st-account__icon:hover {
  background: rgba(var(--j-gold-rgb), 0.2);
  color: var(--j-gold-50);
}

.st-account__details {
  display: flex;
}

.st-account__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  list-style: none;
  cursor: pointer;
}

.st-account__toggle::-webkit-details-marker {
  display: none;
}

.st-account__label {
  max-width: 170px;
  overflow: hidden;
  font-family: var(--j-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--j-gold-100);
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color var(--j-dur-fast) var(--j-ease-std);
}

.st-account--login {
  cursor: pointer;
}

.st-account--login .st-account__label {
  padding: 0 14px 0 12px;
  align-self: center;
  font-family: var(--j-sans);
  font-size: 11px;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
}

.st-account__toggle:hover .st-account__label,
.st-account--login:hover .st-account__label,
.st-account__details[open] .st-account__label {
  color: var(--j-gold-50);
}

.st-account__caret {
  width: 13px;
  height: 13px;
  color: var(--j-gold-300);
  transition: transform var(--j-dur-fast) var(--j-ease-std);
}

.st-account__details[open] .st-account__caret {
  transform: rotate(180deg);
}

.st-account:has(.st-account__details[open]) {
  border-color: var(--j-gold-300);
}

.st-account__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: -1px;
  z-index: 80;
  width: 290px;
  max-height: calc(100vh - var(--j-bar-h) - 24px);
  overflow-y: auto;
  max-width: calc(100vw - 24px);
  border: 1px solid rgba(var(--j-gold-rgb), 0.45);
  background: rgba(var(--j-coal-900-rgb), 0.98);
  box-shadow: 0 14px 34px rgba(var(--j-shadow-rgb), 0.7);
}

/* Closed, the menu takes no layout at all: newer engines still lay out a closed <details>' content (hidden by
   content-visibility), and its 290px of nowrap rows hung past the right edge of a phone screen. */
.st-account__details:not([open]) > .st-account__menu {
  display: none;
}

/* A gold rule fading out at both ends along the menu's top edge. */
.st-account__menu::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--j-rule-center);
}

.st-account__group {
  display: grid;
  margin: 0;
  padding: 6px;
}

.st-account__group + .st-account__group {
  border-top: 1px solid var(--j-line-row);
}

.st-account__heading {
  padding: 6px 10px 4px;
  font-size: 10px;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: var(--j-gold-300);
}

.st-account__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  background: none;
  box-shadow: inset 2px 0 0 transparent;
  color: var(--j-text);
  font-family: var(--j-sans);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--j-dur-fast) var(--j-ease-std), box-shadow var(--j-dur-fast) var(--j-ease-std), color var(--j-dur-fast) var(--j-ease-std);
}

.st-account__item .j-i {
  width: 15px;
  height: 15px;
  color: var(--j-gold-300);
}

.st-account__item:hover {
  background-color: rgba(var(--j-gold-rgb), 0.08);
  box-shadow: inset 2px 0 0 var(--j-gold-300);
  color: var(--j-gold-50);
}

.st-account__max {
  margin-left: -4px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--j-gold-200);
}

.st-account__item--quiet {
  color: var(--j-muted);
}

.st-account__item--quiet .j-i {
  color: var(--j-dim);
}

.st-riots {
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-riot {
  display: grid;
  gap: 4px;
  padding: 7px 10px 8px;
}

.st-riot + .st-riot {
  border-top: 1px solid var(--j-line-soft);
}

.st-riot__name {
  font-family: var(--j-display);
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--j-gold-50);
  overflow-wrap: anywhere;
}

.st-riot__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
}

.st-riot__primary {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--j-gold-300);
}

.st-riot__action {
  padding: 0;
  border: 0;
  background: none;
  color: var(--j-gold-200);
  font-family: var(--j-sans);
  font-size: 11px;
  cursor: pointer;
}

.st-riot__action:hover {
  color: var(--j-gold-50);
  text-decoration: underline;
}

.st-riot__action--remove {
  color: var(--j-muted);
}

.st-riot__action--remove:hover {
  color: var(--j-danger);
}

/* ---------- Leave Pages confirmation (site.js, links marked data-leaves-pages) ---------- */

.st-leave {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
}

.st-leave[hidden] {
  display: none;
}

.st-leave__scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--j-shadow-rgb), 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: st-leave-fade var(--j-dur) var(--j-ease-std);
}

.st-leave__box {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(400px, 100%);
  padding: 28px 26px 22px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.5);
  background: var(--j-panel);
  box-shadow: 0 24px 60px rgba(var(--j-shadow-rgb), 0.8);
  text-align: center;
  animation: st-leave-rise var(--j-dur-appear) var(--j-ease);
}

.st-leave__box::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--j-rule-glint);
}

.st-leave__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.6);
  transform: rotate(45deg);
  color: var(--j-gold-200);
}

.st-leave__mark .j-i {
  transform: rotate(-45deg);
}

.st-leave__title {
  margin: 8px 0 0;
  font-family: var(--j-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: var(--j-track-title);
  color: var(--j-gold-50);
}

.st-leave__text {
  margin: 0;
  font-size: 14px;
  color: var(--j-text-2);
}

.st-leave__remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--j-muted);
  cursor: pointer;
}

.st-leave__remember input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--j-gold-300);
}

.st-leave__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.st-leave__actions .j-btn {
  height: 40px;
}

/* Yes: the red plate without its gold rim at rest (a dark red edge); the rim comes back on hover and keyboard focus. */
.j-btn--as.st-cta.st-leave__yes {
  border-color: var(--st-cta-low);
}

.j-btn--as.st-cta.st-leave__yes:hover,
.j-btn--as.st-cta.st-leave__yes:focus-visible {
  border-color: var(--j-gold-100);
}

@keyframes st-leave-fade {
  from { opacity: 0; }
}

@keyframes st-leave-rise {
  from { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .st-leave__scrim,
  .st-leave__box { animation: none; }
}

/* ---------- Search ---------- */

.st-search {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 0 1 380px;
  min-width: 0;
  height: 36px;
  margin-left: auto;
  border: 1px solid var(--j-line-control);
  background: rgba(var(--j-ink-rgb), 0.6);
  transition: border-color var(--j-dur-fast) var(--j-ease-std), box-shadow var(--j-dur) var(--j-ease-std);
}

.st-search:hover {
  border-color: rgba(var(--j-gold-rgb), 0.5);
}

.st-search:focus-within {
  border-color: var(--j-gold-300);
  box-shadow: var(--j-focus-ring);
}

.st-search__icon {
  align-self: center;
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: 11px;
  color: var(--j-dim);
}

.st-search input,
.st-search select {
  border: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
  font-family: var(--j-sans);
  color: var(--j-text);
}

.st-search__q {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  padding: 0 10px 0 8px;
  font-size: 13px;
}

.st-search__q::placeholder {
  color: var(--j-dim);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.st-search__q::-webkit-search-cancel-button {
  display: none;
}

.st-search select {
  flex: none;
  width: 64px;
  padding: 0 8px;
  border-left: 1px solid var(--j-line-row);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--j-gold-100);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--j-gold-300) 50%), linear-gradient(135deg, var(--j-gold-300) 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}

.st-search select option {
  background: var(--j-coal-850);
  color: var(--j-text);
}

/* The one filled control in the bar: a deep sky plate with a light icon (red stays on the Leaderboard button). */
.st-search__go {
  flex: none;
  width: 38px;
  border: 0;
  border-left: 1px solid var(--j-line-control);
  background: linear-gradient(180deg, rgba(var(--j-ember-rgb), 0.28), rgba(var(--j-coal-900-rgb), 0.95));
  color: var(--j-ember-200);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color var(--j-dur-fast) var(--j-ease-std), background-color var(--j-dur-fast) var(--j-ease-std);
}

.st-search__go:hover {
  color: var(--j-ember-100);
  background: linear-gradient(180deg, rgba(var(--j-ember-rgb), 0.42), rgba(var(--j-coal-900-rgb), 0.95));
}

/* Typeahead (site.js): at least 340px wide (within the screen), growing left from the search's right edge so a
   narrow search box still gets a readable list. */
.st-search__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  width: max(100%, min(340px, calc(100vw - 24px)));
  max-height: min(420px, 70vh);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid rgba(var(--j-gold-rgb), 0.45);
  background: rgba(var(--j-coal-900-rgb), 0.97);
  box-shadow: 0 8px 24px rgba(var(--j-shadow-rgb), 0.55);
}

.st-search__list[hidden] {
  display: none;
}

.st-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--j-text);
  box-shadow: inset 2px 0 0 transparent;
  transition: background-color var(--j-dur-fast) var(--j-ease-std), box-shadow var(--j-dur-fast) var(--j-ease-std);
}

.st-option.is-active,
.st-option:hover {
  background-color: rgba(var(--j-gold-rgb), 0.08);
  box-shadow: inset 2px 0 0 var(--j-gold-300);
}

.st-option img,
.st-option__mark {
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid rgba(var(--j-gold-rgb), 0.3);
  background: var(--j-coal-900);
}

.st-option--augment img {
  border-radius: 50%;
}

.st-option__mark {
  display: grid;
  place-items: center;
  color: var(--j-gold-200);
}

.st-option__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--j-display);
  font-size: 14px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.st-option__name mark {
  background: none;
  color: var(--j-gold-200);
}

.st-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 4px;
  font-size: 10px;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: var(--j-gold-300);
}

.st-group:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--j-line-row);
}

.st-note {
  padding: 8px;
  font-size: 12px;
  color: var(--j-muted);
}

.st-option__tag {
  margin-left: 2px;
  font-family: var(--j-sans);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--j-muted);
}

.st-option__rank {
  flex: none;
  font-family: var(--j-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--j-gold-200);
}

.st-option--player .j-region-badge {
  flex: none;
}

.st-option__label {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--j-muted);
}

/* ---------- Journey row: player chip, journey sections, Share ---------- */

.st-subbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--j-subbar-h);
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(var(--j-coal-900-rgb), 0.9), rgba(var(--j-coal-800-rgb), 0.82));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.st-subbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--j-rule-center);
  opacity: 0.6;
  pointer-events: none;
}

.st-chip {
  gap: 10px;
  flex: 0 1 auto;
}

/* Summoner icon in a small rotated-square frame. */
.st-chip__avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.6);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(var(--j-gold-rgb), 0.18);
}

.st-chip__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--j-coal-900);
}

/* Until the summoner icon loads: the account box's user silhouette. */
.st-chip__avatar .st-chip__placeholder {
  width: 13px;
  height: 13px;
  color: var(--j-gold-300);
}

.st-subnav {
  flex: none;
  gap: 2px;
}

.st-subnav .j-nav__link {
  padding: 0 12px;
  font-size: 12px;
}

.st-share {
  flex: none;
  margin-left: auto;
}

/* ---------- Breakpoints ---------- */

/* Signed in, the bar carries two more controls: the account chip shows only its avatar and the button its short label. */
@media (max-width: 1440px) {
  .st-header:has(.st-account__details) .st-leaderboard__brand { display: none; }
  .st-account__label { max-width: 130px; }
}

@media (max-width: 1180px) {
  .st-topbar { gap: 12px; padding: 0 14px; }
  .st-nav .j-nav__link { padding: 0 10px; }
  .st-search__icon { display: none; }
  .st-search__q { padding-left: 12px; }
  .st-leaderboard__brand { display: none; }
  .st-subbar { gap: 12px; padding: 0 14px; }
}

/* Between the small-screen menu and 1300px the search box is too narrow to use: while it has focus it opens across
   the whole nav and search area (the typeahead keeps focus in the input; Escape or a click elsewhere closes it).
   Up to 1240px it rests as a search button after the nav. */
@media (min-width: 861px) and (max-width: 1300px) {
  .st-menu { position: relative; }
  .st-search:focus-within {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    margin: auto 0;
    background: var(--j-coal-900);
  }
  .st-search:focus-within .st-search__icon { display: block; }
  .st-search:focus-within .st-search__q { padding-left: 8px; }
  .st-menu:has(.st-search:focus-within) .st-nav { visibility: hidden; }
}

@media (min-width: 861px) and (max-width: 1240px) {
  .st-search:not(:focus-within) { flex: 0 0 38px; cursor: pointer; }
  .st-search:not(:focus-within) .st-search__icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -7px 0 0 -7px;
    color: var(--j-gold-200);
    pointer-events: none;
  }
  .st-search:not(:focus-within) .st-search__q { padding: 0; opacity: 0; cursor: pointer; }
  .st-search:not(:focus-within) select,
  .st-search:not(:focus-within) .st-search__go { display: none; }
}

/* Room for the nav and the search button: the account box drops its label, then the Leaderboard button its text. */
@media (min-width: 861px) and (max-width: 1000px) {
  .st-account__toggle .st-account__label { display: none; }
  .st-account__toggle { padding: 0 8px; }
}

@media (min-width: 861px) and (max-width: 930px) {
  .st-leaderboard { width: 36px; padding: 0; }
  .st-leaderboard .j-btn__label { display: none; }
}

@media (max-width: 860px) {
  .st-topbar { justify-content: space-between; }
  .st-menu-toggle { display: inline-flex; width: 36px; padding: 0; }
  .st-header.is-menu-open .st-menu-toggle__open { display: none; }
  .st-header.is-menu-open .st-menu-toggle__close { display: block; }

  /* The menu drops down under the bar (over the journey row). */
  .st-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 14px 16px;
    border-bottom: 1px solid var(--j-line-mid);
    background: rgba(var(--j-coal-900-rgb), 0.98);
    box-shadow: 0 18px 40px rgba(var(--j-shadow-rgb), 0.7);
  }
  .st-js .st-header:not(.is-menu-open) .st-menu { display: none; }
  .st-search { order: -1; flex: none; height: 42px; margin-left: 0; }
  .st-search select { width: 72px; }
  .st-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .st-nav .j-nav__link {
    justify-content: center;
    height: 42px;
    padding: 0 10px;
    border: 1px solid var(--j-line-control);
    background: rgba(var(--j-ink-rgb), 0.5);
  }
  .st-nav .j-nav__link.is-active {
    border-color: var(--j-gold-300);
    color: var(--j-gold-50);
  }
  .st-nav .j-nav__link.is-active::after { left: 14px; right: 14px; }
  .st-nav .j-nav__link.is-active::before { display: none; }

  /* Without the script there is no menu button: the menu sits under the bar instead. */
  html:not(.st-js) .st-topbar { flex-wrap: wrap; height: auto; min-height: var(--j-bar-h); }
  html:not(.st-js) .st-menu { position: static; order: 3; flex-basis: 100%; padding: 0 0 12px; border: 0; background: none; box-shadow: none; }
  html:not(.st-js) .st-menu-toggle { display: none; }

  .st-chip .j-chip__tag,
  .st-chip .j-region-badge { display: none; }
  .st-share { width: 30px; padding: 0; }
  .st-share__label { display: none; }
}

@media (max-width: 640px) {
  :root { --j-bar-h: 56px; --j-subbar-h: 44px; }
  .st-topbar { padding: 0 12px; }
  .st-topbar .j-topbar__sep { display: none; }
  .st-topbar .j-brand { padding: 0; }
  .st-topbar .j-brand__arena { font-size: 20px; }
  .st-topbar .j-brand__sweats { font-size: 16.25px; }
  .st-topbar__right { gap: 6px; }
  .st-leaderboard { width: 36px; padding: 0; }
  .st-account__label { max-width: 88px; font-size: 13px; }
  .st-account__toggle { gap: 6px; padding: 0 8px 0 10px; }
  .st-account--login .st-account__label { padding: 0 10px; }
  .st-cta .j-btn__label { display: none; }
  .st-topbar .j-brand__sub { font-size: 7.5px; }
  .st-subbar { gap: 8px; padding: 0 12px; }
  .st-subnav { flex: 1 1 auto; justify-content: space-between; min-width: 0; }
  .st-subnav .j-nav__link { padding: 0 6px; font-size: 11px; letter-spacing: 0.04em; }
  .st-subnav .j-nav__link.is-active::after { left: 4px; right: 4px; }
}

@media (max-width: 520px) {
  .st-account__toggle .st-account__label { display: none; }
  .st-account__toggle { padding: 0 8px; }
  .st-account__menu { position: fixed; top: calc(var(--j-bar-h) + 6px); left: 12px; right: 12px; width: auto; }
  .st-chip .j-chip__name { display: none; }
  .st-chip__avatar { width: 28px; height: 28px; }
  .st-subnav .j-nav__link { padding: 0 4px; font-size: 10.5px; letter-spacing: 0.03em; }
}

.st-option__mark .st-i-fill {
  width: 13px;
  height: 13px;
}