/*
 * The fixture page's Head to Head tab (FixtureHeadToHead.js) — the record
 * card, the meetings list, and the panel column the two sit in.
 *
 * Two things it draws are not here, both on purpose. The comparison card is
 * `stat-card` / `stat-row`, borrowed whole from `fixture-statistics.css` along
 * with the `BarRow` that builds it: goals and clean sheets are the same
 * left-versus-right comparison that tab already draws, and a second copy of
 * that grammar is a second place for it to drift out of step. The filter chips
 * are `.filter-chip` from `filter-sheet.css`, unchanged — the app's chip, down
 * to the crest framing and the selection pop, on a second surface rather than
 * rebuilt for one.
 *
 * The column is `fixture-preview.css`'s — gutter, stack gap, and the fade the
 * page's panel switching drives — so these cards land in the same measure as
 * the neighbouring tabs'.
 *
 * --- Colour ---------------------------------------------------------------
 *
 * `--stat-home` / `--stat-away` and their soft steps come from tokens.css, and
 * `core/team-colours.js` overrides the channel triples behind them on this
 * panel's root once the crests have been sampled. Nothing below waits for
 * that: the fallback pair paints from the first frame and the club hues swap
 * in when they land.
 *
 * A draw takes no hue at all, on the bar and in the counts alike. That is the
 * call --form-win / --form-loss already made in tokens.css, and the reason a
 * drawn match has never had a colour anywhere in this app: it is the absence
 * of a result, not a third one.
 */

.fixture-head-to-head {
  display: flex;
  flex-direction: column;
  /* Between the chip row and the cards it governs. The cards keep their own
     tighter --space-4 between themselves, so the control reads as sitting over
     the stack rather than as the first item in it. */
  gap: var(--space-4);
  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-head-to-head[hidden] {
  display: none;
}

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

/*
 * The filter row, at the head of the column rather than inside the first card.
 *
 * The reasoning for the placement is in FixtureHeadToHead.js; what it means
 * here is that this row governs everything below it, so it gets the panel's own
 * gutter and no card of its own — the same shape `.fixture-statistics__periods`
 * takes one tab over.
 *
 * It wraps rather than scrolls. There are two chips and their labels are fixed
 * strings, so the row fits every phone this app is opened on; wrapping is the
 * behaviour that stays correct if a third one is ever added, and it costs
 * nothing to ask for now.
 */
.fixture-head-to-head__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Same UA-rule note as `.fixture-head-to-head[hidden]` above. */
.fixture-head-to-head__filters[hidden] {
  display: none;
}

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

.fixture-head-to-head__cards[hidden] {
  display: none;
}

/*
 * Both empty lines: "never met" and "nothing survives your filter". They are
 * different facts and the panel keeps them apart (see its `filtered` / `empty`
 * pair), but they are the same object on the page — one quiet line where the
 * cards would be — so they share a class.
 */
.fixture-head-to-head__empty {
  padding-block: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

/*
 * Three card-shaped blocks while the comparison and the form rows are out —
 * see `Skeleton` in FixtureHeadToHead.js. The same stack gap as the cards
 * they stand in for, and the cards' own radius, so the column does not change
 * shape when the answer lands over them.
 */
.fixture-head-to-head__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fixture-head-to-head__skeleton .skeleton {
  width: 100%;
  border-radius: var(--radius-lg);
}

/* --- The record -------------------------------------------------------------
 *
 * Three bands, all symmetrical about the card's centre line: the two clubs,
 * the counts, then one divided bar. Read top to bottom it is "who", "how many"
 * and "what that looks like" — the bar last because it is the only one of the
 * three that adds nothing new.
 */

.h2h-record {
  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);
}

/*
 * Crest, count of meetings, 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 centre off the card's midline.
 */
.h2h-record__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--space-3);
}

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

/*
 * Wraps rather than truncating. This is the one place on the tab a club is
 * named in full — every other mention is a crest with a line of text beside it
 * — and a card whose subject reads "Wolverhampton Wander…" is a card that has
 * decided a fixed height matters more than saying who is playing.
 */
.h2h-record__team-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
  text-align: center;
  text-wrap: balance;
}

/* Sits on the crests' own line rather than under them: it is the count the
   whole card is about, and level with the two badges it reads as the thing
   between them. */
.h2h-record__played {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: var(--space-2);
}

.h2h-record__played-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

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

/* Three equal columns rather than the teams' 1fr auto 1fr: these are three
   figures of the same kind, and the draw in the middle is not a divider. */
.h2h-record__counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.h2h-record__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.h2h-record__count-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.h2h-record__count[data-side="home"] .h2h-record__count-value {
  color: var(--stat-home);
}

.h2h-record__count[data-side="away"] .h2h-record__count-value {
  color: var(--stat-away);
}

