/*
 * CHAG SPORTS sports UI component library (Task 1.15): PredictionCard,
 * FeaturedPredictionCard, MatchHeader, H2HPreview, ResultCard, LeagueCard,
 * TeamForm, and the crest/badge primitives they share. Builds entirely on
 * tokens.css + the generic foundation classes from components.css
 * (.card, .badge, .pill, .confidence-bar, .probability-bar, .form-strip/
 * .form-pip, .metric-row, .pick-panel) - no new colors, no new spacing
 * scale, nothing that isn't already an approved design-system token.
 */

/* ============ Crest / logo badge (teams and leagues) ============
   Falls back to a text initial when no image is supplied or the image
   fails to load - never a broken-image icon or empty space. */
.crest-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.crest-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.crest-badge__initial {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-control);
  line-height: 1;
}

.crest-badge--sm {
  width: 1.75rem;
  height: 1.75rem;
}

.crest-badge--lg {
  width: 3.5rem;
  height: 3.5rem;
}

.crest-badge--lg .crest-badge__initial {
  font-size: var(--font-size-h4);
}

/* Competition badges fall back to two initials ("PL"); in the small badge they step down to the metadata size so
   even a wide pair ("MW") stays inside the 28 px circle (launch polish). */
.crest-badge--competition.crest-badge--sm .crest-badge__initial {
  font-size: var(--font-size-metadata);
}

/* ============ Team form (standalone use) ============
   .form-strip/.form-pip already exist in components.css (Task 1.14) -
   this just adds a size variant for denser contexts (e.g. inside a
   compact prediction card). */
.form-strip--sm .form-pip {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.5625rem;
}

/* ============ Match status badge ============
   Reuses .badge's box model; color is applied per data-status so callers
   never hand-pick a badge-* variant per status name. */
.match-status[data-status="scheduled"] {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.match-status[data-status="live"] {
  background: var(--color-error);
  color: var(--color-error-contrast);
  border-color: transparent;
}

.match-status[data-status="finished"] {
  background: var(--color-muted);
  color: var(--color-muted-contrast);
  border-color: transparent;
}

.match-status[data-status="postponed"],
.match-status[data-status="cancelled"] {
  background: var(--color-warning);
  color: var(--color-warning-contrast);
  border-color: transparent;
}

/* ============ Match header ============ */
.match-header__league {
  text-align: center;
  margin-bottom: var(--space-16);
}

.match-header__teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.match-header__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  flex: 1;
  min-width: 0;
  text-align: center;
}

/* Task 1.72A V2 (Match Detail): never truncate a team name with an
   ellipsis - the same "full name must always be readable" rule already
   applied to `.fixture-row__team-name`/`.league-card__name`. Wraps
   onto a second line instead; `.match-header__team`'s existing
   `min-width: 0` (above) is what actually lets this element shrink
   below its own text's min-content width in the first place. Bumped
   from `--font-size-body-sm` to `--font-size-h4` for identity-header
   visual weight consistent with League/Team Detail's own header
   treatment (this is a page's primary identity, not a secondary
   metadata line). */
.match-header__team-name {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  overflow-wrap: break-word;
  max-width: 100%;
}

.match-header__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
  padding-inline: var(--space-12);
}

/* ============ Prediction Card ============ */
.prediction-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--card-padding);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.prediction-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .prediction-card:hover {
    transform: none;
  }
}

.prediction-card__context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.prediction-card > .matchup-row {
  margin-bottom: var(--space-16);
}

.prediction-card > .prediction-stats {
  margin-top: var(--space-12);
}

.prediction-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: var(--space-16);
  flex-wrap: wrap;
}

/* The match status stays on the right when no source badge precedes it (ML predictions show none). */
.prediction-card__footer .match-status {
  margin-left: auto;
}

.prediction-card__actions {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-16);
  flex-wrap: wrap;
}

.prediction-card__actions .btn {
  flex: 1;
  min-width: 8rem;
}

