/*
 * Catch-Up (CatchUp.js, CatchUpBlocks.js) — the tab's one screen.
 *
 * Drawn in the Slip Builder's vocabulary on purpose, the way SureTOOLS is:
 * the root carries `.slip` as well as `.catch-up`, so the header card, the
 * counter blob, the chip pills, the section labels and the card frame are the
 * very same rules in slip-builder.css and slip-controls.css, at the same
 * --slip-scale. The rail is the shared `.slip-rail`. What is here is what a
 * feed adds that a form does not: the blocks and their collapse, the five
 * cards that are this tab's own, and the frame the borrowed cards wear inside
 * a recap's carousel.
 *
 * Separation is tonal, as on the Slip Builder — white cards on the off-white
 * page, the sunken grey inside them — and nothing here casts a shadow, which
 * is why the Facts tab's cards drop theirs when they are borrowed.
 *
 * --- Colour ---------------------------------------------------------------
 *
 * `--stat-home-rgb` / `--stat-away-rgb` reach the score card's ground the way
 * they reach the Statistics tab's rows: declared in tokens.css on
 * `[data-team-colours]`, which the card 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.
 */

/* --- The top: the home screen's chrome ---------------------------------------- */

/*
 * The app bar and the story strip are the home header's own pieces, and they
 * are laid out the way header.css lays them out — the bar's card inset by its
 * own margin, the strip flush to the true screen edge. Both were written for
 * a parent with no gutter, so the header steps out of the slip's page padding
 * with the same negative margin the SureTOOLS rail uses, and the slip's own
 * top padding is traded for the home header's.
 */
.catch-up {
  padding-top: var(--space-4);
}

.catch-up__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-inline: calc(var(--space-5) * var(--slip-scale) * -1);
}

.catch-up__strip:empty {
  display: none;
}

/* --- The feed ------------------------------------------------------------------ */

.catch-up__feed {
  display: flex;
  flex-direction: column;
  /* The slip's own section gap, so a block sits as far from the next as the
     rail sits from the header. */
  gap: calc(28px * var(--slip-scale));
}

.catch-up__feed:empty {
  display: none;
}

/*
 * A block, and its way out. 1fr -> 0fr gives an animated collapse without
 * measuring heights — the league accordion's arrangement — with an opacity
 * fade on the same duration so the cards go quiet as the row closes. The
 * inner only clips while leaving: clipped always, it would slice the dismiss
 * button's press and the carousel's own padding.
 */
.catch-up-block {
  display: grid;
  /*
   * The column is named, not left implicit. An implicit `auto` column takes
   * its width from its content's max-content size, and a recap's carousel —
   * a row of cards whose percentage widths cannot resolve during intrinsic
   * sizing — reports the sum of every card laid out at its natural width.
   * The block then grew to a thousand pixels and the cards with it. A
   * `minmax(0, 1fr)` column is exactly the feed's width, and the cards size
   * against it as they were written to.
   */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--duration) var(--easing),
    opacity var(--duration) var(--easing);
}

.catch-up-block[data-leaving="true"] {
  grid-template-rows: 0fr;
  opacity: 0;
}

.catch-up-block__inner {
  min-width: 0;
  min-height: 0;
}

.catch-up-block[data-leaving="true"] .catch-up-block__inner {
  overflow: hidden;
}

/* The head: label, then the competition after it in the muted style, and the
   two kept on one line by letting the competition truncate. */
.catch-up__label {
  display: flex;
  align-items: baseline;
  gap: calc(var(--space-2) * var(--slip-scale));
  min-width: 0;
}

.catch-up__opt {
  min-width: 0;
}

/*
 * The dismiss control: a sunken disc, the slip's own idiom, rather than the
 * icon button's white card-and-shadow — nothing on this screen casts one.
 */
.catch-up__dismiss {
  width: 32px;
  height: 32px;
  background: var(--surface-sunken);
  border-color: transparent;
  box-shadow: none;
  color: var(--text-secondary);
}

/* --- The recap's carousel ------------------------------------------------------- */

/*
 * The row bleeds to the page edge, like the rail above it, so the peeking
 * card is cut by the screen and not by the slip's gutter; the track's own
 * padding then puts the first card back on the head's left edge.
 */
.recap .carousel {
  margin-inline: calc(var(--space-5) * var(--slip-scale) * -1);
}

.recap .carousel__track {
  padding-inline: calc(var(--space-5) * var(--slip-scale));
  scroll-padding-inline-start: calc(var(--space-5) * var(--slip-scale));
}

/*
 * Every card in a recap wears the slip's frame, whatever it was drawn for:
 * the Facts tab's stat card and the Preview tab's venue card arrive with the
 * fixture page's hairline, radius and shadow, and one row of cards must not
 * disagree about its corners. The rule is on the track's children rather
 * than on each borrowed class so a card added later is framed too.
 */
.recap .carousel__track > * {
  border: none;
  border-radius: calc(18px * var(--slip-scale));
  box-shadow: none;
}

/* A card's link row — the foot of every card that leads somewhere. */
.recap-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--accent);
  font-size: calc(var(--text-sm) * var(--slip-scale) / 0.75);
  font-weight: var(--weight-bold);
}

