/*
 * The fixture page's Statistics tab — the period control and the section cards
 * under it (FixtureStatistics.js).
 *
 * The column borrows `fixture-predictions.css`'s arrangement, which borrowed
 * it from `league-stats.css`: a control, then cards. What differs is what a
 * card holds. A pick card is one claim read top to bottom; a stat card is a
 * stack of comparisons read left to right, and every row in it has the same
 * three-column skeleton — home figure, centred label, away figure — so the eye
 * can run straight down either edge of the card without re-finding the column
 * on each row.
 *
 * Nothing here is tappable except the two toggles and the shotmap's own
 * markers. A statistic is something to read.
 *
 * --- Colour ---------------------------------------------------------------
 *
 * `--stat-home` / `--stat-away` and their soft steps are declared in
 * tokens.css, and `core/team-colours.js` overrides the channel triples behind
 * them on this element once the crests have been sampled. Nothing below cares
 * whether that has happened: the fallback pair paints correctly from the first
 * frame, and the club hues swap in when they land.
 */

.fixture-statistics {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-inline: var(--space-4);
  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-statistics[hidden] {
  display: none;
}

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

.fixture-statistics__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fixture-statistics__body[hidden] {
  display: none;
}

.fixture-statistics__empty {
  padding-block: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

/* The one control the body carries is hidden when there is one period to
   offer. `.segmented` is a grid, so the UA's [hidden] needs the same help the
   body above does. */
.fixture-statistics__body > .segmented[hidden] {
  display: none;
}

/* --- Loading ------------------------------------------------------------------
 *
 * The column's shape while the first answer is on its way: the control's
 * pill and three cards, in the shared `.skeleton` pulse (interactions.css).
 * Same gap as the real body so nothing shifts when the cards land.
 */
.fixture-statistics__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fixture-statistics__skeleton[hidden] {
  display: none;
}

.fixture-statistics__skeleton > .skeleton {
  display: block;
  width: 100%;
}

/* --- Period control ---------------------------------------------------------
 *
 * `ClubMatches`' List/Calendar toggle, widened to a variable number of
 * segments. The indicator is a transform off `--index` rather than a measured
 * offset because every segment is the same width — but the *count* is not
 * fixed the way that toggle's two are (a match at half time offers no second
 * half), so both the width and the travel are computed from `--count` instead
 * of hard-coded at 50%.
 */

/*
 * The period control's own rules are gone: it is `Segmented` now
 * (segmented.css), the shared control this panel's copy was one of three of.
 * Nothing is needed here to place it — the body is a flex column and the track
 * fills the width it is given.
 */

/* --- Section card ------------------------------------------------------------ */

.fixture-statistics__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

/*
 * Centred rather than leading, which is the one place this card departs from
 * every other heading in the app. The card under it is symmetrical about its
 * own centre line — two teams, two columns, a label down the middle — and a
 * left-aligned heading over that reads as a heading for the home team's column
 * rather than for the card.
 */
.stat-card__heading {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text);
  text-align: center;
}

.stat-card__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stat-card__graphic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}

/* --- Rows -------------------------------------------------------------------- */

.stat-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/*
 * The three-column skeleton. The centre column takes what it needs and the two
 * figure columns split what is left, so a long label ("Expected goals on
 * target") never pushes a figure off its own edge.
 */
.stat-row__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
}

.stat-row__value {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-row__value:last-child {
  text-align: right;
}

/*
 * The label is the quiet part. Both figures beside it are the same weight and
 * the same colour as each other — deliberately, since the bar underneath is
 * what says which one won, and colouring the numbers too would say it twice
 * while making the losing side's figure harder to read.
 */
.stat-row__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
}

/* --- `bar` ------------------------------------------------------------------- */

.stat-row__bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.stat-row__track {
  display: flex;
  height: 7px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  overflow: hidden;
}

/* Both fills grow outward from the middle of the row: the home track packs its
   fill to the right, the away track to the left. This is the whole reason the
   pair reads as one comparison rather than as two progress bars. */
.stat-row__track[data-side="home"] {
  justify-content: flex-end;
}

.stat-row__fill {
  width: var(--share);
  border-radius: var(--radius-full);
  transition: width var(--spring-duration) var(--easing);
}

.stat-row__fill[data-side="home"] {
  background: var(--stat-home-soft);
}

.stat-row__fill[data-side="away"] {
  background: var(--stat-away-soft);
}

/* The leader wears the colour at full strength. A tie hands it to both — see
   `leading()` in FixtureStatistics.js. */
.stat-row__fill[data-side="home"][data-lead="true"] {
  background: var(--stat-home);
}

.stat-row__fill[data-side="away"][data-lead="true"] {
  background: var(--stat-away);
}

/* --- `split` ----------------------------------------------------------------- */

.stat-row__pills {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
}

.stat-row__pill {
  justify-self: start;
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-inverse);
  font-variant-numeric: tabular-nums;
}

.stat-row__pill[data-side="home"] {
  background: var(--stat-home);
}

.stat-row__pill[data-side="away"] {
  justify-self: end;
  background: var(--stat-away);
}

.stat-row__split {
  display: flex;
  height: 9px;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.stat-row__split-fill {
  width: var(--share);
  transition: width var(--spring-duration) var(--easing);
}

/* No soft variant on either side: nobody wins possession, so neither half is
   dimmed. See `SplitRow` in FixtureStatistics.js. */
.stat-row__split-fill[data-side="home"] {
  background: var(--stat-home);
}

.stat-row__split-fill[data-side="away"] {
  background: var(--stat-away);
}

/* --- `donuts` and `headline` --------------------------------------------------- */

.stat-row__donuts {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
}

/* The headline pair has no fractions beside it, so it is three columns rather
   than five — and the rings take the outer two at their full drawn size. */
.stat-row[data-render="headline"] .stat-row__donuts {
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
}

.stat-row__fraction {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-row__fraction:last-child {
  text-align: right;
}

.stat-donut {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
}

.stat-donut[data-size="headline"] {
  width: 108px;
  height: 108px;
}

.stat-donut__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Starts the arc at twelve o'clock. Stated once here rather than baked into
     each arc's dash offset, which would have to know the rotation to compute
     its own endpoint. */
  transform: rotate(-90deg);
}

.stat-donut__track {
  fill: none;
  stroke: var(--surface-sunken);
}

.stat-donut__arc {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--spring-duration) var(--easing);
}

.stat-donut[data-side="home"] .stat-donut__arc {
  stroke: var(--stat-home-soft);
}

.stat-donut[data-side="away"] .stat-donut__arc {
  stroke: var(--stat-away-soft);
}

.stat-donut[data-side="home"][data-lead="true"] .stat-donut__arc {
  stroke: var(--stat-home);
}

.stat-donut[data-side="away"][data-lead="true"] .stat-donut__arc {
  stroke: var(--stat-away);
}

.stat-donut__value {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-donut[data-size="headline"] .stat-donut__value {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}