/*
 * The fixture page's Player Props tab (FixturePlayerProps.js): SureSCOUT's
 * picks for the fixture — the header and its tally, the view switch and the
 * market rail, then a card per pick.
 *
 * The material is the fixture page's own. Cards are the Statistics tab's
 * `.stat-card` shape; section labels are the slip's `.slip-label`; the market
 * rail is the slip's `.slip-rail` of `.slip-when` radios, borrowed the way
 * the Preview tab's Key Players rail borrows them; the view switch is
 * `Segmented`; the Enter button is the filter sheet's footer button with the
 * slip's check indicator drawn in. Side colour comes off the crests through
 * `applyTeamColours` into `--stat-home` / `--stat-away` and shows only on the
 * portrait rings.
 *
 * What is new is the chance gauge, the cushion bar and the confidence pill,
 * and each is declared once. Confidence takes the status trio — High is the
 * success band, Medium the warning band, Low no colour — because the feed's
 * three bands are a verdict, and the palette already has three for verdicts.
 */

.fixture-props {
  /* The slip's controls at their design size — the Preview tab's own value. */
  --slip-scale: 1;

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-4) var(--space-6);
  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-props[hidden] {
  display: none;
}

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

/* --- Header ---------------------------------------------------------------------- */

.scout-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-inline: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.scout-head__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

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

/* The product name, in the accent with its glyph — an eyebrow over the title. */
.scout-head__product {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
}

.scout-head__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

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

/*
 * How many picks are entered — the flat accent tint, the selected pill's
 * ground, because everything it counts is selected. It pops on change, the
 * filter badge's own move.
 */
.scout-tally {
  flex: none;
  padding: 4px var(--space-3);
  background: var(--accent-tint);
  border-radius: var(--radius-full);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.scout-tally[hidden] {
  display: none;
}

.scout-tally[data-bump="true"] {
  animation: scout-pop var(--spring-duration) var(--easing);
}

@keyframes scout-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}

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

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

.scout-controls__view {
  padding-inline: var(--space-4);
}

.scout-controls__view [hidden] {
  display: none;
}

/*
 * The rail's bleed, taken back to this panel's gutter — the Preview tab's own
 * move. Qualified by the panel: slip-controls.css is linked after this sheet,
 * and its `.slip-rail` rule ties a bare class on specificity and wins on
 * order.
 */
.fixture-props .scout-rail {
  margin-inline: 0;
}

.fixture-props .scout-rail .slip-rail__track {
  padding-inline: var(--space-4);
}

.scout-rail[hidden] {
  display: none;
}

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

/* A grid, so the leaving column and the arriving one share the cell and
   cross-fade in place. */
.scout-stage {
  display: grid;
  padding-inline: var(--space-4);
}

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

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

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

.scout-stage__note {
  padding-inline: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* --- Section --------------------------------------------------------------------- */

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

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

/*
 * The feed's read of the market, with the idea glyph on a sunken disc — the
 * Facts tab's icon-row grammar, at a line's size.
 */
.scout-section__insight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.scout-section__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);
}

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

/* --- Pick card ------------------------------------------------------------------- */

.scout-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);
}

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

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

.scout-pick__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.scout-pick__meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Portrait: the face on a ring in the side's colour, the crest on a disc at
   the corner — the Preview tab's arrangement. A team that is neither side of
   the open fixture (the borrowed sample) takes the hairline. */
.scout-portrait {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 2px var(--border-strong);
}

.scout-portrait[data-side="home"] {
  box-shadow: inset 0 0 0 2px var(--stat-home);
}

.scout-portrait[data-side="away"] {
  box-shadow: inset 0 0 0 2px var(--stat-away);
}

.scout-portrait .logo {
  overflow: hidden;
  background: var(--surface-sunken);
}

.scout-portrait__badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  padding: 2px;
  background: var(--surface);
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px var(--border);
}

.scout-portrait__badge .logo:not(.logo--monogram) {
  background: none;
}

/* Confidence: the band's word and the figure, on the band's ground. */
.scout-confidence {
  flex: none;
  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-semibold);
  white-space: nowrap;
}

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

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

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

/* The call and its chance, side by side. */
.scout-pick__call {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.scout-pick__call-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

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

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

.scout-pick__market {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* The chance ring is ChanceRing.js (chance-ring.css), shared with the Predictions tab. */

/* --- Cushion ----------------------------------------------------------------------- */

/*
 * The figure the call rests on, drawn against its line. The bar is the
 * per-game average; the marker across it is the line. A bar that reaches
 * past the marker is the picture of a comfortable over — and the fill takes
 * the accent only then, the sunken grey otherwise, so the colour agrees with
 * the picture.
 */
.scout-cushion {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.scout-cushion__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.scout-cushion__label {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.scout-cushion__figure {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.scout-cushion__figure strong {
  font-weight: var(--weight-bold);
}

.scout-cushion__per {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.scout-cushion--count {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.scout-cushion__track {
  position: relative;
  height: 8px;
  /* Room above for the line's label, which sits over the bar. */
  margin-top: var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
}

.scout-cushion__fill {
  display: block;
  width: var(--share);
  height: 100%;
  background: var(--border-strong);
  border-radius: var(--radius-full);
  transition: width var(--spring-duration) var(--easing);
}

.scout-cushion[data-clears="true"] .scout-cushion__fill {
  background: var(--accent);
}

/* The line: a 2px tick through the bar, its label riding above. */
.scout-cushion__line {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--at);
  width: 2px;
  background: var(--text);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
}

.scout-cushion__line-label {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
}

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

.scout-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.scout-tags:empty {
  display: none;
}

.scout-tag {
  padding: 4px var(--space-2);
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.scout-tag strong {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

/* The prior-season caveat, on the warning's soft ground: a fact about the numbers. */
.scout-tag--caveat {
  background: var(--warning-soft);
  color: var(--warning-strong);
  font-weight: var(--weight-medium);
}

/* --- Why --------------------------------------------------------------------------- */

.scout-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;
}

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

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

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

.scout-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;
}

/* --- Enter ------------------------------------------------------------------------- */

/*
 * The filter sheet's footer button, with the entered state the tally wears:
 * the flat tint with the accent on it, and the check indicator drawn in.
 */
.scout-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);
}

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

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

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

/* --- Skeleton --------------------------------------------------------------------- */

.scout-pick--skeleton {
  box-shadow: none;
}

.scout-pick--skeleton .scout-pick__text {
  gap: var(--space-2);
}

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

  .scout-tally[data-bump="true"] {
    animation: none;
  }
}