/* Dica ao passar o mouse — o texto vem do atributo, sem biblioteca e sem
   controller. Global por seletor de atributo porque não é de nenhuma tela: a
   marca do gráfico, o dia do calendário e o recado da fila usam a mesma peça.

   Abre no hover e no :focus-visible — nunca no :focus. A diferença é a regra:
   :focus-visible não casa com clique de mouse, então o balão não fica preso
   aberto depois que o ponteiro sai; quem chega de Tab continua vendo. Nas
   marcas de gráfico nada muda — <span> não recebe foco.

   Mini-API (o componente que hospeda a dica sobrescreve só os tokens):
     --tip-inset / --tip-shift  onde o balão abre (padrão: acima, centrado)
     --tip-w / --tip-wrap       deixam o balão quebrar linha quando é prosa */
[data-tip] { position: relative; }

[data-tip]:is(:hover, :focus-visible)::after {
  content: attr(data-tip); position: absolute; z-index: 5; pointer-events: none;
  inset: var(--tip-inset, auto auto calc(100% + 6px) 50%);
  translate: var(--tip-shift, -50% 0);

  /* max-content é obrigatório junto de max-width: sem ele o balão que quebra
     linha encolhe para a largura do gatilho, que costuma ser um ícone. */
  width: max-content; max-width: var(--tip-w, none);
  white-space: var(--tip-wrap, nowrap);

  font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.4;
  color: var(--surface); background: var(--ink); border-radius: var(--r); padding: 5px 9px;
}