/* ============================================================================
   Hub Insight — Topbar / Header pills cluster (Layer: components)
   ----------------------------------------------------------------------------
   O "topbar" desta aplicação é um cluster flutuante de pills (.app-header__cluster)
   posicionado absolutamente no canto superior direito. Esta refatoração apenas
   tokeniza os valores de espaçamento, sem alterar o design liquid-glass.

   Resultado: gap e right offset agora escalam com o tamanho de tela via clamp,
   eliminando a necessidade do @media (max-width: 768px) hardcoded para estes
   valores específicos.
   ============================================================================ */

.app-header__cluster {
    /* Espaço entre pills — escala fluido em vez do legado fixo 0.5rem/0.375rem */
    gap: var(--ds-space-3);
    /* Margem direita — escala com o padding global de conteúdo */
    right: var(--ds-content-padding-x);
}

/* NOTA: NÃO sobrescrever #main-content { padding-top } aqui. O legacy define
   padding-top: 4.5rem (72px) que reserva folga garantida para o cluster de pills
   flutuante. Tentei substituir por var(--ds-topbar-h) + var(--ds-space-3), mas em
   viewports < 800px o clamp resolve para valores menores que 72px e o cluster
   sobrepõe o conteúdo. O cluster não tem "altura de topbar" no sentido tradicional
   (são pills independentes posicionados absolute) — usar um token de altura aqui
   é abstração errada. Mantém-se o valor fixo do legacy. */