/*
 * The Overview tab's Season Stats card — a formation graphic, not the
 * row/list layout `club-overview.css` styles for the Next match and Team
 * form cards. Shares that file's `.club-overview__card` chrome (padding,
 * border, radius, shadow, the scoped `--overview-vscale`) and its
 * `.club-overview__header` / `__title` / `__competition` header classes for
 * visual consistency with the rest of the tab; everything below is new.
 */

.season-stats__xi-label {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* --- Pitch ------------------------------------------------------------------- */

.season-stats__pitch {
  position: relative;
  /*
   * Exactly half of `.match-lineup__pitch`'s 68 / 120, because this pitch is
   * exactly half of that pitch: the same drawing under a cropped viewBox
   * (`PitchMarkings.js`), so it has to be given a box of the same shape or
   * the crop would be the only thing the two still shared.
   *
   * This was `346 / 391`, a ratio inherited from when the graphic sized
   * itself from its own content — which stretched a 52.5m half into a box
   * nearly half again as tall as it should be. That is what made the penalty
   * box read as deep and narrow next to the fixture page's, and it is what
   * the ~38px of vertical room the eleven used to stand in was borrowed
   * from; `lineDepth` and `AVATAR_SIZE` in PitchLineup.js both moved to give
   * it back.
   *
   * No padding, so this box *is* the model: the rows' percentage offsets and
   * the markings' viewBox resolve against the same rectangle, which is what
   * lets a defender stand at a real depth rather than near one. The clearance
   * the old vertical padding gave the top row's rating pill is now inside the
   * model, in `lineDepth`'s own margins.
   */
  aspect-ratio: 68 / 60;
  /*
   * Out to the card's own edges, cancelling `.club-overview__card`'s inline
   * padding. Width is what a pitch this shape is short of: the eleven has to
   * fit between the goal line and halfway either way, and the 40px this
   * recovers is the difference between doing that at the fixture page's
   * proportions and not doing it at all. It also reads better — the pitch is
   * the card's subject, not an illustration inset within it.
   */
  margin-inline: calc(var(--space-5) * -1);
  /*
   * The fixture page's full pitch, at half size — same tokens, same ellipse.
   * This was a flat --surface-sunken panel, which is the value --pitch still
   * resolves to, so the change is the falloff and nothing else: lifted in the
   * middle, one rung down the neutral ladder at the corners, enough that a
   * pitch reads as a surface rather than as a grey box behind the players.
   *
   * The ellipse is deliberately wider than the box (120% x 80%) so the
   * falloff is gentle across the middle and only gathers at the corners.
   * Those numbers are copied from `.match-lineup__pitch` rather than retuned
   * for this shorter box on purpose — percentages, so they scale with
   * whatever they are given, and the two pitches reading as one material is
   * the point of porting it here at all. Three pitches stand on this ground
   * now — this card's, the league page's team of the week (both drawn by
   * `PitchLineup`, so both come through this one rule), and the fixture
   * page's two elevens. The shot map's is the fourth and takes the same
   * tokens, flat: it is an SVG fill with a sky above it, and a gradient there
   * would fight the horizon rather than draw one.
   */
  background: radial-gradient(120% 80% at 50% 50%, var(--pitch) 0%, var(--pitch-deep) 100%);
  /* Square, now that it runs edge to edge: rounded corners inside a straight
     card edge read as a panel that failed to reach it. */
  border-radius: 0;
  /* Establishes its own stacking context so `.season-stats__pitch-lines`'s
     z-index is compared only against this container's own children, never
     something elsewhere on the page. */
  isolation: isolate;
}

/*
 * The pitch markings — decorative backdrop only. `position: absolute` takes
 * it out of flow entirely (the rows below lay out as if it weren't there);
 * `z-index: 0` against the rows' own `z-index: 1` (below) is what keeps it
 * painting behind them rather than on top wherever they overlap, and
 * `pointer-events: none` is what actually keeps a tap on that overlap from
 * ever landing on the pitch instead of the player node — the z-index alone
 * only fixes paint order, not hit-testing.
 */
.season-stats__pitch-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Subtle: strokes are the backdrop, avatars and rating pills stay the
     visual focus. */
  opacity: 0.4;
}

.season-stats__pitch-line {
  fill: none;
  /* --pitch-line, not --border-strong directly, even though the two hold the
     same grey: what a pitch's markings are painted in is a pitch decision,
     made once in tokens.css, and the full pitch already asks that way. */
  stroke: var(--pitch-line);
  /* In CSS pixels, not pitch metres — see the non-scaling-stroke note below,
     which is what makes this a device width rather than something the
     container's own stretch would distort. */
  stroke-width: 2;
  /* Keeps line weight visually constant even though the `<svg>` itself
     stretches non-uniformly to fill the pitch container — without this, the
     stroke would stretch (and skew) along with the shapes it draws. */
  vector-effect: non-scaling-stroke;
}