.h2h-record__count[data-side="draw"] .h2h-record__count-value {
  color: var(--text-secondary);
}

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

/*
 * One track divided three ways, not three bars in a row: the segments are
 * flush against each other and the rounding is on the container, so a side
 * with no wins contributes a zero-width segment and simply is not there —
 * rather than leaving a gap that would read as a fourth, unlabelled band.
 *
 * The track underneath shows only when the record is empty, which the panel
 * does not draw at all. It is there so the bar is a shape from the first
 * frame rather than a collapsed line.
 */
.h2h-record__bar {
  display: flex;
  overflow: hidden;
  height: 8px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
}

.h2h-record__segment {
  width: var(--share);
  transition: width var(--duration) var(--easing);
}

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

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

.h2h-record__segment[data-side="draw"] {
  background: var(--border-strong);
}

/* --- Previous meetings ------------------------------------------------------
 *
 * A date, then the match under it. Two lines rather than one: a row that fits
 * the date, two club names and a scoreline across a phone would be truncating
 * at least one of the names, and the names are how a reader tells which of
 * these six was at whose ground.
 */

.h2h-meetings {
  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, for the reason `.stat-card__heading` is: the rows under it are
   symmetrical about the card's midline, and a leading heading over them reads
   as a heading for the left-hand column. */
.h2h-meetings__heading {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text);
  text-align: center;
}

.h2h-meetings__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * The divider is the row's own top border rather than an element between rows
 * — `.venue`'s arrangement in fixture-preview.css — so the first row needs no
 * special case beyond not having one.
 *
 * It sits on the `li` and the padding sits on the button inside it, which is
 * the split a tappable row needs: the line has to span the row whatever the
 * press is doing to the button, and `[data-pressable]`'s scale would otherwise
 * drag the divider in with it on every touch.
 */
.h2h-meeting + .h2h-meeting {
  border-top: 1px solid var(--border);
}

.h2h-meeting__button {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding-block: var(--space-3);
  text-align: left;
}

.h2h-meeting:first-child .h2h-meeting__button {
  padding-top: 0;
}

.h2h-meeting:last-child .h2h-meeting__button {
  padding-bottom: 0;
}

/*
 * `.match-row__button`'s own press tint, with a radius this one needs and that
 * one does not: a match row spans its card edge to edge, and this button is
 * inset by the card's --space-4 padding, so a square fill would read as a band
 * clipped short rather than as the row lighting up.
 */
.h2h-meeting__button:active {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

/* Date leading, competition trailing — the two facts about a meeting that are
   not the meeting itself, on their own line above it. */
.h2h-meeting__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.h2h-meeting__date {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.h2h-meeting__competition {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.h2h-meeting__competition-name {
  overflow: hidden;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * The badge gets the disc and hairline `.filter-chip .logo` gives its own — and
 * for the same reason, which is worth restating rather than cross-referencing:
 * competition crests are transparent PNGs, and several of them are a device on
 * white. Cropped to a disc on a white card, a bare one reads as a mark floating
 * in the middle of nothing.
 *
 * Inset rather than a border, because `box-sizing: border-box` is global and a
 * real border would eat into the 18px box and shrink the mark inside it.
 */
.h2h-meeting__competition .logo {
  flex-shrink: 0;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* The monogram fallback at badge size — `.filter-chip .logo--monogram`'s own 9px.
   Every `Preview Cup` row lands here, since a stub competition has no crest. */
.h2h-meeting__competition .logo--monogram {
  font-size: 9px;
  letter-spacing: 0;
}

/*
 * Home, scoreline, away — in the order that match was played. The pill takes
 * the middle track on its own so every scoreline in the list is the same width
 * and the two clubs hang off its ends; three `auto` columns would let a 0-0 sit
 * narrower than a 3-2 and put a wobble down the card, which is the same reason
 * `.form-card__row` is built this way.
 */
.h2h-meeting__result {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
}

.h2h-meeting__side {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.h2h-meeting__side[data-align="end"] {
  justify-content: flex-end;
}

.h2h-meeting__side[data-align="start"] {
  justify-content: flex-start;
}

.h2h-meeting__side .logo {
  flex-shrink: 0;
}

/*
 * The winner by weight, the loser by absence of it. Both are stated on the
 * name rather than on the scoreline: the pill in the middle belongs to the
 * match, not to either club, and tinting it would mean choosing whose result
 * the colour describes.
 */
.h2h-meeting__name {
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.h2h-meeting__side[data-result="won"] .h2h-meeting__name {
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.h2h-meeting__side[data-result="lost"] .h2h-meeting__name {
  color: var(--text-muted);
}

/* Neutral in every case — see above. `.form-card__pill`'s box without its
   outcome tint. */
.h2h-meeting__score {
  padding: var(--space-1) var(--space-2);
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}