/*
 * The fixture page's Preview tab — Puntrr's Read, the poll carousel, the key
 * players, and the cards it shares with the Facts tab (FixturePreview.js).
 *
 * Drawn in the Slip Builder's voice since the tab's redesign: the read is
 * that screen's header card, the sections carry its labels and its count
 * badge, the poll options are its market pills. Those rules live in
 * slip-builder.css and slip-controls.css; what is here is what places them on
 * this tab, and the cards that were always this tab's own.
 *
 * The column is `fixture-predictions.css`'s, one step apart in one way that
 * shapes every rule below: the carousel has to reach the screen edge so the
 * next card can peek in, and a panel with `padding-inline` on it cannot let
 * anything do that. So the padding lives on the *blocks* — the read's own
 * column, the carousel's track, each section — rather than on the panel,
 * which is the arrangement `CategoryBar` and `TabBar` already use for a
 * scroller that has to be full-bleed while its content stays aligned with
 * the page.
 *
 * Two cards, and they are deliberately different objects:
 *
 *   .verdict      what the model thinks. Nothing in it is tappable — a read is
 *                 something you look at, the same call `.pick` makes.
 *   .poll-card    what the reader thinks. Every option answers a touch, once.
 *
 * Everything below is drawn from the backend (see FixturePreview.js): the
 * venue card lost the capacity, surface and forecast rows and the referee
 * card its two gauges, since no feed sends them; the rules for those are gone
 * with them.
 */

