/* Metrics banner — canonical "aggregate of the active filter" strip.
   Used by team/squad (avg rating/value/age), team/transfers (saldo),
   team/stats (per-metric aggregate). One class, one look.

   Always sits BELOW the filter pills and ABOVE the content.
   Controllers toggle content via `data-{scope}-target="bannerLabel|bannerValue"`
   and flip visibility via the `hidden` attribute when the active filter
   should hide the banner (stats "General" mode). */

@layer components {
  .metrics-banner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--color-surface-sunken);
    border-radius: 10px;
  }

  /* Native `hidden` attribute must win over `display: flex`. Same pattern
     used for `.empty-state[hidden]` — CSS `display` otherwise nukes the
     browser default behaviour of the attribute. */
  .metrics-banner[hidden] {
    display: none;
  }

  .metrics-banner__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .metrics-banner__value {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }
}