/*
 * One fixture, three columns. Lengths ride on --fixture-scale — see
 * league-accordion.css.
 *
 * The column widths are fixed rather than content-sized, and the two stacked
 * halves are on fixed rows rather than whatever their contents come to. That is
 * what holds the alignment across states: a scheduled row has no score and a
 * finished one has two digits, and if the grid let that change the layout, the
 * team names would sit at a different x-offset in every group on the page.
 */
.match-row {
  --row-status: calc(58px * var(--fixture-scale));
  --row-score: calc(18px * var(--fixture-scale));
  --row-star: calc(34px * var(--fixture-scale));
  /* One line of the team stack — the crest is the tallest thing on it. */
  --row-line: calc(22px * var(--fixture-scale));

  position: relative;
}

.match-row + .match-row {
  border-top: 1px solid var(--border);
}

.match-row__button {
  display: grid;
  grid-template-columns: var(--row-status) 1fr var(--row-score) var(--row-star);
  align-items: center;
  gap: calc(var(--space-2) * var(--fixture-scale));
  width: 100%;
  /* Inline padding matches the league header's own, so the status column and
     the card edge line up down the whole group. */
  padding: calc(var(--space-2) * var(--fixture-scale))
    calc(var(--space-3) * var(--fixture-scale));
  text-align: left;
}

.match-row__button:active {
  background: var(--surface-sunken);
}

/* Scoped: .pill is shared with the header's gold status pill, which doesn't scale. */
.match-row .pill {
  /*
   * Zero, not `100%` — and the stretch below is what actually fills the column.
   *
   * All this has to do is clear the primitive's own 46px floor, which is sized
   * for a pill that stands on its own and is wider than this column at any
   * --fixture-scale below 0.8. It used to do that with `min-width: 100%`, which
   * reads as "fill the column" and does exactly that in Chrome and Firefox,
   * where a percentage on a grid item resolves against its *grid area*.
   *
   * WebKit resolves it against the grid *container* instead, so on iOS — every
   * iPhone browser, and the Telegram WKWebView this ships in — the status pill
   * came out the full width of the row rather than 49px of it. The box is
   * `justify-content: center`, so the kick-off time, the "FT" and the running
   * minute were all being drawn from the middle of the row, on top of the team
   * names, with the status column left empty. A percentage that only means what
   * it says on two of the three engines is not worth keeping for a value the
   * grid can supply directly.
   */
  min-width: 0;
  /*
   * The default for a grid item already, spelled out because it is now load
   * bearing: it is the whole reason the pill is exactly one column wide.
   */
  justify-self: stretch;
  /*
   * The column is fixed and the two team lines are on fixed rows, so a status
   * that wrapped to two lines would push this row taller than the ones around
   * it. Nothing the feed sends is close — "PENS" is the longest label and a
   * stoppage clock reaches "90+15'" — but the row's alignment should not be
   * resting on that.
   */
  white-space: nowrap;
  padding: calc(4px * var(--fixture-scale)) calc(var(--space-1) * var(--fixture-scale));
  font-size: calc(var(--text-2xs) * var(--fixture-scale));
  /*
   * The primitive's gap spaces an icon off its label. The status has no icon —
   * it has a number and the prime that belongs to it, and those are one token
   * of text. Left at --space-1 it reads "89 '" rather than "89'".
   */
  gap: 0;
}

/*
 * Home over away, on rows the score stack matches exactly. Both stacks declare
 * the same auto-rows and the same gap, so the two columns are one grid drawn
 * twice rather than two boxes that happen to line up at one font size.
 */
.match-row__teams,
.match-row__scores {
  display: grid;
  grid-auto-rows: var(--row-line);
  align-items: center;
  row-gap: calc(var(--space-1) * var(--fixture-scale));
  min-width: 0;
}

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

.match-row__name {
  font-size: calc(var(--text-sm) * var(--fixture-scale));
  font-weight: var(--weight-medium);
}

.match-row__scores {
  justify-items: end;
}

/*
 * A live scoreline carries the same red as the minute opposite it, so the two
 * ends of the row agree about what they are reporting. Set on the container
 * rather than on the digits: the pulse below scales a digit, and anything
 * resolving `inherit` inside that animation has to find the red on the parent
 * or it lands back on body text for a frame.
 *
 * Half time counts as live here, deliberately — the clock has stopped but the
 * match has not, and the score is still the one that is going to change.
 */
.match-row[data-status="live"] .match-row__scores {
  color: var(--highlight);
}

.match-row__score {
  font-size: calc(var(--text-sm) * var(--fixture-scale));
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  /* Grid item, so the pulse below has a box to scale. */
  transform-origin: center right;
}

/*
 * A digit that just moved. Scale only — no layout, and tabular figures mean the
 * scale cannot nudge the column either. --duration-slow is long enough to catch
 * out of the corner of an eye and still inside the ceiling in tokens.css.
 *
 * It used to flash --accent on the way through, which stopped making sense once
 * the scoreline went red: a score only ever changes on a live row, so that
 * flash would fire exclusively on red digits, and blue is the colour that means
 * "selected" everywhere else in this app. A goal is not a selection. The pop is
 * the whole signal now, and it lands on a number that is changing value at the
 * same moment, which is most of the work.
 */
.match-row__score[data-changed] {
  animation: score-change var(--duration-slow) var(--easing);
}

@keyframes score-change {
  0% {
    transform: scale(1.45);
  }
  100% {
    transform: scale(1);
  }
}

/*
 * The prime itself blinks — `.live-prime` in interactions.css, shared with the
 * fixture page's clock. A half-time row never gets one: no prime is rendered at
 * all, so "HT" sits still in the same red while the clock is stopped. That
 * contrast between a blinking row and a still one is doing real work, and it
 * only reads if the ones that blink are exactly the ones whose clock is running.
 */

/*
 * The star sits over the gutter the grid reserved for it, rather than inside
 * the row button — nested buttons are invalid, and the two taps have to be
 * genuinely independent. Later in the DOM, so it takes the touch that lands on
 * it and the row underneath never sees one.
 */
.match-row__star {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: calc(var(--row-star) + calc(var(--space-3) * var(--fixture-scale)));
  color: var(--text-muted);
}

/* Filled blue: --accent owns "this one is selected", and a favourite is that. */
.match-row[data-favourite="true"] .match-row__star {
  color: var(--accent);
}

/*
 * The toggle answers on its own, ahead of the state coming back down. The pop
 * itself is `.icon.is-toggled` in interactions.css — an app-wide primitive
 * since the fixture page's favourite button and team stars took it up too.
 */

@media (prefers-reduced-motion: reduce) {
  .match-row__score[data-changed],
  .match-row[data-status="live"]::before {
    animation: none;
  }

  /* The pulse is the only thing that said a score moved, so it keeps saying it
     — as a colour that is simply there rather than one that travels. */
  .match-row__score[data-changed] {
    color: var(--accent);
  }
}