.fixture-preview {
  /*
   * The slip's controls at their design size. They are written as lengths
   * times `--slip-scale`, which is 0.75 on `:root` for the slip's own screen;
   * 1 here, under the panel's own `zoom: 0.9`, lands them at the density the
   * rest of this page runs at. The read card takes its own value below.
   */
  --slip-scale: 1;

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

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

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

/* Everything that is not the carousel keeps the page's own gutter. */
.fixture-preview__column {
  padding-inline: var(--space-4);
}

/*
 * The stack of detail cards below the polls. They are a column of separate
 * objects, not one block: without a gap of their own they sit edge to edge and
 * four cards read as one long card with rules across it.
 *
 * The same --space-5 the panel puts between its own three blocks, so the
 * rhythm down the tab is one distance rather than two that nearly match.
 */
.fixture-preview__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* --- Sections ----------------------------------------------------------------- */

/*
 * A label, a badge beside it if there is one, then the block. The label is
 * `.slip-label`; a section whose block bleeds to the edge (the carousel, the
 * rail) pads its head to the page gutter itself, since the panel does not.
 */
.preview-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* A section with nothing to show — no polls, no stats packs — leaves the
   column entirely, label and all. The UA rule loses to `display: flex`
   without this, and the same goes for an empty column below. */
.preview-section[hidden],
.fixture-preview__column[hidden] {
  display: none;
}

.preview-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.preview-section--bleed > .preview-section__head {
  padding-inline: var(--space-4);
}

.preview-section__head [hidden] {
  display: none;
}

/* --- Puntrr's Read ---------------------------------------------------------- */

/*
 * The header card (slip-builder.css) at the top of the read, the bar under
 * it in the same card. 0.833 here is 0.75 once the panel's zoom has had its
 * say — the size the title is everywhere else. The card's padding comes off
 * the top so the head can own its own, and the split takes it back below.
 */
.verdict.preview-read {
  --slip-scale: 0.833;

  gap: var(--space-4);
  padding: 0 0 var(--space-5);
  border-radius: calc(18px * var(--slip-scale));
}

/*
 * `.slip-head` is built around a counter blob flush to its right edge: it
 * pads only on the left, and the blob's own 96px box is what gave the row its
 * height. This card has no blob (FixturePreview.js), so the head pays for
 * both itself — the same `--space-5` inline as the split below it, so the
 * eyebrow starts exactly where the figures over the bar do, and a matching top
 * so the text does not sit on the card's edge. The gap to the split is the
 * card's own.
 *
 * Selected through the card rather than on `.verdict__head` alone because
 * `.slip-head`'s `padding-left` is a longhand and this sheet loads before
 * slip-builder.css: at equal specificity that longhand beats this shorthand's
 * left and the head ends up 8px out of line with the bar under it.
 */
.verdict.preview-read .verdict__head {
  padding: var(--space-5) var(--space-5) 0;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.verdict.preview-read .slip-head__text {
  padding: 0;
}

/* The favoured side's name, on one line. */
.verdict__lead {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-read .verdict__split {
  padding-inline: var(--space-5);
}

/*
 * Roomier than the cards below it, and deliberately so: it holds one object
 * rather than a list, and the space around a single bar is what stops it
 * reading as a rule ruled across a box. Everything in it is centred on the
 * card's own middle — the bar between its two crests, the three figures over
 * the bar's own width — so the block has no edge it hangs off.
 */
.verdict {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/*
 * The figures, the crests and the bar in one grid, which is what keeps them
 * lined up: the percentages span exactly the bar's own column, so the row of
 * numbers starts and ends where the bar does however wide a crest is.
 */
.verdict__split {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
}

.verdict__split[hidden] {
  display: none;
}

/*
 * Three equal columns, not three columns matching the split. See the note in
 * FixturePreview.js: a lopsided fixture would otherwise crush two of the three
 * numbers into a corner, and it is colour that ties a figure to its segment.
 */
.verdict__figures {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.verdict__figure {
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  /* Tabular, so a number counting up to its value does not jitter the two
     beside it on every frame. */
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/*
 * Home and away take their own club's colour, read off its crest at runtime and
 * set on the element as `--team-text` (core/crest-colour.js). The palette's
 * home/away pair is the fallback in the custom property itself, which is what
 * makes the whole feature optional: nothing here waits for a colour, and a
 * crest that cannot be sampled leaves the card exactly as it was.
 *
 * `--team-text` and `--team-colour` are two shades of the one hue for a reason
 * — 15px bold type needs more contrast against white than a bar does. The draw
 * stays on the neutral scale either way: it is the outcome that belongs to
 * neither side, and giving it a hue would imply a third team.
 */
.verdict__figure[data-outcome="home"] {
  color: var(--team-text, var(--side-home));
}

.verdict__figure[data-outcome="away"] {
  color: var(--team-text, var(--side-away));
}

.verdict__crest {
  display: grid;
  place-items: center;
  grid-row: 2;
}

.verdict__crest--home {
  grid-column: 1;
}

.verdict__crest--away {
  grid-column: 3;
}

/*
 * 14px — a quarter thicker than the 10 it started at, then a tenth again on top
 * of that, rounded to a whole pixel so the segments' rounded ends stay crisp on
 * a 1x screen. With the card's words gone this is the only thing in it with any
 * weight, and at 10 it read as a rule under the numbers rather than as the
 * subject of the card.
 */
.verdict__bar {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 3px;
  height: 14px;
}

/*
 * One segment per outcome, widths in proportion — `.pick__segment`'s own
 * arrangement, including the unitless `--share` that makes the flex ratio the
 * percentage itself.
 *
 * The 6px floor is the same idea as FixturePredictions.js's
 * MIN_SEGMENT_PERCENT, kept in CSS here because nothing in this card needs the
 * number: a 3% draw is a hairline at this width and reads as a rendering fault
 * rather than as a small number, and the figure above it carries the real
 * value either way.
 */
.verdict__segment {
  flex: var(--share) 1 0;
  min-width: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-pressed);
  /*
   * The reveal. Scale rather than width: a bar that animated its segments'
   * widths would relayout the row on every frame, which is the one thing
   * INTERACTIONS.md rules out outright. Each segment grows from the edge it is
   * anchored to (see GROW_FROM in FixturePreview.js), one --stagger-step apart,
   * so the bar fills out from both ends instead of three pieces sliding.
   *
   * Under reduced motion every duration token above is 0ms, so this lands in
   * its final state with no rule of its own.
   */
  transform: scaleX(0);
  transform-origin: var(--grow-from, center) center;
  /*
   * Two properties, two timings. The growth is staggered by the segment's place
   * in the bar; the colour is not — it arrives whenever the crest behind it has
   * been read, and a delay on top of that would only make a late change later.
   */
  transition:
    transform var(--spring-duration) var(--spring)
      calc(var(--index, 0) * var(--stagger-step)),
    background-color var(--duration) var(--easing);
}

.verdict__bar[data-revealed="true"] .verdict__segment {
  transform: scaleX(1);
}

.verdict__segment[data-outcome="home"] {
  background: var(--team-colour, var(--side-home));
}

.verdict__segment[data-outcome="away"] {
  background: var(--team-colour, var(--side-away));
}

.poll-card {
  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);
}

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

.poll-card__heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/*
 * The question. --text-md, the same voice `.pick__call` takes: it is the one
 * line of the card a reader has to be able to skim, and everything else on the
 * card is deliberately quieter so it can be.
 */
.poll-card__question {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--text);
}

/*
 * The prompt and the turnout, stacked in one grid cell and cross-faded between
 * — see FixturePreview.js. Both are always in the layout, so the header keeps
 * its height through the swap and the card below it never moves.
 */
.poll-card__status {
  display: grid;
}

.poll-card__prompt,
.poll-card__total {
  grid-area: 1 / 1;
  font-size: var(--text-xs);
  color: var(--text-muted);
  transition: opacity var(--duration) var(--easing);
}

.poll-card__total {
  font-variant-numeric: tabular-nums;
}

.poll-card__status[data-showing="prompt"] .poll-card__total,
.poll-card__status[data-showing="total"] .poll-card__prompt {
  opacity: 0;
}

/*
 * The market's mark — a trophy on the winner, a ball on both-teams-to-score, a
 * boot on the first scorer — at the head of the card, in the icon box the
 * Slip Builder's teaser rows lead with. Neutral, not accent: the accent on
 * this card belongs to the option someone chose.
 */
.poll-card__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

/*
 * One row, always — two options or three, before the vote and after it. The
 * pills split the width evenly and truncate rather than wrap: a row that
 * reflowed into two lines on the longest club name would change the card's
 * height between markets, and the reveal below depends on the row it started
 * in still being there.
 *
 * Centred in whatever room is left, rather than sitting under the header. The
 * track stretches every card to the tallest, so a two-option market inside a
 * carousel of three-option ones has a card taller than its own content; split
 * above and below, that slack reads as a card with its answers in the middle of
 * it rather than as a hole underneath them.
 */
.poll-card__options {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  margin-block: auto;
}

/*
 * The pill is the Slip Builder's market pill (`.slip-market`, slip-builder.css)
 * — sunken at rest with its dot, the accent sweeping across the one that was
 * chosen, its label recolouring at the sweep's midpoint. What this file adds is
 * the row's geometry and the two states a poll has that a market does not.
 *
 * The face and the share sit in one grid cell inside the pill and cross-fade
 * through each other, so a percentage arriving cannot resize the pill or
 * nudge the two beside it. Every transition here is delayed by the pill's
 * place in the row, so the result travels left to right — 80ms a step, which
 * is REVEAL_STAGGER_MS in FixturePreview.js; a timer cannot read a token.
 */
.poll-option.slip-market {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
}

.poll-option.slip-market::before {
  transition-delay: calc(var(--index, 0) * var(--stagger-step) * 2);
}

/* The pill is a stadium, so its focus ring has to be one too. */
.poll-option:focus-visible {
  border-radius: var(--radius-full);
}

/* Locked, not greyed out: a result is not a disabled control. */
.poll-option:disabled {
  cursor: default;
}

.poll-option__body {
  position: relative;
  flex: 1;
  min-width: 0;
  display: grid;
  align-items: center;
}

/*
 * The answer already on record, while the row is open for changes again: the
 * accent's flat tint rather than its fill — "this is what you said" without
 * "this is settled", which is exactly the difference between the two rows.
 */
.poll-card__options[data-state="idle"] .poll-option[data-chosen="true"] {
  background: var(--accent-tint);
  color: var(--accent);
}

.poll-option__face,
.poll-option__share {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  transition: opacity var(--duration) var(--easing);
  transition-delay: calc(var(--index, 0) * var(--stagger-step) * 2);
}

.poll-option__share {
  opacity: 0;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.poll-card__options[data-state="result"] .poll-option__face {
  opacity: 0;
}

.poll-card__options[data-state="result"] .poll-option__share {
  opacity: 1;
}

/* The two the reader did not pick stay sunken, their share in secondary text;
   the one they chose is the market pill's own selected state, accent and all.
   The second rule restates the pill's inverse type: the first outranks the
   market pill's own selected colour on specificity, and would otherwise grey
   the share on the one pill that is blue. */
.poll-card__options[data-state="result"] .poll-option {
  color: var(--text-secondary);
}

.poll-card__options[data-state="result"] .poll-option[aria-pressed="true"] {
  color: var(--text-inverse);
}

/*
 * White behind the crest, which `.logo` does not give it: club crests are
 * transparent PNGs and a bare one would have nothing to read against. Inset
 * rather than a real border for the reason `.filter-chip .logo` gives —
 * `box-sizing` is global, so a border would eat into the box.
 */
.poll-option .logo {
  flex: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* --- Key players ------------------------------------------------------------ */

/*
 * One card per club, stacked: each club's top three this season by rating,
 * as the backend's stats pack ranks them. Two cards rather than two columns
 * because a row that has to fit a face, a name, two figures and a rating does
 * not fit in half a phone's width — see `ClubPlayersCard` in FixturePreview.js.
 */
.fixture-preview__players {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

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

/* Crest, club, and the season the figures are counted over — the card's own
   label, since the section label above names the block and not the club. */
.scorers__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.scorers__head .logo {
  flex: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}

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

.scorers__season {
  flex: none;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.scorers__list {
  display: flex;
  flex-direction: column;
}

/*
 * One player, one row: the face, the name over the position taking what is
 * left, then the two counts and the rating at fixed widths so the three
 * columns line up down the card whatever the names do.
 */
.scorers__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 44px 44px auto;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding-block: var(--space-2);
  text-align: left;
}

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

.scorers__row--action {
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  color: inherit;
  font: inherit;
}

/*
 * The portrait's ring. Inset rather than a border, for the reason
 * `.filter-chip .logo` documents: `box-sizing` is global, so a real border
 * would eat into the box and shrink the face inside it.
 */
.scorers__portrait {
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px var(--border);
}

.scorers__portrait .logo {
  background: var(--surface-sunken);
}

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

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

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

/* A count over its label, centred in its own column. Tabular figures so the
   column of them reads as a column. */
.scorers__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.scorers__stat-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.scorers__stat-label {
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/*
 * The rating pill is season-stats.css's — the same colours the Lineups pitch
 * wears for the same tiers — but that sheet writes it as a badge hung off a
 * photo's corner, so it is taken out of that position here and set at the
 * row's size in its own column. Two classes, since season-stats.css is linked
 * after this sheet. A player without a rating shows a dash.
 */
.scorers__rating.season-stats__rating {
  position: static;
  justify-self: end;
  min-width: 36px;
  padding: 3px 7px;
  border: none;
  font-size: var(--text-xs);
}

.scorers__rating--none {
  min-width: 34px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --- Team form -------------------------------------------------------------- */

/*
 * Five results per side, in two columns that line up row for row. The grid is
 * what holds the alignment — see FixturePreview.js — so the columns are its
 * tracks and a row is two cells, not two lists side by side.
 */
.form-card {
  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);
}

.form-card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text);
  text-align: center;
}

.form-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-3);
}

/*
 * Crest, scoreline, crest. The pill takes the middle on its own track so every
 * pill in the column is the same width and the crests hang off its two ends —
 * three `auto` columns would let a 0-0 sit narrower than a 3-2 and put a wobble
 * down the card.
 */
.form-card__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
}

/*
 * `.club-overview__form-pill`'s treatment at this card's size: a soft tint of
 * the outcome's own colour, the scoreline in that colour at full strength. The
 * draw borrows the neutral scale rather than gaining a hue of its own — the
 * reasoning is on --form-win / --form-loss in tokens.css.
 */
.form-card__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.form-card__pill[data-outcome="win"] {
  background: var(--form-win-soft);
  color: var(--form-win);
}

.form-card__pill[data-outcome="loss"] {
  background: var(--form-loss-soft);
  color: var(--form-loss);
}

/* Pads the shorter column early in a season, so the rows stay level. */
.form-card__row--empty {
  min-height: 24px;
}

/* --- Venue ------------------------------------------------------------------ */

/*
 * One row and no header: the pin says what the card is. The row keeps the
 * padding rules from when there were four, so a second row can come back the
 * day a feed carries one.
 */
.venue {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.venue__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

/* The first and last rows sit against the card's own padding, so they take
   none of their own on the outer edge. */
.venue__row:first-child {
  padding-top: 0;
}

.venue__row:last-child {
  padding-bottom: 0;
}

/*
 * The mark at the head of each row, in the neutral disc every leading icon on
 * this tab uses — the poll card's own mark is the same object at nearly the
 * same size, which is what keeps the two cards reading as one family.
 */
.venue__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);
}

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

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

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

/* --- Referee ---------------------------------------------------------------- */

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

/* Left-aligned where the other cards centre theirs — see FixturePreview.js. */
.referee__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.referee__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.referee__identity > .logo {
  flex: none;
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--border);
}

.referee__stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.referee__name {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text);
}

.referee__association {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/*
 * The competition the official is working in, as a footer tag. Divided from the
 * gauges above it, and set at the size and colour of metadata rather than of
 * content — it says which list this card is about, not what it says.
 */
.referee__competition {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
}