/* ============================================================================
   Tactical Match Row — unified linear match-list component
   ----------------------------------------------------------------------------
   Sole match-row component for linear lists across the platform:
     home Live/Today, league Upcoming/Results, team Upcoming/Finished,
     H2H predictions block.
   Replaces fragmented predecessors:
     - .home-match-row + .home-match-list (home.css; promoted here verbatim)
     - .premium-match-row + variants --block/--compact/--emphasis (premium.css)
     - .daily-match-row + .team-upcoming-card.daily-match-row (premium.css)
     - .es-panel .league-match-item .premium-match-row !important block
       (team_detail.css)
     - legacy .match-row / .match-date / .match-teams / .match-status in home.html
   Out of scope (different paradigms, kept as-is):
     .tmc-chip (calendar grid), .lb-card / .lb-final-match / .mc-two-leg-switcher
     (knockout brackets), .data-row in _player_matches.html (a player-stat row,
     not a match row).
   Token-driven only — no hardcoded colors, no 1px solid borders (No-Line Rule).
   Tokens consumed from theme.css: --surface-*, --on-surface*, --tertiary*,
   --secondary*, --error, --te-draw*, --te-radius-*, --te-transition-*,
   --te-label-size, --te-label-weight.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. List container — vertical stack with row striping (No-Line Rule)
   ------------------------------------------------------------------------ */
/* List = recessed tray; rows = raised tiles on top. Every row is a discrete
   "box" via tonal contrast (tray one tier below tile in both themes). No
   stripe needed — uniform tile bg + 4px gap gives clean per-match demarcation. */
.tactical-match-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--surface-container-low);
  border-radius: var(--te-radius-md);
}

/* ---------------------------------------------------------------------------
   2. Row base — 7-col CSS Grid (proven across live/ft/upcoming states)
   ------------------------------------------------------------------------
   Columns: time | status | home-team | center(score/VS) | away-team | right(spacer) | chevron
   Every row variant emits exactly 7 grid items → identical column widths
   across mixed-state lists. */
.tactical-match-row {
  display: grid;
  grid-template-columns: 48px 72px 1fr 72px 1fr 38px 18px;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--te-radius-lg);
  background: var(--surface-container);
  text-decoration: none;
  color: var(--on-surface);
  transition: background var(--te-transition-fast),
              transform var(--te-transition-fast);
}
.tactical-match-row:hover {
  background: var(--surface-container-high);
  color: var(--on-surface);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   3. Modifiers
   ------------------------------------------------------------------------ */
/* Live — gradient bg + 3px inset left bar (No-Line: shadow, not border) */
.tactical-match-row--live {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--error) 14%, transparent) 0%,
    color-mix(in srgb, var(--error) 4%, transparent) 60%,
    transparent 100%
  );
  box-shadow: inset 3px 0 0 var(--error);
  border-radius: var(--te-radius-lg);
}
.tactical-match-row--live:hover {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--error) 20%, transparent) 0%,
    color-mix(in srgb, var(--error) 8%, transparent) 60%,
    transparent 100%
  );
}

/* Goal flash — soft tint sweep over the row, layered so it never disturbs the
   row's own background (live gradient / inset bar). Toggled off on animationend. */
/* Goal flash — the soft full-row tint fade, repeated to stay noticeable for
   ~10s after a goal. animationend fires once, after all loops, so the binder
   strips the class then. */