/* Featured variant: same architecture, reused wholesale, plus a scarce
   accent highlight (Chag Yellow - "confidence, selection, key highlight"
   per tokens.css/CLAUDE.md) - not a different color system. */
.prediction-card--featured {
  border-color: var(--color-accent);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}

/* ============ Matchup row (prediction cards, the upcoming catalogue) ============
   Hallmark · component: team row · theme: Chag Sports tokens · states: default · hover/focus (team links use the
   shared link styles) · disabled/loading/error/success n/a (static text) · contrast: pass (40-41) · mobile: pass
   (34, 49, 50) at 320/360/375/414 px, both themes · pre-emit critique: P4 H4 E5 S5 R5 (variety n/a: component)
   templates/components/sports/matchup_row.html: home | vs | away, both teams sharing the row equally, away
   mirrored. The row is a size container ("team-row"):
   - Desktop and tablet (from 768 px): always the clubs' full canonical names. A row of 26rem or more puts the crest
     beside the name; a narrower card (the homepage board) puts the crest above the name, centred, at 14 px, wrapping
     inside its own column - the layout those cards had before the launch polish.
   - Phone (under 768 px), row under 26rem: ONE line. Responsive type and spacing first - the 13 px semibold of the
     Fixtures/Results rows on a phone, a 24 px crest, 4 px gaps - then the human-readable compact label of the same
     name (team.narrow_label, apps.core.team_names: "M'gladbach vs Frankfurt"); under 18rem (a 320-360 px phone)
     12 px and team.tight_label. An ellipsis is the final fallback.
   The full name is never removed: it stays in the document (visually hidden, not display:none) for assistive
   technology, and is the tooltip. */
.matchup-row {
  container: team-row / inline-size;
  min-width: 0;
}

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

