:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #111217;

  /* Spacing: the only step values any rule may use. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Radii: chips and thumbnails, cards, outer panels. */
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;

  /* One page container. Every block on the page uses these two values, so
     the left and right edges line up from the logo to the last card. */
  --page-max: 75rem;
  --page-pad: var(--sp-6);

  /* Surfaces: page, panel, card inside a panel. */
  --bg: #111217;
  --surface-1: rgb(24 24 27 / 92%);
  --surface-2: rgb(30 30 34 / 92%);
  --border: rgb(255 255 255 / 8%);
  --border-strong: rgb(255 255 255 / 18%);

  --text: #fff;
  --text-muted: rgb(255 255 255 / 62%);

  /* The accent buys attention, so it is spent only on the primary action
     and the active tab; everything else that used to be yellow becomes
     neutral or semantic. */
  --accent: #ffb74d;
  --accent-ink: #1b1205;
  --accent-soft: rgb(255 183 77 / 35%);
  --good: #7bd88f;
  --warn: #ffcc80;
  /* Product-wide engine identity. Only the selected mode spends its colour;
     the other mode stays neutral so state remains immediately legible. */
  --engine-150: #42a5f5;
  --engine-200: #ef5350;
}

/* ---------------------------------------------------------------------------
   Shared containment baseline

   Measured on the connected Vivo X200 Pro (360x684 CSS, DPR 3.5) and swept at
   every integer width from 320 to 480 px plus every authored breakpoint at
   -1/0/+1: the product's narrow-viewport clipping came from a small number of
   shared causes rather than from individual pages. These rules fix the causes
   once. They change no layout intent, no route and no content; they only stop
   a box from measuring wider than the column it lives in.
   --------------------------------------------------------------------------- */

/* 1. Padding and borders count inside a declared width. Without this every
      `width: 100%` panel, field and anchor-button overflowed its column by
      exactly its own padding - the single largest cause found in the sweep
      (Home's "Submit a time" action lost 32 px at every phone width). Rules
      that already declared `box-sizing: border-box` keep the behaviour they
      were tuned with. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The shared container. Backgrounds may be full-bleed; content never is. */
.container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

body {
  /* A device floor, not a text-relative one. As `20rem` this scaled with the
     reader's font size: at the browser's 125% text setting it became 400 px
     and pushed every route 80 px past a 320-390 px phone. */
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: #fff;
  /* The established MK8DX pattern background ships in the private
     production asset pack; the gradient below is the graceful fallback
     when the pack (or this asset) is not deployed. */
  background:
    linear-gradient(rgb(17 18 23 / 94%), rgb(17 18 23 / 97%)),
    radial-gradient(circle at top, #1b2740 0, #111217 32rem),
    var(--bg);
}

/* The photo is 669 KB and these gradients cover 94-97% of it: measured
   against a screenshot without it, it moves the average pixel by 0.74 of
   255. Requesting it during the landing delayed the largest paint by a
   second at 4 Mbit and by 3.4 seconds at 1.6 Mbit, because it competed with
   the hero logo the browser actually measures. `site-photo-ready` is set
   once the page has settled, so the picture is unchanged - only later. */
.site-photo-ready body {
  background:
    linear-gradient(rgb(17 18 23 / 94%), rgb(17 18 23 / 97%)),
    url("/assets/images/misc/site_background.jpg") center / cover fixed,
    radial-gradient(circle at top, #1b2740 0, #111217 32rem),
    var(--bg);
}

.tt-product-page--embedded {
  width: min(100%, 44rem);
  padding: 0;
  margin-inline: auto;
}

.tt-product-page--embedded .tt-product-page__status {
  margin-top: 0;
}

.tt-product-page {
  box-sizing: border-box;
  width: min(100%, 68rem);
  margin-inline: auto;
  padding: clamp(var(--sp-4), 4vw, var(--sp-8));
}

.tt-product-page > h1 {
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 3rem);
  text-align: center;
}

.tt-product-page__intro,
.tt-product-page__status {
  max-width: 44rem;
  margin: 0.75rem auto;
  color: #d4d4d8;
  text-align: center;
}

.tt-product-page__status {
  min-height: 1.5em;
  font-weight: 700;
}

.tt-track-selector {
  display: grid;
  gap: var(--sp-4);
  max-width: 56rem;
  margin: 1.5rem auto;
}

.tt-track-selector__label {
  display: grid;
  gap: var(--sp-2);
  font-weight: 700;
}

.tt-track-selector__search {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #a1a1aa;
  border-radius: 0.5rem;
  color: #fff;
  background: #202024;
  font: inherit;
}

.tt-track-selector__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-3);
}

.tt-track-selector__track,
.tt-product-page__secondary {
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #71717a;
  border-radius: 0.5rem;
  color: #fff;
  background: #2b2b32;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.tt-track-selector__track:hover,
.tt-product-page__secondary:hover {
  border-color: #ffa726;
}

.tt-track-selector__search:focus-visible,
.tt-track-selector__track:focus-visible,
.tt-product-page__secondary:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 3px;
}

.tt-track-selector__track:disabled,
.tt-product-page__secondary:disabled,
.tt-track-selector__search:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tt-product-page__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin: 1rem auto;
}

.tt-product-page__manual {
  margin-top: var(--sp-4);
}

[hidden] {
  display: none !important;
}

.tournament-publication,
.public-tournaments {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid #52525b;
  border-radius: 0.9rem;
  background: rgb(24 24 27 / 92%);
}

.tournament-publication__form,
.tournament-publication__form label {
  display: grid;
  gap: var(--sp-2);
}

.tournament-publication__form {
  gap: var(--sp-4);
}

.tournament-publication__form input,
.tournament-publication__form select {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3);
  border: 1px solid #a1a1aa;
  border-radius: 0.5rem;
  color: #fff;
  background: #202024;
  font: inherit;
}

.tournament-publication__form fieldset {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.tournament-publication__candidate {
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: var(--sp-3);
  border-radius: 0.55rem;
  background: #202024;
}

.tournament-publication__candidate input {
  width: 1.25rem;
  min-height: 1.25rem;
  margin: var(--sp-1) 0 0;
}

.tournament-publication__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.public-tournaments__list {
  display: grid;
  gap: var(--sp-3);
  padding-left: var(--sp-4);
}

.public-tournaments__list li {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: 0.55rem;
  background: #202024;
}

.public-tournaments__list a {
  color: #ffd180;
  font-weight: 700;
}

.tt-auth {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  padding-block: var(--sp-6) var(--sp-16);
}

.tt-auth > h1 {
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 3rem);
  text-align: center;
}

.tt-auth__status {
  min-height: 1.5em;
  margin: 0.75rem auto 1.5rem;
  color: #d4d4d8;
  font-weight: 700;
  text-align: center;
}

.tt-auth__content {
  display: grid;
  gap: var(--sp-4);
}

/* Mounted product views add a neutral wrapper element. Grid items default to
   min-width:auto, which lets a padded child enlarge the whole mobile page.
   Keep every mounted view inside the shared page column. */
.tt-auth__content > * {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.tt-auth__navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
}

.tt-auth__navigation a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: 0.45rem;
  color: #ffd180;
  font-weight: 700;
}

.tt-auth__navigation a:hover {
  background: #2b2b32;
}

.tt-auth__navigation a:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 2px;
}

.tt-auth__form {
  box-sizing: border-box;
  display: grid;
  gap: var(--sp-4);
  width: min(100%, 32rem);
  margin-inline: auto;
  padding: var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
}

.tt-auth__form label {
  display: grid;
  gap: var(--sp-2);
  font-weight: 700;
}

.tt-auth__form input {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #a1a1aa;
  border-radius: 0.5rem;
  color: #fff;
  background: #202024;
  font: inherit;
}

.tt-auth__button {
  justify-self: center;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #71717a;
  border-radius: 0.5rem;
  color: #fff;
  background: #2b2b32;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.tt-auth__button--primary {
  border-color: #ffb74d;
  color: #111217;
  background: #ffb74d;
}

.tt-auth__button:focus-visible,
.tt-auth__form input:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 3px;
}

.tt-auth__button:disabled,
.tt-auth__form input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tt-auth__link {
  justify-self: start;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.tt-auth__link:hover {
  text-decoration: underline;
}

.cups-view {
  display: grid;
  gap: var(--sp-4);
  width: min(100%, 60rem);
  margin-inline: auto;
}

.cups-view__search {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.5rem;
  color: #fff;
  background: rgb(24 24 27 / 92%);
  font: inherit;
}

.cups-view__search:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 3px;
}

.cups-view__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--sp-4) var(--sp-3);
  justify-items: center;
}

.cups-view__cup {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0.75rem;
}

.cups-view__cup:hover .cups-view__cup-icon,
.cups-view__cup:focus-visible .cups-view__cup-icon {
  transform: scale(1.12);
}

.cups-view__cup:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 2px;
}

.cups-view__cup-icon {
  width: 4rem;
  height: 4rem;
  transition: transform 120ms ease-out;
}

.cups-view__cup-name {
  font-size: 0.85rem;
  text-shadow: 0 1px 3px rgb(0 0 0 / 80%);
}

.cups-view__header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
}

.cups-view__header h2 {
  margin: 0;
  flex: 1;
  text-align: center;
}

.cups-view__header-icon {
  width: 2.6rem;
  height: 2.6rem;
}

.cups-view__tracks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--sp-4);
  justify-items: center;
}

.cups-view__track {
  display: grid;
  grid-template-rows: auto 1.5rem;
  justify-items: center;
  align-items: center;
  gap: var(--sp-2);
  box-sizing: border-box;
  width: min(100%, 19rem);
  min-height: 13rem;
  padding: var(--sp-2);
  border-radius: 0.75rem;
  border: 1px solid #52525b;
  background: rgb(24 24 27 / 92%);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.cups-view__track:hover,
.cups-view__track:focus-visible {
  border-color: #ffb74d;
}

.cups-view__track:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 2px;
}

.cups-view__track-frame {
  position: relative;
  display: block;
  line-height: 0;
}

.cups-view__track-preview {
  width: 100%;
  max-width: 288px;
  height: auto;
  border-radius: 0.5rem;
}

.cups-view__track-badge {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 2rem;
  height: 2rem;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 70%));
}

.cups-view__track-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cups-view__empty {
  margin: 0;
  color: #c9c9d1;
}

.track-board__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

.track-board__header h2 {
  margin: 0;
}

.track-board__cup {
  width: 2.4rem;
  height: 2.4rem;
}

.track-board__modes {
  display: grid;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin: var(--sp-3) 0;
  flex-wrap: wrap;
}

.track-board__mode {
  min-width: 5.5rem;
  padding: var(--sp-2) var(--sp-4);
  text-align: center;
  border: 1px solid #71717a;
  border-radius: 0.5rem;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: #2b2b32;
}

.track-board__mode--active {
  background: var(--engine-150);
  border-color: var(--engine-150);
  color: #fff;
}

/* The original mode colors: 150cc blue, 200cc red. */
.track-board__mode--active.track-board__mode--200 {
  background: var(--engine-200);
  border-color: var(--engine-200);
  color: #fff;
}

.track-board__preview-frame {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.track-board__preview-cup {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 75%));
}

.track-board__preview {
  width: min(288px, 60vw);
  height: auto;
  border-radius: 0.6rem;
  box-shadow: 0 2px 10px rgb(0 0 0 / 55%);
}

.track-board__list {
  display: grid;
  gap: var(--sp-2);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  width: min(100%, 40rem);
}

.track-board__row {
  display: grid;
  grid-template-columns: 2.2rem 1.8rem 1fr 2rem auto 5.5rem;
  gap: var(--sp-2);
  align-items: baseline;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid #52525b;
  border-radius: 0.5rem;
  background: rgb(24 24 27 / 92%);
  min-height: 3.25rem;
}

.track-board__row--self {
  border-color: #ffb74d;
  background: rgb(64 46 12 / 94%);
}

.track-board__row--self .track-board__rank {
  color: #ffcc80;
}

.track-board__flag-cell {
  line-height: 0;
  align-self: center;
}

.track-board__reference-icon {
  width: 1.3rem;
  height: 1.3rem;
  object-fit: contain;
  vertical-align: baseline;
}

.track-board__row > :nth-child(3) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.track-board__rank {
  font-weight: 700;
  color: #ffd180;
}

.track-board__time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.track-board__delta {
  font-variant-numeric: tabular-nums;
  color: #ef9a9a;
  text-align: right;
  font-size: 0.9rem;
}

.track-board__delta--faster {
  color: #a5d6a7;
}

.track-board__row--wr {
  border-color: #71717a;
  background: rgb(39 39 42 / 92%);
}

.track-board__row--wr .track-board__rank {
  color: #a1a1aa;
  font-size: 0.78rem;
}

.track-board__row--staff {
  border-color: #b71c1c;
  background: rgb(46 16 16 / 92%);
}

.track-board__row--staff .track-board__benchmark-name {
  color: #ef9a9a;
}

.track-board__benchmark-name {
  font-weight: 700;
}

.track-board__flag {
  width: 1.5rem;
  height: 1rem;
  border-radius: 2px;
  vertical-align: baseline;
}

@media (max-width: 480px) {
  .track-board__row {
    grid-template-columns: 1.8rem 1.35rem minmax(0, 1fr) 1.4rem auto 4.3rem;
    gap: var(--sp-1);
    padding-inline: var(--sp-2);
  }

  .track-board__delta {
    display: block;
    font-size: 0.72rem;
  }
}
.track-board__details { grid-column:1 / -1; padding-top:.15rem; color:var(--text-muted); font-size:.78rem; }
.track-board__row--expandable { cursor:pointer; }
.track-board__details-plus { display:inline-grid; place-items:center; margin-left:.35rem; width:1.05rem; height:1.05rem; border:1px solid #76e6a1; border-radius:50%; color:#76e6a1; font-size:.8rem; font-weight:900; line-height:1; }
.track-board__details-plus::before { content:"+"; }
.track-board__details-plus--open::before { content:"−"; }
.track-board__player-cell { min-width:0; display:flex; align-items:center; }
.track-board__detail-icon { display:inline-block; width:1.4rem; margin-right:.25rem; }
.track-board__details-copy { display:grid; gap:.2rem; margin-top:.3rem; padding:.45rem .6rem; border-radius:.4rem; background:rgb(0 0 0 / 22%); }
.track-board__details-copy p { margin:0; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: rgb(17 18 23 / 96%);
  backdrop-filter: blur(6px);
}

.site-nav__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-1);
  min-height: 3.5rem;
  padding-block: var(--sp-2);
  font-variant-numeric: tabular-nums;
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  margin-right: var(--sp-2);
  padding-inline: var(--sp-1);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.site-nav__brand-copy {
  display: grid;
  gap: 0.08rem;
  line-height: 1;
}

.site-nav__brand-name {
  font-size: 1.02rem;
  font-weight: 950;
}

.site-nav__brand-detail {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-muted);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.site-nav__platform {
  padding: 0.16rem 0.32rem;
  border: 1px solid rgb(144 202 249 / 58%);
  border-radius: 999px;
  background: rgb(33 150 243 / 16%);
  color: #90caf9;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
}

.site-nav__brand-icon {
  width: 2.25rem;
  height: 2.25rem;
  margin-right: var(--sp-2);
  border-radius: 0.55rem;
  object-fit: cover;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding-inline: var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-weight: 700;
  text-decoration: none;
}

.site-nav__mobile-mark { display: none; }

.site-nav__link:hover {
  background: rgb(255 255 255 / 8%);
  color: var(--text);
}

/* One of only two places the accent is spent at full strength. */
.site-nav__link--active {
  background: var(--accent);
  color: var(--accent-ink);
}

.site-nav__link:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 2px;
}

.site-nav__identity {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 2.25rem;
  padding-inline: var(--sp-3) var(--sp-1);
  padding-inline-start: var(--sp-1);
  padding-inline-end: var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}

.site-nav__identity:hover {
  background: #2b2b32;
}

.site-nav__identity:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 2px;
}

.site-nav__avatar {
  width: 1.75rem;
  height: 1.75rem;
}

.site-nav__me {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  min-width: 14rem;
  justify-content: flex-end;
}

/* NL | EN for a visitor without a Settings page. One pill, two options,
   the chosen one in the accent like an active place. */
.site-nav__language {
  display: inline-flex;
  align-items: stretch;
  height: 2.25rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
}

.site-nav__language-option {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  min-width: 2.5rem;
  padding-inline: var(--sp-2);
  cursor: pointer;
}

.site-nav__language-option:hover {
  background: rgb(255 255 255 / 8%);
  color: var(--text);
}

.site-nav__language-option--active,
.site-nav__language-option--active:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.site-nav__language-option:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: -3px;
}

/* The switch exists only while signed out; it takes no room in the
   signed-in cluster, so it is the one control that does not reserve its
   footprint while the session resolves. */
.site-nav__me > .site-nav__language[hidden] { display: none !important; }

/* Session and profile enrichment never collapse the right-hand cluster.
   Hidden controls reserve their final footprint, preventing the header from
   jumping while the signed-in state resolves. */
.site-nav__me > [hidden] {
  display: inline-flex !important;
  visibility: hidden;
  pointer-events: none;
}

/* Every control in the right cluster is the same square, so the row reads
   as one rhythm instead of three different weights. */
.site-nav__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: var(--r-sm);
  font-size: 1.15rem;
  line-height: 1;
}

.site-nav__badge:empty {
  display: none;
}

.site-nav__badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1.1rem;
  padding: 0 var(--sp-1);
  border-radius: 999px;
  background: #ef5350;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

.subnav {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  padding: var(--sp-1);
  border: 1px solid #52525b;
  border-radius: 0.7rem;
  background: rgb(24 24 27 / 92%);
  width: fit-content;
}

.subnav__tab {
  padding: var(--sp-2) var(--sp-4);
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #d4d4d8;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.subnav__tab:hover {
  background: #2b2b32;
  color: #ffd180;
}

.subnav__tab--active {
  background: #42a5f5;
  color: #0b1020;
}

.subnav__tab:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 2px;
}

.site-nav__sync-status { color: #2e9d68; cursor: default; }
.site-nav__sync-status svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Time Trial ranking: the 96-track table mirrors the Android Rank product,
   while retaining a compact readable card at phone widths. */
.tt-standing {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}

.tt-standing__intro,
.tt-standing__status {
  margin: 0;
  color: var(--text-muted);
}

.tt-standing__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
}

.tt-standing__toggle {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
}

.tt-standing__toggle-button {
  min-height: 2.5rem;
  padding: var(--sp-2) var(--sp-4);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.tt-standing__toggle-button--active {
  background: var(--accent);
  color: #fff;
}

.tt-standing__toggle-button--150.tt-standing__toggle-button--active {
  background: var(--engine-150);
}

.tt-standing__toggle-button--200.tt-standing__toggle-button--active {
  background: var(--engine-200);
}

.tt-standing__list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-standing__row {
  display: grid;
  grid-template-columns: 3rem minmax(8rem, 1fr) 6rem 11rem 8rem 10rem 6rem;
  gap: var(--sp-3);
  align-items: center;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.tt-standing__row--self {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.tt-standing__rank,
.tt-standing__total,
.tt-standing__detail,
.tt-standing__delta {
  font-variant-numeric: tabular-nums;
}

.tt-standing__rank { color: var(--accent); }
.tt-standing__player { color: var(--text); font-weight: 800; text-decoration: none; }
.tt-standing__player:hover, .tt-standing__player:focus-visible { text-decoration: underline; }
.tt-standing__mastery { color: #90caf9; font-weight: 700; }
.tt-standing__medals, .tt-standing__detail { color: var(--text-muted); font-size: 0.85rem; }
.tt-standing__total { font-weight: 800; }
.tt-standing__delta { color: var(--good); text-align: right; }

.tt-standing__controls--compact { align-items: center; }
.tt-standing__reset { min-height:2.5rem; padding:var(--sp-2) var(--sp-3); border:1px solid #ff8a80; border-radius:var(--r-md); background:rgb(239 83 80 / 10%); color:#ffb4ae; font:inherit; font-weight:800; cursor:pointer; }
.tt-standing__scope-toggle { max-width: 100%; overflow-x: auto; }
.tt-standing__tabs { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); }
.tt-standing__tab { flex: 0 0 auto; min-height: 2.5rem; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); color: var(--text-muted); font: inherit; font-weight: 800; cursor: pointer; }
.tt-standing__tab--active { border-color: var(--accent); background: rgb(66 165 245 / 16%); color: var(--text); }
.tt-standing__comparison { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); }
.tt-standing__references { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.tt-standing__reference-button { display:inline-flex; align-items:center; gap:.45rem; min-height:2.5rem; padding:.35rem .65rem; border-radius:.65rem; color:#fff; font:inherit; font-weight:900; cursor:pointer; }
.tt-standing__reference-button--nintendo { border:2px solid #fff; background:#e60012; box-shadow:inset 0 0 0 2px rgb(255 255 255 / 18%); }
.tt-standing__reference-button--world-record { border:2px solid #ffe082; background:linear-gradient(135deg,#8a5700,#d99a00); color:#fff; }
.tt-standing__reference-mark { display:grid; place-items:center; width:1.65rem; height:1.65rem; border:1px solid currentColor; border-radius:.42rem; background:rgb(0 0 0 / 18%); font-size:.85rem; }
.tt-standing__selected { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tt-standing__selected button, .tt-standing__search-results button, .tt-standing__table button { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.tt-standing__search { width: min(100%, 28rem); min-height: 2.7rem; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); }
.tt-standing__search-results { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tt-standing__content { min-width: 0; }
.tt-standing__table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.tt-standing__table { width: 100%; min-width: 48rem; border-collapse: collapse; background: var(--surface-1); }
.tt-standing__table th, .tt-standing__table td { padding: var(--sp-3); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.tt-standing__table tbody tr:last-child > * { border-bottom: 0; }
.tt-standing__table th { color: var(--text-muted); }
.tt-standing__distribution-bar { position: relative; isolation: isolate; display: block; min-width: 7rem; padding: 0.25rem 0.45rem; border-radius: 0.3rem; overflow: hidden; font-variant-numeric: tabular-nums; }
.tt-standing__distribution-bar::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: max(0.2rem, var(--mastery-width)); background: var(--mastery-color); opacity: 0.72; }
.tt-standing__world-record { display: inline-block; margin-top: .35rem; color: #ffd54f; font-size: .78rem; font-weight: 800; }
.tt-standing__tracks th:first-child { position: sticky; left: 0; z-index: 1; background-color: var(--surface-1); }
.mastery-badge { display: inline-flex; align-items: center; width: fit-content; padding: .16rem .48rem; border: 1px solid #fff; border-radius: 999px; background: var(--mastery-color); color: #fff; font-size: .76rem; font-weight: 900; line-height: 1.2; text-shadow: 0 1px 2px rgb(0 0 0 / 55%); }
.delta-badge { color: var(--delta-color); font-weight: 900; font-variant-numeric: tabular-nums; }
.tt-standing__position-medal { font-size: 1.08rem; }
.tt-standing__track-art { min-width:13rem; background-position:center; background-size:cover; }
.tt-standing__track-label { display: inline-flex; align-items: center; gap: .55rem; white-space:normal; }
.tt-standing__track-cup { width: 2rem; height: 2rem; object-fit: contain; }
.tt-standing__track-copy { display:grid; gap:.18rem; width:fit-content; padding:.25rem .4rem; border-radius:.35rem; background:rgb(0 0 0 / 66%); color:#fff; text-shadow:0 1px 2px #000; }
.tt-standing__track-copy small { color:#fff; opacity:.9; }
.tt-standing__track-value { display: grid; gap: .18rem; }

@media (max-width: 62rem) {
  .tt-standing__row {
    grid-template-columns: 2.8rem minmax(8rem, 1fr) auto auto;
  }
  .tt-standing__mastery { text-align: right; }
  .tt-standing__medals { grid-column: 2 / -1; }
  .tt-standing__total { grid-column: 2; }
  .tt-standing__delta { text-align: right; }
}

@media (max-width: 40rem) {
  .tt-standing__controls { display: grid; }
  .tt-standing__toggle { width: fit-content; max-width: 100%; }
  .tt-standing__toggle-button { padding-inline: var(--sp-3); }
  .tt-standing__row {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3);
  }
  .tt-standing__mastery { grid-column: 3; }
  .tt-standing__medals { grid-column: 2 / -1; }
  .tt-standing__total { grid-column: 2; }
  .tt-standing__detail { grid-column: 2; }
  .tt-standing__delta { grid-column: 3; grid-row: 3 / span 2; align-self: center; }
}

.activity__view-all {
  justify-self: start;
}

@media (max-width: 58rem) {
  :root {
    --page-pad: var(--sp-4);
  }

  /* A backdrop filter establishes a containing block for fixed descendants in
     Chromium. Disable it here so the APK-style footer is fixed to the viewport,
     not to the short sticky header. */
  .site-nav { backdrop-filter: none; }

  .site-nav__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-1);
    min-height: 3rem;
    padding-block: var(--sp-2);
  }

  .site-nav__links {
    position: fixed;
    z-index: 50;
    inset: auto 0 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    min-height: 4.35rem;
    padding: .3rem max(.35rem, env(safe-area-inset-right)) max(.3rem, env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-left));
    border-top: 1px solid var(--border);
    background: rgb(17 18 23 / 98%);
    box-shadow: 0 -6px 18px rgb(0 0 0 / 36%);
  }

  .site-nav__links::-webkit-scrollbar { display: none; }

  /* The extra `.site-nav` in the selector is deliberate. Route shells declare
     `.page-shell--x .site-nav__link { font-size: .82rem }` later in this file,
     which used to win here and print the desktop label next to the bottom-bar
     label between 641 and 928 px ("Home Home", "Tracks Tracks", ...). The
     phone bar owns its own type at every width it is used. */
  .site-nav .site-nav__links > .site-nav__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .16rem;
    height: auto;
    min-height: 3.55rem;
    padding: .25rem .1rem;
    font-size: 0;
    text-align: center;
  }

  .site-nav .site-nav__links > .site-nav__link::after {
    content: attr(data-mobile-label);
    font-size: .68rem;
  }

  /* Five slots. The `.site-nav` prefix keeps this at the same specificity as
     the rule above it: without it, that rule's `display: flex` won and the bar
     laid out all seven destinations in two rows over the page. */
  .site-nav .site-nav__links > [data-nav-key="records"],
  .site-nav .site-nav__links > [data-nav-key="community"] { display: none; }

  /* On a phone the offer is the icon; the label would crowd the account
     controls beside it. The target stays comfortably tappable. */
  .site-nav__apps-label { display: none; }
  .site-nav__apps { padding-inline: var(--sp-3); }

  .site-nav__mobile-mark { order: -1; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; }
  .site-nav__mobile-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  /* The mark follows the item's own colour. It used to be forced to
     `--accent-ink`, which is the ink for a *filled* accent pill; the phone
     bar's selected item is a dark pill with cyan text, so the icon went out
     exactly when it should have lit up. */
  .site-nav__link--active .site-nav__mobile-mark { color: inherit; }

  body { padding-bottom: calc(4.35rem + env(safe-area-inset-bottom)); }

  .site-nav__brand {
    margin-right: var(--sp-1);
    font-size: 0.95rem;
  }

  .site-nav__brand-name { font-size: 0.92rem; }
  .site-nav__brand-detail { font-size: 0.53rem; }
  .site-nav__platform { font-size: 0.48rem; }

  .site-nav__brand-icon {
    width: 2rem;
    height: 2rem;
  }

  .site-nav__me {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  /* The header row is shared, so both sides must be able to give. Before this
     the account cluster was sized to its content (243 px, including the
     sync indicator that was supposed to be hidden) while the brand column was
     `minmax(0, 1fr)`; below 430 px the brand simply ran underneath the
     controls. Nothing is dropped: the descriptor line wraps instead of
     forcing 100 px, and the signed-in name shortens only when the row is
     genuinely too tight. */
  .site-nav__brand,
  .site-nav__brand-copy {
    min-width: 0;
  }

  .site-nav__brand-detail {
    flex-wrap: wrap;
    white-space: normal;
  }

  /* Below 328 px the account cluster (offer, identity, notifications,
     settings - each a full 44 px target) leaves the brand about 65 px, which
     is less than the wordmark itself needs in Dutch. The launcher mark is the
     one part of the header that is duplicated by the browser tab and the Home
     Screen icon, so it is what gives way at the very bottom of the supported
     range; the wordmark and the descriptor stay. */
  /* Signed in, the account cluster is 216 px (offer, identity, notifications,
     settings), which left the wordmark 6 px too little and wrapped the
     descriptor onto a second line - a taller header on every page. Dropping
     the brand link's own inline padding and halving the gap after the mark
     buys 12 px, so the descriptor is back on one line with nothing removed. */
  @media (max-width: 26rem) {
    .site-nav__brand { padding-inline: 0; }
    .site-nav__brand-icon { margin-right: var(--sp-1); }
  }

  @media (max-width: 20.5rem) {
    /* The bottom of the supported range. Half the page gutter and the
       launcher mark - the one header element the browser tab and the Home
       Screen icon already carry - buy the wordmark the room it needs beside
       four full-size account controls. Everything else stays. */
    :root { --page-pad: var(--sp-2); }
    .site-nav__brand-icon { display: none; }
  }

  .site-nav__identity {
    min-width: 0;
  }

  .site-nav__identity-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-nav__apps,
  .site-nav__icon {
    flex: 0 0 auto;
  }

  /* The Web sync indicator is useful desktop context, but on a signed-in
     phone it spends a scarce top-bar slot without offering an action. The
     existing app-download destination remains visible in that slot. */
  .site-nav__sync-status { display: none; }

  .site-nav__me > [hidden] { display: none !important; }
}

.signed-out-home {
  display: grid;
  gap: var(--sp-4);
}

.signed-out-home__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6);
  padding: clamp(var(--sp-6), 5vw, var(--sp-12));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background:
    linear-gradient(120deg, rgb(13 30 58 / 96%), rgb(33 23 54 / 94%));
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 25%);
}

.site-photo-ready .signed-out-home__hero {
  background:
    linear-gradient(120deg, rgb(13 30 58 / 96%), rgb(33 23 54 / 94%)),
    url("/assets/images/misc/site_background.jpg") center / cover;
}

.signed-out-home__eyebrow {
  margin: 0 0 var(--sp-2);
  color: #90caf9;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.signed-out-home__hero h1 {
  margin: 0;
  font-size: clamp(2rem, 7vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.signed-out-home__intro {
  max-width: 46rem;
  margin: var(--sp-4) 0 0;
  color: #dce8f8;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.55;
}

.signed-out-home__logo {
  width: clamp(5rem, 12vw, 9rem);
  height: clamp(5rem, 12vw, 9rem);
  border-radius: 1.5rem;
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 38%);
  object-fit: cover;
}

.signed-out-home__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.signed-out-home__action {
  display: grid;
  gap: var(--sp-2);
  min-height: 6rem;
  padding: var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text);
  text-decoration: none;
  transition: transform 120ms ease-out, border-color 120ms ease-out;
}

.signed-out-home__action--accent {
  border-color: rgb(66 165 245 / 70%);
  background: linear-gradient(135deg, rgb(21 101 192 / 78%), rgb(40 53 147 / 72%));
}

.signed-out-home__action strong { font-size: 1.05rem; }
.signed-out-home__action span { color: #d4d4d8; line-height: 1.4; }
.signed-out-home__action:hover { transform: translateY(-2px); border-color: var(--accent); }

.signed-out-home__signin {
  display: grid;
  grid-template-columns: minmax(14rem, 0.8fr) minmax(18rem, 1.2fr);
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.signed-out-home__signin h2,
.signed-out-home__signin p { margin: 0; }
.signed-out-home__signin p {
  margin-top: var(--sp-2);
  color: var(--text-muted);
  line-height: 1.5;
}
.signed-out-home__signin .tt-auth__form { margin: 0; }

@media (max-width: 40rem) {
  .signed-out-home__hero {
    grid-template-columns: 1fr;
    padding: var(--sp-6);
  }

  .signed-out-home__logo { grid-row: 1; }
  .signed-out-home__actions,
  .signed-out-home__signin { grid-template-columns: 1fr; }
  .signed-out-home__signin { padding: var(--sp-4); }
}

.avatar-settings {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid #52525b;
  border-radius: 0.9rem;
  background: rgb(24 24 27 / 92%);
}

.avatar-settings h3 {
  margin: 0 0 var(--sp-2);
}

.avatar-settings__note {
  margin: 0 0 var(--sp-3);
  color: #c9c9d1;
  font-size: 0.9rem;
}

.avatar-settings__preview {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.avatar-settings__preview-icon {
  width: 3.2rem;
  height: 3.2rem;
}

.avatar-settings__preview-name {
  font-weight: 700;
}

.avatar-settings__grid,
.avatar-settings__variants {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.avatar-settings__variants {
  align-items: center;
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid #52525b;
  border-radius: 0.6rem;
  background: rgb(63 63 70 / 35%);
}

.avatar-settings__variants-label {
  width: 100%;
  color: #9d9da6;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.avatar-settings__option {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  padding: var(--sp-1);
  border: 2px solid transparent;
  border-radius: 0.5rem;
  background: rgb(63 63 70 / 55%);
  cursor: pointer;
}

.avatar-settings__option:hover {
  border-color: #9d9da6;
}

.avatar-settings__option:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 2px;
}

.avatar-settings__option--active {
  border-color: #f6c744;
  background: rgb(246 199 68 / 18%);
}

.avatar-settings__icon {
  max-width: 100%;
  max-height: 100%;
}

.avatar-settings__more {
  position: absolute;
  right: -0.2rem;
  bottom: -0.2rem;
  padding: 0 var(--sp-1);
  border-radius: 999px;
  background: #42a5f5;
  color: #0b1020;
  font-size: 0.62rem;
  font-weight: 800;
}

.avatar-settings__status {
  margin: var(--sp-2) 0 0;
  min-height: 1.2em;
  color: #c9c9d1;
}

.public-player__avatar {
  width: 4rem;
  height: 4rem;
}

.records {
  display: grid;
  gap: var(--sp-4);
  width: min(100%, 60rem);
  margin-inline: auto;
}

.records__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--sp-4);
}

.records__card {
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
}

.records__card h3 {
  margin: 0 0 var(--sp-2);
  font-size: 1rem;
}

.records__holders {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.records__holder {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 0.5rem;
}

.records__holder--top {
  background: rgb(246 199 68 / 10%);
  outline: 1px solid rgb(246 199 68 / 55%);
}

.records__medal {
  width: 1.4rem;
  text-align: center;
}

.records__avatar {
  width: 1.8rem;
  height: 1.8rem;
}

.records__value {
  margin-left: auto;
  color: #c9c9d1;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.community {
  display: grid;
  gap: var(--sp-4);
  width: min(100%, 52rem);
  margin-inline: auto;
}

.community__countries {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.community__country {
  display: grid;
  grid-template-columns: 2rem 10rem 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid #52525b;
  border-radius: 0.6rem;
  background: rgb(24 24 27 / 92%);
}

.community__flag {
  width: 1.8rem;
  height: auto;
}

.community__name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community__meter {
  height: 0.7rem;
  border-radius: 999px;
  background: #3f3f46;
  overflow: hidden;
}

.community__meter-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #42a5f5, #7e57c2);
}

.community__count {
  font-variant-numeric: tabular-nums;
  color: #c9c9d1;
  white-space: nowrap;
}

.community__note {
  margin: 0;
  color: #9d9da6;
  font-size: 0.8rem;
}

@media (max-width: 40rem) {
  .community__country {
    grid-template-columns: 1.6rem 1fr auto;
  }

  .community__meter {
    display: none;
  }
}

.country-settings {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid #52525b;
  border-radius: 0.9rem;
  background: rgb(24 24 27 / 92%);
}

.country-settings h3 {
  margin: 0 0 var(--sp-2);
}

.country-settings__note {
  margin: 0 0 var(--sp-3);
  color: #c9c9d1;
  font-size: 0.9rem;
}

.country-settings__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.country-settings__flag {
  width: 2rem;
  height: auto;
}

.country-settings__select {
  /* A comfortable field, but never wider than the column it sits in. */
  min-width: min(14rem, 100%);
  min-height: 3rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid #a1a1aa;
  border-radius: 0.5rem;
  background: #202024;
  color: inherit;
  font: inherit;
}

.country-settings__select[aria-invalid="true"] {
  border-color: #f87171;
  box-shadow: 0 0 0 2px rgb(248 113 113 / 22%);
}

.country-settings__status {
  margin: var(--sp-2) 0 0;
  min-height: 1.2em;
  color: #c9c9d1;
}

.track-board__divider {
  margin-top: var(--sp-2);
  padding: var(--sp-1) var(--sp-1) var(--sp-1);
  border-top: 1px solid #52525b;
  color: #9d9da6;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  list-style: none;
}

.career {
  display: grid;
  gap: var(--sp-3);
  margin-block: var(--sp-2) var(--sp-4);
}

.career > h3 {
  margin: 0;
}

.career__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.career__chip {
  display: grid;
  gap: var(--sp-1);
  min-width: 7rem;
  flex: 1 1 8rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid #52525b;
  border-radius: 0.6rem;
  background: rgb(24 24 27 / 92%);
}

.career__chip strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.career__chip span {
  color: #9d9da6;
  font-size: 0.78rem;
}

.career__rating {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
}

.career__rating h4 {
  margin: 0;
}

.career__rating-summary {
  margin: 0;
  font-weight: 700;
}

.career__chart {
  width: 100%;
  height: auto;
}

.career__chart-line {
  fill: none;
  stroke: #f6c744;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.career__chart-dot {
  fill: #f6c744;
}

.career__chart-dot--seed {
  fill: #9d9da6;
}

.career__rating-note {
  margin: 0;
  color: #9d9da6;
  font-size: 0.8rem;
}

.settings__account {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  justify-content: flex-end;
}

.home {
  display: grid;
  gap: var(--sp-4);
}

.home-hero__left {
  gap: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.home-hero__tier-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
}

.home-hero__tier-label {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.home-hero__tier {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
}

.home-hero__change {
  color: #7fdca4;
  font-size: 0.8rem;
  font-weight: 700;
}

.home-hero__rival-hint {
  font-size: 0.85rem;
}

.home-domain {
  display: grid;
  gap: var(--sp-1);
  display: grid;
  gap: var(--sp-1);
}

.home-domain + .home-domain {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.home-domain__label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-domain__value {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.home-focus {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.home-focus__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 2rem;
}

.profile-preferences {
  display: grid;
  gap: var(--sp-3);
}

.profile-preferences__part {
  display: grid;
  gap: var(--sp-1);
}

.profile-preferences__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.profile-preferences__row .country-settings__select {
  flex: 1;
  min-width: 0;
}

.profile-preferences__row .tt-auth__button {
  flex: 0 0 auto;
}

@media (max-width: 40rem) {
  /* `width: 100%` on a `flex: 0 0 auto` item makes the item's own base size
     depend on the row it is sizing, so every Save control reported 371 px and
     dragged the whole Settings column - and with it the page - past the
     viewport. Wrapping to a full row expresses the same intent honestly. */
  .profile-preferences__row {
    flex-wrap: wrap;
  }

  .profile-preferences__row .country-settings__select,
  .profile-preferences__row .tt-auth__button {
    flex: 1 1 100%;
    width: auto;
  }
}

.profile-preferences__icon {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.home-focus__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.home-focus__title {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-focus__toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
}

/* Equal segments, so the control does not change width with its label. */
.home-focus__mode {
  min-width: 5.5rem;
  height: 2rem;
  padding-inline: var(--sp-4);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.home-focus__mode--active {
  background: rgb(255 255 255 / 12%);
  color: var(--text);
}

.home-focus__mode--150.home-focus__mode--active {
  background: #1565c0;
  color: #fff;
}

.home-focus__mode--200.home-focus__mode--active {
  background: #c62828;
  color: #fff;
}

.home-focus__engine-toggle .home-focus__mode { min-width: 4.8rem; }

.home-focus__cards {
  display: grid;
  /* Three across when there is room, fewer when there is not, without a
     breakpoint deciding it. */
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}

.home-focus__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

.home-focus__card:hover {
  border-color: var(--border-strong);
}

/* The recommendation is marked with a soft edge and a top rule, so it does
   not out-shout the primary action next to it. */
.home-focus__card--best {
  border-color: var(--accent-soft);
}

.home-focus__card--best::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--accent);
}

.home-focus__label {
  margin: var(--sp-3) 0 0;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-focus__thumb {
  position: relative;
  display: block;
}

.home-focus__cup {
  position: absolute;
  top: var(--sp-1);
  left: var(--sp-1);
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}

.home-focus__art {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: none;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.home-focus__track {
  margin: var(--sp-2) 0 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.home-focus__headline {
  margin: var(--sp-1) 0 0;
  font-size: 1.125rem;
  font-weight: 700;
}

/* The distance to the target is information, not a call to action: the
   accent stays reserved for the active tab and the primary button. */
.home-focus__gap {
  margin: var(--sp-1) 0 0;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.home-focus__context {
  margin: var(--sp-2) 0 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* A two-column mini table, so the times line up across all three cards
   instead of wrapping wherever the label happens to end. */
.home-focus__times {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: var(--sp-1);
  column-gap: var(--sp-3);
  margin: var(--sp-2) 0 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* Always reserved, so a card without chips keeps the same bottom line. */
.home-focus__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-2);
  min-height: 2rem;
  margin: var(--sp-3) 0 0;
}

.home-focus__card > .home-focus__chips:last-child {
  margin-top: auto;
}

.home-focus__chip {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding-inline: var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 60rem) {
  .home-focus__cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 80%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-2);
  }

  .home-focus__card {
    scroll-snap-align: start;
  }
}

.home-away--quiet {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.home-away {
  padding: var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
}

.home-away__title {
  margin: 0 0 var(--sp-2);
  font-size: 0.95rem;
}

.home-away__list {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}


.activity-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-list__row {
  font-variant-numeric: tabular-nums;
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.activity-list__row:hover {
  border-color: var(--border-strong);
}

.activity-list__thumb {
  position: relative;
}

.activity-list__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.activity-list__cup {
  position: absolute;
  top: var(--sp-1);
  left: var(--sp-1);
  width: 1.4rem;
  height: 1.4rem;
}

.activity-list__body {
  display: grid;
  gap: 0;
  min-width: 0;
}

.activity-list__headline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* A fixed right-hand cluster: the badge, the follow slot and the timestamp
   each get their own column, so none of them drifts with the name length.
   The name absorbs the slack instead. */
.activity-list__meta {
  display: grid;
  grid-template-columns: 2.5rem 5.5rem 4.5rem;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  padding-left: var(--sp-3);
}

.activity-list__headline > .tt-auth__link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-list__when {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
  text-align: right;
}

.activity__followed--placeholder {
  visibility: hidden;
}

.activity-list__detail {
  margin: var(--sp-2) 0 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* Always present, so every row keeps the same height whether or not it has
   a rank movement to report. */
.activity-list__track {
  color: inherit;
  text-decoration: none;
}

.activity-list__track:hover {
  color: #ffd180;
}

.activity-list__story {
  min-height: 1.25rem;
  margin: var(--sp-1) 0 0;
  color: var(--good);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: pre-wrap;
}

@media (max-width: 40rem) {
  .activity-list__row {
    grid-template-columns: 1fr;
  }
}

.activity__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.activity__header h2 {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.activity__followed {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding-inline: var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.activity__avatar {
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
}

.activity__movement {
  margin: 0;
  color: #ffd180;
  font-size: 0.82rem;
  font-weight: 700;
}

.activity__session-reactions {
  margin: 0;
  color: #c9c9d1;
  font-size: 0.8rem;
}

.activity__runs-toggle {
  justify-self: start;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.activity__runs {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  padding: 0;
  color: #c9c9d1;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  list-style: none;
}

.career__chip--150 { border-color: #2196f3; background: #1769aa; color: #fff; }
.career__chip--200 { border-color: #ff473d; background: #c62828; color: #fff; }
.career__chip--150 span, .career__chip--200 span { color: #fff; }

.activity__run {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgb(17 18 23 / 58%);
}

.activity__run-header {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--text);
}

.activity__source {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  min-width: 1.55rem;
  padding: 0.08rem 0.42rem;
  border: 1px solid rgb(48 184 255 / 35%);
  border-radius: 999px;
  background: rgb(48 184 255 / 12%);
  color: var(--accent-cyan, #30b8ff);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.25;
  vertical-align: middle;
}

.activity__corrected {
  color: var(--accent-yellow, #ffd43b);
  font-size: 0.72rem;
}

.activity__quick-details {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 1.55rem;
  margin-top: var(--sp-1);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.activity__coin-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.activity__detail-icon,
.activity__loadout-icon {
  width: 1.3rem;
  height: 1.3rem;
  object-fit: contain;
}

.activity__loadout-icon {
  width: 1.55rem;
  height: 1.55rem;
}

.activity__lap-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.activity__lap-table th,
.activity__lap-table td {
  padding: var(--sp-1) var(--sp-2);
  border-bottom: 1px solid var(--border);
  text-align: right;
}

.activity__lap-table th:first-child,
.activity__lap-table td:first-child {
  text-align: left;
}

.activity__lap-table th {
  color: var(--text-muted);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.activity__loadout {
  display: flex;
  align-items: center;
}

.track-board__mode-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin: 0;
}

.activity__loadout-part {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--text);
  font-weight: 700;
}

.activity__loadout-part > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.activity__run-muted {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 40rem) {
  .activity-list__headline {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .activity-list__meta {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }

  .activity-list__detail,
  .activity-list__story {
    overflow-wrap: anywhere;
  }

  .activity__quick-details { flex-wrap: wrap; }
}

.profile-controls {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: var(--sp-2) 0;
}

.profile-controls__button--active {
  border-color: #ffa726;
  color: #ffd180;
}

.activity__improvement {
  margin: 0;
  color: #7fdca4;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rival-settings {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid #52525b;
  border-radius: 0.9rem;
  background: rgb(24 24 27 / 92%);
}

.rival-settings h3 {
  margin: 0 0 var(--sp-2);
}

.rival-settings__note {
  margin: 0 0 var(--sp-3);
  color: #c9c9d1;
  font-size: 0.9rem;
}

.rival-settings__list {
  display: grid;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
}

.rival-settings__rival {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 0.5rem;
  background: #202024;
  font-weight: 700;
}

.rival-settings__avatar {
  width: 1.8rem;
  height: 1.8rem;
}

.rival-settings__remove {
  margin-left: auto;
  min-height: 2rem;
  padding: var(--sp-1) var(--sp-3);
  font-size: 0.8rem;
}

.rival-settings__add {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.home-hero {
  display: grid;
  grid-template-columns: 17.5rem 1fr;
  gap: var(--sp-8);
  align-items: start;
  padding: var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

@media (max-width: 60rem) {
  .home-hero {
    grid-template-columns: 1fr;
  }
}

.home-hero__identity {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.home-hero__avatar {
  width: 4rem;
  height: 4rem;
}

.home-hero__text {
  display: grid;
  gap: var(--sp-2);
}

.home-hero__welcome {
  display: grid;
  margin: 0;
  font-weight: 800;
}

.home-hero__welcome-prefix {
  color: #9d9da6;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.home-hero__welcome-name {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  line-height: 1.15;
}

.home-hero__standing {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: 0;
}

.home-hero__chip {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding-inline: var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.home-hero__mastery {
  border-color: transparent;
  color: #0b1020;
}

.home-hero__highlight {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: fit-content;
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);
  border: 1px solid #52525b;
  border-radius: 0.6rem;
  background: rgb(63 63 70 / 45%);
  color: #ffd180;
  font-weight: 700;
  text-decoration: none;
}

.home-hero__highlight:hover {
  border-color: #ffa726;
}

.home-hero__highlight-art {
  width: 4rem;
  height: 2.25rem;
  border-radius: 0.35rem;
  object-fit: cover;
}

.home-hero__actions {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
}

.home-hero__cta {
  justify-self: stretch;
  width: 100%;
}

.home-hero__records {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: none;
}

.home-hero__records:hover {
  color: var(--text);
  text-decoration: underline;
}

.home-hero__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: 3rem;
  padding-inline: var(--sp-4);
  border: 0;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / 40%);
}

.home-hero__submit:hover {
  background: linear-gradient(180deg, #ffd699, #ffb74d);
}

.home-hero__submit-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
}

@media (max-width: 40rem) {
  .home-hero__avatar {
    width: 3.4rem;
    height: 3.4rem;
  }
}

.notifications {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid #52525b;
  border-radius: 0.9rem;
  background: rgb(24 24 27 / 92%);
}

.notifications__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.notifications__header h2 {
  margin: 0;
}

.notifications__badge:empty {
  display: none;
}

.notifications__badge {
  min-width: 1.5rem;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 999px;
  background: #ef5350;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
}

.notifications__mark-all {
  margin-left: auto;
  min-height: 2.2rem;
  padding: var(--sp-1) var(--sp-3);
  font-size: 0.85rem;
}

.notifications__list {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.notifications__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 0.55rem;
  background: #202024;
}

.notifications__item--unread {
  border-left: 3px solid #f6c744;
  background: rgb(246 199 68 / 8%);
  font-weight: 700;
}

.notifications__link {
  color: #ffd180;
}

.notifications__when {
  margin-left: auto;
  color: #9d9da6;
  font-size: 0.8rem;
  white-space: nowrap;
}

.build {
  display: grid;
  gap: var(--sp-4);
  width: min(100%, 60rem);
  margin-inline: auto;
}

.build__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
}

.build__part {
  display: grid;
  justify-items: center;
  gap: var(--sp-1);
  min-width: 7rem;
  padding:var(--sp-2);
  border:1px solid transparent;
  border-radius:.65rem;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.build__part:hover, .build__part[aria-expanded="true"] { border-color:#90caf9; background:rgb(66 165 245 / 10%); }

.build__part-icon {
  height: 4rem;
  width: auto;
}

.build__part-name {
  margin: 0;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}

.build__part-kind {
  margin: 0;
  color: #9d9da6;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.build__stats {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
}

.build__stat {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  align-items: center;
  gap: var(--sp-3);
}

.build__stat-label {
  font-size: 0.85rem;
}

.build__stat-meter {
  position: relative;
  height: 1.8rem;
  border-radius: 0.25rem;
  border: 1px solid #555b65;
  background: #2a2d33;
  overflow: hidden;
}

.build__stat-fill {
  display: flex;
  height: 0.9rem;
  margin-top: 0.9rem;
}

.build__stat-segment {
  height: 0.9rem;
  min-width: 0;
}

.build__stat-tick {
  position: absolute;
  top: 0.9rem;
  bottom: 0;
  width: 1px;
  background: rgb(255 255 255 / 28%);
  pointer-events: none;
  color: #c9c9d1;
  font-size: 0.58rem;
  line-height: 0.8rem;
  text-indent: -0.7rem;
  white-space: nowrap;
}

.build__stat-section {
  margin: var(--sp-2) 0 0;
  color: #b0bec5;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.build__legend {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.build__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: #c9c9d1;
  font-size: 0.8rem;
  font-weight: 700;
}

.build__legend-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.2rem;
}

.build__feedback {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding-block: var(--sp-2);
}

.build__feedback p { flex-basis: 100%; margin: 0; color: #c9c9d1; font-size: 0.82rem; }
.build__flag { padding: 0.35rem 0.65rem; border-radius: 999px; border: 1px solid #52525b; font-size: 0.75rem; font-weight: 800; }
.build__flag--yes { color: #7ee2a8; border-color: #238653; background: rgb(35 134 83 / 18%); }
.build__flag--meta { color: #ffe082; border-color: #b58b14; background: rgb(181 139 20 / 18%); }
.build__flag--no { color: #b7bbc4; }

.build__stat-value {
  min-width: 4.6rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: #eceff1;
}

.build__pickers {
  display: grid;
  gap: var(--sp-4);
}

.build__picker {
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.build__picker h3 {
  margin: 0 0 var(--sp-2);
  font-size: 1rem;
}

.build__search {
  width: min(100%, 24rem);
  margin-bottom: var(--sp-3);
  padding: 0.65rem 0.8rem;
  border: 1px solid #62626d;
  border-radius: 0.55rem;
  background: #202127;
  color: #fff;
}

.build__options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}

.build__option {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 5.6rem;
  padding: var(--sp-1);
  border: 2px solid transparent;
  border-radius: 0.5rem;
  background: rgb(63 63 70 / 55%);
  cursor: pointer;
}

.build__option:hover {
  border-color: #9d9da6;
}

.build__option--active {
  border-color: #f6c744;
  background: rgb(246 199 68 / 18%);
}

.build__option-icon {
  max-width: 3.5rem;
  max-height: 3rem;
}

.build__option-name { max-width: 100%; font-size: 0.68rem; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }

@media (max-width: 40rem) {
  .build__stat {
    grid-template-columns: 6rem 1fr auto;
  }

  .build__stat-label {
    font-size: 0.75rem;
  }
}

.public-player__flag {
  width: 1.6rem;
  height: auto;
  margin-left: var(--sp-2);
  vertical-align: baseline;
}

.public-player__hero {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block: var(--sp-2) var(--sp-4);
}

.public-player__rating {
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid #52525b;
  border-radius: 999px;
  background: rgb(24 24 27 / 92%);
  font-weight: 700;
}

.public-player__rating:empty {
  display: none;
}

.compare {
  display: grid;
  gap: var(--sp-4);
  width: min(100%, 52rem);
  margin-inline: auto;
}

.compare__summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
}

.compare__player {
  display: grid;
  gap: var(--sp-1);
  justify-items: center;
  text-align: center;
}

.compare__name {
  margin: 0;
  font-weight: 700;
}

.compare__tier {
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #0b1020;
}

.compare__versus {
  display: grid;
  justify-items: center;
  gap: var(--sp-1);
}

.compare__score {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.compare__detail {
  margin: 0;
  color: #c9c9d1;
  font-size: 0.8rem;
}

.compare__cup {
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.compare__cup-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: 1rem;
}

.compare__cup-icon {
  width: 1.6rem;
  height: 1.6rem;
}

.compare__tracks {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.compare__row {
  display: grid;
  grid-template-columns: 1fr 5.2rem 4.6rem 5.2rem;
  align-items: baseline;
  gap: var(--sp-2);
  font-variant-numeric: tabular-nums;
}

.compare__track {
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare__track:hover {
  text-decoration: underline;
}

.compare__time {
  text-align: right;
  color: #c9c9d1;
}

.compare__time--best {
  color: #7fdca4;
  font-weight: 700;
}

.compare__delta {
  text-align: center;
  font-size: 0.8rem;
}

.compare__delta--ahead {
  color: #7fdca4;
}

.compare__delta--behind {
  color: #f1948a;
}

.compare__picker {
  display: flex;
  align-items: end;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.compare__picker label {
  display: grid;
  gap: var(--sp-1);
}

.compare__select {
  min-width: 14rem;
  padding: var(--sp-2);
  border: 1px solid #52525b;
  border-radius: 0.5rem;
  background: #18181b;
  color: inherit;
}

@media (max-width: 40rem) {
  .compare__row {
    grid-template-columns: 1fr 4.6rem 3.6rem 4.6rem;
    font-size: 0.85rem;
  }

  .compare__summary {
    grid-template-columns: 1fr;
  }
}

.activity {
  display: grid;
  gap: 0;
  margin-top: var(--sp-12);
}

.activity > [role="status"] {
  margin: var(--sp-2) 0 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.activity > .activity-list {
  margin-top: var(--sp-6);
}

.activity__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity__card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
  overflow: hidden;
}

.activity__track {
  position: relative;
  display: block;
  line-height: 0;
}

.activity__preview {
  width: 100%;
  height: auto;
}

.activity__cup {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  width: 2rem;
  height: 2rem;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 70%));
}

.activity__body {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}

.activity__headline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-weight: 700;
}

.activity__mode {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding-inline: var(--sp-2);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #fff;
}

.activity__mode--150 {
  background: var(--engine-150);
}

.activity__mode--200 {
  background: var(--engine-200);
  color: #fff;
}

.activity__detail {
  margin: 0;
  color: #c9c9d1;
  font-size: 0.85rem;
}

.activity__time {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.activity__when {
  color: #9d9da6;
  font-size: 0.8rem;
}

.reactions {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-top: var(--sp-1);
}

.reactions__pills {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.reactions__pill,
.reactions__toggle {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid #52525b;
  border-radius: 999px;
  background: rgb(63 63 70 / 55%);
  color: inherit;
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
}

.reactions__pill:hover,
.reactions__toggle:hover {
  border-color: #9d9da6;
}

.reactions__pill--mine {
  border-color: #f6c744;
  background: rgb(246 199 68 / 18%);
}

.reactions__picker {
  position: absolute;
  bottom: calc(100% + 0.35rem);
  left: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  width: min(19rem, 78vw);
  padding: var(--sp-2);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 97%);
  box-shadow: 0 6px 18px rgb(0 0 0 / 45%);
}

.reactions__picker[hidden] {
  display: none;
}

.reactions__option {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  font-size: 1.25rem;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}

.reactions__option:hover {
  background: rgb(63 63 70 / 70%);
  transform: scale(1.15);
}

.reactions__option--mine {
  border-color: #f6c744;
  background: rgb(246 199 68 / 18%);
}

.reactions__hint {
  color: #9d9da6;
  font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .reactions__pill,
  .reactions__toggle,
  .reactions__option {
    transition: none;
  }

  .reactions__option:hover {
    transform: none;
  }
}

.mastery {
  display: grid;
  gap: var(--sp-4);
  width: 100%;
}

.mastery__modes {
  display: flex;
  gap: var(--sp-3);
}

.mastery__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
}

.mastery__badge {
  padding: var(--sp-1) var(--sp-4);
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
}

.mastery__totals {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.mastery__next {
  color: #c9c9d1;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.mastery__grid {
  display: grid;
  gap: var(--sp-2);
}

.mastery__cup {
  display: grid;
  grid-template-columns: 3rem repeat(4, 1fr);
  gap: var(--sp-2);
  align-items: center;
}

.mastery__cup-icon {
  width: 2.4rem;
  height: 2.4rem;
  justify-self: center;
}

.mastery__chip {
  display: grid;
  gap: var(--sp-1);
  min-height: 3.4rem;
  padding: var(--sp-2);
  border: 2px solid #52525b;
  border-radius: 0.5rem;
  background: rgb(24 24 27 / 92%);
  color: #fff;
  text-decoration: none;
  font: inherit;
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
}

.mastery__chip:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 2px;
}

.mastery__detail {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 96%);
}

.mastery__detail-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.mastery__detail-header h4 {
  margin: 0;
}

.mastery__detail-close {
  margin-left: auto;
  min-height: 2.2rem;
  padding: var(--sp-1) var(--sp-3);
  font-size: 0.85rem;
}

.mastery__detail-summary {
  margin: 0;
  font-weight: 700;
}

.mastery__ladder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mastery__ladder-row {
  display: grid;
  grid-template-columns: 4.4rem 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 0.4rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.mastery__ladder-row--current {
  background: rgb(246 199 68 / 16%);
  outline: 1px solid #f6c744;
}

.mastery__ladder-time {
  color: #c9c9d1;
}

.mastery__ladder-marker {
  color: #f6c744;
  font-size: 0.72rem;
  font-weight: 800;
}

.mastery__chip:hover,
.mastery__chip:focus-visible {
  filter: brightness(1.25);
}

.mastery__chip--unplayed {
  opacity: 0.45;
}

.mastery__chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.mastery__chip-tier {
  justify-self: start;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.68rem;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
}

.mastery__chip--unplayed .mastery__chip-tier {
  color: #c9c9d1;
}

.mastery__chip-time {
  font-variant-numeric: tabular-nums;
  color: #d7d7de;
}

@media (max-width: 640px) {
  .mastery__cup {
    grid-template-columns: 2.2rem repeat(2, 1fr);
    grid-auto-rows: auto;
  }

  .mastery__cup-icon {
    grid-row: span 2;
    width: 1.9rem;
    height: 1.9rem;
  }
}

.public-rating__list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  width: min(100%, 32rem);
}

.public-rating__row--self {
  outline: 2px solid #f6c744;
  background: rgb(246 199 68 / 10%);
}

.public-rating__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid #52525b;
  border-radius: 0.5rem;
  background: rgb(24 24 27 / 92%);
}

.public-rating__rank {
  font-weight: 700;
  color: #ffd180;
}

.public-player__preferences {
  margin-block: var(--sp-3) var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.9rem;
  background: rgb(24 24 27 / 92%);
}

.public-player__preferences h3,
.public-player__preferences p {
  margin-top: 0;
}

.public-player__favorite-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: var(--sp-3);
}

.public-player__favorite-parts figure {
  margin: 0;
  text-align: center;
}

.public-player__favorite-parts img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
}

.activity__source {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

.activity__source--android { color: #3ddc84; background: rgb(61 220 132 / 10%); }
.activity__source--windows { color: #58adf4; background: rgb(0 120 212 / 13%); }
.activity__source--web { color: #58d6ff; background: rgb(88 214 255 / 10%); }
.activity__source .platform-mark { width: 1rem; height: 1rem; }

.activity__finish-banner {
  display: block;
  width: min(9.5rem, 62%);
  max-height: 1.85rem;
  object-fit: contain;
  object-position: left center;
  margin-top: var(--sp-2);
  padding: 0.12rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
}
.activity__finish-banner--won,
.activity__finish-banner--lost,
.activity__finish-banner--record { border-color: transparent; background: transparent; }

.activity-list__row--won { border-color: #76e6a1; }
.activity-list__row--lost { border-color: #ff8e8e; }
.activity-list__row--record { border-color: #76e6a1; }

.language-settings {
  margin-block: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.language-settings h2 { margin-top: 0; }

.platform-mark {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
}

.platform-mark svg { width: 100%; height: 100%; }
.platform-mark--android { color: #3ddc84; }
.platform-mark--windows { color: #38a6f4; }
.platform-mark--web { color: #58d6ff; }
.platform-mark--ios, .platform-mark--macos { color: #e5e7eb; }
.platform-mark--linux { color: #f6c343; }

.public-rating__player {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-rating__score {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.player-claim__create {
  display: grid;
  gap: var(--sp-3);
  width: min(100%, 32rem);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
}

.player-claim__create h3 {
  margin: 0;
}

.player-claim__field {
  display: grid;
  gap: var(--sp-2);
  font-weight: 700;
}

.player-claim__field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #a1a1aa;
  border-radius: 0.5rem;
  color: #fff;
  background: #202024;
  font: inherit;
}

.player-claim__field input:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 3px;
}

.player-claim__required-note {
  margin: 0;
  color: #fcd34d;
  font-size: 0.85rem;
  font-weight: 700;
}

.player-claim__field input[aria-invalid="true"] {
  border-color: #f87171;
  box-shadow: 0 0 0 2px rgb(248 113 113 / 22%);
}

.player-claim__field-error {
  min-height: 1.15em;
  color: #fca5a5;
  font-size: 0.85rem;
  font-weight: 700;
}

.player-claim__hint {
  margin: 0;
  color: #c9c9d1;
  font-size: 0.85rem;
  font-weight: 400;
}

.administrator-claim-review ol {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.administrator-claim-review__item {
  display: grid;
  gap: var(--sp-3);
  width: min(100%, 32rem);
  padding: var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
}

.administrator-claim-review__summary {
  margin: 0;
  font-weight: 700;
}

.administrator-claim-review__field {
  display: grid;
  gap: var(--sp-2);
  font-weight: 700;
}

.administrator-claim-review__field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #a1a1aa;
  border-radius: 0.5rem;
  color: #fff;
  background: #202024;
  font: inherit;
}

.administrator-claim-review__field input:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 3px;
}

.administrator-claim-review__hint {
  color: #c9c9d1;
  font-size: 0.85rem;
  font-weight: 400;
}

.administrator-claim-review__confirmation {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  font-weight: 400;
}

.administrator-claim-review__confirmation input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: var(--sp-1);
  flex-shrink: 0;
  accent-color: #ffb74d;
}

.administrator-claim-review__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.administrator-claim-review__actions .tt-auth__button {
  justify-self: unset;
}

.tt-auth__link:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 3px;
}

.player-activity {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid #52525b;
  border-radius: 0.9rem;
  background: rgb(24 24 27 / 92%);
}

.player-activity h2,
.player-activity h3 {
  margin-block: 0 var(--sp-2);
}

.player-activity__status {
  margin-block: 0 var(--sp-4);
  color: #d4d4d8;
}

.player-activity__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--sp-4);
}

.player-activity__list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.player-activity__aliases {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

.player-activity__aliases li {
  display: grid;
  gap: var(--sp-1);
  min-width: 10rem;
  padding: var(--sp-3);
  border-radius: 0.55rem;
  background: #202024;
}

.player-activity__aliases span {
  color: #d4d4d8;
  font-size: 0.9rem;
}

.player-activity__list li {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: 0.55rem;
  background: #202024;
}

.player-activity__list span {
  color: #d4d4d8;
  font-size: 0.9rem;
}

.player-claim {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid #52525b;
  border-radius: 0.9rem;
  background: rgb(24 24 27 / 92%);
}

.player-claim h2 {
  margin-block: 0 var(--sp-2);
}

.player-claim__status {
  color: #d4d4d8;
}

.player-claim__search,
.player-claim__search label {
  display: grid;
  gap: var(--sp-3);
}

.player-claim__search input {
  box-sizing: border-box;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #a1a1aa;
  border-radius: 0.5rem;
  color: #fff;
  background: #202024;
  font: inherit;
}

.player-claim__results {
  display: grid;
  gap: var(--sp-3);
  padding: 0;
  list-style: none;
}

.player-claim__result {
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3);
  border: 1px solid #71717a;
  border-radius: 0.55rem;
  color: #fff;
  background: #202024;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.player-claim__result:hover {
  border-color: #ffa726;
}

.player-claim__search input:focus-visible,
.player-claim__result:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 3px;
}

.player-insights {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid #52525b;
  border-radius: 0.9rem;
  background: rgb(24 24 27 / 92%);
}

.player-insights h2,
.player-insights h3 {
  margin-block: 0 var(--sp-2);
}

.player-insights__status,
.player-insights__records span,
.player-insights__metrics span {
  color: #d4d4d8;
}

.player-insights__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--sp-3);
  margin-block: var(--sp-4) var(--sp-6);
}

.player-insights__metrics > div {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: 0.55rem;
  background: #202024;
}

.player-insights__metrics strong {
  font-size: 1.45rem;
}

.player-insights__records {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--sp-3);
  padding: 0;
  list-style: none;
}

.player-insights__records li {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: 0.55rem;
  background: #202024;
}

.public-player {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid #52525b;
  border-radius: 0.9rem;
  background: rgb(24 24 27 / 92%);
}

.public-player h2,
.public-player h3 {
  margin-block: 0 var(--sp-2);
}

.public-player__status,
.public-player__aliases span {
  color: #d4d4d8;
}

.public-player__aliases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-3);
  padding: 0;
  list-style: none;
}

.public-player__aliases li {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: 0.55rem;
  background: #202024;
}

.public-time-trials {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid #52525b;
  border-radius: 0.9rem;
  background: rgb(24 24 27 / 92%);
}

.public-time-trials__list {
  display: grid;
  gap: var(--sp-3);
  padding-left: var(--sp-6);
}

.public-time-trials__list li {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: 0.55rem;
  background: #202024;
}

.public-time-trials__list span {
  color: #d4d4d8;
}

.public-time-trials a {
  color: #ffd180;
  font-weight: 700;
}

.rating-graph {
  position: relative;
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid #3f3f46;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 88%);
}

.rating-graph__title {
  margin: 0 0 var(--sp-1);
  font-size: 0.95rem;
  font-weight: 800;
}

.rating-graph__caption {
  margin: 0 0 var(--sp-2);
  color: #9d9da6;
  font-size: 0.82rem;
}

.rating-graph__svg {
  display: block;
  width: 100%;
  height: auto;
}

.h2h {
  margin: var(--sp-2) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #3f3f46;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 88%);
}

.h2h__title {
  margin: 0 0 var(--sp-1);
  font-size: 0.9rem;
  font-weight: 800;
}

.h2h__line {
  margin: 0;
  color: #e4e4e7;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.h2h__tournaments {
  margin: var(--sp-1) 0 0;
  color: #9d9da6;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.tournament-career {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid #3f3f46;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 88%);
}

.tournament-career__title {
  margin: 0 0 var(--sp-1);
  font-size: 0.95rem;
  font-weight: 800;
}

.tournament-career__totals {
  margin: 0;
  color: #e4e4e7;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.tournament-career__nemesis {
  margin: var(--sp-1) 0 0;
  color: #ffd180;
  font-size: 0.85rem;
}

.tournament-career__list {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-1);
  color: #c9c9d1;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.profile-controls__h2h {
  align-self: center;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.tournament-career__note {
  margin: var(--sp-2) 0 0;
  color: #71717a;
  font-size: 0.72rem;
}

.rating-graph__tooltip {
  position: absolute;
  transform: translate(-50%, -110%);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid #52525b;
  border-radius: 0.45rem;
  background: rgb(9 9 11 / 96%);
  color: #e4e4e7;
  font-size: 0.74rem;
  line-height: 1.35;
  white-space: pre-line;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

/* Managing a recorded Time Trial, the Player's own presence, and the
   two-path start for a new arrival. Same dark card language as the other
   settings and administration surfaces. */

.player-visibility,
.time-trial-manage,
.administrator-time-trials {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid #52525b;
  border-radius: 0.9rem;
  background: rgb(24 24 27 / 92%);
}

.player-visibility h3,
.time-trial-manage h4,
.administrator-time-trials h2 {
  margin: 0 0 var(--sp-2);
}

.player-visibility__note,
.player-visibility__hint,
.time-trial-manage__hint,
.player-claim__hint {
  color: #c9c9d1;
  font-size: 0.9rem;
}

.player-visibility__choices,
.player-claim__visibility {
  display: grid;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid #3f3f46;
  border-radius: 0.7rem;
}

.player-visibility__choice,
.player-claim__choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
  cursor: pointer;
}

.player-visibility__choice span,
.player-claim__choice span {
  grid-column: 2;
}

.player-visibility__status {
  margin: var(--sp-2) 0 0;
  min-height: 1.2em;
  color: #c9c9d1;
}

.player-claim__paths {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}

.player-claim__path--active {
  border-color: #60a5fa;
  background: rgb(37 99 235 / 22%);
}

.time-trial-manage {
  margin-top: var(--sp-2);
}

.time-trial-manage__status {
  margin: 0 0 var(--sp-2);
  min-height: 1.2em;
  font-weight: 700;
  color: #e4e4e7;
}

.time-trial-manage__summary {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: var(--sp-1) var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-size: 0.9rem;
}

.time-trial-manage__summary dt {
  color: #a1a1aa;
}

.time-trial-manage__summary dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.time-trial-manage__history {
  list-style: none;
  display: grid;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-4);
  padding: 0;
  font-size: 0.86rem;
  color: #d4d4d8;
}

.time-trial-manage__history li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: space-between;
}

.time-trial-manage__when {
  color: #71717a;
  font-variant-numeric: tabular-nums;
}

.time-trial-manage__form {
  display: grid;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid #3f3f46;
}

.time-trial-manage__form p {
  margin: 0;
}

.time-trial-manage__field {
  display: grid;
  gap: var(--sp-1);
}

.time-trial-manage__caption {
  color: #a1a1aa;
  font-size: 0.85rem;
}

.time-trial-manage__laps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.time-trial-manage__form input,
.time-trial-manage__form select,
.administrator-time-trials input,
.administrator-time-trials select {
  min-height: 2.6rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid #a1a1aa;
  border-radius: 0.5rem;
  background: #202024;
  color: inherit;
  font: inherit;
}

.time-trial-manage__toggle {
  margin-top: var(--sp-2);
}

.activity-list__actions {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
}

.administrator-time-trials__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}

.administrator-time-trials__field {
  display: grid;
  gap: var(--sp-1);
  color: #a1a1aa;
  font-size: 0.85rem;
}

.administrator-time-trials__list {
  list-style: none;
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
}

.administrator-time-trials__row {
  padding: var(--sp-4);
  border: 1px solid #3f3f46;
  border-radius: 0.7rem;
}

.administrator-time-trials__summary {
  margin: 0 0 var(--sp-2);
  font-variant-numeric: tabular-nums;
}

.administrator-time-trials__presence {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
}

.administrator-time-trials__presence-status {
  color: #c9c9d1;
  font-size: 0.85rem;
}

.tt-auth__account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.tt-auth__hint {
  flex-basis: 100%;
  margin: 0;
  color: #a1a1aa;
  font-size: 0.85rem;
}


/* Tournaments (ADR-0160): public list, event page, operation board */
.tournaments { display: grid; gap: var(--sp-4); }
.tournaments__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.tournaments__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.tournaments__item-link {
  display: grid; gap: var(--sp-1); padding: var(--sp-4); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface-1); color: var(--text); text-decoration: none;
}
.tournaments__item-link:hover, .tournaments__item-link:focus-visible { border-color: var(--border-strong); }
.tournaments__item--live .tournaments__item-link { border-left: 3px solid var(--accent); }
.tournaments__item--soon .tournaments__item-link { border-left: 3px solid var(--rc-yellow, #eaf24d); }
/* Done. Five shelves, five edges: cyan is being raced, yellow is coming,
   nothing at all is still being made, red is a night nobody closed, green is
   over. */
.tournaments__item--finished .tournaments__item-link { border-left: 3px solid var(--rc-success, #7fe8a0); }
.tournaments__item--stalled .tournaments__item-link { border-left: 3px solid var(--rc-danger, #ff7165); }
/* A finished night only its Director can see: amber, because it is waiting on
   a decision rather than finished or broken. */
.tournaments__item--unpublished .tournaments__item-link { border-left: 3px solid var(--rc-gold, #f2c14e); }
.tournaments__section--unpublished .tournaments__section-title { color: var(--rc-gold, #f2c14e); }
/* Removed: grey, at the bottom, and its id readable because restoring one is
   done by id. */
/* The one shelf that folds: it holds every try and typo of the last year. */
.tournaments__section--removed > summary {
  display: flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; list-style: none; padding: var(--sp-1) 0;
}
.tournaments__section--removed > summary::-webkit-details-marker { display: none; }
.tournaments__section--removed .tournaments__section-title { color: var(--text-muted); margin: 0; }
.tournaments__section-count { color: var(--text-muted); font-size: 0.78rem; }
.tournaments__section-chevron {
  margin-left: auto; color: var(--text-muted); transition: transform 120ms ease;
}
.tournaments__section--removed[open] .tournaments__section-chevron { transform: rotate(180deg); }
.tournaments__section--removed:not([open]) .tournaments__section-note { display: none; }
.tournaments__section--removed > summary:hover .tournaments__section-title { color: var(--text); }
.tournaments__item--removed .tournaments__item-link {
  border-left: 3px solid var(--border-strong, #394553); opacity: .8;
}
.tournaments__item-id {
  font-family: var(--rc-time-font, monospace); font-size: .7rem;
  color: var(--text-muted); overflow-wrap: anywhere;
}
.tournaments__item--removed .tournaments__item-operate { color: var(--text-muted); }
.tournaments__section-note { margin: 0 0 var(--sp-1); color: var(--text-muted); font-size: 0.8rem; }
.tournaments__item-marks { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.tournaments__item-mark {
  display: inline-block; padding: 0 .45rem; border-radius: 999px;
  border: 1px solid var(--border-strong, #394553); color: var(--text-muted);
  font-size: .72rem; font-weight: 700;
}
.tournaments__item-operate {
  display: inline-block; margin: 0 var(--sp-4) var(--sp-3);
  color: var(--rc-gold, #f2c14e); font-size: .8rem; font-weight: 700; text-decoration: none;
}
.tournaments__item-operate:hover { text-decoration: underline; }
/* A night carrying a card is not a row: the card draws its own frame. */
.tournaments__item--card > .tournaments__standing-card { margin: 0; }
.tournaments__item-overdue {
  display: inline-block; padding: 0 .45rem; border-radius: 999px;
  border: 1px solid var(--rc-danger, #ff7165); color: var(--rc-danger, #ff7165);
  font-size: .75rem; font-weight: 700;
}
.tournaments__item-title { font-weight: 700; }
.tournaments__item-meta, .tournaments__overview, .tournaments__detail { color: var(--text-muted); font-size: 0.9rem; }
.tournaments__stage, .tournaments__overall { display: grid; gap: var(--sp-3); }
.tournaments__groups { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.tournaments__group {
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1);
  display: grid; gap: var(--sp-3); align-content: start;
}
.tournaments__group h4 { margin: 0; padding-left: var(--sp-2); border-left: 4px solid var(--border-strong); }
.tournaments__standings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.tournaments__standing {
  display: grid; grid-template-columns: 2.2rem 1fr auto; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--border);
}
.tournaments__standing--podium-1 .tournaments__rank { color: var(--accent); }
.tournaments__rank { font-weight: 700; font-variant-numeric: tabular-nums; }
.tournaments__name { color: var(--text); text-decoration: none; }
a.tournaments__name:hover, a.tournaments__name:focus-visible { text-decoration: underline; }
.tournaments__races summary { cursor: pointer; color: var(--text-muted); }
.tournaments__race-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.tournaments__race { display: grid; gap: var(--sp-1); font-size: 0.9rem; }
.tournaments__race--voided { opacity: 0.6; }
.tournaments__race-title { font-weight: 600; }
.tournaments__race-order { color: var(--text-muted); overflow-wrap: anywhere; }

.tournament-op { display: grid; gap: var(--sp-4); }
/* The console answers every action here, and the button that asked may be a
   long way down the page, so the answer travels with the operator. */
.tournament-op__status {
  min-height: 1.5em; position: sticky; top: 0; z-index: 5;
  margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--rc-radius-md, 8px);
  background: var(--rc-panel, #10151b); border: 1px solid var(--border, #3b4252);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); overflow-wrap: anywhere;
}
.tournament-op__status:empty { display: none; }
.tournament-op__content { display: grid; gap: var(--sp-6); min-width: 0; }
.tournament-op__toolbar { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.tournament-op__stage { color: var(--text-muted); }
.tournament-op__steps {
  list-style: none; margin: 0; padding: 0 0 var(--sp-1); display: flex;
  flex-wrap: nowrap; gap: var(--sp-2); overflow-x: auto; overscroll-behavior-inline: contain;
}
.tournament-op__step {
  padding: var(--sp-1) var(--sp-3); border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.85rem; flex: 0 0 auto;
}
.tournament-op__step--done { border-color: var(--good); color: var(--good); }
.tournament-op__step--active { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 18%, transparent); font-weight: 700; }
.tournament-op__checkpoint { display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; }
.tournament-op__helpers > summary { cursor: pointer; font-weight: 700; }
.tournament-op__helpers[open] { display: grid; gap: var(--sp-4); }
.tournament-op__panel {
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-1); display: grid; gap: var(--sp-3); min-width: 0; max-width: 100%; box-sizing: border-box;
}
.tournament-op__panel h3, .tournament-op__panel h4, .tournament-op__panel h5 { margin: 0; }
.tournament-op__section { display: grid; gap: var(--sp-3); min-width: 0; }
.tournament-op__score-guide {
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-inline-start: .35rem solid var(--accent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-1));
}
.tournament-op__score-guide > h3,
.tournament-op__score-guide > h4,
.tournament-op__score-guide > p { margin: 0; }
.tournament-op__score-guide > h4 { color: var(--accent); }
.tournament-op__incoming-card {
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-1); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--sp-3); align-items: end; min-width: 0;
}
.tournament-op__incoming-card > h4,
.tournament-op__incoming-card > p,
.tournament-op__incoming-card > .tournament-op__toolbar { grid-column: 1 / -1; margin: 0; }
.tournament-op__incoming-card > label { display: grid; gap: var(--sp-1); min-width: 0; }
.tournament-op__incoming-card > label > span { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.tournament-op__incoming-card > label > input,
.tournament-op__incoming-card > label > select { width: 100%; box-sizing: border-box; }
.tournament-op__create, .tournament-op__race-form, .tournament-op__manual-form, .tournament-op__guest-form,
.tournament-op__search, .tournament-op__move { display: grid; gap: var(--sp-3); }
.tournament-op__recent-roster { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block: .65rem; }
.tournament-op__recent-roster .tournament-op__hint { margin: 0; }
.tournament-op__recent-roster .tournament-op__hint { flex-basis: 100%; }
.tournament-op__exceptional-roster {
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2);
}
.tournament-op__exceptional-roster > summary { cursor: pointer; font-weight: 700; }
.tournament-op__roster-summary { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tournament-op__roster-count {
  min-width: 7.5rem; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface-2); text-align: center; font-size: .85rem;
}
.tournament-op__roster-count--present { border-color: color-mix(in srgb, var(--good) 65%, var(--border)); color: var(--good); }
.tournament-op__roster-count--waiting { border-color: color-mix(in srgb, var(--warn) 65%, var(--border)); color: var(--warn); }
.tournament-op__roster-count--absent { border-color: color-mix(in srgb, #ff6b8b 65%, var(--border)); color: #ff9aae; }
.tournament-op__inactive-filter { display: flex; align-items: center; gap: var(--sp-2); width: fit-content; font-weight: 700; }
.tournament-op__roster-filter { width: min(100%, 30rem); }
.tournament-op__search, .tournament-op__move, .tournament-op__guest-form { grid-template-columns: 1fr auto; align-items: end; }
.tournament-op__guest-form { grid-template-columns: 1fr 1fr auto; }
.tournament-op__field { display: grid; gap: var(--sp-1); font-weight: 600; }
.tournament-op input[type="text"], .tournament-op input[type="search"], .tournament-op input[type="number"],
.tournament-op input[type="date"], .tournament-op input:not([type]), .tournament-op select, .tournament-op textarea {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font: inherit; min-height: 2.5rem; max-width: 100%;
}
.tournament-op__intro, .tournament-op__hint { color: var(--text-muted); margin: 0; }
.tournament-op__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.tournament-op__list-link { font-weight: 600; }
.tournament-op__list-meta { color: var(--text-muted); }
.tournament-op__results { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); max-height: 18rem; overflow-y: auto; align-content: start; }
.tournament-op__attendance-board {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-items: start;
}

/* Step 2 follows the original Manager: a fixed, scrollable desktop status
   board and a separate, unambiguous compact row per player on small screens. */
.tournament-op__status-board {
  min-height: 22.5rem; max-height: 58vh; overflow: auto; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface-2);
}
.tournament-op__status-board-head,
.tournament-op__status-board-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); min-width: 42rem;
}
.tournament-op__status-board-head {
  position: sticky; top: 0; z-index: 1; padding: var(--sp-3); border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.tournament-op__status-board-title { display: grid; gap: 2px; text-align: center; font-weight: 850; }
.tournament-op__status-board-title small { display: flex; justify-content: center; gap: var(--sp-2); color: var(--text-muted); font-size: .72rem; }
.tournament-op__status-board-title small span { display: inline-flex; align-items: center; gap: 2px; }
.tournament-op__status-board-title small img { display: block; width: 14px; height: 14px; object-fit: contain; }
.tournament-op__status-board-title--present { color: var(--good); }
.tournament-op__status-board-title--waiting { color: var(--warn); }
.tournament-op__status-board-title--absent { color: #ff9aae; }
.tournament-op__status-board-body { display: grid; gap: var(--sp-2); padding: var(--sp-2); min-width: 42rem; }
.tournament-op__status-board-row { min-height: 4.5rem; }
.tournament-op__status-board-cell {
  min-width: 0; min-height: 4.5rem; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-2); border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface-1) 72%, transparent); color: var(--text-muted);
  font: inherit; text-align: center; transition: border-color 140ms ease, background-color 140ms ease;
}
.tournament-op__status-board-cell[role="button"] { cursor: pointer; }
.tournament-op__status-board-cell[role="button"]:hover,
.tournament-op__status-board-cell[role="button"]:focus-visible {
  border-color: var(--accent); outline: none; background: color-mix(in srgb, var(--accent) 13%, var(--surface-1)); color: var(--text);
}
.tournament-op__status-board-cell--filled { padding: 2px; border-style: solid; cursor: default; }
.tournament-op__status-board-cell--present.tournament-op__status-board-cell--filled { border-color: color-mix(in srgb, var(--good) 60%, var(--border)); }
.tournament-op__status-board-cell--waiting.tournament-op__status-board-cell--filled { border-color: color-mix(in srgb, var(--warn) 60%, var(--border)); }
.tournament-op__status-board-cell--absent.tournament-op__status-board-cell--filled { border-color: color-mix(in srgb, #ff6b8b 60%, var(--border)); }
.tournament-op__status-board-cell--filled .tournament-op__participant-card--row { width: 100%; grid-template-columns: minmax(0, 1fr) auto; }
.tournament-op__layout-export { display: grid; gap: var(--sp-3); }
.tournament-op__layout-export-preview {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid #29456f; border-radius: var(--r-md); background: #131f36;
}
.tournament-op__layout-export-group {
  display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid #29456f;
  border-radius: var(--r-sm); background: #172643; color: #e8f1ff;
}
.tournament-op__layout-export-group h4 { margin: 0; color: #72d7ff; }
.tournament-op__layout-export-group p { margin: 0; font-size: .84rem; line-height: 1.4; }
.tournament-op__layout-export-unplaced { color: #ffd166; }
.tournament-op__layout-export-audit { padding: var(--sp-3); border-left: 3px solid var(--accent); background: var(--surface-2); }
.tournament-op__layout-export-audit h4 { margin: 0 0 var(--sp-2); }
.tournament-op__layout-export-audit p { margin: 0; color: var(--text-muted); }
.tournament-op__layout-export-audit ul { margin: var(--sp-2) 0 0; padding-left: 1.25rem; display: grid; gap: var(--sp-2); }
.tournament-op__roster-rows { display: grid; gap: var(--sp-2); }
.tournament-op__roster-rows--mobile { display: none; }
.tournament-op__roster-mobile-head { display: flex; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) 0; font-size: .75rem; }
.tournament-op__roster-mobile-count--present { color: var(--good); }
.tournament-op__roster-mobile-count--waiting { color: var(--warn); }
.tournament-op__roster-mobile-count--absent { color: #ff9aae; }
.tournament-op__roster-mobile-row { min-width: 0; }
.tournament-op__participant-card--row {
  grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; padding-left: calc(var(--sp-2) + 4px);
}
.tournament-op__participant-card--row .tournament-op__attendance-toggle { min-width: 8.5rem; }
.tournament-op__participant-name-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex-wrap: wrap; }
.tournament-op__roster-badge {
  padding: 1px var(--sp-2); border-radius: 999px; font-size: .68rem; font-weight: 800; white-space: nowrap;
}
.tournament-op__roster-badge--new { background: #f97316; color: #1c1917; }
.tournament-op__roster-badge--inactive { background: #38bdf8; color: #1c1917; }
.tournament-op__roster-badge--rank { background: #353f4c; color: #c2c9d3; }
.tournament-op__gate--ready { background: var(--good); border-color: var(--good); }
/* Step 3/7 group board: the source Manager's effective basai-brand look. */
.tournament-board { display: grid; grid-template-columns: repeat(var(--group-cols, 1), minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1220px) { .tournament-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .tournament-board { grid-template-columns: 1fr; } }
.tournament-board__group {
  border: 1px solid transparent; border-radius: 10px; padding: 8px; background: #131f36;
  border-image: linear-gradient(90deg, var(--group-border-start), var(--group-border-end)) 1;
}
.tournament-board__group-header { padding: 6px; border: 1px solid #29456f; border-radius: 8px; background: #131f36; }
.tournament-board__group-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tournament-board__group-title h3 { margin: 0; font-size: 1rem; color: #e8f1ff; }
.tournament-board__badge {
  padding: 2px 6px; border-radius: 999px; border: 1px solid #29456f; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, #131f36 70%, #2a4a78 30%); color: #e8f1ff; white-space: pre; text-transform: uppercase;
}
.tournament-board__legend { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tournament-board__legend-pill {
  display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 999px; font-size: 11px;
  font-weight: 700; border: 1px solid #29456f; background: #131f36; color: #a9bddb;
}
.tournament-board__legend-pill--champion { border-color: #F59E0B; color: #F59E0B; }
.tournament-board__legend-pill--talent { border-color: #38BDF8; color: #38BDF8; }
.tournament-board__legend-pill--wild { border-color: #A78BFA; color: #A78BFA; }
.tournament-board__legend-pill--adventure { border-color: #4ADE80; color: #4ADE80; }
.tournament-board__legend-pill--feest { border-color: #EC4899; color: #EC4899; }
.tournament-board__legend-pill--new { border-color: #F97316; color: #F97316; }
.tournament-board__legend-pill--unknown { border-color: #94A3B8; color: #94A3B8; }
.tournament-board__legend-pill--inactive { opacity: .45; }
.tournament-board__slots { display: grid; gap: 8px; margin-top: 8px; }
.tournament-board__slot { border: 1px dashed #29456f; border-radius: 8px; padding: 6px; background: #131f36; min-height: 92px; }
.tournament-board__slot--empty {
  display: flex; align-items: center; justify-content: center; color: #a9bddb; font-size: 12px;
  background: color-mix(in srgb, #131f36 82%, #2a4a78 18%); border-color: #3a5d90;
}
.tournament-board__station { border: 1px solid #29456f; border-radius: 8px; padding: 6px; background: #131f36; }
.tournament-board__station-title { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; color: #e8f1ff; }
.tournament-board__station-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.tournament-board__station-chip img { width: 16px; height: 16px; object-fit: contain; flex: 0 0 16px; }
.tournament-board__station-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tournament-board__utp { font-size: 11px; color: #a9bddb; white-space: nowrap; }
.tournament-board__handle {
  padding: 2px 6px; border: 1px solid #3a5d90; border-radius: 6px; cursor: grab; font: inherit; font-size: 12px;
  background: color-mix(in srgb, #131f36 70%, #2a4a78 30%); color: #e8f1ff;
}
.tournament-board__handle:hover { border-color: #4da3ff; box-shadow: 0 0 0 1px color-mix(in srgb, #4da3ff 38%, transparent); }
.tournament-board__handle:active { cursor: grabbing; }
.tournament-board__park {
  height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; cursor: pointer;
  border: 1px solid color-mix(in srgb, #4da3ff 60%, #29456f 40%);
  background: color-mix(in srgb, #4da3ff 14%, #172643 86%); color: #e8f1ff;
}
.tournament-board__seat {
  min-height: 72px; border: 1px dashed #29456f; border-radius: 10px; background: #131f36; margin-bottom: 6px;
  display: flex; align-items: stretch; justify-content: stretch; position: relative; overflow: hidden;
  transition: outline-color .15s ease, border-color .15s ease;
}
.tournament-board__seat-hint { font-size: 12px; color: #a9bddb; text-align: center; margin: auto; pointer-events: none; }
/* The empty seat and the empty Switch slot: a dashed invitation with a "+". */
.tournament-board__add {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 100%;
  padding: 10px; border: 1px dashed #3a5d90; border-radius: 10px; cursor: pointer;
  background: color-mix(in srgb, #0f1a30 88%, #2a4a78 12%); color: #a9bddb; font: inherit; font-size: 15px; font-weight: 600;
}
.tournament-board__add:hover, .tournament-board__add:focus-visible { border-color: #4da3ff; color: #e8f1ff; background: color-mix(in srgb, #131f36 80%, #2f6df6 20%); }
.tournament-board__add--slot { min-height: 80px; }
.tournament-board__add-plus {
  display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;
  border: 1px solid #4da3ff; border-radius: 5px; color: #4da3ff; font-size: 13px; line-height: 1; font-weight: 700;
}
.tournament-board__slot--empty:has(.tournament-board__add) { padding: 6px; justify-content: stretch; }
.tournament-board__seat:has(.tournament-board__add) { border-style: solid; }
/* The source's ✕: the participant or the Switch leaves the Tournament. */
.tournament-board__remove {
  width: 22px; height: 22px; min-width: 22px; padding: 0; border-radius: 999px; cursor: pointer; line-height: 1;
  border: 1px solid color-mix(in srgb, #ef5a67 65%, #29456f 35%);
  background: color-mix(in srgb, #ef5a67 20%, #172643 80%); color: #ffd9dd; font: inherit; font-size: 12px; font-weight: 900;
}
.tournament-board__remove:hover { border-color: color-mix(in srgb, #ef5a67 78%, #29456f 22%); background: color-mix(in srgb, #ef5a67 30%, #172643 70%); }
/* "Toevoegen": the sheet an empty seat or slot opens. */
.tournament-add-sheet {
  position: fixed; z-index: 31; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(720px, 100vw); max-height: min(86vh, 760px); overflow-y: auto;
  border: 1px solid #3a5d90; border-bottom: 0; border-radius: 16px 16px 0 0;
  background: #0b1220; box-shadow: 0 -18px 48px rgb(0 0 0 / .52); color: #e8f1ff;
}
.tournament-add-sheet__head {
  position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  padding: 14px 18px; background: #0f1a30; border-bottom: 1px solid #29456f;
}
.tournament-add-sheet__plus { color: #4da3ff; font-size: 20px; font-weight: 700; line-height: 1; }
.tournament-add-sheet__head h3 { margin: 0; font-size: 20px; text-align: center; }
.tournament-add-sheet__kind { color: #a9bddb; font-size: 16px; }
.tournament-add-sheet__close { padding: 6px 0 6px 12px; border: 0; background: none; color: #e8f1ff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.tournament-add-sheet__body { display: grid; gap: 12px; padding: 14px; }
.tournament-add-sheet__target {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #29456f; border-radius: 12px;
  background: color-mix(in srgb, #131f36 90%, #2f6df6 10%); font-size: 16px;
}
.tournament-add-sheet__group { padding: 4px 12px; border-radius: 999px; background: #ef1c3a; color: #fff; font-weight: 800; }
.tournament-add-sheet__place { flex: 1 1 auto; }
.tournament-add-sheet__to-parking {
  padding: 8px 12px; border: 1px solid #3a5d90; border-radius: 10px; background: #172643; color: #e8f1ff; font: inherit; font-size: 14px; cursor: pointer;
}
.tournament-add-sheet__to-parking:disabled { opacity: .45; cursor: not-allowed; }
.tournament-add-sheet__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.tournament-add-sheet__tab {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 8px 10px;
  border: 1px solid #29456f; border-radius: 12px; background: #131f36; color: #e8f1ff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.tournament-add-sheet__tab--active { border-color: #4da3ff; background: color-mix(in srgb, #131f36 70%, #2f6df6 30%); box-shadow: 0 0 0 1px #4da3ff inset; }
.tournament-add-sheet__tab-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 5px;
  background: #1d3358; color: #4da3ff; font-size: 14px; font-weight: 800;
}
.tournament-add-sheet__form { display: grid; gap: 10px; }
.tournament-add-sheet__label { color: #a9bddb; font-size: 14px; font-weight: 600; }
.tournament-add-sheet__select, .tournament-add-sheet__input {
  width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid #3a5d90; border-radius: 12px;
  background: #131f36; color: #e8f1ff; font: inherit; font-size: 17px;
}
.tournament-add-sheet__switches {
  display: grid; gap: 10px; padding: 12px 14px; border: 1px dashed #29456f; border-radius: 12px;
  background: color-mix(in srgb, #131f36 90%, #2f6df6 10%);
}
.tournament-add-sheet__check { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: 16px; }
.tournament-add-sheet__check input { width: 20px; height: 20px; margin: 0; accent-color: #4da3ff; }
.tournament-add-sheet__hint { margin: 0; color: #a9bddb; font-size: 13px; }
.tournament-add-sheet__primary {
  min-height: 60px; border: 1px solid #3a5d90; border-radius: 12px; background: #1f3f7a; color: #e8f1ff;
  font: inherit; font-size: 20px; font-weight: 800; cursor: pointer;
}
.tournament-add-sheet__primary:disabled { opacity: .45; cursor: not-allowed; }
/* The CSV row, folded under the phone's title. */
.tournament-op__csv { border: 1px solid #29456f; border-radius: 12px; background: color-mix(in srgb, #131f36 92%, #2f6df6 8%); padding: 0; }
.tournament-op__csv-summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-size: 16px; font-weight: 700; list-style: none; }
.tournament-op__csv-summary::-webkit-details-marker { display: none; }
.tournament-op__csv-summary::before { content: "▸"; color: #a9bddb; font-size: 12px; }
.tournament-op__csv[open] > .tournament-op__csv-summary::before { content: "▾"; }
.tournament-op__csv-icon {
  width: 18px; height: 18px; border-radius: 3px; background:
    linear-gradient(#1f7a4d, #1f7a4d) 0 0 / 100% 100%,
    repeating-linear-gradient(0deg, transparent 0 4px, rgb(255 255 255 / 55%) 4px 5px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgb(255 255 255 / 55%) 5px 6px);
  background-blend-mode: normal;
}
.tournament-op__csv-step { color: #a9bddb; font-weight: 600; }
.tournament-op__csv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px; }
.tournament-op__csv > .tournament-op__hint { padding: 0 14px 10px; margin: 6px 0 0; }
@media (max-width: 480px) { .tournament-op__csv-actions { grid-template-columns: 1fr; } }
/* Admin Acties: the source footer. */
.tournament-op__admin { margin-top: 14px; border: 1px solid #29456f; border-radius: 12px; background: #172643; padding: 10px 12px; }
.tournament-op__admin > summary { cursor: pointer; font-weight: 800; letter-spacing: .01em; padding: 2px 0; }
.tournament-op__admin[open] > summary { margin-bottom: 8px; }
.tournament-op__admin-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 8px; align-items: start; min-width: 0; }
.tournament-op__admin-hint { grid-column: 1 / -1; margin: 0 0 2px; }
.tournament-op__admin-section { margin: 0; padding: 10px; border: 1px solid #29456f; border-radius: 10px; background: #131f36; display: grid; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.tournament-op__admin-section h4 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tournament-op__admin-badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid #29456f;
  font-size: 11px; font-weight: 700; color: #a9bddb; background: color-mix(in srgb, #172643 84%, #2f6df6 16%);
}
.tournament-op__admin-field { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: #a9bddb; }
.tournament-op__admin-field select { min-height: 44px; }
.tournament-op__admin-reason { margin: 0; }
.tournament-op__admin-history { margin: 0; padding-left: 18px; font-size: 12px; color: #a9bddb; display: grid; gap: 2px; }

/* The operator toolbar has a variable number of safe review actions. Its
   former fixed grid let one long action consume the whole phone width and
   collapse the first column. These rules belong only to the operator page. */
.page-shell--tournament-control .tournament-op__toolbar.tournament-op__main-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.page-shell--tournament-control .tournament-op__toolbar.tournament-op__main-toolbar > * {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tournament-equipment-review__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem;
  min-width: 0;
}
.tournament-equipment-review__field :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
}
[data-equipment-review] button {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tournament-board__player {
  display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; border-radius: 10px; padding: 8px 9px;
  background: #172643; color: #e8f1ff; position: relative;
}
.tournament-board__player--seat { background: var(--seat-tone-bg, #172643); }
.tournament-board__player--seat::before {
  content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(8 18 36 / 8%));
}
.tournament-board__seat--dark .tournament-board__player--seat,
.tournament-board__seat--dark .tournament-board__player-name,
.tournament-board__seat--dark .tournament-board__player-meta { color: #10151e; }
.tournament-board__seat--light .tournament-board__player--seat,
.tournament-board__seat--light .tournament-board__player-name,
.tournament-board__seat--light .tournament-board__player-meta { color: #f8fafc; text-shadow: 0 1px 1px rgb(0 0 0 / 35%); }
.tournament-board__player-info { display: grid; min-width: 0; flex: 1; }
.tournament-board__player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tournament-board__player-meta { font-size: 11px; }
.tournament-board__player-badges { display: inline-flex; gap: 4px; }
.tournament-board__tier {
  display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 999px; font-size: 11px;
  border: 1px solid rgb(28 25 23 / 36%); color: #1C1917; box-shadow: 0 1px 2px rgb(15 23 42 / 20%); white-space: nowrap;
}
.tournament-board__tier--champion { background: #F59E0B; font-weight: 700; }
.tournament-board__tier--talent { background: #38BDF8; }
.tournament-board__tier--wild { background: #A78BFA; }
.tournament-board__tier--adventure { background: #4ADE80; }
.tournament-board__tier--feest { background: #EC4899; }
.tournament-board__tier--new { background: #F97316; font-weight: 700; }
.tournament-board__tier--unknown { background: #94A3B8; }
.tournament-board__dragging { opacity: .65; }
.tournament-board__player--selected { outline: 2px solid #2f6df6; outline-offset: -2px; }
.tournament-board__swap-badge {
  min-width: 2rem; height: 1.5rem; padding: 0 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid #3a5d90; background: color-mix(in srgb, #131f36 70%, #2a4a78 30%);
  color: #e8f1ff; font: inherit; font-size: 12px; line-height: 1;
}
.tournament-board__swap-badge:hover { border-color: #4da3ff; }
.tournament-move-sheet {
  position: fixed; z-index: 30; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(440px, calc(100vw - 24px)); max-height: min(78vh, 640px); overflow-y: auto;
  display: grid; gap: 8px; padding: 16px; border: 1px solid #3a5d90; border-radius: 16px;
  background: #131f36; box-shadow: 0 18px 48px rgb(0 0 0 / .52);
}
.tournament-move-sheet h3 { margin: 0; font-size: 18px; }
.tournament-move-sheet p { margin: 0; color: #b8c7dc; font-size: 13px; line-height: 1.35; }
.tournament-move-sheet button { min-height: 42px; }
.tournament-move-sheet__station { margin-top: 4px !important; color: #eef5ff !important; font-weight: 700; }
.tournament-board__drop-hover { outline: 2px solid #2f6df6 !important; outline-offset: -2px; }
.tournament-board__unseated { display: grid; gap: 6px; margin-top: 8px; }
.tournament-board__parking-wrap {
  border: 1px solid #29456f; border-radius: 8px; margin: 8px 0;
  background: color-mix(in srgb, #131f36 90%, #2f6df6 10%);
}
.tournament-board__parking-wrap > summary { cursor: pointer; padding: 8px 10px; font-weight: 700; }
.tournament-board__parking-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px; }
@media (max-width: 820px) { .tournament-board__parking-zones { grid-template-columns: 1fr; } }
.tournament-board__parking-zone { border: 1px dashed #29456f; border-radius: 8px; padding: 6px; min-height: 74px; background: #131f36; }
.tournament-board__parking-zone h4 { margin: 0 0 4px; font-size: 13px; }
.tournament-board__parking-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.tournament-board__section-title { margin: 10px 0 6px; }
.tournament-board__status { font-size: 13px; border-radius: 8px; padding: 6px 8px; border: 1px solid #29456f; }
.tournament-board__status--ready {
  border-color: color-mix(in srgb, #19c37d 62%, #29456f 38%);
  background: color-mix(in srgb, #19c37d 14%, #131f36 86%);
  color: color-mix(in srgb, #19c37d 84%, #ffffff 16%);
}
.tournament-board__status--warning {
  border-color: color-mix(in srgb, #f5b942 62%, #29456f 38%);
  background: color-mix(in srgb, #f5b942 14%, #131f36 86%);
  color: color-mix(in srgb, #f5b942 90%, #ffffff 10%);
}
.tournament-op__gate--blocked { opacity: .75; }
.tournament-op__gate-reason { border-left: 3px solid var(--warn); padding-left: var(--sp-2); }
.tournament-op__attendance-lane {
  min-width: 0; min-height: 20rem; max-height: 58vh; overflow-y: auto; padding: var(--sp-3); border: 1px solid var(--border);
  border-top: 3px solid var(--text-muted); border-radius: var(--r-md); background: var(--surface-2);
  display: grid; gap: var(--sp-2); align-content: start; transition: border-color 140ms ease, box-shadow 140ms ease;
}
.tournament-op__attendance-lane--present { border-top-color: var(--good); }
.tournament-op__attendance-lane--waiting { border-top-color: var(--warn); }
.tournament-op__attendance-lane--absent { border-top-color: #ff6b8b; }
.tournament-op__drop-hint { color: var(--text-muted); font-size: 0.75rem; }
.tournament-op__participant-card {
  position: relative; overflow: hidden; padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-1); display: grid; gap: var(--sp-2); min-width: 0;
}
.tournament-op__participant-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--text-muted); }
.tournament-op__participant-card--present { border-color: color-mix(in srgb, var(--good) 55%, var(--border)); background: color-mix(in srgb, var(--good) 10%, var(--surface-1)); }
.tournament-op__participant-card--present::before { background: var(--good); }
.tournament-op__participant-card--waiting { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, var(--surface-1)); }
.tournament-op__participant-card--waiting::before { background: var(--warn); }
.tournament-op__participant-card--absent { border-color: color-mix(in srgb, #ff6b8b 55%, var(--border)); background: color-mix(in srgb, #ff6b8b 8%, var(--surface-1)); }
.tournament-op__participant-card--absent::before { background: #ff6b8b; }
.tournament-op__participant-header { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.tournament-op__participant-identity { display: grid; min-width: 0; flex: 1; }
.tournament-op__participant-identity strong, .tournament-op__participant-identity small {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tournament-op__participant-identity small { color: var(--text-muted); }
.tournament-op__inactive-badge {
  width: fit-content; margin-top: var(--sp-1); padding: 1px var(--sp-2); border: 1px solid var(--border-strong);
  border-radius: 999px; color: var(--text-muted); background: rgb(255 255 255 / 5%); font-size: .7rem; font-weight: 800;
}
.tournament-op__drag-handle {
  width: 2.75rem; min-width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); cursor: grab; font: inherit;
}
.tournament-op__drag-handle:active { cursor: grabbing; }
.tournament-op__participant-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tournament-op__participant-actions .tournament-op__remove { margin-left: auto; }
.tournament-op__attendance-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.tournament-op__attendance-choice {
  min-height: 2.25rem; padding: var(--sp-1); border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-muted); font: inherit; font-weight: 900; cursor: pointer;
}
.tournament-op__attendance-choice:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.tournament-op__attendance-choice:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.tournament-op__attendance-choice--present[aria-pressed="true"] { border-color: var(--good); background: color-mix(in srgb, var(--good) 28%, var(--surface-2)); color: #fff; }
.tournament-op__attendance-choice--waiting[aria-pressed="true"] { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 28%, var(--surface-2)); color: #fff; }
.tournament-op__attendance-choice--absent[aria-pressed="true"] { border-color: #ff6b8b; background: color-mix(in srgb, #ff6b8b 28%, var(--surface-2)); color: #fff; }
.tournament-op__switch {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 2.25rem;
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-sm); font-weight: 800;
}
.tournament-op__table { display: grid; gap: var(--sp-1); overflow-x: auto; min-width: 0; max-width: 100%; }
.tournament-op__row {
  display: grid; grid-template-columns: minmax(8rem, 1fr) 3.5rem minmax(8rem, 10rem) 3rem 3rem auto;
  gap: var(--sp-2); align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border);
  min-width: 30rem;
}
.tournament-op__row--header { color: var(--text-muted); font-size: 0.85rem; }
.tournament-op__row--absent .tournament-op__cell-name { color: var(--text-muted); text-decoration: line-through; }
.tournament-op__row--waiting .tournament-op__cell-name { color: var(--warn); }
.tournament-op__remove { padding-block: var(--sp-1); }
.tournament-op__controls { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tournament-op__groups { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr)); }
.tournament-op__group {
  padding: var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-2); display: grid; gap: var(--sp-3); align-content: start;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.tournament-op__stations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--sp-2); }
.tournament-op__station {
  padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-1); display: grid; gap: var(--sp-1); min-width: 0;
}
.tournament-op__station h5 { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tournament-op__seat {
  min-height: 2.75rem; padding: var(--sp-2); border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
  color: var(--text-muted); display: flex; align-items: center; min-width: 0;
}
.tournament-op__seated-player { color: var(--text); font-weight: 700; width: 100%; cursor: grab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tournament-op__unseated { padding: var(--sp-2); border: 1px solid var(--warn); border-radius: var(--r-sm); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tournament-op__parking {
  padding: var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-2); display: grid; gap: var(--sp-2); transition: border-color 140ms ease, box-shadow 140ms ease;
}
.tournament-op__parking-list { min-height: 2.75rem; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tournament-op__parked-player {
  min-height: 2.75rem; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-strong);
  border-radius: 999px; background: var(--surface-1); color: var(--text); display: inline-flex; align-items: center; font-weight: 700; cursor: grab;
}
.tournament-op__drop-target--active { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.tournament-op__seating, .tournament-op__standings, .tournament-op__races, .tournament-op__order {
  margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1);
}
.tournament-op__seating, .tournament-op__races { list-style: none; padding-left: 0; color: var(--text-muted); font-size: 0.9rem; }
.tournament-op__entry summary, .tournament-op__import summary, .tournament-op__manual summary,
.tournament-op__guest summary, .tournament-op__history summary { cursor: pointer; font-weight: 600; }
.tournament-op__manual-grid { display: grid; gap: var(--sp-2); }
.tournament-op__manual-row { display: grid; grid-template-columns: minmax(8rem, 1fr) repeat(auto-fit, minmax(4rem, 6rem)); gap: var(--sp-2); align-items: center; }

/* The score-import row, as the source Manager laid it out: the workbook name
   with its points and match badge on the left, the Player picker on the
   right. On a phone the two stack rather than squeezing a select into a few
   millimetres. */
.tournament-op__match-row {
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 14rem);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
}

.tournament-op__match-source { display: grid; gap: .15rem; min-width: 0; }
.tournament-op__match-source strong { overflow-wrap: anywhere; }
.tournament-op__match-source p { margin: 0; }

.tournament-op__match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.tournament-op__match-badge {
  padding: .1rem .45rem;
  border: 1px solid currentcolor;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
}

/* The source's severity vocabulary: settled green, strong blue, likely amber,
   anything left to check red. */
.tournament-op__match-badge--settled { color: #7ee2a8; }
.tournament-op__match-badge--strong { color: var(--engine-150); }
.tournament-op__match-badge--likely { color: #ffd180; }
.tournament-op__match-badge--attention { color: #ff8e8e; }

/* The picker is the one control on this row, so it keeps a coarse-pointer
   target even where the surrounding form uses a denser control height. */
.tournament-op__match-row select { min-height: 2.75rem; }

/* The source's selection counter: an option says how often that Player is
   already taken and is coloured by it. Green is the one correct state, red
   means the same participant answers to two workbook rows. */
.tournament-op__match-option--taken { color: #8ee08e; background: #112b11; }
.tournament-op__match-option--duplicate { color: #ff8a8a; background: #3a1212; }

/* A native select can ignore option colours, so the control itself carries the
   state: green once it names exactly one Player of this group, red while it
   names nobody or the same Player as another row. */
/* `.page-shell--tournament-control .tournament-op :is(input, select, textarea)`
   paints every field of the console and has the same specificity as a plain
   `.tournament-op__match-row select.is-once`, so it would win on order alone.
   One more class settles it. */
.tournament-op .tournament-op__match-row select.is-once {
  border-color: #8ee08e; color: #d8f5d8; background: #112b11;
}
.tournament-op .tournament-op__match-row select.is-duplicate,
.tournament-op .tournament-op__match-row select.is-open {
  border-color: #ff8a8a; color: #ffd9d9; background: #3a1212;
}
.tournament-op .tournament-op__match-row select.is-open { font-style: italic; }

@media (max-width: 34rem) {
  .tournament-op__match-row { grid-template-columns: minmax(0, 1fr); }
}
/* The step-back control reads as an action, not as a stray link: it is the
   one control that undoes a confirmed step. */
.tournament-op__step-back {
  border-color: #ffd180;
  color: #ffd180;
}
/* A participant who lends a console without playing: the seating counts the
   console, and the roster says so where the tick was made. */
.tournament-op__roster-badge--lender { background: #ffd180; color: #1c1917; }
/* The detaching return is the one that breaks a score coupling on purpose:
   same family as the step-back, but it must not be mistaken for inspection. */
.tournament-op__step-back--detach {
  border-color: #ff8a65;
  color: #ff8a65;
  border-style: dashed;
}

/* Which notifications you want at all: four one-tap choices, not a dropdown,
   because this is the control reached for while a phone is buzzing. */
.notification-settings__scope { display: grid; gap: var(--sp-2); margin-block: var(--sp-3); }
.notification-settings__scope-label { margin: 0; color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.notification-settings__scope-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--sp-2);
}
.notification-settings__scope-button { min-height: 2.75rem; }
.notification-settings__scope-button--active {
  border-color: var(--accent);
  color: #06110f;
  background: var(--accent);
}
.notification-settings__scope-note { margin: 0; color: var(--text-muted); font-size: .8rem; }

/* Plain steps per device; the device you are on is open, the others fold. */
.notification-settings__guide { display: grid; gap: var(--sp-2); margin-block: var(--sp-3); }
.notification-settings__guide-block > summary { cursor: pointer; font-weight: 700; }
.notification-settings__guide-block ol { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }

.tournament-op__toggle { display: flex; gap: var(--sp-2); align-items: center; }
.tournament-op__voided { display: flex; gap: var(--sp-2); align-items: center; }
.tournament-op__preview { display: grid; gap: var(--sp-2); color: var(--text-muted); }
.tournament-op__export { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; }
.tournament-op__history ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); color: var(--text-muted); font-size: 0.85rem; }
.tournament-op__incident-form { display: grid; grid-template-columns: minmax(8rem, 0.7fr) minmax(10rem, 1fr) minmax(14rem, 2fr) auto; gap: var(--sp-2); }
.tournament-op__incident-list, .tournament-op__analytics { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.tournament-op__utp { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--sp-2) var(--sp-4); }
.tournament-op__utp h4 { grid-column: 1 / -1; margin-top: var(--sp-2); }
.tournament-op__utp p { margin: 0; padding: var(--sp-2); border-left: 3px solid var(--accent); background: var(--surface-2); }
/* Tournament workflow visual baseline — derived from the active original
   Manager. Functional surfaces keep ecosystem contracts, but every step
   shares the Manager's blue panel, border and control language. */
.tournament-op {
  --tournament-bg: #0b1220;
  --tournament-panel: #131f36;
  --tournament-elevated: #172643;
  --tournament-line: #29456f;
  --tournament-line-strong: #3a5d90;
  --tournament-text: #e8f1ff;
  --tournament-soft: #a9bddb;
  --tournament-accent: #2f6df6;
  --tournament-accent-alt: #4da3ff;
  --tournament-success: #19c37d;
  --tournament-warning: #f5b942;
  --tournament-danger: #ef5a67;
  color: var(--tournament-text);
}
.tournament-op__switch img { display: block; width: 20px; height: 20px; object-fit: contain; }
.tournament-op__toolbar,
.tournament-op__panel,
.tournament-op__score-guide,
.tournament-op__incoming-card,
.tournament-op__exceptional-roster,
.tournament-op__group,
.tournament-op__parking,
.tournament-op__layout-export-audit {
  border-color: var(--tournament-line);
  background: var(--tournament-panel);
}
.tournament-op__toolbar { padding: var(--sp-3); border: 1px solid var(--tournament-line); border-radius: var(--r-sm); }
.tournament-op__stage,
.tournament-op__intro,
.tournament-op__hint,
.tournament-op__layout-export-audit p,
.tournament-op__history ul { color: var(--tournament-soft); }
.tournament-op__score-guide { border-inline-start-color: var(--tournament-accent-alt); }
.tournament-op__score-guide > h4 { color: var(--tournament-accent-alt); }
.tournament-op__step { border-color: var(--tournament-line); background: var(--tournament-panel); color: var(--tournament-soft); }
.tournament-op__step--done { border-color: var(--tournament-success); color: var(--tournament-success); }
.tournament-op__step--active { border-color: var(--tournament-accent-alt); background: #172643; color: var(--tournament-text); }
.tournament-op .tt-auth__button {
  border-color: var(--tournament-line-strong); background: #172643; color: var(--tournament-text);
  border-radius: .5rem;
}
.tournament-op .tt-auth__button:hover:not(:disabled) { border-color: var(--tournament-accent-alt); background: #20375d; }
.tournament-op .tt-auth__button--primary,
.tournament-op__checkpoint .tt-auth__button { border-color: var(--tournament-success); background: #13503c; color: #e8f1ff; }
.tournament-op .tt-auth__button:focus-visible { outline-color: var(--tournament-accent-alt); }
.tournament-op input[type="text"], .tournament-op input[type="search"], .tournament-op input[type="number"],
.tournament-op input[type="date"], .tournament-op input:not([type]), .tournament-op select, .tournament-op textarea {
  border-color: var(--tournament-line-strong); background: var(--tournament-elevated); color: var(--tournament-text);
}
.tournament-op__station, .tournament-op__seat, .tournament-op__parked-player { border-color: var(--tournament-line); background: var(--tournament-elevated); }
.tournament-op__station h5 { color: var(--tournament-accent-alt); }
@media (max-width: 40rem), (hover: none) and (pointer: coarse) {
  .tournament-op__status-board { display: none; }
  .tournament-op__roster-rows--mobile { display: grid; }
  /* Step 2 on a phone: two Switch boxes and the A/W/X toggle leave no room
     beside them, so the name and rank take the first line on their own and
     the controls the second; the SP score sits under the name. */
  .tournament-op__roster-mobile-row .tournament-op__participant-card--row {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: var(--sp-1);
  }
  .tournament-op__roster-mobile-row .tournament-op__participant-identity { display: contents; }
  .tournament-op__roster-mobile-row .tournament-op__participant-name-row { grid-column: 1; grid-row: 1; align-self: end; }
  .tournament-op__roster-mobile-row .tournament-op__participant-identity small { grid-column: 1; grid-row: 2; align-self: center; }
  .tournament-op__roster-mobile-row .tournament-op__participant-name-row strong { min-width: 0; flex: 1 1 auto; }
  .tournament-op__roster-mobile-row .tournament-op__attendance-toggle { grid-column: 2; grid-row: 1; justify-self: end; }
  .tournament-op__roster-mobile-row .tournament-op__participant-actions { grid-column: 2; grid-row: 2; justify-content: flex-end; }
  .tournament-op__attendance-board {
    grid-template-columns: 1fr;
    min-height: 16.25rem;
    max-height: calc(100dvh - 13.75rem);
    overflow-y: auto;
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    overscroll-behavior: contain;
  }
  .tournament-op__attendance-lane { min-height: 0; max-height: none; overflow: visible; }
  .tournament-op__drop-hint, .tournament-op__drag-handle { display: none; }
  .tournament-op__participant-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--sp-2) var(--sp-3); }
  .tournament-op__participant-header { grid-column: 1 / -1; }
  .tournament-op__attendance-toggle { min-width: 8.5rem; }
  .tournament-op__participant-actions { justify-content: flex-end; }
  .tournament-op__roster-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tournament-op__roster-count { min-width: 0; padding-inline: var(--sp-1); }
  .tournament-op__panel { padding: var(--sp-3); }
  .tournament-op__search, .tournament-op__move, .tournament-op__guest-form, .tournament-op__incident-form { grid-template-columns: 1fr; }
  .tournament-op__table { overflow: visible; gap: var(--sp-3); }
  .tournament-op__row--header { display: none; }
  .tournament-op__row:not(.tournament-op__row--header) {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
  }
  .tournament-op__cell-name {
    grid-column: 1 / 3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
  }
  .tournament-op__cell-seed { grid-column: 3; color: var(--text-muted); }
  .tournament-op__attendance { grid-column: 1 / -1; width: 100%; }
  .tournament-op__switch { display: flex; align-items: center; gap: var(--sp-2); }
  .tournament-op__remove { justify-self: end; }
  .tournaments__standing { grid-template-columns: 2rem 1fr; }
  .tournaments__detail { grid-column: 2; }
}

/* Manager parity: score entry (Steps 5/9) and the cumulative image/export
   checkpoints (Steps 4/6/8/10). These deliberately use the active Manager's
   dense navy race-night surface rather than the generic account cards. */
.tournament-score-step { display: grid; gap: 12px; }
.tournament-score-step__phase {
  width: fit-content; margin: 0 auto; padding: 6px 16px; border: 1px solid #3a5d90;
  border-radius: 999px; background: #172643; color: #72d7ff; font-size: .82rem; font-weight: 900;
}
.tournament-score-step__details {
  border: 1px solid #29456f; border-radius: 9px; background: #131f36; overflow: hidden;
}
.tournament-score-step__details > summary { padding: 11px 12px; cursor: pointer; font-weight: 850; }
/* A grid column without an explicit track takes the min-content width of its
   widest child, and a <select> is as wide as its longest option: at 320 px the
   Excel fold was 546 px wide and the fold (overflow-x: hidden) clipped the
   right half of every block. The column may shrink; the selects follow. */
.tournament-score-step__details-body {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 12px 12px;
}
.tournament-score-step__details-body select { max-width: 100%; }
.tournament-score-step__tie-modes,
/* The one line above the group blocks: import every reviewed group at once. */
.tournament-score-step__excel-all {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04);
  /* A grid item is as wide as its widest word unless it is told otherwise;
     at 320 px this line was 546 px and the fold clipped half the button. */
  min-width: 0; max-width: 100%;
}
.tournament-score-step__excel-all > button { white-space: normal; max-width: 100%; }
.tournament-score-step__excel-all > p { margin: 0; flex: 1 1 220px; min-width: 0; }
.tournament-score-step__excel-preview { display: grid; gap: 8px; }
.tournament-score-step__tie-card,
.tournament-score-step__excel-group {
  display: grid; gap: 7px; padding: 10px; border: 1px solid #3a5d90; border-radius: 8px; background: #172643;
}
.tournament-score-step__tie-card.is-resolved { border-color: #19c37d; }
.tournament-score-step__group {
  display: grid; gap: 10px; padding: 10px; border: 1px solid #29456f; border-radius: 10px;
  background: #131f36; box-shadow: inset 3px 0 #2f6df6;
}
.tournament-score-step__group-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tournament-score-step__group-header h4 { margin: 0; color: #e8f1ff; }
.tournament-score-step__group-header span {
  padding: 2px 7px; border: 1px solid #3a5d90; border-radius: 999px; color: #a9bddb; font-size: 11px;
}
.tournament-score-step__errors { display: flex; align-items: center; gap: 8px; color: #a9bddb; font-size: .82rem; }
.tournament-score-step__errors select { min-height: 34px; padding-block: 4px; }
.tournament-score-step__rows { display: grid; gap: 5px; }
.tournament-score-step__row {
  display: grid; grid-template-columns: 2rem minmax(8rem, 1fr) minmax(8rem, auto) 4rem;
  align-items: center; gap: 7px; min-height: 42px; padding: 5px 7px; border: 1px solid #29456f;
  border-radius: 7px; background: #172643;
}
.tournament-score-step__rank { color: #72d7ff; font-weight: 900; font-variant-numeric: tabular-nums; }
.tournament-score-step__parts { display: flex; gap: 5px; justify-content: flex-end; }
.tournament-score-step__parts input { width: 4.2rem; min-height: 34px !important; padding: 4px 6px !important; text-align: center; }
.tournament-score-step__row > strong:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tournament-score-step__supplied { margin: 0; color: #19c37d; font-size: .82rem; }
.tournament-score-step__checkpoint {
  position: sticky; bottom: 8px; z-index: 8; display: grid; gap: 5px; padding: 10px;
  border: 1px solid #19c37d; border-radius: 10px; background: rgb(10 28 32 / 96%); box-shadow: 0 10px 28px rgb(0 0 0 / 38%);
}
.tournament-score-step__checkpoint .tt-auth__button { width: 100%; border-color: #19c37d; background: #13503c; }

/* min-width:0 is what makes the overflow-x actually engage: without it the
   flex row keeps its intrinsic width and widens the whole document, which
   the Step 10 probe caught at 360px once a finalized night showed the four
   export tabs (2026-09-15). */
.tournament-export-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin;
  min-width: 0; max-width: 100%;
}
.tournament-export-tabs .tt-auth__button { flex: 0 0 auto; min-height: 36px; padding: 6px 10px; font-size: .78rem; }
.tournament-export-tabs .tournament-export-tabs__active { border-color: #72d7ff; background: #204b7b; color: #fff; }
.tournament-export-preview {
  overflow: hidden; border: 1px solid #29456f; border-radius: 10px; background: #0e192c; color: #e8f1ff;
}
.tournament-export-preview > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid #29456f; background: linear-gradient(90deg, #19345f, #172643);
}
.tournament-export-preview > header h4,
.tournament-export-preview > header p { margin: 0; }
.tournament-export-preview > header p { color: #72d7ff; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.tournament-export-preview__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 8px; padding: 9px; }
.tournament-export-preview__group { padding: 9px; border: 1px solid #29456f; border-radius: 8px; background: #172643; }
.tournament-export-preview__group h5 { margin: 0 0 8px; color: #72d7ff; font-size: .94rem; }
.tournament-export-preview__station { display: grid; gap: 2px; padding: 6px 0; border-top: 1px solid rgb(58 93 144 / 60%); font-size: .78rem; }
.tournament-export-preview__station strong { display: flex; align-items: center; gap: 6px; }
.tournament-export-preview__station strong img { width: 18px; height: 18px; object-fit: contain; }
.tournament-export-preview__station span { color: #d6e1f1; }
.tournament-export-preview__warning { color: #ffd166; }
.tournament-export-preview__standings { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.tournament-export-preview__standings li {
  display: grid; grid-template-columns: 2rem 1fr auto; gap: 6px; padding: 5px 6px; border-radius: 5px; background: #131f36; font-size: .8rem;
}
.tournament-export-preview__standings li strong { color: #72d7ff; }
.tournament-export-preview__standings li > span { display: grid; gap: 1px; }
.tournament-export-preview__standings li small { color: #a9bddb; font-size: .68rem; }
.tournament-export-preview__standings li b { color: #19c37d; }
/* How far the scores are, before the groups themselves. */
.tournament-score-step__progress { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin: 0 0 var(--sp-2); }
.tournament-score-step__group {
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-strong);
  color: var(--text-muted); font-size: .8rem; font-weight: 700;
}
.tournament-score-step__group--scored { border-color: var(--accent); color: var(--text); }

/* Where the night stands, in the Director's own ten steps. Quiet on purpose:
   this is context for the lines above it, not another thing shouting. */
.tournament-progress { display: grid; gap: 6px; margin: var(--sp-2) 0 0; }
.tournament-progress__head { margin: 0; font-size: .85rem; color: var(--text-muted); }
.tournament-progress__head strong { color: var(--text); }
.tournament-progress__track {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none;
}
.tournament-progress__step {
  display: grid; place-items: center; min-width: 1.55rem; height: 1.55rem;
  border-radius: 999px; border: 1px solid var(--border-strong);
  color: var(--text-muted); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tournament-progress__step--done { border-color: var(--good); color: var(--good); }
.tournament-progress__step--current {
  border-color: var(--accent); background: var(--accent); color: var(--accent-ink);
}
.tournament-progress__number { line-height: 1; }
.tournament-progress__groups {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin: 0;
  font-size: .82rem; color: var(--text-muted);
}
.tournament-progress__groups strong { color: var(--text); }
.tournament-progress__group {
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-strong);
  font-size: .78rem; font-weight: 700;
}
.tournament-progress__group--scored { border-color: var(--accent); color: var(--text); }

/* Step 10 hands over to the writing: its own page, its own kind of work. */
.tournament-op__report-link { display: grid; gap: var(--sp-1); justify-items: start; }

/* Step 10 as a checklist: four numbered parts, each with a status and, under
   every button, one line saying what pressing it does. */
.tournament-op__checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); counter-reset: step-ten; }
.tournament-op__checklist-item {
  counter-increment: step-ten; display: grid; gap: var(--sp-2); min-width: 0;
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
}
.tournament-op__checklist-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.tournament-op__checklist-head h4 { margin: 0; }
.tournament-op__checklist-head h4::before {
  content: counter(step-ten); display: inline-grid; place-items: center; inline-size: 1.6em; block-size: 1.6em;
  margin-inline-end: var(--sp-2); border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .85em;
}
.tournament-op__checklist-status {
  padding: 1px 10px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: .8rem; font-weight: 700; color: var(--text-muted);
}
.tournament-op__checklist-status--done { border-color: var(--accent); color: var(--text); }
.tournament-op__checklist-status--blocked { border-style: dashed; }
.tournament-op__caption { margin: 0; font-size: .85rem; max-width: 60ch; }
.tournament-op__finalize { display: grid; gap: var(--sp-2); justify-items: start; }
/* A finalized night prints its result-set id, one unbreakable token that
   made the whole page 24px wider than a 360px phone; and "Afronding
   terugdraaien" did not wrap either (2026-09-15). */
.tournament-op__finalize > p, .tournament-op__finalize .tournament-op__caption {
  overflow-wrap: anywhere; max-width: 100%;
}
.tournament-op__finalize .tt-auth__button { max-width: 100%; white-space: normal; }
.tournament-op__finalize .tournament-op__preview { justify-self: stretch; }
.tournament-op__readiness { margin: 0; padding-left: 0; list-style: none; display: grid; gap: var(--sp-1); }
/* The standing prints its own placement; no second number from the list. */
.tournament-op__step-ten .tournament-op__standings { list-style: none; padding-left: 0; }
/* The character beside the name in the Step 5/9 standing, the size of a line. */
.tournament-op__standing-character {
  width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: 6px;
  border-radius: 5px; background: rgba(255, 255, 255, 0.06);
}
.tournament-op__readiness--complete { color: var(--text); }
.tournament-op__readiness--incomplete { color: var(--warn); }
.tournament-op__edition--missing { border-color: var(--warn); color: var(--warn); }
/* One line on screen, the long version one click away (owner: too much text). */
/* The finalize block is a grid with justify-items:start, so a <details>
   would be only as wide as its summary and the paragraph inside would
   push the document wider (caught at 360px, 2026-09-15). */
.tournament-op__detail { margin: 2px 0 8px; justify-self: stretch; min-width: 0; max-width: 100%; }
.tournament-op__detail > summary {
  cursor: pointer; font-size: .82rem; font-weight: 600; list-style: none;
  opacity: .75; padding: 2px 0; width: fit-content;
}
.tournament-op__detail > summary::-webkit-details-marker { display: none; }
.tournament-op__detail > summary::before { content: "\25b8"; margin-right: 5px; font-size: .7em; }
.tournament-op__detail[open] > summary::before { content: "\25be"; }
.tournament-op__detail > summary:hover { opacity: 1; }
.tournament-op__detail > *:not(summary) { margin-top: 4px; max-width: 60ch; }
.tournament-op__text-export { display: grid; gap: var(--sp-2); }
.tournament-op__grants { display: grid; gap: var(--sp-2); }
.tournament-op__grants h5 { margin: 0; }
.tournament-op__grants-list { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }
.tournament-op__grants-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tournament-op__grants-form select { min-width: 0; max-width: 100%; }

/* The Director's report editor: the boxes on the left of what they produce. */
.tournament-report-edit { display: grid; gap: var(--sp-4); }
.tournament-report-edit__head { display: grid; gap: var(--sp-1); }
.tournament-report-edit__head h2 { margin: 0; }
.tournament-report-edit__status { margin: 0; color: var(--text-muted); min-height: 1.2em; }
.tournament-report-edit__state { margin: 0; font-weight: 700; }
.tournament-report-edit__form { display: grid; gap: var(--sp-3); }
.tournament-report-edit__form h3 { margin: var(--sp-2) 0 0; font-size: 1rem; }
.tournament-report-edit__field { display: grid; gap: 4px; }
.tournament-report-edit__label { font-weight: 700; }
.tournament-report-edit__hint { color: var(--text-muted); font-size: .84rem; }
.tournament-report-edit__title,
.tournament-report-edit__area {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-1); color: var(--text); font: inherit; resize: vertical;
}
.tournament-report-edit__grid {
  display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.tournament-report-edit__flags { display: grid; gap: 6px; }
.tournament-report-edit__flag { display: flex; align-items: center; gap: 8px; }
.tournament-report-edit__upload { display: none; }
.tournament-report-edit__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tournament-report-edit__wordpress summary { cursor: pointer; color: var(--text-muted); }
.tournament-report-edit__preview-title { margin: 0; }
.tournament-report-edit__preview { border: 1px dashed var(--border); border-radius: 12px; padding: 2px; }

/* Export and share, folded away: the operator opens it when they need it. */
.tournament-export-fold { margin-top: var(--sp-2); }
.tournament-export-fold > summary { cursor: pointer; padding: var(--sp-2) 0; list-style-position: outside; }
.tournament-export-fold__row { display: grid; gap: 2px; }
.tournament-export-fold__row strong { font-size: .95rem; }
.tournament-export-fold[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: var(--sp-2); }
.tournament-export-controls,
.tournament-export-excel { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.tournament-export-controls .tt-auth__button,
.tournament-export-excel .tt-auth__button { min-height: 40px; }
.tournament-export-controls .tournament-export-controls__whatsapp { border-color: #25d366; background: #167c41; }
.tournament-op__layout-export-audit h5 { margin: 12px 0 4px; color: #72d7ff; }
.tournament-op__layout-export-audit ol { margin: 6px 0 0; padding-left: 1.25rem; }
.tournament-op__results-export > .tournament-op__checkpoint { margin-top: 4px; }

@media (max-width: 40rem), (hover: none) and (pointer: coarse) {
  .tournament-score-step__row { grid-template-columns: 2rem minmax(0, 1fr) 3.5rem; }
  .tournament-score-step__parts { grid-column: 2 / -1; justify-content: flex-start; }
  .tournament-score-step__parts input { flex: 1; width: 0; }
  .tournament-export-preview > header { display: grid; }
  .tournament-export-preview__grid { grid-template-columns: 1fr; padding: 7px; }
  .tournament-export-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .tournament-export-controls__whatsapp { grid-column: 1 / -1; }
  .tournament-export-excel { display: grid; }
  .tournament-export-excel .tt-auth__button { width: 100%; }
}

.tournament-report { display: grid; gap: var(--sp-5); }
.tournament-report__editor, .tournament-report__notes { display: grid; gap: var(--sp-3); }
.tournament-report__editor > textarea { min-height: 8rem; }
.tournament-report__notes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.tournament-report__notes label { display: grid; gap: var(--sp-1); font-weight: 700; }
.tournament-report__notes textarea { min-height: 6rem; }
.tournament-report__controls { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tournament-report__preview { padding: var(--sp-5); background: var(--surface-1); border: 1px solid var(--border); overflow-x: auto; }
.tournament-report__preview table { width: 100%; border-collapse: collapse; }
.tournament-report__preview th, .tournament-report__preview td { padding: var(--sp-2); border-bottom: 1px solid var(--border); text-align: left; }
.tournament-report__preview svg { display: block; width: min(100%, 42rem); height: auto; margin-block: var(--sp-3); }
@media (max-width: 40rem) { .tournament-report__preview { padding: var(--sp-3); } }

/* Apps / downloads */
.app-downloads { display: grid; gap: var(--sp-4); max-width: 66rem; }
.app-downloads > [role="status"] {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgb(33 150 243 / 8%);
  color: var(--text-muted);
}
.app-download {
  position: relative; overflow: hidden; padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--surface-1), rgb(23 25 31 / 96%)); display: grid; gap: var(--sp-4);
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 16%);
}
.app-download::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 0.3rem; background: #42a5f5;
}
.app-download--android::before { background: #3ddc84; }
.app-download__header { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.app-download__identity { min-width: 0; }
.app-download h3 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.75rem); }
.app-download__platform,
.app-download__product { margin: 0; font-weight: 900; letter-spacing: 0.1em; }
.app-download__platform { margin-bottom: var(--sp-1); color: #90caf9; font-size: 0.72rem; }
.app-download--android .app-download__platform { color: #6de9a2; }
.app-download__product { margin-top: var(--sp-1); color: var(--text-muted); font-size: 0.68rem; }
.app-download__meta { color: var(--text-muted); margin: 0; }
.app-download__platform-mark {
  flex: 0 0 auto; width: 4rem; height: 4rem; border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 1rem; background: rgb(255 255 255 / 5%); display: grid; place-items: center;
}
.app-download__platform-mark--windows { place-content: center; align-self: center; }
.app-download__platform-mark--windows { grid-template-columns: repeat(2, 0.9rem); grid-template-rows: repeat(2, 0.9rem); gap: 0.16rem; }
.app-download__platform-mark--windows > span { width: 0.9rem; height: 0.9rem; background: #42a5f5; }
.app-download__platform-mark--android { position: relative; display: block; background: rgb(61 220 132 / 8%); }
.app-download__android-head,
.app-download__android-body { position: absolute; left: 50%; transform: translateX(-50%); background: #3ddc84; }
.app-download__android-head { top: 1rem; width: 2rem; height: 1rem; border-radius: 1rem 1rem 0.15rem 0.15rem; }
.app-download__android-head::before,
.app-download__android-head::after { content: ""; position: absolute; top: -0.42rem; width: 0.12rem; height: 0.65rem; border-radius: 999px; background: #3ddc84; }
.app-download__android-head::before { left: 0.38rem; transform: rotate(-28deg); }
.app-download__android-head::after { right: 0.38rem; transform: rotate(28deg); }
.app-download__android-body { top: 2.13rem; width: 2rem; height: 1rem; border-radius: 0.15rem 0.15rem 0.42rem 0.42rem; }
.app-download__action { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.app-download__button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  min-width: min(100%, 20rem); min-height: 3.25rem; padding: var(--sp-3) var(--sp-4);
  border: 1px solid #64b5f6; border-radius: var(--r-md); background: linear-gradient(135deg, #1976d2, #42a5f5);
  color: #fff; font-weight: 900; text-decoration: none; box-shadow: 0 0.55rem 1.2rem rgb(25 118 210 / 22%);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.app-download--android .app-download__button { border-color: #6de9a2; background: linear-gradient(135deg, #188f55, #35c878); color: #07150d; box-shadow: 0 0.55rem 1.2rem rgb(61 220 132 / 18%); }
.app-download__button:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 0.8rem 1.5rem rgb(0 0 0 / 24%); }
.app-download__button:focus-visible { outline: 3px solid #ffa726; outline-offset: 3px; }
.app-download__button-kind { padding-left: var(--sp-3); border-left: 1px solid currentColor; font-size: 0.72rem; letter-spacing: 0.08em; white-space: nowrap; }
.app-download__device { color: var(--text-muted); font-size: 0.86rem; }
.app-download__section { display: grid; gap: var(--sp-1); }
.app-download__section summary { width: fit-content; color: var(--text-muted); font-size: .9rem; font-weight: 800; cursor: pointer; }
.app-download__section ul { margin: 0; padding-left: var(--sp-5); }
.app-download__intro { gap: var(--sp-2); }
.app-download__intro summary { color: var(--text); font-size: 1rem; }
.app-download__intro-summary { margin: 0; line-height: 1.5; }
.app-download__flow {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-1) var(--sp-3);
  margin: 0; padding: var(--sp-3); border-radius: var(--r-md, 0.75rem);
  background: rgb(255 255 255 / 4%); line-height: 1.45;
}
.app-download__flow dt { font-weight: 800; color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 0.15rem; }
.app-download__flow dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.app-download__checksum { font-family: ui-monospace, monospace; font-size: 0.8rem; color: var(--text-muted); overflow-wrap: anywhere; margin: 0; }
@media (max-width: 36rem) {
  .app-download__header { align-items: flex-start; gap: var(--sp-3); }
  .app-download__platform-mark { width: 3.25rem; height: 3.25rem; transform: scale(0.86); transform-origin: top left; margin-right: -0.45rem; margin-bottom: -0.45rem; }
  .app-download__button { width: 100%; min-width: 0; }
  .app-download__device { width: 100%; }
  .app-download__flow { grid-template-columns: minmax(0, 1fr); }
  .app-download__flow dd { margin-bottom: var(--sp-1); }
}

/* Administration -> Rating */
.rating-admin { display: grid; gap: var(--sp-3); }
.rating-admin__hint { color: var(--text-muted); margin: 0; }
.rating-admin__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.rating-admin__item {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1);
}
.rating-admin__title { font-weight: 700; }
.rating-admin__meta { color: var(--text-muted); font-size: 0.85rem; grid-column: 1 / -1; }
@media (max-width: 40rem) { .rating-admin__item { grid-template-columns: 1fr; } }

/* Touch targets: inline row links and small controls get a comfortable hit
   area on coarse pointers without changing the desktop rhythm. */
@media (pointer: coarse) {
  .tt-auth__link, .activity-list__track, .compare__track, .tournaments__player, .tournaments__name {
    display: inline-block; padding-block: var(--sp-2); margin-block: calc(-1 * var(--sp-2));
  }
  .reactions__toggle, .reactions__pill, .track-board__mode, .subnav__tab { min-height: 2.75rem; }
  /* Height and alignment only. Re-declaring `display` here used to resurrect
     every link the phone header deliberately hides - the passive Web sync
     indicator reappeared on real touch devices and took 44 px from the row
     the brand and the account controls have to share. */
  .site-nav__link { min-height: 2.75rem; align-items: center; }
  /* A square control needs both axes; the icons were 36 px wide. */
  .site-nav__icon { min-width: 2.75rem; }
  .site-nav__language { height: 2.75rem; }
  .site-nav__language-option { min-width: 2.75rem; }
}

/* Administration -> Aliases */
.alias-admin { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.alias-admin__search { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); }
.alias-admin__results, .alias-admin__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.alias-admin__results { flex-direction: row; display: flex; flex-wrap: wrap; }
.alias-admin__item { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.alias-admin__form { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; max-width: 40rem; }
.alias-admin input, .alias-admin select {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font: inherit; min-height: 2.5rem;
}
.notification-settings__preference {
  display: flex;
  gap: .65rem;
  align-items: center;
  margin: .65rem 0;
}

.notification-settings__preference input {
  inline-size: 1.2rem;
  block-size: 1.2rem;
}

.notification-settings__push {
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line, #334155);
}

.notification-settings__push ol {
  padding-inline-start: 1.4rem;
  line-height: 1.65;
}

.activity__action {
  display: grid;
  gap: .2rem;
  margin-block: .65rem;
  padding: .7rem .85rem;
  border-inline-start: 4px solid #ef4444;
  border-radius: .5rem;
  background: color-mix(in srgb, #ef4444 14%, transparent);
}

.activity__action strong {
  color: #fca5a5;
  letter-spacing: .08em;
  font-size: .72rem;
}

/* Source Manager Step 0: a single isolated task, with no operation board
   mounted behind it. */
.tournament-director-step {
  min-height: min(700px, calc(100vh - 210px));
  padding: 0 0 28px;
  color: #f5f7ff;
  background: #101f3a;
  border: 2px solid #294e7d;
  border-radius: 20px;
  overflow: hidden;
}
.tournament-director-step__phase {
  width: fit-content;
  margin: 12px auto 24px;
  padding: 8px 24px;
  color: #ffbd00;
  background: #2e2d25;
  border: 2px solid #9b7600;
  border-radius: 999px;
  font-size: clamp(1rem, 4vw, 1.35rem);
  font-weight: 900;
}
.tournament-director-step > h3 {
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid #b88b00;
  font-size: clamp(1.55rem, 6vw, 2rem);
}
.tournament-director-step__intro {
  margin: 0;
  padding: 34px 16px 20px;
  color: #bcc7da;
  background: #34393e;
  font-size: 1.1rem;
  line-height: 1.55;
}
.tournament-director-step__card {
  margin: 0 12px;
  padding: 18px;
  background: #19345f;
  border: 1px solid #3d70b0;
  border-radius: 14px;
}
.tournament-director-step__card h3 { margin: 0 0 14px; font-size: 1.45rem; }
.tournament-director-step__label { display: block; margin-bottom: 8px; font-weight: 800; }
.tournament-director-step select,
.tournament-director-step input {
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  padding: 0 20px;
  color: #fff;
  background: #152c4f;
  border: 1px solid #477bb9;
  border-radius: 14px;
  font: inherit;
  font-size: 1.1rem;
}
.tournament-director-step input { margin-top: 10px; }
.tournament-director-step input[type="time"] {
  box-sizing: border-box; width: 100%; min-height: 64px; padding: 0 20px; color: #fff;
  background: #152c4f; border: 1px solid #477bb9; border-radius: 14px; font: inherit; font-size: 1.1rem;
}
.tournament-director-step__hint {
  min-height: 48px;
  margin: 20px 0;
  color: #b9c6da;
  line-height: 1.45;
}
.tournament-director-step .tt-auth__button {
  width: 100%;
  min-height: 64px;
  font-size: 1.15rem;
  font-weight: 900;
}
.tournament-director-step .tournament-director-step__pin {
  width: auto;
  min-height: 54px;
  margin-top: 14px;
  background: #27629a;
}
.tournament-director-step--start { display: grid; gap: 12px; background: #24192c; border-color: #754368; }
.tournament-director-step--start > h3 { border-bottom-color: #d263a6; }
.tournament-director-step--start .tournament-director-step__intro { background: #4b354a; }
.tournament-director-step--start .tournament-director-step__card { background: #3f2743; border-color: #8d4e7d; }
.tournament-director-step--start > .tournament-director-step__hint,
.tournament-director-step--start > .tt-auth__button { margin-inline: 12px; }
@media (min-width: 700px) {
  .tournament-director-step__card { margin: 0 24px; }
}

/* ---------------------------------------------------------------------------
   Welcome — the first minutes of a new account.

   One screen, one job. A narrow measure so the eye never has to hunt, a
   single accented action per step, and every optional field visibly optional.
   The old onboarding was the Settings page with a banner: eleven controls,
   eight of them identical grey Save buttons.
   --------------------------------------------------------------------------- */

.welcome {
  box-sizing: border-box;
  width: 100%;
  max-width: 34rem;
  margin: var(--sp-8) auto var(--sp-16);
  padding-inline: var(--page-pad);
}

.welcome__stepper {
  margin: 0 0 var(--sp-3);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.welcome__stepper[hidden] { display: none; }

.welcome__heading {
  margin: 0 0 var(--sp-3);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.welcome__lede {
  margin: 0 0 var(--sp-6);
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.welcome__status {
  margin: 0 0 var(--sp-4);
  color: var(--accent);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.welcome__status:empty { display: none; }

.welcome__stage,
.welcome__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.welcome__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.welcome__body {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- fields ------------------------------------------------------------- */

.welcome__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.welcome__label {
  font-size: 1rem;
  font-weight: 700;
}

.welcome__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.welcome__row .welcome__control { flex: 1 1 auto; min-width: 0; }

.welcome__control {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  background: #17181d;
  font: inherit;
}

/* The one field that carries the whole step gets the weight to match. */
.welcome__control--name {
  min-height: 3.75rem;
  padding-inline: var(--sp-4);
  font-size: 1.375rem;
  font-weight: 700;
}

.welcome__control--handle { max-width: 14rem; }

.welcome__control:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.welcome__control[aria-invalid="true"] { border-color: #f28b82; }

.welcome__flag {
  width: 2rem;
  height: auto;
  border-radius: 3px;
}

.welcome__icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.welcome__flag[hidden],
.welcome__icon[hidden] { display: none; }

.welcome__hint {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.welcome__error {
  color: #f28b82;
  font-size: 0.875rem;
  line-height: 1.5;
}

.welcome__error:empty { display: none; }

/* The derived @handle, shown while typing. Its state is the whole feedback
   loop, so it carries colour rather than an icon. */
.welcome__handle {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.welcome__handle[data-state="idle"] { color: var(--text-muted); }
.welcome__handle[data-state="good"] { color: var(--good); font-weight: 700; }
.welcome__handle[data-state="bad"] { color: var(--warn); }

.welcome__handle-edit[hidden] { display: none; }

/* --- choices ------------------------------------------------------------ */

.welcome__choices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.welcome__choices > .welcome__label { margin-bottom: var(--sp-1); padding: 0; }

.welcome__choice {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  cursor: pointer;
}

.welcome__choice:has(input:checked) {
  border-color: var(--accent-soft);
  background: var(--surface-2);
}

/* The whole card is the target; the control is sized to be visible
   rather than to be aimed at. */
.welcome__choice input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; flex: none; }

.welcome__choice-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* --- actions ------------------------------------------------------------ */

.welcome__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* The first question offers two full-width answers, one under the other,
   so a thumb lands on one of them and never between them. */
.welcome__actions--stacked { flex-direction: column; align-items: stretch; }
.welcome__actions--stacked > .welcome__button { width: 100%; }

.welcome__button {
  min-height: 3.25rem;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid #71717a;
  border-radius: var(--r-sm);
  color: var(--text);
  background: #2b2b32;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.welcome__button--primary {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent);
}

.welcome__button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}

.welcome__button:focus-visible,
.welcome__link:focus-visible,
.welcome__result:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.welcome__button:disabled { opacity: 0.5; cursor: not-allowed; }

/* The alternate path is always reachable and never competes with the
   primary action. */
.welcome__link {
  align-self: flex-start;
  /* A comfortable target on a phone: the alternate path is a real
     choice, not a footnote. */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--sp-2) 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.welcome__link:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- find-yourself results ---------------------------------------------- */

.welcome__results {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.welcome__result {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  background: var(--surface-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.welcome__result:hover { border-color: var(--border-strong); background: var(--surface-2); }

.welcome__result-name { font-size: 1.0625rem; }

.welcome__result-detail {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.welcome__empty {
  padding: var(--sp-3) 0;
  color: var(--text-muted);
}

.welcome__confirm {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.welcome__confirm-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
}

/* ---------------------------------------------------------------------------
   Sections that referenced classes the stylesheet never defined.
   --------------------------------------------------------------------------- */

/* The two Player paths in Settings. `.player-claim__panel` was hidden and
   shown by script but never given a box. */
.player-claim__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.player-claim__panel[hidden] { display: none; }

/* Your other names. Ten class names, none of which existed in this file, so
   the section rendered as unstyled markup in the middle of Settings. */
.profile-aliases {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.profile-aliases h2 {
  margin: 0 0 var(--sp-2);
  font-size: 1.25rem;
  font-weight: 800;
}

.profile-aliases__explanation {
  margin: 0 0 var(--sp-4);
  max-width: 60ch;
  color: var(--text-muted);
  line-height: 1.55;
}

.profile-aliases__status { margin: 0 0 var(--sp-3); color: var(--accent); }
.profile-aliases__status:empty { display: none; }

.profile-aliases__players {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.profile-aliases__player h3 {
  margin: 0 0 var(--sp-2);
  font-size: 1rem;
  font-weight: 700;
}

.profile-aliases__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

.profile-aliases__list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.profile-aliases__text { font-weight: 700; }

.profile-aliases__kind {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.profile-aliases__empty {
  margin: 0 0 var(--sp-4);
  color: var(--text-muted);
}

.profile-aliases__add {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.profile-aliases__add input {
  flex: 1 1 14rem;
  min-height: 3rem;
  padding: var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  background: #17181d;
  font: inherit;
}

.profile-aliases__add input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* A link that failed, said out loud instead of silently. */
.tt-auth__notice {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  text-align: left;
}

.tt-auth__notice--warning { border-color: var(--warn); }
.tt-auth__notice p { margin: 0; color: var(--text-muted); line-height: 1.55; }

.tt-auth__form-status:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .welcome__result { transition: none; }
}

/* ---------------------------------------------------------------------------
   Time Trials timing tower (2026-08-31)

   This theme is applied by the route owner only to Home and information-led
   Time Trial / Player surfaces. Tournament routes deliberately do not receive
   `.page-shell--timing-tower`, preserving the production Step 0-10 language.
   --------------------------------------------------------------------------- */

.page-shell--timing-tower {
  --rc-asphalt: #0a0d11;
  --rc-panel: #10151b;
  --rc-panel-raised: #141a22;
  --rc-panel-active: #0d1b20;
  --rc-seam: #222a34;
  --rc-seam-strong: #394553;
  --rc-copy: #edf2f7;
  --rc-muted: #8793a0;
  --rc-cyan: #39dfd0;
  --rc-cyan-soft: rgb(57 223 208 / 11%);
  /* The second neon, for a night that is coming. Cyan is "this is happening";
     yellow is "this is next". Gold (--rc-gold) is a medal colour and stays one. */
  --rc-yellow: #eaf24d;
  --rc-yellow-soft: rgb(234 242 77 / 11%);
  --rc-gold: #f2c14e;
  --rc-danger: #ff7165;
  --rc-success: #7fe8a0;
  --track-reference-wr: #b2bcc7;
  --track-reference-staff: #8b97a4;
  --rc-radius-sm: 4px;
  --rc-radius-md: 8px;
  --rc-time-font: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --bg: #0a0c10;
  --surface-1: #11151b;
  --surface-2: #151a21;
  --surface-you: #0d141c;
  --border: #1e242c;
  --border-strong: #343d49;
  --text: #eaeef3;
  --text-muted: #7b8794;
  --accent: #35d6c6;
  --accent-ink: #061513;
  --accent-soft: rgb(53 214 198 / 22%);
  --good: #7fe8a0;
  --warn: #ffb84d;
  --delta-fast: #2ecc71;
  --delta-slow: #ff5b4a;
  --coin: #c9a227;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(rgb(10 12 16 / 96%), rgb(10 12 16 / 98%)),
    var(--bg);
}

.site-photo-ready .page-shell--timing-tower {
  background:
    linear-gradient(rgb(10 12 16 / 96%), rgb(10 12 16 / 98%)),
    url("/assets/images/misc/site_background.jpg") center / cover fixed,
    var(--bg);
}

.page-shell--timing-tower,
.page-shell--timing-tower button,
.page-shell--timing-tower input,
.page-shell--timing-tower select {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.page-shell--timing-tower :is(
  .timing-summary__value,
  .home-focus__time,
  .home-focus__gap,
  .activity-list__facts,
  .activity-list__when,
  .track-board__rank,
  .track-board__time,
  .track-board__delta,
  .tt-standing__rank,
  .tt-standing__total,
  .tt-standing__delta,
  .records__value,
  .community__count
) {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums lining-nums;
}

.page-shell--timing-tower .tt-auth {
  padding-block: var(--sp-6) var(--sp-12);
}

.page-shell--timing-tower .tt-auth > h1 {
  max-width: 46rem;
  margin: 0;
  color: var(--text);
  font-size: clamp(1.65rem, 4vw, 2.4rem);
  font-weight: 780;
  letter-spacing: -0.025em;
  text-align: left;
}

.page-shell--timing-tower .tt-auth > .tt-auth__status {
  max-width: 46rem;
  min-height: 0;
  margin: var(--sp-1) 0 var(--sp-6);
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 560;
  text-align: left;
}

.page-shell--timing-tower .site-nav {
  border-bottom-color: var(--border);
  background: rgb(10 12 16 / 96%);
  backdrop-filter: blur(14px);
}

.page-shell--timing-tower .site-nav__inner {
  min-height: 3.25rem;
  padding-block: .35rem;
}

.page-shell--timing-tower .site-nav__brand-icon {
  width: 2rem;
  height: 2rem;
  border-radius: .35rem;
}

.page-shell--timing-tower .site-nav__brand-name {
  letter-spacing: .075em;
}

.page-shell--timing-tower .site-nav__platform {
  border-color: var(--border-strong);
  border-radius: .25rem;
  background: var(--surface-2);
  color: var(--text-muted);
}

.page-shell--timing-tower .site-nav__link {
  position: relative;
  border-radius: .3rem;
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 650;
}

.page-shell--timing-tower .site-nav__link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.page-shell--timing-tower .site-nav__link--active {
  background: transparent;
  color: var(--text);
}

.page-shell--timing-tower .site-nav__link--active::before {
  content: "";
  position: absolute;
  inset: auto .45rem -.37rem;
  height: 2px;
  background: var(--accent);
}

.page-shell--timing-tower .site-nav__identity,
.page-shell--timing-tower .site-nav__apps {
  border-radius: .35rem;
  background: var(--surface-1);
}

.page-shell--timing-tower .site-nav__apps {
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.page-shell--timing-tower :is(
  .tt-auth__button,
  .signed-out-home__action,
  .home-hero__submit,
  .home-focus__mode,
  .activity__filter,
  .track-board__mode,
  .tt-standing__toggle-button,
  .tt-standing__tab
) {
  border-radius: .35rem;
}

.page-shell--timing-tower .tt-auth__button--primary,
.page-shell--timing-tower .home-hero__submit,
.page-shell--timing-tower .signed-out-home__action--accent {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}

.page-shell--timing-tower :is(a, button, input, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* A fixed-cell timing strip is shared by public and personal Home. */
.timing-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--border);
  background: var(--surface-1);
}

.timing-summary__cell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(2.2em, auto) 3px;
  gap: .35rem;
  min-width: 0;
  padding: .85rem 1rem;
  border-right: 1px solid var(--border);
}

a.timing-summary__cell {
  color: inherit;
  text-decoration: none;
}

a.timing-summary__cell::after {
  position: absolute;
  top: .75rem;
  right: .75rem;
  color: var(--text-muted);
  content: "→";
  font-size: .75rem;
  line-height: 1;
}

a.timing-summary__cell:hover {
  background: var(--surface-2);
}

a.timing-summary__cell:hover .timing-summary__label,
a.timing-summary__cell:hover::after {
  color: var(--accent);
}

.page-shell--timing-tower .tt-standing__active-track-filter {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--sp-3);
  padding: .7rem .8rem;
  border: 1px solid var(--accent);
  border-radius: var(--rc-radius-sm, .2rem);
  background: rgb(53 214 198 / 6%);
  scroll-margin-top: 4.5rem;
}

.page-shell--timing-tower .tt-standing__active-track-filter div {
  display: grid;
  gap: .18rem;
}

.page-shell--timing-tower .tt-standing__active-track-filter strong {
  color: var(--text);
  font-size: .78rem;
}

.page-shell--timing-tower .tt-standing__active-track-filter span {
  color: var(--text-muted);
  font-size: .68rem;
}

.page-shell--timing-tower .tt-standing__active-track-filter button {
  flex: none;
  min-height: 2rem;
  padding: .35rem .65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--rc-radius-sm, .2rem);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
}

.page-shell--timing-tower .tt-standing__active-track-filter button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.page-shell--ranking-pilot .tt-standing__track-rank {
  display: inline-flex;
  align-items: center;
  min-height: 1.15rem;
  padding: .05rem .3rem;
  border: 1px solid var(--accent);
  border-radius: var(--rc-radius-xs, .15rem);
  color: var(--accent);
  font-size: .58rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.page-shell--ranking-pilot .tt-standing__tracks--single {
  width: min(100%, 54rem);
  margin-right: auto;
  table-layout: fixed;
}

.page-shell--ranking-pilot .tt-standing__tracks--single :is(th, td):first-child {
  width: 52%;
}

@media (max-width: 40rem) {
  .page-shell--timing-tower .tt-standing__active-track-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .page-shell--timing-tower .tt-standing__active-track-filter button {
    width: 100%;
  }
}

.timing-summary__cell:last-child { border-right: 0; }

.timing-summary__value {
  color: var(--text);
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.timing-summary__label {
  align-self: start;
  /* "Basiscircuits" is one word and set the cell's minimum width. */
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.3;
  text-transform: uppercase;
}

.timing-summary__track {
  display: block;
  height: 3px;
  overflow: hidden;
  background: #252c35;
}

.timing-summary__bar {
  display: block;
  height: 100%;
  background: var(--text-muted);
}

.timing-summary__cell--slow .timing-summary__bar { background: var(--delta-slow); }
.timing-summary__cell--fast .timing-summary__bar { background: var(--good); }
.timing-summary__cell--accent .timing-summary__bar { background: var(--accent); }

/* Signed-out Home keeps the same timing rhythm instead of a separate
   marketing-card layout. The private owner branding image remains the only
   hero image; race imagery is reserved for a track itself. */
.page-shell--timing-tower .signed-out-home {
  gap: 0;
  border: 1px solid var(--border);
  background: var(--surface-1);
}

.page-shell--timing-tower .signed-out-home__hero {
  min-height: 12rem;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(110deg, rgb(17 21 27 / 100%) 45%, rgb(53 214 198 / 7%)),
    var(--surface-1);
}

.page-shell--timing-tower .signed-out-home__eyebrow {
  color: var(--accent);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .68rem;
  letter-spacing: .16em;
}

.page-shell--timing-tower .signed-out-home__hero h1 {
  max-width: 15ch;
  margin-top: .45rem;
  font-size: clamp(2rem, 6vw, 4.4rem);
  font-weight: 820;
  letter-spacing: -.055em;
  line-height: .9;
}

.page-shell--timing-tower .signed-out-home__intro {
  max-width: 62ch;
  color: var(--text-muted);
  font-size: .95rem;
}

.page-shell--timing-tower .signed-out-home__logo {
  width: clamp(4.5rem, 11vw, 7rem);
  height: clamp(4.5rem, 11vw, 7rem);
  border-radius: .6rem;
  filter: drop-shadow(0 12px 26px rgb(0 0 0 / 44%));
}

.page-shell--timing-tower .signed-out-home__actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
}

.page-shell--timing-tower .signed-out-home__action {
  min-height: 5rem;
  padding: .9rem 1rem;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.page-shell--timing-tower .signed-out-home__action:last-child { border-right: 0; }
.page-shell--timing-tower .signed-out-home__action--accent { background: var(--accent); }
.page-shell--timing-tower .signed-out-home__action:not(.signed-out-home__action--accent):hover {
  border-color: var(--border);
  background: var(--surface-2);
  transform: none;
}

.page-shell--timing-tower .signed-out-home__action span {
  color: var(--text-muted);
  font-size: .78rem;
}

.page-shell--timing-tower .signed-out-home__action--accent span {
  color: rgb(6 21 19 / 72%);
}

.page-shell--timing-tower .signed-out-home__signin {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 32rem);
  gap: var(--sp-8);
  align-items: center;
  margin: var(--sp-6) 0;
  padding: var(--sp-6);
  border-color: var(--border);
  border-radius: 0;
  background: var(--surface-1);
}

.page-shell--timing-tower .signed-out-home__signin .tt-auth__form {
  width: 100%;
  margin: 0;
  border-color: var(--border);
  border-radius: .35rem;
  background: var(--bg);
}

/* Signed-in Home: one timing console beside the latest community tower. */
.page-shell--timing-tower .home-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(20rem, .88fr);
  gap: var(--sp-6);
  align-items: start;
}

.page-shell--timing-tower .home-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  border-color: var(--border);
  border-radius: 0;
  background: var(--surface-1);
}

.page-shell--timing-tower .home-hero__left {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--sp-4);
}

.page-shell--timing-tower .home-hero__identity {
  min-width: min(100%, 12rem);
  margin-right: auto;
}

.page-shell--timing-tower .home-hero__avatar {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.page-shell--timing-tower .home-hero__welcome-prefix,
.page-shell--timing-tower .home-domain__label,
.page-shell--timing-tower .home-focus__title,
.page-shell--timing-tower .home-focus__label {
  color: var(--text-muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .64rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.page-shell--timing-tower .home-hero__welcome-name { font-size: 1.25rem; }

.page-shell--timing-tower .home-domain {
  min-width: 8rem;
  padding: 0 0 0 var(--sp-4);
  border-left: 1px solid var(--border);
}

.page-shell--timing-tower .home-domain + .home-domain {
  padding-top: 0;
  border-top: 0;
}

.page-shell--timing-tower .home-domain__value { font-size: .8rem; }
.page-shell--timing-tower .home-hero__tier { border: 0; border-radius: .25rem; font-size: .68rem; }
.page-shell--timing-tower .home-hero__actions { margin-left: auto; }
.page-shell--timing-tower .home-hero__submit { width: auto; min-width: 8.5rem; height: 2.65rem; }
.page-shell--timing-tower .home-hero__records { width: 100%; margin-left: auto; text-align: right; }

.page-shell--timing-tower .home-ladder { border-inline: 0; }

.page-shell--timing-tower .home-focus {
  gap: 0;
  padding: var(--sp-4);
}

.page-shell--timing-tower .home-focus__head {
  min-height: 2.5rem;
  margin-bottom: var(--sp-3);
}

.page-shell--timing-tower .home-focus__toggle {
  border-color: var(--border);
  border-radius: .35rem;
}

.page-shell--timing-tower .home-focus__mode {
  min-width: 4.4rem;
  height: 2rem;
  padding-inline: .7rem;
  font-size: .72rem;
}

.page-shell--timing-tower .home-focus__mode--active,
.page-shell--timing-tower .home-focus__mode--150.home-focus__mode--active,
.page-shell--timing-tower .home-focus__mode--200.home-focus__mode--active {
  background: var(--surface-you);
  color: var(--accent);
  box-shadow: inset 0 -2px var(--accent);
}

.page-shell--timing-tower .home-focus__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: .65rem;
  overflow: visible;
}

.page-shell--timing-tower .home-focus__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  gap: .45rem;
  min-width: 0;
  min-height: 0;
  padding: .75rem;
  border: 1px solid var(--rc-seam-strong, var(--border-strong));
  border-radius: var(--rc-radius-sm, .2rem);
  background: var(--rc-surface-1, var(--surface-1));
}

.page-shell--timing-tower .home-focus__card:last-child { border-bottom: 1px solid var(--rc-seam-strong, var(--border-strong)); }
.page-shell--timing-tower .home-focus__card:hover { background: var(--surface-2); }
.page-shell--timing-tower .home-focus__card--best { border-color: var(--rc-seam-strong, var(--border-strong)); }
.page-shell--timing-tower .home-focus__card--best::before { inset: 0 0 auto; width: auto; height: 2px; }

.page-shell--timing-tower .home-focus__label { margin: 0; }

.page-shell--timing-tower .home-focus__identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem .45rem;
  align-items: center;
  min-width: 0;
}

.page-shell--timing-tower .home-focus__thumb {
  position: relative;
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex: none;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
}

.page-shell--timing-tower .home-focus__art {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

.page-shell--timing-tower .home-focus__cup {
  position: absolute;
  top: .12rem;
  left: .12rem;
  width: .95rem;
  height: .95rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 80%));
}

.page-shell--timing-tower .track-origin {
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  height: 1rem;
  padding-inline: .22rem;
  border: 1px solid var(--border-strong);
  border-radius: .2rem;
  color: var(--text-muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .58rem;
  line-height: 1;
}

.page-shell--timing-tower .home-focus__track {
  min-width: 0;
  margin: 0;
  overflow: visible;
  color: var(--text);
  font-size: .78rem;
  font-weight: 680;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
}

.page-shell--timing-tower .home-focus__headline {
  margin: 0;
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: 560;
}

.page-shell--timing-tower .home-focus__gap {
  grid-column: 1;
  grid-row: auto;
  display: grid;
  grid-template-columns: minmax(3rem, 1fr) auto;
  gap: .5rem;
  align-items: center;
  margin: 0;
  font-size: .71rem;
  text-align: right;
}

.page-shell--timing-tower .home-focus__gap-track {
  display: flex;
  justify-content: flex-end;
  height: 4px;
  background: #252c35;
}

.page-shell--timing-tower .home-focus__gap-fill {
  display: block;
  height: 100%;
  background: var(--delta-slow);
}

.page-shell--timing-tower .home-focus__context { margin: 0; font-size: .68rem; }
.page-shell--timing-tower .home-focus__times { margin: .2rem 0 0; font-size: .68rem; }
.page-shell--timing-tower .home-focus__chips { min-height: 0; margin: auto 0 0; padding-top: .25rem; }
.page-shell--timing-tower .home-focus__chip,
.page-shell--timing-tower .home-focus .mastery-badge { border-radius: .2rem; font-size: .58rem; }

.page-shell--timing-tower .home-away,
.page-shell--timing-tower .home-away--quiet {
  margin: 0;
  padding: .8rem 1rem;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-1);
  color: var(--text-muted);
}

/* Activity becomes an L2 timing row. Track artwork is replaced by the real
   cup emblem; avatars, flags and loadout assets remain available in-row and
   in expanded details. */
.page-shell--timing-tower .activity {
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  background: var(--surface-1);
}

.page-shell--timing-tower .activity__header h2 {
  font-size: 1rem;
  font-weight: 720;
}

.page-shell--timing-tower .activity__filters { margin: var(--sp-3) 0; }
.page-shell--timing-tower .activity__filter { min-height: 2rem; padding-inline: .65rem; font-size: .7rem; }
.page-shell--timing-tower .activity__filter--active,
.page-shell--timing-tower .activity__filter[data-filter="150"].activity__filter--active,
.page-shell--timing-tower .activity__filter[data-filter="200"].activity__filter--active {
  border-color: var(--border-strong);
  background: var(--surface-you);
  color: var(--accent);
  box-shadow: inset 0 -2px var(--accent);
}

.page-shell--timing-tower .activity__sections,
.page-shell--timing-tower .activity-list { gap: 0; }

.page-shell--timing-tower .activity__group-heading {
  padding: .65rem 0 .35rem;
  color: var(--text-muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .62rem;
}

.page-shell--timing-tower .activity-list__row {
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: .65rem;
  min-height: 3.4rem;
  padding: .65rem 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.page-shell--timing-tower .activity-list__row:hover { background: var(--surface-2); }
.page-shell--timing-tower .activity-list__row--record { box-shadow: inset 2px 0 var(--good); }
.page-shell--timing-tower .activity-list__row--lost { box-shadow: inset 2px 0 var(--delta-slow); }
.page-shell--timing-tower .activity-list__row--won { box-shadow: inset 2px 0 var(--good); }

.page-shell--timing-tower .activity-list__thumb {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.35rem;
  margin-top: .1rem;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
}

.page-shell--timing-tower .activity-list__art { display: none; }
.page-shell--timing-tower .activity-list__cup { position: static; width: 1.1rem; height: 1.1rem; object-fit: contain; }
.page-shell--timing-tower .activity-list__headline { gap: .4rem; font-size: .76rem; }
.page-shell--timing-tower .activity__avatar { width: 1.15rem; height: 1.15rem; object-fit: contain; }
.page-shell--timing-tower .track-board__flag { width: .82rem; height: .62rem; object-fit: cover; }

.page-shell--timing-tower .activity-list__meta {
  grid-template-columns: 2rem 0 3.8rem;
  gap: .35rem;
  padding-left: .4rem;
}

.page-shell--timing-tower .activity__followed { overflow: hidden; width: 0; padding: 0; border: 0; }
.page-shell--timing-tower .activity-list__when { font-size: .64rem; }
.page-shell--timing-tower .activity-list__detail { margin-top: .15rem; font-size: .7rem; }
.page-shell--timing-tower .activity-list__facts strong { display: inline-block; min-width: min(5.3rem, 100%); color: var(--text); text-align: right; }
.page-shell--timing-tower .activity-list__story { min-height: 0; font-size: .66rem; }
.page-shell--timing-tower .activity__quick-details { margin-top: .3rem; }
.page-shell--timing-tower .activity__finish-banner { display: none; }

.page-shell--timing-tower .home-dashboard > :last-child .activity__sections {
  max-height: 56rem;
  padding-right: .2rem;
  overflow-y: auto;
  scrollbar-color: var(--border-strong) transparent;
}

/* Information routes: one surface language, real MK8DX assets, and square,
   dense timing rows instead of floating generic cards. */
.page-shell--timing-tower :is(
  .cups-view,
  .records,
  .community,
  .public-time-trials,
  .tt-standing,
  .compare,
  .build-view,
  .public-player
) {
  min-width: 0;
}

.page-shell--timing-tower .cups-view__search,
.page-shell--timing-tower .tt-standing__search {
  border-color: var(--border-strong);
  border-radius: .3rem;
  background: var(--surface-1);
}

.page-shell--timing-tower .cups-view__grid {
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--border);
}

.page-shell--timing-tower .cups-view__cup {
  min-height: 6.8rem;
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
}

.page-shell--timing-tower .cups-view__cup:hover { background: var(--surface-2); }
.page-shell--timing-tower .cups-view__cup-icon { width: 2.8rem; height: 2.8rem; object-fit: contain; }
.page-shell--timing-tower .cups-view__cup-name { color: var(--text-muted); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }

.page-shell--timing-tower .cups-view__tracks {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  background: var(--border);
}

.page-shell--timing-tower .cups-view__track {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  min-height: 3.25rem;
  padding: .55rem .7rem;
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
}

.page-shell--timing-tower .cups-view__track:hover { background: var(--surface-2); }
.page-shell--timing-tower .cups-view__track-frame { width: 1.75rem; height: 1.35rem; border: 1px solid var(--border-strong); background: var(--surface-2); }
.page-shell--timing-tower .cups-view__track-preview { display: none; }
.page-shell--timing-tower .cups-view__track-badge { position: static; width: 1.1rem; height: 1.1rem; margin: .1rem auto; object-fit: contain; }
.page-shell--timing-tower .cups-view__track-name { color: var(--text); font-size: .76rem; }

.page-shell--timing-tower .track-board__header {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  background: var(--surface-1);
}

.page-shell--timing-tower .track-board__header h2 { font-size: clamp(1.35rem, 3vw, 2rem); }
.page-shell--timing-tower .track-board__cup { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.page-shell--timing-tower .track-board__preview-frame { border-radius: 0; overflow: hidden; }
.page-shell--timing-tower .track-board__preview { aspect-ratio: 16 / 9; object-fit: cover; }
.page-shell--timing-tower .track-board__mode { border-radius: .25rem; }
.page-shell--timing-tower .track-board__mode--active { border-color: var(--accent); background: var(--surface-you); color: var(--accent); }

.page-shell--timing-tower .track-board__list {
  gap: 0;
  border: 1px solid var(--border);
  background: var(--surface-1);
}

.page-shell--timing-tower .track-board__row {
  min-height: 2.25rem;
  padding: .45rem .7rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.page-shell--timing-tower .track-board__row:last-child { border-bottom: 0; }
.page-shell--timing-tower .track-board__row--self { background: var(--surface-you); box-shadow: inset 2px 0 var(--accent); }
.page-shell--timing-tower .track-board__row--wr,
.page-shell--timing-tower .track-board__row--staff { background: #0e1116; }
.page-shell--timing-tower .track-board__time { width: 5.4rem; color: #cbd2da; text-align: right; }
.page-shell--timing-tower .track-board__delta { width: 5.75rem; color: var(--delta-slow); text-align: right; }
.page-shell--timing-tower .track-board__delta--faster { color: var(--good); }

.page-shell--timing-tower .tt-standing__list,
.page-shell--timing-tower .tt-standing__table-wrap {
  gap: 0;
  overflow: hidden;
  border-color: var(--border);
  border-radius: 0;
}

.page-shell--timing-tower .tt-standing__row {
  min-height: 2.5rem;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-1);
}
.page-shell--timing-tower .tt-standing__row--self { background: var(--surface-you); box-shadow: inset 2px 0 var(--accent); }
.page-shell--timing-tower .tt-standing__toggle,
.page-shell--timing-tower .tt-standing__tabs { border-radius: .35rem; }
.page-shell--timing-tower .tt-standing__toggle-button--active,
.page-shell--timing-tower .tt-standing__tab--active { background: var(--surface-you); color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.page-shell--timing-tower .rank-card { border-color: var(--border); border-radius: 0; background: var(--surface-1); }

.page-shell--timing-tower .records__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--border);
}

.page-shell--timing-tower .records__card {
  padding: var(--sp-4);
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
}

.page-shell--timing-tower .records__card h3 {
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.page-shell--timing-tower .records__holder { min-height: 2.6rem; border-bottom: 1px solid var(--border); }
.page-shell--timing-tower .records__avatar { width: 1.65rem; height: 1.65rem; object-fit: contain; }
.page-shell--timing-tower .records__value { color: var(--text-muted); font-size: .7rem; }

.page-shell--timing-tower .community__countries {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-1);
}

.page-shell--timing-tower .community__country {
  min-height: 2.5rem;
  padding: .45rem .7rem;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.page-shell--timing-tower .community__flag { width: 1.25rem; height: .94rem; object-fit: cover; border-radius: 2px; }
.page-shell--timing-tower .community__meter { height: 3px; border-radius: 0; background: #252c35; }
.page-shell--timing-tower .community__meter-fill { border-radius: 0; background: var(--accent); }
.page-shell--timing-tower .career__chips { gap: 1px; border: 1px solid var(--border); background: var(--border); }
.page-shell--timing-tower .career__chip { border: 0; border-radius: 0; background: var(--surface-1); }

/* Pointer capability controls density independently from width. */
@media (pointer: coarse) {
  .page-shell--timing-tower :is(
    .activity-list__row,
    .track-board__row,
    .tt-standing__row,
    .records__holder,
    .community__country,
    .cups-view__track
  ) { min-height: 2.75rem; }
}

@media (max-width: 64rem) {
  .page-shell--timing-tower .home-dashboard { grid-template-columns: 1fr; }
  .page-shell--timing-tower .home-dashboard > :last-child .activity__sections { max-height: none; }
}

@media (max-width: 40rem) {
  .page-shell--timing-tower .tt-auth { padding-block-start: var(--sp-4); }
  .page-shell--timing-tower .site-nav { backdrop-filter: none; }
  .page-shell--timing-tower .site-nav__links { background: rgb(10 12 16 / 98%); }
  .page-shell--timing-tower .site-nav__links > .site-nav__link--active { background: var(--surface-you); color: var(--accent); }
  .page-shell--timing-tower .site-nav__link--active::before { inset: auto 25% 0; }

  .timing-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timing-summary__cell:nth-child(2) { border-right: 0; }
  .timing-summary__cell:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .timing-summary__cell { min-height: 5.3rem; }

  .page-shell--timing-tower .signed-out-home__hero { grid-template-columns: 1fr auto; min-height: 10rem; }
  .page-shell--timing-tower .signed-out-home__hero h1 { font-size: clamp(2rem, 12vw, 3.2rem); }
  .page-shell--timing-tower .signed-out-home__intro { font-size: .82rem; }
  .page-shell--timing-tower .signed-out-home__actions { grid-template-columns: 1fr; }
  .page-shell--timing-tower .signed-out-home__action { min-height: 4rem; border-right: 0; border-bottom: 1px solid var(--border); }
  .page-shell--timing-tower .signed-out-home__action:last-child { border-bottom: 0; }
  .page-shell--timing-tower .signed-out-home__signin { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-4); }

  .page-shell--timing-tower .home-hero__left { align-items: flex-start; }
  .page-shell--timing-tower .home-domain { width: calc(50% - var(--sp-2)); min-width: 0; padding-left: var(--sp-3); }
  .page-shell--timing-tower .home-hero__actions { width: 100%; margin: 0; }
  .page-shell--timing-tower .home-hero__submit { width: 100%; }
  .page-shell--timing-tower .home-focus__head { display: grid; }
  .page-shell--timing-tower .home-focus__controls { justify-content: flex-start; }
  .page-shell--timing-tower .home-focus__card { grid-template-columns: minmax(0, 1fr) 7.6rem; min-height: 5.6rem; }
  .page-shell--timing-tower .home-focus__chips { display: none; }

  .page-shell--timing-tower .activity { padding: var(--sp-3); }
  .page-shell--timing-tower .activity-list__row { grid-template-columns: 1.55rem minmax(0, 1fr); padding: .65rem 0; }
  .page-shell--timing-tower .activity-list__thumb { width: 1.55rem; }
  .page-shell--timing-tower .activity-list__meta { grid-template-columns: 1.8rem 3.5rem; }
  .page-shell--timing-tower .activity__followed { display: none; }
  .page-shell--timing-tower .activity-list__headline { flex-wrap: wrap; }
  .page-shell--timing-tower .activity-list__detail { display: flex; justify-content: space-between; gap: .45rem; }
  .page-shell--timing-tower .activity-list__facts { margin-left: auto; text-align: right; }

  .page-shell--timing-tower .records__grid { grid-template-columns: 1fr; }
  .page-shell--timing-tower .cups-view__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-shell--timing-tower .cups-view__tracks { grid-template-columns: 1fr; }

  /* Below 560px the leaderboard is a two-line timing block, not a squeezed
     desktop table. Position stays left; time and signed gap stay right. */
  .page-shell--timing-tower .track-board__row {
    grid-template-columns: 1.7rem minmax(0, 1fr) 5.4rem;
    gap: .25rem .55rem;
    min-height: 3.25rem;
  }
  .page-shell--timing-tower .track-board__rank { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .page-shell--timing-tower .track-board__row > :nth-child(2),
  .page-shell--timing-tower .track-board__row > :nth-child(3) { grid-column: 2; }
  .page-shell--timing-tower .track-board__time { grid-column: 3; grid-row: 1; }
  .page-shell--timing-tower .track-board__delta { grid-column: 3; grid-row: 2; color: var(--text-muted); }
}

/* ---------------------------------------------------------------------------
   P1 · Individual Track control

   The production timing tower keeps its data contract and calibrated rows.
   This route layer composes those proven parts with the P0 Race Control
   surface/identity grammar. Tournament never receives this shell class.
   --------------------------------------------------------------------------- */

.page-shell--track-control .tt-auth {
  padding-block-start: var(--sp-5);
}

.page-shell--track-control .public-time-trials {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-md);
  background: var(--rc-panel);
  color: var(--rc-copy);
}

.page-shell--track-control .track-board__header {
  border: 0;
  border-bottom: 1px solid var(--rc-seam);
  background: var(--rc-panel);
}

.page-shell--track-control .track-board__title-media {
  border-color: var(--rc-seam);
  background: var(--rc-panel-raised);
}

.page-shell--track-control .track-board__control-label {
  color: var(--rc-cyan);
  font-family: var(--rc-time-font);
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.page-shell--track-control .track-board__title h2 {
  color: var(--rc-copy);
}

.page-shell--track-control .track-board__title small {
  color: var(--rc-muted);
}

.page-shell--track-control .track-board__mode {
  min-height: 2.35rem;
  border-color: var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  color: var(--rc-muted);
}

.page-shell--track-control .track-board__mode:hover {
  border-color: var(--rc-cyan);
  color: var(--rc-copy);
}

.page-shell--track-control .track-board__mode--active {
  border-color: var(--rc-cyan);
  background: var(--rc-cyan-soft);
  color: var(--rc-cyan);
  box-shadow: inset 0 -2px var(--rc-cyan);
}

.page-shell--track-control .track-board__summary {
  border: 0;
  border-bottom: 1px solid var(--rc-seam);
  background: #0d1218;
}

.page-shell--track-control .track-board__summary-cell {
  border-color: var(--rc-seam);
}

.page-shell--track-control .track-board__summary-cell strong {
  color: var(--rc-copy);
  font-family: var(--rc-time-font);
  font-variant-numeric: tabular-nums lining-nums;
}

.page-shell--track-control .track-board__summary-cell small {
  color: var(--rc-muted);
}

.page-shell--track-control .public-time-trials > [role="status"] {
  border: 0;
  border-bottom: 1px solid var(--rc-seam);
  color: var(--rc-muted);
}

.page-shell--track-control .public-time-trials > [role="status"]:empty,
.page-shell--track-control .public-time-trials > [role="status"][hidden] {
  display: none;
}

.page-shell--track-control .track-board__columns {
  border: 0;
  border-bottom: 1px solid var(--rc-seam);
  background: #0b0f14;
  color: var(--rc-muted);
}

.page-shell--track-control .track-board__list {
  border: 0;
  background: var(--rc-panel);
}

.page-shell--track-control .track-board__row {
  border-color: var(--rc-seam);
}

.page-shell--track-control .track-board__row--wr,
.page-shell--track-control .track-board__row--staff {
  background: #0c1117;
}

.page-shell--track-control .track-board__submission {
  margin-top: var(--sp-3);
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel);
}

.page-shell--track-control .track-board__submission:empty { display: none; }

.page-shell--track-control .track-board__submission-prompt {
  margin: 0;
  padding: .7rem .85rem;
}

.page-shell--track-control .track-board__submission-prompt .tt-auth__link {
  color: var(--rc-cyan);
}

@media (max-width: 40rem) {
  /* This is the P0-proven presentation fix for the existing five routes. */
  .page-shell--timing-tower .site-nav__links > .site-nav__link { font-size: 0; }
  .page-shell--timing-tower .site-nav__links > .site-nav__link::after { font-size: .64rem; }
  .page-shell--timing-tower .site-nav__links {
    min-height: 4rem;
    background: rgb(8 11 15 / 98%);
    box-shadow: 0 -1px 0 var(--rc-seam);
  }
  .page-shell--timing-tower .tt-auth {
    padding-block-end: calc(5.25rem + env(safe-area-inset-bottom));
  }

  .page-shell--track-control .track-board__header {
    grid-template-columns: 5.25rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: .35rem .7rem;
    min-height: 6.25rem;
    padding-right: .65rem;
  }
  .page-shell--track-control .track-board__title-media {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 6.2rem;
  }
  .page-shell--track-control .track-board__title {
    grid-column: 2;
    grid-row: 1;
    align-content: end;
    padding-top: .55rem;
  }
  .page-shell--track-control .track-board__title h2 {
    overflow: visible;
    font-size: 1.12rem;
    line-height: 1.08;
    text-overflow: clip;
    white-space: normal;
  }
  .page-shell--track-control .track-board__title small {
    display: block;
    overflow: hidden;
    font-size: .58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .page-shell--track-control .track-board__control-label { font-size: .52rem; }
  .page-shell--track-control .track-board__mode-links {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    align-self: start;
    width: 100%;
    margin: 0 0 .55rem;
  }
  .page-shell--track-control .track-board__mode {
    min-width: 0;
    min-height: 2rem;
    padding: .35rem;
  }
}

/* ---------------------------------------------------------------------------
   Community activity, grouped the way the APK groups it.

   Five sections in a fixed order — what you must act on, chosen rivals,
   recent close PBs, your own sessions, then everyone else — with independent
   scope and engine-class
   filters above them. The colours are the APK's: yellow for the neutral
   filter, blue for 150cc, red for 200cc, and a warm accent on the section
   that is asking for something.
   --------------------------------------------------------------------------- */

.activity__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.activity__filters[hidden] { display: none; }

.activity__filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.activity__filter-group + .activity__filter-group {
  margin-left: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--border-strong);
}

.activity__filter {
  min-height: 2.25rem;
  padding: var(--sp-1) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.activity__filter:hover { border-color: var(--text-muted); }

.activity__filter:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.activity__filter--active {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent);
}

/* The engine classes keep the colours they carry everywhere else. */
.activity__filter[data-filter="150"].activity__filter--active {
  border-color: #4f8bd6;
  background: #4f8bd6;
  color: #fff;
}

.activity__filter[data-filter="200"].activity__filter--active {
  border-color: #d9534f;
  background: #d9534f;
  color: #fff;
}

.activity__sections {
  display: grid;
  gap: var(--sp-6);
}

.activity__group {
  display: grid;
  gap: var(--sp-3);
}

.activity__group-heading {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The one group that is asking the viewer for something says so in colour. */
.activity__group--action .activity__group-heading { color: var(--accent); }
.activity__group--rivals .activity__group-heading { color: var(--rc-cyan, var(--accent)); }

/* Get the app: an offer that sits with the account controls rather than in
   the row of places, so it survives the five-slot mobile bottom bar. */
.site-nav__apps {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  padding-inline: var(--sp-3);
  color: var(--accent);
  white-space: nowrap;
}

.site-nav__apps:hover {
  border-color: var(--accent);
  background: rgb(255 183 77 / 12%);
}

.site-nav__apps-mark {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-nav__apps.site-nav__link--active {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* Between the phone bottom bar and the full-width header the row is genuinely
   tight: the container is capped, so widening the screen stops buying space.
   The offer keeps its icon and drops its label, and the row of places can
   scroll rather than slide underneath the account cluster. */
@media (max-width: 75rem) and (min-width: 58.0625rem) {
  .site-nav__apps-label { display: none; }
  /* Names stay whole: a clipped "Tournam…" is worse than slightly
     smaller type. */
  .site-nav__links { gap: 0; }
  .site-nav__link { padding-inline: var(--sp-1); font-size: .94rem; }
  .site-nav__brand-detail { display: none; }
  /* The offer is one control, not one of the places: it keeps a tappable
     target. Declared after the rule above so it wins on equal weight. */
  .site-nav__apps { padding-inline: var(--sp-3); }
}

/* A safety net at every desktop width: the places may scroll, but they may
   never overlap what sits beside them. */
@media (min-width: 58.0625rem) {
  .site-nav__links { overflow-x: auto; scrollbar-width: none; }
  .site-nav__links::-webkit-scrollbar { display: none; }
  .site-nav__links > .site-nav__link { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------------
   Rank section cards, ported from the APK.

   The APK frames every part of Rank in a titled card with a coloured rule:
   a table on its own never says what question it answers. The accent is set
   per card, so Mastery can carry its own tier colour.
   --------------------------------------------------------------------------- */

.rank-card {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.rank-card__title {
  margin: 0;
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--rank-accent, var(--accent));
  color: var(--rank-accent, var(--accent));
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rank-card__body { display: grid; gap: var(--sp-3); justify-items: start; }

/* Your position, at the size the APK gives it. */
.rank-card__figure {
  margin: 0;
  font-size: clamp(2.5rem, 9vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.rank-card__heading { margin: 0; font-size: 1.0625rem; font-weight: 800; }
.rank-card__line { margin: 0; color: var(--text-muted); line-height: 1.5; }
.rank-card__note { margin: 0; color: var(--text-muted); font-size: 0.8125rem; line-height: 1.5; }

.rank-card__row { display: flex; gap: var(--sp-4); align-items: center; }

.rank-card__next { margin: 0; color: var(--good); font-weight: 700; }

.rank-card__movement { margin: 0; font-weight: 700; }
.rank-card__movement[data-direction="up"] { color: var(--good); }
.rank-card__movement[data-direction="down"] { color: #f28b82; }
.rank-card__movement[data-direction="flat"] { color: var(--text-muted); }

.rank-card__action {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.rank-card__action:hover { border-color: var(--accent); color: var(--accent); }

.rank-card .tt-standing__search { width: min(100%, 22rem); }

/* Reset is a full-width action after the tabs, as in the APK, not a third
   control crowded in beside the scope and class toggles. */
.tt-standing__reset { width: 100%; justify-content: center; }

/* Records and Community are web-only sections, and the phone bottom bar
   carries the APK’s five destinations exactly — so on a phone these two are
   reachable here instead. Hidden wherever the header row already lists
   them. */
.home-more { display: none; }

@media (max-width: 58rem) {
  .home-more {
    display: grid;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
  }

  .home-more__link {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-1);
    color: var(--text);
    text-decoration: none;
  }

  .home-more__link strong { font-size: 1.0625rem; }
  .home-more__link span { color: var(--text-muted); font-size: 0.875rem; }
  .home-more__link:hover { border-color: var(--border-strong); }
  .home-more__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
}

/* Dismissing a notification is not the same as reading it. Until this
   existed, the only way to clear one was to follow it somewhere you may not
   have wanted to go. Quiet by default, because the notification is the
   content and this is the way out of it. */
.notifications__mark-read {
  min-height: 1.9rem;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: 0.4rem;
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.notifications__mark-read:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.notifications__mark-read:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.notifications__mark-read:disabled { opacity: 0.5; cursor: not-allowed; }

/* The timestamp keeps its right-hand anchor; the action sits after it. */
.notifications__item .notifications__when { margin-left: auto; }

/* ---------------------------------------------------------------------------
   Timing-tower refinement: one alignment system, one accent and one page
   scroll. These rules deliberately sit last so the established responsive
   product styles remain the fallback outside the timing-tower shell.
   --------------------------------------------------------------------------- */

.page-shell--timing-tower .site-nav__apps {
  padding-inline: var(--sp-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
}

.page-shell--timing-tower .site-nav__apps:hover {
  background: transparent;
  color: var(--text);
}

.page-shell--timing-tower .site-nav__apps-mark { display: none; }

.page-shell--timing-tower .site-nav__identity {
  padding: 0;
  border: 0;
  background: transparent;
}

.page-shell--timing-tower .timing-summary__bar { background: #aeb7c2; }

.page-shell--timing-tower .home-dashboard :is(
  .home-hero__tier,
  .mastery-badge,
  .home-focus__chip,
  .activity__mode
) {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  box-shadow: none;
}

/* Home is one bordered console. Its two roots participate in the same grid,
   so the away strip can span below both focus and activity. */
.page-shell--timing-tower .home-dashboard {
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-1);
}

.page-shell--timing-tower .home-dashboard > :first-child,
.page-shell--timing-tower .home-dashboard > :first-child > .home-hero {
  display: contents;
}

.page-shell--timing-tower .home-dashboard .home-hero__left,
.page-shell--timing-tower .home-dashboard .home-ladder,
.page-shell--timing-tower .home-dashboard .home-away,
.page-shell--timing-tower .home-dashboard .home-away--quiet {
  grid-column: 1 / -1;
}

.page-shell--timing-tower .home-dashboard .home-hero__left { border: 0; }
.page-shell--timing-tower .home-dashboard .home-ladder { border-inline: 0; }

.page-shell--timing-tower .home-dashboard .home-focus {
  grid-column: 1;
  min-width: 0;
  border-right: 1px solid var(--border);
  background: var(--surface-1);
}

.page-shell--timing-tower .home-dashboard > :last-child {
  grid-column: 2;
  min-width: 0;
  background: var(--surface-1);
}

.page-shell--timing-tower .home-dashboard > :last-child .activity {
  height: 100%;
  border: 0;
  background: transparent;
}

.page-shell--timing-tower .home-dashboard > :last-child .activity__sections {
  max-height: none;
  padding-right: 0;
  overflow: visible;
}

.page-shell--timing-tower .home-dashboard .home-away,
.page-shell--timing-tower .home-dashboard .home-away--quiet {
  border-top: 1px solid var(--border);
}

/* A compact Home feed exposes identity, track, time and one source chip. */
.page-shell--timing-tower .activity-list__row--compact {
  position: relative;
  min-height: 2.75rem;
  padding-block: .4rem;
  cursor: pointer;
}

.page-shell--timing-tower .activity-list__row--compact .activity-list__body {
  display: grid;
  grid-template-columns: minmax(7rem, .8fr) minmax(10rem, 1.2fr);
  gap: .5rem;
  align-items: center;
  min-width: 0;
}

.page-shell--timing-tower .activity-list__row--compact :is(
  .activity__mode,
  .activity__followed,
  .activity__quick-details,
  .activity-list__story,
  .activity__finish-banner,
  .activity__runs-toggle,
  .activity__runs,
  .reactions
) { display: none; }

.page-shell--timing-tower .activity-list__row--compact .activity-list__meta {
  display: block;
  margin-left: auto;
  padding-left: 0;
}

.page-shell--timing-tower .activity-list__row--compact .activity-list__detail {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
  margin: 0;
}

.page-shell--timing-tower .activity-list__row--compact .activity-list__track {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Track page: the real track image, title and mode toggle share one strip;
   every timing row then uses the same fixed timing-tower columns. */
.page-shell--timing-tower .public-time-trials {
  display: grid;
  gap: 0;
  width: 100%;
}

.page-shell--timing-tower .public-time-trials > * {
  box-sizing: border-box;
  min-width: 0;
}

.page-shell--timing-tower .track-board__header {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: var(--sp-4);
  justify-content: stretch;
  min-height: 5rem;
  padding: 0;
}

.page-shell--timing-tower .track-board__title-media {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 4.9rem;
  border-right: 1px solid var(--border);
  background: var(--surface-2);
}

.page-shell--timing-tower .track-board__title-media .track-board__preview {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  box-shadow: none;
}

.page-shell--timing-tower .track-board__title-media .track-board__preview-cup {
  top: .4rem;
  left: .4rem;
  width: 1.55rem;
  height: 1.55rem;
}

.page-shell--timing-tower .track-board__title {
  display: grid;
  gap: .25rem;
  align-content: center;
  min-width: 0;
}

.page-shell--timing-tower .track-board__title h2 {
  overflow: hidden;
  font-size: clamp(1.25rem, 3vw, 1.85rem);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell--timing-tower .track-board__title small {
  color: var(--text-muted);
  font-size: .68rem;
}

.page-shell--timing-tower .track-board__mode-links {
  align-self: center;
  margin-right: var(--sp-4);
}

.page-shell--timing-tower .track-board__mode {
  min-width: 4.2rem;
  padding: .42rem .65rem;
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font-size: .72rem;
}

.page-shell--timing-tower .track-board__summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-inline: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}

.page-shell--timing-tower .track-board__summary-cell {
  display: grid;
  gap: .22rem;
  min-width: 0;
  padding: .65rem .8rem;
  border-right: 1px solid var(--border);
}

.page-shell--timing-tower .track-board__summary-cell:last-child { border-right: 0; }
.page-shell--timing-tower .track-board__summary-cell strong { font-size: .9rem; font-variant-numeric: tabular-nums; }
.page-shell--timing-tower .track-board__summary-cell small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: .6rem;
  letter-spacing: .025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell--timing-tower .public-time-trials > [role="status"] {
  margin: 0;
  padding: .45rem .7rem;
  border-inline: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .68rem;
}

.page-shell--timing-tower .track-board__columns,
.page-shell--timing-tower .track-board__row {
  display: grid;
  grid-template-columns: 18px 15px minmax(6rem, 1fr) 50px 34px 62px 66px 44px 74px 24px 14px;
  gap: 7px;
  align-items: center;
}

.page-shell--timing-tower .track-board__columns {
  min-height: 1.75rem;
  padding: 0 .7rem;
  border: 1px solid var(--border);
  border-bottom: 0;
  color: var(--text-muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .58rem;
  letter-spacing: .025em;
}

.page-shell--timing-tower .track-board__columns :is(
  .track-board__rank,
  .track-board__shroom,
  .track-board__time,
  .track-board__delta,
  .track-board__date
) { text-align: right; }

.page-shell--timing-tower .track-board__columns .track-board__evidence {
  overflow: hidden;
  color: transparent;
  font-size: 0;
}

.page-shell--timing-tower .track-board__list {
  width: 100%;
  margin: 0;
}

.page-shell--timing-tower .track-board__row {
  box-sizing: border-box;
  min-height: 32px;
  padding: 4px .7rem;
  font-size: .76rem;
  line-height: 1.2;
}

.page-shell--timing-tower .track-board__row > :nth-child(3) { min-width: 0; }
.page-shell--timing-tower .track-board__row :is(.tt-auth__link, .track-board__benchmark-name) {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell--timing-tower .track-board__row--self .tt-auth__link { color: var(--accent); }
.podium-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 18px;
  height: 18px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 18px;
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
}

.page-shell--timing-tower .track-board__rank {
  display: grid;
  justify-self: stretch;
  place-items: center;
  width: 100%;
  color: var(--text-muted);
  font-size: .66rem;
  text-align: center;
}
.page-shell--timing-tower .track-board__staff-logo {
  display: block;
  width: auto;
  max-width: none;
  height: 11px;
  padding-right: 2px;
  object-fit: contain;
}
.page-shell--timing-tower .track-board__row--staff .track-board__rank {
  box-sizing: border-box;
  overflow: visible;
  justify-items: start;
  padding-left: 6px;
}
/* Segoe UI Emoji paints these podium glyphs right of their nominal box centre. */
.page-shell--timing-tower .track-board__rank > .podium-mark {
  transform: translateX(-2px);
}
.page-shell--timing-tower .track-board__row--self .track-board__rank { color: var(--accent); }
.page-shell--timing-tower .track-board__benchmark-name small { color: var(--text-muted); font-size: .62rem; font-weight: 500; }
.page-shell--timing-tower.page-shell--track-control .track-board__row--wr .track-board__benchmark-name {
  color: var(--track-reference-wr);
}
.page-shell--timing-tower.page-shell--track-control .track-board__row--staff .track-board__benchmark-name {
  color: var(--track-reference-staff);
}
.page-shell--timing-tower .track-board__time {
  width: auto;
  color: #c4cbd4;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.page-shell--timing-tower .track-board__delta {
  --track-delta-neutral: oklch(93% 0 0);
  --track-delta-end: oklch(69% .22 28);
  width: auto;
  color: var(--track-delta-neutral);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.page-shell--timing-tower .track-board__delta--faster { --track-delta-end: oklch(66% .18 145); }
.page-shell--timing-tower .track-board__delta--equal { --track-delta-end: var(--track-delta-neutral); }
.page-shell--timing-tower .track-board__delta--t-0 { color: var(--track-delta-neutral); }
.page-shell--timing-tower .track-board__delta--t-5 { color: color-mix(in oklch, var(--track-delta-neutral) 95%, var(--track-delta-end) 5%); }
.page-shell--timing-tower .track-board__delta--t-10 { color: color-mix(in oklch, var(--track-delta-neutral) 90%, var(--track-delta-end) 10%); }
.page-shell--timing-tower .track-board__delta--t-15 { color: color-mix(in oklch, var(--track-delta-neutral) 85%, var(--track-delta-end) 15%); }
.page-shell--timing-tower .track-board__delta--t-20 { color: color-mix(in oklch, var(--track-delta-neutral) 80%, var(--track-delta-end) 20%); }
.page-shell--timing-tower .track-board__delta--t-25 { color: color-mix(in oklch, var(--track-delta-neutral) 75%, var(--track-delta-end) 25%); }
.page-shell--timing-tower .track-board__delta--t-30 { color: color-mix(in oklch, var(--track-delta-neutral) 70%, var(--track-delta-end) 30%); }
.page-shell--timing-tower .track-board__delta--t-35 { color: color-mix(in oklch, var(--track-delta-neutral) 65%, var(--track-delta-end) 35%); }
.page-shell--timing-tower .track-board__delta--t-40 { color: color-mix(in oklch, var(--track-delta-neutral) 60%, var(--track-delta-end) 40%); }
.page-shell--timing-tower .track-board__delta--t-45 { color: color-mix(in oklch, var(--track-delta-neutral) 55%, var(--track-delta-end) 45%); }
.page-shell--timing-tower .track-board__delta--t-50 { color: color-mix(in oklch, var(--track-delta-neutral) 50%, var(--track-delta-end) 50%); }
.page-shell--timing-tower .track-board__delta--t-55 { color: color-mix(in oklch, var(--track-delta-neutral) 45%, var(--track-delta-end) 55%); }
.page-shell--timing-tower .track-board__delta--t-60 { color: color-mix(in oklch, var(--track-delta-neutral) 40%, var(--track-delta-end) 60%); }
.page-shell--timing-tower .track-board__delta--t-65 { color: color-mix(in oklch, var(--track-delta-neutral) 35%, var(--track-delta-end) 65%); }
.page-shell--timing-tower .track-board__delta--t-70 { color: color-mix(in oklch, var(--track-delta-neutral) 30%, var(--track-delta-end) 70%); }
.page-shell--timing-tower .track-board__delta--t-75 { color: color-mix(in oklch, var(--track-delta-neutral) 25%, var(--track-delta-end) 75%); }
.page-shell--timing-tower .track-board__delta--t-80 { color: color-mix(in oklch, var(--track-delta-neutral) 20%, var(--track-delta-end) 80%); }
.page-shell--timing-tower .track-board__delta--t-85 { color: color-mix(in oklch, var(--track-delta-neutral) 15%, var(--track-delta-end) 85%); }
.page-shell--timing-tower .track-board__delta--t-90 { color: color-mix(in oklch, var(--track-delta-neutral) 10%, var(--track-delta-end) 90%); }
.page-shell--timing-tower .track-board__delta--t-95 { color: color-mix(in oklch, var(--track-delta-neutral) 5%, var(--track-delta-end) 95%); }
.page-shell--timing-tower .track-board__delta--t-100 { color: var(--track-delta-end); }

.page-shell--timing-tower .track-board__data-cell {
  color: #4a535e;
  text-align: right;
}

.page-shell--timing-tower .track-board__combo {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 50px;
}

.page-shell--timing-tower .track-board__combo.track-board__data-cell { justify-content: flex-end; }
.page-shell--timing-tower .track-board__combo-icon {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  object-fit: contain;
}

.page-shell--timing-tower .track-board__shroom {
  text-align: right;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.page-shell--timing-tower .track-board__coins {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 62px;
  color: var(--coin);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.page-shell--timing-tower .track-board__coins.track-board__data-cell { color: #4a535e; }

.page-shell--timing-tower .track-board__date {
  overflow: hidden;
  color: var(--text-muted);
  font-size: .66rem;
  text-align: right;
  text-overflow: clip;
  white-space: nowrap;
}

.page-shell--timing-tower .track-board__evidence {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
}

.page-shell--timing-tower .track-board__evidence .platform-mark {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}
.page-shell--timing-tower .track-board__evidence-link { color: var(--text-muted); text-decoration: none; }
.page-shell--timing-tower .track-board__details { grid-column: 1 / -1; }

.page-shell--timing-tower .track-board__gap-meter {
  display: flex;
  justify-content: flex-start;
  height: 3px;
  overflow: hidden;
  background: #252c35;
}

.page-shell--timing-tower .track-board__gap-fill { display: block; height: 100%; background: var(--delta-slow); }
.page-shell--timing-tower .track-board__gap-fill--faster { margin-left: auto; background: var(--good); }
.page-shell--timing-tower .track-board__gap-fill--reference-wr { background: var(--good); }
.page-shell--timing-tower .track-board__gap-fill--reference-staff { background: var(--delta-slow); }
.page-shell--timing-tower .track-board__gap-fill--w-0 { width: 0; }
.page-shell--timing-tower .track-board__gap-fill--w-5 { width: 5%; }
.page-shell--timing-tower .track-board__gap-fill--w-10 { width: 10%; }
.page-shell--timing-tower .track-board__gap-fill--w-15 { width: 15%; }
.page-shell--timing-tower .track-board__gap-fill--w-20 { width: 20%; }
.page-shell--timing-tower .track-board__gap-fill--w-25 { width: 25%; }
.page-shell--timing-tower .track-board__gap-fill--w-30 { width: 30%; }
.page-shell--timing-tower .track-board__gap-fill--w-35 { width: 35%; }
.page-shell--timing-tower .track-board__gap-fill--w-40 { width: 40%; }
.page-shell--timing-tower .track-board__gap-fill--w-45 { width: 45%; }
.page-shell--timing-tower .track-board__gap-fill--w-50 { width: 50%; }
.page-shell--timing-tower .track-board__gap-fill--w-55 { width: 55%; }
.page-shell--timing-tower .track-board__gap-fill--w-60 { width: 60%; }
.page-shell--timing-tower .track-board__gap-fill--w-65 { width: 65%; }
.page-shell--timing-tower .track-board__gap-fill--w-70 { width: 70%; }
.page-shell--timing-tower .track-board__gap-fill--w-75 { width: 75%; }
.page-shell--timing-tower .track-board__gap-fill--w-80 { width: 80%; }
.page-shell--timing-tower .track-board__gap-fill--w-85 { width: 85%; }
.page-shell--timing-tower .track-board__gap-fill--w-90 { width: 90%; }
.page-shell--timing-tower .track-board__gap-fill--w-95 { width: 95%; }
.page-shell--timing-tower .track-board__gap-fill--w-100 { width: 100%; }

@media (pointer: coarse) {
  .page-shell--timing-tower .track-board__row { min-height: 44px; }
}

@media (max-width: 56rem) {
  .page-shell--timing-tower .track-board__columns,
  .page-shell--timing-tower .track-board__row {
    grid-template-columns: 18px 15px minmax(6rem, 1fr) 50px 34px 62px 66px 44px 74px 24px;
  }
  .page-shell--timing-tower :is(.track-board__columns, .track-board__row) > .track-board__evidence { display: none; }
}

@media (max-width: 52rem) {
  .page-shell--timing-tower .track-board__columns,
  .page-shell--timing-tower .track-board__row {
    grid-template-columns: 18px 15px minmax(6rem, 1fr) 50px 34px 62px 66px 44px 74px;
  }
  .page-shell--timing-tower :is(.track-board__columns, .track-board__row) > .track-board__date { display: none; }
}

@media (max-width: 48rem) {
  .page-shell--timing-tower .track-board__columns,
  .page-shell--timing-tower .track-board__row {
    grid-template-columns: 18px 15px minmax(6rem, 1fr) 34px 62px 66px 44px 74px;
  }
  .page-shell--timing-tower :is(.track-board__columns, .track-board__row) > .track-board__combo { display: none; }
}

@media (max-width: 44rem) {
  .page-shell--timing-tower .track-board__columns,
  .page-shell--timing-tower .track-board__row {
    grid-template-columns: 18px 15px minmax(6rem, 1fr) 34px 66px 44px 74px;
  }
  .page-shell--timing-tower :is(.track-board__columns, .track-board__row) > .track-board__coins { display: none; }
}

@media (max-width: 64rem) {
  .page-shell--timing-tower .home-dashboard { grid-template-columns: 1fr; }
  .page-shell--timing-tower .home-dashboard .home-focus,
  .page-shell--timing-tower .home-dashboard > :last-child { grid-column: 1; }
  .page-shell--timing-tower .home-dashboard .home-focus { border-right: 0; }
  .page-shell--timing-tower .home-dashboard > :last-child .activity { border-top: 1px solid var(--border); }
}

@media (max-width: 40rem) {
  .page-shell--timing-tower .activity-list__row--compact .activity-list__body { grid-template-columns: 1fr; gap: .1rem; }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__detail { margin-top: .1rem; }

  .page-shell--timing-tower .track-board__header {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: .65rem;
    min-height: 4rem;
  }
  .page-shell--timing-tower .track-board__title-media { min-height: 3.9rem; }
  .page-shell--timing-tower .track-board__title h2 { font-size: 1.05rem; }
  .page-shell--timing-tower .track-board__title small { display: none; }
  .page-shell--timing-tower .track-board__mode-links { margin-right: .45rem; }
  .page-shell--timing-tower .track-board__mode { min-width: 2.8rem; padding-inline: .35rem; font-size: .64rem; }
  .page-shell--timing-tower .track-board__summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-shell--timing-tower .track-board__summary-cell:nth-child(3) { border-right: 0; }
  .page-shell--timing-tower .track-board__summary-cell:nth-child(n + 4) { border-top: 1px solid var(--border); }

  .page-shell--timing-tower .track-board__columns,
  .page-shell--timing-tower .track-board__row {
    grid-template-columns: 18px 15px minmax(4.4rem, 1fr) 66px 44px 74px;
    gap: 7px;
    padding-inline: .35rem;
  }
  .page-shell--timing-tower :is(.track-board__columns, .track-board__row) > .track-board__shroom { display: none; }
  .page-shell--timing-tower .track-board__row { font-size: .7rem; }
  .page-shell--timing-tower .track-board__details { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 35rem) {
  .page-shell--timing-tower .track-board__columns { display: none; }
  .page-shell--timing-tower .track-board__row {
    grid-template-columns: 18px 34px minmax(0, 1fr) 66px 74px;
    grid-template-areas:
      "rank flag player time time"
      "rank shroom coins delta delta";
    min-height: 44px;
    padding-block: 5px;
  }
  .page-shell--timing-tower .track-board__row > .track-board__rank { grid-area: rank; align-self: start; }
  .page-shell--timing-tower .track-board__row > .track-board__flag-cell { display: block; grid-area: flag; align-self: start; }
  .page-shell--timing-tower .track-board__row > :nth-child(3) { grid-area: player; }
  .page-shell--timing-tower .track-board__row > .track-board__shroom { display: block; grid-area: shroom; color: var(--text-muted); }
  .page-shell--timing-tower .track-board__row > .track-board__coins { display: flex; grid-area: coins; color: var(--text-muted); }
  .page-shell--timing-tower .track-board__row > .track-board__time { grid-area: time; }
  .page-shell--timing-tower .track-board__row > .track-board__delta { grid-area: delta; }
  .page-shell--timing-tower .track-board__row > .track-board__gap-meter,
  .page-shell--timing-tower .track-board__row > .track-board__combo,
  .page-shell--timing-tower .track-board__row > .track-board__date,
  .page-shell--timing-tower .track-board__row > .track-board__evidence { display: none; }
  .page-shell--timing-tower .track-board__details { grid-column: 1 / -1; grid-row: 3; }
}

/* ---------------------------------------------------------------------------
   P0 · MK8DX Race Control ranking pilot

   Route-scoped on purpose. The foundation aliases are reusable by later
   approved pages, while Tournament and every non-Rank product keep their
   current presentation. Data colour is semantic; game assets carry identity.
   --------------------------------------------------------------------------- */

.page-shell--ranking-pilot { /* Ranking composition uses shared Race Control tokens. */ }

.page-shell--ranking-pilot .tt-auth {
  padding-block-start: var(--sp-5);
}

.page-shell--ranking-pilot .tt-auth > h1 {
  position: relative;
  padding-left: var(--sp-4);
}

.page-shell--ranking-pilot .tt-auth > h1::before {
  content: "";
  position: absolute;
  inset: .18em auto .12em 0;
  width: 2px;
  background: var(--rc-cyan);
}

.page-shell--ranking-pilot .subnav {
  gap: 0;
  width: fit-content;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel);
}

.page-shell--ranking-pilot .subnav__tab {
  min-height: 2.4rem;
  padding: .55rem .9rem;
  border: 0;
  border-right: 1px solid var(--rc-seam);
  border-radius: 0;
  background: transparent;
  color: var(--rc-muted);
  font-size: .78rem;
  font-weight: 700;
}

.page-shell--ranking-pilot .subnav__tab:last-child { border-right: 0; }
.page-shell--ranking-pilot .subnav__tab--active {
  background: var(--rc-cyan-soft);
  color: var(--rc-cyan);
  box-shadow: inset 0 -2px var(--rc-cyan);
}

.page-shell--ranking-pilot .tt-standing {
  gap: var(--sp-3);
  color: var(--rc-copy);
}

.page-shell--ranking-pilot .tt-standing__console-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding: .7rem .85rem;
  border-block: 1px solid var(--rc-seam);
  background: rgb(16 21 27 / 72%);
}

.page-shell--ranking-pilot .tt-standing__console-label,
.page-shell--ranking-pilot .tt-standing__control-label {
  margin: 0;
  color: var(--rc-cyan);
  font-family: var(--rc-time-font);
  font-size: .63rem;
  font-weight: 750;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.page-shell--ranking-pilot .tt-standing__intro {
  overflow: hidden;
  color: var(--rc-muted);
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Signed-out access and the Total headline are status strips, not a second
   set of dashboard cards. Their content and actions remain unchanged. */
.page-shell--ranking-pilot .tt-standing .rank-card {
  gap: var(--sp-3);
  margin: 0;
  padding: .8rem .9rem;
  border-color: var(--rc-seam);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel);
}

.page-shell--ranking-pilot .tt-standing .rank-card__title {
  padding-bottom: .45rem;
  border-bottom-width: 1px;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .62rem;
  letter-spacing: .09em;
}

.page-shell--ranking-pilot .tt-standing__headline .rank-card {
  grid-template-columns: 8rem minmax(0, 1fr);
  align-items: center;
}

.page-shell--ranking-pilot .tt-standing__headline .rank-card__title {
  padding: 0 var(--sp-3) 0 0;
  border: 0;
  border-right: 1px solid var(--rc-seam);
}

.page-shell--ranking-pilot .tt-standing__headline .rank-card__body {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
}

.page-shell--ranking-pilot .tt-standing__headline .rank-card__line {
  font-size: .76rem;
}

.page-shell--ranking-pilot .rank-card__action {
  min-height: 2.25rem;
  padding-inline: .75rem;
  border-color: var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  font-size: .72rem;
}

.page-shell--ranking-pilot .tt-standing__controls {
  display: grid;
  /* The view group keeps its 1fr share of whatever is left, but a 19rem floor
     pushed the whole console past the page between 993 and 1025 px. */
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 1px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-seam);
}

.page-shell--ranking-pilot .tt-standing__control-group {
  display: grid;
  gap: .4rem;
  align-content: center;
  min-width: 0;
  padding: .55rem .65rem;
  background: var(--rc-panel);
}

.page-shell--ranking-pilot .tt-standing__control-group--view { align-content: stretch; }

/* View sits on its own line directly above the table it changes, so the
   filters above it are all about which Players you are looking at. */
.tt-standing__controls--view { justify-content: stretch; }
.page-shell--ranking-pilot .tt-standing__controls--view {
  grid-template-columns: minmax(0, 1fr);
}
.page-shell--ranking-pilot .tt-standing__toggle,
.page-shell--ranking-pilot .tt-standing__tabs {
  display: flex;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-shell--ranking-pilot .tt-standing__tabs { width: 100%; }

.page-shell--ranking-pilot .tt-standing__toggle-button,
.page-shell--ranking-pilot .tt-standing__tab {
  min-height: 2.25rem;
  padding: .45rem .7rem;
  border: 1px solid transparent;
  border-radius: var(--rc-radius-sm);
  background: transparent;
  color: var(--rc-muted);
  font-size: .72rem;
  font-weight: 720;
  white-space: nowrap;
}

.page-shell--ranking-pilot .tt-standing__tab { flex: 1 1 auto; }
.page-shell--ranking-pilot .tt-standing__toggle-button:hover,
.page-shell--ranking-pilot .tt-standing__tab:hover {
  background: var(--rc-panel-raised);
  color: var(--rc-copy);
}

.page-shell--ranking-pilot .tt-standing__toggle-button--active,
.page-shell--ranking-pilot .tt-standing__toggle-button--150.tt-standing__toggle-button--active,
.page-shell--ranking-pilot .tt-standing__toggle-button--200.tt-standing__toggle-button--active,
.page-shell--ranking-pilot .tt-standing__tab--active {
  border-color: var(--rc-seam-strong);
  background: var(--rc-panel-active);
  color: var(--rc-cyan);
  box-shadow: inset 0 -2px var(--rc-cyan);
}

.page-shell--ranking-pilot .tt-standing__reset {
  width: auto;
  min-width: 6.5rem;
  min-height: 100%;
  padding: .55rem .75rem;
  border: 0;
  border-radius: 0;
  background: var(--rc-panel);
  color: var(--rc-muted);
  font-size: .7rem;
}

.page-shell--ranking-pilot .tt-standing__reset:hover {
  background: var(--rc-panel-raised);
  color: var(--rc-copy);
}

.page-shell--ranking-pilot .tt-standing__comparison {
  display: grid;
  grid-template-columns: minmax(15rem, .8fr) minmax(18rem, 1.2fr);
  gap: var(--sp-3) var(--sp-5);
  padding: .8rem .9rem;
  border-color: var(--rc-seam);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel);
}

.page-shell--ranking-pilot .tt-standing__comparison-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: baseline;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--rc-seam);
}

.page-shell--ranking-pilot .tt-standing__comparison-header h2 {
  margin: 0;
  color: var(--rc-copy);
  font-family: var(--rc-time-font);
  font-size: .7rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.page-shell--ranking-pilot .tt-standing__comparison-header p {
  margin: 0;
  color: var(--rc-muted);
  font-size: .68rem;
}

.page-shell--ranking-pilot .tt-standing__references {
  grid-column: 1 / -1;
  gap: .45rem;
}

.page-shell--ranking-pilot .tt-standing__references > strong,
.page-shell--ranking-pilot .tt-standing__selected > strong {
  color: var(--rc-muted);
  font-size: .7rem;
}

.page-shell--ranking-pilot .tt-standing__reference-button {
  min-height: 2.3rem;
  padding: .3rem .55rem;
  border: 1px solid var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel-raised);
  color: var(--rc-copy);
  box-shadow: none;
  font-size: .72rem;
  font-weight: 720;
}

.page-shell--ranking-pilot .tt-standing__reference-button:hover { border-color: var(--rc-cyan); }
.page-shell--ranking-pilot .tt-standing__reference-button[aria-pressed="true"] {
  border-color: var(--rc-cyan);
  background: var(--rc-cyan-soft);
}

.page-shell--ranking-pilot .tt-standing__reference-mark {
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  font-family: var(--rc-time-font);
  font-size: .58rem;
}

.page-shell--ranking-pilot .tt-standing__reference-button--nintendo .tt-standing__reference-mark { color: #ff6570; }
.page-shell--ranking-pilot .tt-standing__reference-button--world-record .tt-standing__reference-mark { color: var(--rc-gold); }

.page-shell--ranking-pilot .tt-standing__selected {
  align-content: center;
  min-width: 0;
}

.page-shell--ranking-pilot .tt-standing__selected button,
.page-shell--ranking-pilot .tt-standing__search-results button,
.page-shell--ranking-pilot .tt-standing__table button {
  border-color: var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel-raised);
  color: var(--rc-copy);
  font-size: .66rem;
}

.page-shell--ranking-pilot .tt-standing__search {
  width: 100%;
  min-height: 2.45rem;
  border-color: var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  background: #0d1116;
  font-size: .74rem;
}

.page-shell--ranking-pilot .tt-standing__status {
  min-height: 1.8rem;
  padding: .4rem .65rem;
  border-left: 2px solid var(--rc-cyan);
  background: rgb(16 21 27 / 64%);
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .64rem;
}

.page-shell--ranking-pilot .tt-standing__content {
  display: grid;
  gap: var(--sp-3);
}

.page-shell--ranking-pilot .tt-standing__content > .rank-card {
  grid-template-columns: 12rem minmax(0, 1fr);
  align-items: stretch;
}

.page-shell--ranking-pilot .tt-standing__content > .rank-card .rank-card__title {
  display: grid;
  align-content: center;
  padding: 0 var(--sp-4) 0 0;
  border: 0;
  border-right: 1px solid var(--rc-seam);
}

.page-shell--ranking-pilot .tt-standing__content > .rank-card .rank-card__body {
  grid-template-columns: auto minmax(12rem, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
}

.page-shell--ranking-pilot .tt-standing__content .rank-card__figure {
  font-family: var(--rc-time-font);
  font-size: clamp(1.45rem, 4vw, 2.1rem);
  letter-spacing: -.06em;
}

.page-shell--ranking-pilot .tt-standing__content .rank-card__line { font-size: .7rem; }
.page-shell--ranking-pilot .tt-standing__content .rank-card .tt-standing__search {
  grid-column: 2 / -1;
  width: min(100%, 18rem);
}

.page-shell--ranking-pilot .tt-standing__table-wrap {
  /* The timing-tower shell clips this wrapper. The ranking table has a
     fixed column count, so above the row-layout breakpoint it has to stay
     the scroller the component was built as: Dutch headers are wider than
     English ones and pushed Vergelijken 11 px past the clip at 673 px. */
  overflow-x: auto;
  border-color: var(--rc-seam);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel);
}

.page-shell--ranking-pilot .tt-standing__table {
  min-width: 0;
  background: var(--rc-panel);
  color: var(--rc-copy);
  font-size: .72rem;
}

.page-shell--ranking-pilot .tt-standing__table th,
.page-shell--ranking-pilot .tt-standing__table td {
  padding: .55rem .65rem;
  border-color: var(--rc-seam);
}

.page-shell--ranking-pilot .tt-standing__table thead {
  background: #0d1116;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.page-shell--ranking-pilot .tt-standing__standing-row {
  transition: background-color 120ms ease;
}

.page-shell--ranking-pilot .tt-standing__standing-row:hover { background: var(--rc-panel-raised); }
.page-shell--ranking-pilot .tt-standing__standing-row--self { background: var(--rc-cyan-soft); box-shadow: inset 2px 0 var(--rc-cyan); }
.page-shell--ranking-pilot .tt-standing__standing-row--reference { background: rgb(242 193 78 / 3%); }

.page-shell--ranking-pilot .tt-standing__standing-rank,
.page-shell--ranking-pilot .tt-standing__standing-total,
.page-shell--ranking-pilot .tt-standing__standing-average,
.page-shell--ranking-pilot .tt-standing__standing-tracks,
.page-shell--ranking-pilot .tt-standing__standing-delta,
.page-shell--ranking-pilot .tt-standing__track-value {
  font-family: var(--rc-time-font);
  font-variant-numeric: tabular-nums lining-nums;
}

.page-shell--ranking-pilot .tt-standing__standing-rank {
  color: var(--rc-muted);
  text-align: center;
}
.page-shell--ranking-pilot .tt-standing__standings th:first-child { text-align: center; }
.page-shell--ranking-pilot .tt-standing__standing-row[data-rank="1"] .tt-standing__standing-rank { color: var(--rc-gold); }
.page-shell--ranking-pilot .tt-standing__standing-row[data-rank="2"] .tt-standing__standing-rank { color: #c6d0db; }
.page-shell--ranking-pilot .tt-standing__standing-row[data-rank="3"] .tt-standing__standing-rank { color: #d99a63; }
.page-shell--ranking-pilot .tt-standing__position-medal { font-size: inherit; font-weight: 800; }
.page-shell--ranking-pilot .tt-standing__position-medal .podium-mark { margin-inline: auto; }

.page-shell--ranking-pilot .tt-standing__player-name {
  overflow: hidden;
  color: var(--rc-copy);
  font-weight: 720;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell--ranking-pilot a.tt-standing__player-name:hover { color: var(--rc-cyan); }
.page-shell--ranking-pilot .tt-standing__standing-total { color: #cdd5df; font-weight: 720; }
.page-shell--ranking-pilot .tt-standing__standing-average,
.page-shell--ranking-pilot .tt-standing__standing-tracks { color: var(--rc-muted); }
.page-shell--ranking-pilot .tt-standing__standing-action button { min-width: 4.4rem; }
.page-shell--ranking-pilot .tt-standing__standing-action button:disabled { opacity: .45; cursor: not-allowed; }

.page-shell--ranking-pilot .tt-standing__standings--total th:nth-child(1) { width: 4.2rem; }
.page-shell--ranking-pilot .tt-standing__standings--total th:nth-child(2) { width: 17%; }
.page-shell--ranking-pilot .tt-standing__standings--total th:nth-child(3) { width: 10%; }
.page-shell--ranking-pilot .tt-standing__standings--total th:nth-child(4) { width: 14%; }
.page-shell--ranking-pilot .tt-standing__standings--total th:nth-child(5) { width: 11%; }
.page-shell--ranking-pilot .tt-standing__standings--total th:nth-child(6) { width: 8%; }
.page-shell--ranking-pilot .tt-standing__standings--total th:nth-child(7) { width: 9%; }
.page-shell--ranking-pilot .tt-standing__standings--total th:nth-child(8) { width: 7rem; }

.page-shell--ranking-pilot .tt-standing__standing-medal {
  font-family: var(--rc-time-font);
  font-variant-numeric: tabular-nums;
}
.page-shell--ranking-pilot .tt-standing__medal-count {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
}
.page-shell--ranking-pilot .tt-standing__medal-count .podium-mark {
  width: 18px;
  height: 18px;
}
.page-shell--ranking-pilot .tt-standing__medal-value { min-width: 2ch; text-align: right; }
.page-shell--ranking-pilot .tt-standing__standing-medal--gold { color: var(--rc-gold); }
.page-shell--ranking-pilot .tt-standing__standing-medal--silver { color: #c6d0db; }
.page-shell--ranking-pilot .tt-standing__standing-medal--bronze { color: #d99a63; }

.page-shell--ranking-pilot .tt-standing__track-toolbar {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: end;
  padding: .65rem .75rem;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel);
}

.page-shell--ranking-pilot .tt-standing__track-filter {
  display: grid;
  gap: .3rem;
  width: min(100%, 24rem);
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.page-shell--ranking-pilot .tt-standing__track-count {
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .64rem;
}

.page-shell--ranking-pilot .tt-standing__tracks {
  table-layout: fixed;
}

.page-shell--ranking-pilot .tt-standing__tracks th:first-child { width: 16rem; }
.page-shell--ranking-pilot .tt-standing__tracks th:first-child,
.page-shell--ranking-pilot .tt-standing__tracks td:first-child { background-color: var(--rc-panel); }
.page-shell--ranking-pilot .tt-standing__tracks thead th { padding-block: .45rem; }
.page-shell--ranking-pilot .tt-standing__tracks thead button {
  width: 100%;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--rc-muted);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell--ranking-pilot .tt-standing__tracks thead th:not(:first-child) button { text-align: right; }
.page-shell--ranking-pilot .tt-standing__tracks thead button:hover { color: var(--rc-cyan); }
.page-shell--ranking-pilot .tt-standing__tracks tbody tr { height: 4.6rem; }
.page-shell--ranking-pilot .tt-standing__tracks tbody td { border-left: 1px solid var(--rc-seam); }
.page-shell--ranking-pilot .tt-standing__track-art {
  min-width: 0;
  padding: .35rem .45rem;
  background-position: center;
  background-size: cover;
}

.page-shell--ranking-pilot .tt-standing__track-label { gap: .4rem; }
.page-shell--ranking-pilot .tt-standing__track-cup { width: 1.55rem; height: 1.55rem; }
.page-shell--ranking-pilot .tt-standing__track-copy {
  gap: .1rem;
  max-width: 12rem;
  padding: .2rem .35rem;
  border-radius: 2px;
  background: rgb(4 6 9 / 78%);
  text-align: left;
}

.page-shell--ranking-pilot .tt-standing__track-copy strong {
  overflow: hidden;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-shell--ranking-pilot .tt-standing__track-copy small { font-size: .56rem; }
.page-shell--ranking-pilot .tt-standing__track-metric { text-align: right; }
.page-shell--ranking-pilot .tt-standing__track-value { justify-items: end; gap: .15rem; }
.page-shell--ranking-pilot .tt-standing__track-value > strong { color: #d7dee7; font-size: .75rem; }
.page-shell--ranking-pilot .tt-standing__track-value .delta-badge { font-size: .62rem; }
.page-shell--ranking-pilot .tt-standing__track-value .mastery-badge {
  padding: .08rem .3rem;
  border-color: var(--rc-seam-strong);
  border-radius: 3px;
  font-size: .56rem;
  box-shadow: none;
}

@media (max-width: 62rem) {
  .page-shell--ranking-pilot .tt-standing__controls {
    grid-template-columns: auto auto minmax(16rem, 1fr);
  }
  .page-shell--ranking-pilot .tt-standing__reset {
    grid-column: 1 / -1;
    min-height: 2.2rem;
    border-top: 1px solid var(--rc-seam);
  }
}

/* ---------------------------------------------------------------------------
   P1 · Track directory
   --------------------------------------------------------------------------- */

.page-shell--tracks-control .tt-auth {
  padding-block-start: var(--sp-5);
}

.page-shell--tracks-control .tt-auth > h1 {
  position: relative;
  padding-left: var(--sp-4);
}

.page-shell--tracks-control .tt-auth > h1::before {
  content: "";
  position: absolute;
  inset: .18em auto .12em 0;
  width: 2px;
  background: var(--rc-cyan);
}

.page-shell--tracks-control .tt-auth > .tt-auth__status {
  margin-bottom: var(--sp-4);
}

.page-shell--tracks-control .cups-view {
  display: grid;
  gap: var(--sp-3);
  width: 100%;
}

.page-shell--tracks-control .cups-view__directory {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  padding: .7rem .85rem;
  border-block: 1px solid var(--rc-seam);
  background: rgb(16 21 27 / 72%);
}

.page-shell--tracks-control .cups-view__directory-label {
  margin: 0;
  color: var(--rc-cyan);
  font-family: var(--rc-time-font);
  font-size: .63rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.page-shell--tracks-control .cups-view__directory-hint {
  margin: 0;
  color: var(--rc-muted);
  font-size: .7rem;
}

.page-shell--tracks-control .cups-view__search {
  width: 100%;
  min-height: 2.7rem;
  margin: 0;
  padding: .65rem .8rem;
  border: 1px solid var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  background: #0b1016;
  color: var(--rc-copy);
  box-shadow: none;
}

.page-shell--tracks-control .cups-view__search:focus {
  border-color: var(--rc-cyan);
  outline: 2px solid var(--rc-cyan-soft);
}

.page-shell--tracks-control .cups-view__result-status {
  margin: 0;
  padding: .45rem .7rem;
  border-left: 2px solid var(--rc-cyan);
  background: #0c1117;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .62rem;
}

.page-shell--tracks-control .cups-view__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  overflow: hidden;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-md);
  background: var(--rc-seam);
  justify-items: stretch;
}

.page-shell--tracks-control .cups-view__cup {
  display: grid;
  place-items: center;
  gap: .5rem;
  min-width: 0;
  min-height: 6.6rem;
  padding: .7rem .4rem;
  border: 0;
  border-radius: 0;
  background: var(--rc-panel);
  color: var(--rc-muted);
  box-shadow: none;
  width: 100%;
}

.page-shell--tracks-control .cups-view__cup:hover,
.page-shell--tracks-control .cups-view__cup:focus-visible {
  z-index: 1;
  background: var(--rc-panel-raised);
  color: var(--rc-copy);
}

.page-shell--tracks-control .cups-view__cup:focus-visible {
  outline: 2px solid var(--rc-cyan);
  outline-offset: -2px;
}

.page-shell--tracks-control .cups-view__cup-icon {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.page-shell--tracks-control .cups-view__cup-name {
  /* The cup card centres its content, so without a cap the name is laid out
     at its full width and simply overhangs the card: the Dutch
     "Goudensprintbeker" reached 50 px past it at every phone width. */
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: inherit;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* On a phone the whole name is worth two lines; the card already grows. */
@media (max-width: 42rem) {
  .page-shell--tracks-control .cups-view__cup-name {
    text-overflow: clip;
    white-space: normal;
  }
}

.page-shell--tracks-control .cups-view__header {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
  min-height: 3.5rem;
  padding: .55rem .7rem;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel);
}

.page-shell--tracks-control .cups-view__header-icon {
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
}

.page-shell--tracks-control .cups-view__header h2 {
  margin: 0;
  color: var(--rc-copy);
  font-size: 1rem;
}

.page-shell--tracks-control .cups-view__header .tt-auth__button {
  min-height: 2.25rem;
  padding: .4rem .7rem;
  border-color: var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  background: transparent;
  color: var(--rc-muted);
}

.page-shell--tracks-control .cups-view__tracks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  overflow: hidden;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-md);
  background: var(--rc-seam);
  justify-items: stretch;
}

.page-shell--tracks-control .cups-view__tracks--cup {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-shell--tracks-control .cups-view__track {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  grid-template-rows: none;
  gap: .7rem;
  align-items: center;
  justify-items: start;
  min-width: 0;
  min-height: 5.25rem;
  padding: .45rem;
  border: 0;
  border-radius: 0;
  background: var(--rc-panel);
  color: var(--rc-copy);
  width: 100%;
}

.page-shell--tracks-control .cups-view__track:hover,
.page-shell--tracks-control .cups-view__track:focus-visible {
  z-index: 1;
  background: var(--rc-panel-raised);
}

.page-shell--tracks-control .cups-view__track:focus-visible {
  outline: 2px solid var(--rc-cyan);
  outline-offset: -2px;
}

.page-shell--tracks-control .cups-view__track-frame {
  position: relative;
  display: block;
  width: 7.5rem;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rc-seam-strong);
  background: var(--rc-panel-raised);
}

.page-shell--tracks-control .cups-view__track-preview {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.page-shell--tracks-control .cups-view__track-badge {
  position: absolute;
  inset: .25rem auto auto .25rem;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 80%));
}

.page-shell--tracks-control .cups-view__track-copy {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.page-shell--tracks-control .cups-view__track-name {
  overflow: hidden;
  color: var(--rc-copy);
  font-size: .75rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell--tracks-control .cups-view__track-context {
  overflow: hidden;
  color: var(--rc-muted);
  font-size: .58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell--tracks-control .cups-view__empty {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel);
  color: var(--rc-muted);
}

@media (max-width: 58rem) {
  .page-shell--tracks-control .cups-view__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-shell--tracks-control .cups-view__tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .page-shell--tracks-control .tt-auth > h1 { font-size: 1.65rem; }
  .page-shell--tracks-control .cups-view__directory { display: grid; gap: .25rem; }
  .page-shell--tracks-control .cups-view__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-shell--tracks-control .cups-view__cup {
    min-height: 5.4rem;
    padding: .55rem .25rem;
  }
  .page-shell--tracks-control .cups-view__cup-icon { width: 2.55rem; height: 2.55rem; }
  .page-shell--tracks-control .cups-view__cup-name { font-size: .54rem; }
  .page-shell--tracks-control .cups-view__tracks { grid-template-columns: 1fr; }
  .page-shell--tracks-control .cups-view__track {
    grid-template-columns: 7rem minmax(0, 1fr);
    min-height: 4.95rem;
  }
  .page-shell--tracks-control .cups-view__track-frame {
    width: 7rem;
    height: auto;
  }
  .page-shell--tracks-control .cups-view__track-name { font-size: .78rem; }
}

/* 42rem, not 40rem: the desktop standings table needs 625 px and between 641
   and 653 px its wrapper only had 611-623, so the right-hand columns were cut
   off by the wrapper's hidden overflow. The timing-row composition below
   carries every one of those columns with its own visible label. */
@media (max-width: 42rem) {
  .page-shell--ranking-pilot .tt-auth {
    padding-block-end: calc(5.25rem + env(safe-area-inset-bottom));
  }

  /* Preserve the existing five destinations, fix the cascade that printed
     both desktop and mobile labels, and keep the safe-area above the bar. */
  .page-shell--ranking-pilot .site-nav__links > .site-nav__link { font-size: 0; }
  .page-shell--ranking-pilot .site-nav__links > .site-nav__link::after { font-size: .64rem; }
  .page-shell--ranking-pilot .site-nav__links {
    min-height: 4rem;
    background: rgb(8 11 15 / 98%);
    box-shadow: 0 -1px 0 var(--rc-seam);
  }

  .page-shell--ranking-pilot .tt-auth > h1 { font-size: 1.65rem; }
  .page-shell--ranking-pilot .subnav { width: 100%; }
  .page-shell--ranking-pilot .subnav__tab { flex: 1 1 50%; text-align: center; }

  .page-shell--ranking-pilot .tt-standing__console-header {
    grid-template-columns: 1fr;
    gap: .35rem;
    padding-inline: .65rem;
  }
  .page-shell--ranking-pilot .tt-standing__intro {
    overflow: visible;
    font-size: .7rem;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal;
  }

  .page-shell--ranking-pilot .tt-standing__headline .rank-card {
    grid-template-columns: 1fr;
  }
  .page-shell--ranking-pilot .tt-standing__headline .rank-card__title {
    padding: 0 0 .4rem;
    border: 0;
    border-bottom: 1px solid var(--rc-seam);
  }
  .page-shell--ranking-pilot .tt-standing__headline .rank-card__body {
    grid-template-columns: 1fr;
  }
  .page-shell--ranking-pilot .rank-card__action { justify-self: stretch; justify-content: center; }

  .page-shell--ranking-pilot .tt-standing__controls {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .page-shell--ranking-pilot .tt-standing__control-group--view { grid-column: 1 / -1; }
  .page-shell--ranking-pilot .tt-standing__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .page-shell--ranking-pilot .tt-standing__tab {
    min-width: 0;
    white-space: normal;
  }
  .page-shell--ranking-pilot .tt-standing__reset { grid-column: 1 / -1; }
  .page-shell--ranking-pilot .tt-standing__toggle { width: 100%; }
  /* The measured Vivo X200 Pro defect: at 360 px the Tracks group had 163 px
     for a `Base 48 / BCP 48 / All 96` segmented control whose labels could not
     wrap, so it needed 184 px and `All 96` was cut off at the panel edge. The
     labels stay complete and wrap instead. */
  .page-shell--ranking-pilot .tt-standing__toggle-button {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: .3rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .page-shell--ranking-pilot .tt-standing__comparison {
    grid-template-columns: 1fr;
    gap: .65rem;
    padding: .7rem;
  }
  .page-shell--ranking-pilot .tt-standing__comparison-header,
  .page-shell--ranking-pilot .tt-standing__references { grid-column: 1; }
  .page-shell--ranking-pilot .tt-standing__comparison-header { display: grid; gap: .2rem; }
  .page-shell--ranking-pilot .tt-standing__references { align-items: stretch; }
  .page-shell--ranking-pilot .tt-standing__references > strong { flex-basis: 100%; }
  .page-shell--ranking-pilot .tt-standing__reference-button { flex: 1 1 9.5rem; justify-content: flex-start; }
  .page-shell--ranking-pilot .tt-standing__selected { align-items: flex-start; }

  .page-shell--ranking-pilot .tt-standing__content > .rank-card {
    grid-template-columns: 1fr;
  }
  .page-shell--ranking-pilot .tt-standing__content > .rank-card .rank-card__title {
    padding: 0 0 .4rem;
    border: 0;
    border-bottom: 1px solid var(--rc-seam);
  }
  .page-shell--ranking-pilot .tt-standing__content > .rank-card .rank-card__body {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .page-shell--ranking-pilot .tt-standing__content .rank-card .tt-standing__search { grid-column: 1 / -1; width: 100%; }

  /* Total and Medals become deliberate timing rows. Every desktop column is
     still present; labels move into the row instead of requiring a swipe. */
  .page-shell--ranking-pilot .tt-standing__table-wrap--standing { overflow: visible; border: 0; background: var(--rc-seam); }
  .page-shell--ranking-pilot .tt-standing__standings { display: block; width: 100%; }
  .page-shell--ranking-pilot .tt-standing__standings thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .page-shell--ranking-pilot .tt-standing__standings tbody { display: grid; gap: 1px; }
  .page-shell--ranking-pilot .tt-standing__standing-row {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    grid-template-areas:
      "rank player action"
      "rank mastery tracks"
      "rank total average"
      "rank delta delta";
    gap: .35rem .55rem;
    min-width: 0;
    padding: .65rem;
    background: var(--rc-panel);
  }
  .page-shell--ranking-pilot .tt-standing__standing-row[hidden] { display: none; }
  .page-shell--ranking-pilot .tt-standing__standing-row > td {
    display: flex;
    gap: .35rem;
    align-items: baseline;
    min-width: 0;
    padding: 0;
    border: 0;
    white-space: normal;
  }
  .page-shell--ranking-pilot .tt-standing__standing-row > td::before {
    content: attr(data-label);
    color: var(--rc-muted);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: .55rem;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  .page-shell--ranking-pilot .tt-standing__standing-rank {
    grid-area: rank;
    align-items: flex-start;
    justify-content: center;
    padding-top: .1rem;
    font-size: .78rem;
  }
  .page-shell--ranking-pilot .tt-standing__standing-rank::before,
  .page-shell--ranking-pilot .tt-standing__standing-player::before,
  .page-shell--ranking-pilot .tt-standing__standing-action::before { display: none; }
  .page-shell--ranking-pilot .tt-standing__standing-player { grid-area: player; align-self: center; }
  .page-shell--ranking-pilot .tt-standing__standing-mastery { grid-area: mastery; }
  .page-shell--ranking-pilot .tt-standing__standing-total { grid-area: total; }
  .page-shell--ranking-pilot .tt-standing__standing-average { grid-area: average; justify-content: flex-end; }
  .page-shell--ranking-pilot .tt-standing__standing-tracks { grid-area: tracks; justify-content: flex-end; }
  .page-shell--ranking-pilot .tt-standing__standing-delta { grid-area: delta; padding-top: .3rem; border-top: 1px solid var(--rc-seam); }
  .page-shell--ranking-pilot .tt-standing__standing-action { grid-area: action; justify-content: flex-end; }
  .page-shell--ranking-pilot .tt-standing__standing-action button { min-width: 0; padding: .2rem .45rem; }
  .page-shell--ranking-pilot .tt-standing__standing-medal { justify-content: flex-end; }
  .page-shell--ranking-pilot .tt-standing__standings--medals .tt-standing__standing-row {
    grid-template-areas:
      "rank player action"
      "rank mastery tracks"
      "rank total average";
  }
  .page-shell--ranking-pilot .tt-standing__standings--medals .tt-standing__standing-medal--gold { grid-area: mastery; }
  .page-shell--ranking-pilot .tt-standing__standings--medals .tt-standing__standing-medal--silver { grid-area: tracks; }
  .page-shell--ranking-pilot .tt-standing__standings--medals .tt-standing__standing-medal--bronze { grid-area: total; justify-content: flex-start; }

  .page-shell--ranking-pilot .tt-standing__distribution {
    width: 100%;
    table-layout: fixed;
  }
  .page-shell--ranking-pilot .tt-standing__distribution th,
  .page-shell--ranking-pilot .tt-standing__distribution td { padding: .38rem .3rem; }
  .page-shell--ranking-pilot .tt-standing__distribution-bar {
    min-width: 0;
    padding: .18rem .28rem;
  }

  .page-shell--ranking-pilot .tt-standing__track-toolbar { align-items: stretch; padding: .6rem; }
  .page-shell--ranking-pilot .tt-standing__track-filter { width: 100%; }
  .page-shell--ranking-pilot .tt-standing__track-count { align-self: end; white-space: nowrap; }

  /* Delta is a responsive comparison matrix, not a shrunken desktop table.
     The real preview and cup stay in the left identity cell; up to three
     time/gap/mastery columns share the remaining width. */
  .page-shell--ranking-pilot .tt-standing__table-wrap--tracks { overflow: visible; }
  .page-shell--ranking-pilot .tt-standing__tracks { display: block; width: 100%; }
  .page-shell--ranking-pilot .tt-standing__tracks thead,
  .page-shell--ranking-pilot .tt-standing__tracks tbody { display: block; }
  .page-shell--ranking-pilot .tt-standing__tracks thead {
    position: sticky;
    z-index: 5;
    top: 3rem;
  }
  .page-shell--ranking-pilot .tt-standing__tracks tr {
    display: grid;
    grid-template-columns: minmax(7.2rem, 1.12fr) repeat(var(--comparison-count), minmax(0, 1fr));
    width: 100%;
  }
  .page-shell--ranking-pilot .tt-standing__tracks thead th {
    display: block;
    width: auto;
    min-width: 0;
    padding: .38rem .3rem;
    border-bottom: 1px solid var(--rc-seam);
    background: #0b0f14;
  }
  .page-shell--ranking-pilot .tt-standing__tracks thead button {
    padding: .2rem;
    font-size: .52rem;
  }
  .page-shell--ranking-pilot .tt-standing__tracks thead th:not(:first-child) button {
    font-size: 0;
  }
  .page-shell--ranking-pilot .tt-standing__tracks thead th:not(:first-child) button::after {
    content: attr(data-short-label);
    font-size: .52rem;
  }
  .page-shell--ranking-pilot .tt-standing__tracks tbody tr { height: 4.35rem; }
  .page-shell--ranking-pilot .tt-standing__tracks tbody th,
  .page-shell--ranking-pilot .tt-standing__tracks tbody td {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: .3rem;
    border-bottom: 1px solid var(--rc-seam);
  }
  .page-shell--ranking-pilot .tt-standing__tracks tbody th.tt-standing__track-art {
    position: static;
    width: auto;
    min-width: 0;
  }
  .page-shell--ranking-pilot .tt-standing__track-label { min-width: 0; }
  .page-shell--ranking-pilot .tt-standing__track-cup { width: 1.15rem; height: 1.15rem; }
  .page-shell--ranking-pilot .tt-standing__track-copy { min-width: 0; max-width: none; padding: .16rem .22rem; }
  .page-shell--ranking-pilot .tt-standing__track-copy strong { font-size: .58rem; }
  .page-shell--ranking-pilot .tt-standing__track-copy small { font-size: .48rem; }
  .page-shell--ranking-pilot .tt-standing__track-value { gap: .08rem; }
  .page-shell--ranking-pilot .tt-standing__track-value > strong { font-size: .64rem; }
  .page-shell--ranking-pilot .tt-standing__track-value .delta-badge { font-size: .52rem; }
  .page-shell--ranking-pilot .tt-standing__track-value .mastery-badge { padding: .04rem .18rem; font-size: .48rem; }
}

/* Track phone projection intentionally comes after every legacy breakpoint.
   The combined shell selector prevents late generic timing rules from hiding
   real result metadata. */
/* The complete track projection runs to 50rem, not 35rem. Between 561 and
   799 px the 11-column tower needs 744 px and `section.public-time-trials`
   hides its overflow, so up to 204 px of every row - rank bar, gap, evidence
   - was cut off on large phones, foldables, split screens and 768 px tablets.
   The projection below keeps every one of those cells reachable; the tower
   returns unchanged as soon as it fits. */
@media (max-width: 49.99rem) {
  .page-shell--timing-tower.page-shell--track-control .track-board__columns { display: none; }
  .page-shell--timing-tower.page-shell--track-control .track-board__row {
    grid-template-columns: 1.2rem 1rem minmax(0, 1fr) 3.9rem 3.4rem 1.55rem;
    grid-template-areas:
      "rank flag player player time time"
      "rank combo combo combo date evidence"
      "rank shroom shroom coins delta delta";
    gap: .24rem .45rem;
    min-height: 4.65rem;
    padding: .42rem .45rem;
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__rank {
    grid-area: rank;
    align-self: start;
    padding-top: .08rem;
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__flag-cell {
    display: block;
    grid-area: flag;
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > :nth-child(3) { grid-area: player; }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__combo {
    display: flex;
    grid-area: combo;
    width: auto;
    min-width: 0;
    color: var(--rc-muted);
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > :is(
    .track-board__combo,
    .track-board__shroom,
    .track-board__coins,
    .track-board__date
  )::before {
    margin-right: .25rem;
    color: #596572;
    font-family: var(--rc-time-font);
    font-size: .48rem;
    letter-spacing: .04em;
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__combo::before { content: "BUILD"; }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__shroom::before { content: "SH"; }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__coins::before { content: "COIN"; }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__date::before { content: "AGE"; }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__shroom {
    display: flex;
    align-items: center;
    grid-area: shroom;
    color: var(--rc-muted);
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__coins {
    display: flex;
    grid-area: coins;
    justify-content: flex-start;
    width: auto;
    color: var(--rc-muted);
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__time { grid-area: time; }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__delta { grid-area: delta; }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__date {
    display: flex;
    align-items: center;
    grid-area: date;
    min-width: 2.7rem;
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__evidence {
    display: grid;
    grid-area: evidence;
    width: 1.55rem;
    height: 1.55rem;
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__gap-meter { display: none; }
  .page-shell--timing-tower.page-shell--track-control .track-board__details {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

/* ---------------------------------------------------------------------------
   P1 · Record control
   --------------------------------------------------------------------------- */

.page-shell--records-control .tt-auth {
  padding-block-start: var(--sp-5);
}

.page-shell--records-control .tt-auth > h1 {
  position: relative;
  padding-left: var(--sp-4);
}

.page-shell--records-control .tt-auth > h1::before {
  content: "";
  position: absolute;
  inset: .18em auto .12em 0;
  width: 2px;
  background: var(--rc-cyan);
}

.page-shell--records-control .tt-auth > .tt-auth__status {
  margin-bottom: var(--sp-4);
}

.page-shell--records-control .records {
  display: grid;
  gap: var(--sp-3);
  width: 100%;
}

.page-shell--records-control .records__console-header {
  padding: .7rem .85rem;
  border-block: 1px solid var(--rc-seam);
  background: rgb(16 21 27 / 72%);
}

.page-shell--records-control .records__console-label {
  margin: 0;
  color: var(--rc-cyan);
  font-family: var(--rc-time-font);
  font-size: .63rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.page-shell--records-control .records__status {
  margin: 0;
  padding: .45rem .7rem;
  border-left: 2px solid var(--rc-cyan);
  background: #0c1117;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .62rem;
}

.page-shell--records-control .records__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  overflow: hidden;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-md);
  background: var(--rc-seam);
}

.page-shell--records-control .records__card {
  min-width: 0;
  padding: .8rem;
  border: 0;
  border-radius: 0;
  background: var(--rc-panel);
}

.page-shell--records-control .records__card h3 {
  margin: 0;
  padding: 0 0 .55rem;
  border-bottom: 1px solid var(--rc-seam);
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .62rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.page-shell--records-control .records__holders {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}

.page-shell--records-control .records__holder {
  display: grid;
  grid-template-columns: 2rem 2rem minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
  min-width: 0;
  min-height: 3.15rem;
  padding: .45rem .55rem;
  border: 0;
  border-bottom: 1px solid var(--rc-seam);
  border-radius: 0;
  background: transparent;
}

.page-shell--records-control .records__holder:last-child { border-bottom: 0; }

.page-shell--records-control .records__holder--top {
  background: rgb(242 193 78 / 7%);
  box-shadow: inset 2px 0 var(--rc-gold);
}

.page-shell--records-control .records__medal {
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .66rem;
  font-weight: 800;
}

.page-shell--records-control .records__holder--top .records__medal {
  color: var(--rc-gold);
}

.page-shell--records-control .records__avatar-slot {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
}

.page-shell--records-control .records__avatar {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.page-shell--records-control .records__holder .tt-auth__link {
  overflow: hidden;
  color: var(--rc-copy);
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell--records-control .records__value {
  color: #aeb9c5;
  font-family: var(--rc-time-font);
  font-size: .62rem;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  white-space: nowrap;
}

.page-shell--records-control .records__card--champions {
  grid-column: 1 / -1;
}

.page-shell--records-control .records__card--champions .records__holders {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-shell--records-control .records__card--champions .records__holder {
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
}

.page-shell--records-control .records__card--champions .records__medal {
  color: var(--rc-gold);
  font-size: .55rem;
}

@media (max-width: 48rem) {
  .page-shell--records-control .records__grid { grid-template-columns: 1fr; }
  .page-shell--records-control .records__card--champions { grid-column: 1; }
  .page-shell--records-control .records__card--champions .records__holders { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .page-shell--records-control .tt-auth > h1 { font-size: 1.65rem; }
  .page-shell--records-control .records__card { padding: .65rem; }
  .page-shell--records-control .records__holder {
    grid-template-columns: 1.55rem 1.75rem minmax(0, 1fr) auto;
    gap: .4rem;
    min-height: 3rem;
    padding: .42rem .35rem;
  }
  .page-shell--records-control .records__avatar-slot,
  .page-shell--records-control .records__avatar { width: 1.75rem; height: 1.75rem; }
  .page-shell--records-control .records__holder .tt-auth__link { font-size: .78rem; }
  .page-shell--records-control .records__value { font-size: .6rem; }
  .page-shell--records-control .records__card--champions .records__holder {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  }
}

/* ---------------------------------------------------------------------------
   P2 · Player Control

   Profile identity and career facts use the shared Race Control vocabulary.
   These selectors are route-scoped: Tournament and operator surfaces never
   receive either Player class.
   --------------------------------------------------------------------------- */

.page-shell--player-control .tt-auth > h1 {
  position: relative;
  padding-left: var(--sp-4);
}

.page-shell--player-control .tt-auth > h1::before {
  content: "";
  position: absolute;
  inset: .18em auto .12em 0;
  width: 2px;
  background: var(--rc-cyan);
}

.page-shell--player-control .tt-auth__content {
  display: grid;
  gap: var(--sp-3);
}

.page-shell--player-control .profile-controls {
  align-items: center;
  min-height: 2.7rem;
  margin: 0;
  padding: .45rem .65rem;
  border-block: 1px solid var(--rc-seam);
  background: rgb(16 21 27 / 72%);
}

.page-shell--player-control .profile-controls > .tt-auth__link:first-child {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin: 0 auto 0 0;
  padding: .35rem .55rem;
  border: 1px solid var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  color: var(--rc-copy);
  font-size: .72rem;
  text-decoration: none;
}

.page-shell--player-control .profile-controls > .tt-auth__link:first-child::before {
  content: "VS";
  margin-right: .45rem;
  color: var(--rc-cyan);
  font-family: var(--rc-time-font);
  font-size: .58rem;
  letter-spacing: .08em;
}

.page-shell--player-control .public-player {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  min-width: 0;
  padding: 1px;
  overflow: hidden;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-md);
  background: var(--rc-seam);
}

.page-shell--player-control .public-player > :is(
  .public-player__identity,
  .public-player__preferences,
  .subnav,
  div:nth-of-type(n + 3),
  h3,
  .public-player__aliases
) { grid-column: 1 / -1; }

.page-shell--player-control .public-player__identity {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: .2rem 1rem;
  align-items: center;
  min-width: 0;
  padding: .85rem 1rem 1rem;
  background: var(--rc-panel);
}

.page-shell--player-control .public-player__identity-label {
  grid-column: 1 / -1;
  margin: 0 0 .4rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rc-seam);
  color: var(--rc-cyan);
  font-family: var(--rc-time-font);
  font-size: .63rem;
  font-weight: 750;
  letter-spacing: .085em;
}

.page-shell--player-control .public-player__identity-copy {
  grid-column: 2;
  grid-row: 2 / 4;
  min-width: 0;
}

.page-shell--player-control .public-player__identity h2 {
  display: flex;
  gap: .45rem;
  align-items: center;
  margin: 0;
  color: var(--rc-copy);
  font-size: clamp(1.45rem, 3vw, 2rem);
  letter-spacing: -.025em;
}

.page-shell--player-control .public-player__status {
  margin: .25rem 0 0;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .72rem;
}

.page-shell--player-control .public-player__flag {
  width: 1.35rem;
  margin: 0;
  border: 1px solid var(--rc-seam-strong);
  border-radius: 2px;
}

.page-shell--player-control .public-player__hero { display: contents; }

.page-shell--player-control .public-player__avatar {
  grid-column: 1;
  grid-row: 2 / 4;
  place-self: center;
  width: 4.75rem;
  height: 4.75rem;
  object-fit: contain;
}

.page-shell--player-control .public-player__rating {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  margin: 0;
  padding: .35rem .55rem;
  border: 1px solid var(--rc-gold);
  border-radius: var(--rc-radius-sm);
  background: rgb(242 193 78 / 7%);
  color: var(--rc-gold);
  font-family: var(--rc-time-font);
  font-size: .72rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.page-shell--player-control .public-player__hero > .tt-auth__button {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  min-height: 2.2rem;
  padding: .45rem .7rem;
  border-color: var(--rc-seam-strong);
  background: var(--rc-panel-raised);
  color: var(--rc-copy);
  font-size: .72rem;
}

.page-shell--player-control .public-player__preferences {
  display: grid;
  grid-template-columns: minmax(12rem, .7fr) minmax(0, 1.3fr);
  grid-template-rows: auto auto;
  gap: .15rem 1rem;
  align-items: center;
  margin: 0;
  padding: .75rem 1rem;
  border: 0;
  border-radius: 0;
  background: var(--rc-panel);
}

.page-shell--player-control .public-player__preferences h3 {
  margin: 0;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .62rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.page-shell--player-control .public-player__preferences > p {
  margin: .2rem 0 0;
  color: var(--rc-muted);
  font-size: .72rem;
}

.page-shell--player-control .public-player__favorite-parts {
  grid-column: 2;
  grid-row: 1 / 3;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--rc-seam);
  background: var(--rc-seam);
}

.page-shell--player-control .public-player__favorite-parts figure {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  gap: .45rem;
  align-items: center;
  min-width: 0;
  min-height: 3.45rem;
  padding: .35rem .45rem;
  background: #0d1218;
  text-align: left;
}

.page-shell--player-control .public-player__favorite-parts img {
  width: 2.8rem;
  height: 2.8rem;
  object-fit: contain;
}

.page-shell--player-control .public-player__favorite-parts figcaption {
  overflow: hidden;
  color: var(--rc-copy);
  font-size: .68rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  /* Part names are single unbreakable words ("Biddybuggy"); without this the
     last two pixels of the name were cut off in the narrower caption cells. */
  overflow-wrap: anywhere;
}

.page-shell--player-control .subnav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--rc-panel);
}

.page-shell--player-control .subnav__tab {
  min-height: 2.65rem;
  padding: .65rem .85rem;
  border: 0;
  border-right: 1px solid var(--rc-seam);
  border-radius: 0;
  color: var(--rc-muted);
  font-size: .74rem;
  text-align: center;
}

.page-shell--player-control .subnav__tab:last-child { border-right: 0; }
.page-shell--player-control .subnav__tab:hover { background: var(--rc-panel-raised); color: var(--rc-copy); }
.page-shell--player-control .subnav__tab--active {
  background: var(--rc-cyan-soft);
  color: var(--rc-cyan);
  box-shadow: inset 0 -2px var(--rc-cyan);
}

.page-shell--player-overview .public-player > div:nth-of-type(1),
.page-shell--player-overview .public-player > div:nth-of-type(2) {
  min-width: 0;
  background: var(--rc-panel);
}

.page-shell--player-overview .rating-graph,
.page-shell--player-overview .tournament-career {
  height: 100%;
  margin: 0;
  padding: .8rem 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-shell--player-overview :is(.rating-graph__title, .tournament-career__title) {
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .62rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.page-shell--player-overview .rating-graph__caption,
.page-shell--player-overview .tournament-career__note { color: var(--rc-muted); }
.page-shell--player-overview .rating-graph__svg { max-height: 14rem; }

.page-shell--player-overview .tournament-career__totals {
  color: var(--rc-copy);
  font-size: .76rem;
  line-height: 1.45;
}

.page-shell--player-overview .tournament-career__nemesis {
  padding: .4rem 0;
  border-block: 1px solid var(--rc-seam);
  color: var(--rc-gold);
  font-size: .72rem;
}

.page-shell--player-overview .tournament-career__list { gap: 0; }
.page-shell--player-overview .tournament-career__list li {
  padding: .3rem 0;
  border-bottom: 1px solid var(--rc-seam);
  color: #aeb9c5;
  font-size: .68rem;
  line-height: 1.35;
}

.page-shell--player-overview .public-player > div:nth-of-type(n + 3) {
  min-width: 0;
  padding: .8rem 1rem;
  background: var(--rc-panel);
}

.page-shell--player-overview .career { gap: .7rem; margin: 0; }
.page-shell--player-overview .career > [role="status"]:empty { display: none; }
.page-shell--player-overview .career > h3,
.page-shell--player-overview .public-player > h3 {
  margin: 0;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .62rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.page-shell--player-overview .career__chips {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--rc-seam);
  background: var(--rc-seam);
}

.page-shell--player-overview .career__chip {
  min-width: 0;
  padding: .65rem .7rem;
  border: 0;
  border-radius: 0;
  background: #0d1218;
}

.page-shell--player-overview .career__chip--150,
.page-shell--player-overview .career__chip--200 {
  color: var(--rc-copy);
  box-shadow: inset 0 2px var(--rc-seam-strong);
}

.page-shell--player-overview .career__chip strong {
  color: var(--rc-copy);
  font-family: var(--rc-time-font);
  font-size: .95rem;
}

.page-shell--player-overview .career__chip span {
  color: var(--rc-muted);
  font-size: .62rem;
}

.page-shell--player-overview .career__rating {
  padding: .75rem 1rem;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-sm);
  background: #0d1218;
}

.page-shell--player-overview .career__rating h4 {
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .62rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.page-shell--player-overview .career__rating-summary {
  color: var(--rc-copy);
  font-family: var(--rc-time-font);
  font-size: .72rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.page-shell--player-overview .career__chart { max-height: 11rem; }

.page-shell--player-overview .public-player > h3 {
  margin: 0;
  padding: .8rem 1rem .2rem;
  background: var(--rc-panel);
}

.page-shell--player-overview .public-player__aliases {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1px;
  margin: 0;
  padding: .2rem 1rem .9rem;
  background: var(--rc-panel);
}

.page-shell--player-overview .public-player__aliases li {
  min-width: 0;
  padding: .6rem .7rem;
  border: 1px solid var(--rc-seam);
  border-radius: 0;
  background: #0d1218;
}

.page-shell--player-overview .public-player__aliases strong { font-size: .78rem; }
.page-shell--player-overview .public-player__aliases span { color: var(--rc-muted); font-size: .66rem; }

@media (max-width: 60rem) {
  .page-shell--player-control .public-player { grid-template-columns: 1fr; }
  .page-shell--player-overview .public-player > div:nth-of-type(1),
  .page-shell--player-overview .public-player > div:nth-of-type(2) { grid-column: 1; }
  .page-shell--player-control .public-player__preferences {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .page-shell--player-control .public-player__favorite-parts {
    grid-column: 1;
    grid-row: 3;
    margin-top: .55rem;
  }
}

@media (max-width: 40rem) {
  .page-shell--player-control .tt-auth > h1 { font-size: 1.65rem; }
  .page-shell--player-control .profile-controls { padding-inline: .45rem; }
  .page-shell--player-control .profile-controls > .tt-auth__link:first-child {
    width: 100%;
    justify-content: center;
  }
  .page-shell--player-control .public-player__identity {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: .2rem .75rem;
    padding: .7rem .75rem .8rem;
  }
  .page-shell--player-control .public-player__avatar {
    width: 3.9rem;
    height: 3.9rem;
  }
  .page-shell--player-control .public-player__identity h2 { font-size: 1.35rem; }
  .page-shell--player-control .public-player__rating {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: stretch;
    margin-top: .55rem;
    text-align: center;
  }
  .page-shell--player-control .public-player__hero > .tt-auth__button {
    grid-column: 1 / -1;
    grid-row: 5;
    justify-self: stretch;
    margin-top: .15rem;
  }
  .page-shell--player-control .public-player__preferences { padding: .7rem .75rem; }
  .page-shell--player-control .public-player__favorite-parts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-shell--player-control .public-player__favorite-parts figure {
    grid-template-columns: 2.45rem minmax(0, 1fr);
    min-height: 3.15rem;
    padding: .3rem .35rem;
  }
  .page-shell--player-control .public-player__favorite-parts img { width: 2.4rem; height: 2.4rem; }
  .page-shell--player-control .public-player__favorite-parts figcaption { font-size: .62rem; }
  .page-shell--player-control .subnav__tab {
    min-width: 0;
    min-height: 2.75rem;
    padding-inline: .35rem;
    font-size: .68rem;
  }
  .page-shell--player-overview .rating-graph,
  .page-shell--player-overview .tournament-career,
  .page-shell--player-overview .public-player > div:nth-of-type(n + 3) {
    padding: .7rem .75rem;
  }
  .page-shell--player-overview .career__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-shell--player-overview .career__chip { min-height: 4.2rem; }
  .page-shell--player-overview .rating-graph__svg { max-height: 9rem; }
  .page-shell--player-overview .career__chart { max-height: 8.5rem; }
  .page-shell--player-overview .public-player > h3 { padding-inline: .75rem; }
  .page-shell--player-overview .public-player__aliases { padding-inline: .75rem; }
}

/* P2 · Mastery matrix. The Player identity remains the route context; this
   layer turns the 24 × 4 dataset into a full-width timing matrix. */

.page-shell--mastery-control .public-player { overflow: visible; }
.page-shell--mastery-control .public-player > div { grid-column: 1 / -1; min-width: 0; }

.page-shell--mastery-control .mastery {
  position: relative;
  gap: 1px;
  min-width: 0;
  background: var(--rc-seam);
}

.page-shell--mastery-control .mastery__control {
  display: grid;
  gap: .55rem 1rem;
  padding: .8rem 10rem .8rem 1rem;
  background: var(--rc-panel);
}

.page-shell--mastery-control .mastery__control-label {
  grid-column: 1 / -1;
  margin: 0;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rc-seam);
  color: var(--rc-cyan);
  font-family: var(--rc-time-font);
  font-size: .63rem;
  font-weight: 750;
  letter-spacing: .085em;
}

.page-shell--mastery-control .mastery__control-copy h3 {
  margin: 0;
  color: var(--rc-copy);
  font-size: 1.05rem;
}

.page-shell--mastery-control .mastery__control-copy [role="status"] {
  margin: .2rem 0 0;
  color: var(--rc-muted);
  font-size: .72rem;
}

.page-shell--mastery-control .mastery__modes {
  position: absolute;
  z-index: 2;
  top: 2.65rem;
  right: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(4rem, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
}

.page-shell--mastery-control .mastery__modes .track-board__mode {
  min-height: 2.4rem;
  padding: .5rem .75rem;
  border: 0;
  border-right: 1px solid var(--rc-seam-strong);
  border-radius: 0;
  background: #0d1218;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .68rem;
}

.page-shell--mastery-control .mastery__modes .track-board__mode:last-child { border-right: 0; }
.page-shell--mastery-control .mastery__modes .track-board__mode--active {
  background: var(--rc-cyan-soft);
  color: var(--rc-cyan);
  box-shadow: inset 0 -2px var(--rc-cyan);
}

.page-shell--mastery-control .mastery__content { min-width: 0; background: var(--rc-panel); }

.page-shell--mastery-control .mastery__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
  margin: 0;
  padding: .6rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--rc-seam);
  border-radius: 0;
  background: #0d1218;
}

.page-shell--mastery-control .mastery__badge {
  min-width: 4.8rem;
  padding: .28rem .55rem;
  border-radius: var(--rc-radius-sm);
  font-size: .68rem;
  text-align: center;
}

.page-shell--mastery-control .mastery__totals,
.page-shell--mastery-control .mastery__next,
.page-shell--mastery-control .mastery__chip-time,
.page-shell--mastery-control .mastery__ladder-time {
  font-family: var(--rc-time-font);
  font-variant-numeric: tabular-nums lining-nums;
}

.page-shell--mastery-control .mastery__totals { color: var(--rc-copy); font-size: .75rem; }
.page-shell--mastery-control .mastery__next { color: var(--rc-muted); font-size: .66rem; text-align: right; }

.page-shell--mastery-control .mastery__grid {
  display: grid;
  gap: 1px;
  padding: 1px;
  background: var(--rc-seam);
}

.page-shell--mastery-control .mastery__cup {
  display: grid;
  grid-template-columns: 3.2rem repeat(4, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  background: var(--rc-seam);
}

.page-shell--mastery-control .mastery__cup-icon {
  place-self: center;
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
}

.page-shell--mastery-control .mastery__chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: .2rem .45rem;
  align-content: center;
  min-width: 0;
  min-height: 3.35rem;
  padding: .42rem .55rem;
  border: 1px solid var(--rc-seam) !important;
  border-radius: 0;
  background: #0d1218;
  color: var(--rc-copy);
}

.page-shell--mastery-control .mastery__chip:hover,
.page-shell--mastery-control .mastery__chip:focus-visible {
  background: var(--rc-panel-raised);
  filter: none;
}

.page-shell--mastery-control .mastery__chip[aria-expanded="true"] {
  border-color: var(--rc-cyan) !important;
  background: var(--rc-cyan-soft);
}

.page-shell--mastery-control .mastery__chip-name {
  grid-column: 1;
  grid-row: 1;
  color: var(--rc-copy);
  font-size: .68rem;
}

.page-shell--mastery-control .mastery__chip-tier {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  max-width: 4.5rem;
  padding: .2rem .4rem;
  border-radius: var(--rc-radius-sm);
  font-size: .56rem;
  text-align: center;
}

.page-shell--mastery-control .mastery__chip-time {
  grid-column: 1;
  grid-row: 2;
  color: var(--rc-muted);
  font-size: .62rem;
}

.page-shell--mastery-control .mastery__chip--unplayed { opacity: .5; }

.page-shell--mastery-control .mastery__detail {
  gap: .65rem;
  margin: 0;
  padding: .8rem 1rem;
  border: 0;
  border-radius: 0;
  background: var(--rc-panel-raised);
  box-shadow: inset 2px 0 var(--rc-cyan);
}

.page-shell--mastery-control .mastery__detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .65rem;
  align-items: center;
}

.page-shell--mastery-control .mastery__detail-identity {
  display: grid;
  grid-template-columns: 7.25rem 2.2rem minmax(0, 1fr);
  gap: .55rem;
  align-items: center;
  min-width: 0;
}

.page-shell--mastery-control .mastery__detail-preview {
  width: 7.25rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--rc-seam-strong);
}

.page-shell--mastery-control .mastery__detail-cup { width: 2rem; height: 2rem; object-fit: contain; }
.page-shell--mastery-control .mastery__detail-copy { min-width: 0; }
.page-shell--mastery-control .mastery__detail-copy h4 { margin: 0; color: var(--rc-copy); font-size: .88rem; }
.page-shell--mastery-control .mastery__detail-copy p { margin: .2rem 0 0; color: var(--rc-muted); font-size: .66rem; }
.page-shell--mastery-control .mastery__detail-header > .tt-auth__link { color: var(--rc-cyan); font-size: .7rem; white-space: nowrap; }
.page-shell--mastery-control .mastery__detail-close { margin: 0; border-color: var(--rc-seam-strong); background: #0d1218; color: var(--rc-copy); }

.page-shell--mastery-control .mastery__detail-summary {
  margin: 0;
  padding: .45rem .6rem;
  border-block: 1px solid var(--rc-seam);
  color: var(--rc-copy);
  font-family: var(--rc-time-font);
  font-size: .68rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.page-shell--mastery-control .mastery__ladder {
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--rc-seam);
  background: var(--rc-seam);
}

.page-shell--mastery-control .mastery__ladder-row {
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: .45rem;
  min-width: 0;
  min-height: 2.3rem;
  padding: .35rem .45rem;
  border-radius: 0;
  background: #0d1218;
  font-size: .62rem;
}

.page-shell--mastery-control .mastery__ladder-row--current {
  background: rgb(242 193 78 / 9%);
  outline: 1px solid var(--rc-gold);
  outline-offset: -1px;
}

.page-shell--mastery-control .mastery__ladder-row .mastery__chip-tier {
  display: inline-flex;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  min-height: 1.4rem;
}

.page-shell--mastery-control .mastery__ladder-time { color: var(--rc-muted); white-space: nowrap; }
.page-shell--mastery-control .mastery__ladder-marker { color: var(--rc-gold); font-size: .56rem; }
.page-shell--mastery-control .mastery__ladder-marker:empty { display: none; }

@media (max-width: 58rem) {
  .page-shell--mastery-control .mastery__cup { grid-template-columns: 2.8rem repeat(4, minmax(0, 1fr)); }
  .page-shell--mastery-control .mastery__chip { padding-inline: .4rem; }
}

@media (max-width: 40rem) {
  .page-shell--mastery-control .mastery__control {
    padding: .7rem .75rem;
  }
  .page-shell--mastery-control .mastery__control-label { grid-column: 1; }
  .page-shell--mastery-control .mastery__modes {
    position: sticky;
    top: 3.25rem;
    right: auto;
    z-index: 8;
    width: 100%;
    border-inline: 0;
    border-radius: 0;
    background: rgb(10 13 17 / 98%);
  }
  .page-shell--mastery-control .mastery__summary {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .45rem .6rem;
    padding: .55rem .75rem;
  }
  .page-shell--mastery-control .mastery__next { grid-column: 1 / -1; text-align: left; }
  .page-shell--mastery-control .mastery__grid { gap: 1px; }
  .page-shell--mastery-control .mastery__cup {
    grid-template-columns: 1.8rem repeat(2, minmax(0, 1fr));
    gap: 1px;
  }
  .page-shell--mastery-control .mastery__cup-icon {
    grid-row: span 2;
    width: 1.5rem;
    height: 1.5rem;
  }
  .page-shell--mastery-control .mastery__chip {
    min-height: 3.05rem;
    padding: .32rem .38rem;
  }
  .page-shell--mastery-control .mastery__chip-name { font-size: .66rem; }
  .page-shell--mastery-control .mastery__chip-tier { max-width: 3.2rem; padding-inline: .25rem; font-size: .52rem; }
  .page-shell--mastery-control .mastery__chip-time { font-size: .6rem; }
  .page-shell--mastery-control .mastery__detail { padding: .65rem .75rem; scroll-margin-top: 6.25rem; }
  .page-shell--mastery-control .mastery__detail-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .page-shell--mastery-control .mastery__detail-identity { grid-column: 1 / -1; grid-template-columns: 5.5rem 1.7rem minmax(0, 1fr); }
  .page-shell--mastery-control .mastery__detail-preview { width: 5.5rem; }
  .page-shell--mastery-control .mastery__detail-cup { width: 1.5rem; height: 1.5rem; }
  .page-shell--mastery-control .mastery__ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-shell--mastery-control .mastery__ladder-row {
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: .3rem;
    min-height: 2.45rem;
    padding: .3rem;
  }
  .page-shell--mastery-control .mastery__ladder-marker:not(:empty) { grid-column: 1 / -1; }
}

/* P2 · Player comparison. One axis owns both Players and every track row;
   Tournament head-to-head remains a read-only enrichment. */

.page-shell--compare-control .tt-auth > h1 {
  position: relative;
  padding-left: var(--sp-4);
}

.page-shell--compare-control .tt-auth > h1::before {
  content: "";
  position: absolute;
  inset: .18em auto .12em 0;
  width: 2px;
  background: var(--rc-cyan);
}

.page-shell--compare-control .tt-auth__content { display: grid; gap: var(--sp-3); }
.page-shell--compare-control .profile-controls { margin: 0; }
.page-shell--compare-control .profile-controls:empty { display: none; }

.page-shell--compare-control .compare {
  display: grid;
  gap: 1px;
  width: 100%;
  min-width: 0;
  margin: 0;
  background: var(--rc-seam);
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-md);
}

.page-shell--compare-control .compare__control {
  padding: .75rem 1rem;
  background: var(--rc-panel);
}

.page-shell--compare-control .compare__control-label {
  margin: 0;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rc-seam);
  color: var(--rc-cyan);
  font-family: var(--rc-time-font);
  font-size: .63rem;
  font-weight: 750;
  letter-spacing: .085em;
}

.page-shell--compare-control .compare__control [role="status"] {
  margin: .55rem 0 0;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .68rem;
}

.page-shell--compare-control .compare > .mastery__modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(4rem, 1fr));
  justify-self: end;
  width: 9rem;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  background: #0d1218;
}

.page-shell--compare-control .compare > .mastery__modes:empty { display: none; }

.page-shell--compare-control .compare > .mastery__modes .track-board__mode {
  min-height: 2.4rem;
  padding: .5rem .65rem;
  border: 0;
  border-right: 1px solid var(--rc-seam-strong);
  border-radius: 0;
  background: transparent;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .66rem;
}

.page-shell--compare-control .compare > .mastery__modes .track-board__mode:last-child { border-right: 0; }
.page-shell--compare-control .compare > .mastery__modes .track-board__mode--active {
  background: var(--rc-cyan-soft);
  color: var(--rc-cyan);
  box-shadow: inset 0 -2px var(--rc-cyan);
}

.page-shell--compare-control .compare > div:has(> .h2h) { min-width: 0; }
.page-shell--compare-control .h2h {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem 1rem;
  margin: 0;
  padding: .65rem 1rem;
  border: 0;
  border-radius: 0;
  background: var(--rc-panel);
}

.page-shell--compare-control .h2h__title {
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .61rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.page-shell--compare-control .h2h__line,
.page-shell--compare-control .h2h__tournaments {
  margin: 0;
  color: var(--rc-copy);
  font-family: var(--rc-time-font);
  font-size: .64rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.page-shell--compare-control .h2h__tournaments { color: var(--rc-muted); }

.page-shell--compare-control .compare__board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  background: var(--rc-seam);
}

.page-shell--compare-control .compare__board--setup {
  grid-template-columns: 1fr;
  padding: clamp(1rem, 5vw, 3rem);
  place-items: start stretch;
  background: var(--rc-panel);
}

.page-shell--compare-control .compare__picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: end;
  width: min(100%, 34rem);
  padding: 1rem;
  border: 1px solid var(--rc-seam);
  border-left: 2px solid var(--rc-cyan);
  border-radius: var(--rc-radius-sm);
  background: #0d1218;
}

.page-shell--compare-control .compare__picker label {
  display: grid;
  gap: .45rem;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .63rem;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.page-shell--compare-control .compare__select {
  width: 100%;
  min-width: 0;
  min-height: 2.65rem;
  padding: .55rem .65rem;
  border: 1px solid var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel-raised);
  color: var(--rc-copy);
  font-family: Inter, ui-sans-serif, sans-serif;
  font-size: .8rem;
  text-transform: none;
}

.page-shell--compare-control .compare__picker .tt-auth__button {
  min-height: 2.65rem;
  border-color: var(--rc-cyan);
  background: var(--rc-cyan);
  color: var(--rc-asphalt);
}

.page-shell--compare-control .compare__summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem minmax(0, 1fr);
  gap: 1px;
  align-items: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--rc-seam);
}

.page-shell--compare-control .compare__player {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: .25rem .65rem;
  align-items: center;
  justify-items: stretch;
  min-width: 0;
  padding: .7rem 1rem;
  background: var(--rc-panel);
  text-align: left;
}

.page-shell--compare-control .compare__avatar-slot {
  grid-column: 1;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
}

.page-shell--compare-control .compare__avatar { width: 3.15rem; height: 3.15rem; object-fit: contain; }
.page-shell--compare-control .compare__name { grid-column: 2; grid-row: 1; display: flex; gap: .4rem; align-items: center; min-width: 0; }
.page-shell--compare-control .compare__name .tt-auth__link { overflow: hidden; color: var(--rc-copy); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.page-shell--compare-control .compare__flag { width: 1.15rem; border: 1px solid var(--rc-seam-strong); border-radius: 2px; }
.page-shell--compare-control .compare__tier {
  grid-column: 3;
  grid-row: 1 / 3;
  padding: .25rem .45rem;
  border-radius: var(--rc-radius-sm);
  color: #fff;
  font-size: .58rem;
  text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
}

.page-shell--compare-control .compare__detail {
  grid-column: 2;
  margin: 0;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .6rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.page-shell--compare-control .compare__versus {
  gap: .15rem;
  place-content: center;
  min-width: 0;
  padding: .7rem .5rem;
  background: #0d1218;
}

.page-shell--compare-control .compare__score {
  color: var(--rc-copy);
  font-family: var(--rc-time-font);
  font-size: 1.55rem;
}

.page-shell--compare-control .compare__versus .compare__detail {
  grid-column: auto;
  color: var(--rc-muted);
  font-size: .58rem;
  text-align: center;
}

.page-shell--compare-control .compare__columns {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rc-seam);
}

.page-shell--compare-control .compare__axis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.6rem 3.8rem 4.6rem;
  gap: .45rem;
  padding: .4rem .6rem;
  background: #0c1117;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .55rem;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.page-shell--compare-control .compare__axis span:not(:first-child) { text-align: right; }
.page-shell--compare-control .compare__axis span:nth-child(3) { text-align: center; }

.page-shell--compare-control .compare__cup {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--rc-panel);
}

.page-shell--compare-control .compare__cup-name {
  min-height: 2.35rem;
  margin: 0;
  padding: .35rem .6rem;
  border-bottom: 1px solid var(--rc-seam);
  color: var(--rc-copy);
  font-family: var(--rc-time-font);
  font-size: .62rem;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.page-shell--compare-control .compare__cup-icon { width: 1.55rem; height: 1.55rem; object-fit: contain; }
.page-shell--compare-control .compare__tracks { gap: 0; }

.page-shell--compare-control .compare__row {
  position: relative;
  grid-template-columns: minmax(0, 1fr) 4.6rem 3.8rem 4.6rem;
  gap: .45rem;
  align-items: center;
  min-width: 0;
  min-height: 2rem;
  padding: .3rem .6rem;
  border-bottom: 1px solid var(--rc-seam);
  background: #0d1218;
  font-family: var(--rc-time-font);
  font-size: .61rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.page-shell--compare-control .compare__row:last-child { border-bottom: 0; }
.page-shell--compare-control .compare__track {
  display: block;
  margin-block: 0;
  padding-block: 0;
  color: var(--rc-copy);
  font-family: Inter, ui-sans-serif, sans-serif;
  font-size: .68rem;
}
.page-shell--compare-control .compare__track::after { content: ""; position: absolute; inset: 0; }
.page-shell--compare-control .compare__row:has(.compare__track:focus-visible) { box-shadow: inset 0 0 0 2px var(--rc-cyan); }
.page-shell--compare-control .compare__time { color: var(--rc-muted); }
.page-shell--compare-control .compare__time--best { color: var(--rc-success); }
.page-shell--compare-control .compare__delta { color: var(--rc-muted); font-size: .58rem; }
.page-shell--compare-control .compare__delta--ahead { color: var(--rc-success); }
.page-shell--compare-control .compare__delta--behind { color: var(--rc-danger); }

@media (max-width: 64rem) {
  .page-shell--compare-control .compare__board { grid-template-columns: 1fr; }
  .page-shell--compare-control .compare__summary,
  .page-shell--compare-control .compare__columns { grid-column: 1; }
  .page-shell--compare-control .compare__columns { grid-template-columns: 1fr; }
  .page-shell--compare-control .compare__axis:nth-child(2) { display: none; }
}

@media (max-width: 40rem) {
  .page-shell--compare-control .tt-auth > h1 { font-size: 1.65rem; }
  .page-shell--compare-control .compare { overflow: visible; }
  .page-shell--compare-control .compare__control { padding: .65rem .75rem; }
  .page-shell--compare-control .h2h {
    grid-template-columns: 1fr;
    padding: .6rem .75rem;
  }
  .page-shell--compare-control .h2h__title { grid-row: auto; }
  .page-shell--compare-control .compare > .mastery__modes {
    position: sticky;
    top: 3.25rem;
    z-index: 8;
    justify-self: stretch;
    width: 100%;
    border-inline: 0;
    border-radius: 0;
    background: rgb(10 13 17 / 98%);
  }
  .page-shell--compare-control .compare__summary {
    grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr);
  }
  .page-shell--compare-control .compare__player {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: .15rem .35rem;
    padding: .55rem .45rem;
  }
  .page-shell--compare-control .compare__avatar-slot {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 2.5rem;
    height: 2.5rem;
  }
  .page-shell--compare-control .compare__avatar { width: 2.4rem; height: 2.4rem; }
  .page-shell--compare-control .compare__name { grid-column: 2; grid-row: 1; }
  .page-shell--compare-control .compare__name .tt-auth__link { font-size: .72rem; }
  .page-shell--compare-control .compare__flag { width: .9rem; }
  .page-shell--compare-control .compare__tier {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    padding: .18rem .3rem;
    font-size: .5rem;
  }
  .page-shell--compare-control .compare__detail {
    grid-column: 1 / -1;
    font-size: .52rem;
  }
  .page-shell--compare-control .compare__versus { padding-inline: .2rem; }
  .page-shell--compare-control .compare__score { font-size: 1.05rem; }
  .page-shell--compare-control .compare__versus .compare__detail { font-size: .48rem; }
  .page-shell--compare-control .compare__columns {
    position: sticky;
    top: calc(3.25rem + 2.4rem);
    z-index: 7;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-shell--compare-control .compare__axis:nth-child(2) { display: grid; }
  .page-shell--compare-control .compare__axis {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr);
    gap: .2rem;
    padding: .38rem .45rem;
    font-size: .46rem;
  }
  .page-shell--compare-control .compare__axis span:first-child { display: none; }
  .page-shell--compare-control .compare__axis span:nth-child(2) { text-align: left; }
  .page-shell--compare-control .compare__cup-name { padding-inline: .45rem; }
  .page-shell--compare-control .compare__tracks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--rc-seam);
  }
  .page-shell--compare-control .compare__row {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "track track track"
      "a gap b";
    gap: .2rem .3rem;
    min-height: 3.2rem;
    padding: .35rem .4rem;
    border-bottom: 0;
    font-size: .58rem;
  }
  .page-shell--compare-control .compare__track { grid-area: track; font-size: .66rem; }
  .page-shell--compare-control .compare__row > .compare__time:nth-child(2) { grid-area: a; text-align: left; }
  .page-shell--compare-control .compare__row > .compare__time:nth-child(4) { grid-area: b; text-align: right; }
  .page-shell--compare-control .compare__delta { grid-area: gap; font-size: .54rem; }
  .page-shell--compare-control .compare__board--setup {
    padding: .75rem;
  }
  .page-shell--compare-control .compare__picker {
    grid-template-columns: 1fr;
    width: 100%;
    padding: .8rem;
  }
  .page-shell--compare-control .compare__picker .tt-auth__button { width: 100%; }
}

/* P2 Build configurator — one interactive loadout plus three telemetry banks. */
.page-shell--build-control .tt-auth > h1 {
  border-left: 3px solid var(--rc-cyan);
  padding-left: .75rem;
}

.page-shell--build-control .tt-auth > [role="status"] {
  color: var(--rc-muted);
}

.page-shell--build-control .build {
  width: 100%;
  gap: .85rem;
  margin-inline: 0;
}

.page-shell--build-control .build__control-label {
  margin: 0;
  color: var(--rc-cyan);
  font-family: var(--rc-time-font);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.page-shell--build-control .build__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: stretch;
  gap: 1px;
  padding: 0;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-md);
  overflow: hidden;
  background: var(--rc-seam);
}

.page-shell--build-control .build__summary > .build__control-label {
  grid-column: 1 / -1;
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--rc-seam);
  background: var(--rc-panel);
}

.page-shell--build-control .build__part {
  min-width: 0;
  min-height: 7.2rem;
  gap: .22rem;
  padding: .65rem .45rem;
  border: 0;
  border-radius: 0;
  background: var(--rc-panel);
}

.page-shell--build-control .build__part:hover,
.page-shell--build-control .build__part[aria-expanded="true"] {
  border-color: var(--rc-cyan);
  background: var(--rc-panel-active);
  box-shadow: inset 0 -2px var(--rc-cyan);
}

.page-shell--build-control .build__part:focus-visible,
.page-shell--build-control .build__option:focus-visible,
.page-shell--build-control .build__picker-close:focus-visible,
.page-shell--build-control .build__share:focus-visible,
.page-shell--build-control .build__search:focus-visible {
  outline: 2px solid var(--rc-cyan);
  outline-offset: -2px;
}

.page-shell--build-control .build__part-icon {
  width: min(100%, 5.2rem);
  height: 4rem;
  object-fit: contain;
}

.page-shell--build-control .build__part-name {
  min-width: 0;
  font-size: .82rem;
  line-height: 1.1;
}

.page-shell--build-control .build__part-kind {
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .54rem;
}

.page-shell--build-control .build__share {
  align-self: center;
  min-height: 2.7rem;
  margin: .75rem;
  border-color: var(--rc-cyan);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-cyan);
  color: var(--rc-asphalt);
  white-space: nowrap;
}

.page-shell--build-control .build__pickers {
  gap: 1px;
}

.page-shell--build-control .build__picker {
  padding: 0;
  border: 1px solid var(--rc-seam);
  border-left: 2px solid var(--rc-cyan);
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  background: var(--rc-panel);
}

.page-shell--build-control .build__picker[hidden] { display: none; }

.page-shell--build-control .build__picker-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 24rem) auto;
  align-items: end;
  gap: .5rem .75rem;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--rc-seam);
  background: var(--rc-panel-raised);
}

.page-shell--build-control .build__picker-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.page-shell--build-control .build__picker h3 {
  margin: 0;
  font-size: .85rem;
}

.page-shell--build-control .build__picker-close {
  min-height: 2rem;
  padding: .3rem .65rem;
  border: 1px solid var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  background: transparent;
  color: var(--rc-muted);
  font: inherit;
  font-size: .7rem;
  cursor: pointer;
}

.page-shell--build-control .build__search {
  width: 100%;
  min-height: 2.55rem;
  margin: 0;
  border-color: var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  background: #0d1218;
  font: inherit;
  font-size: .8rem;
}

.page-shell--build-control .build__picker-count {
  margin: 0 0 .65rem;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .58rem;
  white-space: nowrap;
}

.page-shell--build-control .build__options {
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  gap: 1px;
  max-height: 30rem;
  padding: 1px;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--rc-seam);
}

.page-shell--build-control .build__option {
  min-height: 5.5rem;
  padding: .4rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--rc-panel);
  color: #eef5fb;
}

.page-shell--build-control .build__option:hover {
  border-color: var(--rc-cyan);
  background: var(--rc-panel-raised);
}

.page-shell--build-control .build__option--active {
  background: var(--rc-panel-active);
  box-shadow: inset 0 -2px var(--rc-cyan);
}

.page-shell--build-control .build__option-icon {
  width: min(100%, 4.2rem);
  max-width: none;
  height: 3.25rem;
  max-height: none;
  object-fit: contain;
}

.page-shell--build-control .build__option-name {
  font-size: .62rem;
  color: var(--rc-muted);
}

.page-shell--build-control .build__stats {
  gap: 0;
  padding: 0;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-md);
  overflow: hidden;
  background: var(--rc-panel);
}

.page-shell--build-control .build__stats > .build__control-label {
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--rc-seam);
}

.page-shell--build-control .build__legend {
  gap: .7rem 1.1rem;
  padding: .65rem .8rem .35rem;
}

.page-shell--build-control .build__legend-item {
  color: var(--rc-muted);
  font-size: .66rem;
}

.page-shell--build-control .build__legend-swatch {
  width: .65rem;
  height: .65rem;
  border-radius: 2px;
}

.page-shell--build-control .build__feedback {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: .45rem .55rem;
  padding: .35rem .8rem .8rem;
  border-bottom: 1px solid var(--rc-seam);
}

.page-shell--build-control .build__flag {
  align-self: start;
  padding: .25rem .45rem;
  border-radius: var(--rc-radius-sm);
  font-size: .62rem;
}

.page-shell--build-control .build__flag--yes {
  border-color: var(--rc-success);
  background: rgb(127 232 160 / 8%);
  color: var(--rc-success);
}

.page-shell--build-control .build__flag--meta {
  border-color: var(--rc-gold);
  background: rgb(242 193 78 / 8%);
  color: var(--rc-gold);
}

.page-shell--build-control .build__flag--no {
  border-color: var(--rc-seam-strong);
  background: transparent;
  color: var(--rc-muted);
}

.page-shell--build-control .build__feedback p {
  flex-basis: auto;
  align-self: center;
  color: #c9d2dc;
  font-size: .7rem;
  line-height: 1.4;
}

.page-shell--build-control .build__feedback .build__meta-guide {
  grid-column: 1 / -1;
  color: var(--rc-muted);
  font-size: .64rem;
}

.page-shell--build-control .build__meta-example {
  grid-column: 1 / -1;
  padding: .35rem .5rem;
  border-left: 2px solid var(--rc-gold);
  border-radius: 0 var(--rc-radius-sm) var(--rc-radius-sm) 0;
  background: rgb(242 193 78 / 6%);
  color: #e7edf3;
  font-size: .68rem;
  line-height: 1.35;
  text-decoration: none;
}

.page-shell--build-control .build__meta-example:hover {
  background: rgb(242 193 78 / 10%);
  color: #fff;
}

.page-shell--build-control .build__meta-example:focus-visible {
  outline: 2px solid var(--rc-cyan);
  outline-offset: 1px;
}

.page-shell--build-control .build__stat-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rc-seam);
}

.page-shell--build-control .build__stat-group {
  min-width: 0;
  padding: .75rem .8rem .85rem;
  background: var(--rc-panel);
}

.page-shell--build-control .build__stat-section {
  margin: 0 0 .55rem;
  color: #d9e3ec;
  font-family: var(--rc-time-font);
  font-size: .62rem;
}

.page-shell--build-control .build__stat {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "meter meter";
  gap: .25rem .5rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--rc-seam);
}

.page-shell--build-control .build__stat:last-child { border-bottom: 0; }
.page-shell--build-control .build__stat-label { grid-area: label; font-size: .68rem; }

.page-shell--build-control .build__stat-meter {
  grid-area: meter;
  box-sizing: border-box;
  width: 100%;
  height: 1.35rem;
  border-color: var(--rc-seam-strong);
  border-radius: 2px;
  overflow: hidden;
  background: #252b33;
}

.page-shell--build-control .build__stat-fill {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin: 0;
}

.page-shell--build-control .build__stat-segment {
  display: grid;
  flex-basis: 0;
  place-items: center;
  /* Every segment shows its exact contribution, so every segment needs room
     for that number. The floor was previously only on the compact variant, so
     a normal 0.44 segment could still be squeezed to 17 px and clipped. */
  min-width: 1.25rem;
  height: 100%;
  overflow: hidden;
  box-shadow: inset -1px 0 rgb(5 10 15 / 34%);
}

.page-shell--build-control .build__stat-contribution {
  font-family: var(--rc-time-font);
  font-size: .5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.page-shell--build-control .build__stat-segment--compact .build__stat-contribution {
  font-size: .43rem;
}

.page-shell--build-control .build__stat-segment--compact {
  min-width: 1.25rem;
}

.page-shell--build-control .build__stat-tick {
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgb(238 245 251 / 52%) 0 .25rem,
    transparent .25rem calc(100% - .25rem),
    rgb(238 245 251 / 52%) calc(100% - .25rem) 100%
  );
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: 0;
}

.page-shell--build-control .build__stat-value {
  grid-area: value;
  min-width: 0;
  color: #eef5fb;
  font-family: var(--rc-time-font);
  font-size: .65rem;
}

@media (max-width: 48rem) {
  .page-shell--build-control .build__summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-shell--build-control .build__part {
    min-height: 6.7rem;
    padding: .5rem .2rem;
  }
  .page-shell--build-control .build__part-icon {
    width: min(100%, 3.35rem);
    height: 3.1rem;
  }
  .page-shell--build-control .build__part-name { font-size: .66rem; }
  .page-shell--build-control .build__part-kind { font-size: .43rem; }
  .page-shell--build-control .build__share {
    grid-column: 1 / -1;
    width: auto;
    margin: .55rem;
  }
  .page-shell--build-control .build__picker-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .page-shell--build-control .build__options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: 34dvh;
  }
  .page-shell--build-control .build__option {
    min-height: 5.25rem;
    padding: .25rem;
  }
  .page-shell--build-control .build__option-icon {
    width: min(100%, 3.4rem);
    height: 3rem;
  }
  .page-shell--build-control .build__option-name { font-size: .54rem; }
  .page-shell--build-control .build__feedback {
    grid-template-columns: auto auto;
  }
  .page-shell--build-control .build__feedback p { grid-column: 1 / -1; }
  .page-shell--build-control .build__stat-groups {
    grid-template-columns: 1fr;
  }
  .page-shell--build-control .build__stat-group {
    padding-inline: .75rem;
  }
}

/* P2 phase harmonization — verified Player results use timing-board density. */
.page-shell--player-control .public-player > .activity-list {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--rc-seam);
  background: var(--rc-seam);
}

.page-shell--player-control .public-player > .activity-list .activity-list__row {
  position: relative;
  box-sizing: border-box;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  gap: .45rem;
  min-height: 3.5rem;
  padding: .45rem .55rem;
  border: 0;
  background: var(--rc-panel);
}

.page-shell--player-control .public-player > .activity-list .activity-list__thumb {
  width: 1.45rem;
  height: 1.45rem;
  margin-top: 0;
}

.page-shell--player-control .public-player > .activity-list .activity-list__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .15rem .4rem;
  min-width: 0;
}

.page-shell--player-control .public-player > .activity-list .activity-list__headline {
  display: contents;
}

.page-shell--player-control .public-player > .activity-list .activity-list__headline > .tt-auth__link {
  grid-column: 1;
  grid-row: 1;
  /* The label ellipsises by design, but the box itself must still stay inside
     its column; below 350 px it reached 18 px past the panel edge. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell--player-control .public-player > .activity-list .activity-list__headline > .activity__mode {
  grid-column: 2;
  grid-row: 1;
}

.page-shell--player-control .public-player > .activity-list .activity-list__headline > .activity-list__when {
  grid-column: 1;
  grid-row: 2;
  text-align: left;
}

.page-shell--player-control .public-player > .activity-list .activity-list__detail {
  grid-column: 2;
  grid-row: 2;
  justify-content: flex-end;
  margin: 0;
  color: #eef5fb;
  font-family: var(--rc-time-font);
  font-size: .67rem;
}

.page-shell--player-control .public-player > .activity-list .activity-list__detail:has(.activity-list__when:not(:empty)) {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-content: space-between;
}

.page-shell--player-control .public-player > .activity-list .activity-list__actions {
  grid-column: 1 / -1;
}

.page-shell--player-control .public-player > .activity-list .activity-list__actions:not(:empty) {
  margin-top: .35rem;
}

.page-shell--player-control .public-player > .activity-list .activity-list__row:has(.activity-list__actions:empty) .activity-list__headline > .tt-auth__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.page-shell--player-control .public-player > .activity-list .activity-list__row:has(.activity-list__headline > .tt-auth__link:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--rc-cyan);
}

@media (max-width: 40rem) {
  .page-shell--player-control .public-player > .activity-list .activity-list__row {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: .35rem;
    min-height: 3.5rem;
    padding: .4rem;
  }
  .page-shell--player-control .public-player > .activity-list .activity-list__thumb {
    width: 1.25rem;
    height: 1.25rem;
    padding-block: var(--sp-2);
    margin-block: calc(-1 * var(--sp-2));
  }
  /* The compressed row height is kept by the negative margin; the padding is
     what makes a 14 px label a reachable target on a phone. */
  .page-shell--player-control .public-player > .activity-list .activity-list__headline > .tt-auth__link {
    padding-block: var(--sp-3);
    margin-block: calc(-1 * var(--sp-3));
    font-size: .66rem;
  }
  .page-shell--player-control .public-player > .activity-list .activity__mode {
    min-width: 1.9rem;
    padding: .12rem .25rem;
    font-size: .52rem;
  }
  .page-shell--player-control .public-player > .activity-list .activity-list__when {
    font-size: .52rem;
  }
}

/* ---------------------------------------------------------------------------
   P3 · Community Activity control

   The public feed is a timing log: one stable identity/context/result axis,
   followed by optional evidence and controls. The route class is never set on
   Tournament surfaces. Compact Home rows reuse the same anatomy at lower
   density without inheriting the full route's control rail.
   --------------------------------------------------------------------------- */

.page-shell--activity-control .tt-auth {
  padding-block-start: var(--sp-5);
}

.page-shell--activity-control .activity {
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: clip;
  border: 1px solid var(--rc-border, var(--border));
  background: var(--rc-surface-1, var(--surface-1));
}

.page-shell--activity-control .activity__header {
  align-items: end;
  padding: .9rem 1rem .75rem;
  border-left: 3px solid var(--rc-cyan, var(--accent));
}

.page-shell--activity-control .activity__title {
  display: grid;
  gap: .18rem;
}

.page-shell--activity-control .activity__control-label {
  margin: 0;
  color: var(--rc-cyan, var(--accent));
  font-family: var(--rc-time-font, "SFMono-Regular", Consolas, monospace);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.page-shell--activity-control .activity__header h2 {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 780;
}

.page-shell--activity-control .activity > [role="status"] {
  margin: 0;
  padding: 0 1rem .8rem;
  color: var(--rc-text-muted, var(--text-muted));
  font-size: .76rem;
}

.page-shell--activity-control .activity__filters {
  gap: 1px;
  margin: 0;
  padding: .55rem 1rem;
  border-block: 1px solid var(--rc-border, var(--border));
  background: var(--rc-surface-0, #0c1015);
}

.page-shell--activity-control .activity__filter-group { gap: 1px; }

.page-shell--activity-control .activity__filter {
  min-width: 4.25rem;
  min-height: 2rem;
  padding: .35rem .65rem;
  border-color: var(--rc-border, var(--border));
  border-radius: .2rem;
  background: var(--rc-surface-1, var(--surface-1));
  color: var(--rc-text-muted, var(--text-muted));
  font-size: .68rem;
}

.page-shell--activity-control .activity__filter--active,
.page-shell--activity-control .activity__filter[data-filter="150"].activity__filter--active,
.page-shell--activity-control .activity__filter[data-filter="200"].activity__filter--active {
  border-color: var(--rc-border-strong, var(--border-strong));
  background: var(--rc-surface-you, var(--surface-you));
  color: var(--rc-cyan, var(--accent));
  box-shadow: inset 0 -2px var(--rc-cyan, var(--accent));
}

.page-shell--activity-control .activity__sections,
.page-shell--activity-control .activity__group,
.page-shell--activity-control .activity-list {
  gap: 0;
}

.page-shell--activity-control .activity__group + .activity__group {
  border-top: 1px solid var(--rc-border-strong, var(--border-strong));
}

.page-shell--activity-control .activity__group-heading {
  margin: 0;
  padding: .7rem 1rem .45rem;
  border-bottom: 1px solid var(--rc-border, var(--border));
  color: var(--rc-text-muted, var(--text-muted));
  background: var(--rc-surface-0, #0c1015);
  font-family: var(--rc-time-font, "SFMono-Regular", Consolas, monospace);
  font-size: .58rem;
}

.page-shell--activity-control .activity-list__row {
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .7rem;
  min-height: 4.4rem;
  padding: .65rem .8rem;
  border: 0;
  border-bottom: 1px solid var(--rc-border, var(--border));
  border-radius: 0;
  background: var(--rc-surface-1, var(--surface-1));
}

.page-shell--activity-control .activity-list__row:last-child {
  border-bottom: 0;
}

.page-shell--activity-control .activity-list__row:hover {
  background: var(--rc-surface-2, var(--surface-2));
}

.page-shell--activity-control .activity-list__row--record,
.page-shell--activity-control .activity-list__row--won {
  box-shadow: inset 2px 0 var(--rc-good, var(--good));
}

.page-shell--activity-control .activity-list__row--lost {
  box-shadow: inset 2px 0 var(--rc-danger, var(--delta-slow));
}

.page-shell--timing-tower .activity-list__row--compact {
  grid-template-columns: 7.5rem minmax(0, 1fr);
  min-height: 5.15rem;
}

.page-shell--activity-control .activity-list__thumb,
.page-shell--timing-tower .activity-list__row--compact .activity-list__thumb,
.page-shell--timing-tower .notifications__item .activity-list__thumb ,
.page-shell--timing-tower .track-record__row .activity-list__thumb {
  position: relative;
  display: block;
  width: 7.5rem;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-top: .05rem;
  border: 1px solid var(--rc-border-strong, var(--border-strong));
  background: var(--rc-surface-2, var(--surface-2));
}

.page-shell--activity-control .activity-list__art,
.page-shell--timing-tower .activity-list__row--compact .activity-list__art,
.page-shell--timing-tower .notifications__item .activity-list__art ,
.page-shell--timing-tower .track-record__row .activity-list__art {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

.page-shell--activity-control .activity-list__thumb::after,
.page-shell--timing-tower .activity-list__row--compact .activity-list__thumb::after,
.page-shell--timing-tower .notifications__item .activity-list__thumb::after ,
.page-shell--timing-tower .track-record__row .activity-list__thumb::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 8%) 30%,
    rgb(0 0 0 / 62%) 100%
  );
  content: "";
  pointer-events: none;
}

.page-shell--activity-control .activity-list__cup,
.page-shell--timing-tower .activity-list__row--compact .activity-list__cup,
.page-shell--timing-tower .notifications__item .activity-list__cup ,
.page-shell--timing-tower .track-record__row .activity-list__cup {
  position: static;
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 85%));
}

.page-shell--activity-control .activity-list__track-label,
.page-shell--timing-tower .activity-list__row--compact .activity-list__track-label,
.page-shell--timing-tower .notifications__item .activity-list__track-label ,
.page-shell--timing-tower .track-record__row .activity-list__track-label {
  position: absolute;
  right: .24rem;
  bottom: .24rem;
  left: .24rem;
  /* The label has to be a flex row for `align-items: flex-end` to mean
     anything. Without it the box laid out as a block, which put the cup mark
     at the TOP of the artwork underneath the engine chip and left the track
     name squeezed into what remained. */
  display: flex;
  align-items: flex-end;
  gap: .24rem;
  min-width: 0;
  z-index: 1;
}

.page-shell--activity-control .activity-list__track-copy,
.page-shell--timing-tower .activity-list__row--compact .activity-list__track-copy,
.page-shell--timing-tower .notifications__item .activity-list__track-copy ,
.page-shell--timing-tower .track-record__row .activity-list__track-copy {
  min-width: 0;
  max-width: calc(100% - 1.45rem);
  gap: .04rem;
  padding: .12rem .2rem;
  border-radius: 2px;
  background: rgb(4 6 9 / 82%);
  line-height: 1.05;
  text-align: left;
}

.page-shell--activity-control .activity-list__track-copy strong,
.page-shell--timing-tower .activity-list__row--compact .activity-list__track-copy strong,
.page-shell--timing-tower .notifications__item .activity-list__track-copy strong ,
.page-shell--timing-tower .track-record__row .activity-list__track-copy strong {
  overflow-wrap: anywhere;
  font-size: .65rem;
  white-space: normal;
}

.page-shell--activity-control .activity-list__track-copy small,
.page-shell--timing-tower .activity-list__row--compact .activity-list__track-copy small,
.page-shell--timing-tower .notifications__item .activity-list__track-copy small ,
.page-shell--timing-tower .track-record__row .activity-list__track-copy small {
  font-size: .52rem;
}

.page-shell--activity-control .activity-list__body {
  grid-template-columns: minmax(13rem, .85fr) minmax(18rem, 1.15fr);
  column-gap: 1.1rem;
  align-items: center;
}

.page-shell--activity-control .activity-list__headline {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  gap: .38rem;
  font-size: .76rem;
}

.page-shell--activity-control .activity__avatar {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.page-shell--activity-control .track-board__flag {
  width: .85rem;
  height: .64rem;
  object-fit: cover;
}

.page-shell--activity-control .activity-list__meta {
  grid-template-columns: 2.1rem minmax(0, 4.5rem) 3.8rem;
  gap: .35rem;
  padding-left: .35rem;
}

.page-shell--activity-control .activity__followed {
  overflow: hidden;
  min-width: 0;
  height: 1rem;
  padding-inline: .25rem;
  border-radius: .15rem;
  font-size: .54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell--activity-control .activity-list__when {
  font-size: .61rem;
}

.page-shell--activity-control .activity-list__detail {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  min-width: 0;
  margin: 0;
  font-size: .7rem;
}

.page-shell--activity-control .activity-list__track {
  overflow: hidden;
  color: var(--rc-text, var(--text));
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell--activity-control .activity-list__facts {
  display: flex;
  /* Time, run count and source are separate facts. Below 325 px they need
     74 px in a 44 px column, so they wrap rather than run past the page. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  color: var(--rc-text-muted, var(--text-muted));
  white-space: nowrap;
}

.page-shell--activity-control .activity-list__facts strong {
  display: inline-block;
  min-width: 5.4rem;
  color: var(--rc-text, var(--text));
  font-family: var(--rc-time-font, "SFMono-Regular", Consolas, monospace);
  font-size: .78rem;
  text-align: right;
}

.page-shell--activity-control .activity-list__body > :is(
  .activity__quick-details,
  .activity__action,
  .activity-list__story,
  .activity__finish-banner,
  .activity__story-controls,
  .activity__runs
) {
  grid-column: 1 / -1;
}

.page-shell--activity-control .activity-list__story {
  min-height: 0;
  margin-top: .32rem;
  font-size: .64rem;
}

.page-shell--activity-control .activity-list__story:empty {
  display: none;
}

.page-shell--activity-control .activity__quick-details {
  min-height: 1.25rem;
  margin-top: .3rem;
}

.page-shell--activity-control .activity__finish-banner {
  display: none;
}

.page-shell--activity-control .activity__story-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-width: 0;
  margin-top: .4rem;
  padding-top: .4rem;
  border-top: 1px solid var(--rc-border, var(--border));
}

.page-shell--activity-control .reactions {
  min-width: 0;
  margin: 0;
}

.page-shell--activity-control :is(.reactions__pill, .reactions__toggle) {
  min-height: 1.9rem;
  padding: .18rem .48rem;
  border-color: var(--rc-border-strong, var(--border-strong));
  border-radius: .2rem;
  background: var(--rc-surface-2, var(--surface-2));
  font-size: .7rem;
}

.page-shell--activity-control .activity__runs-toggle {
  flex: 0 0 auto;
  min-height: 1.9rem;
  padding: .2rem .45rem;
  border: 1px solid var(--rc-border-strong, var(--border-strong));
  border-radius: .2rem;
  color: var(--rc-cyan, var(--accent));
  background: transparent;
  white-space: nowrap;
}

.page-shell--activity-control .activity__runs {
  gap: 1px;
  margin: .5rem 0 0;
  border: 1px solid var(--rc-border, var(--border));
  background: var(--rc-border, var(--border));
}

.page-shell--activity-control .activity__run {
  gap: .55rem;
  padding: .7rem;
  border: 0;
  border-radius: 0;
  background: var(--rc-surface-0, #0c1015);
}

.page-shell--activity-control .activity__lap-table {
  table-layout: fixed;
}

/* Compact Home stories retain the same identity/result anchors. The older
   generic mobile rule stacked every headline child into a separate row. */
.page-shell--timing-tower .activity-list__row--compact .activity-list__headline {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
}

.page-shell--timing-tower .activity-list__row--compact .activity-list__player {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The Activity story row is a two-column log whose floors add up to 514 px.
   Between 641 and 704 px the row only had ~469 px, so the reactions, source
   and detail column were cut off by the section's hidden overflow. The phone
   composition carries the same values and now covers that band. */
@media (max-width: 45rem) {
  .page-shell--activity-control .tt-auth {
    padding-block-start: .75rem;
  }

  .page-shell--activity-control .activity {
    overflow: visible;
  }

  .page-shell--activity-control .activity__header {
    padding: .7rem .7rem .6rem;
  }

  .page-shell--activity-control .activity > [role="status"] {
    padding: 0 .7rem .65rem;
    font-size: .67rem;
  }

  .page-shell--activity-control .activity__filters {
    position: sticky;
    top: 3.25rem;
    z-index: 4;
    padding: .4rem .7rem;
    background: rgb(10 14 19 / 98%);
  }

  .page-shell--activity-control .activity__filter {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.15rem;
  }

  .page-shell--activity-control .activity__filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem;
  }

  .page-shell--activity-control .activity__filter-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-shell--activity-control .activity__filter-group + .activity__filter-group {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .page-shell--activity-control .activity__group-heading {
    padding-inline: .7rem;
  }

  .page-shell--activity-control .activity-list__row {
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: .48rem;
    min-height: 5.15rem;
    padding: .55rem .6rem;
  }

  .page-shell--activity-control .activity-list__thumb,
  .page-shell--timing-tower .activity-list__row--compact .activity-list__thumb,
.page-shell--timing-tower .notifications__item .activity-list__thumb ,
.page-shell--timing-tower .track-record__row .activity-list__thumb {
    width: 7rem;
    height: auto;
  }

  .page-shell--activity-control .activity-list__cup,
  .page-shell--timing-tower .activity-list__row--compact .activity-list__cup,
.page-shell--timing-tower .notifications__item .activity-list__cup ,
.page-shell--timing-tower .track-record__row .activity-list__cup {
    width: 1.05rem;
    height: 1.05rem;
  }

  .page-shell--activity-control .activity-list__track-label,
  .page-shell--timing-tower .activity-list__row--compact .activity-list__track-label,
.page-shell--timing-tower .notifications__item .activity-list__track-label ,
.page-shell--timing-tower .track-record__row .activity-list__track-label {
    gap: .18rem;
  }

  .page-shell--activity-control .activity-list__track-copy,
  .page-shell--timing-tower .activity-list__row--compact .activity-list__track-copy,
.page-shell--timing-tower .notifications__item .activity-list__track-copy ,
.page-shell--timing-tower .track-record__row .activity-list__track-copy {
    max-width: calc(100% - 1.2rem);
    padding: .1rem .16rem;
  }

  .page-shell--activity-control .activity-list__track-copy strong,
  .page-shell--timing-tower .activity-list__row--compact .activity-list__track-copy strong,
.page-shell--timing-tower .notifications__item .activity-list__track-copy strong ,
.page-shell--timing-tower .track-record__row .activity-list__track-copy strong {
    font-size: .64rem;
  }

  .page-shell--activity-control .activity-list__track-copy small,
  .page-shell--timing-tower .activity-list__row--compact .activity-list__track-copy small,
.page-shell--timing-tower .notifications__item .activity-list__track-copy small ,
.page-shell--timing-tower .track-record__row .activity-list__track-copy small {
    font-size: .5rem;
  }

  .page-shell--activity-control .activity-list__body {
    display: grid;
    grid-template-columns: minmax(6.1rem, .68fr) minmax(0, 1.32fr);
    column-gap: .45rem;
    row-gap: 0;
  }

  .page-shell--activity-control .activity-list__headline {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .3rem;
  }

  .page-shell--activity-control .activity-list__headline > .activity__avatar {
    grid-column: 1;
    grid-row: 1;
  }

  .page-shell--activity-control .activity-list__headline > .tt-auth__link {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-shell--activity-control .activity-list__headline > .track-board__flag {
    grid-column: 3;
    grid-row: 1;
  }

  .page-shell--activity-control .activity-list__meta {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    width: 100%;
    margin: .2rem 0 0;
    padding: 0;
  }

  .page-shell--activity-control .activity-list__detail {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: .12rem;
    align-self: start;
    margin-top: 0;
  }

  .page-shell--activity-control .activity-list__facts {
    justify-self: stretch;
    flex-wrap: wrap;
    gap: .08rem .16rem;
    font-size: .58rem;
    white-space: normal;
  }

  .page-shell--activity-control .activity-list__facts strong {
    /* Aligned tabular times, but never wider than the column they sit in. */
    min-width: min(4.65rem, 100%);
    font-size: .68rem;
  }

  .page-shell--activity-control .activity-list__separator {
    display: none;
  }

  .page-shell--activity-control .activity__quick-details {
    gap: .3rem;
    min-height: 1.15rem;
  }

  .page-shell--activity-control .activity__loadout-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .page-shell--activity-control .activity__story-controls {
    align-items: flex-end;
    gap: .4rem;
  }

  .page-shell--activity-control .reactions__pills {
    gap: .2rem;
  }

  .page-shell--activity-control :is(.reactions__pill, .reactions__toggle) {
    min-height: 2.2rem;
  }

  .page-shell--activity-control .activity__runs-toggle {
    min-height: 2.2rem;
    font-size: .64rem;
  }

  .page-shell--activity-control .activity__lap-table :is(th, td) {
    padding-inline: .25rem;
    font-size: .62rem;
  }

  .page-shell--activity-control .activity__loadout {
    flex-wrap: wrap;
  }

  .page-shell--timing-tower .activity-list__row--compact {
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: .42rem;
    min-height: 4.7rem;
    padding-block: .38rem;
  }

  .page-shell--timing-tower .activity-list__row--compact .activity-list__body {
    grid-template-columns: minmax(0, 1fr);
    gap: .1rem;
  }

  .page-shell--timing-tower .activity-list__row--compact .activity-list__headline {
    display: flex;
    gap: .25rem;
    font-size: .65rem;
  }

  .page-shell--timing-tower .activity-list__row--compact .activity-list__meta {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin-left: auto;
  }

  .page-shell--timing-tower .activity-list__row--compact .activity-list__when {
    font-size: .52rem;
  }

  .page-shell--timing-tower .activity-list__row--compact .activity-list__detail {
    gap: .3rem;
    font-size: .58rem;
  }

  .page-shell--timing-tower .activity-list__row--compact .activity-list__facts strong {
    min-width: 4.65rem;
    font-size: .64rem;
  }
}

/* ---------------------------------------------------------------------------
   P3 · Home responsive composition

   Home already owns the correct product content. These rules only make its
   two existing auth states use the proven Race Control hierarchy on a phone.
   --------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .page-shell--timing-tower .signed-out-home__hero {
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: .75rem 1rem;
    min-height: 0;
    padding: 1rem;
  }

  .page-shell--timing-tower .signed-out-home__copy {
    display: contents;
  }

  .page-shell--timing-tower .signed-out-home__logo {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: .35rem;
  }

  .page-shell--timing-tower .signed-out-home__eyebrow {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    line-height: 1.45;
  }

  .page-shell--timing-tower .signed-out-home__hero h1 {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    margin: 0;
    font-size: clamp(2.65rem, 13.5vw, 3.25rem);
    line-height: .86;
  }

  .page-shell--timing-tower .signed-out-home__intro {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: none;
    margin: 0;
    font-size: .78rem;
    line-height: 1.55;
  }

  .page-shell--timing-tower .signed-out-home__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-shell--timing-tower .signed-out-home__summary .timing-summary__cell {
    min-height: 4.35rem;
    padding: .65rem .75rem;
  }

  .page-shell--timing-tower .signed-out-home__action {
    min-height: 5.25rem;
    padding: .625rem;
    border-right: 0;
    border-bottom: 0;
  }

  .page-shell--timing-tower .signed-out-home__action:first-child {
    grid-column: 1 / -1;
    min-height: 4.5rem;
  }

  .page-shell--timing-tower .signed-out-home__action:nth-child(2) {
    border-right: 1px solid var(--border);
  }

  .page-shell--timing-tower .signed-out-home__action:nth-child(n + 2) {
    border-top: 1px solid var(--border);
  }

  .page-shell--timing-tower .signed-out-home__action strong {
    font-size: .78rem;
  }

  .page-shell--timing-tower .signed-out-home__action span {
    font-size: .62rem;
    line-height: 1.25;
  }

  .page-shell--timing-tower .home-more {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--border);
  }

  .page-shell--timing-tower .home-more__link {
    min-height: 4.5rem;
    padding: .75rem;
    border: 0;
    border-radius: 0;
    background: var(--surface-1);
  }

  .page-shell--timing-tower .home-more__link strong {
    font-size: .82rem;
  }

  .page-shell--timing-tower .home-more__link span {
    font-size: .66rem;
    line-height: 1.35;
  }

  .page-shell--timing-tower .home-hero__left {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
    padding: 0;
  }

  .page-shell--timing-tower .home-dashboard .timing-summary__cell {
    min-height: 4.65rem;
    padding: .7rem .85rem;
  }

  .page-shell--timing-tower .home-hero__identity {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: .9rem;
  }

  .page-shell--timing-tower .home-domain {
    width: auto;
    min-width: 0;
    padding: .75rem .9rem;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .page-shell--timing-tower .home-domain + .home-domain {
    padding-top: .75rem;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
  }

  .page-shell--timing-tower .home-hero__identity + .home-domain:has(+ .home-hero__actions) {
    grid-column: 1 / -1;
  }

  .page-shell--timing-tower .home-domain__label,
  .page-shell--timing-tower .home-domain__value {
    min-width: 0;
  }

  .page-shell--timing-tower .home-domain__value {
    line-height: 1.45;
  }

  /* Rank and tier are two independent chips. Keeping them on one line set the
     hero cell's minimum to 148 px, which is wider than the half column a
     360 px phone can give it. */
  .page-shell--timing-tower .home-hero__tier-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: .35rem 0 0;
  }

  .page-shell--timing-tower .home-hero__change {
    margin-top: .45rem;
    font-size: .65rem;
  }

  .page-shell--timing-tower .home-hero__actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: auto;
    margin: 0;
    border-top: 1px solid var(--border);
  }

  .page-shell--timing-tower .home-hero__submit {
    width: 100%;
    min-height: 4.25rem;
    border-radius: 0;
  }

  .page-shell--timing-tower .home-hero__records {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: .8rem .9rem;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   P3 · Community Control

   A deliberately compact aggregate: the opt-in country signal remains the
   only visualization, while existing public routes explain the numbers.
   --------------------------------------------------------------------------- */

.page-shell--community-control .tt-auth {
  padding-block-start: var(--sp-5);
}

.page-shell--community-control .tt-auth > h1 {
  border-left: 3px solid var(--rc-cyan);
  padding-left: .75rem;
}

.page-shell--community-control .community {
  gap: 0;
  width: min(100%, 58rem);
  overflow: hidden;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel);
}

.page-shell--community-control .community__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem .75rem;
  border-left: 3px solid var(--rc-cyan);
}

.page-shell--community-control .community__title {
  display: grid;
  gap: .18rem;
}

.page-shell--community-control .community__control-label {
  margin: 0;
  color: var(--rc-cyan);
  font-family: var(--rc-time-font);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.page-shell--community-control .community__title h2 {
  margin: 0;
  color: var(--rc-copy);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 780;
  line-height: 1.1;
}

.page-shell--community-control .community__status {
  margin: 0;
  padding: 0 1rem .8rem;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .67rem;
}

.page-shell--community-control .community__summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 0;
  border-block: 1px solid var(--rc-seam);
  background: var(--rc-seam);
}

.page-shell--community-control .community__metric {
  min-width: 0;
  min-height: 4.6rem;
  padding: .7rem .85rem;
  border: 0;
  border-radius: 0;
  background: var(--rc-asphalt);
}

.page-shell--community-control .community__metric .timing-summary__value {
  color: var(--rc-copy);
  font-size: 1.2rem;
}

.page-shell--community-control .community__metric .timing-summary__label {
  color: var(--rc-muted);
}

.page-shell--community-control .community__routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--rc-seam);
  background: var(--rc-seam);
}

.page-shell--community-control .community__route {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .2rem .75rem;
  min-width: 0;
  min-height: 4rem;
  padding: .7rem .85rem;
  background: var(--rc-panel-raised);
  color: var(--rc-copy);
  text-decoration: none;
}

.page-shell--community-control .community__route strong {
  align-self: end;
  font-size: .78rem;
}

.page-shell--community-control .community__route > span:not(.community__route-arrow) {
  overflow: hidden;
  color: var(--rc-muted);
  font-size: .64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-shell--community-control .community__route-arrow {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--rc-cyan);
  font-family: var(--rc-time-font);
}

.page-shell--community-control .community__route:hover {
  background: var(--rc-panel-active);
}

.page-shell--community-control .community__route:focus-visible {
  z-index: 1;
  outline: 2px solid var(--rc-cyan);
  outline-offset: -2px;
}

.page-shell--community-control .community__board {
  display: grid;
  gap: 0;
  min-width: 0;
}

.page-shell--community-control .community__board-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--rc-seam);
  background: var(--rc-asphalt);
}

.page-shell--community-control .community__board-header h3 {
  margin: 0;
  color: var(--rc-copy);
  font-family: var(--rc-time-font);
  font-size: .63rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.page-shell--community-control .community__note,
.page-shell--community-control .community__coverage,
.page-shell--community-control .community__empty {
  margin: 0;
  color: var(--rc-muted);
  font-size: .64rem;
}

.page-shell--community-control .community__note {
  padding: .5rem .85rem;
  border-top: 1px solid var(--rc-seam);
}

.page-shell--community-control .community__coverage {
  font-family: var(--rc-time-font);
  text-align: right;
}

.page-shell--community-control .community__empty {
  padding: 1rem .85rem;
}

.page-shell--community-control .community__countries {
  border: 0;
  background: transparent;
}

.page-shell--community-control .community__country {
  grid-template-columns: 1.5rem minmax(7rem, 10rem) minmax(4rem, 1fr) auto;
  min-height: 3rem;
  padding: .55rem .85rem;
  border-bottom: 0;
  background: var(--rc-asphalt);
}

.page-shell--community-control .community__flag {
  width: 1.35rem;
  height: 1rem;
  border: 1px solid var(--rc-seam-strong);
}

.page-shell--community-control .community__name {
  color: var(--rc-copy);
  font-size: .76rem;
}

.page-shell--community-control .community__meter {
  height: 3px;
  background: var(--rc-seam-strong);
}

.page-shell--community-control .community__meter-fill {
  background: var(--rc-cyan);
}

.page-shell--community-control .community__count {
  color: var(--rc-copy);
  font-size: .68rem;
}

@media (max-width: 40rem) {
  .page-shell--community-control .tt-auth {
    padding-block-start: .75rem;
  }

  .page-shell--community-control .community__header {
    padding: .7rem .7rem .6rem;
  }

  .page-shell--community-control .community__title h2 {
    font-size: 1.15rem;
  }

  .page-shell--community-control .community__status {
    padding: 0 .7rem .65rem;
    font-size: .63rem;
  }

  .page-shell--community-control .community__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-shell--community-control .community__metric {
    min-height: 4.2rem;
    padding: .6rem .7rem;
  }

  .page-shell--community-control .community__route {
    min-height: 4.5rem;
    padding: .65rem .7rem;
  }

  .page-shell--community-control .community__route > span:not(.community__route-arrow) {
    white-space: normal;
  }

  .page-shell--community-control .community__board-header {
    gap: .5rem;
    padding: .65rem .7rem;
  }

  .page-shell--community-control .community__note {
    padding: .55rem .7rem;
    line-height: 1.35;
    text-align: left;
  }

  .page-shell--community-control .community__coverage {
    font-size: .58rem;
  }

  .page-shell--community-control .community__country {
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    min-height: 3rem;
    padding: .55rem .7rem;
  }

  .page-shell--community-control .community__meter {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   P0-P3 readability calibration

   Data density remains high, but no meaningful identity asset should collapse
   into an indistinguishable glyph. These overrides are deliberately scoped to
   the redesigned public route classes; Tournament/operator surfaces do not
   inherit them.
   --------------------------------------------------------------------------- */

/* Home: use a shallow, cropped track window so the three focus targets remain
   a compact timing row. The source artwork keeps its native 16:9 proportions;
   the larger cup emblem provides the faster identity anchor. */
.page-shell--timing-tower .home-focus__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 43 / 20;
}
.page-shell--timing-tower .home-focus__cup {
  top: .25rem;
  left: .25rem;
  width: 1.4rem;
  height: 1.4rem;
}
.page-shell--timing-tower :is(
  .home-hero__welcome-prefix,
  .home-domain__label,
  .home-focus__title,
  .home-focus__label
) { font-size: .68rem; }
.page-shell--timing-tower .track-origin { font-size: .64rem; }
.page-shell--timing-tower .home-focus__headline { font-size: .78rem; }
.page-shell--timing-tower .home-focus__gap { font-size: .75rem; }
.page-shell--timing-tower :is(.home-focus__context, .home-focus__times) { font-size: .72rem; }
.page-shell--timing-tower .activity-list__cup { width: 1.25rem; height: 1.25rem; }
.page-shell--timing-tower .activity__avatar { width: 1.35rem; height: 1.35rem; }
.page-shell--timing-tower .activity-list__when { font-size: .68rem; }
.page-shell--timing-tower .activity-list__detail { font-size: .74rem; }
.page-shell--timing-tower .activity-list__story { font-size: .7rem; }

/* Track control: 16 px loadout anchors replace the former 10 px glyphs.
   The desktop grid grows only in the columns that contain semantic assets. */
.page-shell--timing-tower.page-shell--track-control .track-board__control-label {
  font-size: .66rem;
}
.page-shell--timing-tower.page-shell--track-control .track-board__subtitle {
  font-size: .75rem;
}
.page-shell--timing-tower.page-shell--track-control .track-board__summary-cell small {
  font-size: .68rem;
}
.page-shell--timing-tower.page-shell--track-control .track-board__columns {
  min-height: 2rem;
  font-size: .66rem;
}
.page-shell--timing-tower.page-shell--track-control .track-board__rank,
.page-shell--timing-tower.page-shell--track-control .track-board__date {
  font-size: .7rem;
}
.page-shell--timing-tower.page-shell--track-control .track-board__combo {
  gap: 3px;
  width: 120px;
  justify-content: center;
  text-align: center;
}
.page-shell--timing-tower.page-shell--track-control a.track-board__combo {
  min-height: 24px;
  border-radius: var(--rc-radius-sm);
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.page-shell--timing-tower.page-shell--track-control a.track-board__combo:hover {
  background: var(--rc-cyan-soft);
  box-shadow: inset 0 -1px var(--rc-cyan);
}
.page-shell--timing-tower.page-shell--track-control a.track-board__combo:focus-visible {
  outline: 2px solid var(--rc-cyan);
  outline-offset: 2px;
}
.page-shell--timing-tower.page-shell--track-control .track-board__combo-icon {
  flex: 0 0 auto;
  width: auto;
  height: 18px;
}
.page-shell--timing-tower.page-shell--track-control .track-board__flag-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-shell--timing-tower.page-shell--track-control .track-board__flag {
  width: auto;
  height: 15px;
  object-fit: contain;
}
.page-shell--timing-tower.page-shell--track-control .track-board__evidence--videos {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 2px;
  width: auto;
  height: 24px;
}
.page-shell--timing-tower.page-shell--track-control .track-board__video-link {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--rc-radius-sm);
  color: var(--rc-cyan);
  text-decoration: none;
}
.page-shell--timing-tower.page-shell--track-control .track-board__video-link:hover {
  background: var(--rc-cyan-soft);
}
.page-shell--timing-tower.page-shell--track-control .track-board__video-link:focus-visible {
  outline: 2px solid var(--rc-cyan);
  outline-offset: 1px;
}
.page-shell--timing-tower.page-shell--track-control .track-board__video-mark {
  position: relative;
  width: 14px;
  height: 10px;
  border: 1px solid currentcolor;
  border-radius: 2px;
}
.page-shell--timing-tower.page-shell--track-control .track-board__video-mark::after {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 0;
  height: 0;
  border-block: 3px solid transparent;
  border-left: 4px solid currentcolor;
  content: "";
}
.page-shell--timing-tower.page-shell--track-control .track-board__row > :is(
  .track-board__combo,
  .track-board__shroom,
  .track-board__coins
) {
  justify-content: center;
  text-align: center;
}
.page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__data-cell {
  justify-content: center;
  text-align: center;
}
.page-shell--timing-tower.page-shell--track-control .track-board__item-label {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.page-shell--timing-tower.page-shell--track-control .track-board__columns :is(
  .track-board__shroom,
  .track-board__coins
) {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 50rem) {
  .page-shell--timing-tower.page-shell--track-control :is(
    .track-board__columns,
    .track-board__row
  ) {
    grid-template-columns: 20px 22px minmax(7rem, 1fr) 120px 38px 66px 70px 44px 78px 28px 52px;
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row {
    min-height: 36px;
  }
}

@media (max-width: 49.99rem) {
  .page-shell--timing-tower.page-shell--track-control .track-board__row {
    grid-template-columns: 1.2rem 1.35rem minmax(0, 1fr) 3.9rem 3.4rem 3.25rem;
    min-height: 5rem;
    font-size: .75rem;
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__combo {
    gap: .3rem;
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > a.track-board__combo {
    min-height: 32px;
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__evidence {
    width: 3.25rem;
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__shroom::before,
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__coins::before {
    content: "";
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    margin-right: .3rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__shroom::before {
    background-image: url('/assets/images/items/icons/014_mushroom.png');
  }
  .page-shell--timing-tower.page-shell--track-control .track-board__row > .track-board__coins::before {
    background-image: url('/assets/images/items/icons/000_coin.png');
  }
  .page-shell--timing-tower.page-shell--track-control .track-board--currency-shine .track-board__row > .track-board__coins::before {
    background-image: url('/assets/images/items/icons/001_shine.png');
  }
  .page-shell--timing-tower.page-shell--track-control .track-board--currency-rupee .track-board__row > .track-board__coins::before {
    background-image: url('/assets/images/items/icons/002_rupee.png');
  }
  .page-shell--timing-tower.page-shell--track-control .track-board--currency-bell .track-board__row > .track-board__coins::before {
    background-image: url('/assets/images/items/icons/003_bell.png');
  }
}

/* Tracks, Records and Ranking: retain their dense matrices, but lift the
   labels that previously fell below ten pixels on a normal-density screen. */
.page-shell--tracks-control .cups-view__cup-name { font-size: .66rem; }
.page-shell--records-control .records__value { font-size: .7rem; }
.page-shell--ranking-pilot .tt-standing__track-copy strong { font-size: .72rem; }
.page-shell--ranking-pilot .tt-standing__track-copy small { font-size: .62rem; }
.page-shell--ranking-pilot .tt-standing__track-value > strong { font-size: .78rem; }
.page-shell--ranking-pilot .tt-standing__track-value .delta-badge { font-size: .68rem; }

/* Player and Build: rectangular body/tire/glider art receives enough physical
   width for its silhouette to remain recognizable beside square characters. */
.page-shell--player-control .public-player__favorite-parts figure {
  grid-template-columns: 3.5rem minmax(0, 1fr);
  min-height: 4.1rem;
}
.page-shell--player-control .public-player__favorite-parts img {
  width: 3.5rem;
  height: 3.5rem;
}
.page-shell--player-control .public-player__favorite-parts figcaption { font-size: .74rem; }

.page-shell--build-control .build__control-label { font-size: .66rem; }
.page-shell--build-control .build__part-icon {
  width: min(100%, 5.6rem);
  height: 4.4rem;
}
.page-shell--build-control .build__part-name { font-size: .88rem; }
.page-shell--build-control .build__part-kind { font-size: .62rem; }
.page-shell--build-control .build__picker-count { font-size: .68rem; }
.page-shell--build-control .build__option-icon {
  width: min(100%, 4.75rem);
  height: 3.75rem;
}
.page-shell--build-control .build__option-name { font-size: .7rem; }
.page-shell--build-control .build__legend-item { font-size: .72rem; }
.page-shell--build-control .build__flag { font-size: .7rem; }
.page-shell--build-control .build__feedback p { font-size: .75rem; }
.page-shell--build-control .build__feedback .build__meta-guide { font-size: .7rem; }
.page-shell--build-control .build__meta-example { font-size: .72rem; }
.page-shell--build-control .build__stat-section { font-size: .7rem; }
.page-shell--build-control .build__stat-label { font-size: .75rem; }
.page-shell--build-control .build__stat-contribution { font-size: .55rem; }
.page-shell--build-control .build__stat-value { font-size: .72rem; }

/* Activity: 32 px boxes give 200×128 kart parts an effective 32×20 px image,
   while the surrounding copy moves to a readable 11–13 px range. */
.page-shell--activity-control .activity__control-label,
.page-shell--activity-control .activity__group-heading { font-size: .66rem; }
.page-shell--activity-control .activity__filter { font-size: .75rem; }
.page-shell--activity-control .activity-list__headline { font-size: .8rem; }
.page-shell--activity-control .activity__avatar { width: 1.5rem; height: 1.5rem; }
.page-shell--activity-control .activity-list__when { font-size: .68rem; }
.page-shell--activity-control .activity-list__detail { font-size: .75rem; }
.page-shell--activity-control .activity-list__facts strong { font-size: .82rem; }
.page-shell--activity-control .activity-list__story { font-size: .72rem; }
.page-shell--activity-control .activity__quick-details { min-height: 2rem; }
.page-shell--activity-control .activity__loadout-icon {
  width: 2rem;
  height: 2rem;
}

/* Remaining P2/P3 microcopy: values stay compact but no longer sit in the
   7–9 px range that required magnification. */
.page-shell--mastery-control .mastery__chip-name { font-size: .72rem; }
.page-shell--mastery-control .mastery__chip-tier { font-size: .6rem; }
.page-shell--mastery-control .mastery__chip-time { font-size: .68rem; }
.page-shell--compare-control .compare__delta { font-size: .64rem; }
.page-shell--community-control .community__control-label { font-size: .66rem; }
.page-shell--community-control .community__status { font-size: .72rem; }
.page-shell--community-control .community__board-header h3 { font-size: .68rem; }
.page-shell--community-control :is(.community__note, .community__coverage, .community__empty) {
  font-size: .68rem;
}

@media (max-width: 40rem) {
  .page-shell--ranking-pilot .tt-standing__track-copy strong { font-size: .68rem; }
  .page-shell--ranking-pilot .tt-standing__tracks--focused .tt-standing__track-copy strong {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .page-shell--ranking-pilot .tt-standing__track-copy small { font-size: .58rem; }
  .page-shell--ranking-pilot .tt-standing__track-value > strong { font-size: .72rem; }
  .page-shell--ranking-pilot .tt-standing__track-value .delta-badge { font-size: .6rem; }
  .page-shell--ranking-pilot .tt-standing__track-value .mastery-badge { font-size: .56rem; }

  .page-shell--player-control .public-player__favorite-parts figure {
    grid-template-columns: 3rem minmax(0, 1fr);
    min-height: 3.7rem;
  }
  .page-shell--player-control .public-player__favorite-parts img { width: 3rem; height: 3rem; }
  .page-shell--player-control .public-player__favorite-parts figcaption { font-size: .7rem; }

  .page-shell--build-control .build__part {
    min-height: 7.25rem;
  }
  .page-shell--build-control .build__part-icon {
    width: min(100%, 4rem);
    height: 3.6rem;
  }
  .page-shell--build-control .build__part-name { font-size: .75rem; }
  .page-shell--build-control .build__part-kind { font-size: .56rem; }
  .page-shell--build-control .build__option-icon {
    width: min(100%, 3.8rem);
    height: 3.3rem;
  }
  .page-shell--build-control .build__option-name { font-size: .62rem; }
  .page-shell--build-control .build__stat-contribution { font-size: .5rem; }
  .page-shell--build-control .build__stat-segment--compact .build__stat-contribution {
    font-size: .43rem;
  }

  .page-shell--compare-control .compare__name .tt-auth__link { font-size: .78rem; }
  .page-shell--compare-control .compare__tier { font-size: .58rem; }
  .page-shell--compare-control .compare__detail { font-size: .62rem; }
  .page-shell--compare-control .compare__versus .compare__detail { font-size: .58rem; }
  .page-shell--compare-control .compare__axis { font-size: .56rem; }
  .page-shell--compare-control .compare__row { font-size: .65rem; }
  .page-shell--compare-control .compare__track { font-size: .72rem; }
  .page-shell--compare-control .compare__delta { font-size: .6rem; }

  .page-shell--community-control .community__status,
  .page-shell--community-control .community__coverage { font-size: .68rem; }

  .page-shell--timing-tower .activity-list__row--compact .activity-list__headline {
    font-size: .7rem;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__when {
    font-size: .6rem;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__detail {
    font-size: .64rem;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__facts strong {
    font-size: .7rem;
  }

  .page-shell--timing-tower.page-shell--track-control .track-board__row > :is(
    .track-board__combo,
    .track-board__date
  )::before {
    font-size: .56rem;
  }
}

/* Home focus uses three equal data tiles on desktop. Narrow screens
   deliberately stack instead of shrinking the same three-column board beyond
   legibility. */
.page-shell--timing-tower .home-focus__card {
  grid-template-columns: minmax(0, 1fr);
}
.page-shell--timing-tower .home-focus__label {
  grid-column: 1;
}
.page-shell--timing-tower .home-focus__identity {
  grid-column: 1;
  align-self: start;
}
.page-shell--timing-tower .home-focus__headline {
  grid-column: 1;
}
.page-shell--timing-tower .home-focus__track {
  flex: 1 1 auto;
  overflow: visible;
  line-height: 1.15;
  text-overflow: clip;
  white-space: normal;
}
.page-shell--timing-tower .home-focus__gap {
  grid-column: 1;
  grid-row: auto;
}

@media (max-width: 64rem) {
  .page-shell--timing-tower .home-focus__cards {
    grid-template-columns: repeat(3, minmax(15rem, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .page-shell--timing-tower .home-focus__card { scroll-snap-align: start; }
}

@media (max-width: 40rem) {
  .page-shell--timing-tower .home-focus__cards {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    scroll-snap-type: none;
  }
  .page-shell--timing-tower .home-focus__chips { display: flex; }
}

/* Home Community Activity · compact pit-wall projection. */
.page-shell--timing-tower .home-dashboard {
  grid-template-columns: minmax(0, 1fr);
}
.page-shell--timing-tower .home-dashboard > :last-child {
  grid-column: 1;
}
.page-shell--timing-tower .activity--compact {
  width: auto;
  max-width: 56rem;
}

.page-shell--timing-tower .activity__rank-note {
  margin: .25rem 0 .35rem;
  color: var(--rc-muted, var(--text-muted));
  font-family: var(--rc-time-font, "SFMono-Regular", Consolas, monospace);
  font-size: .62rem;
  line-height: 1.35;
}
.page-shell--timing-tower .activity__rank-note[hidden] { display: none; }

/* Home journey: progress always grows toward completion and the 48/48
   base/Booster split stays visible without turning competitive counts into
   misleading progress bars. */
.page-shell--timing-tower .home-ladder {
  display: grid;
  gap: 0;
  border-block: 1px solid var(--border);
  background: var(--surface-1);
}

.page-shell--timing-tower .home-ladder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .9rem;
}

.page-shell--timing-tower .home-ladder__progress {
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.page-shell--timing-tower .home-ladder__progress .timing-summary__cell {
  min-height: 4.1rem;
  padding: .65rem .85rem;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.page-shell--timing-tower .home-ladder__progress .timing-summary__value-row {
  display: flex;
  gap: .45rem;
  align-items: center;
  padding-right: 1rem;
}

.page-shell--timing-tower .home-ladder__progress .timing-summary__completion {
  color: var(--accent);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: .015em;
}

.page-shell--timing-tower .home-ladder__progress .timing-summary__check {
  display: inline-grid;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  border-radius: 50%;
  background: var(--good);
  color: #092218;
  font-size: .72rem;
  font-weight: 950;
  line-height: 1;
}

.page-shell--timing-tower .home-ladder__progress .timing-summary__check[hidden] {
  display: none;
}

.page-shell--timing-tower .home-ladder__progress .timing-summary__track {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-3, #252c35);
}

.page-shell--timing-tower .home-ladder__progress .timing-summary__bar {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #66a8ff);
  transition: width 220ms ease;
}

.page-shell--timing-tower .home-ladder__progress .timing-summary__cell--empty .timing-summary__completion {
  color: var(--text-muted);
}

.page-shell--timing-tower .home-ladder__progress .timing-summary__cell--complete {
  background: color-mix(in srgb, var(--good) 8%, var(--surface-1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 38%, transparent);
}

.page-shell--timing-tower .home-ladder__progress .timing-summary__cell--complete .timing-summary__completion {
  color: var(--good);
}

.page-shell--timing-tower .home-ladder__progress .timing-summary__cell--complete .timing-summary__bar {
  background: linear-gradient(90deg, #45bd78, var(--good));
}

.page-shell--timing-tower .home-ladder__access-note {
  margin: 0;
  padding: .45rem .9rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .66rem;
  line-height: 1.35;
}

.page-shell--timing-tower .home-ladder__access-note--action {
  color: var(--accent);
}

.page-shell--timing-tower .home-ladder__competitive {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}

.page-shell--timing-tower .home-ladder__competitive-cell {
  display: grid;
  gap: .15rem;
  min-width: 0;
  padding: .55rem .85rem;
  border-right: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.page-shell--timing-tower .home-ladder__competitive-cell:last-child {
  border-right: 0;
}

.page-shell--timing-tower .home-ladder__competitive-cell strong {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.page-shell--timing-tower .home-ladder__competitive-cell span {
  color: var(--text-muted);
  font-size: .62rem;
  line-height: 1.25;
}

@media (min-width: 64.01rem) {
  .page-shell--timing-tower .home-hero__submit {
    box-sizing: border-box;
    height: 3rem;
  }
  .page-shell--timing-tower .home-hero__actions {
    gap: .4rem;
  }
  .page-shell--timing-tower .home-hero__records {
    line-height: 1.2;
  }
  .page-shell--timing-tower .home-focus { padding-block: .75rem; }
  .page-shell--timing-tower .home-focus__head { margin-bottom: .55rem; }
  .page-shell--timing-tower .home-focus__card {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    padding: .6rem;
  }
  .page-shell--timing-tower .home-focus__label {
    grid-column: 1 / -1;
  }
  .page-shell--timing-tower .home-focus__identity {
    grid-column: 1;
    grid-row: 2 / span 6;
    align-self: start;
  }
  .page-shell--timing-tower .home-focus__headline,
  .page-shell--timing-tower .home-focus__gap,
  .page-shell--timing-tower .home-focus__context,
  .page-shell--timing-tower .home-focus__times,
  .page-shell--timing-tower .home-focus__chips {
    grid-column: 2;
  }
  .page-shell--timing-tower .home-focus__chips {
    margin-top: 0;
  }
  .page-shell--timing-tower .home-focus__thumb {
    height: 4.25rem;
    aspect-ratio: auto;
  }
  .page-shell--timing-tower .home-focus__art { height: 100%; }
}

@media (max-width: 40rem) {
  .page-shell--timing-tower .home-ladder__head {
    align-items: flex-start;
    flex-direction: column;
  }
  .page-shell--timing-tower .home-ladder__progress,
  .page-shell--timing-tower .home-ladder__competitive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-shell--timing-tower .home-ladder__progress .timing-summary__cell:nth-child(2),
  .page-shell--timing-tower .home-ladder__competitive-cell:nth-child(2) {
    border-right: 0;
  }
  .page-shell--timing-tower .home-ladder__progress .timing-summary__cell:nth-child(n + 3),
  .page-shell--timing-tower .home-ladder__competitive-cell:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
}

/* Every grid item needs `min-width: 0` or its min-content width sets the
   track. Race Control says so for its own compact rows; without it any other
   surface that mounts the compact feed - Administration does - had a body
   cell 441 px wide inside a 399 px column, which put 9 px of the row past the
   viewport between 641 and 642 px. The guard belongs to the component. */
.activity-list__body > *,
.activity__compact-columns,
.activity__compact-columns-body { min-width: 0; }

/* The lap-pattern strip is a fixed-width row of icons and values; on a
   surface without Race Control's column grid it has to be allowed to
   shrink and wrap instead of pushing the row past the viewport. */
.activity__quick-details { flex-wrap: wrap; }
.activity__quick-details * { min-width: 0; }

.page-shell--timing-tower .activity__compact-columns {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
  min-height: 1.8rem;
  padding: .3rem 0;
  border-block: 1px solid var(--rc-seam, var(--border));
  color: var(--rc-muted, var(--text-muted));
  font-family: var(--rc-time-font, "SFMono-Regular", Consolas, monospace);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.page-shell--timing-tower .activity__compact-columns[hidden] { display: none; }

.page-shell--timing-tower .activity__compact-columns-body,
.page-shell--timing-tower .activity-list__row--compact .activity-list__body {
  display: grid;
  grid-template-columns: 2.6rem minmax(7.5rem, 1fr) 7rem 4.8rem 5rem 5.6rem 4rem;
  gap: .4rem;
  align-items: center;
  min-width: 0;
}
.page-shell--timing-tower .activity__compact-columns-body > *,
.page-shell--timing-tower .activity-list__row--compact .activity-list__body > * { min-width: 0; }
.page-shell--timing-tower .activity__compact-columns-body > :is(
  .activity-list__rank,
  .activity__combo-summary,
  .activity__mushroom-summary,
  .activity__coin-summary
) {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.page-shell--timing-tower .activity__compact-columns-body > .activity-list__detail {
  justify-content: flex-end;
  text-align: right;
}

.page-shell--timing-tower .activity-list__row--compact {
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .7rem;
  min-height: 5.15rem;
  padding: .5rem 0;
  border: 0;
  border-bottom: 1px solid var(--rc-seam-strong, var(--border-strong));
  border-radius: 0;
  background: transparent;
}
.page-shell--timing-tower .activity-list__row--compact:hover {
  border-bottom-color: var(--rc-seam-strong, var(--border-strong));
  background: color-mix(in srgb, var(--rc-surface-2, var(--surface-2)) 62%, transparent);
}
.page-shell--timing-tower .activity-list__row--compact.activity-list__row--record { box-shadow: none; }
.page-shell--timing-tower .activity-list__row--compact .activity-list__thumb,
.page-shell--timing-tower .notifications__item .activity-list__thumb ,
.page-shell--timing-tower .track-record__row .activity-list__thumb {
  box-sizing: border-box;
  width: 7.5rem;
  border-width: 2px;
}
.page-shell--timing-tower .activity-list__row--compact .activity-list__thumb--150,
.page-shell--timing-tower .notifications__item .activity-list__thumb--150 ,
.page-shell--timing-tower .track-record__row .activity-list__thumb--150 {
  /* The plain token first: a browser without `color-mix` keeps the engine
     identity instead of falling back to `currentColor`. */
  border-color: var(--engine-150);
  border-color: color-mix(in srgb, var(--engine-150) 82%, #000);
}
.page-shell--timing-tower .activity-list__row--compact .activity-list__thumb--200,
.page-shell--timing-tower .notifications__item .activity-list__thumb--200 ,
.page-shell--timing-tower .track-record__row .activity-list__thumb--200 {
  border-color: var(--engine-200);
  border-color: color-mix(in srgb, var(--engine-200) 82%, #000);
}

.page-shell--timing-tower .activity-list__row--compact .activity-list__thumb > .activity__mode,
.page-shell--timing-tower .notifications__item .activity-list__thumb > .activity__mode ,
.page-shell--timing-tower .track-record__row .activity-list__thumb > .activity__mode {
  position: absolute;
  top: .22rem;
  left: .22rem;
  z-index: 2;
  display: inline-flex;
  height: 1.05rem;
  padding-inline: .3rem;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 65%);
  font-family: var(--rc-time-font, "SFMono-Regular", Consolas, monospace);
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: 0;
}
.page-shell--timing-tower .activity-list__row--compact .activity-list__thumb > .activity__mode--150,
.page-shell--timing-tower .notifications__item .activity-list__thumb > .activity__mode--150 ,
.page-shell--timing-tower .track-record__row .activity-list__thumb > .activity__mode--150 {
  border-color: var(--engine-150);
  border-color: color-mix(in srgb, var(--engine-150) 78%, #fff);
  background: var(--engine-150);
  background: color-mix(in srgb, var(--engine-150) 62%, #000);
  color: #fff;
}
.page-shell--timing-tower .activity-list__row--compact .activity-list__thumb > .activity__mode--200,
.page-shell--timing-tower .notifications__item .activity-list__thumb > .activity__mode--200 ,
.page-shell--timing-tower .track-record__row .activity-list__thumb > .activity__mode--200 {
  border-color: var(--engine-200);
  border-color: color-mix(in srgb, var(--engine-200) 78%, #fff);
  background: var(--engine-200);
  background: color-mix(in srgb, var(--engine-200) 62%, #000);
  color: #fff;
}
.page-shell--activity-control .activity-list__thumb > .activity__source,
.page-shell--timing-tower .activity-list__row--compact .activity-list__thumb > .activity__source {
  position: absolute;
  top: .22rem;
  right: .22rem;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 1.18rem;
  min-width: 1.18rem;
  height: 1.18rem;
  padding: .13rem;
  border-color: rgb(255 255 255 / 24%);
  border-radius: 2px;
  background: rgb(6 9 13 / 88%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 65%);
  box-sizing: border-box;
}
.page-shell--activity-control .activity-list__thumb > .activity__source .platform-mark,
.page-shell--timing-tower .activity-list__row--compact .activity-list__thumb > .activity__source .platform-mark {
  width: .78rem;
  height: .78rem;
}
.page-shell--activity-control .activity-list__thumb > .activity__source .activity__source-label,
.page-shell--timing-tower .activity-list__row--compact .activity-list__thumb > .activity__source .activity__source-label { display: none; }
.page-shell--activity-control .activity-list__thumb > .activity__source .activity__corrected,
.page-shell--timing-tower .activity-list__row--compact .activity-list__thumb > .activity__source .activity__corrected {
  position: absolute;
  right: -.2rem;
  bottom: -.28rem;
  font-size: .52rem;
}

.page-shell--timing-tower .activity-list__row--compact .activity-list__rank {
  grid-column: 1;
  display: grid;
  place-items: center;
  align-self: stretch;
  color: var(--rc-muted, var(--text-muted));
  font-family: var(--rc-time-font, "SFMono-Regular", Consolas, monospace);
  font-size: .72rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.page-shell--timing-tower .activity-list__row--compact .activity-list__rank strong {
  color: var(--rc-copy, var(--text));
  font-size: .76rem;
}
.page-shell--timing-tower .activity-list__row--compact .activity-list__facts .activity__pb {
  justify-self: end;
  padding: .05rem .18rem;
  border: 1px solid color-mix(in srgb, var(--rc-good, var(--good)) 58%, transparent);
  border-radius: 2px;
  color: var(--rc-good, var(--good));
  background: color-mix(in srgb, var(--rc-good, var(--good)) 9%, transparent);
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.15;
  white-space: nowrap;
}

.page-shell--timing-tower .activity-list__row--compact .activity__viewer-gap {
  justify-self: end;
  font-family: var(--rc-time-font, "SFMono-Regular", Consolas, monospace);
  font-size: .56rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.page-shell--timing-tower .activity-list__row--compact .activity__viewer-gap--behind {
  color: var(--delta-slow, var(--rc-danger));
}
.page-shell--timing-tower .activity-list__row--compact .activity__viewer-gap--ahead {
  color: var(--delta-fast, var(--rc-success, var(--good)));
}
.page-shell--timing-tower .activity-list__row--compact .activity__viewer-gap--equal {
  color: var(--warn, #eab308);
}

.page-shell--timing-tower .activity-list__row--compact .activity-list__headline {
  grid-column: 2;
  display: flex;
  /* At 320 px in Dutch the Player name was squeezed to zero width and the
     country flag left the row. Wrapping keeps both. */
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  min-width: 0;
  font-size: .78rem;
}
.page-shell--timing-tower .activity-list__row--compact .activity-list__headline .activity__avatar {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
}
.page-shell--timing-tower .activity-list__row--compact .activity-list__headline .track-board__flag {
  flex: 0 0 auto;
  width: auto;
  height: 15px;
  object-fit: contain;
}
.page-shell--timing-tower .activity-list__row--compact .activity-list__detail {
  grid-column: 6;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}
.page-shell--timing-tower .activity-list__row--compact .activity-list__facts {
  display: grid;
  justify-items: end;
  gap: .12rem;
  margin: 0;
}
.page-shell--timing-tower .activity-list__row--compact .activity-list__facts strong {
  min-width: 0;
  color: var(--rc-copy, var(--text));
  font-family: var(--rc-time-font, "SFMono-Regular", Consolas, monospace);
  font-size: .8rem;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}
.page-shell--timing-tower .activity-list__row--compact > .activity-list__body > .activity-list__when {
  grid-column: 7;
  justify-self: center;
  color: var(--rc-muted, var(--text-muted));
  font-family: var(--rc-time-font, "SFMono-Regular", Consolas, monospace);
  font-size: .62rem;
  white-space: nowrap;
}
.page-shell--timing-tower .activity-list__row--compact .activity__quick-details { display: contents; }
.page-shell--timing-tower .activity-list__row--compact .activity__combo-summary { grid-column: 3; }
.page-shell--timing-tower .activity-list__row--compact .activity__mushroom-summary { grid-column: 4; }
.page-shell--timing-tower .activity-list__row--compact .activity__coin-summary { grid-column: 5; }
.page-shell--timing-tower .activity-list__row--compact :is(
  .activity__combo-summary,
  .activity__mushroom-summary,
  .activity__coin-summary
) {
  min-height: 1.7rem;
  color: var(--rc-copy, var(--text));
  font-family: var(--rc-time-font, "SFMono-Regular", Consolas, monospace);
  font-size: .66rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.page-shell--timing-tower .activity-list__row--compact a.activity__combo-summary {
  border-radius: var(--rc-radius-sm, .2rem);
  color: inherit;
  text-decoration: none;
}
.page-shell--timing-tower .activity-list__row--compact a.activity__combo-summary:hover {
  background: var(--rc-cyan-soft, rgb(27 207 215 / 10%));
  box-shadow: inset 0 -1px var(--rc-cyan, var(--accent));
}
.page-shell--timing-tower .activity-list__row--compact a.activity__combo-summary:focus-visible {
  outline: 2px solid var(--rc-cyan, var(--accent));
  outline-offset: 1px;
}
.page-shell--timing-tower .activity-list__row--compact :is(
  .activity__mushroom-summary,
  .activity__coin-summary
) {
  display: flex;
  gap: .25rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-shell--timing-tower .activity__combo-summary {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
}
.page-shell--timing-tower .activity__quick-details .activity__loadout-icon {
  flex: 0 0 auto;
  width: auto;
  height: 18px;
  object-fit: contain;
}
.page-shell--timing-tower .activity__combo-missing {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--rc-faint, var(--text-muted));
}
.page-shell--timing-tower .activity__metric-icon {
  flex: 0 0 auto;
  width: auto;
  height: 18px;
  object-fit: contain;
}
.page-shell--timing-tower .activity__pattern-values {
  min-width: 1.75rem;
  text-align: center;
  white-space: nowrap;
}

/* The compact Home/Community activity row is a seven-column timing log that
   needs 622 px. Between 641 and 848 px it was laid out inside a ~503 px cell
   and the age, source and detail columns were cut off by the dashboard's
   hidden overflow. The phone composition - which carries the same values in
   two lines - now covers that band as well. */
@media (max-width: 53rem) {
  .page-shell--timing-tower .activity__compact-columns { display: none; }
  .page-shell--timing-tower .activity-list__row--compact {
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: .45rem;
    min-height: 5.2rem;
    padding: .45rem 0;
    border: 1px solid var(--rc-seam-strong, var(--border-strong));
    border-radius: var(--rc-radius-sm, .2rem);
  }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__thumb,
.page-shell--timing-tower .notifications__item .activity-list__thumb ,
.page-shell--timing-tower .track-record__row .activity-list__thumb { width: 7rem; }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__body {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    grid-template-rows: 1.45rem 1.35rem 3.4rem;
    gap: .18rem .3rem;
    align-content: center;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__rank {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__headline {
    grid-column: 2;
    grid-row: 1;
    gap: .25rem;
    font-size: .74rem;
    overflow: hidden;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__player {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__headline .activity__avatar {
    width: 1.25rem;
    height: 1.25rem;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__detail {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: center;
    justify-content: flex-end;
    padding-right: 0;
    text-align: right;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__facts .activity__pb {
    font-size: .48rem;
    letter-spacing: 0;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__facts {
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity-list__facts strong { font-size: .74rem; }
  .page-shell--timing-tower .activity-list__row--compact .activity__quick-details {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 1.7rem);
    gap: .15rem;
    align-items: center;
    min-height: 1.7rem;
    margin: 0;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity__quick-details > .activity__combo-summary {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity__quick-details > .activity__mushroom-summary {
    grid-column: 1;
    grid-row: 2;
  }
  .page-shell--timing-tower .activity-list__row--compact .activity__quick-details > .activity__coin-summary {
    grid-column: 2;
    grid-row: 2;
  }
  .page-shell--timing-tower .activity-list__row--compact :is(
    .activity__combo-summary,
    .activity__mushroom-summary,
    .activity__coin-summary
  ) {
    min-height: 1.65rem;
    font-size: .62rem;
  }
  .page-shell--timing-tower .activity-list__row--compact > .activity-list__body > .activity-list__when {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    font-size: .58rem;
  }
}

/* ---------------------------------------------------------------------------
   Tournament Control · visual harmonization (2026-09-02)

   The source-shaped Step 0–10 workflow remains intact. This route-scoped
   layer gives its existing controls the same graphite seams, cyan action
   hierarchy, density and responsive page axes as the accepted ecosystem.
   --------------------------------------------------------------------------- */

.page-shell--tournament-control {
  --tournament-bg: var(--rc-asphalt);
  --tournament-panel: var(--rc-panel);
  --tournament-elevated: var(--rc-panel-raised);
  --tournament-line: var(--rc-seam);
  --tournament-line-strong: var(--rc-seam-strong);
  --tournament-text: var(--rc-copy);
  --tournament-soft: var(--rc-muted);
  --tournament-accent: var(--rc-cyan);
  --tournament-accent-alt: var(--rc-cyan);
  --tournament-success: var(--rc-success);
  --tournament-warning: var(--warn);
  --tournament-danger: var(--rc-danger);
}

.page-shell--tournament-control .tt-auth {
  padding-block-start: var(--sp-4);
}

.page-shell--tournament-control .tt-auth > h1 {
  max-width: none;
  font-size: clamp(1.55rem, 3.5vw, 2.25rem);
}

.page-shell--tournament-control .tt-auth > .tt-auth__status {
  max-width: none;
  margin-bottom: var(--sp-4);
}

.page-shell--tournament-control .tt-auth > .tt-auth__status:empty {
  display: none;
}

.page-shell--tournament-control .tournament-op {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  gap: var(--sp-3);
  color: var(--rc-copy);
}

.page-shell--tournament-control .tournament-op__content {
  gap: var(--sp-4);
}

.page-shell--tournament-control .tournament-op__toolbar {
  display: grid;
  grid-template-columns: auto auto minmax(8rem, 1fr) auto;
  gap: var(--sp-2) var(--sp-4);
  min-height: 3.25rem;
  padding: .55rem .75rem;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-md);
  background: var(--rc-panel);
}

.page-shell--tournament-control .tournament-op__toolbar .tt-auth__link {
  color: var(--rc-copy);
  font-size: .78rem;
}

.page-shell--tournament-control .tournament-op__stage {
  justify-self: end;
  color: var(--rc-muted);
  font-family: var(--rc-time-font);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.page-shell--tournament-control .tournament-op__delete {
  min-height: 2.25rem;
  padding: .4rem .7rem;
  border-color: color-mix(in srgb, var(--rc-danger) 55%, var(--rc-seam));
  background: transparent;
  color: var(--rc-danger);
  font-size: .72rem;
}

.page-shell--tournament-control .tournament-op__delete:hover:not(:disabled) {
  border-color: var(--rc-danger);
  background: color-mix(in srgb, var(--rc-danger) 10%, transparent);
}

.page-shell--tournament-control .tournament-op__steps {
  gap: 1px;
  padding: 0 0 .35rem;
  scroll-snap-type: inline proximity;
  scrollbar-color: var(--rc-seam-strong) transparent;
  scrollbar-width: thin;
}

.page-shell--tournament-control .tournament-op__step {
  min-height: 2rem;
  padding: .4rem .65rem;
  border-color: var(--rc-seam);
  border-radius: 0;
  background: var(--rc-panel);
  color: var(--rc-muted);
  font-size: .7rem;
  line-height: 1.15;
  scroll-snap-align: center;
}

.page-shell--tournament-control .tournament-op__step:first-child {
  border-radius: var(--rc-radius-sm) 0 0 var(--rc-radius-sm);
}

.page-shell--tournament-control .tournament-op__step:last-child {
  border-radius: 0 var(--rc-radius-sm) var(--rc-radius-sm) 0;
}

.page-shell--tournament-control .tournament-op__step--done {
  border-color: var(--rc-seam);
  background: color-mix(in srgb, var(--rc-success) 7%, var(--rc-panel));
  color: var(--rc-success);
}

.page-shell--tournament-control .tournament-op__step--done::before {
  content: "✓ ";
  font-weight: 900;
}

.page-shell--tournament-control .tournament-op__step--active {
  border-color: var(--rc-cyan);
  background: var(--rc-cyan-soft);
  color: var(--rc-cyan);
  box-shadow: inset 0 -2px var(--rc-cyan);
}

.page-shell--tournament-control :is(
  .tournament-op__panel,
  .tournament-op__score-guide,
  .tournament-op__incoming-card,
  .tournament-op__exceptional-roster,
  .tournament-op__group,
  .tournament-op__parking,
  .tournament-score-step__details,
  .tournament-score-step__group,
  .tournament-export-preview,
  .tournament-report__preview
) {
  border-color: var(--rc-seam);
  border-radius: var(--rc-radius-md);
  background: var(--rc-panel);
  box-shadow: none;
}

.page-shell--tournament-control .tournament-op__panel {
  gap: var(--sp-3);
  padding: clamp(var(--sp-3), 2vw, var(--sp-4));
}

.page-shell--tournament-control .tournament-op__panel > :is(h3, h4):first-child,
.page-shell--tournament-control .tournament-op__incoming h3,
.page-shell--tournament-control .tournament-score-step__group-header h3 {
  color: var(--rc-copy);
  font-size: .92rem;
  font-weight: 780;
  letter-spacing: -.01em;
}

.page-shell--tournament-control :is(
  .tournament-op__intro,
  .tournament-op__hint,
  .tournament-op__stage,
  .tournament-op__layout-export-audit p,
  .tournament-op__history ul,
  .tournament-score-step__errors,
  .tournament-export-preview__standings li small
) {
  color: var(--rc-muted);
}

.page-shell--tournament-control .tournament-op__score-guide {
  gap: var(--sp-2);
  padding: .75rem .85rem;
  border-inline-start: 2px solid var(--rc-cyan);
  background: var(--rc-panel);
}

.page-shell--tournament-control .tournament-op__score-guide > h4 {
  color: var(--rc-cyan);
  font-size: .78rem;
}

.page-shell--tournament-control .tournament-op__incoming {
  padding: var(--sp-4);
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-md);
  background: var(--rc-panel);
}

.page-shell--tournament-control .tournament-op__incoming > .tournament-op__section {
  gap: var(--sp-3);
}

.page-shell--tournament-control .tournament-op__incoming-card {
  padding: var(--sp-3);
  background: var(--rc-panel-raised);
}

.page-shell--tournament-control .tournament-op__warning,
.page-shell--tournament-control .tournament-op__gate-reason {
  border-inline-start: 2px solid var(--warn);
  color: var(--warn);
}

.page-shell--tournament-control .tournament-op :is(input, select, textarea) {
  border-color: var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel-raised);
  color: var(--rc-copy);
  box-shadow: none;
}

.page-shell--tournament-control .tournament-op :is(input, select, textarea):focus {
  border-color: var(--rc-cyan);
  outline: 2px solid color-mix(in srgb, var(--rc-cyan) 35%, transparent);
  outline-offset: 1px;
}

.page-shell--tournament-control .tournament-op .tt-auth__button {
  min-height: 2.5rem;
  border-color: var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel-raised);
  color: var(--rc-copy);
  box-shadow: none;
}

.page-shell--tournament-control .tournament-op .tt-auth__button:hover:not(:disabled) {
  border-color: var(--rc-cyan);
  background: var(--rc-panel-raised);
  color: var(--rc-cyan);
}

.page-shell--tournament-control .tournament-op .tt-auth__button--primary,
.page-shell--tournament-control .tournament-op__gate--ready,
.page-shell--tournament-control .tournament-score-step__checkpoint .tt-auth__button {
  border-color: var(--rc-cyan);
  background: var(--rc-cyan);
  color: var(--accent-ink);
}

.page-shell--tournament-control .tournament-op__checkpoint .tt-auth__button:not(.tt-auth__button--primary) {
  border-color: var(--rc-seam-strong);
  background: transparent;
  color: var(--rc-muted);
}

.page-shell--tournament-control .tournament-op .tt-auth__button:disabled {
  border-color: var(--rc-seam);
  background: var(--rc-panel-raised);
  color: var(--rc-muted);
  opacity: .55;
}

.page-shell--tournament-control .tournament-director-step {
  min-height: 0;
  padding: 0;
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-md);
  background: var(--rc-panel);
  color: var(--rc-copy);
}

.page-shell--tournament-control .tournament-director-step__phase,
.page-shell--tournament-control .tournament-score-step__phase {
  margin: var(--sp-3) var(--sp-4) 0;
  padding: .35rem .65rem;
  border: 1px solid var(--rc-cyan);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-cyan-soft);
  color: var(--rc-cyan);
  font-family: var(--rc-time-font);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.page-shell--tournament-control .tournament-director-step > h3 {
  margin: 0;
  padding: var(--sp-4);
  border-color: var(--rc-seam);
  font-size: clamp(1.2rem, 3vw, 1.55rem);
}

.page-shell--tournament-control .tournament-director-step__intro {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rc-seam);
  background: transparent;
  color: var(--rc-muted);
  font-size: .88rem;
}

.page-shell--tournament-control .tournament-director-step__card {
  margin: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--rc-seam);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel-raised);
}

.page-shell--tournament-control .tournament-director-step__card h3 {
  font-size: 1rem;
}

.page-shell--tournament-control .tournament-director-step select,
.page-shell--tournament-control .tournament-director-step input,
.page-shell--tournament-control .tournament-director-step input[type="time"] {
  min-height: 2.75rem;
  padding-inline: .75rem;
  border-color: var(--rc-seam-strong);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel);
  color: var(--rc-copy);
  font-size: .9rem;
}

.page-shell--tournament-control .tournament-director-step__hint {
  min-height: 0;
  margin: var(--sp-3) 0;
  color: var(--rc-muted);
  font-size: .8rem;
}

.page-shell--tournament-control .tournament-director-step .tt-auth__button {
  min-height: 2.75rem;
  font-size: .86rem;
}

.page-shell--tournament-control .tournament-director-step--start {
  gap: 0;
  border-color: var(--rc-seam);
  background: var(--rc-panel);
}

.page-shell--tournament-control .tournament-director-step--start > h3,
.page-shell--tournament-control .tournament-director-step--start .tournament-director-step__intro,
.page-shell--tournament-control .tournament-director-step--start .tournament-director-step__card {
  border-color: var(--rc-seam);
  background: var(--rc-panel-raised);
}

.page-shell--tournament-control .tournament-score-step {
  gap: var(--sp-3);
}

.page-shell--tournament-control .tournament-score-step__details > summary {
  padding: .7rem .8rem;
  font-size: .8rem;
}

.page-shell--tournament-control .tournament-score-step__tie-card,
.page-shell--tournament-control .tournament-score-step__excel-group,
.page-shell--tournament-control .tournament-score-step__row {
  border-color: var(--rc-seam);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel-raised);
}

.page-shell--tournament-control .tournament-score-step__group {
  box-shadow: inset 2px 0 var(--rc-cyan);
}

.page-shell--tournament-control .tournament-score-step__rank,
.page-shell--tournament-control .tournament-score-step__group-header h4,
.page-shell--tournament-control .tournament-export-preview__group h5,
.page-shell--tournament-control .tournament-op__layout-export-audit h5 {
  color: var(--rc-cyan);
}

.page-shell--tournament-control .tournament-score-step__checkpoint {
  position: static;
  padding: var(--sp-3);
  border: 1px solid var(--rc-cyan);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-panel);
  box-shadow: none;
}

.page-shell--tournament-control .tournament-export-tabs {
  gap: 1px;
}

.page-shell--tournament-control .tournament-export-tabs .tt-auth__button {
  border-radius: 0;
}

.page-shell--tournament-control .tournament-export-tabs .tt-auth__button:first-child {
  border-radius: var(--rc-radius-sm) 0 0 var(--rc-radius-sm);
}

.page-shell--tournament-control .tournament-export-tabs .tt-auth__button:last-child {
  border-radius: 0 var(--rc-radius-sm) var(--rc-radius-sm) 0;
}

.page-shell--tournament-control .tournament-export-tabs .tournament-export-tabs__active {
  border-color: var(--rc-cyan);
  background: var(--rc-cyan-soft);
  color: var(--rc-cyan);
  box-shadow: inset 0 -2px var(--rc-cyan);
}

.page-shell--tournament-control .tournament-export-preview > header {
  border-color: var(--rc-seam);
  background: var(--rc-panel-raised);
}

.page-shell--tournament-control .tournament-export-preview > header p,
.page-shell--tournament-control .tournament-export-preview__standings li strong {
  color: var(--rc-cyan);
}

.page-shell--tournament-control .tournament-export-preview__group,
.page-shell--tournament-control .tournament-export-preview__standings li {
  border-color: var(--rc-seam);
  background: var(--rc-panel-raised);
}

.page-shell--tournament-control .tournament-export-controls .tournament-export-controls__whatsapp {
  border-color: var(--rc-seam-strong);
  background: var(--rc-panel-raised);
  color: var(--rc-copy);
}

.page-shell--tournament-control :is(
  .tournament-op__status-board,
  .tournament-op__status-board-head,
  .tournament-op__attendance-board,
  .tournament-op__participant-card,
  .tournament-board__group,
  .tournament-board__group-header,
  .tournament-board__slot,
  .tournament-board__station,
  .tournament-board__parking-zone,
  .tournament-board__status
) {
  border-color: var(--rc-seam);
  background: var(--rc-panel-raised);
}

.page-shell--tournament-control .tournament-board__seat {
  border-color: var(--rc-seam-strong);
}

.page-shell--tournament-control .tournament-board__group-title h3,
.page-shell--tournament-control .tournament-board__station-title {
  color: var(--rc-copy);
}

.page-shell--tournament-control .tournament-board__utp,
.page-shell--tournament-control .tournament-board__seat-hint {
  color: var(--rc-muted);
}

.page-shell--tournament-control :is(
  .tournament-board__handle,
  .tournament-board__park,
  .tournament-board__swap-badge
) {
  min-width: 2.25rem;
  min-height: 2.25rem;
}

.page-shell--tournament-control .tournament-op__layout-export-audit {
  border-inline-start: 2px solid var(--rc-cyan);
  background: var(--rc-panel-raised);
}

.page-shell--tournament-control .tournament-op__history {
  border-top: 1px solid var(--rc-seam);
  padding-top: var(--sp-3);
}

.page-shell--tournament-control .tournament-op__helpers > summary {
  width: fit-content;
  color: var(--rc-muted);
  font-size: .78rem;
}

.page-shell--tournament-control .tournament-op__helpers[open] {
  gap: var(--sp-3);
}

.page-shell--tournament-control .tournament-op__utp p {
  border-inline-start-color: var(--rc-cyan);
  background: var(--rc-panel-raised);
}

.page-shell--tournament-control .tournament-report {
  gap: var(--sp-4);
}

.page-shell--tournament-control .tournament-report__preview {
  padding: var(--sp-4);
}

@media (min-width: 40.0625rem) and (max-width: 64rem) {
  .page-shell--tournament-control .site-nav__links {
    box-sizing: border-box;
  }

  .page-shell--tournament-control .tournament-op__toolbar {
    grid-template-columns: auto auto 1fr;
  }

  .page-shell--tournament-control .tournament-op__delete {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .page-shell--tournament-control .tournament-op__stage {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .page-shell--tournament-control .tournament-score-step__row {
    grid-template-columns: 2rem minmax(7rem, 1fr) minmax(7rem, auto) 3.5rem;
  }

  .page-shell--tournament-control :is(
    .tournament-board__handle,
    .tournament-board__park,
    .tournament-board__swap-badge
  ) {
    min-width: 2.5rem;
    min-height: 2.5rem;
  }

  .page-shell--tournament-control .tournament-op__incident-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-shell--tournament-control .tournament-op__incident-form .tt-auth__button {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

@media (max-width: 40rem) {
  .page-shell--tournament-control .site-nav__links {
    box-sizing: border-box;
  }

  .page-shell--tournament-control .tt-auth {
    padding: var(--sp-3) var(--sp-3) calc(5.25rem + env(safe-area-inset-bottom));
  }

  .page-shell--tournament-control .tt-auth > h1 {
    font-size: 1.45rem;
  }

  .page-shell--tournament-control .tt-auth > .tt-auth__status {
    margin-bottom: var(--sp-3);
  }

  .page-shell--tournament-control .tournament-op__toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-1) var(--sp-3);
    padding: .65rem;
  }

  /* A seated participant's tier, name and rank badge could not wrap, so one
     group card required 327 px and pushed the whole workspace 3 px past a
     320 px viewport. The badges keep their full text. */
  .page-shell--tournament-control .tournament-board__player,
  .page-shell--tournament-control .tournament-board__station-title {
    flex-wrap: wrap;
    min-width: 0;
  }

  .page-shell--tournament-control .tournament-board__player .tournament-op__roster-badge {
    white-space: normal;
  }

  .page-shell--tournament-control .tournament-op__toolbar .tt-auth__link {
    white-space: nowrap;
  }

  .page-shell--tournament-control .tournament-op__stage {
    grid-column: 1;
    justify-self: start;
  }

  .page-shell--tournament-control .tournament-op__delete {
    grid-column: 2;
    grid-row: 2;
  }

  .page-shell--tournament-control .tournament-op__step {
    min-height: 2.2rem;
    font-size: .66rem;
  }

  .page-shell--tournament-control .tournament-op__incoming,
  .page-shell--tournament-control .tournament-op__panel {
    padding: var(--sp-3);
  }

  .page-shell--tournament-control .tournament-director-step__phase,
  .page-shell--tournament-control .tournament-score-step__phase {
    margin: var(--sp-3) var(--sp-3) 0;
  }

  .page-shell--tournament-control .tournament-director-step__card {
    margin: var(--sp-3);
    padding: var(--sp-3);
  }

  .page-shell--tournament-control .tournament-director-step--start > .tournament-director-step__hint,
  .page-shell--tournament-control .tournament-director-step--start > .tt-auth__button {
    margin-inline: var(--sp-3);
  }

  .page-shell--tournament-control .tournament-score-step__checkpoint {
    position: static;
  }

  .page-shell--tournament-control .tournament-export-controls,
  .page-shell--tournament-control .tournament-export-excel {
    gap: var(--sp-2);
  }

  .page-shell--tournament-control .tournament-export-controls .tt-auth__button,
  .page-shell--tournament-control .tournament-export-excel .tt-auth__button,
  .page-shell--tournament-control .tournament-op__checkpoint .tt-auth__button {
    min-height: 2.75rem;
  }

  .page-shell--tournament-control .tournament-op__checkpoint {
    justify-content: stretch;
  }

  .page-shell--tournament-control .tournament-op__checkpoint .tt-auth__button {
    width: 100%;
  }

  .page-shell--tournament-control :is(
    .tournament-board__handle,
    .tournament-board__park,
    .tournament-board__swap-badge
  ) {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .page-shell--tournament-control .tournament-op__history {
    margin-top: var(--sp-2);
  }
}

/* -------------------------------------------------------------------------
   Product-wide engine-class controls and competitive badges

   These rules deliberately follow the route-specific Race Control themes.
   150cc and 200cc are domain identity, not a route accent. Only the selected
   state uses the exact blue/red fill; the available alternative is neutral. */

.track-board__mode--150,
.page-shell--timing-tower .track-board__mode--150,
.page-shell--track-control .track-board__mode--150,
.page-shell--mastery-control .mastery__modes .track-board__mode--150,
.page-shell--compare-control .compare > .mastery__modes .track-board__mode--150 {
  border-color: var(--rc-seam-strong, var(--border-strong));
  background: var(--rc-panel-raised, var(--surface-2));
  color: var(--rc-muted, var(--text-muted));
  box-shadow: none;
}

.track-board__mode--200,
.page-shell--timing-tower .track-board__mode--200,
.page-shell--track-control .track-board__mode--200,
.page-shell--mastery-control .mastery__modes .track-board__mode--200,
.page-shell--compare-control .compare > .mastery__modes .track-board__mode--200 {
  border-color: var(--rc-seam-strong, var(--border-strong));
  background: var(--rc-panel-raised, var(--surface-2));
  color: var(--rc-muted, var(--text-muted));
  box-shadow: none;
}

.track-board__mode--150.track-board__mode--active,
.page-shell--timing-tower .track-board__mode--150.track-board__mode--active,
.page-shell--track-control .track-board__mode--150.track-board__mode--active,
.page-shell--mastery-control .mastery__modes .track-board__mode--150.track-board__mode--active,
.page-shell--compare-control .compare > .mastery__modes .track-board__mode--150.track-board__mode--active {
  border-color: #fff;
  background: var(--engine-150);
  color: #fff;
  box-shadow: inset 0 -2px #fff;
}

.track-board__mode--200.track-board__mode--active,
.page-shell--timing-tower .track-board__mode--200.track-board__mode--active,
.page-shell--track-control .track-board__mode--200.track-board__mode--active,
.page-shell--mastery-control .mastery__modes .track-board__mode--200.track-board__mode--active,
.page-shell--compare-control .compare > .mastery__modes .track-board__mode--200.track-board__mode--active {
  border-color: #fff;
  background: var(--engine-200);
  color: #fff;
  box-shadow: inset 0 -2px #fff;
}

.page-shell--timing-tower .home-focus__engine-toggle .home-focus__mode--150,
.page-shell--ranking-pilot .tt-standing__control-group--mode .tt-standing__toggle-button--150,
.page-shell--timing-tower .activity__filter[data-filter="150"],
.page-shell--activity-control .activity__filter[data-filter="150"] {
  border-color: var(--rc-seam-strong, var(--border-strong));
  background: var(--rc-panel-raised, var(--surface-2));
  color: var(--rc-muted, var(--text-muted));
  box-shadow: none;
}

.page-shell--timing-tower .home-focus__engine-toggle .home-focus__mode--200,
.page-shell--ranking-pilot .tt-standing__control-group--mode .tt-standing__toggle-button--200,
.page-shell--timing-tower .activity__filter[data-filter="200"],
.page-shell--activity-control .activity__filter[data-filter="200"] {
  border-color: var(--rc-seam-strong, var(--border-strong));
  background: var(--rc-panel-raised, var(--surface-2));
  color: var(--rc-muted, var(--text-muted));
  box-shadow: none;
}

.page-shell--timing-tower .home-focus__engine-toggle .home-focus__mode--150.home-focus__mode--active,
.page-shell--ranking-pilot .tt-standing__control-group--mode .tt-standing__toggle-button--150.tt-standing__toggle-button--active,
.page-shell--timing-tower .activity__filter[data-filter="150"].activity__filter--active,
.page-shell--activity-control .activity__filter[data-filter="150"].activity__filter--active {
  border-color: #fff;
  background: var(--engine-150);
  color: #fff;
  box-shadow: inset 0 -2px #fff;
}

.page-shell--timing-tower .home-focus__engine-toggle .home-focus__mode--200.home-focus__mode--active,
.page-shell--ranking-pilot .tt-standing__control-group--mode .tt-standing__toggle-button--200.tt-standing__toggle-button--active,
.page-shell--timing-tower .activity__filter[data-filter="200"].activity__filter--active,
.page-shell--activity-control .activity__filter[data-filter="200"].activity__filter--active {
  border-color: #fff;
  background: var(--engine-200);
  color: #fff;
  box-shadow: inset 0 -2px #fff;
}

/* Ranking track identity is now the natural hand-off to the existing
   per-track leaderboard. Keep the full cup/name target keyboard-visible. */
.tt-standing__track-label {
  color: inherit;
  text-decoration: none;
}

.tt-standing__track-label:hover .tt-standing__track-copy,
.tt-standing__track-label:focus-visible .tt-standing__track-copy {
  box-shadow: 0 0 0 1px var(--rc-cyan, var(--accent));
}

.tt-standing__track-label:focus-visible {
  outline: 2px solid var(--rc-cyan, var(--accent));
  outline-offset: 2px;
}

/* Tournament Tier and Time Trial Mastery retain their canonical colours.
   A white keyline and white text keep the chips readable on every console. */
.page-shell--timing-tower .home-dashboard .home-hero__tier,
.page-shell--timing-tower .home-dashboard .mastery-badge,
.page-shell--player-control .mastery-badge,
.page-shell--player-control .mastery__badge,
.page-shell--compare-control .compare__tier,
.page-shell--player-control .public-player__tier {
  border: 1px solid #fff;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
}

.page-shell--timing-tower .home-dashboard .mastery-badge,
.page-shell--player-control .mastery-badge {
  background: var(--mastery-color);
}

.page-shell--player-control .public-player__rating {
  display: flex;
  gap: .4rem;
  align-items: center;
  flex-wrap: wrap;
}

.page-shell--player-control .public-player__tier-label {
  color: var(--rc-muted);
  font-family: inherit;
  font-size: .66rem;
}

.page-shell--player-control .public-player__tier {
  padding: .2rem .45rem;
  border-radius: var(--rc-radius-sm);
  font-family: inherit;
  font-size: .64rem;
  line-height: 1.1;
}

@media (max-width: 58rem) {
  /* Keep the signed-in phone header actionable: Download is a visible,
     comfortably tappable destination while the passive Sync status is gone. */
  .site-nav__apps,
  .page-shell--timing-tower .site-nav__apps {
    box-sizing: border-box;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding-inline: 0;
  }

  .page-shell--timing-tower .site-nav__apps-mark {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
   Shared coarse-pointer target floor

   Measured across the 320-768 px sweep with touch emulation on. Route shells
   re-declare `display` and padding later in this file, which repeatedly beat
   the general coarse-pointer rule near the top and left standalone controls
   at 12-27 px high. This block is deliberately last and route-shell scoped so
   it wins by order rather than by `!important`, and it grows hit areas into
   the padding a dense timing row already has instead of changing the visual
   rhythm.
   --------------------------------------------------------------------------- */

@media (pointer: coarse) {
  /* Inline identity and destination links inside dense rows. The text keeps
     its size; the negative margin means the row height does not change. */
  .page-shell :is(
    .tt-auth__link,
    .tt-standing__player-name,
    .compare__track,
    .activity-list__track,
    .activity-list__thumb,
    .activity__combo-summary,
    .tournaments__player,
    .tournaments__name,
    .notifications__link,
    .tt-standing__track-label,
    .build__meta-example
  ) {
    display: inline-block;
    padding-block: var(--sp-2);
    margin-block: calc(-1 * var(--sp-2));
  }

  /* Standalone controls get a full target on both axes. */
  .page-shell :is(
    .track-board__video-link,
    .reactions__toggle,
    .reactions__pill,
    .activity__runs-toggle,
    .activity__filter,
    .home-focus__mode,
    .track-board__mode,
    .tt-standing__reset,
    .rival-settings__remove,
    .compare__track,
    .tt-standing__selected button,
    .tt-standing__search-results button,
    .tt-standing__table button,
    .profile-aliases__add button,
    .tt-auth__button
  ) {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  /* A disclosure control is a real action; the triangle alone is not one. */
  .page-shell summary {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Native checkboxes and radios ship at 13 px. Operators tap these on a
     phone during a live Tournament, so they get a comfortable box. */
  .page-shell :is(input[type="checkbox"], input[type="radio"]) {
    width: 1.35rem;
    height: 1.35rem;
  }
}

/* Scanning: one button on the track you already chose. The scanner is the
   bright thing here because typing a six-digit time from a photo is the work
   it removes; the note under it says what the scan does and does not do. */
.tt-product-page__scan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}

.tt-product-page__scan-button {
  min-height: 3.25rem;
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid #ffd640;
  border-radius: 0.75rem;
  color: #14181e;
  background: #ffd640;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.tt-product-page__scan-button:hover {
  filter: brightness(1.08);
}

.tt-product-page__scan-button:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 3px;
}

.tt-product-page__scan-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.tt-product-page__scan-note {
  margin: 0;
  color: #b8bfc9;
  font-size: 0.875rem;
  line-height: 1.45;
}

/* A standing you can open. The tile keeps its shape and gains the affordance:
   the cursor, a hover lift and a focus ring, nothing that moves the layout. */
.home-domain--link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.home-domain--link:hover {
  background: rgba(255, 255, 255, 0.04);
}

.home-domain--link:focus-visible {
  outline: 3px solid #ffa726;
  outline-offset: 3px;
}

/* The Player's own answer, above everyone else's nights: am I racing tonight,
   and if not, what was the last one. */
.tournaments__standing {
  margin-block: var(--sp-3);
}

/* The answer to "am I racing tonight?", above everyone else's nights. */
.tournaments__you { display: grid; }
/* Kept for anyone navigating by heading; the page's own title already says it. */
.tt-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
.tournaments__standing-night {
  margin: 0; font-weight: 700; font-size: 1.05rem;
  display: flex; flex-wrap: wrap; gap: 6px var(--sp-2); align-items: baseline;
}
/* The countdown sits beside the name and must not push the card wider than
   the phone it is read on, so the line wraps rather than the clock shrinking. */
.tournaments__standing-clock {
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--accent);
  color: var(--accent); font-size: .8rem; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tournaments__standing-when { margin: 0; color: var(--text-muted); }
/* The same clock on a list row, for the reader who has no card. */
.tournaments__item-clock {
  display: inline-block; padding: 0 7px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent);
  font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tournaments__standing-seat, .tournaments__standing-result { margin: 0; color: var(--text-muted); }
/* The seat line is people: names that open a profile and the SP-rank colour
   the WhatsApp picture gives them. It wraps rather than widening the card. */
.tournaments__standing-seat {
  display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline;
}
.tournaments__standing-seat .tournaments__seed { flex: 0 0 auto; }
.tournaments__standing-dot { opacity: .55; }
.tournaments__standing-result { font-variant-numeric: tabular-nums; }
.tournaments__standing-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-1); }
.tournaments__standing-actions .tournaments__standing-share { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tournaments__operate { justify-self: start; }
/* The placement the signed-in reader took in a night that is over. */
.tournaments__item-placement { color: var(--text); font-weight: 700; }
.tournaments__standing-card {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  padding: var(--sp-4);
  border: 1px solid var(--rc-seam-strong, #394553);
  border-radius: var(--rc-radius-md, 8px);
  background: var(--rc-panel, #10151b);
}

.tournaments__standing-card--racing {
  border-color: var(--rc-cyan, #39dfd0);
  background: var(--rc-panel-active, #0d1b20);
}


/* The heading is the night's own name now, not a label, so it is written the
   way the night is written: "TOERNOOI10_SIMULATIE" was the card shouting a
   name back at the reader. */
.tournaments__standing-card h3 {
  margin: 0;
  color: var(--rc-cyan, #39dfd0);
  font-size: 1.05rem;
  font-weight: 800;
}

/* A night still to come wears the other neon, heading, edge and clock, so the
   card and the shelf below it say the same thing in the same colour. */
.tournaments__standing-card--soon { border-color: var(--rc-yellow, #eaf24d); }
.tournaments__standing-card--soon h3 { color: var(--rc-yellow, #eaf24d); }
.tournaments__standing-card--soon .tournaments__standing-clock {
  border-color: var(--rc-yellow, #eaf24d); color: var(--rc-yellow, #eaf24d);
}

/* What this night is to the reader, beside its name rather than instead of
   it: whose night it is, and whether it is late. The shelf above already says
   which shelf it is on, so the card never repeats that word. */
.tournaments__standing-state {
  display: inline-block; margin-left: var(--sp-2); padding: 0 .5rem;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  vertical-align: middle;
}
.tournaments__standing-state--mine { color: var(--rc-cyan, #39dfd0); }
.tournaments__standing-card--soon .tournaments__standing-state--mine { color: var(--rc-yellow, #eaf24d); }
.tournaments__standing-state--overdue { color: var(--rc-danger, #ff7165); }
/* A night nobody closed keeps the red of its shelf, wherever it is read. */
.tournaments__standing-card--overdue { border-color: var(--rc-danger, #ff7165); }
.tournaments__standing-card--overdue h3 { color: var(--rc-danger, #ff7165); }

/* Who is in it and who runs it: what the row said before the card took its
   place. */
.tournaments__standing-meta { color: var(--rc-muted, #8793a0); font-size: 0.9rem; }
.tournaments__standing-none { margin: 0; color: var(--text-muted); }

.tournaments__standing-card p {
  margin: 0;
  color: var(--rc-copy, #edf2f7);
}

/* ---------------------------------------------------------------------------
   Tournament standing — the Tournament half of Ranking.

   Same furniture as the Time Trial Rank console: titled cards with a coloured
   rule, one question per card. The table scrolls inside its own box so a wide
   row never pushes the page sideways on a phone.
   --------------------------------------------------------------------------- */

.tournament-standing { display: grid; gap: var(--sp-4); }
.tournament-standing__status { margin: 0; color: var(--text-muted); }
.tournament-standing__body { display: grid; gap: var(--sp-4); }

.tournament-standing__own-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.tournament-standing__own-rank {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--rc-cyan, #39dfd0);
}
.tournament-standing__own-of { color: var(--text-muted); font-size: 0.875rem; }

.tournament-standing__tier {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--tier-color, #39dfd0);
  border-radius: 999px;
  color: var(--tier-color, #39dfd0);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* WHOSE RECORD: the phone has offered this since its Ranking was built, and
   the site could only reach another Player's standing through a link that
   already named them. */
.tournament-standing__search { width: 100%; margin-top: var(--sp-2); }
.tournament-standing__matches { display: grid; gap: 2px; margin-top: var(--sp-2); }
.tournament-standing__match {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  width: 100%;
  min-height: 2.25rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.tournament-standing__match:hover,
.tournament-standing__match:focus-visible {
  border-color: var(--border);
  background: var(--surface-2);
}
.tournament-standing__match-detail { color: var(--text-muted); font-weight: 500; font-size: 0.85rem; }
.tournament-standing__back-to-me { justify-self: start; margin-top: var(--sp-2); }

.tournament-standing__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--sp-3);
  width: 100%;
}
.tournament-standing__figure { display: grid; gap: 0.1rem; min-width: 0; }
.tournament-standing__figure-label {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tournament-standing__figure-value { font-size: 1.25rem; font-weight: 800; }
.tournament-standing__figure-note { color: var(--text-muted); font-size: 0.75rem; }

/* The finish distribution: one column per finishing position, one bar per
   compared Player inside it. */
.tournament-standing__chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 0.25rem;
  width: 100%;
  height: 9rem;
}
.tournament-standing__column {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.2rem;
  min-width: 0;
  height: 100%;
}
.tournament-standing__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  height: 100%;
}
.tournament-standing__bar {
  display: block;
  flex: 1 1 0;
  min-width: 2px;
  height: var(--bar-height, 0%);
  min-height: 1px;
  border-radius: 1px 1px 0 0;
  background: var(--bar-color, #39dfd0);
}
.tournament-standing__column-label {
  color: var(--text-muted);
  font-size: 0.625rem;
  text-align: center;
}

.tournament-standing__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tournament-standing__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
}
.tournament-standing__swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: var(--bar-color, #39dfd0);
}

.tournament-standing__competitors {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}
.tournament-standing__competitor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.tournament-standing__record {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.tournament-standing__meter {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--rc-cyan, #39dfd0) 0 var(--meter-share, 50%),
    var(--rc-seam-strong, #394553) var(--meter-share, 50%) 100%
  );
}
.tournament-standing__shared { color: var(--text-muted); font-size: 0.75rem; }
.tournament-standing__delta {
  color: var(--mk8-red, #e4382c);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}
.tournament-standing__delta--ahead { color: var(--rc-cyan, #39dfd0); }

.tournament-standing__scroller { width: 100%; overflow-x: auto; }
.tournament-standing__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.tournament-standing__table th,
.tournament-standing__table td {
  padding: 0.4rem 0.5rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tournament-standing__table th:nth-child(2),
.tournament-standing__table td:nth-child(2) { text-align: left; }
.tournament-standing__table th {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.tournament-standing__row { border-bottom: 1px solid var(--border); }
.tournament-standing__row--rival td:nth-child(2) {
  box-shadow: inset 2px 0 0 0 var(--mk8-red, #e4382c);
}
.tournament-standing__row--self { background: var(--surface-2); }
.tournament-standing__row--selected td:first-child {
  box-shadow: inset 2px 0 0 0 var(--rc-cyan, #39dfd0);
}
.tournament-standing__player { margin-inline: 0.35rem; }
.tournament-standing__pick {
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.tournament-standing__pick[aria-pressed="true"] {
  border-color: var(--rc-cyan, #39dfd0);
  color: var(--rc-cyan, #39dfd0);
}
/* The main Player of the comparison: fixed, so it reads as a mark, not a
   button (owner, 2026-09-17). */
.tournament-standing__pick--main,
.tournament-standing__pick--main:disabled {
  border-color: var(--rc-cyan, #39dfd0);
  background: color-mix(in srgb, var(--rc-cyan, #39dfd0) 18%, transparent);
  color: var(--rc-cyan, #39dfd0);
  font-size: .7rem;
  cursor: default;
  opacity: 1;
}

@media (max-width: 30rem) {
  .tournament-standing__chart { height: 7rem; }
  .tournament-standing__own-rank { font-size: 1.6rem; }
}

/* Two more comparisons on the Tournament tab: how a Player's races end, and
   how fast they score against the community average. Both are label / bar /
   number rows, so they line up with each other. */
.tournament-standing__outcomes,
.tournament-standing__rates {
  display: grid;
  grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
}
.tournament-standing__outcome-name {
  font-size: 0.8125rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tournament-standing__outcome-summary {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tournament-standing__outcome-bar {
  display: flex;
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-2);
}
.tournament-standing__outcome-part { display: block; width: var(--part-share, 0%); }
.tournament-standing__outcome-part--win { background: var(--rc-cyan, #39dfd0); }
.tournament-standing__outcome-part--podium { background: #f2c14e; }
.tournament-standing__outcome-part--rest { background: var(--rc-seam-strong, #394553); }

.tournament-standing__rate {
  position: relative;
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 3px;
  background: var(--surface-2);
}
.tournament-standing__rate::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: var(--rate-average, 0%);
  width: 2px;
  background: var(--text-muted);
}
.tournament-standing__rate-fill {
  display: block;
  width: var(--rate-share, 0%);
  height: 100%;
  border-radius: 3px;
  background: var(--bar-color, #39dfd0);
}

/* Accounts and Players: the owner's view of who can sign in and whose history
   they see. Same card language as the claim review it sits beside, because it
   answers the same question from the other side. */
.identity-link-list {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.identity-link-row {
  display: grid;
  gap: var(--sp-3);
  width: min(100%, 32rem);
  padding: var(--sp-4);
  border: 1px solid #52525b;
  border-radius: 0.75rem;
  background: rgb(24 24 27 / 92%);
}

.identity-link-who {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.identity-link-current {
  margin: 0;
  color: #c9c9d1;
  font-size: 0.9rem;
}

/* The control is full width at every phone size; the containment gate covers
   this screen from 320 px up. */
.identity-link-choose {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 0.5rem;
}

.identity-link-link,
.identity-link-unlink {
  min-height: 2.75rem;
  padding: var(--sp-2) var(--sp-4);
  border-radius: 0.5rem;
  font-weight: 700;
  cursor: pointer;
}

.identity-link-orphans {
  margin: var(--sp-3) 0 0;
  color: #c9c9d1;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   A grouped notification, opened.

   The inbox collapses on purpose: forty-nine broken World Records are one
   line. What was missing was the way back into them. The disclosure takes the
   full width of the row it belongs to — it is a second line under the summary,
   not a third column beside the timestamp — and the members inside are quieter
   than the entry that counted them.
   ------------------------------------------------------------------------- */
.notifications__group {
  flex-basis: 100%;
  margin-top: var(--sp-1);
}

.notifications__group-summary {
  display: inline-block;
  /* Comfortably past the 24 px coarse-pointer floor without becoming a second
     button competing with "Mark as read". */
  min-height: 1.9rem;
  padding: var(--sp-1) 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.notifications__group-summary:hover { color: var(--accent); }

.notifications__group[open] > .notifications__group-summary { color: var(--accent); }

.notifications__group-summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.3rem;
}

.notifications__group-body { padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); }

.notifications__group-list {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--border);
  padding-left: var(--sp-3);
}

.notifications__group-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: 0.86rem;
  font-weight: 400;
}

.notifications__group-list .notifications__when { margin-left: auto; }

.notifications__group-note {
  margin: var(--sp-1) 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Notification settings above the inbox.

   Four scope pickers, two switches and a three-platform guide is the right
   amount of control and the wrong amount of page: on the screen you open to
   read your notifications it pushed the notifications themselves out of sight.
   Above the inbox it is one openable line that states which state you are in.
   ------------------------------------------------------------------------- */
.notification-settings__collapse > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
}

.notification-settings__collapse > summary::-webkit-details-marker { display: none; }

.notification-settings__collapse > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 120ms ease;
}

.notification-settings__collapse[open] > summary::after { transform: rotate(180deg); }

.notification-settings__collapse > summary h3 { margin: 0; }

.notification-settings__collapse > summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

/* ---------------------------------------------------------------------------
   The inbox lists tracks, so it shows tracks.

   Activity's compact thumb is what makes a list of results readable at a
   glance: you recognise Mount Wario before you have read the word. The inbox
   was prose, and the grouped entry made that worse - forty-nine lines of
   "200cc · Some Track" is a log, not an answer. The thumb rules above now name
   `.notifications__item` as a third consumer rather than being restated here;
   what belongs here is only the row layout around them.
   ------------------------------------------------------------------------- */
.notifications__item { align-items: flex-start; }

/* Wider than Activity's row, because the inbox can afford it and the name has
   to survive. Activity's 7rem left "3DS Rosalina's Ice World" truncated on a
   phone, and a truncated track name is the one thing this whole treatment
   exists to prevent. The line beside it is short - the thumb already says the
   track - so the artwork gets the space. */
.page-shell--timing-tower .notifications__item > .activity-list__thumb,
.page-shell--timing-tower .notifications__group-list li > .activity-list__thumb {
  width: 9rem;
  margin-top: 0;
}

.notifications__body {
  display: flex;
  flex: 1 1 11rem;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-width: 0;
}

.notifications__body > .notifications__link,
.notifications__body > span:first-child {
  flex: 1 1 7rem;
  min-width: 0;
}

.notifications__body .notifications__when { margin-left: auto; }

/* The disclosure and its members take the full width of the text column, never
   a third column beside the timestamp. */
.notifications__body > .notifications__group { flex-basis: 100%; }

.notifications__group-list li {
  align-items: flex-start;
  gap: var(--sp-2);
}

/* A member gets the same artwork as the entry above it. Shrinking it read as a
   sensible hierarchy and was not: the smaller the thumb, the sooner the track
   name runs under the engine chip, and "3DS Rosalina's Ice World" lost the
   "3DS" that distinguishes it from Rosalina's Ice World. The indentation of the
   list carries the hierarchy instead. */
.page-shell--timing-tower .notifications__group-list li > .activity-list__thumb {
  flex: 0 0 auto;
}

/* A World Record member has nothing the thumb does not already say, so its
   detail line is empty and must not claim a gap. */
.notifications__group-list li > span:empty { display: none; }

/* The engine chip sits at the top-left of the artwork and the track label
   grows upward from the bottom. On a narrow thumb a three-line name reaches
   the chip and disappears behind it - "3DS Rosalina's Ice World" lost its
   "3D". Two lines always clear it; the full name stays in the row's own text
   and in the thumb's accessible name. */
.notifications__item .activity-list__track-copy strong,
.notifications__group-list .activity-list__track-copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ---------------------------------------------------------------- Track record
   Where a Player is strong and where they should practise. Two columns because
   the question is really two questions, and they should sit side by side on a
   desktop and stack on a phone rather than compete for the same eye line. */

.track-record__columns {
  display: grid;
  /* --sp-5 does not exist. The scale is 1,2,3,4,6,8,12,16, and seventeen
     places in this stylesheet ask for a fifth step that resolves to nothing -
     which is why the two columns were touching. Fixed here with a real step;
     the other sixteen are a separate look. */
  gap: var(--sp-4) var(--sp-8);
  width: 100%;
  /* One column; two only when there is genuinely room for both. auto-fit was
     producing four tracks, two of them zero-width. */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .track-record__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Fixed size, so a row's height never depends on which artwork loaded. */
.track-record__art {
  flex: 0 0 auto;
  width: 4rem;
  height: 2.25rem;
  border-radius: var(--r-sm, 4px);
  object-fit: cover;
}

.track-record__column { display: grid; gap: var(--sp-2); align-content: start; }

.track-record__heading {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
}

.track-record__hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.track-record__list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.track-record__row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
}

/* The thumb keeps its width; the text beside it gives way instead.
   Activity and the inbox get this for free because their rows are grids with
   a fixed first column. This row is a flex line, so without it the thumb was
   squeezed to 59px at 320px wide and its own label spilled out by 8px - which
   is exactly what the range gate caught. */
.track-record__row > .activity-list__thumb { flex: 0 0 auto; }

.track-record__row:first-child { border-top: 0; }

/* The text column has to be allowed to shrink, or a long track name pushes the
   verdict off the row on a narrow phone. */
.track-record__text { display: grid; gap: 0.125rem; min-width: 0; flex: 1 1 auto; }

.track-record__name {
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.track-record__facts {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.track-record__verdict {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.track-record__verdict--strong { color: var(--positive, #2f9e6b); }
.track-record__verdict--weak { color: var(--negative, #c4453b); }

/* A grid item may not shrink below its content by default; the table must
   scroll inside its scroller, so every ancestor up to the standing may. */
.tournament-standing, .tournament-standing__body, .track-record, .track-record .rank-card__body { min-width: 0; }
.track-record__deep-dive { width: 100%; min-width: 0; max-width: 100%; }

/* The 96-track table is a panel, not a footnote. It was a line of small grey
   text with a marker, under a card, and nobody could see that it opened - so
   it says what it is, says what it holds, and shows the way it swings. */
.track-record__deep-dive {
  margin-top: var(--sp-3);
  border: 1px solid var(--border-strong, #394553);
  border-radius: var(--r-md);
  background: var(--surface-2, #151a21);
}
.track-record__deep-dive[open] { border-color: var(--rc-cyan, #39dfd0); }

.track-record__deep-dive > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  cursor: pointer;
  padding: var(--sp-3);
  color: var(--text);
  list-style: none;
}
.track-record__deep-dive > summary::-webkit-details-marker { display: none; }
.track-record__deep-dive-heading { display: grid; gap: 2px; min-width: 0; }
.track-record__deep-dive-title {
  font-size: 0.95rem; font-weight: 800; color: var(--text);
}
.track-record__deep-dive-subtitle {
  font-size: 0.78rem; color: var(--text-muted);
}
.track-record__deep-dive-chevron {
  flex: none; color: var(--rc-cyan, #39dfd0); font-size: 1rem;
  transition: transform 120ms ease;
}
.track-record__deep-dive[open] .track-record__deep-dive-chevron { transform: rotate(180deg); }
.track-record__deep-dive > summary:hover .track-record__deep-dive-title,
.track-record__deep-dive > summary:focus-visible .track-record__deep-dive-title {
  color: var(--rc-cyan, #39dfd0);
}
/* Everything under the head sits inside the panel's own padding. */
.track-record__deep-dive-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2);
  padding: 0 var(--sp-3);
}
.track-record__deep-dive .track-record__scroller { padding: 0 var(--sp-3) var(--sp-3); }
.track-record__share {
  border: 1px solid var(--border-strong, #394553); border-radius: 999px;
  background: transparent; color: var(--text-muted);
  padding: .15rem .6rem; font-size: .75rem; font-weight: 700; cursor: pointer;
}
.track-record__share:hover, .track-record__share:focus-visible {
  border-color: var(--rc-cyan, #39dfd0); color: var(--rc-cyan, #39dfd0);
}

/* The table scrolls inside itself; the page never scrolls sideways. */
.track-record__scroller { overflow-x: auto; width: 100%; }

.track-record__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.track-record__table th,
.track-record__table td {
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

.track-record__table thead th {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.track-record__table th[scope="row"],
.track-record__table thead th:first-child {
  text-align: left;
  white-space: normal;
}

/* The cup is a name with a mark, not a number. Right-aligned it started every
   row in a different place and the column read as a jumble (owner,
   2026-09-16); the figures beside it stay right, where digits line up. */
.track-record__table th:nth-child(2),
.track-record__table td:nth-child(2) { text-align: left; }

.page-shell--timing-tower .track-record__row { border-color: var(--border); }

/* ------------------------------------------------------- Observed identities
   Who was behind which name on a console. A review surface: the rows that
   disagree with the rated history have to be findable in a list of hundreds,
   and a row that a person has corrected must never look like a derived one. */

.observed-identities { display: grid; gap: var(--sp-3); }

.observed-identities__explain,
.observed-identities__status,
.observed-identities__count,
.observed-identities__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.observed-identities__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.observed-identities__search { flex: 1 1 14rem; min-width: 0; }

.observed-identities__toggle {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  font-size: 0.8125rem;
}

.observed-identities__list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Hundreds of rows: the list scrolls inside itself so the controls above it
     stay reachable. */
  max-height: 32rem;
  overflow-y: auto;
}

.observed-identity-row {
  display: grid;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

/* The two states that must not be mistaken for an ordinary row. */
.observed-identity-row--review { border-left: 4px solid var(--warning, #d08b1f); }
.observed-identity-row--manual { border-left: 4px solid var(--accent); }

.observed-identity-row__where {
  margin: 0;
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.observed-identity-row__name {
  margin: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.observed-identity-row__evidence {
  margin: 0;
  grid-column: 1;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.observed-identity-row__choose {
  grid-column: 2;
  grid-row: 2 / span 2;
  max-width: 14rem;
}

.observed-identity-row__manual {
  margin: 0;
  grid-column: 1 / -1;
  color: var(--accent);
  font-size: 0.8125rem;
}

.observed-identity-row__undo {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (max-width: 30rem) {
  /* Below this the dropdown and the evidence cannot share a line without one
     of them being clipped, so the row becomes a single column. */
  .observed-identity-row { grid-template-columns: minmax(0, 1fr); }
  .observed-identity-row__choose {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
  }
}

/* Sortable headers on the full track table. A header is a button because it
   does something; the arrow says which way, and aria-sort says it again for a
   screen reader. */
.track-record__sort {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.track-record__sort:hover { text-decoration: underline; }
.track-record__sort--active { color: var(--accent); }
.track-record__count { margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: 0.75rem; }
.track-record__filter-row th { padding-top: 0; padding-bottom: var(--sp-2); }
.track-record__filter {
  width: 100%; min-width: 4.25rem; box-sizing: border-box; padding: 2px var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 0.75rem; text-transform: none; letter-spacing: 0;
}
.track-record__filter::placeholder { color: var(--text-muted); opacity: 0.8; }
.track-record__table th[scope="row"] { display: flex; align-items: center; gap: var(--sp-2); }
/* The picture and the name open that track TrueSkill page; the numbers beside
   them stay plain text (owner, 2026-09-16). */
.track-record__track-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  color: inherit; text-decoration: none; min-width: 0;
}
.track-record__track-link:hover span, .track-record__track-link:focus-visible span {
  color: var(--rc-cyan, #39dfd0); text-decoration: underline;
}
.track-record__track-icon { width: 2.25rem; height: 1.5rem; object-fit: cover; border-radius: 3px; flex: none; }
.track-record__cup-icon { width: 1.125rem; height: 1.125rem; object-fit: contain; vertical-align: -0.2em; margin-right: var(--sp-1); }
.track-record__win {
  --win-color: transparent;
  background: var(--win-color); color: #14181f; font-weight: 800; text-align: right;
  padding-left: var(--sp-2); padding-right: var(--sp-2); border-radius: 4px;
}

.track-record__table th[scope="col"] { vertical-align: bottom; }

/* A track nobody has raced is still worth listing - that is the point of
   showing all 96 - but it should not compete with the ones that carry data. */
.track-record__table-unraced { color: var(--text-muted); }

/* The way from a Player's career into their Ranking. It sits beside the
   heading rather than under the table, because somebody reading the career is
   already asking the question it answers. */
.tournament-career__ranking {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* The way back out of a Ranking that is focused on somebody: the standing and
   the competitor list keep you inside Ranking, so the rest of what a Player
   has done is reached from here. */
/* The legend that says what the three numbers on a competitor row mean. It
   sits between the card note and the list, so it reads as part of the
   explanation rather than as a first row. */
/* The Player has not raced in over a year, so the inactivity rule has started
   reverting their rating. Without the mark a reverted score reads as somebody
   who simply got worse. */
.tournament-standing__away {
  margin-left: 0.15rem;
  color: var(--text-muted);
  font-weight: 900;
}

.tournament-standing__competitor-key {
  margin-top: calc(var(--sp-1) * -1);
  margin-bottom: var(--sp-2);
}

.tournament-standing__to-profile {
  display: inline-block;
  margin-block: var(--sp-1) var(--sp-3);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Administration › Overview: a few large figures, each with its own sentence. */
.admin-overview__status { color: var(--text-muted); }
.admin-overview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.admin-overview__tile {
  padding: var(--sp-4);
  border: 1px solid var(--border, #3b4252);
  border-radius: var(--r-sm);
  background: var(--panel, rgba(255, 255, 255, 0.04));
  min-width: 0;
}
.admin-overview__figure {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.admin-overview__label { margin: var(--sp-1) 0 0; font-size: 1rem; }
.admin-overview__note { margin: var(--sp-1) 0 0; color: var(--text-muted); overflow-wrap: anywhere; }
.admin-overview__link { display: inline-block; margin-top: var(--sp-2); }

/* Tournament pictures: the canvas is the preview, shown at its own aspect.
   A results picture is a tall strip - six groups come out 0.29 wide-to-tall -
   so the frame is the box, not the picture: the drawing keeps its shape and
   a readable width, and the box scrolls when the strip is longer than it.
   Bounding the canvas itself in both directions squashed it sideways. */
.tournament-export-picture {
  margin: var(--sp-2) 0; max-height: 70vh; overflow: auto;
}
.tournament-export-picture canvas {
  display: block; width: auto; height: auto;
  max-width: min(38rem, 100%); border-radius: 10px;
}
.tournaments__export { margin: var(--sp-4) 0; }
.tournaments__export .tournament-export-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tournaments__export .tournament-export-controls { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.tournaments__group-count {
  display: inline-block; margin-left: var(--sp-2); padding: 0 .5rem; border-radius: 999px;
  background: #2F3D58; color: #E4ECFF; font-size: .78rem; font-weight: 700; vertical-align: middle;
}
.tournaments__group-stats { margin: var(--sp-1) 0 0; padding: .2rem .5rem; border-radius: .35rem; background: #1B2336; color: #CFD8E9; font-size: .82rem; }
.tournaments__spread-plus { color: #6EF3A0; font-weight: 700; }
.tournaments__spread-minus { color: #FF8CA5; font-weight: 700; }
.tournaments__seed {
  display: inline-block; min-width: 2.6rem; padding: 0 .4rem; border-radius: 999px; text-align: center;
  color: #1C1917; font-size: .78rem; font-weight: 800; background: #94A3B8A6;
}
.tournaments__seed--champion { background: #F59E0BA6; }
.tournaments__seed--talent { background: #38BDF8A6; }
.tournaments__seed--wild { background: #A78BFAA6; }
.tournaments__seed--adventure { background: #4ADE80A6; }
.tournaments__seed--feest { background: #EC4899A6; }
.tournaments__seed--new { background: #F97316A6; }
.tournaments__standing--podium-2 .tournaments__rank { color: #CBD5E1; }
.tournaments__standing--podium-3 .tournaments__rank { color: #CD7F32; }

/* A group row on the public night page: rank, SP seed and name on one line,
   the points line under the name. Keeping the points on the same line made
   the row's own minimum wider than a phone in Dutch ("25 pnt · 12 races ·
   3 overwinningen" beside a medal rank and a seed chip), which pushed the
   whole document sideways. */
.tournaments__standings--group .tournaments__standing {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  row-gap: var(--sp-1);
}
.tournaments__standings--group .tournaments__standing .tournaments__detail {
  grid-column: 3;
  overflow-wrap: anywhere;
}
.tournaments__standings--group .tournaments__seed { justify-self: start; }

/* A Home session card opened to its runs: the fastest is the head. */
.activity-list__runs-summary--toggle {
  border: 1px solid var(--border, #3b4252); border-radius: 999px; background: transparent;
  color: inherit; font: inherit; padding: 0 .5rem; cursor: pointer; min-height: 1.6rem;
}
.activity-list__runs-summary--toggle[aria-expanded="true"] { background: var(--panel, rgba(255, 255, 255, 0.08)); }
.activity__session-runs {
  grid-column: 1 / -1; list-style: none; margin: var(--sp-1) 0 0; padding: 0 0 0 var(--sp-2);
  display: grid; gap: .15rem; border-left: 3px solid var(--border, #3b4252);
}
.activity__session-run {
  display: grid; grid-template-columns: auto auto 1fr; gap: var(--sp-2); align-items: baseline;
  font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.activity__session-run--head { color: var(--text); }
.activity__session-run--head .activity__session-run-note { color: #4ade80; font-weight: 700; }
.activity__session-run-when { justify-self: end; font-size: .82rem; }

/* ---------------------------------------------------------------------------
   Tournaments list: what is running and what is done, as two lists; the
   Director's name for the signed-in; a marker on the nights you are in.
   --------------------------------------------------------------------------- */
.tournaments__section { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.tournaments__section-title {
  margin: 0; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.tournaments__section--running .tournaments__section-title { color: var(--rc-cyan, #39dfd0); }
.tournaments__section--soon .tournaments__section-title { color: var(--rc-yellow, #eaf24d); }
.tournaments__section--soon .tournaments__item-clock {
  border-color: var(--rc-yellow, #eaf24d); color: var(--rc-yellow, #eaf24d);
}
.tournaments__section--finished .tournaments__section-title { color: var(--rc-success, #7fe8a0); }
.tournaments__section--stalled .tournaments__section-title { color: var(--rc-danger, #ff7165); }

/* ---------------------------------------------------------------------------
   Every race so far: what the community has driven over every finished night.
   A panel like the Ranking's 96-track table, because it is the same kind of
   thing - a lot of numbers you open when you want them.
   --------------------------------------------------------------------------- */
.tournaments__statistics {
  margin-top: var(--sp-4);
  border: 1px solid var(--border-strong, #394553);
  border-radius: var(--r-md);
  background: var(--surface-2, #151a21);
  min-width: 0;
}
/* Always open: it is a section of the page, not a drawer. */
.tournaments__statistics { border-color: var(--rc-cyan, #39dfd0); }
.tournaments__statistics-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3); color: var(--text);
}
.tournaments__statistics-head .track-record__deep-dive-title {
  margin: 0; font-size: 1.05rem;
}
.tournaments__statistics-body { display: grid; gap: var(--sp-4); padding: 0 var(--sp-3) var(--sp-3); min-width: 0; }
/* The site's own header is sticky, so anything scrolled to keeps its height. */
.tournaments__statistics { scroll-margin-top: 4.5rem; }

.tournaments__statistics-totals {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.tournaments__statistics-figure {
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-1); min-width: 0;
}
.tournaments__statistics-label {
  margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.tournaments__statistics-amount {
  margin: 2px 0 0; font-size: 1.5rem; font-weight: 800; line-height: 1.1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.tournaments__statistics-note { margin: var(--sp-1) 0 0; color: var(--text-muted); font-size: 0.75rem; }

.tournaments__statistics-growth h4,
.tournaments__statistics-cups h4 {
  margin: 0 0 var(--sp-2); font-size: 0.85rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
/* The curve is the community's own story: it may scale down, never sideways. */
.tournaments__statistics-svg { display: block; width: 100%; height: auto; }
/* Hairline: the rules are a scale to read against, not a grid to read. */
.tournaments__statistics-rule { stroke: var(--border); stroke-width: 0.5; opacity: 0.7; }
.tournaments__statistics-line {
  fill: none; stroke: var(--rc-cyan, #39dfd0); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.tournaments__statistics-dot { fill: var(--rc-cyan, #39dfd0); }
.tournaments__statistics-value {
  fill: var(--text); font-size: 11px; font-weight: 700;
}
.tournaments__statistics-axis { fill: var(--text-muted); font-size: 10px; }

/* Five tiles, then a box: a top five is something you look at, a full list is
   something you go into. */
.tournaments__statistics-tiles-block h4 {
  margin: 0 0 var(--sp-2); font-size: 0.85rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.tournaments__statistics-tiles {
  list-style: none; margin: 0 0 var(--sp-3); padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.tournaments__statistics-tile {
  position: relative; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-1); overflow: hidden;
}
.tournaments__statistics-tile--cup {
  display: grid; justify-items: center; gap: 2px; padding: var(--sp-3);
  text-align: center;
}
.tournaments__statistics-tile-button {
  display: grid; gap: 2px; width: 100%; padding: 0 0 var(--sp-3);
  border: 0; background: transparent; color: inherit; cursor: pointer;
  text-align: center; font: inherit;
}
.tournaments__statistics-tile--track:hover,
.tournaments__statistics-tile:focus-within { border-color: var(--rc-cyan, #39dfd0); }
.tournaments__statistics-tile-picture {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; margin-bottom: var(--sp-2);
}
.tournaments__statistics-tile-cup-icon { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.tournaments__statistics-tile-rank {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  padding: 0 .4rem; border-radius: 999px;
  background: var(--rc-cyan, #39dfd0); color: #06231f;
  font-size: .72rem; font-weight: 800;
}
.tournaments__statistics-tile--cup .tournaments__statistics-tile-rank { position: static; }
.tournaments__statistics-tile-name {
  font-weight: 800; font-size: 0.9rem; padding: 0 var(--sp-2); overflow-wrap: anywhere;
}
.tournaments__statistics-tile-amount {
  font-size: 1.05rem; font-weight: 800; color: var(--rc-cyan, #39dfd0);
  font-variant-numeric: tabular-nums;
}
.tournaments__statistics-tile-note { font-size: 0.75rem; color: var(--text-muted); padding: 0 var(--sp-2); }

/* One track, on its own page, with the way back where a reader looks for it. */
.tournaments__statistics-back {
  justify-self: start; border: 1px solid var(--border-strong, #394553);
  border-radius: 999px; background: transparent; color: var(--text);
  padding: .2rem .7rem; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.tournaments__statistics-back:hover, .tournaments__statistics-back:focus-visible {
  border-color: var(--rc-cyan, #39dfd0); color: var(--rc-cyan, #39dfd0);
}
/* Your own line in a track's standing, marked exactly as the time-trial board
   marks your own row: the "you" surface, a 2px accent bar, and the rank and
   the name in the accent (owner, 2026-09-17). The bar sits on the first cell
   because a table row does not paint a shadow of its own. */
.tournaments__statistics-row--you > * { background: var(--surface-you, #0d141c); }
.tournaments__statistics-row--you > th[scope="row"] {
  box-shadow: inset 2px 0 var(--accent, #35d6c6);
  color: var(--accent, #35d6c6);
  font-weight: 700;
}
.tournaments__statistics-row--you .tournaments__statistics-player {
  color: var(--accent, #35d6c6);
  font-weight: 700;
}

/* From a track own TrueSkill page on to the time trials on it. */
.tournaments__statistics-board-link {
  justify-self: start; color: var(--rc-cyan, #39dfd0); font-weight: 700;
  font-size: .85rem; text-decoration: none;
}
.tournaments__statistics-board-link:hover,
.tournaments__statistics-board-link:focus-visible { text-decoration: underline; }
.tournaments__statistics-track-head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-width: 0;
}
.tournaments__statistics-track-picture {
  width: 10rem; max-width: 40%; height: auto; border-radius: var(--r-sm); display: block;
}
.tournaments__statistics-track-title { margin: 0; font-size: 1.2rem; font-weight: 800; }

/* The second line: everybody who has ever raced one, which only climbs. */
.tournaments__statistics-line--seen {
  stroke: var(--rc-yellow, #eaf24d); stroke-width: 2; stroke-dasharray: 5 4;
}
.tournaments__statistics-dot--seen { fill: var(--rc-yellow, #eaf24d); }
.tournaments__statistics-value--seen { fill: var(--rc-yellow, #eaf24d); font-size: 10px; }
.tournaments__statistics-legend { display: flex; gap: var(--sp-3); margin: 0 0 var(--sp-2); flex-wrap: wrap; }
.tournaments__statistics-key { font-size: 0.75rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: .35rem; }
.tournaments__statistics-key::before {
  content: ""; width: 1.1rem; height: 0; border-top: 3px solid var(--rc-cyan, #39dfd0); border-radius: 2px;
}
.tournaments__statistics-key--seen::before {
  border-top: 3px dashed var(--rc-yellow, #eaf24d);
}

.tournaments__statistics-cup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.tournaments__statistics-cup {
  display: grid; grid-template-columns: auto minmax(4rem, 8rem) 1fr auto;
  align-items: center; gap: var(--sp-2); font-size: 0.82rem; min-width: 0;
}
.tournaments__statistics-cup-name { font-weight: 700; overflow-wrap: anywhere; }
.tournaments__statistics-bar {
  display: block; height: 6px; border-radius: 999px;
  background: var(--surface-1); overflow: hidden; min-width: 0;
}
.tournaments__statistics-bar-fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--rc-cyan, #39dfd0);
}
.tournaments__statistics-cup-amount { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tournaments__statistics-table-block { min-width: 0; }
/* A track is a door: its own rating opens under the table. */
.tournaments__statistics-row { cursor: pointer; }
.tournaments__statistics-row:hover th,
.tournaments__statistics-row:hover td { background: var(--surface-2, #151a21); }
.tournaments__statistics-row--open th,
.tournaments__statistics-row--open td {
  background: var(--rc-cyan-soft, rgb(57 223 208 / 11%));
}
.tournaments__statistics-focus {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--border); min-width: 0;
}
.tournaments__statistics-focus h4 {
  margin: 0 0 var(--sp-1); font-size: 0.95rem; font-weight: 800; color: var(--text);
}
.tournaments__statistics-score { font-weight: 800; color: var(--rc-cyan, #39dfd0); }
.tournaments__statistics-player { color: var(--rc-cyan, #39dfd0); text-decoration: none; font-weight: 700; }
.tournaments__statistics-player:hover { text-decoration: underline; }

.tournaments__item-you {
  /* A chip, not a band. Its parent is a grid, and a grid item is blockified
     and stretched, so `inline-block` alone left this pill the full width of
     the card - eight saturated bars shouting the least important fact on the
     page. `justify-self` is what actually holds it to its own text. */
  display: inline-block; justify-self: start; margin-top: var(--sp-1);
  padding: 0 .5rem; border-radius: 999px;
  /* Quiet on purpose. On this page the accent means "this night is running";
     "you were there" is a fact about the reader, not about the night, and it
     used to be shouted in the same colour on eight cards at once. */
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-muted); font-size: .74rem; font-weight: 700;
}

/* ---------------------------------------------------------------------------
   The night's report: the community's own exported report, on the site.

   The export is a light document with serif headings in a narrow column, and
   that is what a reader of these reports expects, so the report keeps that
   look inside the dark product instead of borrowing the product's own. The
   tokens below are the export's own (`.mk8-erik-export` and `.mk-tournament`).
   --------------------------------------------------------------------------- */
.tournament-report {
  --report-paper: #ffffff;
  --report-soft: #fbfaf7;
  --report-line: rgba(44, 58, 78, 0.14);
  --report-text: #1d2938;
  --report-muted: rgba(29, 41, 56, 0.72);
  --report-accent-ink: #275ea8;
  --report-kicker: #8a4b26;
  --report-numeral: #8d4e28;
  display: grid;
  gap: 28px;
  margin: var(--sp-5) 0;
  padding: 26px 22px 30px;
  border: 1px solid var(--report-line);
  border-radius: 22px;
  background: linear-gradient(180deg, #fffefc 0%, #f6f3ed 100%);
  color: var(--report-text);
  font-size: 15px;
  line-height: 1.6;
}
/* The night's report is a document: not a grid, because the bar that stays in
   view is a child here and a sticky grid item never leaves its own row. The
   administrator's report editor shares the class and keeps its grid. */
.tournament-report--document { display: block; }
.tournament-report__body { display: grid; gap: 28px; }
.tournament-report,
.tournament-report :is(p, li, td, th, span, small, strong, em, a, div, figcaption, summary, nav) {
  font-family: "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
.tournament-report :is(h3, h4, h5, h6) {
  font-family: "Noto Serif", Georgia, "Times New Roman", serif;
  color: #1a2431;
  margin: 0;
}
.tournament-report h3 { font-size: 1.35rem; line-height: 1.25; }
.tournament-report h4 { font-size: 1.1rem; }
.tournament-report h5 { font-size: 1rem; }
.tournament-report__kicker {
  margin: 0 0 6px; color: var(--report-kicker); letter-spacing: 0.12em;
  text-transform: uppercase; font-size: 0.74rem; font-weight: 800;
}
.tournament-report__copy { margin: 0; line-height: 1.72; color: var(--report-text); }
.tournament-report__copy--generated { color: var(--report-muted); }
.tournament-report__source { color: var(--report-accent-ink); font-size: .88rem; }
.tournament-report a { color: var(--report-accent-ink); }

.tournament-report__story {
  display: grid; gap: 10px; padding: 20px 22px;
  border: 1px solid rgba(44, 58, 78, 0.12); border-radius: 18px;
  background: var(--report-paper);
}
.tournament-report__more summary { cursor: pointer; color: var(--report-accent-ink); font-weight: 700; }
.tournament-report__more[open] summary { margin-bottom: 8px; }
.tournament-report__more .tournament-report__copy + .tournament-report__copy { margin-top: 10px; }

/* Top 5 gereden banen: the track's own picture behind its row. */
.tournament-report__tracks { display: grid; gap: 10px; }
.tournament-report__top { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tournament-report__top-head,
.tournament-report__top-row {
  position: relative; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--report-line); background: var(--report-paper); overflow: hidden;
}
.tournament-report__top-head {
  background: #eef4fb; font-weight: 700; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--report-muted);
}
.tournament-report__top-row { min-height: 52px; }
.tournament-report__top-picture {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .32; z-index: 0;
}
.tournament-report__top-row > span,
.tournament-report__top-row > strong { position: relative; z-index: 1; }
.tournament-report__top-name { font-weight: 700; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85); }
.tournament-report__top-index,
.tournament-report__top-count { color: var(--report-numeral); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Eindgroepen | Voorronden: the reader picks the groups; the writing stays on the finals. */
.tournament-report__stages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); }
.tournament-report__stage {
  padding: .35rem .9rem; border: 1px solid var(--report-rule, #cfd6df); border-radius: 999px; background: transparent;
  color: var(--report-muted); font: inherit; font-weight: 700; cursor: pointer;
}
.tournament-report__stage[aria-pressed="true"] { background: var(--report-ink, #1d2938); color: #fff; border-color: var(--report-ink, #1d2938); cursor: default; }
.tournament-report__stage-hint { flex-basis: 100%; margin: 0; color: var(--report-muted); font-size: .85rem; }
.tournament-report__group {
  display: grid; gap: 14px; padding-left: 14px;
  border-left: 5px solid var(--report-group-accent, #9b5a31);
}
.tournament-report__player--accent-0 { --report-accent: hsl(0 46% 38%); }
.tournament-report__player--accent-1 { --report-accent: hsl(138 46% 38%); }
.tournament-report__player--accent-2 { --report-accent: hsl(275 46% 38%); }
.tournament-report__player--accent-3 { --report-accent: hsl(53 46% 38%); }
.tournament-report__player--accent-4 { --report-accent: hsl(190 46% 38%); }
.tournament-report__player--accent-5 { --report-accent: hsl(328 46% 38%); }
.tournament-report__player--accent-6 { --report-accent: hsl(105 46% 38%); }
.tournament-report__player--accent-7 { --report-accent: hsl(243 46% 38%); }
.tournament-report__player--accent-8 { --report-accent: hsl(20 46% 38%); }
.tournament-report__player--accent-9 { --report-accent: hsl(158 46% 38%); }
.tournament-report__player--accent-10 { --report-accent: hsl(295 46% 38%); }
.tournament-report__player--accent-11 { --report-accent: hsl(73 46% 38%); }
.tournament-report__group--champion { --report-group-accent: #9b5a31; }
.tournament-report__group--talent { --report-group-accent: #275ea8; }
.tournament-report__group--wild { --report-group-accent: #6b4f9b; }
.tournament-report__group--adventure { --report-group-accent: #1d7f54; }
.tournament-report__group--feest { --report-group-accent: #a8336a; }
.tournament-report__group--winners { --report-group-accent: #9b5a31; }
.tournament-report__group--losers { --report-group-accent: #275ea8; }
.tournament-report__group-meta { margin: 0; color: var(--report-muted); font-size: .9rem; }
.tournament-report__group-tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--report-group-accent, #275ea8) 40%, transparent);
  background: color-mix(in srgb, var(--report-group-accent, #275ea8) 12%, transparent);
  color: color-mix(in srgb, var(--report-group-accent, #275ea8) 80%, #10202f);
  font-size: .78rem; font-weight: 800;
}

.tournament-report__player {
  position: relative; display: grid; gap: 10px; padding: 18px 20px 16px;
  border: 1px solid color-mix(in srgb, var(--report-accent, #275ea8) 22%, rgba(44, 58, 78, 0.12));
  border-radius: 18px; background: linear-gradient(180deg, #fffefc 0%, #f7f4ee 100%);
  box-shadow: 0 10px 26px rgba(27, 39, 56, 0.06); overflow: hidden;
  /* Clear the site's navigation and the bar under it, both measured. */
  scroll-margin-top: calc(var(--report-context-top, 56px) + var(--report-context-offset, 52px));
}
.tournament-report__player::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--report-accent, #275ea8);
}
.tournament-report__player-head { display: grid; gap: 2px; }
.tournament-report__player-name { font-size: 1.25rem; font-weight: 800; }
.tournament-report__meta { margin: 0; color: var(--report-muted); font-size: .92rem; }
/* The SP line: the rank in the standing page's tier badge, the change in colour. */
.tournament-report__sp { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .15rem; }
.tournament-report__sp-rank { font-size: .72rem; }
.tournament-report__sp-delta { font-weight: 700; margin-left: .25rem; }
.tournament-report__sp-split { font-size: .85rem; }
.tournament-report__sp-split .tournament-report__sp-delta { margin-left: 0; }
/* The switch inside a Player's section, and the standing the back link reaches under the bars. */
.tournament-report__player-stages { display: flex; gap: 6px; margin: 4px 0 0; }
.tournament-report__stage--player { padding: .2rem .7rem; font-size: .8rem; }
#eindstand { scroll-margin-top: calc(var(--report-context-top, 56px) + var(--report-context-offset, 60px)); }
/* A box of its own, or the cell reflows when the picture arrives (measured
   at 6px sideways per icon on the owner's phone profile, 2026-09-15). */
.tournament-report__readout-icon {
  height: 18px; width: 26px; object-fit: contain; vertical-align: middle; margin-right: 4px;
}
.tournament-report__sp-delta--up { color: var(--positive, #2f9e6b); }
.tournament-report__sp-delta--down { color: var(--negative, #c4453b); }
.tournament-report__kpi { margin: 0; color: #33475e; font-size: .86rem; line-height: 1.45; }
.tournament-report__summary-title { margin-top: 6px; }
.tournament-report__analysis-title { color: var(--report-muted); font-size: .92rem; margin-top: 6px; }
.tournament-report__charts { display: grid; gap: 16px; margin-top: 6px; }

.tournament-report__figure { margin: 0; display: grid; gap: 6px; }
.tournament-report__figure-title {
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem;
  font-family: "Noto Serif", Georgia, serif;
}
.tournament-report__info {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px;
  border: 1px solid rgba(44, 58, 78, 0.3); color: var(--report-muted);
  font-size: .7rem; font-style: italic; cursor: help; flex: none;
}
.tournament-report__chart-shell {
  border: 1px solid var(--report-line); border-radius: 12px; background: var(--report-paper);
  padding: 6px; touch-action: pan-y;
}
.tournament-report__chart-shell:focus-visible { outline: 2px solid var(--report-accent-ink); outline-offset: 2px; }
.tournament-report__chart { display: block; width: 100%; height: auto; }
/* The shell carries the chart's shape as a class. Two things were tried here
   and are deliberately not used, both measured on a phone profile over one
   scroll pass of a published night (2026-09-16): `content-visibility: auto`
   took the layout shift from 0.03 to 2.6 as sections resized on the way in and
   out, and `aspect-ratio` on the shell more than doubled the main-thread cost
   (4 long tasks to 10) because the SVG inside already sizes itself. */
.tournament-report__grid { stroke: rgba(44, 58, 78, 0.12); stroke-width: 1; }
.tournament-report__baseline { stroke: rgba(44, 58, 78, 0.42); stroke-width: 1.5; }
.tournament-report__average { stroke: #c8922f; stroke-width: 2; stroke-dasharray: 6 5; }
.tournament-report__guide { stroke: rgba(39, 94, 168, 0.55); stroke-width: 1.5; stroke-dasharray: 4 4; }
.tournament-report__tick { fill: rgba(29, 41, 56, 0.66); font-size: 12px; font-family: inherit; }
.tournament-report__axis { fill: rgba(29, 41, 56, 0.55); font-size: 12px; font-family: inherit; }
.tournament-report__dot { stroke: #ffffff; stroke-width: 1.2; }
.tournament-report__dot.is-active { r: 6.5; stroke-width: 2; }
.tournament-report__bar.is-active { fill-opacity: 1; }
/* Where a place chart reaches the podium the source draws the medal itself,
   in place of the dot. The outline is the paper, so it reads over a line. */
.tournament-report__podium text {
  font-size: 19px; dominant-baseline: middle;
  paint-order: stroke; stroke: #fffefc; stroke-width: 3px;
}
.tournament-report__podium.is-active text { font-size: 24px; }
/* The duel: the half above the rule belongs to this Player, the half below to
   the one they are racing. Green for ahead, red for behind, as the source. */
.tournament-report__duel-area--ahead { fill: rgba(45, 138, 78, .22); }
.tournament-report__duel-area--behind { fill: rgba(190, 60, 60, .20); }
.tournament-report__duel-line {
  fill: none; stroke: #23303f; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.tournament-report__dot--ahead { fill: #2d8a4e; }
.tournament-report__dot--behind { fill: #be3c3c; }
.tournament-report__duel-name {
  fill: var(--report-muted); font-size: 13px; font-weight: 700;
}

/* The readout the pointer writes, the export's own answer to "what happened
   in race 7?". It rests on the last race so the chart is never mute. */
.tournament-report__readout {
  border: 1px solid var(--report-line); border-radius: 10px; background: var(--report-soft);
  padding: 8px 10px; min-height: 3.2rem;
}
.tournament-report__readout-title { margin: 0 0 4px; font-weight: 700; font-size: .86rem; }
.tournament-report__readout-title--resting { color: var(--report-muted); font-weight: 600; }
.tournament-report__readout-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tournament-report__readout-table th {
  text-align: left; font-weight: 600; color: var(--report-muted); padding: 1px 8px 1px 0;
  display: flex; align-items: center; gap: 6px;
}
.tournament-report__readout-table td { text-align: right; font-variant-numeric: tabular-nums; padding: 1px 0; }
.tournament-report__readout-key { flex: none; }
.tournament-report__readout-lines { display: block; color: var(--report-muted); font-size: .8rem; }
.tournament-report__readout-empty { color: var(--report-muted); }
.tournament-report__back { justify-self: start; color: var(--report-accent-ink); font-size: .85rem; }

/* The heading the export opens with. */
.tournament-report__title { margin: 0; font-family: "Noto Serif", Georgia, serif; font-size: 1.5rem; line-height: 1.25; }
.tournament-report__title strong { font-weight: 800; }

/* The standing of every group: this is the report's index, so every name is a
   link down to that Player's own section. */
.tournament-report__standings-grid {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tournament-report__standings-card {
  display: grid; gap: 6px; padding: 16px 16px 14px; min-width: 0;
  border: 1px solid var(--report-line); border-radius: 16px; background: var(--report-paper);
  border-top: 3px solid var(--report-group-accent, var(--report-line));
}
.tournament-report__standings-title { font-size: 1.1rem; }
.tournament-report__standings-meta { margin: 0; color: var(--report-muted); font-size: .84rem; }
.tournament-report__table-scroll { overflow-x: auto; }
.tournament-report__standings-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tournament-report__standings-head {
  padding: 4px 6px; border-bottom: 1px solid var(--report-line);
  color: var(--report-muted); font-size: .74rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; text-align: left;
}
.tournament-report__standings-table td { padding: 4px 6px; border-bottom: 1px solid rgba(44, 58, 78, .07); }
.tournament-report__standings-table .is-rank { width: 2.2rem; text-align: left; font-weight: 700; font-variant-numeric: tabular-nums; }
.tournament-report__standings-table .is-char { width: 2.2rem; }
.tournament-report__standings-table .is-points { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.tournament-report__standings-link { color: var(--report-text); font-weight: 600; text-decoration: none; }
.tournament-report__standings-link:hover,
.tournament-report__standings-link:focus-visible { color: var(--report-accent-ink); text-decoration: underline; }
.tournament-report__standings-character { width: 22px; height: 22px; object-fit: contain; display: block; }
.tournament-report__standings { display: grid; gap: 14px; }
/* The head above a row of tables: "Kwalificatie" over the qualifiers,
   "Eindklassen" over the finals. */
.tournament-report__standings-heading {
  margin: 6px 0 0; font-size: 1.25rem; font-weight: 800; color: var(--report-text);
  text-align: center;
}
.tournament-report__standings-heading:first-child { margin-top: 0; }
/* A qualifier row in the colour of the final group the Player went on to. */
.tournament-report__standings-card--qualifier { border-top-width: 1px; }
/* One colour per destination, the same for every row that went there. */
.tournament-report__standings-row--advance,
.tournament-report__standings-row--advance.tournament-report__standings-row--podium-1,
.tournament-report__standings-row--advance.tournament-report__standings-row--podium-2,
.tournament-report__standings-row--advance.tournament-report__standings-row--podium-3 { background: color-mix(in srgb, var(--report-group-accent) 24%, transparent); }
.tournament-report__standings-table .is-rank.is-tied::after { content: "="; margin-left: 1px; font-weight: 400; color: var(--report-muted); }
.tournament-report__waiting {
  margin: 0; padding: 14px 16px; border: 1px dashed var(--report-line);
  border-radius: 10px; color: var(--report-muted); font-size: .92rem; max-width: 70ch;
}
.tournament-report__standings-tie { font-size: .72rem; color: var(--report-muted); white-space: nowrap; }
.tournament-report__standings-row--podium-1 { background: rgba(200, 146, 47, .10); }
.tournament-report__standings-row--podium-2 { background: rgba(125, 135, 148, .10); }
.tournament-report__standings-row--podium-3 { background: rgba(168, 102, 58, .10); }

/* The bar that says where the reader is. It sticks under the site's own
   navigation, which is sticky at the top of the page. */
.tournament-report__context {
  position: sticky; top: var(--report-context-top, 56px); z-index: 4; margin-bottom: 16px;
  display: grid; justify-items: center; gap: 2px; padding: 6px 10px;
  border: 1px solid rgba(141, 78, 40, .26); border-radius: 10px;
  background: rgba(255, 253, 248, .95); backdrop-filter: blur(8px); text-align: center;
}
.tournament-report__context:empty { display: none; }
.tournament-report__context-title { font-size: .84rem; font-weight: 800; color: var(--report-text); }
.tournament-report__context-character { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-left: 6px; }
.tournament-report__context-subtitle { font-size: .74rem; color: var(--report-muted); }
.tournament-report__context-subtitle .tournament-report__sp-delta { margin-left: 0; }

/* The slider the source puts under every chart, spanning exactly the races
   the chart draws. */
.tournament-report__scrubber-wrap { display: block; }
.tournament-report__scrubber { display: block; accent-color: var(--report-accent, #275ea8); }

/* The readout's four shapes: a place chart names the track, the benchmark
   names who is being chased, the distribution names the tracks behind a bar. */
.tournament-report__readout-head {
  margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  font-size: .86rem; font-weight: 700;
}
.tournament-report__readout-head span { color: var(--report-muted); font-weight: 600; font-size: .8rem; }
.tournament-report__readout-head--resting { color: var(--report-muted); font-weight: 600; }
.tournament-report__readout-table--place td { text-align: left; }
.tournament-report__readout-place { width: 7rem; font-weight: 700; white-space: nowrap; }
.tournament-report__readout-track { color: var(--report-muted); }
.tournament-report__readout-table--compact td { text-align: left; }
.tournament-report__benchmark {
  display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: baseline; justify-content: flex-end;
}
.tournament-report__benchmark-delta { font-weight: 800; font-variant-numeric: tabular-nums; }
.tournament-report__benchmark-unit,
.tournament-report__benchmark-vs { color: var(--report-muted); font-size: .78rem; }
.tournament-report__benchmark-name { color: var(--report-text); font-weight: 600; }
.tournament-report__benchmark-score { font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .tournament-report { padding: 18px 14px 22px; gap: 22px; }
  .tournament-report__body { gap: 22px; }
  .tournament-report__player { padding: 14px 14px 14px 16px; }
  .tournament-report__story { padding: 16px; }
  .tournament-report__standings-grid { grid-template-columns: 1fr; }
  .tournament-report__standings-card { padding: 14px; }
  .tournament-report__readout-place { width: 5.4rem; }
  .tournament-report__context { padding: 5px 8px; }
}

/* The import's own answer: what went wrong, on which row, in which column,
   and what that column accepts. */
.tournament-op__csv-issues {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid #FF8CA5; border-left-width: 4px; border-radius: var(--rc-radius-md, 8px);
  background: rgba(255, 140, 165, 0.08);
}
.tournament-op__csv-issues-lead { margin: 0 0 var(--sp-1); font-weight: 700; color: #FF8CA5; }
.tournament-op__csv-issues ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.tournament-op__csv-issues li { overflow-wrap: anywhere; }
.tournament-op__csv-issues-more { margin: var(--sp-1) 0 0; color: var(--text-muted); }
.tournament-op__csv-rules { margin-top: var(--sp-2); color: var(--text-muted); font-size: .9rem; }
.tournament-op__csv-rules summary { cursor: pointer; font-weight: 700; }
.tournament-op__csv-rules p { margin: var(--sp-1) 0; }
.tournament-op__csv-rules ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.tournament-op__csv-rules li { overflow-wrap: anywhere; }

/* The report's accents as classes: the page's Content-Security-Policy allows
   no inline style, so the golden-angle hue per group rank lives here. */
.tournament-report__group--champion { --report-group-accent: #F59E0B; }
.tournament-report__group--talent { --report-group-accent: #38BDF8; }
.tournament-report__group--wild { --report-group-accent: #A78BFA; }
.tournament-report__group--adventure { --report-group-accent: #4ADE80; }
.tournament-report__group--feest { --report-group-accent: #EC4899; }
.tournament-report__group--winners { --report-group-accent: #F59E0B; }
.tournament-report__group--losers { --report-group-accent: #38BDF8; }
.tournaments__group-title--champion { border-color: #F59E0B; }
.tournaments__group-title--talent { border-color: #38BDF8; }
.tournaments__group-title--wild { border-color: #A78BFA; }
.tournaments__group-title--adventure { border-color: #4ADE80; }
.tournaments__group-title--feest { border-color: #EC4899; }

/* Step 5 and Step 9: what the workbook says about this group, beside the
   button that imports it, and the answer after it was pressed. */
.tournament-score-step__excel-loaded { margin: var(--sp-1) 0 0; }
.tournament-score-step__excel-readiness {
  margin: var(--sp-2) 0 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--rc-radius-md, 8px);
  font-size: .88rem; font-weight: 600;
}
.tournament-score-step__excel-readiness--ready { background: rgba(110, 243, 160, 0.12); color: #6EF3A0; }
.tournament-score-step__excel-readiness--blocked { background: rgba(255, 140, 165, 0.10); color: #FFB4C4; }
/* The reason the button is out, on its own line right above it. */
.tournament-score-step__excel-blocked {
  margin: 6px 0 2px; font-size: .86rem; font-weight: 700; color: #FFB4C4;
}
/* An import that is done says so and folds its matching block away; the
   workbook stays loaded because the other groups still need it. */
.tournament-score-step__excel-message--done { color: var(--rc-cyan, #39dfd0); font-weight: 700; }
/* A total the Director corrected over the races, and what the races said. */
.tournament-score-step__corrected {
  color: var(--mk8-yellow, #ffd21f);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
/* The workbook's own parts disagreeing with its own total. */
.tournament-score-step__segment-mismatch { color: var(--mk8-red, #e4382c); font-weight: 700; }

.tournament-score-step__excel-message {
  margin: var(--sp-1) 0 0; font-size: .9rem; color: var(--rc-copy, #edf2f7); overflow-wrap: anywhere;
}
.tournament-score-step__excel-message:empty { display: none; }
.tournament-report__player-character {
  width: 34px; height: 34px; margin-left: 8px; vertical-align: -8px;
  border-radius: 8px; background: #ffffff; border: 1px solid var(--report-line);
  object-fit: contain;
}
.tournaments__character {
  width: 22px; height: 22px; margin-left: 6px; vertical-align: -6px;
  border-radius: 6px; background: rgba(255, 255, 255, 0.08); object-fit: contain;
}

/* Rich text in the night's report: a fixed palette of classes, never inline
   style (the page is served under style-src 'self'). The editor's toolbar
   offers exactly these, so what is chosen is what the community sees. */
.tournament-report__rich { margin: 0; line-height: 1.72; color: var(--report-text); }
.tournament-report__rich p { margin: 0 0 8px; }
.tournament-report__rich p:last-child { margin-bottom: 0; }
.tournament-report__rich ul, .tournament-report__rich ol { margin: 4px 0 8px; padding-left: 1.4em; }
.tournament-report__rich blockquote { margin: 6px 0 8px; padding: 4px 12px; border-left: 3px solid var(--report-line); color: var(--report-muted); }
.tournament-report__rich a { color: var(--report-accent-ink); text-decoration: underline; }
.tournament-report__rich mark { padding: 0 2px; border-radius: 3px; }
.tournament-report__block { position: relative; display: grid; gap: 8px; }
.rt-align-center { text-align: center; }
.rt-align-right { text-align: right; }
.rt-indent-1 { margin-left: 1.5rem !important; }
.rt-indent-2 { margin-left: 3rem !important; }
.rt-indent-3 { margin-left: 4.5rem !important; }
.rt-size-s { font-size: .86em; }
.rt-size-l { font-size: 1.18em; }
.rt-size-xl { font-size: 1.4em; }
.rt-font-serif { font-family: Georgia, "Times New Roman", serif; }
.rt-font-mono { font-family: "Courier New", Consolas, monospace; }
.rt-color-red { color: #d64b2a; }
.rt-color-orange { color: #f97316; }
.rt-color-yellow { color: #d4a017; }
.rt-color-green { color: #2e9e5b; }
.rt-color-blue { color: #2563eb; }
.rt-color-purple { color: #7c3aed; }
.rt-color-gray { color: #6b7280; }
.rt-bg-yellow { background: #fff2a8; color: #1c1917; }
.rt-bg-green { background: #d5f5e3; color: #1c1917; }
.rt-bg-blue { background: #dbeafe; color: #1c1917; }
.rt-bg-pink { background: #fde2e7; color: #1c1917; }

/* The report editor: a block opens in place, with the toolbar erik.php had. */
.tournament-report-edit__preview--editable .tournament-report__block { padding: 6px 8px; border: 1px dashed transparent; border-radius: 8px; transition: border-color .15s; }
.tournament-report-edit__preview--editable .tournament-report__block:hover { border-color: var(--report-accent-ink); }
.tournament-report-edit__placeholder { color: var(--report-muted); font-style: italic; }
.tournament-report-edit__open { justify-self: start; min-height: 2rem; padding: 2px 10px; font-size: .8rem; border: 1px solid var(--report-accent-ink); border-radius: 999px; background: transparent; color: var(--report-accent-ink); cursor: pointer; }
.tournament-report-edit__open:hover { background: var(--report-accent-ink); color: #fff; }
.report-editor { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--report-accent-ink); border-radius: 12px; background: var(--report-paper); }
.report-editor__label { font-weight: 800; font-size: .84rem; color: var(--report-kicker); letter-spacing: .06em; text-transform: uppercase; }
.report-editor__toolbar { display: grid; gap: 6px; }
.report-editor__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.report-editor__group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-right: 10px; }
.report-editor__group-label { font-size: .74rem; color: var(--report-muted); margin-right: 2px; }
.report-editor__tool { min-width: 2.2rem; min-height: 2.2rem; padding: 0 6px; border: 1px solid var(--report-line); border-radius: 6px; background: #fff; color: var(--report-text); font-weight: 700; cursor: pointer; }
.report-editor__tool:hover { border-color: var(--report-accent-ink); }
.report-editor__tool--italic { font-style: italic; }
.report-editor__tool--underline { text-decoration: underline; }
.report-editor__tool--strikeThrough { text-decoration: line-through; }
.report-editor__swatch { width: 1.6rem; height: 1.6rem; min-height: 1.6rem; padding: 0; border: 1px solid rgba(0,0,0,.25); border-radius: 50%; cursor: pointer; background: currentColor; }
.report-editor__swatch[class*="rt-color-"] { background: currentColor; }
.report-editor__swatch[class*="rt-bg-"] { color: transparent; }
.report-editor__surface { min-height: 6rem; padding: 10px 12px; border: 1px solid var(--report-line); border-radius: 8px; background: #fff; color: var(--report-text); outline: none; }
.report-editor__surface:focus { border-color: var(--report-accent-ink); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.report-editor__surface p { margin: 0 0 8px; }
.report-editor__surface ul, .report-editor__surface ol { margin: 4px 0 8px; padding-left: 1.4em; }
.report-editor__surface blockquote { margin: 6px 0 8px; padding: 4px 12px; border-left: 3px solid var(--report-line); }
.report-editor__hint { margin: 0; font-size: .8rem; color: var(--report-muted); }
.report-editor__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.report-editor__count { margin-right: auto; font-size: .8rem; color: var(--report-muted); }
.report-editor__count--over { color: #d64b2a; font-weight: 700; }
@media (max-width: 34rem) { .report-editor__tool { min-width: 2rem; } .report-editor__group { margin-right: 4px; } }