/*
 * The fixture page's Predictions tab (FixturePredictions.js): the model
 * switch, the read in the Preview tab's verdict card, the settlement, the
 * insights, one card per market the model calls, and the cards under them
 * that the read rests on.
 *
 * The material is the fixture page's own. The read is `.verdict.preview-read`
 * (fixture-preview.css) and needs nothing here; the comparisons are the
 * Statistics tab's `.stat-row` inside its `.stat-card`; the section labels
 * are the slip's `.slip-label`; the toggles are `Segmented`; Enter is the
 * filter sheet's footer button with the slip's check drawn in; the rings are
 * ChanceRing.js. Side colour comes off the crests through `applyTeamColours`
 * into `--stat-home` / `--stat-away`, the Statistics tab's own pair, and
 * every home-versus-away mark here reads it.
 *
 * What is new is the blend rows, the cover rows, the score tiles, the minute
 * chart and the door into the bet builder, each declared once. The ladders
 * themselves are the bet builder's (bet-builder.css).
 */

.fixture-predictions {
  --slip-scale: 1;

  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-4) var(--space-6);
  padding-inline: var(--space-4);
  opacity: 1;
  transition: opacity var(--duration) var(--easing);
}

/* `[hidden] { display: none }` is a UA rule, and the `display: flex` above
   wins outright without this. Every panel on the page carries the same pair. */
.fixture-predictions[hidden] {
  display: none;
}

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

.fixture-predictions > [hidden],
.pred-controls[hidden],
.pred-verdict[hidden] {
  display: none;
}

/* --- Controls ---------------------------------------------------------------------- */

.pred-controls {
  display: flex;
  flex-direction: column;
}

/* --- Verdict ------------------------------------------------------------------------ */

