/*!
 * sc-flags.css — REGRA ÚNICA de exibição de bandeira no SC.
 *
 * Por que existe: a mesma bandeira era renderizada de 3 formas diferentes —
 *   · resultados públicos (partial): 20x15 fixo SEM object-fit  → UF (3:2) ESTICADA
 *   · tela do locutor:               26x19 com `object-fit:cover` → UF RECORTADA nas laterais
 *   · overlay do OBS:                caixa + `object-fit:contain` → correto
 * Padronizado no comportamento do overlay (o que estava certo).
 *
 * O QUE É PADRÃO (nunca varia): `contain` + centralizado + raio + não encolher.
 * O QUE VARIA por contexto: só o TAMANHO — via `--sc-flag-w`. Forçar o mesmo pixel no
 * overlay do OBS (que vai ao ar em 1080p) deixaria a bandeira ilegível; o overlay usa `em`
 * para escalar com a tela. Padronizar a REGRA ≠ padronizar o tamanho.
 *
 * Proporções reais em jogo — é por isso que `contain` é obrigatório:
 *   país  → varia (US 2:3 · BR 10:7 · CH 1:1 · NP mais alto que largo)
 *   UF-BR → 3:2 nos 27 SVGs (`viewBox="0 0 300 200"`)
 *   selo neutro AIN/ANA/REF → 4:3 (`viewBox="0 0 40 30"`)
 * `contain` nunca distorce e nunca recorta: a bandeira encaixa na caixa e centraliza.
 *
 * Ver docs/rfc/2026-07-26-eliminar-dependencia-de-cdn.md §9.
 */
.sc-flag {
  --sc-flag-w: 20px;                 /* o único ajuste por contexto */
  width: var(--sc-flag-w);
  height: calc(var(--sc-flag-w) / 1.5);   /* caixa 3:2 — proporção das UFs e da maioria das nacionais */
  object-fit: contain;               /* NÃO distorce (≠ sem object-fit) e NÃO recorta (≠ cover) */
  object-position: center;
  border-radius: 2px;
  flex-shrink: 0;
  vertical-align: middle;
  display: inline-block;
}

/* Selo textual (AIN/ANA/REF sem arquivo, ou UF/país sem SVG): mesma CAIXA da bandeira,
   para a coluna não desalinhar quando cai no fallback. */
.sc-flag-badge {
  --sc-flag-w: 20px;
  width: var(--sc-flag-w);
  height: calc(var(--sc-flag-w) / 1.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #c4c4c4;
  border-radius: 2px;
  color: #4a4a4a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(var(--sc-flag-w) * 0.35);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
  box-sizing: border-box;
}