/*
 * Who scored, under the team it counted for — the fixture page's score header
 * (FixtureDetails.js) and the Catch-Up room's Game Snapshot card
 * (GameSnapshot.js).
 *
 * Moved here whole, class names and all, when the second caller arrived — the
 * same move `.tab-bar` made out of fixture-details.css. Both callers lay the
 * pair out as two cells of the grid their crests and scoreline are already in,
 * with the mark between them in the centre column, so the lists line up with
 * the columns above them rather than forming a second track of their own; what
 * differs between the two is only that grid, which each owns.
 *
 * The grouping rule behind the lines — one line per scorer however many times
 * they scored, the minute carrying "(Pen.)" or "(OG)" — is `scorerLines` in
 * data/fixtures.js, shared the same way.
 */

.fixture-scorers[hidden],
.fixture-scorers__mark[hidden] {
  display: none;
}

/*
 * Who scored, under the team it counted for: home names run to the right edge of
 * their column and away names from the left edge of theirs, so both lists lean
 * on the centre mark between them and the block reads inward rather than as two
 * unrelated paragraphs.
 *
 * Set small and secondary on purpose. This is the supporting detail under a
 * result, and at --text-xs it stays a caption beside crests and a 30px
 * scoreline instead of competing with them.
 */
.fixture-scorers {
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.fixture-scorers--home {
  text-align: right;
}

.fixture-scorers--away {
  text-align: left;
}

/*
 * A scorer and their minutes are one run of text, and at this column width that
 * run wraps — "Preview Scorer 1 11', 45', 79'" does not fit beside a crest on a
 * 390px screen, and neither would most real names with a brace on them.
 *
 * So the lines are spaced. Without the gap a wrapped second line is
 * indistinguishable from the next scorer, and a four-goal column becomes a
 * paragraph you have to parse rather than a list you can count. The reference
 * this is drawn from has no gap because nothing in it wraps; the gap is what
 * keeps the same reading at a width where things do.
 */
.fixture-scorers__line {
  text-wrap: pretty;
}

.fixture-scorers__line + .fixture-scorers__line {
  margin-top: var(--space-1);
}

.fixture-scorers__minutes {
  /* Tabular, like every other number in this block: minutes sit in a ragged
     column here and proportional figures make that edge look accidental. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * The mark between the two lists, in the same column the scoreline is in. Muted:
 * it labels what the lists are, and a goal icon in the accent or the live red
 * would be claiming one of the roles those colours already own.
 *
 * Top-aligned with the first line of each list rather than centred on the block,
 * so a side with four goals does not drag it halfway down the page.
 */
.fixture-scorers__mark {
  display: grid;
  place-items: center;
  /* One line box of the lists either side, so the glyph sits on their first
     line however many lines follow it. */
  height: calc(var(--text-xs) * 1.45);
  color: var(--text-muted);
}