.tactical-match-row--goal-flash {
  position: relative;
}
.tactical-match-row--goal-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--tertiary-container);
  animation: tactical-match-row-goal-flash 1.5s ease-out 7 forwards;
}
@keyframes tactical-match-row-goal-flash {
  0% { opacity: 0; }
  14% { opacity: 0.9; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tactical-match-row--goal-flash::after {
    animation: tactical-match-row-goal-flash-rm 2.5s ease-out forwards;
  }
  @keyframes tactical-match-row-goal-flash-rm {
    0% { opacity: 0.7; }
    100% { opacity: 0; }
  }
}

/* Scoring team — red-pulse + grow its name/crest so it's clear which side
   scored, and pop the scoreline (the result) in sync. */
.tactical-match-row__team--scored {
  transform-origin: center;
  animation: tactical-match-row-team-scale 1.5s ease-in-out 6;
}
.tactical-match-row__team--scored .tactical-match-row__name {
  animation: tactical-match-row-team-pulse 1.5s ease-in-out 6;
}
.tactical-match-row__team--scored .tactical-crest {
  animation: tactical-match-row-crest-pulse 1.5s ease-in-out 6;
}
.tactical-match-row--goal-flash .tactical-match-row__score {
  transform-origin: center;
  animation: tactical-match-row-score-pulse 1.5s ease-in-out 6;
}
@keyframes tactical-match-row-team-scale {
  50% { transform: scale(1.07); }
}
@keyframes tactical-match-row-team-pulse {
  50% {
    color: var(--tertiary);
    text-shadow: 0 0 9px color-mix(in srgb, var(--tertiary) 55%, transparent);
  }
}
@keyframes tactical-match-row-crest-pulse {
  50% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tertiary) 60%, transparent)); }
}
@keyframes tactical-match-row-score-pulse {
  50% {
    transform: scale(1.2);
    color: var(--tertiary);
    background: color-mix(in srgb, var(--tertiary) 32%, var(--surface-container));
  }
}
@media (prefers-reduced-motion: reduce) {
  .tactical-match-row__team--scored,
  .tactical-match-row__team--scored .tactical-match-row__name,
  .tactical-match-row__team--scored .tactical-crest,
  .tactical-match-row--goal-flash .tactical-match-row__score {
    animation: none;
  }
  .tactical-match-row__team--scored .tactical-match-row__name {
    color: var(--tertiary);
  }
}

/* FT — default all team names to muted/normal; winner is re-emphasized below */
.tactical-match-row--ft .tactical-match-row__name {
  font-weight: 400;
  color: var(--on-surface-variant);
}

/* Compact — denser padding for embedded contexts (H2H block, side-panel lists) */
.tactical-match-row--compact {
  padding: 8px 10px;
  gap: 6px;
}
.tactical-match-row--compact .tactical-match-row__name {
  font-size: 0.8125rem;
}
.tactical-match-row--compact .tactical-match-row__score {
  font-size: 0.875rem;
  padding: 4px 8px;
}

/* Result emphasis (per-element, set by template logic) */
.tactical-match-row__name--winner {
  font-weight: 800 !important;
  color: var(--on-surface) !important;
}
.tactical-match-row__name--loser {
  font-weight: 400;
  color: var(--on-surface-variant);
}

/* Optional row-level result alias modifiers — let parent templates tag a row
   by team-relative result without per-element classes. The home name gets
   winner styling under --result-win, the away name under --result-loss. */
.tactical-match-row--result-win .tactical-match-row__team:not(.tactical-match-row__team--away) .tactical-match-row__name {
  font-weight: 800;
  color: var(--on-surface);
}
.tactical-match-row--result-loss .tactical-match-row__team--away .tactical-match-row__name {
  font-weight: 800;
  color: var(--on-surface);
}

/* Search-dropdown variant — 2-col layout (matchup | meta) for global search results.
   Reuses __team, __name, __center, __score, __vs, __minute. Adds __matchup, __meta,
   __league, __meta-trailer children — generic enough to reuse elsewhere if needed. */
.tactical-match-row--search {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px 12px;
  margin: 2px 0;
}
.tactical-match-row--search:hover,
.tactical-match-row--search.is-active,
.tactical-match-row--search:focus {
  background: color-mix(in srgb, var(--primary-container) 10%, transparent);
  transform: none;
}
.tactical-match-row--search.tactical-match-row--live:hover,
.tactical-match-row--search.tactical-match-row--live.is-active {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--error) 20%, transparent) 0%,
    color-mix(in srgb, var(--error) 8%, transparent) 60%,
    transparent 100%
  );
}
.tactical-match-row--search .tactical-match-row__name {
  font-size: 0.875rem;
}
.tactical-match-row--search .tactical-match-row__score {
  font-size: 0.8rem;
  padding: 3px 8px;
  min-width: 48px;
  text-align: center;
}
.tactical-match-row--search .tactical-match-row__vs {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

.tactical-match-row__matchup {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tactical-match-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}
.tactical-match-row__league {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-container);
  background: color-mix(in srgb, var(--primary-container) 10%, transparent);
  padding: 2px 8px;
  border-radius: var(--te-radius-full);
}
.tactical-match-row__meta-trailer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .tactical-match-row--search {
    grid-template-columns: 1fr;
  }
  .tactical-match-row--search .tactical-match-row__meta {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ---------------------------------------------------------------------------
   4. Time column
   ------------------------------------------------------------------------ */
.tactical-match-row__time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface-variant);
}
.tactical-match-row__date {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--on-surface-variant);
  opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   5. Status badges
   ------------------------------------------------------------------------ */