.season-stats__pitch-spot {
  fill: var(--pitch-line);
  stroke: none;
}

/*
 * An outfield row spans the pitch's full width and spreads its own players
 * evenly across it — count and spacing follow from however many players
 * `SeasonStatsCard` put in the row, nothing here assumes a number.
 * `space-around` also centres a goalkeeper's own single-player row for free.
 *
 * `top` is set inline per row (`PitchRow`, PitchLineup.js) from `lineDepth`'s
 * real-world depth for that line, and `translateY(-50%)` is what makes that
 * value the row's centre rather than its top edge. The rows used to hang from
 * their bottom edge instead, so a defensive line sat tangent to the penalty
 * box; on a pitch this shape a row has to be bounded above and below at once,
 * which is the same call `.match-lineup__row` makes and for the same reason.
 */
.season-stats__row {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: var(--space-1);
}

/* --- Player node --------------------------------------------------------------- */

.season-stats__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
}

/*
 * 2px between a photo and the name under it on this pitch, against
 * --space-1's 4 everywhere else the node is drawn.
 *
 * Scoped, so the fixture page's pitch is untouched: it renders the same node
 * inside a `zoom: 0.9` panel where 4 already comes out as 3.6, and its own
 * vertical budget closes without help. This one's does not — five rows have
 * to clear each other inside a true half, and 2px a node is 10px of the ~14px
 * that took. A photo and its name are one object either way; the 4 was never
 * saying anything the 2 doesn't.
 */
.season-stats__pitch .season-stats__player {
  gap: 2px;
}

.season-stats__avatar-wrap {
  position: relative;
  display: inline-flex;
}

/*
 * `.logo`'s own fallback background (--surface-sunken, primitives.css) is the
 * same token `.season-stats__pitch` paints its backdrop with — a monogram
 * would render invisibly against it otherwise, with only the rating/event
 * badges reading as visible content. Overridden here, not on `.logo` itself,
 * since every other caller of Logo()/Avatar() sits on a plain --surface card
 * where the default already contrasts fine.
 */
.season-stats__avatar-wrap .logo {
  background: var(--surface);
  border: 1.75px solid var(--border);
}

/*
 * Rating pill — overlaps the avatar's top-right corner. Tier colour is set
 * entirely by the `data-tier` `ratingTier()` computes in SeasonStatsCard.js,
 * never hardcoded per player.
 *
 * A solid fill with white type, the same block the squad list's chip is
 * (`.match-squad__rating`, match-lineup.css) and the same tokens. It was
 * the tinted wash — --rating-*-soft, 12% of the tier colour over whatever
 * sits behind it, with the tier colour as type — and that pair only works
 * on a plain pale card. Everywhere this pill actually lands it overlaps a
 * photo, or the fixture page's grey pitch, or a sheet's head, and at 12%
 * the wash all but disappears there: a green number floating on a face is
 * a rating nobody can read. The solid tokens exist for exactly this — each
 * is its tier colour taken down until white text clears 4.5:1 on it — so
 * the pill reads the same over a photo as over paper. The white ring stays:
 * it is what separates the pill from the photo it sits on.
 */