/* The chevron points on, the way the SureTOOLS teaser's does. */
.recap-link .icon {
  transform: rotate(-90deg);
}

.recap-eyebrow {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* --- The score card ---------------------------------------------------------------- */

/*
 * Every card in a track is stretched to the tallest one — the venue card, at
 * its four rows — which is the reference's own arrangement and what keeps
 * the dots under the row still. What each card does with the height is its
 * own business: the score card spreads its three bands across it, and the
 * three cards that are one thought centre themselves in it. None of them
 * leaves its content bunched at the top of a tall white space.
 */
.recap-score {
  --tint: 0.14;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  /* The two clubs' tints over the surface — tokens.css's alpha-over-channels
     recipe, so the fallback pair paints before the crests are sampled and a
     palette change stays a one-line edit. A tint, not the reference's wash:
     this is a white card on an off-white page, and the crests carry the
     colour. */
  background:
    linear-gradient(135deg, rgb(var(--stat-home-rgb) / var(--tint)), rgb(var(--stat-away-rgb) / var(--tint))),
    var(--surface);
  text-align: center;
  transition: transform var(--spring-duration) var(--spring);
}

.recap-score__top {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 34px;
}

/* The competition's crest in a sunken box on the left, the reference's mark. */
.recap-score__crest {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.recap-score__competition {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding-inline: 42px;
}

.recap-score__competition-name {
  max-width: 100%;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.recap-score__round {
  max-width: 100%;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.recap-score__middle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

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

.recap-score__name {
  max-width: 100%;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.recap-score__centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-inline: var(--space-2);
}

.recap-score__score {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The side behind reads lighter — the reference's own weighting; level is
   two full-weight numbers. */
.recap-score__goals[data-trailing="true"] {
  color: var(--text-muted);
}

.recap-score__dash {
  color: var(--text-muted);
  font-size: 0.7em;
  font-weight: var(--weight-semibold);
}

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

/* In play: the minute and the score are the LIVE mark, and only those — the
   two marks a fixture row makes, on a bigger card. */
.recap-score[data-state="live"] .recap-score__status,
.recap-score[data-state="live"] .recap-score__goals {
  color: var(--highlight);
}

.recap-score__minute {
  font-variant-numeric: tabular-nums;
}

.recap-score__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.recap-score__when {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

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

.recap-read {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
}

.recap-read__title {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.recap-read__subject {
  color: var(--text);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.recap-read__teams {
  max-width: 100%;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.recap-read__verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: left;
}

.recap-read__verdict[data-outcome="won"] .icon {
  color: var(--success-strong);
}

.recap-read__verdict[data-outcome="lost"] .icon {
  color: var(--error-strong);
}

.recap-read__verdict-text {
  min-width: 0;
}

/* --- Top performers, one card each ------------------------------------------------------ */

.recap-player {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
}

.recap-player__button {
  display: block;
  width: 100%;
  text-align: left;
}

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

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

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

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

/* The pitch's pill, at the end of a row rather than on an avatar's corner. */
.recap-player__rating {
  position: static;
  flex: none;
  font-size: var(--text-sm);
}

.recap-player__note {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* The match's figures for him: label left, value right, one hairline between rows. */
.recap-player__stats {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.recap-player__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}

.recap-player__stat-label {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.recap-player__stat-value {
  margin: 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.recap-player__link {
  align-self: center;
}

/* --- The full story --------------------------------------------------------------------- */

.recap-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

.recap-more__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent);
}

.recap-more__title {
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.recap-more__sub {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.recap-more .recap-link {
  margin-top: var(--space-2);
}

/* --- Up next ------------------------------------------------------------------------------ */

.up-next-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  text-align: center;
  transition: transform var(--spring-duration) var(--spring);
}

.up-next-card .recap-score__middle {
  width: 100%;
}

.up-next-card__time {
  color: var(--text);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.up-next-card__day {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* --- Top news ------------------------------------------------------------------------------- */

/* The club page's cards and rows, in the slip's frame. */
.catch-up-news .news-featured {
  border: none;
  border-radius: calc(18px * var(--slip-scale));
  box-shadow: none;
}

.catch-up-news .news-list {
  padding-inline: var(--space-4);
  border-radius: calc(18px * var(--slip-scale));
  background: var(--surface);
}

/* --- The fallback line and the empty state -------------------------------------------------- */

.catch-up__fallback {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px calc(var(--space-2) * var(--slip-scale));
  /* Tighter to the feed under it than the slip's section gap: it is a
     caption on the blocks, not a section of its own. */
  margin-bottom: calc(-16px * var(--slip-scale));
  color: var(--text-muted);
  font-size: calc(var(--text-sm) * var(--slip-scale) / 0.75);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

.catch-up__fallback-link {
  color: var(--accent);
  font-weight: var(--weight-bold);
}

.catch-up__empty {
  padding-block: var(--space-6);
}

/* --- The skeleton column ----------------------------------------------------------------------- */

.catch-up-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
}

.catch-up-skeleton__label {
  width: 38%;
}

.catch-up-skeleton__row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  justify-content: center;
}

.catch-up-skeleton__crest {
  width: 44px;
  height: 44px;
}

.catch-up-skeleton__score {
  width: 64px;
  height: 1.6em;
}

.catch-up-skeleton__line {
  width: 30%;
}