.tactical-match-row__status {
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--te-radius-full);
  white-space: nowrap;
  width: fit-content;
  justify-self: center;
  display: inline-flex;
  align-items: center;
}
.tactical-match-row__status--live {
  color: var(--on-tertiary-container);
  background: var(--tertiary-container);
  gap: 2px;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
}
.tactical-match-row__minute {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--on-tertiary-container);
  opacity: 0.85;
  line-height: 1;
}
.tactical-match-row__minute--phase {
  opacity: 0.6;
}
.tactical-match-row__status--ft {
  color: var(--on-secondary-container);
  background: var(--secondary-container);
}
.tactical-match-row__status--ns {
  color: var(--on-surface-variant);
  background: var(--surface-container-high);
}
.tactical-match-row__status--pst {
  color: var(--te-draw);
  background: var(--te-draw-bg);
}
.tactical-match-row__status--canc {
  color: var(--on-surface-variant);
  background: var(--surface-container-high);
}
.tactical-match-row__status--abd {
  color: var(--te-loss);
  background: var(--te-loss-bg);
}

/* ---------------------------------------------------------------------------
   6. Team columns
   ------------------------------------------------------------------------ */
.tactical-match-row__team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tactical-match-row__team--away {
  flex-direction: row-reverse;
  text-align: right;
}
.tactical-match-row__name {
  font-size: 0.9375rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tactical-match-row__redcard {
  flex-shrink: 0;
  width: 11px;
  height: 15px;
  border-radius: 2.5px;
  background: var(--error);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--error) 22%, transparent);
  /* Sits on the score-facing side of the name (after it in source order);
     pull tight so it reads as part of the team name. Away column is
     row-reverse, so the name-facing side flips. */
  margin-inline-start: -3px;
}
.tactical-match-row__redcard-n {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
  color: var(--error);
  margin-inline-start: -7px;
}
/* Knockout advancement — green ↑ beside the team that goes through.
   Mirrors the match hero's .mc-hero-winner-arrow (var(--te-win), 900, larger). */
.tactical-match-row__adv-arrow {
  flex-shrink: 0;
  color: var(--te-win);
  font-weight: 900;
  font-size: 1.15em;
  line-height: 1;
  align-self: flex-start;
  margin-inline-start: -3px;
}
.tactical-match-row__team--away .tactical-match-row__redcard,
.tactical-match-row__team--away .tactical-match-row__adv-arrow {
  margin-inline-start: 0;
  margin-inline-end: -3px;
}
.tactical-match-row__team--away .tactical-match-row__redcard-n {
  margin-inline-start: 0;
  margin-inline-end: -7px;
}

/* ---------------------------------------------------------------------------
   7. Center column (holds score box or VS)
   ------------------------------------------------------------------------ */
.tactical-match-row__center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tactical-match-row__vs {
  font-size: var(--te-label-size);
  font-weight: var(--te-label-weight);
  letter-spacing: 0.07em;
  color: var(--on-surface-variant);
}

/* Score box — wraps only the numbers */
.tactical-match-row__score {
  font-size: 0.9375rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--te-radius-md);
  background: color-mix(in srgb, var(--on-surface) 7%, transparent);
  color: var(--on-surface);
  display: inline-block;
}
.tactical-match-row__score--live {
  background: color-mix(in srgb, var(--error) 28%, var(--surface-container));
  color: color-mix(in srgb, var(--error) 85%, #000 15%);
  font-weight: 900;
}
.tactical-match-row__score--ft {
  background: var(--surface-container-high);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.tactical-match-row__score-sep {
  font-weight: 400;
  color: var(--on-surface-variant);
}
.tactical-match-row__goal--winner {
  font-weight: 900;
  color: var(--on-surface);
}
.tactical-match-row__goal--loser {
  font-weight: 400;
  color: var(--on-surface-variant);
}

/* ---------------------------------------------------------------------------
   8. Right column + chevron
   ------------------------------------------------------------------------ */
.tactical-match-row__right {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
  text-align: center;
}
.tactical-match-row__chevron {
  font-size: 0.875rem;
  color: var(--on-surface-variant);
  opacity: 0.5;
  flex-shrink: 0;
}
.tactical-match-row:hover .tactical-match-row__chevron {
  opacity: 1;
}