.matchup-row__team {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.matchup-row__team--away {
  flex-direction: row-reverse;
  text-align: right;
}

.matchup-row__vs {
  font-size: var(--font-size-metadata);
  font-weight: var(--font-weight-black);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

.team-name {
  position: relative;
  min-width: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-text-primary);
  overflow-wrap: break-word;
}

.team-name__narrow,
.team-name__tight {
  display: none;
}

@media (min-width: 768px) {
  @container team-row (max-width: 26rem) {
    .matchup-row__inner {
      align-items: start;
    }

    .matchup-row__team,
    .matchup-row__team--away {
      flex-direction: column;
      text-align: center;
    }

    .matchup-row .team-name {
      max-width: 100%;
      font-size: var(--font-size-body-sm);
    }

    .matchup-row__vs {
      align-self: center;
    }
  }
}

@media (max-width: 767px) {
  @container team-row (max-width: 26rem) {
    .matchup-row__inner,
    .matchup-row__team {
      gap: var(--space-4);
    }

    .matchup-row__team .crest-badge {
      width: 1.5rem;
      height: 1.5rem;
    }

    .matchup-row__team .crest-badge__initial {
      font-size: var(--font-size-metadata);
    }

    .matchup-row .team-name {
      font-size: var(--font-size-control);
      font-weight: var(--font-weight-semibold);
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .team-name--narrow > .team-name__full {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .team-name--narrow > .team-name__narrow {
      display: inline;
    }
  }

  @container team-row (max-width: 18rem) {
    .matchup-row .team-name {
      font-size: 0.75rem;
    }

    .team-name--tight > .team-name__full {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .team-name--tight > .team-name__narrow {
      display: none;
    }

    .team-name--tight > .team-name__tight {
      display: inline;
    }
  }
}

/* ============ Prediction stats (the compact numbers of a readable prediction) ============
   templates/components/sports/prediction_stats.html - probability, confidence (level + value) and odds only when
   real, as one short row of text values. Replaces the probability-breakdown bars and the confidence gauge on the
   full prediction card and Match Detail (launch polish). <dl>/<dt>/<dd> with every browser default reset. */
.prediction-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-24);
  margin: 0;
}

.prediction-stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.prediction-stats__label {
  margin: 0;
  font-size: var(--font-size-metadata);
  font-weight: var(--font-weight-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.prediction-stats__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-text-primary);
}

.prediction-stats__meta {
  font-size: var(--font-size-metadata);
  font-weight: var(--font-weight-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ============ Prediction analysis (written analysis) ============
   templates/components/sports/prediction_analysis.html - Match Detail's Analysis section and the Premium
   dashboard card. Editorial reading measure, the summary set off by a light-blue analytical rule (Light Blue is the
   brand's analysis colour), key factors as a plain marked list. Never shown when nothing is written. */
.prediction-analysis {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 68ch;
}

.prediction-analysis__summary {
  padding-left: var(--space-16);
  border-left: 3px solid var(--color-intelligence);
}

.prediction-analysis__summary p {
  margin: 0 0 var(--space-12);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
}

.prediction-analysis__summary p:last-child {
  margin-bottom: 0;
}

.prediction-analysis__factors-heading,
.prediction-analysis__factors-label {
  margin: 0;
}

.prediction-analysis__factors-label {
  color: var(--color-text-secondary);
}

.prediction-analysis__factors {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.prediction-analysis__factors li {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
}

.prediction-analysis__factors li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  transform: translateY(-0.1em);
}

@media (min-width: 768px) {
  .prediction-analysis:not(.prediction-analysis--compact) .prediction-analysis__factors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.prediction-analysis--compact {
  gap: var(--space-12);
}

.prediction-analysis--compact .prediction-analysis__summary p {
  font-size: var(--font-size-body-sm);
}

/* ============ Probability breakdown ============
   A dedicated row layout (label, tabular percentage, bar) - distinct from
   the generic 2-child .metric-row in components.css, which doesn't fit
   this row's 3 parts. */
.probability-breakdown__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-8);
}

.probability-breakdown__label {
  flex: 0 0 4.5rem;
  font-size: var(--font-size-body-sm);
  color: var(--color-text-secondary);
}

/* The value sets its own theme-aware text colour rather than inheriting:
   inside a Bootstrap `.card` (Match Detail's primary prediction) it would
   inherit Bootstrap's fixed, near-black `--bs-body-color`, which never
   follows [data-theme="dark"] and was near-invisible on the dark card. */
.probability-breakdown__value {
  flex: 0 0 3rem;
  text-align: right;
  font-size: var(--font-size-body-sm);
  color: var(--color-text-primary);
}

.probability-breakdown__row .probability-bar {
  flex: 1;
}

/* ============ H2H Preview ============ */
.h2h-preview__stats {
  margin-bottom: var(--space-12);
}

.h2h-preview__meetings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.h2h-preview__meeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-secondary);
}

/* ============ Result Card ============ */
.result-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.result-card__score {
  text-align: center;
  margin-bottom: var(--space-16);
}

.result-card__score-teams {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

/* ============ League Card ============ */
.league-card {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--card-padding);
  color: inherit;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.league-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .league-card:hover {
    transform: none;
  }
}

.league-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  min-width: 0;
  /* Matches the crest's own default size (crest-badge's un-suffixed
     size is 2.5rem) - when league_card.html renders the name alone
     (no country set, the common case today), justify-content:center
     keeps that single line vertically centered against the crest
     rather than sitting at the top of a taller phantom block. When a
     real .league-card__meta line does render, the two lines are
     centered together as a pair, and this same min-height floor still
     keeps every card in a grid row starting from the same baseline
     height, so one card gaining real metadata later doesn't leave its
     siblings with visibly wasted blank space. */
  min-height: 2.5rem;
  flex: 1;
}

/* Task 1.72A Phase 1 consolidation review: never truncate a league name
   with an ellipsis (the same "full name must always be readable" rule
   already applied to `.fixture-row__team-name` above) - confirmed
   pre-existing on `master` (the ellipsis rule itself predates this
   redesign), reproduced at the 768px tablet breakpoint where the card
   grid narrows to three columns ("Premier League"/"UEFA Champions
   League" both genuinely clipped, `scrollWidth > clientWidth`). Wraps
   onto a second line instead - `.league-card__body`'s existing
   `min-width: 0`/`flex: 1` combination already sizes this element's
   column-flex parent correctly, so no further layout change is needed
   here beyond removing the truncation itself. */
.league-card__name {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  overflow-wrap: break-word;
}

.league-card__meta {
  font-size: var(--font-size-body-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0;
}

/* ============ Fixture row (Task 1.20) ============
   Shared by the Football landing page and League Detail
   (templates/components/sports/fixture_row.html) - kept here rather than
   a page CSS file so fixture styling exists in exactly one place. */
.fixture-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
}

.fixture-row__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 90px;
}

