/*
 * The Facts tab's Events card (FixtureFactsEvents.js) — the match as a
 * timeline, home down the left and away down the right.
 *
 * --- The two columns ------------------------------------------------------
 *
 * Every row is the same three things in the same order — minute, glyph, text —
 * and an away row is that row reversed. `row-reverse` rather than a mirrored
 * set of rules, which is what makes the two sides one row shape with one
 * direction flipped: the minute is always on the *outer* edge, the glyph
 * always inboard of it, and neither side needs its own widths.
 *
 * `justify-content: flex-start` reads as "the outer edge" in both directions,
 * because main-start on a reversed row is the right edge. That is the whole
 * trick, and it is why nothing here is positioned.
 *
 * The text block deliberately does not flex. A row hugs its own side and stops
 * — an event stretched across the full width would put its own side's meaning
 * back into a label the layout is already carrying.
 */

.facts-events {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.facts-events[hidden] {
  display: none;
}

.facts-events__title-heading {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text);
  text-align: center;
}

.facts-events__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Loading, and the card with a sentence in it -----------------------------
 *
 * A first fill draws a few rows in the shared `.skeleton` pulse
 * (interactions.css), on the row's own grid and alternating sides, so the card
 * is the same height before and after. A refusal or a failure is one sentence
 * in the rows' place — an empty feed is not: the card leaves the column.
 */
.facts-events__skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.facts-events__skeleton-row[data-side="away"] {
  flex-direction: row-reverse;
}

.facts-events__skeleton-disc {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
}

.facts-events__skeleton-line {
  display: block;
  width: 40%;
  height: 12px;
}

.facts-events__empty {
  padding-block: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

.facts-events__empty[data-state="locked"] {
  color: var(--text);
}

.facts-events__row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
}

.facts-events__row[data-side="away"] {
  flex-direction: row-reverse;
  text-align: right;
}

/* Neither side's. Centred rather than left, which would read as the home
   column — see the note in FixtureFactsEvents.js. */
.facts-events__row[data-side="none"] {
  justify-content: center;
}

/*
 * The minute, in the disc the reference gives it. A fixed square rather than a
 * padded label: the discs line up down both edges of the card, and a two-digit
 * minute next to a one-digit one would otherwise step in and out.
 *
 * A dash where the minute is null — an entry that belongs to no minute, which
 * is a value rather than a gap. See `CommentaryEntry.minute` in types.js.
 */
.facts-events__minute {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/*
 * The glyph, in a hairline disc on the card's own ground — the Commentary
 * tab's rail draws the same marks bare, and the difference is deliberate: there
 * the mark sits under a minute in a column of its own, and here it is the one
 * thing between two blocks that both carry weight.
 */
.facts-events__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
}

/* Empty for a kind with no glyph — it keeps its space so the text columns stay
   level down the card. */
.facts-events__mark:empty {
  border-color: transparent;
}

/* The same rectangle the Commentary tab draws, at the same size. A booking is
   a shape, not an icon — see `Mark` in FixtureCommentary.js. */
.facts-events__booking {
  width: 10px;
  height: 14px;
  border-radius: 1.5px;
}

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

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

.facts-events__var {
  padding: 1px 3px;
  border-radius: 3px;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: 8px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.facts-events__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* The scorer and the score they made it, on one line that wraps as a unit. */
.facts-events__lead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
}

.facts-events__row[data-side="away"] .facts-events__lead {
  justify-content: flex-end;
}

.facts-events__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

/*
 * A name that opens the player. It is a button, so it says so by being the
 * app's accent — the same answer `commentary` gives by *not* offering one, and
 * the reason the two differ is that this card has somewhere to send the tap.
 *
 * No underline: the rows are short and there are up to a dozen of them, and a
 * card of underlined names reads as a page of links rather than as a timeline.
 */
.facts-events__name--link {
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-weight: var(--weight-semibold);
  text-align: inherit;
}

.facts-events__score {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* The number that just went up, so the turn of a match is visible without
   reading both figures. */
.facts-events__score-part[data-scored="true"] {
  color: var(--form-win);
  font-weight: var(--weight-bold);
}

.facts-events__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text);
}

.facts-events__note {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/*
 * Coloured by direction, the same pair the Lineups tab uses for the same two
 * facts. The colour is the only thing saying which way round it went, so it
 * carries the name rather than sitting beside it as a tag.
 *
 * These win over the accent a tappable name would otherwise wear, deliberately
 * and by specificity: on this row, which way the substitution went is worth
 * more than the fact that the name opens a player. Both names are still
 * buttons and both still answer a tap.
 */
.facts-events__swap[data-direction="in"] .facts-events__name {
  color: var(--sub-on);
}

.facts-events__swap[data-direction="out"] .facts-events__name {
  color: var(--sub-off);
  font-weight: var(--weight-medium);
}

/*
 * Half time and full time. A rule across the card with the score in the middle
 * of it — the one row that belongs to neither side, so it is the one row that
 * is not in a column.
 */
.facts-events__period {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-1);
}

.facts-events__period::before,
.facts-events__period::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.facts-events__period-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}