/* components.css — o que os cards do bundle não trazem e o uso real precisa (código PRÓPRIO do sig2).
 *
 * O desenho de cada componente é GERADO do card (design/static/css/widgets/, pelo comando
 * `manage.py port_card_css`) e não se edita. Aqui fica só comportamento de página, sem valor de
 * design: quando a dica aparece, a marcação única da tag, e dois acertos de acessibilidade e de
 * tela pequena que o card não cobre (registrados em design/README.md como pendência de brief).
 * Carregado depois dos gerados. */

/* ── Tooltip ────────────────────────────────────────────────────────────────
   No card as dicas ficam fixas, para inspeção. No uso real a dica aparece no hover ou no foco do
   gatilho (como no Tooltip.jsx) e some com Esc (`.is-dismissed`, js/widgets/tooltip.js). Sair de
   display:none recomeça a animação de entrada do card. `.is-pinned` = dica fixa das prévias. */
.sg-tip-wrap:not(:hover, :focus-within, .is-pinned) > .sg-tip,
.sg-tip-wrap.is-dismissed:not(.is-pinned) > .sg-tip { display: none; }
/* Texto longo: o card deixa a dica numa linha só (`white-space:nowrap`) e ela estouraria a tela no
   celular (ADR-015). Acima de 240px passa a quebrar, com as medidas do Tooltip.jsx do mesmo
   bundle; dica curta, como todas as do card, fica idêntica. */
.sg-tip { width: max-content; max-width: 240px; white-space: normal; }
/* Recorte: o canto dobrado do card é um triângulo da cor do fundo por cima do canto da dica, do
   tamanho exato dele. Com a dica em meio pixel (ela é centrada pela metade da própria largura)
   sobrava um fio escuro na borda do canto. O triângulo ganha 1px de sobra para fora, à direita e
   em cima, como sombra dura da cor do fundo: ele mesmo não muda, e a diagonal do recorte fica
   exatamente a do card em qualquer escala de tela (mexer nas medidas dele a deslocava a 125%). */
@scope ([data-tooltip="notch"]) to ([data-tooltip]) {
    :scope .sg-tip::after {
        filter: drop-shadow(1px 0 0 var(--surface)) drop-shadow(0 -1px 0 var(--surface));
    }
}

/* ── Spinner ────────────────────────────────────────────────────────────────
   O card promete que todos os estilos param em movimento reduzido, mas a regra dele
   (`.sg-spinner *, .sg-spinner`) não alcança ::before/::after, que é onde seis estilos animam
   (Anel duplo, Pulso, Bola, Barra, Espiral, Eco). Completa a regra com o mesmo valor. */
@media (prefers-reduced-motion: reduce) {
    .sg-spinner::before, .sg-spinner::after,
    .sg-spinner *::before, .sg-spinner *::after { animation-duration: 0s !important; }
}

/* ── Tag ────────────────────────────────────────────────────────────────────
   Uma marcação só para os 10 estilos. O card troca o conteúdo no Chave-valor (rótulo e valor em
   peças separadas); aqui as duas formas vão na marcação e o estilo em vigor mostra a sua:
   .sg-tag__label = "Município: Sinop" · .sg-tag__k + .sg-tag__v = "Município" | "Sinop". */
.sg-tag__v { display: none; }
@scope ([data-tag="key-value"]) to ([data-tag]) {
    .sg-tag__v { display: inline; }
    .sg-tag__label { display: none; }
}
/* O remover é <button> ou <a> de verdade (no card, um <span role="button">): tira só o que o
   navegador desenha neles. `:where` não pesa, então nada do card perde para esta regra. */
:where(button).sg-tag__x { appearance: none; border: 0; padding: 0; background: none; font: inherit; }
:where(a).sg-tag__x:hover { text-decoration: none; }