/*
 * The match list (PlayerMatches.js) — one appearance per row, with a header
 * wherever the team changes.
 *
 * The card's own horizontal padding is given back to the rows, so the rules
 * between them run the card's full width and the group headers can sit on
 * their own inset — a rounded band on the sunken fill, the way the reference
 * draws them. It ran edge to edge before, and at that width it read as a
 * second card header rather than as a divider between two runs of rows.
 */

.player-matches {
  padding-inline: 0;
}

.player-matches .player-card__header,
.player-matches .player-card__empty {
  padding-inline: calc(var(--space-5) * var(--player-scale));
}

/* The rule under the title, as on the traits card: the first thing under it
   is a band on its own inset, and without the line the two float apart. */
.player-matches .player-card__header {
  padding-bottom: calc(var(--space-3) * var(--player-scale));
  border-bottom: 1px solid var(--border);
}

.player-matches__list {
  display: flex;
  flex-direction: column;
}

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

/* --- Group header ----------------------------------------------------------- */

.player-matches__group {
  display: flex;
  align-items: center;
  gap: calc(var(--space-3) * var(--player-scale));
  margin: calc(var(--space-2) * var(--player-scale)) calc(var(--space-4) * var(--player-scale)) 0;
  padding: calc(var(--space-3) * var(--player-scale)) calc(var(--space-4) * var(--player-scale));
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  font-size: calc(var(--text-base) * var(--player-scale));
  font-weight: var(--weight-bold);
  color: var(--text);
}

/* --- Row -------------------------------------------------------------------- */

/*
 * Inset by margin rather than padding, so the rule between two rows stops at
 * the card's inner edge instead of running the card's width — the reference
 * keeps its rows' rules inside the padding and its group bands on the same
 * inset, and the two lining up is what makes a run of rows read as one table.
 */
.player-matches__row {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-3) * var(--player-scale));
  margin-inline: calc(var(--space-5) * var(--player-scale));
  padding-block: calc(var(--space-4) * var(--player-scale));
}

.player-matches__row + .player-matches__row {
  border-top: 1px solid var(--border);
}

.player-matches__when {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-2) * var(--player-scale));
  font-size: calc(var(--text-sm) * var(--player-scale));
  color: var(--text-muted);
}

.player-matches__competition {
  display: flex;
  align-items: center;
  gap: calc(var(--space-2) * var(--player-scale));
  min-width: 0;
}

/* The hairline ring round the competition badge — see AppearanceRow. */
.player-matches__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(22px * var(--player-scale));
  height: calc(22px * var(--player-scale));
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}

.player-matches__body {
  display: flex;
  align-items: center;
  gap: calc(var(--space-3) * var(--player-scale));
}

.player-matches__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--player-scale));
}

.player-matches__opponent {
  font-size: calc(var(--text-base) * var(--player-scale));
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.player-matches__result {
  display: flex;
  align-items: center;
  gap: calc(var(--space-2) * var(--player-scale));
  font-size: calc(var(--text-sm) * var(--player-scale));
  color: var(--text-secondary);
}

/*
 * Win, draw and loss take the club page's own form tokens — kept apart from
 * --color-success / --color-error, which own predictions and payments elsewhere
 * in the app (see the note in tokens.css). A draw gets no hue of its own:
 * greyscale is already the neutral scale's job.
 */
.player-matches__outcome {
  display: grid;
  place-items: center;
  min-width: calc(20px * var(--player-scale));
  height: calc(16px * var(--player-scale));
  padding-inline: calc(var(--space-1) * var(--player-scale));
  border-radius: 4px;
  font-size: calc(var(--text-xs) * var(--player-scale));
  font-weight: var(--weight-bold);
  line-height: 1;
}

.player-matches__outcome[data-result="W"] {
  background: var(--form-win-soft);
  color: var(--form-win);
}

.player-matches__outcome[data-result="L"] {
  background: var(--form-loss-soft);
  color: var(--form-loss);
}

.player-matches__outcome[data-result="D"] {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.player-matches__score {
  font-variant-numeric: tabular-nums;
}

/* His team's goals, whichever end of the fixture they were scored at. */
.player-matches__goals {
  font-weight: var(--weight-bold);
  color: var(--text);
}

/* --- Marks ------------------------------------------------------------------ */

.player-matches__marks {
  display: flex;
  align-items: center;
  gap: calc(var(--space-1) * var(--player-scale));
}

/*
 * Goals stack, the way a row of avatars does: each ball after the first tucks
 * halfway under its neighbour's edge and paints *over* it, so a
 * brace reads as one mark with two balls in it rather than as two chips in a
 * row. `position: relative` is what gives the discs a stacking order at all —
 * later siblings then sit on top by document order, and the explicit z-index
 * keeps that true against anything else in the row that gains a position.
 * The surface fill is what makes the overlap legible: without it the lower
 * ball's outline shows through the upper one.
 */
.player-matches__goal {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(24px * var(--player-scale));
  height: calc(24px * var(--player-scale));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text);
}

.player-matches__goal + .player-matches__goal {
  margin-left: calc(-12px * var(--player-scale));
}

/* A booking is a drawn object, not a signal, which is why it takes the card
   tokens rather than any of the app's reds — see tokens.css. */
.player-matches__booking {
  width: calc(11px * var(--player-scale));
  height: calc(15px * var(--player-scale));
  border-radius: 2px;
}

.player-matches__booking[data-card="yellow"] {
  background: var(--card-yellow);
}

.player-matches__booking[data-card="red"] {
  background: var(--card-red);
}

/* Minutes are plain type, not a chip: on the reference the row has one chip —
   the rating — and everything left of it is a figure. A second chip beside it
   made the two read as a pair of controls. */
.player-matches__minutes {
  min-width: calc(36px * var(--player-scale));
  text-align: right;
  font-size: calc(var(--text-base) * var(--player-scale));
  font-weight: var(--weight-semibold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* No minutes and no rating — a word, not an empty chip. See PlayerMatches.js. */
.player-matches__bench {
  font-size: calc(var(--text-sm) * var(--player-scale));
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.player-matches__rating {
  display: grid;
  place-items: center;
  min-width: calc(30px * var(--player-scale));
  height: calc(24px * var(--player-scale));
  padding-inline: calc(var(--space-1) * var(--player-scale));
  border-radius: 6px;
  color: var(--text-inverse);
  font-size: calc(var(--text-md) * var(--player-scale));
  font-weight: var(--weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

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

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

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

/*
 * Player of the match, and the reason it wins over the tier above rather than
 * being a fourth one: it is a different fact. The three tiers say how well he
 * played; this says he was the best player on the pitch, which the accent —
 * this app's "the one that matters here" — is already the colour for.
 */
.player-matches__rating[data-motm="true"] {
  background: var(--accent);
}

/* --- Expander --------------------------------------------------------------- */

/* The footer's rule runs the card's full width where the rows' stop at the
   inset: it closes the list rather than separating two rows of it. */
.player-matches__footer {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--space-2) * var(--player-scale));
  padding-top: calc(var(--space-3) * var(--player-scale));
  border-top: 1px solid var(--border);
}

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

.player-matches__toggle {
  display: flex;
  align-items: center;
  gap: calc(var(--space-2) * var(--player-scale));
  padding: calc(var(--space-1) * var(--player-scale)) calc(var(--space-3) * var(--player-scale));
  font-size: calc(var(--text-base) * var(--player-scale));
  font-weight: var(--weight-bold);
  color: var(--text);
}

.player-matches__chevron {
  display: flex;
  transition: transform var(--duration) var(--easing);
}

.player-matches__chevron[data-open="true"] {
  transform: rotate(180deg);
}