.season-stats__rating {
  position: absolute;
  top: -4.5px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Sized by its two decimals and nothing else; the line box is tightened
     because at this size the font's own leading was a third of the pill's
     height. The fixture pitch takes it down a step further — see
     match-lineup.css. */
  min-width: 0;
  padding: 1px 4.5px;
  border: 1.5px solid var(--surface);
  border-radius: var(--radius-full);
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.season-stats__rating[data-tier="high"] {
  background: var(--rating-high-solid);
}

.season-stats__rating[data-tier="mid"] {
  background: var(--rating-mid-solid);
}

.season-stats__rating[data-tier="low"] {
  background: var(--rating-low-solid);
}

/*
 * The club crest — what the league page's team of the week hangs on a player
 * node instead of an event badge (see `CornerBadge` in PitchLineup.js).
 *
 * Bottom *right*, under the rating pill rather than across from it: the two
 * stack down one edge of the node, which leaves the opposite edge clear and
 * keeps a row of these from crowding the player beside it.
 *
 * Placement only. The white plate and hairline around it come from the
 * `.season-stats__avatar-wrap .logo` rule above, the same one that plates the
 * avatar, so the crest reads as a second, smaller portrait of the same kind
 * rather than a chip of its own design.
 */
.season-stats__club {
  position: absolute;
  bottom: -3px;
  right: -6px;
  /* Above the avatar it overlaps — both are plated, so without this the
     larger disc paints over the smaller one's edge. */
  z-index: 1;
}

/*
 * A booking — the card itself, at the size a card is on a pitch: a small
 * upright rectangle, not an icon. See `CardBadge` in PitchLineup.js for why
 * this is drawn rather than lettered.
 *
 * Top *left*, which is the only corner free on this pitch: the rating pill
 * holds the top right, the event badge the bottom left, the club crest the
 * bottom right. The fixture page's match lineup moves its rating down and
 * gives this the top right instead — see match-lineup.css. Nothing on this
 * card's own XI carries a booking yet, so this is the position it will take
 * when a real feed lands rather than one anything renders today.
 *
 * The white hairline is what keeps the yellow legible: against a pale panel
 * a bare yellow rectangle has almost no edge, and it has to read as a card
 * rather than as a smudge on the photo behind it.
 */
.season-stats__card {
  position: absolute;
  /*
   * Inset, where every other badge here is outset — and the difference is the
   * avatar being a circle inside a square box.
   *
   * A corner offset is measured from that box, but at 45 degrees the circle
   * falls away from its corner by about 0.29 of the radius (r - r/root-2), so
   * a small badge placed at the corner the way the rating pill and event
   * badge are ends up in clear air with nothing behind it. Those two get away
   * with it by being wide: they reach back across the circle even while their
   * outer corner hangs off it. A card is 8px across and has no such reach, so
   * a negative offset simply floats it.
   *
   * These two numbers put it astride the circle's edge instead: past the arc
   * on its outer corner, well inside it on its inner one.
   */
  top: 2px;
  left: 3px;
  width: 8px;
  height: 11px;
  border: 1.25px solid var(--surface);
  border-radius: 2px;
  box-shadow: var(--shadow-floating);
}

.season-stats__card[data-type="yellow"] {
  background: var(--card-yellow);
}

.season-stats__card[data-type="red"] {
  background: var(--card-red);
}

/*
 * The substitution arrow — a player who came off, or came on.
 *
 * Inset from the corner rather than outset, for the reason spelled out on
 * `.season-stats__card` above: the avatar is a circle in a square box, and a
 * badge this small placed at the box's corner ends up in clear air. Same two
 * numbers, same corner.
 *
 * It shares that top-left corner with the card, which is safe only because
 * nothing draws both there — the fixture page's match lineup, the one surface
 * that draws either, moves its cards to the top right. See `PlayerBadges` in
 * PitchLineup.js, which lists that dependency alongside the other one holding
 * this arrangement together.
 *
 * Plated in --surface like the crest beside it, because it sits over a photo
 * and a bare arrow on a face is unreadable.
 *
 * The ring is `currentColor`, so it takes the same red or green the arrow
 * inside it already has and needs no rule of its own per direction. It is
 * there for the reason the match lineup's rating pill needed one: this badge
 * straddles the edge of a white photo, and a white plate against a white plate
 * has no edge at all — the badge stops reading as a badge and becomes a bump
 * on the avatar's silhouette. Against the pitch outside it, the plate is what
 * separates it; against the photo it overlaps, the ring is.
 */
.season-stats__sub {
  position: absolute;
  top: 2px;
  left: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  background: var(--surface);
  border: 1.25px solid currentColor;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-floating);
}

.season-stats__sub[data-direction="off"] {
  color: var(--sub-off);
}

.season-stats__sub[data-direction="on"] {
  color: var(--sub-on);
}

/* No rotation for the two directions any more — `SubstitutionBadge` in
   PitchLineup.js draws the symmetric pair-of-arrows glyph, which turned over
   is the same picture. The colours above are what separate on from off. */

/* Match-event badge — overlaps the avatar's bottom-left corner. Optional: only
   players `PlayerNode` actually gave an event get this node at all. */
.season-stats__event {
  position: absolute;
  bottom: -4.5px;
  left: -7px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 1px 4.5px;
  /* Sunken, not --surface: the avatar plate under it is white now, and a
     white chip on a white disc would read as a bare number floating there. */
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-floating);
  color: var(--text-secondary);
}

.season-stats__event-count {
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* Shirt number + last name. */
.season-stats__label {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 74px;
  /* Trims the font's own leading so the name's rendered bottom edge is what
     actually touches the row's `bottom` anchor — line-height's default
     leading would otherwise leave a few px of true tangency unaccounted
     for. */
  line-height: 1;
}

.season-stats__name {
  min-width: 0;
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  color: var(--text);
}

/*
 * The shirt number in front of the name — muted, so the name is what the eye
 * lands on, and a step heavier than it to hold its own at that lighter
 * colour. Tabular figures keep a row of single- and double-digit numbers
 * setting the names beside them from the same left edge.
 *
 * Only the club page's own XI has numbers at all; the league page's team of
 * the week carries none — see `PlayerNode` in PitchLineup.js.
 */
.season-stats__number {
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}