/* ==========================================================================
   SGP — Camada 13: ajuda no ponto de uso (o "?" do glossário)

   O botão é irmão do rótulo, então ele mora na LINHA do rótulo e não pode
   empurrar nada: por isso `vertical-align: middle` e não `float`, e por isso o
   alvo de toque cresce por `padding` e não por tamanho de fonte.

   O balão usa a Popover API nativa — ele já vem na camada de topo do navegador
   (acima de modal, de barra fixa e de qualquer `overflow: hidden` de coluna),
   e é isso que dispensa JS. Onde houver `anchor-name` (Chrome 125+, e a partir
   daí os demais) o balão cola no "?"; onde não houver, ele cai no padrão do
   próprio navegador, centralizado na tela — que é uma degradação legítima,
   não um defeito.
   ========================================================================== */

/* O "?" DENTRO DE UM CAMPO.

   `.campo` é uma coluna flex (03_componentes.css): um irmão do rótulo vira uma
   LINHA inteira da coluna, esticada de ponta a ponta. Como a regra dura da
   fatia é que o botão NÃO pode morar dentro do <label>, quem se ajusta é o
   CSS: dentro de um campo o "?" sai do fluxo e ancora no alto, na altura da
   linha do rótulo. O `:has` limita o efeito aos campos que de fato têm dica —
   nenhum formulário do sistema muda por causa desta folha. */
.campo:has(> .dica) { position: relative; }

.campo > .dica {
  position: absolute;
  top: -2px;
  right: 0;
}

.dica {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: var(--esp-1);
  padding: var(--esp-1);
  border: 0;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--cor-texto-fraco);
  line-height: 0;
  cursor: help;
}

.dica:hover,
.dica[aria-expanded="true"] { color: var(--cor-acao); background: var(--cor-acao-suave); }

.dica:focus-visible {
  outline: none;
  color: var(--cor-acao);
  box-shadow: var(--sombra-foco);
}

.dica__icone { display: block; }

/* O balão. `:popover-open` é o estado aberto; fechado o navegador já aplica
   `display: none`, então não há nada a esconder aqui. */
.dica__balao {
  width: min(30rem, calc(100vw - var(--esp-8)));
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-elevado);
  color: var(--cor-texto);
  box-shadow: var(--sombra-lg);
}

.dica__balao:popover-open {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.dica__titulo {
  margin: 0;
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
}

.dica__texto {
  margin: 0;
  font-size: var(--texto-sm);
  line-height: var(--altura-solta);
  color: var(--cor-texto-suave);
}

.dica__fechar {
  align-self: flex-end;
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  cursor: pointer;
}

.dica__fechar:hover { border-color: var(--cor-acao); color: var(--cor-acao); }

/* Cola o balão no "?" que o abriu, onde o navegador souber ancorar. O par
   `anchor-name`/`position-anchor` vai INLINE, no helper: ele é único por dica,
   e âncora repetida faria todo balão da página se colar no último "?" dela. O
   `position-try-fallbacks` é o que evita o balão sair pela direita da tela em
   campo de formulário encostado na borda. */
@supports (anchor-name: --dica) {
  .dica__balao:popover-open {
    position: absolute;
    inset: auto;
    top: anchor(bottom);
    left: anchor(left);
    margin: var(--esp-2) 0 0;
    position-try-fallbacks: flip-block, flip-inline;
  }
}

/* O glossário como tabela (guia de estilos hoje, central de ajuda depois). */
.glossario__termo { font-weight: var(--peso-semi); white-space: nowrap; }
.glossario__curto { color: var(--cor-texto-suave); }