/*
 * The fixture page's Facts tab (FixtureFacts.js) — the panel column, its
 * slots, and the four cards that are this tab's own.
 *
 * Most of what the tab draws is not described here, and that is the point.
 * Team form, the venue, the referee and the poll are `fixture-preview.css`'s
 * cards, imported whole from that tab; Top stats is `fixture-statistics.css`'s
 * `stat-card`; the events list and the momentum chart have sheets of their
 * own. What is left below is the column itself and the cards nothing else in
 * the app has a version of — the player of the match, the kick-off strip, the
 * next fixtures and the locked-statistics note — plus the one heading they
 * share.
 *
 * The column is `fixture-preview.css`'s: one gutter on the panel, cards
 * stacked at `--space-5`, so the tabs a reader flicks between read as one page
 * with different cards on it.
 *
 * --- Colour ---------------------------------------------------------------
 *
 * `--stat-home` / `--stat-away` reach the momentum chart and the top stats the
 * way they reach the Statistics tab's rows: declared in tokens.css on
 * `[data-team-colours]`, which this panel's root carries, and overridden per
 * fixture by core/team-colours.js once the crests have been sampled. Nothing
 * waits for that — the fallback pair paints from the first frame.
 */

.fixture-facts {
  /* The poll card it shares with Preview is drawn with the Slip Builder's
     market pills, which are written against `--slip-scale` — 1 here, as on
     Preview, so they come out at their design size under the page's zoom. */
  --slip-scale: 1;

  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-inline: var(--space-4);
  padding-block: var(--space-4) var(--space-6);
  opacity: 1;
  transition: opacity var(--duration) var(--easing);
}

/* Same UA-rule note as `.fixture-preview[hidden]` — the `display: flex`
   above wins outright without this. */
.fixture-facts[hidden] {
  display: none;
}

.fixture-facts[data-open="false"] {
  opacity: 0;
}

/*
 * One slot per card, in the column's order. A holder with no box of its own —
 * `display: contents` — so an empty slot costs the column no gap and a filled
 * one lends its card straight to the flex column. Each card can then land on
 * its own clock (see `setMatch` in FixtureFacts.js) and the column still
 * reads top to bottom in the order the file lists.
 */
.fixture-facts__slot {
  display: contents;
}

/*
 * The heading the tab's own cards share: centred, over a card whose content is
 * laid out symmetrically or read top to bottom. The referee and news cards
 * left-align theirs instead, and the difference is the one `RefereeCard`
 * already documents — a label on a block that reads left to right from a
 * portrait is not the same object as a title over a centred card.
 */
.facts-card__heading {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text);
  text-align: center;
}

/* --- The card material ---------------------------------------------------
 *
 * One material for the three cards below — the hairline plus `--shadow-card`
 * every card in this app is drawn with. Each card's own rules say only what is
 * *in* it.
 */

.facts-potm,
.facts-kickoff,
.facts-next {
  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);
}

/* --- Top stats, locked ---------------------------------------------------- */

/*
 * What stands where the top stats would when the reader is not allowed them:
 * the stat card's own material and heading, with one quiet line where the
 * rows would be. A note, not an error screen — the rest of the column is fine.
 */
.facts-locked__text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

/* --- Player of the Match -------------------------------------------------- */

.facts-potm__button {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  text-align: left;
}

.facts-potm__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

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

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

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

/* --- Kick-off ------------------------------------------------------------- */

/*
 * Two rows, divided by a hairline, with no heading over them. The card's gap
 * is dropped to zero so the rows can carry their own vertical padding and the
 * divider can run between them — the venue card's arrangement, which these two
 * rows sit directly under on the page.
 */
.facts-kickoff {
  gap: 0;
}

.facts-kickoff__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding-block: var(--space-3);
  text-align: left;
}

.facts-kickoff__row:first-child {
  padding-top: 0;
}

.facts-kickoff__row:last-child {
  padding-bottom: 0;
}

.facts-kickoff__row + .facts-kickoff__row {
  border-top: 1px solid var(--border);
}

.facts-kickoff__row--action {
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

/* The venue card's disc, at the venue card's size — the two cards are
   neighbours on this tab and their rows have to start on the same line. */
.facts-kickoff__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.facts-kickoff__crest {
  flex: none;
  display: grid;
  place-items: center;
}

.facts-kickoff__label {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.facts-kickoff__chevron {
  flex: none;
  color: var(--text-muted);
}

/* --- Next match ----------------------------------------------------------- */

.facts-next__fixture {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

/* A row with a fixture page behind it — text-styled, the card's own
   hairline is the only border it keeps. */
.facts-next__fixture--action {
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
}

/* Hairline between the two sides' fixtures, not around them — the card's own
   border is the outside. */
.facts-next__fixture + .facts-next__fixture {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.facts-next__round {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
}

/*
 * Crest, kick-off, crest. The middle track is content-sized and the two clubs
 * share what is left, so a long name wraps into its own half rather than
 * pushing the time off the card's midline — the same grid the Head to Head
 * tab's record card uses, and for the same reason.
 */
.facts-next__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--space-3);
}

.facts-next__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* Wraps rather than truncating, the call `h2h-record__team-name` documents:
   a card whose subject reads "Wolverhampton Wander…" has decided a fixed
   height matters more than saying who is playing. */
.facts-next__team-name {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-align: center;
  text-wrap: balance;
}

.facts-next__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

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

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