/*
 * Match Detail / Analysis page styles (Task 1.19). Loaded only by
 * templates/fixtures/match_detail.html - built entirely from existing
 * tokens/primitives (.card, .surface-analytical, .badge, .metric-row,
 * .form-strip, confidence tokens, ...), no new colors. The Prediction
 * Slip sidecar needs no layout here: static/css/responsive.css already
 * reserves `.site-main` space for it at >=1024px (Task 1.16/1.17/1.18),
 * and this page places no second slip.
 */

.match-detail__section {
  padding-block: var(--space-32);
  border-bottom: 1px solid var(--color-border);
}

.match-detail__section:last-of-type {
  border-bottom: none;
}

.match-detail__section-title {
  margin-bottom: var(--space-16);
}

/* ============ Primary prediction ============
   Launch polish: compact - eyebrow, pick, market and source, then the shared prediction-stats row
   (sports-components.css), the action, and the odds disclaimer only with real odds. */
.match-primary-prediction {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.match-primary-prediction__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.match-primary-prediction__head .match-primary-prediction__eyebrow {
  margin: 0;
}

.match-primary-prediction__market {
  margin: 0;
  color: var(--color-text-secondary);
}

/* Task 1.72 Group 6 repair: `--color-intelligence` (brand light blue) is
   only readable against a dark/navy surface (see components.css's own
   `.surface-analytical .text-metadata` override, which exists for
   exactly this reason) - `.match-primary-prediction` sits on the plain
   `.card` surface (white in light theme), where light blue on white
   measured ~1.54:1 (axe-core, Task 1.72 Group 5). `--color-text-secondary`
   (brand slate - "secondary text" per Design System V1.0 §03) is an
   existing token that reaches >=4.5:1 in both themes against this
   surface (~8.7:1 light, ~7.6:1 dark) - a color swap only, no new token,
   no redesign of the card. */
.match-primary-prediction__eyebrow {
  color: var(--color-text-secondary);
}

.match-primary-prediction__pick {
  margin: 0;
}

.match-primary-prediction__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}

.match-detail__odds-disclaimer {
  margin: 0;
}

/* ============ Team form ============ */
.match-detail__form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

@media (min-width: 768px) {
  .match-detail__form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.match-detail__form-team {
  padding: var(--card-padding);
}

.match-detail__form-team-name {
  margin-bottom: var(--space-12);
}

/* ============ Head-to-head ============ */
.h2h-results__summary {
  margin-bottom: var(--space-8);
}

.h2h-results__stats {
  margin-bottom: var(--space-24);
}

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

.h2h-results__meeting {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-16);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
}

@media (min-width: 768px) {
  .h2h-results__meeting {
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: var(--space-16);
  }
}

.h2h-results__scoreline {
  font-weight: var(--font-weight-semibold);
}

.h2h-results__outcome {
  color: var(--color-text-secondary);
}

/* ============ Statistics comparison table ============
   Launch polish: three fixed columns that fit a 320 px phone with no sideways scroll - the statistic label takes
   the first half (a third on a phone, so the team columns have room) and wraps, the two values share the rest.
   The wrapper is the "team-row" size container, so on a phone the team headings show the same human-readable
   compact label as the prediction cards ("M'gladbach", sports-components.css `.team-name`), every heading at 12 px;
   desktop keeps the full names. Headings wrap between words; only a single word too long for its column ends in an
   ellipsis.
   The full names stay in the document for assistive technology. */
.match-detail__comparison {
  container: team-row / inline-size;
}

.table-wrapper .match-detail__comparison-table {
  min-width: 0;
}

.match-detail__comparison-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.match-detail__comparison-table th,
.match-detail__comparison-table td {
  padding: var(--space-12) var(--space-8);
  text-align: right;
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: break-word;
}

.match-detail__comparison-table th:first-child,
.match-detail__comparison-table td:first-child {
  width: 50%;
  text-align: left;
}

.match-detail__comparison-table .team-name {
  display: block;
  font: inherit;
  color: inherit;
  white-space: normal;
  overflow-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 767px) {
  .match-detail__comparison-table th:first-child,
  .match-detail__comparison-table td:first-child {
    width: 34%;
  }

  .match-detail__comparison-table thead th {
    font-size: 0.75rem;
    line-height: 1.25;
  }
}

@media (min-width: 480px) {
  .match-detail__comparison-table th,
  .match-detail__comparison-table td {
    padding-inline: var(--space-16);
  }
}

/* ============ Alternative predictions ============ */
.match-detail__alternatives {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* .compact-prediction-row lives in sports-components.css (shared by the upcoming catalogue). */

/* ============ Disclaimer ============ */
.match-detail__disclaimer {
  color: var(--color-text-muted);
}