/**
 * Tier badges — variante ``--symbol-only`` (compacta sem texto).
 *
 * Renderiza ícone do tier (Material Symbols, ex. ``diamond`` para
 * Patrono) + glifo curto (∞ para tiers ilimitados, ★ para os demais),
 * lado a lado em pílula ovalada — sem o nome textual do tier.
 *
 * Acionada via parâmetro ``symbol_only=True`` no parcial
 * ``billing/components/_tier_badge.html``; o ``.visually-hidden`` (do
 * Bootstrap 5.3 global) mantém o nome do tier acessível para screen
 * readers. Ambos os símbolos são ``aria-hidden`` (decorativos).
 *
 * Centramento: pílula é um flex container com ``align-items: center``
 * (vem do ``.tier-badge`` base). Ícone e símbolo NÃO usam o
 * ``translateY`` do ``.tier-badge__label`` (que é ajuste óptico para
 * cap-height de letras maiúsculas — irrelevante para glifos
 * simétricos como ∞ e ícones Material Symbols, que já desenham no
 * centro do em-square).
 *
 * Tamanhos resultantes (xs / default / md):
 *  - ``--xs``: ~30px largura × 20px altura (header sticky).
 *  - default: ~36px largura × 24px altura (uso geral).
 *  - ``--md``: ~46px largura × 30px altura (cards e dashboards).
 *
 * Cor/animação herdadas via cascata do ``.tier-badge--<color_token>``
 * que coexiste no mesmo span — ex. ``.tier-badge--patrono`` aplica
 * gradient + ``tier-patrono-shine``, e ``--symbol-only`` apenas
 * redefine geometria interna.
 *
 * Extraído de ``tier_badges.css`` em 2026-05-19 (sexta rodada) para
 * manter aquele arquivo abaixo do limite de 200 linhas. Carregado em
 * ``base.html`` logo após ``tier_badges.css``.
 */

.tier-badge--symbol-only {
  gap: .25rem;
  padding: 0 .55rem;
  border-radius: 999px;
}
.tier-badge--symbol-only.tier-badge--xs {
  gap: .2rem;
  padding: 0 .45rem;
}
.tier-badge--symbol-only.tier-badge--md {
  gap: .3rem;
  padding: 0 .7rem;
}

/* Ícone do tier dentro do ``symbol-only`` — força centramento via
   flex sem o offset óptico do ``.tier-badge__label`` (cap-height
   ajustment não se aplica a ícones). */
.tier-badge--symbol-only .tier-badge__icon {
  transform: none;
  line-height: 1;
}

/* Glifo ∞/★ — centralização puramente por flex (sem translateY) já
   que glifos simétricos não têm cap-height a compensar. ``font-weight:
   900`` deixa o ∞ encorpado para ler bem em xs.

   Escopado dentro de ``.tier-badge--symbol-only`` para evitar leak
   caso o span ``.tier-badge__symbol`` venha a ser reutilizado em
   outro contexto no futuro. */
.tier-badge--symbol-only .tier-badge__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 900;
  font-size: 1.05em;
}