/*
 * Today/Tomorrow prediction-listing page styles (Task 1.18). Loaded only
 * by templates/predictions/prediction_listing.html - built entirely from
 * existing tokens/primitives (.card, .filter-group, .form-select,
 * .u-grid-auto-fit, ...), 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), and this page
 * places no second slip.
 */

.predictions-listing__header {
  max-width: 720px;
  margin-bottom: var(--space-24);
}

.predictions-listing__demo-badge {
  margin-bottom: var(--space-12);
}

.predictions-listing__switcher {
  display: flex;
  flex-wrap: wrap;
  /* Launch polish: each control keeps its own height. With the default `stretch`, the sport group's taller
     "Coming Soon" pill stretched the Today/Tomorrow group from 47 to 59 px on the Today/Tomorrow pages, so it no
     longer matched the date pill beside it. */
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

/* Launch polish: the four-choice view switcher (Today / Tomorrow / History / Accuracy) is ~330 px wide - 49 px more
   than a 320 px phone - so below 480 px it becomes a deliberate 2 x 2 segmented grid (same inset look, rounded
   rather than pill-shaped) instead of widening the page. Every choice stays visible; desktop is unchanged. */
@media (max-width: 479px) {
  .predictions-listing__switcher .filter-group:has(> .filter-option:nth-child(4)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    border-radius: var(--radius-lg);
  }

  .predictions-listing__switcher .filter-group:has(> .filter-option:nth-child(4)) .filter-option {
    justify-content: center;
    padding-inline: var(--space-8);
    border-radius: var(--radius-md);
  }
}

/* Mobile/tablet: stack filter fields rather than squeezing a horizontal
   bar into 320px (Design System V1.0 "collapse, don't shrink"). */
.predictions-listing__filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  padding: var(--card-padding);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-24);
}

@media (min-width: 768px) {
  .predictions-listing__filters {
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
  }

  .predictions-listing__filter-actions {
    grid-column: 1 / -1;
  }
}

.predictions-listing__filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.predictions-listing__count {
  margin-bottom: var(--space-16);
}

.predictions-listing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grid-gap);
}

.predictions-listing__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

.predictions-listing__disclaimer {
  margin-top: var(--space-32);
}

/* A link inside the disclaimer's running text is identified by its underline, never by colour alone (WCAG 1.4.1 -
   in the dark theme the link colour sits too close to the text colour; axe link-in-text-block on Results). */
.predictions-listing__disclaimer a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}