.pred-verdict {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* --- Stage -------------------------------------------------------------------------- */

/* A grid, so the leaving column and the arriving one share the cell and
   cross-fade in place. */
.pred-stage {
  display: grid;
}

.pred-stage > * {
  grid-area: 1 / 1;
}

.pred-stage__column,
.pred-foundation {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  opacity: 1;
  transition: opacity var(--duration) var(--easing);
}

.pred-stage__column:empty,
.pred-foundation:empty {
  display: none;
}

.pred-stage__column[data-state="enter"],
.pred-stage__column[data-state="leave"] {
  opacity: 0;
}

/* --- Cards ---------------------------------------------------------------------------- */

.pred-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pred-card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.pred-card__league {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.pred-caveat {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.pred-toggle {
  display: flex;
}

.pred-toggle .segmented {
  width: 100%;
}

/* Both sides over a card of comparisons: crest and name at either edge. */
.pred-sides {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pred-sides__side {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.pred-sides__side[data-side="home"] {
  color: var(--stat-home);
}

.pred-sides__side[data-side="away"] {
  color: var(--stat-away);
  text-align: right;
}

/* --- Settlement ------------------------------------------------------------------------ */

.pred-settlement {
  gap: var(--space-3);
}

.pred-settlement__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pred-settlement__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pred-settlement__final {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.pred-settlement__lines {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.pred-settlement__markets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --- Tags -------------------------------------------------------------------------------- */

/*
 * The small facts a pick carries: a tag on the sunken grey, the status trio
 * where a fact is a verdict. "Entered" and "landed" share the accent-tint
 * and the success band respectively — the tally and the win are the two
 * things worth a colour.
 */
.pred-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-2);
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pred-tag[data-tone="muted"] {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

.pred-tag[data-tone="entered"] {
  background: var(--accent-tint);
  color: var(--accent);
}

.pred-tag[data-tone="won"] {
  background: var(--success-soft);
  color: var(--success-strong);
}

.pred-tag[data-tone="lost"] {
  background: var(--error-soft);
  color: var(--error-strong);
}

/* Confidence: the band's word and the figure, on the band's ground. */
.pred-confidence {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.pred-confidence__value {
  font-variant-numeric: tabular-nums;
}

.pred-confidence[data-tier="high"] {
  background: var(--success-soft);
  color: var(--success-strong);
}

.pred-confidence[data-tier="medium"] {
  background: var(--warning-soft);
  color: var(--warning-strong);
}

/* --- Insights ------------------------------------------------------------------------------ */

.pred-insights {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pred-insight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.pred-insight__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  color: var(--accent);
}

/* --- Picks ---------------------------------------------------------------------------------- */

.pred-picks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pred-picks__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pred-pick {
  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);
}

.pred-pick__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pred-pick__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pred-pick__market {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

/* The largest voice on the card — the list's --text-lg, not the scoreline's step. */
.pred-pick__recommendation {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.pred-pick__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.pred-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pred-sources {
  color: var(--text-muted);
  font-size: var(--text-2xs);
}

/* --- Bet builder door and links ------------------------------------------------------------ */

/*
 * The card that opens the sheet: the layers glyph on a sunken disc, the
 * counts, the entered tally in the accent tint, and a chevron. The whole
 * card is the button, so it takes the card shape and the press.
 */
/* Qualified by the card class: fixture-statistics.css is linked after this
   sheet and its `.stat-card` column rule would otherwise win on order. */
.stat-card.pred-builder {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
}

.pred-builder__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--accent-tint);
  border-radius: var(--radius-md);
  color: var(--accent);
}

.pred-builder__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pred-builder__title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.pred-builder__meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.pred-builder .pred-tag[hidden] {
  display: none;
}

.pred-builder__chevron {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

/* The link at the foot of a totals card into the sheet, on that market. */
.pred-lines {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--accent-tint);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-align: left;
}

.pred-lines__chevron {
  display: grid;
  place-items: center;
  margin-left: auto;
}

/* --- Expected, calls, scores ---------------------------------------------------------------- */

.pred-expected {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pred-expected__total {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  text-align: center;
}

.pred-calls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pred-call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: 4px var(--space-2) 4px 4px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.pred-call__chance {
  color: var(--text);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.pred-scores {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pred-scores__label {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.pred-scores__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
}

.pred-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) 0;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

.pred-score[data-lead="true"] {
  background: var(--accent-tint);
}

.pred-score__line {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.pred-score[data-lead="true"] .pred-score__line {
  color: var(--accent);
}

.pred-score__share {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

/* --- Result notes ------------------------------------------------------------------------------ */

.pred-notes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pred-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-2);
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

/* --- Both teams to score ------------------------------------------------------------------------ */

.pred-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.pred-duo__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

.pred-duo__cell[data-picked="true"] {
  background: var(--accent-tint);
}

.pred-duo__label {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.pred-duo__value {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.pred-duo__cell[data-picked="true"] .pred-duo__value {
  color: var(--accent);
}

.pred-duo__odds,
.pred-cover__odds {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}

.pred-blend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pred-blend__label {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.pred-blend__row {
  display: grid;
  grid-template-columns: 96px 1fr 40px;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
}

.pred-blend__name {
  color: var(--text-secondary);
}

.pred-blend__track {
  display: block;
  height: 6px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.pred-blend__fill {
  display: block;
  width: var(--share);
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
}

.pred-blend__value {
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- Handicap ------------------------------------------------------------------------------------ */

.pred-cover {
  display: grid;
  grid-template-columns: auto 1fr 40px auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}

.pred-cover[data-picked="true"] {
  background: var(--accent-tint);
}

.pred-cover__name {
  grid-column: 2;
  font-weight: var(--weight-semibold);
}

.pred-cover__track {
  grid-column: 2;
  display: block;
  height: 6px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.pred-cover__fill {
  display: block;
  width: var(--share);
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
}

.pred-cover > .logo {
  grid-row: 1 / 3;
}

.pred-cover__value {
  grid-column: 3;
  grid-row: 1 / 3;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pred-cover__odds {
  grid-column: 4;
  grid-row: 1 / 3;
}

/* --- Why and Enter -------------------------------------------------------------------------------- */

.pred-pick__why-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-top: 1px solid var(--border);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-align: left;
}

.pred-pick__chevron {
  display: grid;
  place-items: center;
  transition: transform var(--duration) var(--easing);
}

.pred-pick__why-toggle[aria-expanded="true"] .pred-pick__chevron {
  transform: rotate(180deg);
}

.pred-pick__why[hidden] {
  display: none;
}

.pred-pick__insight {
  padding: var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.pred-pick__enter {
  width: 100%;
  height: 44px;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  transition:
    background-color var(--duration) var(--easing),
    color var(--duration) var(--easing),
    box-shadow var(--duration) var(--easing);
}

.pred-pick__enter .slip-ind {
  display: none;
}

.pred-pick__enter[aria-pressed="true"] {
  background: var(--accent-tint);
  box-shadow: none;
  color: var(--accent);
}

.pred-pick__enter[aria-pressed="true"] .slip-ind {
  display: block;
}

/* --- Form pills and facts --------------------------------------------------------------------------- */

.pred-form-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
}

.pred-form {
  display: inline-flex;
  gap: 3px;
}

.pred-form-row > .pred-form:last-child,
.pred-form-row > .pred-form__none:last-child {
  justify-self: end;
}

.pred-form__pill {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

.pred-form__pill[data-result="W"] {
  background: var(--form-win-soft);
  color: var(--form-win);
}

.pred-form__pill[data-result="L"] {
  background: var(--form-loss-soft);
  color: var(--form-loss);
}

.pred-form__none {
  color: var(--text-muted);
  font-size: var(--text-2xs);
}

.pred-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pred-fact {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--border);
}

.pred-fact:last-child {
  border-bottom: 0;
}

.pred-fact__label {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-align: center;
}

.pred-fact__value {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.pred-fact__value--away {
  text-align: right;
}

/* --- Minutes ---------------------------------------------------------------------------------------------- */

/*
 * Goals by minute: a column per band, two bars in it — home and away in
 * their side colours — scaled to the busiest band. The bars rise on reveal.
 */
.pred-minutes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
  padding-top: var(--space-2);
}

.pred-minutes__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.pred-minutes__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 100%;
  height: 64px;
}

.pred-minutes__bar {
  flex: 1;
  height: max(3px, var(--share));
  background: var(--stat-home);
  border-radius: var(--radius-sm) var(--radius-sm) 2px 2px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--spring-duration) var(--spring);
}

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

.pred-minutes[data-revealed="true"] .pred-minutes__bar {
  transform: scaleY(1);
}

.pred-minutes__label {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .pred-minutes__bar,
  .pred-pick__chevron {
    transition: none;
  }
}