/*
 * The league page's Team of the Week card (TeamOfTheWeekCard.js) — the club
 * page's pitch graphic (season-stats.css) under a header that carries a week
 * stepper instead of a static label.
 *
 * Only the stepper is declared here. The card chrome is
 * `.club-overview__card`, the header row is `.club-overview__header`, and
 * everything below the header is `season-stats.css`'s pitch, unchanged.
 */

.totw__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/*
 * "Week 8". Tabular figures so stepping between single- and double-digit
 * weeks doesn't resize the label and shuffle the two arrows either side of
 * it; the min-width holds the same line steady for the same reason.
 */
.totw__week {
  min-width: 52px;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * The two arrows. Sized to the same 26px touch chip the app's other small
 * round controls use, on `--surface-sunken` so they read as controls against
 * the card's own surface without competing with the pitch below them.
 */
.totw__step {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  color: var(--text);
  transition: opacity var(--duration) var(--easing);
}

/*
 * Either end of the season. Dimmed rather than hidden, so the control keeps
 * its place and the header never re-lays out mid-shuffle — and genuinely
 * `disabled` in the markup, not just styled (see StepButton), so it drops out
 * of the keyboard order too.
 */
.totw__step:disabled {
  opacity: 0.35;
  cursor: default;
}