/* League Stats — chrome del subject switcher (Jugadores / Equipos /
   Competición) + widgets visuales del subject Competición.
   Las filas de Players y Teams reusan `.squad-row*` del bundle global;
   este file solo carga lo propio del tab de liga. */

@layer components {
  /* ══════════════════════════════════════════════════════════════════
     HEADER · subject + metric lado-a-lado
     El subject picker vive en el section; el metric picker vive dentro
     de cada block (scope de Stimulus). Para mantener la paridad visual
     con el tab de team (dos dropdowns en la misma fila), la section se
     marca `position: relative`, el subject header reserva la mitad
     derecha con padding-right, y el `.team-stats-header` del block
     activo se posiciona en absolute ocupando esa mitad.

     Los blocks inactivos quedan `display: none` (via `[hidden]`), así
     que sólo un metric picker visible a la vez — no hay overlap.
     ══════════════════════════════════════════════════════════════════ */

  /* Positioning context for the absolute metric picker. It's the body wrapper
     (below the optional phase toggle), NOT the whole section, so the picker
     anchors under the toggle instead of over it. */
  .league-stats-body {
    position: relative;
  }

  .league-stats-subject-header {
    padding: 0 calc(50% + 4px) 12px 0;
  }

  .league-stats-subject-picker .select-trigger {
    width: 100%;
    overflow: hidden;
  }

  .league-stats-subject-picker .select-trigger > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
  }

  /* Metric picker del block activo — col 2 del subject row. */
  .league-stats-body > [data-league-stats-subject-target="block"] > .team-stats-header {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 4px);
    padding: 0 0 12px;
  }

  /* ══════════════════════════════════════════════════════════════════
     TEAM ROW · misma caja que .squad-row pero el slot de foto lleva
     escudo en vez de retrato.
     ══════════════════════════════════════════════════════════════════ */

  .squad-row--team .squad-row__photo-wrap--team {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: var(--color-bg-subtle, rgb(255 255 255 / 4%));
  }

  .squad-row__team-crest {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* ══════════════════════════════════════════════════════════════════
     COMPETITION · card chrome
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-card {
    background: var(--color-surface);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 14px 14px 16px;
  }

  .comp-stats-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
  }

  .comp-stats-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
  }

  .comp-stats-card__subtitle {
    font-size: 11px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* Season concluded — green accent so "Finalizada" reads as a state,
     not just another counter. */
  .comp-stats-progress__finished {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    color: var(--color-success);
  }

  .comp-stats-progress__finished::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-success);
  }

  /* ══════════════════════════════════════════════════════════════════
     1. PROGRESS · barra jornada actual/total + 3 big numbers
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-progress__bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    overflow: hidden;
    margin-bottom: 14px;
  }

  .comp-stats-progress__bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(
      90deg,
      var(--color-accent) 0%,
      color-mix(in oklch, var(--color-accent) 60%, transparent) 100%
    );
    border-radius: 999px;
    transition: width 0.6s ease;
  }

  /* Split progress (group + KO) — list-of-leaders layout: el segmento
     de grupos jugado en color principal, el resto del grupo gris suave,
     y los KO jugados en un acento secundario para distinguir fase. */
  .comp-stats-progress__bar--split {
    display: flex;
  }

  .comp-stats-progress__seg {
    display: block;
    height: 100%;
    transition: width 0.6s ease;
  }

  .comp-stats-progress__seg--group {
    background: var(--color-accent);
  }

  .comp-stats-progress__seg--group-rest {
    background: rgb(255 255 255 / 8%);
  }

  .comp-stats-progress__seg--knockout {
    background: linear-gradient(
      90deg,
      color-mix(in oklch, var(--color-accent) 75%, var(--color-yellow-card, #f5b400)) 0%,
      var(--color-yellow-card, #f5b400) 100%
    );
  }

  .comp-stats-progress__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 4px 0 14px;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .comp-stats-progress__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
  }

  .comp-stats-progress__legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .comp-stats-progress__legend-item--group .comp-stats-progress__legend-dot {
    background: var(--color-accent);
  }

  .comp-stats-progress__legend-item--knockout .comp-stats-progress__legend-dot {
    background: var(--color-yellow-card, #f5b400);
  }

  .comp-stats-progress__legend-count {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-bignums {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .comp-stats-bignum {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
  }

  .comp-stats-bignum + .comp-stats-bignum {
    border-left: 1px solid var(--color-border);
  }

  .comp-stats-bignum__value {
    font-family: Oswald, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-bignum__label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: center;
  }

  /* ══════════════════════════════════════════════════════════════════
     2. OUTCOMES · stacked bar (home/draw/away)
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-outcomes__bar {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: rgb(255 255 255 / 4%);
    margin-bottom: 10px;
  }

  .comp-stats-outcomes__seg {
    display: block;
    height: 100%;
    transition: width 0.6s ease;
  }

  /* Paleta local/empate/visitante — alineada con `.h2h-bar.*`
     (match-detail H2H) para que todas las barras de resultados
     hablen el mismo lenguaje visual: home = accent (verde),
     draw = color-draw (gris), away = accent-secondary (cyan). */
  .comp-stats-outcomes__seg--home {
    background: var(--color-accent);
  }

  .comp-stats-outcomes__seg--draw {
    background: var(--color-draw);
  }

  .comp-stats-outcomes__seg--away {
    background: var(--color-accent-secondary);
  }

  .comp-stats-outcomes__legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .comp-stats-outcome {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .comp-stats-outcome__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .comp-stats-outcome--home .comp-stats-outcome__dot {
    background: var(--color-accent);
  }

  .comp-stats-outcome--draw .comp-stats-outcome__dot {
    background: var(--color-draw);
  }

  .comp-stats-outcome--away .comp-stats-outcome__dot {
    background: var(--color-accent-secondary);
  }

  .comp-stats-outcome__label {
    color: var(--color-text-muted);
  }

  .comp-stats-outcome__pct {
    color: var(--color-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════════════════════════════
     3. PODIUMS · attack / defense top 3
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-podium-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .comp-stats-podium {
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    padding: 10px 10px 12px;
  }

  .comp-stats-podium__title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .comp-stats-podium__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .comp-stats-podium__row {
    position: relative;
    display: grid;
    grid-template-columns: 18px 22px 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 13px;
  }

  /* Stretched-link pattern — invisible anchor covers the whole grid row
     so the podium entry navigates to the team page without restructuring
     the existing columns. */
  .comp-stats-podium__stretched {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    z-index: 1;
  }

  .comp-stats-podium__stretched:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .comp-stats-podium__rank {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-podium__row[data-rank="1"] .comp-stats-podium__rank {
    color: var(--color-accent, #f1c40f);
  }

  .comp-stats-podium__logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  .comp-stats-podium__name {
    color: var(--color-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .comp-stats-podium__value {
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════════════════════════════
     4. DISTRIBUTION · histograma goles/partido
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-distribution__grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .comp-stats-distribution__row {
    display: grid;
    grid-template-columns: 36px 1fr 32px 42px;
    align-items: center;
    gap: 10px;
    font-size: 12px;
  }

  .comp-stats-distribution__bucket {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-distribution__bar-track {
    position: relative;
    height: 10px;
    background: rgb(255 255 255 / 5%);
    border-radius: 999px;
    overflow: hidden;
  }

  .comp-stats-distribution__bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(
      90deg,
      color-mix(in oklch, var(--color-accent) 90%, #000 10%) 0%,
      color-mix(in oklch, var(--color-accent) 30%, transparent 70%) 100%
    );
    border-radius: 999px;
    transition: width 0.6s ease;
  }

  .comp-stats-distribution__val {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-distribution__pct {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════════════════════════════
     5. DISCIPLINE · tarjetas amarillas / rojas
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-discipline__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .comp-stats-discipline__cell {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
  }

  .comp-stats-discipline__card {
    width: 16px;
    height: 22px;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
  }

  .comp-stats-discipline__cell--yellow .comp-stats-discipline__card {
    background: #f1c40f;
  }

  .comp-stats-discipline__cell--red .comp-stats-discipline__card {
    background: #e74c3c;
  }

  .comp-stats-discipline__data {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .comp-stats-discipline__value {
    font-family: Oswald, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-discipline__label {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .comp-stats-discipline__avg {
    font-size: 11px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════════════════════════════
     GOLES POR MINUTO · histograma vertical 6 buckets (+ET opcional)
     + pie con % por parte. Grid auto-ajusta a 7 columnas si la
     competición tiene prórroga.
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-minutes__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    align-items: end;
    min-height: 140px;
    padding: 4px 0 6px;
  }

  .comp-stats-minutes__grid--with-et {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .comp-stats-minutes__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  .comp-stats-minutes__bar-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100px;
    background: rgb(255 255 255 / 3%);
    border-radius: 6px;
    overflow: hidden;
  }

  .comp-stats-minutes__bar {
    display: block;
    width: 70%;
    border-radius: 6px 6px 0 0;
    transition: height 0.6s ease;
  }

  .comp-stats-minutes__col--first .comp-stats-minutes__bar {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--color-accent) 80%, transparent) 0%,
      color-mix(in oklch, var(--color-accent) 40%, transparent) 100%
    );
  }

  .comp-stats-minutes__col--second .comp-stats-minutes__bar {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--color-accent-secondary) 80%, transparent) 0%,
      color-mix(in oklch, var(--color-accent-secondary) 40%, transparent) 100%
    );
  }

  .comp-stats-minutes__col--extra .comp-stats-minutes__bar {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--color-draw) 90%, transparent) 0%,
      color-mix(in oklch, var(--color-draw) 50%, transparent) 100%
    );
  }

  .comp-stats-minutes__pct {
    font-family: Oswald, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .comp-stats-minutes__bucket {
    font-size: 10px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1;
  }

  .comp-stats-minutes__halves {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }

  .comp-stats-minutes__half {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .comp-stats-minutes__half-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .comp-stats-minutes__half--first .comp-stats-minutes__half-dot {
    background: var(--color-accent);
  }

  .comp-stats-minutes__half--second .comp-stats-minutes__half-dot {
    background: var(--color-accent-secondary);
  }

  .comp-stats-minutes__half--extra .comp-stats-minutes__half-dot {
    background: var(--color-draw);
  }

  .comp-stats-minutes__half-label {
    color: var(--color-text-muted);
  }

  .comp-stats-minutes__half-pct {
    color: var(--color-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-minutes__half-count {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════════════════════════════
     PENALTIES · hero + breakdown + conversion rate
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-penalties__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 12px;
  }

  .comp-stats-penalties__awarded-value {
    font-family: Oswald, sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-penalties__awarded-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .comp-stats-penalties__breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 12px;
  }

  .comp-stats-penalty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    position: relative;
  }

  .comp-stats-penalty + .comp-stats-penalty {
    border-left: 1px solid var(--color-border);
  }

  .comp-stats-penalty__value {
    font-family: Oswald, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-penalty--scored .comp-stats-penalty__value {
    color: var(--color-success, #2ecc71);
  }

  .comp-stats-penalty--saved .comp-stats-penalty__value {
    color: var(--color-accent, #3498db);
  }

  .comp-stats-penalty--missed .comp-stats-penalty__value {
    color: var(--color-warning, #f1c40f);
  }

  .comp-stats-penalty__label {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .comp-stats-penalties__conversion {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }

  .comp-stats-penalties__conversion-label {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .comp-stats-penalties__conversion-track {
    height: 8px;
    background: rgb(255 255 255 / 5%);
    border-radius: 999px;
    overflow: hidden;
  }

  .comp-stats-penalties__conversion-fill {
    display: block;
    height: 100%;
    background: linear-gradient(
      90deg,
      var(--color-success, #2ecc71) 0%,
      color-mix(in oklch, var(--color-success, #2ecc71) 60%, transparent) 100%
    );
    border-radius: 999px;
    transition: width 0.6s ease;
  }

  .comp-stats-penalties__conversion-pct {
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════════════════════════════
     xG · hero 3 métricas + 2 podios (clínicos / ineficientes)
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-xg__hero {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 14px;
  }

  .comp-stats-xg__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
  }

  .comp-stats-xg__metric + .comp-stats-xg__metric {
    border-left: 1px solid var(--color-border);
  }

  .comp-stats-xg__metric-value {
    font-family: Oswald, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-xg__metric--xg .comp-stats-xg__metric-value {
    color: var(--color-accent, #3498db);
  }

  .comp-stats-xg__metric--pos .comp-stats-xg__metric-value {
    color: var(--color-success, #2ecc71);
  }

  .comp-stats-xg__metric--neg .comp-stats-xg__metric-value {
    color: var(--color-danger, #e74c3c);
  }

  .comp-stats-xg__metric-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: center;
  }

  .comp-stats-podium--clinical .comp-stats-podium__row[data-rank="1"] .comp-stats-podium__value {
    color: var(--color-success, #2ecc71);
  }

  .comp-stats-podium--wasteful .comp-stats-podium__row[data-rank="1"] .comp-stats-podium__value {
    color: var(--color-danger, #e74c3c);
  }

  /* ══════════════════════════════════════════════════════════════════
     Animations respect user prefs
     ══════════════════════════════════════════════════════════════════ */

  @media (prefers-reduced-motion: reduce) {
    .comp-stats-progress__bar-fill,
    .comp-stats-outcomes__seg,
    .comp-stats-distribution__bar-fill,
    .comp-stats-minutes__bar,
    .comp-stats-penalties__conversion-fill {
      transition: none;
    }
  }

  /* ══════════════════════════════════════════════════════════════════
     AJAX-driven players grid (league-stats-pills controller)
     21 metric cards rendered as skeletons; rows are swapped in by the
     Stimulus controller after each (position, metric, limit) fetch.
     ══════════════════════════════════════════════════════════════════ */

  .league-stats-pills-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* `display: flex` overrides the bare `hidden` attribute, so the
     controller's `generalMode.hidden = true` (single-metric mode) left the
     21-card grid visible underneath the focused panel. Honour `hidden`
     explicitly so picking a metric actually swaps the view. */
  .league-stats-pills-grid[hidden] {
    display: none;
  }

  /* Subdued tint while a card is in flight — keeps the layout intact
     so the row swap doesn't reflow the whole grid. */
  .stats-card.is-loading {
    opacity: 0.85;
  }

  .stats-card.is-loading .skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
  }

  /* ══════════════════════════════════════════════════════════════════
     LIVE OVERLAY · "EN VIVO" pill + "+N" delta on player ranking rows.
     The row's value already folds in the live delta (the wire projects
     it); these are just the breakdown markers. The pill stacks below the
     meta line like the squad injury/birthday lines, in the same
     `--color-live` accent the standings-mini live state uses.
     ══════════════════════════════════════════════════════════════════ */
  .squad-row__live {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-live);
  }

  .squad-row__live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-live);
    flex-shrink: 0;
    animation: squad-row-live-pulse 1.6s ease-in-out infinite;
  }

  @keyframes squad-row-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  @media (prefers-reduced-motion: reduce) {
    .squad-row__live-dot {
      animation: none;
    }
  }

  .squad-row__live-delta {
    margin-left: 2px;
    font-size: 10px;
    font-weight: 700;
    vertical-align: super;
    color: var(--color-live);
  }

  .squad-row__metric--live {
    color: var(--color-live);
  }
}