.fixture-row__teams {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: 1;
  min-width: 0;
}

.fixture-row__team {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: 1;
  min-width: 0;
}

/* Task 1.72A: never truncate a team name with an ellipsis (user-
   reported - the full name must always be readable). A long name wraps
   onto a second line instead (plain word-wrap - `overflow-wrap` is only
   a safety net for a single unbreakable token, e.g. a very long
   hyphen-free name with no spaces at all); the `max-width: 767px` rule
   below additionally steps the font size down one notch in the
   narrower/tablet range, where two team names sharing one horizontal
   row are tightest, so wrapping is only actually needed for the
   longest names.

   `min-width: 0` here is load-bearing, not decorative (user-reported
   overlap bug): as a flex item, this element's default `min-width` is
   `auto`, which refuses to shrink below its own min-content size - for
   wrappable text, that's the width of its single LONGEST WORD (e.g.
   "Manchester" in "Manchester United", ~72px), regardless of how much
   space `.fixture-row__team` above actually allocates to it once the
   crest badge and gap are subtracted. At a viewport width where that
   allocation is narrower than the longest word (a real, reproduced case
   around 600-650px), the name element rendered WIDER than its own flex
   container and visibly overlapped the adjacent .fixture-row__center
   score/status column - `.fixture-row__team` already has its own
   `min-width: 0`, but that only lets IT shrink relative to its OWN
   siblings; it does not cascade down to override this element's
   independent default. Setting it here removes that floor entirely, so
   the name always wraps (or, at the very extreme, breaks mid-word via
   `overflow-wrap`) within its actually-available space instead of ever
   spilling into a neighboring column. */
.fixture-row__team-name {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.25;
  overflow-wrap: break-word;
  min-width: 0;
}

.fixture-row__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  min-width: 64px;
}

.fixture-row__action {
  flex-shrink: 0;
}

/* The row stays horizontal (two team names sharing one line alongside
   the center score/status column) all the way down to 480px - this is
   the tightest zone for a long team name, tighter than mobile itself
   once the row below switches to a full-width stacked layout. */
@media (max-width: 767px) {
  .fixture-row__team-name {
    font-size: var(--font-size-control);
  }
}

/* `nowrap` matters: a WRAPPING column flex container sizes each line to its widest child's natural width, not the
   container's, so a long team name pushed the meta/teams rows past the viewport (75 px at 320 px - launch polish). */
@media (max-width: 480px) {
  .fixture-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .fixture-row__action {
    align-self: flex-start;
  }
}

/* ============ Compact prediction row (Match Detail alternatives + the upcoming catalogue) ============ */
.compact-prediction-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
}

.compact-prediction-row__stats {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.compact-prediction-row__odds {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.compact-prediction-row__info {
  min-width: 0;
}

/* Muted captions (market, probability) sit on the row's surface: the secondary text colour keeps them at WCAG AA in
   both themes - the same treatment .pick-panel .text-caption already uses on the prediction card. */
.compact-prediction-row .text-caption,
.compact-prediction-row .text-metadata {
  color: var(--color-text-secondary);
}

.compact-prediction-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}